diff --git a/src/app/ui/forms/genrePicker.tsx b/src/app/ui/forms/genrePicker.tsx
new file mode 100644
index 0000000..4c071c6
--- /dev/null
+++ b/src/app/ui/forms/genrePicker.tsx
@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from "@radix-ui/react-popover";
+import GenresTrigger from "./genresTrigger";
+import GenreCheckbox from "./genreCheckbox";
+
+export const GenrePicker = forwardRef(
+	({ form, genres }, ref) => (
+		<FormField
+			control={form.control}
+			name="genres"
+			render={({ field }) => (
+				<FormItem className="flex flex-col">
+					<Popover>
+						<GenresTrigger value={field.value} genres={genres} />
+						<PopoverContent ref={ref}>
+							{genres.map((item) => (
+								<FormField
+									key={item.id}
+									control={form.control}
+									name="genres"
+									render={({ field }) => {
+										return (
+											<GenreCheckbox field={field} item={item} />
+										)
+									}}
+								/>
+							))}
+						</PopoverContent>
+					</Popover>
+					<FormMessage />
+				</FormItem>
+			)}
+		/>
+	)
+)