diff --git a/src/app/ui/forms/Checkboxdemo.tsx b/src/app/ui/forms/Checkboxdemo.tsx
deleted file mode 100644
index 50cdb29..0000000
--- a/src/app/ui/forms/Checkboxdemo.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form"
-import { toast } from "@/components/ui/use-toast"
-
-const items = [
-	{
-		id: "recents",
-		label: "Recents",
-	},
-	{
-		id: "home",
-		label: "Home",
-	},
-	{
-		id: "applications",
-		label: "Applications",
-	},
-	{
-		id: "desktop",
-		label: "Desktop",
-	},
-	{
-		id: "downloads",
-		label: "Downloads",
-	},
-	{
-		id: "documents",
-		label: "Documents",
-	},
-] as const
-
-const FormSchema = z.object({
-	items: z.array(z.string()).refine((value) => value.some((item) => item), {
-		message: "You have to select at least one item.",
-	}),
-})
-
-export function CheckboxReactHookFormMultiple() {
-	const form = useForm<z.infer<typeof FormSchema>>({
-		resolver: zodResolver(FormSchema),
-		defaultValues: {
-			items: ["recents", "home"],
-		},
-	})
-
-	function onSubmit(data: z.infer<typeof FormSchema>) {
-		toast({
-			title: "You submitted the following values:",
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(data, null, 2)}</code>
-				</pre>
-			),
-		})
-	}
-
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-				<FormField
-					control={form.control}
-					name="items"
-					render={() => (
-						<FormItem>
-							<div className="mb-4">
-								<FormLabel className="text-base">Sidebar</FormLabel>
-								<FormDescription>
-									Select the items you want to display in the sidebar.
-								</FormDescription>
-							</div>
-							{items.map((item) => (
-								<FormField
-									key={item.id}
-									control={form.control}
-									name="items"
-									render={({ field }) => {
-										return (
-											<FormItem
-												key={item.id}
-												className="flex flex-row items-start space-x-3 space-y-0"
-											>
-												<FormControl>
-													<Checkbox
-														checked={field.value?.includes(item.id)}
-														onCheckedChange={(checked) => {
-															return checked
-																? field.onChange([...field.value, item.id])
-																: field.onChange(
-																	field.value?.filter(
-																		(value) => value !== item.id
-																	)
-																)
-														}}
-													/>
-												</FormControl>
-												<FormLabel className="text-sm font-normal">
-													{item.label}
-												</FormLabel>
-											</FormItem>
-										)
-									}}
-								/>
-							))}
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button type="submit">Submit</Button>
-			</form>
-		</Form>
-	)
-}
-
diff --git a/src/app/ui/forms/datePickerDemo.tsx b/src/app/ui/forms/datePickerDemo.tsx
deleted file mode 100644
index f51de2b..0000000
--- a/src/app/ui/forms/datePickerDemo.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form"
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover"
-import { toast } from "@/components/ui/use-toast"
-
-const FormSchema = z.object({
-	dob: z.date({
-		required_error: "A date of birth is required.",
-	}),
-})
-
-export function DatePickerForm() {
-	const form = useForm<z.infer<typeof FormSchema>>({
-		resolver: zodResolver(FormSchema),
-	})
-
-	function onSubmit(data: z.infer<typeof FormSchema>) {
-		toast({
-			title: "You submitted the following values:",
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(data, null, 2)}</code>
-				</pre>
-			),
-		})
-	}
-
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-				<FormField
-					control={form.control}
-					name="dob"
-					render={({ field }) => (
-						<FormItem className="flex flex-col">
-							<FormLabel>Date of birth</FormLabel>
-							<Popover>
-								<PopoverTrigger asChild>
-									<FormControl>
-										<Button
-											variant={"outline"}
-											className={cn(
-												"w-[240px] pl-3 text-left font-normal",
-												!field.value && "text-muted-foreground"
-											)}
-										>
-											{field.value ? (
-												format(field.value, "PPP")
-											) : (
-												<span>Pick a date</span>
-											)}
-											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-										</Button>
-									</FormControl>
-								</PopoverTrigger>
-								<PopoverContent className="w-auto p-0" align="start">
-									<Calendar
-										mode="single"
-										selected={field.value}
-										onSelect={field.onChange}
-										disabled={(date) =>
-											date > new Date() || date < new Date("1900-01-01")
-										}
-										initialFocus
-									/>
-								</PopoverContent>
-							</Popover>
-							<FormDescription>
-								Your date of birth is used to calculate your age.
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<Button type="submit">Submit</Button>
-			</form>
-		</Form>
-	)
-}
-
diff --git a/src/app/ui/forms/genrePicker.tsx b/src/app/ui/forms/genrePicker.tsx
deleted file mode 100644
index 4c071c6..0000000
--- a/src/app/ui/forms/genrePicker.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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>
-			)}
-		/>
-	)
-)
diff --git a/src/app/ui/forms/selectDemo.tsx b/src/app/ui/forms/selectDemo.tsx
deleted file mode 100644
index e589d74..0000000
--- a/src/app/ui/forms/selectDemo.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/components/ui/button"
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form"
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select"
-import { toast } from "@/components/ui/use-toast"
-
-const FormSchema = z.object({
-	email: z
-		.string({
-			required_error: "Please select an email to display.",
-		})
-		.email(),
-})
-
-export function SelectForm() {
-	const form = useForm<z.infer<typeof FormSchema>>({
-		resolver: zodResolver(FormSchema),
-	})
-
-	function onSubmit(data: z.infer<typeof FormSchema>) {
-		toast({
-			title: "You submitted the following values:",
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(data, null, 2)}</code>
-				</pre>
-			),
-		})
-	}
-
-
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-				<FormField
-					control={form.control}
-					name="email"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Email</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
-								<FormControl>
-									<SelectTrigger>
-										<SelectValue placeholder="Select a verified email to display" />
-									</SelectTrigger>
-								</FormControl>
-								<SelectContent>
-									<SelectItem value="m@example.com">m@example.com</SelectItem>
-									<SelectItem value="m@google.com">m@google.com</SelectItem>
-									<SelectItem value="m@support.com">m@support.com</SelectItem>
-								</SelectContent>
-							</Select>
-							<FormDescription>
-								You can manage email addresses in your{" "}
-								<Link href="/examples/forms">email settings</Link>.
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button type="submit">Submit</Button>
-			</form>
-		</Form>
-	)
-}
-