diff --git a/client/res/.gitignore b/client/res/.gitignore
index c5d9347ecac15b7ea248e668896fbfdc0e2f8dca..25eb906f699d422f5ad626677cbf261ee6b05d4d 100644
--- a/client/res/.gitignore
+++ b/client/res/.gitignore
@@ -1 +1,4 @@
-*.kra~
\ No newline at end of file
+*.kra*
+paintnet/*
+*.log
+
diff --git a/client/res/MouthsAndEyes.gif b/client/res/MouthsAndEyes.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ed5240368cc9437b52a811a0ca99afa4dab1390c
Binary files /dev/null and b/client/res/MouthsAndEyes.gif differ
diff --git a/client/res/pi.gif b/client/res/pi.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7668e7fb1c57f3b881ae79c99df6ce220e306505
Binary files /dev/null and b/client/res/pi.gif differ
diff --git a/client/res/selectArrows.gif b/client/res/selectArrows.gif
new file mode 100644
index 0000000000000000000000000000000000000000..471bcd941529067d0de354d4332af0026e3fb021
Binary files /dev/null and b/client/res/selectArrows.gif differ
diff --git a/client/ui/SkribblMenu.js b/client/ui/SkribblMenu.js
index aa613e110d748a78f0aa3354dc782da7629c6d26..4308e47e7302159706943448f8b5ecd6e3178257 100644
--- a/client/ui/SkribblMenu.js
+++ b/client/ui/SkribblMenu.js
@@ -23,7 +23,7 @@ export default class SkribblMenu extends HTMLElement {
 					border:none;
 					height:34px;
 					width:34px;
-					background: url('/res/selectArrows.png');
+					background: url('/res/selectArrows.gif');
 					background-size: 54px;
 					background-repeat: no-repeat;
 					cursor: pointer;
@@ -74,6 +74,11 @@ export default class SkribblMenu extends HTMLElement {
 					justify-content: center;
 					position: relative;
 				}
+				#avatar-container{
+					flex: 0 0 auto;
+					width:66px;
+					height:96px; 
+				}
 
 			
 
diff --git a/client/ui/SkribblPlayerIcon.js b/client/ui/SkribblPlayerIcon.js
index ddc2107f012a041cc7a0ed67b613c360612c6908..ab1b06a5edc9cb104255c7bcf5d8651a080fd7e4 100644
--- a/client/ui/SkribblPlayerIcon.js
+++ b/client/ui/SkribblPlayerIcon.js
@@ -15,20 +15,23 @@
 					border-radius: 5px;
 				}
 				.container-character{
-					border: 2px solid #777;
-					border-radius: 10px;
+					background:url("/res/pi.gif");
+					background-size:contain;
+					background-repeat: no-repeat;
 				}
                 .character-eyes{
 					height: 34px;
-					width: 34px;
-					background:url("/res/MouthsAndEyes.png");
-					background-position: 10px 0;
+					width: 68px;
+					background:url("/res/MouthsAndEyes.gif");
+					background-position: 25px 18px;
+					background-repeat: no-repeat;
 				}
 				.character-mouth{
 					height: 34px;
-					width: 34x;
-					background:url("/res/MouthsAndEyes.png");
-					background-position: 0px -52px;
+					width: 68x;
+					background:url("/res/MouthsAndEyes.gif");
+					background-position: 24px -32px;
+					background-repeat: no-repeat;
 				}
 			</style>
 
@@ -43,26 +46,31 @@
 
 	/** @param {boolean} toTheRight */
 	changeEye(toTheRight) {
-		let displacement = 80;
-
+		let displacement = 38;
 		if (toTheRight){
 			this.eyesDisplacement += displacement;
 		}else{
 			this.eyesDisplacement -= displacement;
 		}
+		if(this.eyesDisplacement>266){
+			this.eyesDisplacement = 10;
+		}
 		const eye = this.shadowRoot.getElementById("eyes");
 		eye.style.backgroundPositionX = this.eyesDisplacement+"px";
 	}
 
 	/** @param {boolean} toTheRight */
 	changeMouth(toTheRight) {
-		let displacement = 80;
+		let displacement = 38;
 
 		if (toTheRight){
 			this.mouthDisplacement += displacement;
 		}else{
 			this.mouthDisplacement -= displacement;
 		}
+		if(this.mouthDisplacement>266){
+			this.mouthDisplacement = 0;
+		}
 		const mouth = this.shadowRoot.getElementById("mouth");
 		mouth.style.backgroundPositionX = this.mouthDisplacement+"px";
 	}