diff --git a/wap/citron/cave-citron.mp3 b/wap/citron/cave-citron.mp3
new file mode 100644
index 0000000..2b6b4a9
Binary files /dev/null and b/wap/citron/cave-citron.mp3 differ
diff --git a/wap/citron/cave_johnson.png b/wap/citron/cave_johnson.png
new file mode 100644
index 0000000..73948aa
Binary files /dev/null and b/wap/citron/cave_johnson.png differ
diff --git a/wap/citron/index.html b/wap/citron/index.html
index 6112d17..1afe4fa 100644
--- a/wap/citron/index.html
+++ b/wap/citron/index.html
@@ -131,6 +131,18 @@
             </tbody>
         </table>
     </div>
+    <div class="cave">
+        <div class="image">
+            <img src="cave_johnson.png" alt="Avatar" class="avatar">
+        </div>
+        <div class="info">
+            <h3>Portal 2</h3>
+            <p>Ve hře Portal 2, Cave Johnson, Zakladatel Společnosti Aperture, zminuje citrony...</p>
+            <audio controls>
+                <source src="cave-citron.mp3" type="audio/mpeg">
+            </audio>
+        </div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/wap/citron/style.css b/wap/citron/style.css
index 36438cc..8b1a1dc 100644
--- a/wap/citron/style.css
+++ b/wap/citron/style.css
@@ -32,11 +32,32 @@ th, td {
 .helper {
     display: none;
 }  
+.avatar {
+    vertical-align: middle;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+}
+
+.cave {
+    margin-top: 5px;
+    display: flex;
+}
+
+.cave .image {
+    width: 160px;
+}
+.cave .info {
+    margin-left: 1;
+}
 
 @media (max-width : 600px) {
     body {
         text-align: center;
     }
+    .cave .image {
+        display: none;
+    }
     .helper {
         display: block;
         color: red;