diff --git a/index.html b/index.html
index ef62349..f7a6ec2 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
         <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
             <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
                 id="preview_sticker_pack">
-                <img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
+                <img src="static/images/sticker.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
                 <div class="flex flex-col justify-center gap-2">
                     <p class="text-4xl text-bold" id="preview_sticker_pack_name">
                         {sticker_pack_name}
@@ -93,9 +93,9 @@
         </div>
 
         <div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index">
-            <div class="grid hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
+            <div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
                 <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
-                <div>
+                <div class="grid">
                     <p class="text-2xl">{pack_name}</p>
                     <p class="text-xl">{artist_name}</p>
                 </div>
diff --git a/static/images/sticker.png b/static/images/sticker.png
new file mode 100644
index 0000000..bcce1ac
Binary files /dev/null and b/static/images/sticker.png differ
diff --git a/static/pack_preview.js b/static/pack_preview.js
index 72dc79d..be1ab2b 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -53,6 +53,15 @@ async function loadIndex() {
   }
 }
 
+function imageIsLoaded(img_id, img_placeholder) {
+  const __img = document.getElementById(img_id);
+  const __img_placeholder = document.getElementById(img_placeholder);
+  if (__img.complete) {
+    __img_placeholder.classList.add("hidden");
+    __img.classList.remove("hidden");
+  }
+}
+
 async function loadStickerpacks() {
   stickerpacksIndexContainer.classList.remove("hidden");
   stickerpacksIndexContainer.classList.add("grid");
@@ -76,12 +85,16 @@ async function loadStickerpacks() {
     if (!data) {
       continue;
     }
+    const _tmp_id = data.stickers[0].id;
     stickerpacksIndexContainer.innerHTML += `
-    <a href="index.html?id=${index.packs[i].split('.json')[0]}">
+    <a href="index.html?id=${index.packs[i].split(".json")[0]}">
       <div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
             <img src="${getStickerImage(data.stickers[0].id)}" alt="${
+      data.stickers[0].body
+    }" class="hidden object-contain w-24" id="${_tmp_id}"/>
+      <img src="static/images/sticker.png" alt="${
         data.stickers[0].body
-      }" class="object-contain w-24"/>
+      }" class="object-contain w-24" id="${_tmp_id}-placeholder"/>
             <div>
               <p class="text-2xl">${data.title}</p>
               ${
@@ -93,6 +106,11 @@ async function loadStickerpacks() {
         </div>
     </a>
       `;
+    const __img = document.getElementById(_tmp_id);
+    __img.addEventListener("load", () => {
+      imageIsLoaded(_tmp_id, `${_tmp_id}-placeholder`);
+      __img.removeEventListener("load", this);
+    });
   }
 }
 
@@ -186,10 +204,22 @@ function updatePackInfo(data) {
   for (let i = 0; i < data.stickers.length; i++) {
     const sticker = data.stickers[i];
     const stickerImage = document.createElement("img");
+    const stickerImagePlaceholder = document.createElement("img");
+    stickerImagePlaceholder.src = `static/images/sticker.png`;
+    stickerImagePlaceholder.id = `${sticker.id}-placeholder`;
+    stickerImagePlaceholder.alt = sticker.body;
+    stickerImagePlaceholder.classList.add("object-contain", "md:w-20", "w-24");
+    packStickers.appendChild(stickerImagePlaceholder);
     stickerImage.src = getStickerImage(sticker.id);
+    stickerImage.id = sticker.id;
     stickerImage.alt = sticker.body;
-    stickerImage.classList.add("object-contain", "md:w-20", "w-24");
+    stickerImage.classList.add("object-contain", "md:w-20", "w-24", "hidden");
     packStickers.appendChild(stickerImage);
+
+    stickerImage.addEventListener("load", () => {
+      imageIsLoaded(sticker.id, `${sticker.id}-placeholder`);
+      stickerImage.removeEventListener("load", this);
+    });
   }
 }