diff --git a/webAO/utils/fileExists.js b/webAO/utils/fileExists.js
deleted file mode 100644
index 5b609764..00000000
--- a/webAO/utils/fileExists.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const fileExists = async (url) => new Promise((resolve) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('HEAD', url);
-    xhr.onload = function checkLoad() {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                resolve(true);
-            } else {
-                resolve(false);
-            }
-        }
-    };
-    xhr.onerror = function checkError() {
-        resolve(false);
-    };
-    xhr.send(null);
-});
-export default fileExists;
diff --git a/webAO/utils/fileExists.ts b/webAO/utils/fileExists.ts
new file mode 100644
index 00000000..abb29284
--- /dev/null
+++ b/webAO/utils/fileExists.ts
@@ -0,0 +1,19 @@
+export default async function fileExists(url: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('HEAD', url);
+        xhr.onload = function checkLoad() {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            }
+        };
+        xhr.onerror = function checkError() {
+            resolve(false);
+        };
+        xhr.send(null);
+    });
+}
diff --git a/webAO/utils/filesExist.ts b/webAO/utils/filesExist.ts
new file mode 100644
index 00000000..2f394275
--- /dev/null
+++ b/webAO/utils/filesExist.ts
@@ -0,0 +1,28 @@
+import fileExists from "./fileExists";
+
+/**
+ * This function takes a list of urls and returns the first one that exists.
+ * It checks all the URLs in parallel.
+ * @param urls the list of URLs to check
+ * @returns either the first URL that exists or null if none were found
+ */
+export default async function filesExist(urls: string[]): Promise<string | null> {
+    const promises = urls.map(async (url) => {
+        if (await fileExists(url)) {
+            return url;
+        }
+        return null;
+    });
+
+    // Run all in parallel
+    const results = await Promise.all(promises);
+
+    // Find the first URL that exists (not null) or return null if none exist
+    for (const result of results) {
+        if (result !== null) {
+            return result;
+        }
+    }
+
+    return null; // None of the URLs exist
+}
diff --git a/webAO/utils/findImgSrc.ts b/webAO/utils/findImgSrc.ts
new file mode 100644
index 00000000..b4db849d
--- /dev/null
+++ b/webAO/utils/findImgSrc.ts
@@ -0,0 +1,19 @@
+import filesExist from "./filesExist";
+import transparentPng from '../constants/transparentPng'
+
+/**
+ * This function takes a list of urls and returns the first one that exists.
+ * If none is found, return a transparent png.
+ * The function will always return a value that is appriopriate for an img src.
+ * @param urls The list of urls to try
+ * @returns The image source of the first url that exists, or a transparent png if none exist
+ */
+export default async function findImgSrc(urls: string[]): Promise<string> {
+    return filesExist(urls).then((url) => {
+        if (url !== null) {
+            return url;
+        }
+        // If none of the images exist, return a transparent png
+        return transparentPng;
+    });
+}
diff --git a/webAO/viewport/utils/setSide.ts b/webAO/viewport/utils/setSide.ts
index 3726e83d..77d17445 100644
--- a/webAO/viewport/utils/setSide.ts
+++ b/webAO/viewport/utils/setSide.ts
@@ -2,7 +2,7 @@ import { positions } from '../constants/positions'
 import { AO_HOST } from '../../client/aoHost'
 import { client } from '../../client'
 import tryUrls from '../../utils/tryUrls';
-import fileExists from '../../utils/fileExists';
+import findImgSrc from '../../utils/findImgSrc';
 
 /**
  * Changes the viewport background based on a given position.
@@ -21,7 +21,7 @@ export const set_side = async ({
 }) => {
     const view = document.getElementById("client_fullview")!;
     let bench: HTMLImageElement;
-    if (['def','pro','wit'].includes(position)) {
+    if (['def', 'pro', 'wit'].includes(position)) {
         bench = <HTMLImageElement>(
             document.getElementById(`client_${position}_bench`)
         );
@@ -57,13 +57,14 @@ export const set_side = async ({
     } else {
         court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg);
     }
-    
-    
+
     if (showDesk === true && desk) {
-        const deskFilename = (await fileExists(client.viewport.getBackgroundFolder() + desk.ao2))
-            ? desk.ao2
-            : desk.ao1;
-        bench.src = client.viewport.getBackgroundFolder() + deskFilename;
+        const bg_folder = client.viewport.getBackgroundFolder();
+        const urls_to_try = [
+            bg_folder + desk.ao2,
+            bg_folder + desk.ao1,
+        ];
+        bench.src = await findImgSrc(urls_to_try);
         bench.style.opacity = "1";
     } else {
         bench.style.opacity = "0";