diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx
index b2e4588a..534af11d 100644
--- a/src/renderer/src/pages/catalogue/catalogue.tsx
+++ b/src/renderer/src/pages/catalogue/catalogue.tsx
@@ -298,38 +298,8 @@ export default function Catalogue() {
                   dispatch(setSearch({ tags: [...filters.tags, value] }));
                 }
               }}
-              items={[
-                "Action",
-                "Strategy",
-                "RPG",
-                "Casual",
-                "Racing",
-                "Sports",
-                "Indie",
-                "Adventure",
-                "Simulation",
-                "Massively Multiplayer",
-                "Free to Play",
-                "Accounting",
-                "Animation & Modeling",
-                "Audio Production",
-                "Design & Illustration",
-                "Education",
-                "Photo Editing",
-                "Software Training",
-                "Utilities",
-                "Video Production",
-                "Web Publishing",
-                "Game Development",
-                "Early Access",
-                "Sexual Content",
-                "Nudity",
-                "Violent",
-                "Gore",
-                "Documentary",
-                "Tutorial",
-              ].map((genre) => ({
-                label: genre,
+              items={[1, 2, 3, 4, 5].map((genre) => ({
+                label: genre.toString(),
                 value: genre,
                 checked: filters.tags.includes(genre),
               }))}
diff --git a/src/renderer/src/pages/catalogue/filter-section.tsx b/src/renderer/src/pages/catalogue/filter-section.tsx
index e56f1dd6..1cb9d9fc 100644
--- a/src/renderer/src/pages/catalogue/filter-section.tsx
+++ b/src/renderer/src/pages/catalogue/filter-section.tsx
@@ -2,17 +2,21 @@ import { CheckboxField, TextField } from "@renderer/components";
 import { useFormat } from "@renderer/hooks";
 import { useCallback, useMemo, useState } from "react";
 
-export interface FilterSectionProps {
+export interface FilterSectionProps<T extends string | number> {
   title: string;
   items: {
     label: string;
-    value: string;
+    value: T;
     checked: boolean;
   }[];
-  onSelect: (value: string) => void;
+  onSelect: (value: T) => void;
 }
 
-export function FilterSection({ title, items, onSelect }: FilterSectionProps) {
+export function FilterSection<T extends string | number>({
+  title,
+  items,
+  onSelect,
+}: FilterSectionProps<T>) {
   const [search, setSearch] = useState("");
 
   const filteredItems = useMemo(() => {