diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 7c28ca0..4f009d3 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -3,6 +3,7 @@
   <app-hero-banner [currentMovie]="currentMovie"></app-hero-banner>
   <app-categories
     [movies]="movies"
+    [currentMovie]="currentMovie[0].id"
     (currentMovieId)="currentMovieId($event)"
   ></app-categories>
 </section>
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index 18dbce7..5bfb9e8 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -17,20 +17,23 @@ export class BrowseComponent implements OnInit {
       title: 'Our Galaxy',
       description:
         'Experience the fascinating journey through the infinite expanse of our galaxy. "Our Galaxy" offers a detailed insight into the breathtaking structures, stars and planets of our cosmic home. Through stunning visual effects and comprehensive explanations, this documentary guides viewers through the mysteries of the universe and reveals the beauty and complexity of outer space. Perfect for astronomy lovers and the curious who want to learn more about the wonders of the universe',
-      category: 'documentation',
+      category: 'Documentary',
       imgPath: 'galaxy.png',
       videoPath: 'galaxy.mp4',
+      create: '08.03.2024',
     },
     {
       id: 2,
       title: 'Star Trek',
       description:
         'Join Captain Kirk and the crew of the starship USS Enterprise as they embark on thrilling adventures across the universe. "Star Trek" is a legendary sci-fi saga that explores the final frontier, filled with action, exploration, and unforgettable encounters with alien species. This epic journey showcases the spirit of discovery and the unwavering courage of the Starfleet members as they confront the unknown and protect the galaxy from various threats.',
-      category: 'sci-fi',
+      category: 'Science Fiction',
       imgPath: 'star-trek.png',
       videoPath: 'star-trek.mp4',
+      create: '08.02.2024',
     },
   ];
+
   currentMovie: any[] = [];
 
   ngOnInit(): void {
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.html b/frontend/src/app/components/home/browse/categories/categories.component.html
index 1006b28..c5916e1 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.html
+++ b/frontend/src/app/components/home/browse/categories/categories.component.html
@@ -1,10 +1,12 @@
 <section class="hide-scrollbar">
+  <!-- Column for films of the last 7 days -->
   <div class="category">
-    <p>New Releases</p>
+    <p>Added in the last 7 days</p>
     <div class="movies">
-      @for (movie of movies; track movie) {
+      @for (movie of recentMovies(); track movie) {
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
+          [ngClass]="{ selected: movie.id === currentMovie }"
           src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
           alt=""
         />
@@ -12,19 +14,23 @@
       }
     </div>
   </div>
+  <!-- Genre columns -->
+  @for (filmGenre of filmGenres; track filmGenre) {
+  <!-- Movie available in genre -->
+  @if (allMovies(filmGenre).length > 0) {
   <div class="category">
-    <p>Continue Watching</p>
-  </div>
-  <div class="category">
-    <p>Action & Adventure</p>
-  </div>
-  <div class="category">
-    <p>Science Fiction & Fantasy</p>
-  </div>
-  <div class="category">
-    <p>Drama & Romance</p>
-  </div>
-  <div class="category">
-    <p>All Other Categories</p>
+    <p>{{ filmGenre }}</p>
+    <div class="movies">
+      @for (movie of allMovies(filmGenre); track movie) {
+      <div class="movie" (click)="openCurrentMovie(movie.id)">
+        <img
+          [ngClass]="{ selected: movie.id === currentMovie }"
+          src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
+          alt=""
+        />
+      </div>
+      }
+    </div>
   </div>
+  } }
 </section>
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.scss b/frontend/src/app/components/home/browse/categories/categories.component.scss
index 82a1f0c..0e11e20 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.scss
+++ b/frontend/src/app/components/home/browse/categories/categories.component.scss
@@ -3,6 +3,7 @@
 section {
   height: 60%;
   padding: 0 48px;
+  margin-top: 12px;
 }
 
 .category {
@@ -34,6 +35,10 @@ section {
   }
 }
 
+.selected {
+  border: 2px solid $blue !important;
+}
+
 // Hide scrollbar
 
 .hide-scrollbar {
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.ts b/frontend/src/app/components/home/browse/categories/categories.component.ts
index cd2c08c..235119f 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.ts
+++ b/frontend/src/app/components/home/browse/categories/categories.component.ts
@@ -1,21 +1,54 @@
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-categories',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss',
 })
 export class CategoriesComponent {
   @Input() movies: any[] = [];
+  @Input() currentMovie: number = 0;
   @Output() currentMovieId = new EventEmitter<number>();
 
+  filmGenres = [
+    'Action',
+    'Adventure',
+    'Comedy',
+    'Drama',
+    'Horror',
+    'Science Fiction',
+    'Fantasy',
+    'Romance',
+    'Thriller',
+    'Mystery',
+    'Crime',
+    'Animation',
+    'Documentary',
+    'Musical',
+    'War',
+    'Western',
+  ];
+
   openCurrentMovie(movieId: number) {
+    this.currentMovie = movieId;
     this.currentMovieId.emit(movieId);
   }
 
-  get documentaryMovies() {
-    return this.movies.filter((movie) => movie.category === 'documentary');
+  allMovies(filmGenre: string) {
+    return this.movies.filter((movie) => movie.category === filmGenre);
+  }
+
+  recentMovies() {
+    const today = new Date();
+    const sevenDaysAgo = new Date(today);
+    sevenDaysAgo.setDate(today.getDate() - 7);
+
+    return this.movies.filter((movie) => {
+      const movieDate = new Date(movie.create);
+      return movieDate >= sevenDaysAgo;
+    });
   }
 }