diff --git a/frontend/app/components/loading-icon/template.hbs b/frontend/app/components/loading-icon/template.hbs
index 452c1dc8..0a4cb1b6 100644
--- a/frontend/app/components/loading-icon/template.hbs
+++ b/frontend/app/components/loading-icon/template.hbs
@@ -1,11 +1,7 @@
-<div class="loading-icon">
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
-  <span class="loading-dot"></span>
+<div class="loading-icon grid grid-cols-3 gap-0.5 w-60 h-60">
+  {{#each (range 0 9)}}
+    <div
+      class="odd:bg-primary odd:animate-[loading_2s_ease-in-out_infinite] even:bg-secondary even:animate-[loading_1.5s_ease-in-out_infinite] rounded-3xl"
+    />
+  {{/each}}
 </div>
\ No newline at end of file
diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js
index c684f505..65369c0e 100644
--- a/frontend/config/tailwind.config.js
+++ b/frontend/config/tailwind.config.js
@@ -21,6 +21,12 @@ module.exports = {
         sans: ["Source Sans Pro", "sans-serif"],
         mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"],
       },
+      keyframes: {
+        loading: {
+          "0%, 100%": { transform: "scale(0.1)", opacity: "1" },
+          "50%": { transform: "scale(0.9)", opacity: "0" },
+        },
+      },
       fontSize: {
         "2xs": [
           "0.65rem",