diff --git a/website/assets/PopcornFriends.webp b/website/assets/PopcornFriends.webp
new file mode 100644
index 0000000..157438e
Binary files /dev/null and b/website/assets/PopcornFriends.webp differ
diff --git a/website/index.html b/website/index.html
index d022017..d8d2823 100644
--- a/website/index.html
+++ b/website/index.html
@@ -434,8 +434,9 @@
             </p>
             <div class="use-cases-grid">
                 <div class="use-case-card" data-reveal>
+                    <img src="assets/PopcornFriends.webp" alt="Two cute koalas sitting together and sharing a bucket of popcorn" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/PopcornFriends.webp" alt="Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
-                        <span class="use-case-icon">🍿</span>
                         <span lang="en">Movie Night with Friends</span>
                         <span lang="de">Filmabend mit Freunden</span>
                     </h3>
diff --git a/website/style.css b/website/style.css
index 95fe2e9..924d3c0 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1466,7 +1466,7 @@ html.lang-de [lang="en"] {
     background: rgba(30, 41, 59, 0.4);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
-    padding: 2.2rem 2rem;
+    padding: 1.2rem 1.6rem 1.7rem 1.6rem;
     text-align: left;
     transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
     backdrop-filter: blur(8px);
@@ -1505,6 +1505,15 @@ html.lang-de [lang="en"] {
     opacity: 1;
 }
 
+.use-case-image {
+    display: block;
+    width: 100%;
+    max-width: 272px;
+    height: auto;
+    border-radius: 8px;
+    margin: 0 auto 0 auto;
+}
+
 .use-case-icon {
     font-size: 1.6rem;
     margin-right: 0.6rem;