diff --git a/backend.js b/backend.js
index 8a92bd6..d5458aa 100644
--- a/backend.js
+++ b/backend.js
@@ -39,10 +39,10 @@ io.on('connection', (socket)=>{
     console.log('user connected')
     resetDisconnectTimer();
     bPlayers[socket.id] = {
-        x:615,
-        y:136,
-        clickX:615,
-        clickY:136,
+        x:790,
+        y:154,
+        clickX:790,
+        clickY:154,
         roomId:1,
         message:'',
         username:"Visitor",
diff --git a/public/characterSprites/Blue/64/Down.png b/public/characterSprites/Blue/64/Down.png
new file mode 100644
index 0000000..f3abeaf
Binary files /dev/null and b/public/characterSprites/Blue/64/Down.png differ
diff --git a/public/characterSprites/Blue/64/Left.png b/public/characterSprites/Blue/64/Left.png
new file mode 100644
index 0000000..f3abeaf
Binary files /dev/null and b/public/characterSprites/Blue/64/Left.png differ
diff --git a/public/characterSprites/Blue/64/Right.png b/public/characterSprites/Blue/64/Right.png
new file mode 100644
index 0000000..cedb27f
Binary files /dev/null and b/public/characterSprites/Blue/64/Right.png differ
diff --git a/public/characterSprites/Blue/64/Up.png b/public/characterSprites/Blue/64/Up.png
new file mode 100644
index 0000000..cedb27f
Binary files /dev/null and b/public/characterSprites/Blue/64/Up.png differ
diff --git a/public/characterSprites/Blue/Down.png b/public/characterSprites/Blue/Down.png
index f3abeaf..4a1d2dd 100644
Binary files a/public/characterSprites/Blue/Down.png and b/public/characterSprites/Blue/Down.png differ
diff --git a/public/characterSprites/Blue/Left.png b/public/characterSprites/Blue/Left.png
index f3abeaf..4a1d2dd 100644
Binary files a/public/characterSprites/Blue/Left.png and b/public/characterSprites/Blue/Left.png differ
diff --git a/public/characterSprites/Blue/Right.png b/public/characterSprites/Blue/Right.png
index cedb27f..9b24108 100644
Binary files a/public/characterSprites/Blue/Right.png and b/public/characterSprites/Blue/Right.png differ
diff --git a/public/characterSprites/Blue/Up.png b/public/characterSprites/Blue/Up.png
index cedb27f..9b24108 100644
Binary files a/public/characterSprites/Blue/Up.png and b/public/characterSprites/Blue/Up.png differ
diff --git a/public/characterSprites/Green/64/Down.png b/public/characterSprites/Green/64/Down.png
new file mode 100644
index 0000000..236e285
Binary files /dev/null and b/public/characterSprites/Green/64/Down.png differ
diff --git a/public/characterSprites/Green/64/Left.png b/public/characterSprites/Green/64/Left.png
new file mode 100644
index 0000000..236e285
Binary files /dev/null and b/public/characterSprites/Green/64/Left.png differ
diff --git a/public/characterSprites/Green/64/Right.png b/public/characterSprites/Green/64/Right.png
new file mode 100644
index 0000000..8ca4ab0
Binary files /dev/null and b/public/characterSprites/Green/64/Right.png differ
diff --git a/public/characterSprites/Green/64/Up.png b/public/characterSprites/Green/64/Up.png
new file mode 100644
index 0000000..8ca4ab0
Binary files /dev/null and b/public/characterSprites/Green/64/Up.png differ
diff --git a/public/characterSprites/Green/Down.png b/public/characterSprites/Green/Down.png
index 236e285..e56cd72 100644
Binary files a/public/characterSprites/Green/Down.png and b/public/characterSprites/Green/Down.png differ
diff --git a/public/characterSprites/Green/Left.png b/public/characterSprites/Green/Left.png
index 236e285..e56cd72 100644
Binary files a/public/characterSprites/Green/Left.png and b/public/characterSprites/Green/Left.png differ
diff --git a/public/characterSprites/Green/Right.png b/public/characterSprites/Green/Right.png
index 8ca4ab0..b9583ba 100644
Binary files a/public/characterSprites/Green/Right.png and b/public/characterSprites/Green/Right.png differ
diff --git a/public/characterSprites/Green/Up.png b/public/characterSprites/Green/Up.png
index 8ca4ab0..b9583ba 100644
Binary files a/public/characterSprites/Green/Up.png and b/public/characterSprites/Green/Up.png differ
diff --git a/public/characterSprites/Orange/64/Down.png b/public/characterSprites/Orange/64/Down.png
new file mode 100644
index 0000000..19fa928
Binary files /dev/null and b/public/characterSprites/Orange/64/Down.png differ
diff --git a/public/characterSprites/Orange/64/Left.png b/public/characterSprites/Orange/64/Left.png
new file mode 100644
index 0000000..7af9a41
Binary files /dev/null and b/public/characterSprites/Orange/64/Left.png differ
diff --git a/public/characterSprites/Orange/64/Right.png b/public/characterSprites/Orange/64/Right.png
new file mode 100644
index 0000000..19fa928
Binary files /dev/null and b/public/characterSprites/Orange/64/Right.png differ
diff --git a/public/characterSprites/Orange/64/Up.png b/public/characterSprites/Orange/64/Up.png
new file mode 100644
index 0000000..7af9a41
Binary files /dev/null and b/public/characterSprites/Orange/64/Up.png differ
diff --git a/public/characterSprites/Orange/Down.png b/public/characterSprites/Orange/Down.png
index 19fa928..c0ea765 100644
Binary files a/public/characterSprites/Orange/Down.png and b/public/characterSprites/Orange/Down.png differ
diff --git a/public/characterSprites/Orange/Left.png b/public/characterSprites/Orange/Left.png
index 7af9a41..a8b88f7 100644
Binary files a/public/characterSprites/Orange/Left.png and b/public/characterSprites/Orange/Left.png differ
diff --git a/public/characterSprites/Orange/Right.png b/public/characterSprites/Orange/Right.png
index 19fa928..c0ea765 100644
Binary files a/public/characterSprites/Orange/Right.png and b/public/characterSprites/Orange/Right.png differ
diff --git a/public/characterSprites/Orange/Up.png b/public/characterSprites/Orange/Up.png
index 7af9a41..a8b88f7 100644
Binary files a/public/characterSprites/Orange/Up.png and b/public/characterSprites/Orange/Up.png differ
diff --git a/public/characterSprites/Red/64/Downold.png b/public/characterSprites/Red/64/Downold.png
new file mode 100644
index 0000000..1193e10
Binary files /dev/null and b/public/characterSprites/Red/64/Downold.png differ
diff --git a/public/characterSprites/Red/64/Leftold.png b/public/characterSprites/Red/64/Leftold.png
new file mode 100644
index 0000000..1193e10
Binary files /dev/null and b/public/characterSprites/Red/64/Leftold.png differ
diff --git a/public/characterSprites/Red/64/Right.png b/public/characterSprites/Red/64/Right.png
new file mode 100644
index 0000000..871eeef
Binary files /dev/null and b/public/characterSprites/Red/64/Right.png differ
diff --git a/public/characterSprites/Red/64/Up.png b/public/characterSprites/Red/64/Up.png
new file mode 100644
index 0000000..871eeef
Binary files /dev/null and b/public/characterSprites/Red/64/Up.png differ
diff --git a/public/characterSprites/Red/Down.png b/public/characterSprites/Red/Down.png
index 1193e10..44ede0f 100644
Binary files a/public/characterSprites/Red/Down.png and b/public/characterSprites/Red/Down.png differ
diff --git a/public/characterSprites/Red/Left.png b/public/characterSprites/Red/Left.png
index 1193e10..44ede0f 100644
Binary files a/public/characterSprites/Red/Left.png and b/public/characterSprites/Red/Left.png differ
diff --git a/public/characterSprites/Red/Right.png b/public/characterSprites/Red/Right.png
index 871eeef..4c6685c 100644
Binary files a/public/characterSprites/Red/Right.png and b/public/characterSprites/Red/Right.png differ
diff --git a/public/characterSprites/Red/Up.png b/public/characterSprites/Red/Up.png
index 871eeef..4c6685c 100644
Binary files a/public/characterSprites/Red/Up.png and b/public/characterSprites/Red/Up.png differ
diff --git a/public/css/cafe.css b/public/css/cafe.css
index 87db8cb..aa24b85 100644
--- a/public/css/cafe.css
+++ b/public/css/cafe.css
@@ -18,6 +18,15 @@ before and after the text */
     /* if you want something (like the header) to be Wider than
 the other elements, you will need to move that div outside
 of the container */
+html{
+    /* image-rendering: optimizeSpeed;              */
+    /* image-rendering: -moz-crisp-edges;          
+    image-rendering: -o-crisp-edges;            
+    image-rendering: -webkit-optimize-contrast; 
+    image-rendering: pixelated;                 
+    image-rendering: optimize-contrast;         
+    -ms-interpolation-mode: nearest-neighbor;                          */
+}
 .credits{
     margin-top: 10px;
     font-size: 12px;
diff --git a/public/css/style.css b/public/css/style.css
index 67623c6..f81d248 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -397,7 +397,7 @@ before and after the text */
 the other elements, you will need to move that div outside
 of the container */
     #container {
-        max-width: 960px;
+        max-width: 1080px;
         /* this is the width of your layout! */
         /* if you change the above value, scroll to the bottom
 and change the media query according to the comment! */
diff --git a/public/img/Sprite-0001.aseprite b/public/img/Sprite-0001.aseprite
new file mode 100644
index 0000000..bcd2dd7
Binary files /dev/null and b/public/img/Sprite-0001.aseprite differ
diff --git a/public/img/TV.png b/public/img/TV.png
new file mode 100644
index 0000000..b7ba131
Binary files /dev/null and b/public/img/TV.png differ
diff --git a/public/img/baackground200.png b/public/img/baackground200.png
new file mode 100644
index 0000000..c024528
Binary files /dev/null and b/public/img/baackground200.png differ
diff --git a/public/img/baackground300.png b/public/img/baackground300.png
new file mode 100644
index 0000000..349cd67
Binary files /dev/null and b/public/img/baackground300.png differ
diff --git a/public/img/baackground300adj.png b/public/img/baackground300adj.png
new file mode 100644
index 0000000..d52ad5f
Binary files /dev/null and b/public/img/baackground300adj.png differ
diff --git a/public/img/cafebackgrounNEWTESTTESTcropped.png b/public/img/cafebackgrounNEWTESTTESTcropped.png
index 379340f..2b05f36 100644
Binary files a/public/img/cafebackgrounNEWTESTTESTcropped.png and b/public/img/cafebackgrounNEWTESTTESTcropped.png differ
diff --git a/public/img/fireplace-export.png b/public/img/fireplace-export.png
new file mode 100644
index 0000000..1a6516f
Binary files /dev/null and b/public/img/fireplace-export.png differ
diff --git a/public/img/fireplace.gif b/public/img/fireplace.gif
new file mode 100644
index 0000000..90b3b00
Binary files /dev/null and b/public/img/fireplace.gif differ
diff --git a/public/img/fireplace.png b/public/img/fireplace.png
new file mode 100644
index 0000000..513b417
Binary files /dev/null and b/public/img/fireplace.png differ
diff --git a/public/index.html b/public/index.html
index 465598b..b8dbb98 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,7 +27,7 @@
     <div class="scanlines">
       <div class="screen">
       <!-- <div class="asciiArt">Görkem's Webspace</div> -->
-      <div class="asciiArt">CyberCafe   #  *</div>
+      <div class="asciiArt">SpookyCafe   #  *</div>
       <script>
         figlet.defaults({ fontPath: "/css" });
         ascii = document.getElementsByClassName("asciiArt");
diff --git a/public/index.js b/public/index.js
index b91843b..ac328da 100644
--- a/public/index.js
+++ b/public/index.js
@@ -47,8 +47,8 @@ if(!localStorage.getItem('username')){
    }
 // setInterval(player.animate, 50);
 
-canvas.width = 32 * 21 //672
-canvas.height = 32 * 12 //384
+canvas.width = 32 * 26//32 * 21 //672
+canvas.height = 32 * 15 //32 * 12 //384
 
 console.log(ctx);
 
@@ -59,7 +59,16 @@ const room1 = new Sprite({
         x:0,
         y:0
     },
-    imageSrc: './img/baackground.png'
+    imageSrc: './img/baackground300adj.png'
+})
+
+const TV = new Sprite({
+    position:{
+        x:95,
+        y:122
+    },
+    imageSrc: './img/TV.png',
+    frames: 27
 })
 
 
@@ -145,17 +154,29 @@ function getCursorPosition(canvas, event) {
 }
 
 // animate from point a to point b
+let frames_per_second = 60;
 
-let animationId
-// setInterval(animate, 60);
-function animate(){
+let interval = Math.floor(1000 / frames_per_second); // rounding down since our code will rarely run at the exact interval
+let startTime = performance.now();
+let previousTime = startTime;
+
+let currentTime = 0;
+let deltaTime = 0;
+
+// set anmiation speed 60fps regardless of display refresh rate, based on: https://www.kirupa.com/animations/ensuring_consistent_animation_speeds.htm
+function animate(timestamp){
  
     ctx.imageSmoothingEnabled = false;
+
+    currentTime = timestamp;
+    deltaTime = currentTime - previousTime;
     // console.log(pageVisible)
-    
+    if (deltaTime > interval) {
+        previousTime = currentTime - (deltaTime % interval);
     // ctx.clearRect(0,0,canvas.width,canvas.height);
-    room1.draw()
-    animationId = requestAnimationFrame(animate);
+    room1.draw();
+    TV.draw()
+    
     if(readyNow){
     // ctx.drawImage(background,0,0); 
 
@@ -169,8 +190,11 @@ function animate(){
     
     }
 
+}
+
     // fPlayer = fPlayers[socket.id]
 
+
     // if(){}
 // goToPosition(fPlayer,clickCoordinates)
 
@@ -178,7 +202,7 @@ function animate(){
     // console.log(fPlayer.animationColumn)
     // return [incrementX,incrementY]
 }
-
+requestAnimationFrame(animate);
 // function goToPosition(fPlayer,clickCoordinates){
     
     
@@ -188,7 +212,7 @@ function animate(){
 
 
 
-animate()
+requestAnimationFrame(animate);