diff --git a/src/app/pages/homepage/homepage.component.html b/src/app/pages/homepage/homepage.component.html
index 4623583..d72a170 100644
--- a/src/app/pages/homepage/homepage.component.html
+++ b/src/app/pages/homepage/homepage.component.html
@@ -1,2 +1,12 @@
-<div class="backdrop"> <img id="backdrop" [src]="this.show.backdrop" alt="backdrop" /></div>
+<div>
+	<div class="containerBox">
+		<div class="textBox">
+			<h2 class="show-title">{{this.show.title}}</h2>
+			<h6 class="show-overview">{{this.show.overview}}</h6>
+		</div>
+		<div class="backdrop">
+			<img id="backdrop" [src]="this.show.backdrop" alt="backdrop" />
+		</div>
+	</div>
 
+</div>
diff --git a/src/app/pages/homepage/homepage.component.scss b/src/app/pages/homepage/homepage.component.scss
index 9a75245..f79d1e3 100644
--- a/src/app/pages/homepage/homepage.component.scss
+++ b/src/app/pages/homepage/homepage.component.scss
@@ -3,13 +3,6 @@
 @import "~bootstrap/scss/mixins/breakpoints";
 @import "variables";
 
-//.recommendation{
-//	margin: auto;
-//	width: 90%;
-//	border: 2px solid #e23c00;
-//	padding-bottom: 30%;
-//	text-align: center;
-//}
 .backdrop
 {
 	margin-top: -68px;
@@ -45,3 +38,20 @@
 
 	}
 }
+.textBox
+{
+	position: absolute;
+	top:45%;
+	left:1.5%;
+	right: 70%;
+	text-align: justify;
+
+}
+.containerBox {
+	position: relative;
+}
+
+.show-title
+{
+	font-size: xxx-large;
+}
diff --git a/src/app/pages/homepage/homepage.component.ts b/src/app/pages/homepage/homepage.component.ts
index 5584d1a..fb3af14 100644
--- a/src/app/pages/homepage/homepage.component.ts
+++ b/src/app/pages/homepage/homepage.component.ts
@@ -78,4 +78,7 @@ export class HomepageComponent implements AfterViewInit, OnDestroy
 	  this.scrollZone.style.marginTop = null;
 	  this.scrollZone.style.maxHeight = null;
   }
+  scroll(): void {
+	  const opacity: number = 2 * this.scrollZone.scrollTop / this.backdrop.clientHeight;
+  }
 }