diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index 0ce75e1..f9ce576 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -10,7 +10,7 @@ export class HeaderComponent {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
-  @Input() overlay_gradient: boolean = false;
+  @Input() overlay_gradient: number = 0;
 
   public active: string = '';
 
@@ -26,7 +26,7 @@ export class HeaderComponent {
 
   public getBackgroundImage() {
     if (this.overlay_gradient) {
-      return `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(${this.background_image})`;
+      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
     } else {
       return `url(${this.background_image})`;
     }
diff --git a/frontend/src/app/map/map.component.html b/frontend/src/app/map/map.component.html
index 8e48f45..74b9366 100644
--- a/frontend/src/app/map/map.component.html
+++ b/frontend/src/app/map/map.component.html
@@ -1,7 +1,7 @@
 <ng-container>
   <app-header [current_page]="'map'"
               [background_image]="'public/img/backgrounds/map.jpg'"
-              [overlay_gradient]="true">
+              [overlay_gradient]=0.65>
     <div class="title" header-content>
       <h1>Dynamic Server Maps</h1>
       <h2>Which server would you like to see?</h2>