diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/package.json b/apps/web/package.json
index cd9ed31a..06b59460 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -77,7 +77,7 @@
 		"tailwindcss-animate": "^1.0.7",
 		"unified": "^11.0.5",
 		"use-deep-compare-effect": "^1.8.1",
-		"vaul": "^1.1.1",
+		"vaul": "^1.1.2",
 		"wavesurfer.js": "^7.9.8",
 		"zod": "^3.25.67",
 		"zustand": "^5.0.2"
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 1f1a913d..dcc190d3 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { AlertTriangle } from "lucide-react";
 import { cn } from "@/utils/ui";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Alert02Icon } from "@hugeicons/core-free-icons";
diff --git a/apps/web/src/components/ui/breadcrumb.tsx b/apps/web/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index e95f2965..00000000
--- a/apps/web/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react";
-import { Slot as SlotPrimitive } from "radix-ui";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/utils/ui";
-
-const Breadcrumb = React.forwardRef<
-	HTMLElement,
-	React.ComponentPropsWithoutRef<"nav"> & {
-		separator?: React.ReactNode;
-	}
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<
-	HTMLOListElement,
-	React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-	<ol
-		ref={ref}
-		className={cn(
-			"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-			className,
-		)}
-		{...props}
-	/>
-));
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<
-	HTMLLIElement,
-	React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-	<li
-		ref={ref}
-		className={cn("inline-flex items-center gap-1.5", className)}
-		{...props}
-	/>
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-	HTMLAnchorElement,
-	React.ComponentPropsWithoutRef<"a"> & {
-		asChild?: boolean;
-	}
->(({ asChild, className, ...props }, ref) => {
-	const Comp = asChild ? SlotPrimitive.Slot : "a";
-
-	return (
-		<Comp
-			ref={ref}
-			className={cn("hover:text-foreground", className)}
-			{...props}
-		/>
-	);
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<
-	HTMLSpanElement,
-	React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-	<span
-		ref={ref}
-		role="link"
-		aria-disabled="true"
-		aria-current="page"
-		className={cn("text-foreground font-normal", className)}
-		{...props}
-	/>
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({
-	children,
-	className,
-	...props
-}: React.ComponentProps<"li">) => (
-	<li
-		role="presentation"
-		aria-hidden="true"
-		className={cn("[&>svg]:size-3.5", className)}
-		{...props}
-	>
-		{children ?? <ChevronRight />}
-	</li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({
-	className,
-	...props
-}: React.ComponentProps<"span">) => (
-	<span
-		role="presentation"
-		aria-hidden="true"
-		className={cn("flex size-9 items-center justify-center", className)}
-		{...props}
-	>
-		<MoreHorizontal className="size-4" />
-		<span className="sr-only">More</span>
-	</span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-};
diff --git a/apps/web/src/components/ui/carousel.tsx b/apps/web/src/components/ui/carousel.tsx
deleted file mode 100644
index 9018b9ea..00000000
--- a/apps/web/src/components/ui/carousel.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client";
-
-import useEmblaCarousel, {
-	type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/utils/ui";
-import { Button } from "./button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-	opts?: CarouselOptions;
-	plugins?: CarouselPlugin;
-	orientation?: "horizontal" | "vertical";
-	setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-	api: ReturnType<typeof useEmblaCarousel>[1];
-	scrollPrev: () => void;
-	scrollNext: () => void;
-	canScrollPrev: boolean;
-	canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-	const context = React.useContext(CarouselContext);
-
-	if (!context) {
-		throw new Error("useCarousel must be used within a <Carousel />");
-	}
-
-	return context;
-}
-
-const Carousel = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-	(
-		{
-			orientation = "horizontal",
-			opts,
-			setApi,
-			plugins,
-			className,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		const [carouselRef, api] = useEmblaCarousel(
-			{
-				...opts,
-				axis: orientation === "horizontal" ? "x" : "y",
-			},
-			plugins,
-		);
-		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-		const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-		const onSelect = React.useCallback((api: CarouselApi) => {
-			if (!api) {
-				return;
-			}
-
-			setCanScrollPrev(api.canScrollPrev());
-			setCanScrollNext(api.canScrollNext());
-		}, []);
-
-		const scrollPrev = React.useCallback(() => {
-			api?.scrollPrev();
-		}, [api]);
-
-		const scrollNext = React.useCallback(() => {
-			api?.scrollNext();
-		}, [api]);
-
-		const handleKeyDown = React.useCallback(
-			(event: React.KeyboardEvent<HTMLDivElement>) => {
-				if (event.key === "ArrowLeft") {
-					event.preventDefault();
-					scrollPrev();
-				} else if (event.key === "ArrowRight") {
-					event.preventDefault();
-					scrollNext();
-				}
-			},
-			[scrollPrev, scrollNext],
-		);
-
-		React.useEffect(() => {
-			if (!api || !setApi) {
-				return;
-			}
-
-			setApi(api);
-		}, [api, setApi]);
-
-		React.useEffect(() => {
-			if (!api) {
-				return;
-			}
-
-			onSelect(api);
-			api.on("reInit", onSelect);
-			api.on("select", onSelect);
-
-			return () => {
-				api?.off("select", onSelect);
-			};
-		}, [api, onSelect]);
-
-		return (
-			<CarouselContext.Provider
-				value={{
-					carouselRef,
-					api,
-					opts,
-					orientation:
-						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-					scrollPrev,
-					scrollNext,
-					canScrollPrev,
-					canScrollNext,
-				}}
-			>
-				<div
-					ref={ref}
-					onKeyDownCapture={handleKeyDown}
-					className={cn("relative", className)}
-					role="region"
-					aria-roledescription="carousel"
-					{...props}
-				>
-					{children}
-				</div>
-			</CarouselContext.Provider>
-		);
-	},
-);
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-	const { carouselRef, orientation } = useCarousel();
-
-	return (
-		<div ref={carouselRef} className="overflow-hidden">
-			<div
-				ref={ref}
-				className={cn(
-					"flex",
-					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-					className,
-				)}
-				{...props}
-			/>
-		</div>
-	);
-});
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-	const { orientation } = useCarousel();
-
-	return (
-		<div
-			ref={ref}
-			role="group"
-			aria-roledescription="slide"
-			className={cn(
-				"min-w-0 shrink-0 grow-0 basis-full",
-				orientation === "horizontal" ? "pl-4" : "pt-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
-});
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<
-	HTMLButtonElement,
-	React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-	return (
-		<Button
-			ref={ref}
-			variant={variant}
-			size={size}
-			className={cn(
-				"absolute size-8 rounded-full",
-				orientation === "horizontal"
-					? "top-1/2 -left-12 -translate-y-1/2"
-					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-				className,
-			)}
-			disabled={!canScrollPrev}
-			onClick={scrollPrev}
-			{...props}
-		>
-			<ArrowLeft className="size-4" />
-			<span className="sr-only">Previous slide</span>
-		</Button>
-	);
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<
-	HTMLButtonElement,
-	React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-	const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-	return (
-		<Button
-			ref={ref}
-			variant={variant}
-			size={size}
-			className={cn(
-				"absolute size-8 rounded-full",
-				orientation === "horizontal"
-					? "top-1/2 -right-12 -translate-y-1/2"
-					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-				className,
-			)}
-			disabled={!canScrollNext}
-			onClick={scrollNext}
-			{...props}
-		>
-			<ArrowRight className="size-4" />
-			<span className="sr-only">Next slide</span>
-		</Button>
-	);
-});
-CarouselNext.displayName = "CarouselNext";
-
-export {
-	type CarouselApi,
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselPrevious,
-	CarouselNext,
-};
diff --git a/apps/web/src/components/ui/chart.tsx b/apps/web/src/components/ui/chart.tsx
deleted file mode 100644
index 2bd04b20..00000000
--- a/apps/web/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-import {
-	NameType,
-	Payload,
-	ValueType,
-} from "recharts/types/component/DefaultTooltipContent";
-
-import { cn } from "@/utils/ui";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-	[k in string]: {
-		label?: React.ReactNode;
-		icon?: React.ComponentType;
-	} & (
-		| { color?: string; theme?: never }
-		| { color?: never; theme: Record<keyof typeof THEMES, string> }
-	);
-};
-
-type ChartContextProps = {
-	config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-	const context = React.useContext(ChartContext);
-
-	if (!context) {
-		throw new Error("useChart must be used within a <ChartContainer />");
-	}
-
-	return context;
-}
-
-const ChartContainer = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> & {
-		config: ChartConfig;
-		children: React.ComponentProps<
-			typeof RechartsPrimitive.ResponsiveContainer
-		>["children"];
-	}
->(({ id, className, children, config, ...props }, ref) => {
-	const uniqueId = React.useId();
-	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-	return (
-		<ChartContext.Provider value={{ config }}>
-			<div
-				data-chart={chartId}
-				ref={ref}
-				className={cn(
-					"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-					className,
-				)}
-				{...props}
-			>
-				<ChartStyle id={chartId} config={config} />
-				<RechartsPrimitive.ResponsiveContainer>
-					{children}
-				</RechartsPrimitive.ResponsiveContainer>
-			</div>
-		</ChartContext.Provider>
-	);
-});
-ChartContainer.displayName = "Chart";
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-	const colorConfig = Object.entries(config).filter(
-		([_, config]) => config.theme || config.color,
-	);
-
-	if (!colorConfig.length) {
-		return null;
-	}
-
-	return (
-		<style
-			dangerouslySetInnerHTML={{
-				__html: Object.entries(THEMES)
-					.map(
-						([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color =
-			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-			itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	})
-	.join("\n")}
-}
-`,
-					)
-					.join("\n"),
-			}}
-		/>
-	);
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-		React.ComponentProps<"div"> & {
-			hideLabel?: boolean;
-			hideIndicator?: boolean;
-			indicator?: "line" | "dot" | "dashed";
-			nameKey?: string;
-			labelKey?: string;
-		}
->(
-	(
-		{
-			active,
-			payload,
-			className,
-			indicator = "dot",
-			hideLabel = false,
-			hideIndicator = false,
-			label,
-			labelFormatter,
-			labelClassName,
-			formatter,
-			color,
-			nameKey,
-			labelKey,
-		},
-		ref,
-	) => {
-		const { config } = useChart();
-
-		const tooltipLabel = React.useMemo(() => {
-			if (hideLabel || !payload?.length) {
-				return null;
-			}
-
-			const [item] = payload;
-			const key = `${labelKey || item.dataKey || item.name || "value"}`;
-			const itemConfig = getPayloadConfigFromPayload(config, item, key);
-			const value =
-				!labelKey && typeof label === "string"
-					? config[label as keyof typeof config]?.label || label
-					: itemConfig?.label;
-
-			if (labelFormatter) {
-				return (
-					<div className={cn("font-medium", labelClassName)}>
-						{labelFormatter(value, payload)}
-					</div>
-				);
-			}
-
-			if (!value) {
-				return null;
-			}
-
-			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-		}, [
-			label,
-			labelFormatter,
-			payload,
-			hideLabel,
-			labelClassName,
-			config,
-			labelKey,
-		]);
-
-		if (!active || !payload?.length) {
-			return null;
-		}
-
-		const nestLabel = payload.length === 1 && indicator !== "dot";
-
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-					className,
-				)}
-			>
-				{nestLabel ? null : tooltipLabel}
-				<div className="grid gap-1.5">
-					{payload.map((item, index) => {
-						const key = `${nameKey || item.name || item.dataKey || "value"}`;
-						const itemConfig = getPayloadConfigFromPayload(config, item, key);
-						const indicatorColor = color || item.payload.fill || item.color;
-
-						return (
-							<div
-								key={item.dataKey}
-								className={cn(
-									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
-									indicator === "dot" && "items-center",
-								)}
-							>
-								{formatter && item?.value !== undefined && item.name ? (
-									formatter(item.value, item.name, item, index, item.payload)
-								) : (
-									<>
-										{itemConfig?.icon ? (
-											<itemConfig.icon />
-										) : (
-											!hideIndicator && (
-												<div
-													className={cn(
-														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-														{
-															"size-2.5": indicator === "dot",
-															"w-1": indicator === "line",
-															"w-0 border-[1.5px] border-dashed bg-transparent":
-																indicator === "dashed",
-															"my-0.5": nestLabel && indicator === "dashed",
-														},
-													)}
-													style={
-														{
-															"--color-bg": indicatorColor,
-															"--color-border": indicatorColor,
-														} as React.CSSProperties
-													}
-												/>
-											)
-										)}
-										<div
-											className={cn(
-												"flex flex-1 justify-between leading-none",
-												nestLabel ? "items-end" : "items-center",
-											)}
-										>
-											<div className="grid gap-1.5">
-												{nestLabel ? tooltipLabel : null}
-												<span className="text-muted-foreground">
-													{itemConfig?.label || item.name}
-												</span>
-											</div>
-											{item.value && (
-												<span className="text-foreground font-mono font-medium tabular-nums">
-													{item.value.toLocaleString()}
-												</span>
-											)}
-										</div>
-									</>
-								)}
-							</div>
-						);
-					})}
-				</div>
-			</div>
-		);
-	},
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> &
-		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-			hideIcon?: boolean;
-			nameKey?: string;
-		}
->(
-	(
-		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-		ref,
-	) => {
-		const { config } = useChart();
-
-		if (!payload?.length) {
-			return null;
-		}
-
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex items-center justify-center gap-4",
-					verticalAlign === "top" ? "pb-3" : "pt-3",
-					className,
-				)}
-			>
-				{payload.map((item) => {
-					const key = `${nameKey || item.dataKey || "value"}`;
-					const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-					return (
-						<div
-							key={item.value}
-							className={cn(
-								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3",
-							)}
-						>
-							{itemConfig?.icon && !hideIcon ? (
-								<itemConfig.icon />
-							) : (
-								<div
-									className="size-2 shrink-0 rounded-[2px]"
-									style={{
-										backgroundColor: item.color,
-									}}
-								/>
-							)}
-							{itemConfig?.label}
-						</div>
-					);
-				})}
-			</div>
-		);
-	},
-);
-ChartLegendContent.displayName = "ChartLegend";
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-	config: ChartConfig,
-	payload: unknown,
-	key: string,
-) {
-	if (typeof payload !== "object" || payload === null) {
-		return;
-	}
-
-	const payloadPayload =
-		"payload" in payload &&
-		typeof payload.payload === "object" &&
-		payload.payload !== null
-			? payload.payload
-			: undefined;
-
-	let configLabelKey: string = key;
-
-	if (
-		key in payload &&
-		typeof payload[key as keyof typeof payload] === "string"
-	) {
-		configLabelKey = payload[key as keyof typeof payload] as string;
-	} else if (
-		payloadPayload &&
-		key in payloadPayload &&
-		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-	) {
-		configLabelKey = payloadPayload[
-			key as keyof typeof payloadPayload
-		] as string;
-	}
-
-	return configLabelKey in config
-		? config[configLabelKey]
-		: config[key as keyof typeof config];
-}
-
-export {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-	ChartLegend,
-	ChartLegendContent,
-	ChartStyle,
-};
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
deleted file mode 100644
index f5d96125..00000000
--- a/apps/web/src/components/ui/command.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-"use client";
-
-import * as React from "react";
-import type { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import { cn } from "@/utils/ui";
-import { Dialog, DialogContent } from "./dialog";
-
-const Command = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive
-		ref={ref}
-		className={cn(
-			"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
-			className,
-		)}
-		{...props}
-	/>
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-	return (
-		<Dialog {...props}>
-			<DialogContent className="overflow-hidden p-0">
-				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
-					{children}
-				</Command>
-			</DialogContent>
-		</Dialog>
-	);
-};
-
-const CommandInput = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Input>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<Search className="mr-2 size-4 shrink-0 opacity-50" />
-		<CommandPrimitive.Input
-			ref={ref}
-			className={cn(
-				"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
-			{...props}
-		/>
-	</div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.List
-		ref={ref}
-		className={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", className)}
-		{...props}
-	/>
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Empty>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-	<CommandPrimitive.Empty
-		ref={ref}
-		className="py-6 text-center text-sm"
-		{...props}
-	/>
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Group>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Group
-		ref={ref}
-		className={cn(
-			"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-			className,
-		)}
-		{...props}
-	/>
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Separator
-		ref={ref}
-		className={cn("bg-border -mx-1 h-px", className)}
-		{...props}
-	/>
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Item
-		ref={ref}
-		className={cn(
-			"data-[selected=true]:bg-popover-hover data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-			className,
-		)}
-		{...props}
-	/>
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-	return (
-		<span
-			className={cn(
-				"text-muted-foreground ml-auto text-xs tracking-widest",
-				className,
-			)}
-			{...props}
-		/>
-	);
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-	Command,
-	CommandDialog,
-	CommandInput,
-	CommandList,
-	CommandEmpty,
-	CommandGroup,
-	CommandItem,
-	CommandShortcut,
-	CommandSeparator,
-};
diff --git a/apps/web/src/components/ui/drawer.tsx b/apps/web/src/components/ui/drawer.tsx
deleted file mode 100644
index d5752d62..00000000
--- a/apps/web/src/components/ui/drawer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "@/utils/ui";
-
-const Drawer = ({
-	shouldScaleBackground = true,
-	...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-	<DrawerPrimitive.Root
-		shouldScaleBackground={shouldScaleBackground}
-		{...props}
-	/>
-);
-Drawer.displayName = "Drawer";
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-	<DrawerPrimitive.Overlay
-		ref={ref}
-		className={cn("fixed inset-0 z-50 bg-black/80", className)}
-		{...props}
-	/>
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<DrawerPortal>
-		<DrawerOverlay />
-		<DrawerPrimitive.Content
-			ref={ref}
-			className={cn(
-				"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
-				className,
-			)}
-			{...props}
-		>
-			<div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
-			{children}
-		</DrawerPrimitive.Content>
-	</DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
-
-const DrawerHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-		{...props}
-	/>
-);
-DrawerHeader.displayName = "DrawerHeader";
-
-const DrawerFooter = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-		{...props}
-	/>
-);
-DrawerFooter.displayName = "DrawerFooter";
-
-const DrawerTitle = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-	<DrawerPrimitive.Title
-		ref={ref}
-		className={cn(
-			"text-lg leading-none font-semibold tracking-tight",
-			className,
-		)}
-		{...props}
-	/>
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-	<DrawerPrimitive.Description
-		ref={ref}
-		className={cn("text-muted-foreground text-sm", className)}
-		{...props}
-	/>
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-	Drawer,
-	DrawerPortal,
-	DrawerOverlay,
-	DrawerTrigger,
-	DrawerClose,
-	DrawerContent,
-	DrawerHeader,
-	DrawerFooter,
-	DrawerTitle,
-	DrawerDescription,
-};
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
deleted file mode 100644
index ec71f96a..00000000
--- a/apps/web/src/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-
-import { cn } from "@/utils/ui";
-
-const InputOTP = React.forwardRef<
-	React.ElementRef<typeof OTPInput>,
-	React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-	<OTPInput
-		ref={ref}
-		containerClassName={cn(
-			"flex items-center justify-between gap-2 w-full has-disabled:opacity-50",
-			containerClassName,
-		)}
-		className={cn("disabled:cursor-not-allowed", className)}
-		{...props}
-	/>
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-	<div
-		ref={ref}
-		className={cn("flex flex-1 items-center gap-2", className)}
-		{...props}
-	/>
-));
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-	const inputOTPContext = React.useContext(OTPInputContext);
-	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-
-	return (
-		<div
-			ref={ref}
-			className={cn(
-				"border-input relative flex aspect-square min-w-[36px] flex-1 items-center justify-center border text-lg shadow-xs first:rounded-l-md first:border-l last:rounded-r-md",
-				isActive && "ring-ring z-10 ring-1",
-				className,
-			)}
-			{...props}
-		>
-			{char}
-			{hasFakeCaret && (
-				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-				</div>
-			)}
-		</div>
-	);
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-	<div ref={ref} role="separator" {...props}>
-		<Minus />
-	</div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
deleted file mode 100644
index 96eec969..00000000
--- a/apps/web/src/components/ui/pagination.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/utils/ui";
-import { type ButtonProps, buttonVariants } from "./button";
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-	<nav
-		role="navigation"
-		aria-label="pagination"
-		className={cn("mx-auto flex w-full justify-center", className)}
-		{...props}
-	/>
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<
-	HTMLUListElement,
-	React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-	<ul
-		ref={ref}
-		className={cn("flex flex-row items-center gap-1", className)}
-		{...props}
-	/>
-));
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<
-	HTMLLIElement,
-	React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-	<li ref={ref} className={cn("", className)} {...props} />
-));
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = {
-	isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-	React.ComponentProps<"a">;
-
-const PaginationLink = ({
-	className,
-	isActive,
-	size = "icon",
-	...props
-}: PaginationLinkProps) => (
-	<a
-		aria-current={isActive ? "page" : undefined}
-		className={cn(
-			buttonVariants({
-				variant: isActive ? "outline" : "text",
-				size,
-			}),
-			className,
-		)}
-		{...props}
-	/>
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({
-	className,
-	...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-	<PaginationLink
-		aria-label="Go to previous page"
-		size="default"
-		className={cn("gap-1 pl-2.5", className)}
-		{...props}
-	>
-		<ChevronLeft className="size-4" />
-		<span>Previous</span>
-	</PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({
-	className,
-	...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-	<PaginationLink
-		aria-label="Go to next page"
-		size="default"
-		className={cn("gap-1 pr-2.5", className)}
-		{...props}
-	>
-		<span>Next</span>
-		<ChevronRight className="size-4" />
-	</PaginationLink>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({
-	className,
-	...props
-}: React.ComponentProps<"span">) => (
-	<span
-		aria-hidden
-		className={cn("flex size-9 items-center justify-center", className)}
-		{...props}
-	>
-		<MoreHorizontal className="size-4" />
-		<span className="sr-only">More pages</span>
-	</span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-	Pagination,
-	PaginationContent,
-	PaginationLink,
-	PaginationItem,
-	PaginationPrevious,
-	PaginationNext,
-	PaginationEllipsis,
-};
diff --git a/apps/web/src/components/ui/phone-input.tsx b/apps/web/src/components/ui/phone-input.tsx
deleted file mode 100644
index a8b74e2a..00000000
--- a/apps/web/src/components/ui/phone-input.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import * as React from "react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import * as RPNInput from "react-phone-number-input";
-import flags from "react-phone-number-input/flags";
-
-import { Button } from "./button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "./command";
-import { Input } from "./input";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { ScrollArea } from "./scroll-area";
-import { cn } from "@/utils/ui";
-
-type PhoneInputProps = Omit<
-	React.ComponentProps<"input">,
-	"onChange" | "value" | "ref"
-> &
-	Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
-		onChange?: (value: RPNInput.Value) => void;
-	};
-
-const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
-	React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
-		({ className, onChange, defaultCountry = "US", ...props }, ref) => {
-			return (
-				<RPNInput.default
-					ref={ref}
-					className={cn("flex", className)}
-					flagComponent={FlagComponent}
-					countrySelectComponent={CountrySelect}
-					inputComponent={InputComponent}
-					defaultCountry={defaultCountry}
-					international
-					addInternationalOption
-					smartCaret={false}
-					/**
-					 * Handles the onChange event.
-					 *
-					 * react-phone-number-input might trigger the onChange event as undefined
-					 * when a valid phone number is not entered. To prevent this,
-					 * the value is coerced to an empty string.
-					 *
-					 * @param {E164Number | undefined} value - The entered value
-					 */
-					onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
-					{...props}
-				/>
-			);
-		},
-	);
-PhoneInput.displayName = "PhoneInput";
-
-const InputComponent = React.forwardRef<
-	HTMLInputElement,
-	React.ComponentProps<"input">
->(({ className, size: _size, ...props }, ref) => (
-	<Input
-		className={cn("rounded-s-none rounded-e-lg", className)}
-		{...props}
-		ref={ref}
-	/>
-));
-InputComponent.displayName = "InputComponent";
-
-type CountryEntry = { label: string; value: RPNInput.Country | undefined };
-
-type CountrySelectProps = {
-	disabled?: boolean;
-	value: RPNInput.Country;
-	options: CountryEntry[];
-	onChange: (country: RPNInput.Country) => void;
-};
-
-const CountrySelect = ({
-	disabled,
-	value: selectedCountry,
-	options: countryList,
-	onChange,
-}: CountrySelectProps) => {
-	return (
-		<Popover>
-			<PopoverTrigger asChild>
-				<Button
-					variant="outline"
-					className="flex gap-1 rounded-s-lg rounded-e-none border-r-0 px-3 focus:z-10"
-					disabled={disabled}
-				>
-					<FlagComponent
-						country={selectedCountry}
-						countryName={selectedCountry}
-					/>
-					<ChevronsUpDown
-						className={cn(
-							"-mr-2 opacity-50",
-							disabled ? "hidden" : "opacity-100",
-						)}
-					/>
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent className="w-[300px] p-0">
-				<Command>
-					<CommandInput placeholder="Search country..." />
-					<CommandList>
-						<ScrollArea className="h-72">
-							<CommandEmpty>No country found.</CommandEmpty>
-							<CommandGroup>
-								{countryList.map(({ value, label }) =>
-									value ? (
-										<CountrySelectOption
-											key={value}
-											country={value}
-											countryName={label}
-											selectedCountry={selectedCountry}
-											onChange={onChange}
-										/>
-									) : null,
-								)}
-							</CommandGroup>
-						</ScrollArea>
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
-	);
-};
-
-interface CountrySelectOptionProps extends RPNInput.FlagProps {
-	selectedCountry: RPNInput.Country;
-	onChange: (country: RPNInput.Country) => void;
-}
-
-const CountrySelectOption = ({
-	country,
-	countryName,
-	selectedCountry,
-	onChange,
-}: CountrySelectOptionProps) => {
-	return (
-		<CommandItem className="gap-2" onSelect={() => onChange(country)}>
-			<FlagComponent country={country} countryName={countryName} />
-			<span className="flex-1 text-sm">{countryName}</span>
-			<span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
-			<CheckIcon
-				className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
-			/>
-		</CommandItem>
-	);
-};
-
-const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
-	const Flag = flags[country];
-
-	return (
-		<span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm [&_svg]:size-full">
-			{Flag && <Flag title={countryName} />}
-		</span>
-	);
-};
-
-export { PhoneInput };
diff --git a/apps/web/src/components/ui/prose.tsx b/apps/web/src/components/ui/prose.tsx
deleted file mode 100644
index 4e526b7e..00000000
--- a/apps/web/src/components/ui/prose.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { cn } from "@/utils/ui";
-import type React from "react";
-
-type ProseProps = React.HTMLAttributes<HTMLElement> & {
-	as?: "article";
-	html: string;
-};
-
-function Prose({ children, html, className }: ProseProps) {
-	return (
-		<article
-			className={cn(
-				"prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:first:mt-0 dark:prose-invert mx-auto max-w-none px-2",
-				className,
-			)}
-		>
-			{html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
-		</article>
-	);
-}
-
-export default Prose;
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
deleted file mode 100644
index a41e25c7..00000000
--- a/apps/web/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,725 +0,0 @@
-"use client";
-
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeftIcon } from "lucide-react";
-import * as React from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetHeader,
-	SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/utils/ui";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContextProps = {
-	state: "expanded" | "collapsed";
-	open: boolean;
-	setOpen: (open: boolean) => void;
-	openMobile: boolean;
-	setOpenMobile: (open: boolean) => void;
-	isMobile: boolean;
-	toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-	const context = React.useContext(SidebarContext);
-	if (!context) {
-		throw new Error("useSidebar must be used within a SidebarProvider.");
-	}
-
-	return context;
-}
-
-function SidebarProvider({
-	defaultOpen = true,
-	open: openProp,
-	onOpenChange: setOpenProp,
-	className,
-	style,
-	children,
-	...props
-}: React.ComponentProps<"div"> & {
-	defaultOpen?: boolean;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-}) {
-	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = React.useState(false);
-
-	// This is the internal state of the sidebar.
-	// We use openProp and setOpenProp for control from outside the component.
-	const [_open, _setOpen] = React.useState(defaultOpen);
-	const open = openProp ?? _open;
-	const setOpen = React.useCallback(
-		(value: boolean | ((value: boolean) => boolean)) => {
-			const openState = typeof value === "function" ? value(open) : value;
-			if (setOpenProp) {
-				setOpenProp(openState);
-			} else {
-				_setOpen(openState);
-			}
-
-			// This sets the cookie to keep the sidebar state.
-			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-		},
-		[setOpenProp, open],
-	);
-
-	// Helper to toggle the sidebar.
-	const toggleSidebar = React.useCallback(() => {
-		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-	}, [isMobile, setOpen, setOpenMobile]);
-
-	// Adds a keyboard shortcut to toggle the sidebar.
-	React.useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (
-				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-				(event.metaKey || event.ctrlKey)
-			) {
-				event.preventDefault();
-				toggleSidebar();
-			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [toggleSidebar]);
-
-	// We add a state so that we can do data-state="expanded" or "collapsed".
-	// This makes it easier to style the sidebar with Tailwind classes.
-	const state = open ? "expanded" : "collapsed";
-
-	const contextValue = React.useMemo<SidebarContextProps>(
-		() => ({
-			state,
-			open,
-			setOpen,
-			isMobile,
-			openMobile,
-			setOpenMobile,
-			toggleSidebar,
-		}),
-		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-	);
-
-	return (
-		<SidebarContext.Provider value={contextValue}>
-			<TooltipProvider delayDuration={0}>
-				<div
-					data-slot="sidebar-wrapper"
-					style={
-						{
-							"--sidebar-width": SIDEBAR_WIDTH,
-							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-							...style,
-						} as React.CSSProperties
-					}
-					className={cn(
-						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-						className,
-					)}
-					{...props}
-				>
-					{children}
-				</div>
-			</TooltipProvider>
-		</SidebarContext.Provider>
-	);
-}
-
-function Sidebar({
-	side = "left",
-	variant = "sidebar",
-	collapsible = "offcanvas",
-	className,
-	children,
-	...props
-}: React.ComponentProps<"div"> & {
-	side?: "left" | "right";
-	variant?: "sidebar" | "floating" | "inset";
-	collapsible?: "offcanvas" | "icon" | "none";
-}) {
-	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-	if (collapsible === "none") {
-		return (
-			<div
-				data-slot="sidebar"
-				className={cn(
-					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</div>
-		);
-	}
-
-	if (isMobile) {
-		return (
-			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-				<SheetContent
-					data-sidebar="sidebar"
-					data-slot="sidebar"
-					data-mobile="true"
-					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-					style={
-						{
-							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-						} as React.CSSProperties
-					}
-					side={side}
-				>
-					<SheetHeader className="sr-only">
-						<SheetTitle>Sidebar</SheetTitle>
-						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
-					</SheetHeader>
-					<div className="flex size-full flex-col">{children}</div>
-				</SheetContent>
-			</Sheet>
-		);
-	}
-
-	return (
-		<div
-			className="group peer text-sidebar-foreground hidden md:block"
-			data-state={state}
-			data-collapsible={state === "collapsed" ? collapsible : ""}
-			data-variant={variant}
-			data-side={side}
-			data-slot="sidebar"
-		>
-			{/* This is what handles the sidebar gap on desktop */}
-			<div
-				data-slot="sidebar-gap"
-				className={cn(
-					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-					"group-data-[collapsible=offcanvas]:w-0",
-					"group-data-[side=right]:rotate-180",
-					variant === "floating" || variant === "inset"
-						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
-				)}
-			/>
-			<div
-				data-slot="sidebar-container"
-				className={cn(
-					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-					side === "left"
-						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-					// Adjust the padding for floating and inset variants.
-					variant === "floating" || variant === "inset"
-						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-					className,
-				)}
-				{...props}
-			>
-				<div
-					data-sidebar="sidebar"
-					data-slot="sidebar-inner"
-					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-				>
-					{children}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function SidebarTrigger({
-	className,
-	onClick,
-	...props
-}: React.ComponentProps<typeof Button>) {
-	const { toggleSidebar } = useSidebar();
-
-	return (
-		<Button
-			data-sidebar="trigger"
-			data-slot="sidebar-trigger"
-			variant="text"
-			size="icon"
-			className={cn("size-7", className)}
-			onClick={(event) => {
-				onClick?.(event);
-				toggleSidebar();
-			}}
-			{...props}
-		>
-			<PanelLeftIcon />
-			<span className="sr-only">Toggle Sidebar</span>
-		</Button>
-	);
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-	const { toggleSidebar } = useSidebar();
-
-	return (
-		<button
-			data-sidebar="rail"
-			data-slot="sidebar-rail"
-			aria-label="Toggle Sidebar"
-			tabIndex={-1}
-			onClick={toggleSidebar}
-			title="Toggle Sidebar"
-			className={cn(
-				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-	return (
-		<main
-			data-slot="sidebar-inset"
-			className={cn(
-				"bg-background relative flex w-full flex-1 flex-col",
-				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarInput({
-	className,
-	...props
-}: React.ComponentProps<typeof Input>) {
-	return (
-		<Input
-			data-slot="sidebar-input"
-			data-sidebar="input"
-			className={cn("bg-background h-8 w-full shadow-none", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-header"
-			data-sidebar="header"
-			className={cn("flex flex-col gap-2 p-2", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-footer"
-			data-sidebar="footer"
-			className={cn("flex flex-col gap-2 p-2", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarSeparator({
-	className,
-	...props
-}: React.ComponentProps<typeof Separator>) {
-	return (
-		<Separator
-			data-slot="sidebar-separator"
-			data-sidebar="separator"
-			className={cn("bg-sidebar-border mx-2 w-auto", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-content"
-			data-sidebar="content"
-			className={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-group"
-			data-sidebar="group"
-			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarGroupLabel({
-	className,
-	asChild = false,
-	...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "div";
-
-	return (
-		<Comp
-			data-slot="sidebar-group-label"
-			data-sidebar="group-label"
-			className={cn(
-				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarGroupAction({
-	className,
-	asChild = false,
-	...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "button";
-
-	return (
-		<Comp
-			data-slot="sidebar-group-action"
-			data-sidebar="group-action"
-			className={cn(
-				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				// Increases the hit area of the button on mobile.
-				"after:absolute after:-inset-2 md:after:hidden",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarGroupContent({
-	className,
-	...props
-}: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-group-content"
-			data-sidebar="group-content"
-			className={cn("w-full text-sm", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-	return (
-		<ul
-			data-slot="sidebar-menu"
-			data-sidebar="menu"
-			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="sidebar-menu-item"
-			data-sidebar="menu-item"
-			className={cn("group/menu-item relative", className)}
-			{...props}
-		/>
-	);
-}
-
-const sidebarMenuButtonVariants = cva(
-	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-				outline:
-					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-			},
-			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-function SidebarMenuButton({
-	asChild = false,
-	isActive = false,
-	variant = "default",
-	size = "default",
-	tooltip,
-	className,
-	...props
-}: React.ComponentProps<"button"> & {
-	asChild?: boolean;
-	isActive?: boolean;
-	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-	const Comp = asChild ? Slot : "button";
-	const { isMobile, state } = useSidebar();
-
-	const button = (
-		<Comp
-			data-slot="sidebar-menu-button"
-			data-sidebar="menu-button"
-			data-size={size}
-			data-active={isActive}
-			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-			{...props}
-		/>
-	);
-
-	if (!tooltip) {
-		return button;
-	}
-
-	if (typeof tooltip === "string") {
-		tooltip = {
-			children: tooltip,
-		};
-	}
-
-	return (
-		<Tooltip>
-			<TooltipTrigger asChild>{button}</TooltipTrigger>
-			<TooltipContent
-				side="right"
-				align="center"
-				hidden={state !== "collapsed" || isMobile}
-				{...tooltip}
-			/>
-		</Tooltip>
-	);
-}
-
-function SidebarMenuAction({
-	className,
-	asChild = false,
-	showOnHover = false,
-	...props
-}: React.ComponentProps<"button"> & {
-	asChild?: boolean;
-	showOnHover?: boolean;
-}) {
-	const Comp = asChild ? Slot : "button";
-
-	return (
-		<Comp
-			data-slot="sidebar-menu-action"
-			data-sidebar="menu-action"
-			className={cn(
-				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				// Increases the hit area of the button on mobile.
-				"after:absolute after:-inset-2 md:after:hidden",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				showOnHover &&
-					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenuBadge({
-	className,
-	...props
-}: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sidebar-menu-badge"
-			data-sidebar="menu-badge"
-			className={cn(
-				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenuSkeleton({
-	className,
-	showIcon = false,
-	...props
-}: React.ComponentProps<"div"> & {
-	showIcon?: boolean;
-}) {
-	// Random width between 50 to 90%.
-	const width = React.useMemo(() => {
-		return `${Math.floor(Math.random() * 40) + 50}%`;
-	}, []);
-
-	return (
-		<div
-			data-slot="sidebar-menu-skeleton"
-			data-sidebar="menu-skeleton"
-			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-			{...props}
-		>
-			{showIcon && (
-				<Skeleton
-					className="size-4 rounded-md"
-					data-sidebar="menu-skeleton-icon"
-				/>
-			)}
-			<Skeleton
-				className="h-4 max-w-(--skeleton-width) flex-1"
-				data-sidebar="menu-skeleton-text"
-				style={
-					{
-						"--skeleton-width": width,
-					} as React.CSSProperties
-				}
-			/>
-		</div>
-	);
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-	return (
-		<ul
-			data-slot="sidebar-menu-sub"
-			data-sidebar="menu-sub"
-			className={cn(
-				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenuSubItem({
-	className,
-	...props
-}: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="sidebar-menu-sub-item"
-			data-sidebar="menu-sub-item"
-			className={cn("group/menu-sub-item relative", className)}
-			{...props}
-		/>
-	);
-}
-
-function SidebarMenuSubButton({
-	asChild = false,
-	size = "md",
-	isActive = false,
-	className,
-	...props
-}: React.ComponentProps<"a"> & {
-	asChild?: boolean;
-	size?: "sm" | "md";
-	isActive?: boolean;
-}) {
-	const Comp = asChild ? Slot : "a";
-
-	return (
-		<Comp
-			data-slot="sidebar-menu-sub-button"
-			data-sidebar="menu-sub-button"
-			data-size={size}
-			data-active={isActive}
-			className={cn(
-				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-				size === "sm" && "text-xs",
-				size === "md" && "text-sm",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarGroup,
-	SidebarGroupAction,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarHeader,
-	SidebarInput,
-	SidebarInset,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuBadge,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSkeleton,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-	SidebarProvider,
-	SidebarRail,
-	SidebarSeparator,
-	SidebarTrigger,
-	useSidebar,
-};
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
index 769ac360..c38586fe 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -60,6 +60,7 @@ const TooltipContent = React.forwardRef<
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
 				className="absolute top-1/2 left-[-6px] -translate-y-1/2"
+			aria-hidden="true"
 			>
 				<path
 					d="M6 0L0 5L6 10V0Z"
diff --git a/bun.lock b/bun.lock
index 8e90a37a..39f6a1d4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -79,7 +79,7 @@
         "tailwindcss-animate": "^1.0.7",
         "unified": "^11.0.5",
         "use-deep-compare-effect": "^1.8.1",
-        "vaul": "^1.1.1",
+        "vaul": "^1.1.2",
         "wavesurfer.js": "^7.9.8",
         "zod": "^3.25.67",
         "zustand": "^5.0.2",