diff --git a/web/encounter.js b/web/encounter.js
index 6a497db..9853e52 100644
--- a/web/encounter.js
+++ b/web/encounter.js
@@ -12,22 +12,36 @@ document.getElementById('terrainForm').addEventListener('submit', function(event
         })
     }).then(response => {
         if (!response.ok) { throw response }
-        return response.json()  //we only get here if there is no error
+        return response.json()  // we only get here if there is no error
     }).then(json => {
         //Handle null encounter
         let encounterText = json.encounter ? json.encounter : "No Encounter";
         let resultSection = document.getElementById('resultSection');
-        resultSection.style.textAlign = 'center'; // To center text
-        resultSection.style.fontSize = '1.5em'; // Relative to current font-size (1.5 times the size of the current font)
-        resultSection.style.fontWeight = 'bold'; //To make it bold like H3
-        resultSection.innerText = encounterText;
+        resultSection.innerHTML = '';
+
+        // Create an image element and set its src to the corresponding jpeg image
+        let imgElement = document.createElement("img");
+        imgElement.alt = encounterText;
+        imgElement.width = 500; // You can set width as per your choice
+        imgElement.height = 500; // You can set height as per your choice
+        imgElement.onerror = function() {
+            this.onerror=null;
+            this.src='./img/404.jpg';
+        }
+        imgElement.src = "./img/" + encounterText + ".jpg";
+
+        // Append the image element to the resultSection
+        resultSection.appendChild(imgElement);
     }).catch(err => {
         err.text().then(errorMessage => {
+            let imgElement = document.createElement("img");
+            imgElement.src = "./img/404.jpg";
+            imgElement.width = 500;
+            imgElement.height = 500;
+
             let resultSection = document.getElementById('resultSection');
-            resultSection.style.textAlign = 'center';
-            resultSection.style.fontSize = '1.5em';
-            resultSection.style.fontWeight = 'bold';
-            resultSection.innerText = errorMessage;
+            resultSection.innerHTML = '';
+            resultSection.appendChild(imgElement);
         })
     });
 });
\ No newline at end of file
diff --git a/web/img/404.jpg b/web/img/404.jpg
new file mode 100644
index 0000000..216fa1f
Binary files /dev/null and b/web/img/404.jpg differ
diff --git a/web/img/No Encounter.jpg b/web/img/No Encounter.jpg
new file mode 100644
index 0000000..105657c
Binary files /dev/null and b/web/img/No Encounter.jpg differ
diff --git a/web/img/android.jpg b/web/img/android.jpg
new file mode 100644
index 0000000..605da06
Binary files /dev/null and b/web/img/android.jpg differ
diff --git a/web/img/ber lep.jpg b/web/img/berlep.jpg
similarity index 100%
rename from web/img/ber lep.jpg
rename to web/img/berlep.jpg
diff --git a/web/img/calthen.jpg b/web/img/calthen.jpg
new file mode 100644
index 0000000..f7f8d47
Binary files /dev/null and b/web/img/calthen.jpg differ
diff --git a/web/img/cren tosh.jpg b/web/img/crentosh.jpg
similarity index 100%
rename from web/img/cren tosh.jpg
rename to web/img/crentosh.jpg
diff --git a/web/img/crep plant.jpg b/web/img/crep plant.jpg
new file mode 100644
index 0000000..e23dc78
Binary files /dev/null and b/web/img/crep plant.jpg differ
diff --git a/web/img/gren.jpg b/web/img/grens.jpg
similarity index 100%
rename from web/img/gren.jpg
rename to web/img/grens.jpg
diff --git a/web/img/kai lin.jpg b/web/img/kailin.jpg
similarity index 100%
rename from web/img/kai lin.jpg
rename to web/img/kailin.jpg
diff --git a/web/img/komodo.jpg b/web/img/kamodo.jpg
similarity index 100%
rename from web/img/komodo.jpg
rename to web/img/kamodo.jpg
diff --git a/web/img/mantas.jpg b/web/img/manta.jpg
similarity index 100%
rename from web/img/mantas.jpg
rename to web/img/manta.jpg
diff --git a/web/img/narl ep.jpg b/web/img/narlep.jpg
similarity index 100%
rename from web/img/narl ep.jpg
rename to web/img/narlep.jpg
diff --git a/web/img/pineto.jpg b/web/img/pineto.jpg
new file mode 100644
index 0000000..23238a7
Binary files /dev/null and b/web/img/pineto.jpg differ
diff --git a/web/img/rakox.jpg b/web/img/rakox.jpg
new file mode 100644
index 0000000..604fc73
Binary files /dev/null and b/web/img/rakox.jpg differ
diff --git a/web/img/seroon lou.jpg b/web/img/seroon loo.jpg
similarity index 100%
rename from web/img/seroon lou.jpg
rename to web/img/seroon loo.jpg
diff --git a/web/img/squeekr.jpg b/web/img/squeekr.jpg
new file mode 100644
index 0000000..dc0cae7
Binary files /dev/null and b/web/img/squeekr.jpg differ
diff --git a/web/img/win seen.jpg b/web/img/winseen.jpg
similarity index 100%
rename from web/img/win seen.jpg
rename to web/img/winseen.jpg
diff --git a/web/img/zeeth.jpg b/web/img/zeethh.jpg
similarity index 100%
rename from web/img/zeeth.jpg
rename to web/img/zeethh.jpg