diff --git a/CHANGELOG.md b/CHANGELOG.md
index 323abc3f602827cfc8967cd639e14f1528eb9f50..19d96209f1e1dce66012ef7de2288746176d2f51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added (for new features, dependecies etc.)
 
+* new CSS classes for the styling of the default image and video preview of the
+  `ext_bottom_line` module: `caosdb-v-bottom-line-image-preview` and
+  `caosdb-v-bottom-line-video-preview`.
 * basic support for entity versioning:
     * entity.xsl generates a versioning button which opens a versioning info modal.
     * `preview` also works for versioned references
diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index ea7ca2a83970aa7d55b5fa58c1b58a6449e17933..21a73e3acd96337b6dd6adec7bf1a024cac91e6c 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -27,6 +27,15 @@ body {
     flex-direction: column;
 }
 
+.caosdb-v-bottom-line-image-preview > img {
+    max-width: 400px;
+    max-height: 280px;
+}
+
+.caosdb-v-bottom-line-image-preview {
+    text-align: center;
+}
+
 button.caosdb-v-entity-version-button {
     height: 15px;
 }
diff --git a/src/core/js/ext_bottom_line.js b/src/core/js/ext_bottom_line.js
index 25897319232c0401062c922bdddd6f01e7495efa..1bcf73dea17889bda9858ed78a2f6848e1dc21ee 100644
--- a/src/core/js/ext_bottom_line.js
+++ b/src/core/js/ext_bottom_line.js
@@ -103,7 +103,7 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
      */
     const _create_video_preview = function(entity) {
         var path = connection.getFileSystemPath() + getEntityPath(entity);
-        return $(`<video controls="controls"><source src="${path}"/></video>`)[0];
+        return $(`<div class="caosdb-v-bottom-line-video-preview"><video controls="controls"><source src="${path}"/></video></div>`)[0];
     }
 
     /**
@@ -114,7 +114,7 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
      */
     const _create_picture_preview = function(entity) {
         var path = connection.getFileSystemPath() + getEntityPath(entity);
-        return $(`<img class="entity-image-preview" style="max-width: 200px; max-height=140px;" src="${path}"/>`)[0];
+        return $(`<div class="caosdb-v-bottom-line-image-preview"><img src="${path}"/></div>`)[0];
     }
 
     var fallback_preview = undefined;