diff --git a/frontend/src/app/components/home/upload-video/upload-video.component.html b/frontend/src/app/components/home/upload-video/upload-video.component.html
index 7a8a87d..363e958 100644
--- a/frontend/src/app/components/home/upload-video/upload-video.component.html
+++ b/frontend/src/app/components/home/upload-video/upload-video.component.html
@@ -46,24 +46,13 @@
           [class.error-border]="!genre.valid && genre.touched"
           required
         >
-          <option value="action">Action</option>
-          <option value="adventure">Adventure</option>
-          <option value="animation">Animation</option>
-          <option value="anime">Anime</option>
-          <option value="comedy">Comedy</option>
-          <option value="crime">Crime</option>
-          <option value="documentary">Documentary</option>
-          <option value="drama">Drama</option>
-          <option value="fantasy">Fantasy</option>
-          <option value="horror">Horror</option>
-          <option value="musical">Musical</option>
-          <option value="mystery">Mystery</option>
-          <option value="other">Miscellaneous</option>
-          <option value="romance">Romance</option>
-          <option value="science_fiction">Science Fiction</option>
-          <option value="thriller">Thriller</option>
-          <option value="war">War</option>
-          <option value="western">Western</option>
+          <!-- Get genres -->
+          @if (genres$ | async; as genres) {
+
+          <!-- Loop through genres -->
+          @for (genre of genres; track genre) {
+          <option [value]="genre.name">{{ genre.name }}</option>
+          } }
         </select>
         <div class="error-msg">
           @if (!genre.valid && genre.touched) {
diff --git a/frontend/src/app/components/home/upload-video/upload-video.component.ts b/frontend/src/app/components/home/upload-video/upload-video.component.ts
index edfef78..f7081c1 100644
--- a/frontend/src/app/components/home/upload-video/upload-video.component.ts
+++ b/frontend/src/app/components/home/upload-video/upload-video.component.ts
@@ -6,6 +6,7 @@ import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/
 import { VideoService } from '../../../services/video.service';
 import { LoadingDialogComponent } from '../../../shared/components/loading-dialog/loading-dialog.component';
 import { Video } from '../../../interfaces/video.interface';
+import { GenreService } from '../../../services/genre.service';
 
 @Component({
   selector: 'app-upload-video',
@@ -33,9 +34,12 @@ export class UploadVideoComponent {
     send: false,
   };
 
+  genres$ = this.genreService.getGenres();
+
   constructor(
     public errorService: ErrorService,
-    private videoService: VideoService
+    private videoService: VideoService,
+    private genreService: GenreService
   ) {}
 
   stopPropagation(event: MouseEvent) {