diff --git a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html
new file mode 100644
index 000000000..9d66eadd3
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html
@@ -0,0 +1,7 @@
+
+
+ {{genre.name}}
+
+
+
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.scss b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.scss
new file mode 100644
index 000000000..b3ffedbb1
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.scss
@@ -0,0 +1,32 @@
+
+h2{
+ margin-top:40px;
+ margin-left:40px;
+ font-size: 24px;
+}
+
+.discover-filter-buttons-group {
+ border: 1px solid #293a4c;
+ border-radius: 30px;
+ color:#fff;
+ margin-bottom:10px;
+
+ .discover-filter-button{
+ background:inherit;
+ color:inherit;
+ padding:0 0px;
+ border-radius: 30px;
+ padding-left: 20px;
+ padding-right: 20px;
+ border-left:none;
+ }
+}
+
+.button-active{
+ background:#293a4c;
+ }
+
+.genre-container {
+ margin-left: 35px;
+}
+
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts
new file mode 100644
index 000000000..2d50eddd3
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from "@angular/core";
+import { SearchV2Service } from "../../../services";
+import { AuthService } from "../../../auth/auth.service";
+import { IMovieDbKeyword } from "../../../interfaces";
+import { MatButtonToggleChange } from "@angular/material/button-toggle";
+import { CarouselListComponent } from "../carousel-list/carousel-list.component";
+import { RequestType } from "../../../interfaces";
+import { AdvancedSearchDialogDataService } from "app/shared/advanced-search-dialog/advanced-search-dialog-data.service";
+import { Router } from "@angular/router";
+
+@Component({
+ selector: "genre-button-select",
+ templateUrl: "./genre-button-select.component.html",
+ styleUrls: ["./genre-button-select.component.scss"],
+})
+export class GenreButtonSelectComponent implements OnInit {
+ public genreList: IMovieDbKeyword[] = [];
+ public selectedGenre: IMovieDbKeyword;
+ public mediaType: string = "movie";
+
+ isLoading: boolean = false;
+
+ constructor(private searchService: SearchV2Service,
+ private advancedSearchService: AdvancedSearchDialogDataService,
+ private router: Router) { }
+
+ public ngOnInit(): void {
+ this.searchService.getGenres(this.mediaType).subscribe(results => {
+ this.genreList = results;
+ });
+ }
+
+ public async toggleChanged(event: MatButtonToggleChange) {
+ this.isLoading = true;
+
+ const genres: number[] = [event.value];
+ const data = await this.searchService.advancedSearch({
+ watchProviders: [],
+ genreIds: genres,
+ keywordIds: [],
+ type: this.mediaType,
+ }, 0, 30);
+
+ this.advancedSearchService.setData(data, RequestType.movie);
+ this.advancedSearchService.setOptions([], genres, [], null, RequestType.movie, 30);
+ this.router.navigate([`discover/advanced/search`]);
+ }
+
+
+}
diff --git a/src/Ombi/ClientApp/src/app/discover/components/index.ts b/src/Ombi/ClientApp/src/app/discover/components/index.ts
index 3b3993d39..4ae524f7b 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/index.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/index.ts
@@ -12,6 +12,7 @@ import { MatDialog } from "@angular/material/dialog";
import { RequestServiceV2 } from "../../services/requestV2.service";
import { Routes } from "@angular/router";
import { DetailedCardComponent } from "app/components";
+import { GenreButtonSelectComponent } from "./genre/genre-button-select.component";
export const components: any[] = [
DiscoverComponent,
@@ -22,6 +23,7 @@ export const components: any[] = [
CarouselListComponent,
RecentlyRequestedListComponent,
DetailedCardComponent,
+ GenreButtonSelectComponent
];
export const providers: any[] = [