diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 0000000..0d72aa6
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,16 @@
+---
+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"
+    style="max-width: 12rem; width: 100%;"
+/>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c9d31d0..f3cde8c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import SocialLinks from "../components/SocialLinks.astro";
 import TechLinks from "../components/TechLinks.astro";
 import Layout from "../layouts/Layout.astro";
 import { config } from "../config";
+import Logo from "../components/Logo.astro";
 ---
 
 <Layout
@@ -12,18 +13,7 @@ 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 opacity-0 transition-opacity duration-300"
-        style="max-width: 12rem; width: 100%;"
-        onload="this.classList.remove('opacity-0')"
-    />
+    <Logo client:idle />
 
     <h1 class="text-primary text-4xl sm:text-6xl font-bold text-center">
         {config.personalInfo.name}