diff --git a/web/src/components/misc/Meowbalt.svelte b/web/src/components/misc/Meowbalt.svelte
index 929c63aa..7b31c297 100644
--- a/web/src/components/misc/Meowbalt.svelte
+++ b/web/src/components/misc/Meowbalt.svelte
@@ -2,14 +2,22 @@
     import { t } from "$lib/i18n/translations";
     import type { MeowbaltEmotions } from "$lib/types/meowbalt";
 
-    export let emotion: MeowbaltEmotions;
+    type Props = {
+        emotion: MeowbaltEmotions;
+    };
+
+    const { emotion }: Props = $props();
+
+    let loaded = $state(false);
 </script>
 
 <img
     class="meowbalt {emotion}"
+    class:loaded
+    onload={() => (loaded = true)}
     src="/meowbalt/{emotion}.png"
     height="152"
-    alt={$t('general.meowbalt')}
+    alt={$t("general.meowbalt")}
     aria-hidden="true"
 />
 
@@ -18,6 +26,12 @@
         display: block;
         margin: 0;
         object-fit: cover;
+        opacity: 0;
+        transition: opacity 0.15s;
+    }
+
+    .meowbalt.loaded {
+        opacity: 1;
     }
 
     .error {