diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.html b/frontend/src/app/components/game-detail-view/game-detail-view.component.html
index 61f71ce..27f5437 100644
--- a/frontend/src/app/components/game-detail-view/game-detail-view.component.html
+++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.html
@@ -1,29 +1,33 @@
 <div fxLayout="row" fxLayoutAlign="center" style="margin-top: 16px;"
      *ngIf="this.game !== null && this.game !== undefined">
-  <div fxLayout="column" fxFlex="0 1 70" fxLayoutGap="16px" fxFlex.lt-xl="95">
+  <div fxLayout="column" fxFlex="0 1 75" fxLayoutGap="16px" fxFlex.lt-lg="95">
     <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
 
-      <div fxLayoutAlign.lt-lg="center">
-        <img style="max-width: 264px;" src="v1/images/{{game.coverId}}" alt="Game cover">
-      </div>
+      <mat-card fxFlex="60" fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
+        <div fxLayoutAlign="start" fxLayoutAlign.lt-lg="center">
+          <img src="v1/images/{{game.coverId}}" style="max-height: 352px" alt="Game cover">
+        </div>
 
-      <div fxFlex="40" fxLayout="column" fxLayoutGap="16px">
-        <h1>{{game.title}}</h1>
-        <h3>Release: {{game.releaseDate | date: 'longDate'}}</h3>
+        <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="space-between">
+          <div fxLayoutGap="8px">
+            <h1 style="display: inline-block">{{game.title}}</h1>
+            <h3 style="display: inline-block; font-style: italic">{{game.releaseDate | date: 'yyyy'}}</h3>
 
-        <h2>Description</h2>
-        <p>{{game.summary}}</p>
+            <h2>Description</h2>
+            <p>{{game.summary}}</p>
+          </div>
 
-        <div *ngIf="game.companies !== undefined && game.companies.length > 0">
-          <h2>Developed by</h2>
-          <div fxLayout="row wrap" fxLayoutGap="16px">
-            <div *ngFor="let company of game.companies">
-              <img *ngIf="company.logoId !== undefined && company.logoId.length > 0" style="height: 52px;"
-                   src="v1/images/{{company.logoId}}" alt="{{company.name}}">
+          <div *ngIf="game.companies !== undefined && game.companies.length > 0">
+            <h2>Developed by</h2>
+            <div fxLayout="row wrap" fxLayoutGap="8px grid">
+              <div *ngFor="let company of game.companies">
+                <img *ngIf="company.logoId !== undefined && company.logoId.length > 0" style="height: 52px;"
+                     src="v1/images/{{company.logoId}}" alt="{{company.name}}">
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </mat-card>
 
       <div fxFlex><!-- Spacer --></div>
 
@@ -71,23 +75,26 @@
       </div>
     </div>
 
-    <div fxLayout="column" fxLayoutGap="16px">
+    <div id="game-media" fxLayout="column" fxLayoutGap="16px">
 
       <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
         <h2>Screenshots</h2>
-        <div fxLayout="row wrap" fxLayoutGap="8px grid">
-          <game-screenshot *ngFor="let screenshotId of game.screenshotIds" [screenshotId]="screenshotId"
-                           style="margin-bottom: -6px"></game-screenshot>
-        </div>
+        <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
+          <mat-grid-tile *ngFor="let screenshotId of game.screenshotIds">
+            <game-screenshot [screenshotId]="screenshotId"></game-screenshot>
+          </mat-grid-tile>
+        </mat-grid-list>
       </div>
 
-      <div *ngIf="game.videoIds !== undefined && game.videoIds.length > 0">
+      <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
         <h2>Videos</h2>
-        <div fxLayout="row wrap" fxLayoutGap="8px grid">
-          <game-video *ngFor="let videoId of game.videoIds" [videoId]="videoId" [width]="555"
-                      [height]="312"></game-video>
-        </div>
+        <mat-grid-list [cols]="gridColumnCount" gutterSize="8px" rowHeight="312px">
+          <mat-grid-tile *ngFor="let videoId of game.videoIds" style="width: 555px; height: 312px;">
+            <game-video [videoId]="videoId" [width]="555" [height]="312"></game-video>
+          </mat-grid-tile>
+        </mat-grid-list>
       </div>
+
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.ts b/frontend/src/app/components/game-detail-view/game-detail-view.component.ts
index b499f52..b08c91b 100644
--- a/frontend/src/app/components/game-detail-view/game-detail-view.component.ts
+++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.ts
@@ -1,7 +1,8 @@
-import {Component} from '@angular/core';
+import {Component, HostListener} from '@angular/core';
 import {ActivatedRoute, Params, Router} from "@angular/router";
 import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 import {GamesService} from "../../services/games.service";
+import {MediaObserver} from "@angular/flex-layout";
 
 @Component({
   selector: 'app-game-detail-view',
@@ -12,9 +13,12 @@ export class GameDetailViewComponent {
 
   game!: DetectedGameDto;
 
+  gridColumnCount: number;
+
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private gamesService: GamesService) {
+              private gamesService: GamesService,
+              private mediaObserver: MediaObserver) {
     this.gamesService.getGame(this.route.snapshot.params['slug']).subscribe({
       next: game => this.game = game,
       error: error => {
@@ -25,6 +29,13 @@ export class GameDetailViewComponent {
         }
       }
     });
+
+    this.gridColumnCount = this.calculateColumnCount();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.gridColumnCount = this.calculateColumnCount();
   }
 
   public downloadGame(): void {
@@ -58,10 +69,21 @@ export class GameDetailViewComponent {
   }
 
   mapRatingToColor(rating: number): string {
-    if(rating >= 75) return '#388e3c';
-    if(rating >= 50) return '#fbc02d';
-    if(rating >= 25) return '#f57c00';
+    if (rating >= 75) return '#388e3c';
+    if (rating >= 50) return '#fbc02d';
+    if (rating >= 25) return '#f57c00';
     return '#d32f2f';
   }
 
+  private calculateColumnCount(): number {
+    const elementWidth: number = 555;
+    const containerWidth: number | undefined = document.getElementById('game-media')?.offsetWidth;
+    const defaultColumnCount = 3;
+
+    if (containerWidth === undefined) return defaultColumnCount
+    if (containerWidth < elementWidth) return 1;
+
+    return Math.floor(containerWidth / elementWidth);
+  }
+
 }