diff --git a/index.html b/index.html
index 7bcb87d..5e22876 100644
--- a/index.html
+++ b/index.html
@@ -98,10 +98,10 @@ <h2>
     <script type="module" src="./js/content-loader.js" type="module"></script>
     <script src="./js/qrcode.min.js"></script>
     <script src="./js/qrcode.min-init.js"></script>
-    <!-- for grid -->
-    <script src="./js/masonry.js"></script>
-    <script src="./js/masonry-init.js"></script>
     <!-- for navigation panel scroll behaviour -->
     <script src="./js/main.js"></script>
+    <!-- for grid -->
+    <script src="./js/masonry.js" defer></script>
+    <script src="./js/masonry-init.js" defer></script>
   </body>
 </html>
diff --git a/js/content-loader.js b/js/content-loader.js
index 8fdd1a8..0d6e3b6 100644
--- a/js/content-loader.js
+++ b/js/content-loader.js
@@ -95,6 +95,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     const productSets = await fetchProduct();
     console.log(productSets.content, productSets.categorey);
     appendMenuData(productSets.content, productSets.categorey);
+    await masonry_init();
   })();
 });