diff --git a/templates/base.html b/templates/base.html
index 5e46c7b..83fc7d7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -45,6 +45,26 @@
       };
     </script>
     <script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
+    <style>
+      .image-container {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        width: 100%;
+        height: 20vh; /* Show 20% of the viewport height */
+        overflow: hidden; /* Hide parts of the image outside the container */
+        position: relative; /* Position context for the image */
+      }
+
+      .image-container img {
+        width: 100%; /* Make the image fit the container width */
+        height: auto; /* Maintain aspect ratio */
+        position: absolute; /* Position image relative to container */
+        top: 50%; /* Move image down by 50% of its height */
+        transform: translateY(
+          -50%
+        ); /* Pull it back up by 50% of its own height */
+      }
+    </style>
   </head>
 
   <body>
diff --git a/templates/components/image.html b/templates/components/image.html
index c206a34..eb7ea16 100644
--- a/templates/components/image.html
+++ b/templates/components/image.html
@@ -1,3 +1,4 @@
 <div class="image-container">
+  <p>...</p>
   <img src="{{ src }}" alt="{{ alt or 'image' }}" />
 </div>
