diff --git a/index.html b/index.html
index b63cba0..0f4c096 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,36 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
 <title>WebSocket Test</title>
+<style type="text/css">
+	body {
+		font-size: 16pt;
+	}
+	#circle_of_people {
+		position: absolute;
+		background-color: #fda;
+		width: 400px;
+		height: 400px;
+		opacity: 0.5;
+	}
+	.user {
+		-webkit-transition: left 0.5s, top 0.5s;
+		font-size: 20px;
+		position: absolute;
+	}
+	.user .name {
+		border-radius: 2px;
+		font-size: 12px;
+		padding: 2px;
+		background-color: #0af;
+	}
+</style>
 <script type="text/javascript" src="connection.js"></script>
 <script language="javascript" type="text/javascript">
 	var myName = Math.random().toString(36).substring(7);
 	var websocket;
-	var myself = {
-		"name": myName,
-		"width": 0,
-		"height": 0
-	};
 
 	function init() {
 		document.getElementById("myName").innerHTML = myName;
-		show_size();
 		testWebSocket();
 	}
 	function testWebSocket() {
@@ -28,15 +45,54 @@
 		doSend();
 	}
 	function onMessage(evt) {
-		document.getElementById("people").innerHTML = evt.data;
+		var circle = document.getElementById("circle_of_people");
+
+		var people = JSON.parse(evt.data);
+		for (var i = people.length - 1; i >= 0; i--) {
+			var user = document.getElementById(people[i].name);
+			if(user){
+				user.style.left = people[i].position.x + "px";
+				user.style.top = people[i].position.y + "px";
+			} else {
+				var name = document.createElement('span')
+				name.className = "name";
+				name.innerText = people[i].name;
+
+				var user = document.createElement('div');
+				user.id = people[i].name;
+				user.className = 'user';
+				user.innerHTML = '&bull; ';
+				user.appendChild(name);
+				user.style.left = people[i].position.x + "px";
+				user.style.top = people[i].position.y + "px";
+
+				circle.appendChild(user);
+			}
+		}
+
+		var nodes = circle.childNodes;
+		for(var i = nodes.length -1; i >= 0; i--) {
+			var should_remove = true;
+			for (var j = people.length - 1; j >= 0; j--){
+				if(people[j].name == nodes[i].id) {
+					should_remove = false;
+					break;
+				}
+			}
+			if(should_remove){
+				circle.removeChild(nodes[i]);
+			}
+		}
+
 		setTimeout(function(){
 			doSend();
-		}, 1000);
+		}, 500);
 	}
 	function doSend(message) {
-		myself.name = myName;
-		myself.width = window.innerWidth;
-		myself.height = window.innerHeight;
+		var myself = {
+			name: myName,
+			size: {width: window.innerWidth, height: window.innerHeight}
+		};
 
 		websocket.send(JSON.stringify(myself));
 	}
@@ -47,17 +103,12 @@
 		document.getElementById("status").innerHTML = "DISCONNECTED";
 	}
 
-	function show_size(){
-		document.getElementById("reso").innerHTML = window.innerWidth + 'x' + window.innerHeight;
-	}
-
 	window.addEventListener("load", init, false);
-	window.addEventListener("resize", show_size, false);
 </script>
 
 <p>My name is: <span id="myName"></span>
-<p>My resoltion is: <span id="reso"></span>
-<p>Response of server: <span id="people"></span>
 <p>Status: <span id="status">unknown</span>
 
+<div id="circle_of_people"></div>
+
 </html>
diff --git a/observer.html b/observer.html
index 10447b8..fc6aef2 100644
--- a/observer.html
+++ b/observer.html
@@ -58,8 +58,8 @@
 			var user = document.createElement('div');
 			user.className = 'user';
 			user.appendChild(name);
-			user.style.width = people[i].width + "px";
-			user.style.height = people[i].height + "px";
+			user.style.width = people[i].size.width + "px";
+			user.style.height = people[i].size.height + "px";
 
 			the_screen.appendChild(user);
 		};
