diff --git a/website/assets/KoalaDeploy.webp b/website/assets/KoalaDeploy.webp
new file mode 100644
index 0000000..ae599d9
Binary files /dev/null and b/website/assets/KoalaDeploy.webp differ
diff --git a/website/index.html b/website/index.html
index a9cdd47..a9bd16d 100644
--- a/website/index.html
+++ b/website/index.html
@@ -750,11 +750,17 @@
             <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
                 <span lang="en">For Self-Hosters</span><span lang="de">Für Self-Hoster</span>
             </h2>
-            <p style="text-align: center; color: var(--text-muted); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
+            <p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
                 <span lang="en">Maintain full data sovereignty. Deploy your own private relay server in minutes.</span>
                 <span lang="de">Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein.</span>
             </p>
 
+            <!-- Mascot Self-Hosting / Deploy Illustration -->
+            <div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
+                <img src="assets/KoalaDeploy.webp" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
+                <img src="assets/KoalaDeploy.webp" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
+            </div>
+
             <div class="terminal-container" data-reveal>
                 <div class="terminal-header">
                     <div class="terminal-dots">
diff --git a/website/style.css b/website/style.css
index f596115..215feb6 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1327,9 +1327,14 @@ html.lang-de [lang="en"] {
 .compat-mascot {
     display: block;
     margin: 0 auto 0.5rem auto;
-    max-width: 320px;
+    max-width: 368px;
     width: 100%;
     height: auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.compat-mascot:hover {
+    transform: scale(1.05) translateY(-5px) rotate(1deg);
 }
 
 .compat-heading {
@@ -1548,6 +1553,11 @@ html.lang-de [lang="en"] {
     max-width: 250px;
     height: auto;
     margin: -1.5rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.features-questions-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
 }
 
 .comparison-mascot {
@@ -1556,6 +1566,11 @@ html.lang-de [lang="en"] {
     max-width: 260px;
     height: auto;
     margin: -2.2rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.comparison-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(1deg);
 }
 
 .use-case-icon {
@@ -1792,7 +1807,20 @@ html.lang-de [lang="en"] {
 }
 
 .legal-mascot:hover {
-    transform: scale(1.06) rotate(1.5deg);
+    transform: scale(1.06) translateY(-4px) rotate(1.5deg);
+}
+
+.selfhost-mascot {
+    display: block;
+    width: 300px;
+    height: auto;
+    margin: 0 auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.selfhost-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1deg);
 }
 
 .status-ring {