diff --git a/files/assets/js/gif_modal.js b/files/assets/js/gif_modal.js
index 56ad8e812..9214812ec 100644
--- a/files/assets/js/gif_modal.js
+++ b/files/assets/js/gif_modal.js
@@ -1,3 +1,9 @@
+document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll('[data-src]').forEach(elem => {
+        elem.src = elem.dataset.src;
+    })
+});
+
 async function getGif(searchTerm) {
 
     if (searchTerm !== undefined) {
@@ -24,7 +30,7 @@ async function getGif(searchTerm) {
     container.innerHTML = '';
 
     if (searchTerm == undefined) {
-        container.innerHTML = '<div class="card" onclick="getGif(\'agree\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Agree</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/wGhYz3FHaRJgk/200w_d.webp"> </div> <div class="card" onclick="getGif(\'laugh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Laugh</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/O5NyCibf93upy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'confused\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Confused</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/200w_d.webp"> </div> <div class="card" onclick="getGif(\'sad\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Sad</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/ISOckXUybVfQ4/200w_d.webp"> </div> <div class="card" onclick="getGif(\'happy\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Happy</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/XR9Dp54ZC4dji/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awesome\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awesome</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/200w_d.webp"> </div> <div class="card" onclick="getGif(\'yes\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Yes</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/J336VCs1JC42zGRhjH/200w_d.webp"> </div> <div class="card" onclick="getGif(\'no\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">No</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1zSz5MVw4zKg0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'love\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Love</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/200w_d.webp"> </div> <div class="card" onclick="getGif(\'please\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Please</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/qUIm5wu6LAAog/200w_d.webp"> </div> <div class="card" onclick="getGif(\'scared\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Scared</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/bEVKYB487Lqxy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'angry\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Angry</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/12Pb87uq0Vwq2c/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awkward\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awkward</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/unFLKoAV3TkXe/200w_d.webp"> </div> <div class="card" onclick="getGif(\'cringe\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Cringe</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1jDvQyhGd3L2g/200w_d.webp"> </div> <div class="card" onclick="getGif(\'omg\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">OMG</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3o72F8t9TDi2xVnxOE/200w_d.webp"> </div> <div class="card" onclick="getGif(\'why\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Why</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1M9fmo1WAFVK0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'gross\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Gross</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/pVAMI8QYM42n6/200w_d.webp"> </div> <div class="card" onclick="getGif(\'meh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Meh</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/xT77XTpyEzJ4OJO06c/200w_d.webp"> </div>'
+        container.innerHTML = '<div class="card" onclick="getGif(\'agree\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Agree</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/wGhYz3FHaRJgk/200w_d.webp"> </div> <div class="card" onclick="getGif(\'laugh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Laugh</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/O5NyCibf93upy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'confused\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Confused</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/200w_d.webp"> </div> <div class="card" onclick="getGif(\'sad\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Sad</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/ISOckXUybVfQ4/200w_d.webp"> </div> <div class="card" onclick="getGif(\'happy\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Happy</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/XR9Dp54ZC4dji/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awesome\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awesome</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/200w_d.webp"> </div> <div class="card" onclick="getGif(\'yes\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Yes</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/J336VCs1JC42zGRhjH/200w_d.webp"> </div> <div class="card" onclick="getGif(\'no\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">No</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1zSz5MVw4zKg0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'love\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Love</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/200w_d.webp"> </div> <div class="card" onclick="getGif(\'please\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Please</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/qUIm5wu6LAAog/200w_d.webp"> </div> <div class="card" onclick="getGif(\'scared\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Scared</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/bEVKYB487Lqxy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'angry\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Angry</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/12Pb87uq0Vwq2c/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awkward\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awkward</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/unFLKoAV3TkXe/200w_d.webp"> </div> <div class="card" onclick="getGif(\'cringe\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Cringe</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1jDvQyhGd3L2g/200w_d.webp"> </div> <div class="card" onclick="getGif(\'omg\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">OMG</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3o72F8t9TDi2xVnxOE/200w_d.webp"> </div> <div class="card" onclick="getGif(\'why\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Why</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1M9fmo1WAFVK0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'gross\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Gross</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/pVAMI8QYM42n6/200w_d.webp"> </div> <div class="card" onclick="getGif(\'meh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Meh</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/xT77XTpyEzJ4OJO06c/200w_d.webp"> </div>'
 
         backBtn.innerHTML = null;
 
@@ -54,10 +60,10 @@ async function getGif(searchTerm) {
             for (var i = 0; i < 48; i++) {
             gifURL[i] = "https://media.giphy.com/media/" + data[i].id + "/200w_d.webp";
             if (data[i].username==''){
-                container.innerHTML += ('<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data[i].id + '/200w_d.webp' + '\',\'' + commentFormID + '\')"><div class="gif-cat-overlay"></div><img loading="lazy" class="img-fluid" src="' + gifURL[i] + '"></div>');
+                container.innerHTML += ('<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data[i].id + '/200w_d.webp' + '\',\'' + commentFormID + '\')"><div class="gif-cat-overlay"></div><img loading="lazy" class="img-fluid" src="" data-src="' + gifURL[i] + '"></div>');
             }
             else {
-                container.innerHTML += ('<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" title="by '+data[i].username+' on GIPHY" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data[i].id + '/200w_d.webp' + '\',\'' + commentFormID + '\')"><div class="gif-cat-overlay"></div><img loading="lazy" class="img-fluid" src="' + gifURL[i] + '"></div>');
+                container.innerHTML += ('<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" title="by '+data[i].username+' on GIPHY" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data[i].id + '/200w_d.webp' + '\',\'' + commentFormID + '\')"><div class="gif-cat-overlay"></div><img loading="lazy" class="img-fluid" src="" data-src="' + gifURL[i] + '"></div>');
             }
             noGIFs.innerHTML = null;
             loadGIFs.innerHTML = '<div class="text-center py-3"><div class="mb-3"><i class="fad fa-grin-beam-sweat text-gray-500" style="font-size: 3.5rem;"></i></div><p class="font-weight-bold text-gray-500 mb-0">Thou&#39;ve reached the end of the list!</p></div>';
@@ -92,7 +98,7 @@ function insertGIF(url,form) {
 
     var cancelBtn = document.getElementById('gifs-cancel-btn');
 
-    container.innerHTML = '<div class="card" onclick="getGif(\'agree\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Agree</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/wGhYz3FHaRJgk/200w_d.webp"> </div> <div class="card" onclick="getGif(\'laugh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Laugh</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/O5NyCibf93upy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'confused\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Confused</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/200w_d.webp"> </div> <div class="card" onclick="getGif(\'sad\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Sad</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/ISOckXUybVfQ4/200w_d.webp"> </div> <div class="card" onclick="getGif(\'happy\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Happy</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/XR9Dp54ZC4dji/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awesome\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awesome</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/200w_d.webp"> </div> <div class="card" onclick="getGif(\'yes\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Yes</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/J336VCs1JC42zGRhjH/200w_d.webp"> </div> <div class="card" onclick="getGif(\'no\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">No</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1zSz5MVw4zKg0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'love\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Love</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/200w_d.webp"> </div> <div class="card" onclick="getGif(\'please\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Please</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/qUIm5wu6LAAog/200w_d.webp"> </div> <div class="card" onclick="getGif(\'scared\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Scared</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/bEVKYB487Lqxy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'angry\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Angry</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/12Pb87uq0Vwq2c/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awkward\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awkward</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/unFLKoAV3TkXe/200w_d.webp"> </div> <div class="card" onclick="getGif(\'cringe\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Cringe</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1jDvQyhGd3L2g/200w_d.webp"> </div> <div class="card" onclick="getGif(\'omg\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">OMG</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3o72F8t9TDi2xVnxOE/200w_d.webp"> </div> <div class="card" onclick="getGif(\'why\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Why</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1M9fmo1WAFVK0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'gross\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Gross</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/pVAMI8QYM42n6/200w_d.webp"> </div> <div class="card" onclick="getGif(\'meh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Meh</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/xT77XTpyEzJ4OJO06c/200w_d.webp"> </div>'
+    container.innerHTML = '<div class="card" onclick="getGif(\'agree\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Agree</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/wGhYz3FHaRJgk/200w_d.webp"> </div> <div class="card" onclick="getGif(\'laugh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Laugh</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/O5NyCibf93upy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'confused\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Confused</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/200w_d.webp"> </div> <div class="card" onclick="getGif(\'sad\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Sad</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/ISOckXUybVfQ4/200w_d.webp"> </div> <div class="card" onclick="getGif(\'happy\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Happy</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/XR9Dp54ZC4dji/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awesome\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awesome</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/200w_d.webp"> </div> <div class="card" onclick="getGif(\'yes\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Yes</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/J336VCs1JC42zGRhjH/200w_d.webp"> </div> <div class="card" onclick="getGif(\'no\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">No</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1zSz5MVw4zKg0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'love\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Love</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/200w_d.webp"> </div> <div class="card" onclick="getGif(\'please\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Please</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/qUIm5wu6LAAog/200w_d.webp"> </div> <div class="card" onclick="getGif(\'scared\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Scared</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/bEVKYB487Lqxy/200w_d.webp"> </div> <div class="card" onclick="getGif(\'angry\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Angry</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/12Pb87uq0Vwq2c/200w_d.webp"> </div> <div class="card" onclick="getGif(\'awkward\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Awkward</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/unFLKoAV3TkXe/200w_d.webp"> </div> <div class="card" onclick="getGif(\'cringe\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Cringe</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1jDvQyhGd3L2g/200w_d.webp"> </div> <div class="card" onclick="getGif(\'omg\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">OMG</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/3o72F8t9TDi2xVnxOE/200w_d.webp"> </div> <div class="card" onclick="getGif(\'why\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Why</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/1M9fmo1WAFVK0/200w_d.webp"> </div> <div class="card" onclick="getGif(\'gross\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Gross</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/pVAMI8QYM42n6/200w_d.webp"> </div> <div class="card" onclick="getGif(\'meh\');" style="overflow: hidden;"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold;">Meh</div> </div> <img loading="lazy" class="img-fluid" src="" data-src="https://media.giphy.com/media/xT77XTpyEzJ4OJO06c/200w_d.webp"> </div>'
 
     backBtn.innerHTML = null;
 
diff --git a/files/templates/gif_modal.html b/files/templates/gif_modal.html
index 0ba530906..6bd437826 100644
--- a/files/templates/gif_modal.html
+++ b/files/templates/gif_modal.html
@@ -1,4 +1,4 @@
-<script src="/assets/js/gif_modal.js?v=1"></script>
+<script src="/assets/js/gif_modal.js?v=2"></script>
 
 <div class="modal fade" id="gifModal" tabindex="-1" role="dialog" aria-labelledby="gifModalTitle" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered p-5" role="document">