diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 0000000..8f50957
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,17 @@
+---
+import { Image } from "astro:assets";
+import { config } from "../config";
+---
+
+<Image
+    src={config.personalInfo.profileImage.src}
+    alt={config.personalInfo.profileImage.alt}
+    widths={[192, 384]}
+    sizes="12rem"
+    layout="constrained"
+    loading="eager"
+    fetchpriority="high"
+    class="rounded-full mx-auto opacity-0 transition-opacity duration-300"
+    style="max-width: 12rem; width: 100%;"
+    onload="this.classList.remove('opacity-0')"
+/>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e2d0ec6..53a1521 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import Logo from "../components/Logo.astro";
 import SocialLinks from "../components/SocialLinks.astro";
 import TechLinks from "../components/TechLinks.astro";
 import Layout from "../layouts/Layout.astro";
@@ -12,17 +12,10 @@ import { config } from "../config";
     ogImage={config.siteConfig.pageOpenGraph.home.image}
     ogType={config.siteConfig.pageOpenGraph.home.type}
 >
-    <Image
-        src={config.personalInfo.profileImage.src}
-        alt={config.personalInfo.profileImage.alt}
-        widths={[192, 384]}
-        sizes="12rem"
-        layout="constrained"
-        loading="eager"
-        fetchpriority="high"
-        class="rounded-full mx-auto"
-        style="max-width: 12rem; width: 100%;"
-    />
+    <Logo server:defer>
+        <div slot="fallback" class="skeleton w-48 h-48 rounded-full mx-auto">
+        </div>
+    </Logo>
 
     <h1 class="text-primary text-4xl sm:text-6xl font-bold text-center">
         {config.personalInfo.name}