diff --git a/Gallus_Pub_v1/src/components/Hero.astro b/Gallus_Pub_v1/src/components/Hero.astro
index c3931eb..d615481 100644
--- a/Gallus_Pub_v1/src/components/Hero.astro
+++ b/Gallus_Pub_v1/src/components/Hero.astro
@@ -8,11 +8,11 @@ import "../../styles/components/Hero.css"
 	<div class="hero-overlay">
 
 		<div class="hero-content">
-	
+
 			<h1>Dein Irish Pub</h1>
-	
+
 			<p>Im Herzen von St.Gallen</p>
-	
+
 			<a href="#" class="button">Aktuelles ↓</a>
 		</div>
 
@@ -21,16 +21,5 @@ import "../../styles/components/Hero.css"
 </section>
 
 <style>
-	.hero-overlay {
-		background-image: url('/images/Background.png');
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-		margin-top: 2em;
-	}
 
-	h1 {
-		padding-top: 2em;
-	}
 </style>
-
diff --git a/Gallus_Pub_v1/styles/components/Hero.css b/Gallus_Pub_v1/styles/components/Hero.css
index c500c97..cfebc2a 100644
--- a/Gallus_Pub_v1/styles/components/Hero.css
+++ b/Gallus_Pub_v1/styles/components/Hero.css
@@ -8,6 +8,19 @@
     border-bottom: 1px solid #444;
 }
 
+
+.hero-overlay {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-top: 2em;
+}
+
+h1 {
+    padding-top: 2em;
+}
+
 .nav-main {
     display: flex;
     align-items: center;
@@ -76,7 +89,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
+    /* Background is set in the component */
 }
 
 .hero-content {
@@ -112,4 +125,4 @@
 .button:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}
\ No newline at end of file
+}