diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index c8ec50a..e2a2fc4 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -20,6 +20,13 @@ section {
   z-index: 1000;
   overflow: hidden; /* Verhindert, dass das Video aus dem Overlay herausragt */
   position: relative;
+  video {
+    width: 100%;
+    height: 100%;
+  }
+  &:hover .video-header {
+    opacity: 1;
+  }
 }
 
 .video-header {
@@ -37,10 +44,6 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
-.video-overlay:hover .video-header {
-  opacity: 1;
-}
-
 .back-button {
   cursor: pointer;
   background: none;
@@ -63,8 +66,3 @@ section {
   width: 32px;
   height: auto;
 }
-
-.video-overlay video {
-  width: 100%;
-  height: 100%;
-}
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
index 644b945..82affec 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
@@ -12,6 +12,19 @@ section {
     height: 100%;
     object-fit: cover;
   }
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 10%;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 100%
+    );
+  }
 }
 
 .content {