diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index 938fb0d3..247845b2 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -44,6 +44,20 @@ export const handlePV = async (args: string[]) => {
                 }
                 // Make sure the asset server is case insensitive, or that everything on it is lowercase
 
+                const extensionsMap = [".png", ".webp"];
+                let url;
+                for (const extension of extensionsMap) {
+                    url = `${AO_HOST}characters/${encodeURI(
+                        me.name.toLowerCase()
+                    )}/emotions/button${i}_off${extension}`;
+
+                    const exists = await fileExists(url);
+
+                    if (exists) {
+                        break;
+                    }
+                }
+
                 emotes[i] = {
                     desc: emoteinfo[0].toLowerCase(),
                     preanim: emoteinfo[1].toLowerCase(),
@@ -55,9 +69,7 @@ export const handlePV = async (args: string[]) => {
                     frame_screenshake: "",
                     frame_realization: "",
                     frame_sfx: "",
-                    button: `${AO_HOST}characters/${encodeURI(
-                        me.name.toLowerCase()
-                    )}/emotions/button${i}_off.png`,
+                    button: url,
                 };
 
                 const emote_item = new Image();
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 9671a9a0..702766e6 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -241,7 +241,7 @@
 }
 
 .def_court {
-	object-position: left;
+	object-position: center;
 }
 
 .wit_court {
@@ -249,7 +249,7 @@
 }
 
 .pro_court {
-	object-position: right;
+	object-position: center;
 }
 
 #client_fullview {
@@ -278,11 +278,11 @@
 .client_char>img {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
-	left: 0;
-	object-fit: cover;
-	object-position: 50% 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
 }
 
 #client_bench_classic {
@@ -311,17 +311,19 @@
 
 .client_bench {
 	position: absolute;
-	height: auto;
-	width: 100%;
+	height: 100%;
 	bottom: 0;
+	object-fit: contain;
 }
 
 #client_fg {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_evi {
@@ -725,4 +727,4 @@
 .hrtext:after {
 	left: 0.5em;
 	margin-right: -50%;
-}
+}
\ No newline at end of file
diff --git a/webAO/styles/default.css b/webAO/styles/default.css
index 5e941e07..8a090cb8 100644
--- a/webAO/styles/default.css
+++ b/webAO/styles/default.css
@@ -2,11 +2,25 @@ body {
 	font-family: sans-serif;
 }
 
+@media (max-height: 270x) {
+	img {
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+	}
+
+}
+
 img {
+	image-rendering: auto;
+}
+
+img[src$=".gif"],
+img[src$=".apng"] {
 	image-rendering: crisp-edges;
 	image-rendering: pixelated;
 }
 
+
 .client_button {
 	margin: 1px;
 	padding: 2px 15px;
diff --git a/webAO/viewport/viewport.ts b/webAO/viewport/viewport.ts
index af147da4..8a1e97d9 100644
--- a/webAO/viewport/viewport.ts
+++ b/webAO/viewport/viewport.ts
@@ -234,9 +234,6 @@ const viewport = (): Viewport => {
     // note: this is called fairly often
     // do not perform heavy operations here
     await delay(chatmsg.speed);
-    if (textnow === chatmsg.content) {
-      return;
-    }
 
     const gamewindow = document.getElementById("client_gamewindow");
     const waitingBox = document.getElementById("client_chatwaiting");
@@ -444,6 +441,9 @@ const viewport = (): Viewport => {
         );
       }
     }
+    if (textnow === chatmsg.content) {
+      return;
+    }
     if (animating) {
       chat_tick();
     }