diff --git a/backend.js b/backend.js
index 552cd16..f9e33d5 100644
--- a/backend.js
+++ b/backend.js
@@ -37,6 +37,7 @@ const bPlayers = {
 
 io.on('connection', (socket)=>{
     console.log('user connected')
+    resetDisconnectTimer();
     bPlayers[socket.id] = {
         x:615,
         y:136,
@@ -56,10 +57,13 @@ io.on('connection', (socket)=>{
     })
 
     socket.on('clickPosition',(coordinates)=>{
+        resetDisconnectTimer();
         bPlayers[socket.id].clickX = coordinates[0]
         bPlayers[socket.id].clickY = coordinates[1]
         bPlayers[socket.id].x = bPlayers[socket.id].clickX
         bPlayers[socket.id].y = bPlayers[socket.id].clickY
+   
+
         console.log(bPlayers)
     })
 
@@ -83,6 +87,11 @@ io.on('connection', (socket)=>{
 
         console.log(bPlayers)
     })
+
+    function resetDisconnectTimer(){
+        clearTimeout(socket.inactivityTimeout);
+        socket.inactivityTimeout = setTimeout(() => socket.disconnect(true), 1000 * 60 * 15);
+    }
     // socket.on('clickPositionX',(coordinates)=>{
     //     bPlayers[socket.id].x = coordinates
     //     console.log(coordinates)
@@ -101,4 +110,5 @@ setInterval(() =>{
 
 server.listen((process.env.PORT || 3000),() =>{
     console.log(`app listening on port ${(process.env.PORT || 3000)}`)
-})
\ No newline at end of file
+})
+
diff --git a/public/Down.png b/public/Down.png
index d75d75c..d046346 100644
Binary files a/public/Down.png and b/public/Down.png differ
diff --git a/public/Left.png b/public/Left.png
index f8ff3ae..c31fb1a 100644
Binary files a/public/Left.png and b/public/Left.png differ
diff --git a/public/Right.png b/public/Right.png
index 0ad6fda..308266b 100644
Binary files a/public/Right.png and b/public/Right.png differ
diff --git a/public/Up.png b/public/Up.png
index 060843c..7ea3c54 100644
Binary files a/public/Up.png and b/public/Up.png differ
diff --git a/public/cafebackground..js b/public/cafebackground..js
new file mode 100644
index 0000000..2aeb0e7
--- /dev/null
+++ b/public/cafebackground..js
@@ -0,0 +1,115 @@
+(function(name,data){
+ if(typeof onTileMapLoaded === 'undefined') {
+  if(typeof TileMaps === 'undefined') TileMaps = {};
+  TileMaps[name] = data;
+ } else {
+  onTileMapLoaded(name,data);
+ }
+ if(typeof module === 'object' && module && module.exports) {
+  module.exports = data;
+ }})("cafebackground",
+{ "compressionlevel":-1,
+ "height":12,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 23,
+            56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 39, 39, 58, 41,
+            56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 41,
+            74, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 77,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
+            128, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 131],
+         "height":12,
+         "id":1,
+         "name":"Tile Layer 1",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":21,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169, 170, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 187, 188, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205, 206, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":12,
+         "id":3,
+         "name":"doorframe",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":21,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 444, 0, 0, 0, 0, 0, 0,
+            0, 590, 0, 0, 0, 0, 0, 0, 0, 229, 230, 0, 0, 443, 444, 0, 0, 0, 171, 172, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 247, 248, 0, 0, 741, 742, 0, 0, 0, 189, 190, 735,
+            473, 478, 479, 480, 481, 562, 563, 0, 0, 0, 0, 0, 0, 754, 755, 0, 0, 0, 207, 208, 748,
+            486, 491, 492, 493, 494, 575, 576, 0, 0, 0, 0, 0, 0, 767, 768, 0, 0, 0, 377, 378, 761,
+            743, 744, 374, 375, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            756, 757, 387, 388, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            769, 770, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            440, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            453, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484209, 2147484208,
+            466, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484222, 2147484221],
+         "height":12,
+         "id":2,
+         "name":"doors and windows",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":21,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":4,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.10.2",
+ "tileheight":16,
+ "tilesets":[
+        {
+         "firstgid":1,
+         "source":"..\/..\/..\/Tileassets\/TopDownHouse_FloorsAndWalls.tsx"
+        }, 
+        {
+         "firstgid":163,
+         "source":"..\/..\/..\/Tileassets\/TopDownHouse_DoorsAndWindows.tsx"
+        }, 
+        {
+         "firstgid":343,
+         "source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState2.tsx"
+        }, 
+        {
+         "firstgid":577,
+         "source":"..\/..\/..\/Tileassets\/TopDownHouse_SmallItems.tsx"
+        }, 
+        {
+         "firstgid":641,
+         "source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState1.tsx"
+        }],
+ "tilewidth":16,
+ "type":"map",
+ "version":"1.10",
+ "width":21
+});
\ No newline at end of file
diff --git a/public/classes/Player.js b/public/classes/Player.js
index 6b28166..d9e3a05 100644
--- a/public/classes/Player.js
+++ b/public/classes/Player.js
@@ -55,7 +55,8 @@ class Player extends Sprite {
         
     }
     update(){
-        if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-25,this.position.y-100,10)}
+        if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-20,this.position.y-100,10)}
+        // CollisionRect(this,"hsla(141, 100%, 52%, 0.5)")
 
         ctx.beginPath();
         ctx.textAlign = "center";
@@ -65,40 +66,12 @@ class Player extends Sprite {
         ctx.font = 'normal 15px sans-serif';
         
         ctx.fillStyle = 'black';
-        ctx.fillText(this.message, this.position.x-5, this.position.y-80,200);
+        ctx.fillText(this.message, this.position.x, this.position.y-80);
 
         ctx.fill()
 
 
-        function SpeechBubble(ctx, width, height, color, x, y, radius, text)
-        {
-          var maxWidth = 300;
-          var r = radius;
-          var w = (width > maxWidth ? maxWidth : width) + 40;
-          var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10;
-          var pi2 = Math.PI * 2;
-          var ap = w/2-10;
-          var aw = 20;
-          var ah = 10;
-            x = x-(width/2)
-          // Speechbubble create start
-          ctx.beginPath();
-          ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75);
-          ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2);
-          ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25);
-          ctx.lineTo(x+w - ap, y+h);
-          ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah);
-          ctx.lineTo(x+w - ap - aw, y+h);
-          ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5);
-          ctx.fillStyle = color;
-          ctx.fill();
-          // Speechbubble create end
-        
-          // Speechbubble text start
-        //   ctx.fillStyle = "#fff";
-        //   wrapText(ctx, text, 25, 17, maxWidth, 16);
-          // Speechbubble text end
-        }
+
         
 //ctx.measureText(this.message).width
     
@@ -148,3 +121,39 @@ class Player extends Sprite {
 
 }
 
+function SpeechBubble(ctx, width, height, color, x, y, radius, text)
+{
+  var maxWidth = 300;
+  var r = radius;
+  var w = (width > maxWidth ? maxWidth : width) + 40;
+  var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10;
+  var pi2 = Math.PI * 2;
+  var ap = w/2-5;
+  var aw = 10;
+  var ah = 8;
+    x = x-(width/2)
+  // Speechbubble create start
+  ctx.beginPath();
+  ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75);
+  ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2);
+  ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25);
+  ctx.lineTo(x+w - ap, y+h);
+  ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah);
+  ctx.lineTo(x+w - ap - aw, y+h);
+  ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5);
+  ctx.fillStyle = color;
+  ctx.fill();
+  // Speechbubble create end
+
+  // Speechbubble text start
+//   ctx.fillStyle = "#fff";
+//   wrapText(ctx, text, 25, 17, maxWidth, 16);
+  // Speechbubble text end
+}
+
+function CollisionRect(object,color){
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.fillRect(object.position.x, object.position.y, object.width, object.height)
+    ctx.fill();
+}
diff --git a/public/classes/Sprite.js b/public/classes/Sprite.js
index 9d19aff..e57883c 100644
--- a/public/classes/Sprite.js
+++ b/public/classes/Sprite.js
@@ -75,4 +75,4 @@ class Sprite{
         }
     }
     }
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index ef15ead..2f23fa7 100644
--- a/public/index.js
+++ b/public/index.js
@@ -3,7 +3,6 @@ const ctx = canvas.getContext('2d')
 const socket = io()
 
 
-
 ctx.imageSmoothingEnabled = false;
 const speed = 2;
 var frameCount = 10
@@ -32,7 +31,9 @@ clickCoordinates = [100,100]
 // background.onload = function(){
 //     ctx.drawImage(background,0,0);   
 // }
-
+if(!localStorage.getItem('username')){
+    localStorage.setItem('username','Visitor')
+   }
 // setInterval(player.animate, 50);
 
 canvas.width = 32 * 21 //672
@@ -50,13 +51,21 @@ const background1 = new Sprite({
     imageSrc: './img/baackground.png'
 })
 
+
+socket.on('disconnect',(reason)=>{
+    console.log(reason);
+    if (confirm("Kicked to due inactivity, click OK to refresh page") == true) {
+        window.location.reload();
+      }
+})
+
 // const player = new Player(100,100,'Görkem')
 const fPlayers = {}
 
 socket.on('updatePlayers', (bPlayers) =>{
     for(const id in bPlayers){
         const bPlayer = bPlayers[id]
-
+        
         if(!fPlayers[id]){
             fPlayers[id] = new Player({
                 position:{
@@ -68,7 +77,7 @@ socket.on('updatePlayers', (bPlayers) =>{
                 clickX:bPlayer.clickX,
                 clickY:bPlayer.clickY,
                 userId:id,
-                username:'Visitor',
+                username:'',
                 message:'',
                 atPosition:true,
                 animationColumn:0,
@@ -83,6 +92,9 @@ socket.on('updatePlayers', (bPlayers) =>{
                 }
                 
             })
+            fPlayers[socket.id].username = localStorage.getItem('username')
+            socket.emit('username',fPlayers[socket.id].username);
+            
         } else { 
             // if players already exist
             fPlayers[id].clickX = bPlayer.clickX
@@ -162,8 +174,10 @@ function animate(){
 
 
 
-
 animate()
+
+
+
 canvas.addEventListener('mousedown', function(e) {
     clickCoordinates = getCursorPosition(canvas, e)
 
@@ -186,6 +200,7 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{
     if(inputValue.includes("/name ")){
         console.log('namechange')
         fPlayers[socket.id].username = inputValue.replace("/name ","")
+        localStorage.setItem('username',fPlayers[socket.id].username);
         socket.emit('username',fPlayers[socket.id].username)
     }else if(inputValue==='/debug'){
         if(debugMode) {debugMode=false;}else{debugMode=true;}