codebase overhaul (#697)

138 files changed, 12061 insertions, 15048 deletions

diff --git a/apps/web/src/components/delete-project-dialog.tsx b/apps/web/src/components/delete-project-dialog.tsx
deleted file mode 100644
index e8f8703c..00000000
--- a/apps/web/src/components/delete-project-dialog.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-
-export function DeleteProjectDialog({
-  isOpen,
-  onOpenChange,
-  onConfirm,
-  projectName,
-}: {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  projectName?: string;
-}) {
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle>
-            {projectName ? (
-              <>
-                {"Delete '"}
-                <span className="inline-block max-w-[300px] truncate align-bottom">
-                  {projectName}
-                </span>
-                {"'?"}
-              </>
-            ) : (
-              "Delete Project?"
-            )}
-          </DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this project? This action cannot be
-            undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button
-            variant="text"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button variant="destructive" onClick={onConfirm}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/web/src/components/editable-timecode.tsx b/apps/web/src/components/editable-timecode.tsx
new file mode 100644
index 00000000..d32f067a
--- /dev/null
+++ b/apps/web/src/components/editable-timecode.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import type { TTimeCode } from "@/types/time";
+import { cn } from "@/utils/ui";
+
+interface EditableTimecodeProps {
+	time: number;
+	duration: number;
+	format?: TTimeCode;
+	fps: number;
+	onTimeChange?: ({ time }: { time: number }) => void;
+	className?: string;
+	disabled?: boolean;
+}
+
+export function EditableTimecode({
+	time,
+	duration,
+	format = "HH:MM:SS:FF",
+	fps,
+	onTimeChange,
+	className,
+	disabled = false,
+}: EditableTimecodeProps) {
+	const [isEditing, setIsEditing] = useState(false);
+	const [inputValue, setInputValue] = useState("");
+	const [hasError, setHasError] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const enterPressedRef = useRef(false);
+	const formattedTime = formatTimeCode({ timeInSeconds: time, format, fps });
+
+	const startEditing = () => {
+		if (disabled) return;
+		setIsEditing(true);
+		setInputValue(formattedTime);
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
+
+	const cancelEditing = () => {
+		setIsEditing(false);
+		setInputValue("");
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
+
+	const applyEdit = () => {
+		const parsedTime = parseTimeCode({ timeCode: inputValue, format, fps });
+
+		if (parsedTime === null) {
+			setHasError(true);
+			return;
+		}
+
+		const clampedTime = Math.max(
+			0,
+			duration ? Math.min(duration, parsedTime) : parsedTime,
+		);
+
+		onTimeChange?.({ time: clampedTime });
+		setIsEditing(false);
+		setInputValue("");
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
+
+	const handleKeyDown = ({
+		key,
+		preventDefault,
+	}: React.KeyboardEvent<HTMLInputElement>) => {
+		if (key === "Enter") {
+			preventDefault();
+			enterPressedRef.current = true;
+			applyEdit();
+		} else if (key === "Escape") {
+			preventDefault();
+			cancelEditing();
+		}
+	};
+
+	const handleInputChange = ({
+		target,
+	}: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(target.value);
+		setHasError(false);
+	};
+
+	const handleBlur = () => {
+		if (!enterPressedRef.current && isEditing) {
+			applyEdit();
+		}
+	};
+
+	const handleDisplayKeyDown = ({
+		key,
+		preventDefault,
+	}: React.KeyboardEvent<HTMLButtonElement>) => {
+		if (disabled) return;
+
+		if (key === "Enter" || key === " ") {
+			preventDefault();
+			startEditing();
+		}
+	};
+
+	useEffect(() => {
+		if (isEditing && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, [isEditing]);
+
+	if (isEditing) {
+		return (
+			<input
+				ref={inputRef}
+				type="text"
+				value={inputValue}
+				onChange={handleInputChange}
+				onKeyDown={handleKeyDown}
+				onBlur={handleBlur}
+				className={cn(
+					"border-none bg-transparent font-mono text-xs outline-none",
+					"focus:bg-background focus:border-primary focus:rounded focus:border focus:px-1",
+					"text-primary tabular-nums",
+					hasError && "text-destructive focus:border-destructive",
+					className,
+				)}
+				style={{ width: `${formattedTime.length + 1}ch` }}
+				placeholder={formattedTime}
+			/>
+		);
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={startEditing}
+			onKeyDown={handleDisplayKeyDown}
+			disabled={disabled}
+			className={cn(
+				"text-primary cursor-pointer font-mono text-xs tabular-nums",
+				"hover:bg-muted/50 -mx-1 px-1 hover:rounded",
+				disabled && "cursor-default hover:bg-transparent",
+				className,
+			)}
+			title={disabled ? undefined : "Click to edit time"}
+		>
+			{formattedTime}
+		</button>
+	);
+}
diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
deleted file mode 100644
index 60406f61..00000000
--- a/apps/web/src/components/editor/audio-waveform.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import WaveSurfer from "wavesurfer.js";
-
-interface AudioWaveformProps {
-  audioUrl: string;
-  height?: number;
-  className?: string;
-}
-
-const AudioWaveform: React.FC<AudioWaveformProps> = ({
-  audioUrl,
-  height = 32,
-  className = "",
-}) => {
-  const waveformRef = useRef<HTMLDivElement>(null);
-  const wavesurfer = useRef<WaveSurfer | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    let mounted = true;
-    let ws = wavesurfer.current;
-
-    const initWaveSurfer = async () => {
-      if (!waveformRef.current || !audioUrl) return;
-
-      try {
-        // Clear any existing instance safely
-        if (ws) {
-          // Instead of immediately destroying, just set to null
-          // We'll destroy it outside this function
-          wavesurfer.current = null;
-        }
-
-        // Create a fresh instance
-        const newWaveSurfer = WaveSurfer.create({
-          container: waveformRef.current,
-          waveColor: "rgba(255, 255, 255, 0.6)",
-          progressColor: "rgba(255, 255, 255, 0.9)",
-          cursorColor: "transparent",
-          barWidth: 2,
-          barGap: 1,
-          height,
-          normalize: true,
-          interact: false,
-        });
-
-        // Assign to ref only if component is still mounted
-        if (mounted) {
-          wavesurfer.current = newWaveSurfer;
-        } else {
-          // Component unmounted during initialization, clean up
-          try {
-            newWaveSurfer.destroy();
-          } catch (e) {
-            // Ignore destroy errors
-          }
-          return;
-        }
-
-        // Event listeners
-        newWaveSurfer.on("ready", () => {
-          if (mounted) {
-            setIsLoading(false);
-            setError(false);
-          }
-        });
-
-        newWaveSurfer.on("error", (err) => {
-          if (mounted) {
-            console.error("WaveSurfer error:", err);
-            setError(true);
-            setIsLoading(false);
-          }
-        });
-
-        await newWaveSurfer.load(audioUrl);
-      } catch (err) {
-        if (mounted) {
-          console.error("Failed to initialize WaveSurfer:", err);
-          setError(true);
-          setIsLoading(false);
-        }
-      }
-    };
-
-    // First safely destroy previous instance if it exists
-    if (ws) {
-      // Use this pattern to safely destroy the previous instance
-      const wsToDestroy = ws;
-      // Detach from ref immediately
-      wavesurfer.current = null;
-
-      // Wait a tick to destroy so any pending operations can complete
-      requestAnimationFrame(() => {
-        try {
-          wsToDestroy.destroy();
-        } catch (e) {
-          // Ignore errors during destroy
-        }
-        // Only initialize new instance after destroying the old one
-        if (mounted) {
-          initWaveSurfer();
-        }
-      });
-    } else {
-      // No previous instance to clean up, initialize directly
-      initWaveSurfer();
-    }
-
-    return () => {
-      // Mark component as unmounted
-      mounted = false;
-
-      // Store reference to current wavesurfer instance
-      const wsToDestroy = wavesurfer.current;
-
-      // Immediately clear the ref to prevent accessing it after unmount
-      wavesurfer.current = null;
-
-      // If we have an instance to clean up, do it safely
-      if (wsToDestroy) {
-        // Delay destruction to avoid race conditions
-        requestAnimationFrame(() => {
-          try {
-            wsToDestroy.destroy();
-          } catch (e) {
-            // Ignore destroy errors - they're expected
-          }
-        });
-      }
-    };
-  }, [audioUrl, height]);
-
-  if (error) {
-    return (
-      <div
-        className={`flex items-center justify-center ${className}`}
-        style={{ height }}
-      >
-        <span className="text-xs text-foreground/60">Audio unavailable</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`relative ${className}`}>
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <span className="text-xs text-foreground/60">Loading...</span>
-        </div>
-      )}
-      <div
-        ref={waveformRef}
-        className={`w-full transition-opacity duration-200 ${isLoading ? "opacity-0" : "opacity-100"}`}
-        style={{ height }}
-      />
-    </div>
-  );
-};
-
-export default AudioWaveform;
diff --git a/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx b/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx
new file mode 100644
index 00000000..0086384e
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx
@@ -0,0 +1,84 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+export function DeleteProjectDialog({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	projectNames,
+}: {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: () => void;
+	projectNames: string[];
+}) {
+	const count = projectNames.length;
+	const isSingle = count === 1;
+	const singleName = isSingle ? projectNames[0] : null;
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent
+				onOpenAutoFocus={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+			>
+				<DialogHeader>
+					<DialogTitle>
+						{singleName ? (
+							<>
+								{"Delete '"}
+								<span className="inline-block max-w-[300px] truncate align-bottom">
+									{singleName}
+								</span>
+								{"'?"}
+							</>
+						) : (
+							`Delete ${count} projects?`
+						)}
+					</DialogTitle>
+				</DialogHeader>
+				<DialogBody>
+					<Alert variant="destructive">
+						<AlertTitle>Warning</AlertTitle>
+						<AlertDescription>
+							This will permanently delete{" "}
+							{singleName ? `"${singleName}"` : `${count} projects`} and all
+							associated files.
+						</AlertDescription>
+					</Alert>
+					<div className="flex flex-col gap-3">
+						<Label className="text-xs font-semibold text-slate-500">
+							Type "DELETE" to confirm
+						</Label>
+						<Input
+							type="text"
+							placeholder="DELETE"
+							size="lg"
+							variant="destructive"
+						/>
+					</div>
+				</DialogBody>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => onOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button variant="destructive" onClick={onConfirm}>
+						Delete project
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/editor/dialogs/migration-dialog.tsx b/apps/web/src/components/editor/dialogs/migration-dialog.tsx
new file mode 100644
index 00000000..4c9550c2
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/migration-dialog.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useEditor } from "@/hooks/use-editor";
+import { Loader2 } from "lucide-react";
+
+export function MigrationDialog() {
+	const editor = useEditor();
+	const migrationState = editor.project.getMigrationState();
+
+	if (!migrationState.isMigrating) return null;
+
+	const title = migrationState.projectName
+		? "Updating project"
+		: "Updating projects";
+	const description = migrationState.projectName
+		? `Upgrading "${migrationState.projectName}" from v${migrationState.fromVersion} to v${migrationState.toVersion}`
+		: `Upgrading projects from v${migrationState.fromVersion} to v${migrationState.toVersion}`;
+
+	return (
+		<Dialog open={true}>
+			<DialogContent
+				className="sm:max-w-md"
+				onPointerDownOutside={(event) => event.preventDefault()}
+				onEscapeKeyDown={(event) => event.preventDefault()}
+			>
+				<DialogHeader>
+					<DialogTitle>{title}</DialogTitle>
+					<DialogDescription>{description}</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex items-center justify-center py-4">
+					<Loader2 className="text-muted-foreground size-8 animate-spin" />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/editor/dialogs/project-info-dialog.tsx b/apps/web/src/components/editor/dialogs/project-info-dialog.tsx
new file mode 100644
index 00000000..7b736b23
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/project-info-dialog.tsx
@@ -0,0 +1,83 @@
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import type { TProjectMetadata } from "@/types/project";
+import { formatDate } from "@/utils/date";
+import { formatTimeCode } from "@/lib/time";
+import { Button } from "@/components/ui/button";
+
+function InfoRow({
+	label,
+	value,
+}: {
+	label: string;
+	value: string | React.ReactNode;
+}) {
+	return (
+		<div className="flex justify-between items-center py-0 last:pb-0">
+			<span className="text-muted-foreground text-sm">{label}</span>
+			<span className="text-sm font-medium">{value}</span>
+		</div>
+	);
+}
+
+export function ProjectInfoDialog({
+	isOpen,
+	onOpenChange,
+	project,
+}: {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	project: TProjectMetadata;
+}) {
+	const durationFormatted =
+		project.duration > 0
+			? formatTimeCode({
+					timeInSeconds: project.duration,
+					format: project.duration >= 3600 ? "HH:MM:SS" : "MM:SS",
+				})
+			: "0:00";
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent onOpenAutoFocus={(event) => event.preventDefault()}>
+				<DialogHeader>
+					<DialogTitle className="truncate max-w-[350px]">
+						{project.name}
+					</DialogTitle>
+				</DialogHeader>
+
+				<DialogBody className="flex flex-col">
+					<InfoRow label="Duration" value={durationFormatted} />
+					<InfoRow
+						label="Created"
+						value={formatDate({ date: project.createdAt })}
+					/>
+					<InfoRow
+						label="Modified"
+						value={formatDate({ date: project.updatedAt })}
+					/>
+					<InfoRow
+						label="Project ID"
+						value={
+							<code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+								{project.id.slice(0, 8)}
+							</code>
+						}
+					/>
+				</DialogBody>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => onOpenChange(false)}>
+						Close
+					</Button>
+					<Button onClick={() => onOpenChange(false)}>Done</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx b/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx
new file mode 100644
index 00000000..73024d71
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+
+export function RenameProjectDialog({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	projectName,
+}: {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: (newName: string) => void;
+	projectName: string;
+}) {
+	const [name, setName] = useState(projectName);
+
+	const handleOpenChange = (open: boolean) => {
+		if (open) {
+			setName(projectName);
+		}
+		onOpenChange(open);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Rename project</DialogTitle>
+				</DialogHeader>
+
+				<DialogBody className="gap-3">
+					<Label>New name</Label>
+					<Input
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								onConfirm(name);
+							}
+						}}
+						placeholder="Enter a new name"
+					/>
+				</DialogBody>
+
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							onOpenChange(false);
+						}}
+					>
+						Cancel
+					</Button>
+					<Button onClick={() => onConfirm(name)}>Rename</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx b/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx
new file mode 100644
index 00000000..565fe705
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+	type KeyboardShortcut,
+	useKeyboardShortcutsHelp,
+} from "@/hooks/use-keyboard-shortcuts-help";
+import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+
+export function ShortcutsDialog({
+	isOpen,
+	onOpenChange,
+}: {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+}) {
+	const [recordingShortcut, setRecordingShortcut] =
+		useState<KeyboardShortcut | null>(null);
+
+	const {
+		updateKeybinding,
+		removeKeybinding,
+		getKeybindingString,
+		validateKeybinding,
+		getKeybindingsForAction,
+		setIsRecording,
+		resetToDefaults,
+		isRecording,
+	} = useKeybindingsStore();
+
+	const { shortcuts } = useKeyboardShortcutsHelp();
+
+	const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
+
+	useEffect(() => {
+		if (!isRecording || !recordingShortcut) return;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			const keyString = getKeybindingString(e);
+			if (keyString) {
+				const conflict = validateKeybinding(
+					keyString,
+					recordingShortcut.action,
+				);
+				if (conflict) {
+					toast.error(
+						`Key "${keyString}" is already bound to "${conflict.existingAction}"`,
+					);
+					setRecordingShortcut(null);
+					return;
+				}
+
+				const oldKeys = getKeybindingsForAction(recordingShortcut.action);
+				for (const key of oldKeys) {
+					removeKeybinding(key);
+				}
+
+				updateKeybinding(keyString, recordingShortcut.action);
+
+				setIsRecording(false);
+				setRecordingShortcut(null);
+			}
+		};
+
+		const handleClickOutside = () => {
+			setRecordingShortcut(null);
+			setIsRecording(false);
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("click", handleClickOutside);
+
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("click", handleClickOutside);
+		};
+	}, [
+		recordingShortcut,
+		getKeybindingString,
+		updateKeybinding,
+		removeKeybinding,
+		validateKeybinding,
+		getKeybindingsForAction,
+		setIsRecording,
+		isRecording,
+	]);
+
+	const handleStartRecording = (shortcut: KeyboardShortcut) => {
+		setRecordingShortcut(shortcut);
+		setIsRecording(true);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent className="flex max-h-[80vh] max-w-2xl flex-col p-0">
+				<DialogHeader>
+					<DialogTitle>Keyboard shortcuts</DialogTitle>
+				</DialogHeader>
+
+				<DialogBody className="scrollbar-thin flex-grow overflow-y-auto">
+					<div className="flex flex-col gap-6">
+						{categories.map((category) => (
+							<div key={category} className="flex flex-col gap-1">
+								<h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+									{category}
+								</h3>
+								<div className="flex flex-col gap-1">
+									{shortcuts
+										.filter((shortcut) => shortcut.category === category)
+										.map((shortcut) => (
+											<ShortcutItem
+												key={shortcut.action}
+												shortcut={shortcut}
+												isRecording={
+													shortcut.action === recordingShortcut?.action
+												}
+												onStartRecording={() => handleStartRecording(shortcut)}
+											/>
+										))}
+								</div>
+							</div>
+						))}
+					</div>
+				</DialogBody>
+				<DialogFooter>
+					<Button variant="destructive" onClick={resetToDefaults}>
+						Reset to default
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function ShortcutItem({
+	shortcut,
+	isRecording,
+	onStartRecording,
+}: {
+	shortcut: KeyboardShortcut;
+	isRecording: boolean;
+	onStartRecording: (params: { shortcut: KeyboardShortcut }) => void;
+}) {
+	const displayKeys = shortcut.keys.filter((key: string) => {
+		if (
+			key.includes("Cmd") &&
+			shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
+		)
+			return false;
+
+		return true;
+	});
+
+	return (
+		<div className="flex items-center justify-between">
+			<div className="flex items-center gap-3">
+				{shortcut.icon && (
+					<div className="text-muted-foreground">{shortcut.icon}</div>
+				)}
+				<span className="text-sm">{shortcut.description}</span>
+			</div>
+			<div className="flex items-center gap-2">
+				{displayKeys.map((key: string, index: number) => (
+					<div key={key} className="flex items-center gap-2">
+						<div className="flex items-center gap-1">
+							{key.split("+").map((keyPart: string, partIndex: number) => {
+								const keyId = `${shortcut.id}-${index}-${partIndex}`;
+								return (
+									<EditableShortcutKey
+										key={keyId}
+										isRecording={isRecording}
+										onStartRecording={() => onStartRecording({ shortcut })}
+									>
+										{keyPart}
+									</EditableShortcutKey>
+								);
+							})}
+						</div>
+						{index < displayKeys.length - 1 && (
+							<span className="text-muted-foreground text-xs">or</span>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function EditableShortcutKey({
+	children,
+	isRecording,
+	onStartRecording,
+}: {
+	children: React.ReactNode;
+	isRecording: boolean;
+	onStartRecording: () => void;
+}) {
+	const handleClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onStartRecording();
+	};
+
+	return (
+		<Button
+			variant="outline"
+			size="sm"
+			onClick={handleClick}
+			title={
+				isRecording ? "Press any key combination..." : "Click to edit shortcut"
+			}
+		>
+			{children}
+		</Button>
+	);
+}
diff --git a/apps/web/src/components/editor/editor-header.tsx b/apps/web/src/components/editor/editor-header.tsx
index 5363d0c7..d74d78d7 100644
--- a/apps/web/src/components/editor/editor-header.tsx
+++ b/apps/web/src/components/editor/editor-header.tsx
@@ -1,130 +1,187 @@
 "use client";
 
 import { Button } from "../ui/button";
-import { ChevronDown, ArrowLeft, SquarePen, Trash } from "lucide-react";
-import { HeaderBase } from "../header-base";
-import { useProjectStore } from "@/stores/project-store";
-import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help";
+import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import Link from "next/link";
-import { RenameProjectDialog } from "../rename-project-dialog";
-import { DeleteProjectDialog } from "../delete-project-dialog";
+import { RenameProjectDialog } from "./dialogs/rename-project-dialog";
+import { DeleteProjectDialog } from "./dialogs/delete-project-dialog";
 import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
-import { PanelPresetSelector } from "./panel-preset-selector";
 import { ExportButton } from "./export-button";
 import { ThemeToggle } from "../theme-toggle";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
+import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
+import {
+	ArrowLeft02Icon,
+	Edit03Icon,
+	Delete02Icon,
+	CommandIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ShortcutsDialog } from "./dialogs/shortcuts-dialog";
 
 export function EditorHeader() {
-  const { activeProject, renameProject, deleteProject } = useProjectStore();
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-  const router = useRouter();
+	return (
+		<header className="bg-background flex h-[3.2rem] items-center justify-between px-3 pt-0.5">
+			<div className="flex items-center gap-2">
+				<ProjectDropdown />
+			</div>
+			<nav className="flex items-center gap-2">
+				<ExportButton />
+				<ThemeToggle />
+			</nav>
+		</header>
+	);
+}
+
+function ProjectDropdown() {
+	const [openDialog, setOpenDialog] = useState<
+		"delete" | "rename" | "shortcuts" | null
+	>(null);
+	const [isExiting, setIsExiting] = useState(false);
+	const router = useRouter();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  const handleNameSave = async (newName: string) => {
-    console.log("handleNameSave", newName);
-    if (activeProject && newName.trim() && newName !== activeProject.name) {
-      try {
-        await renameProject(activeProject.id, newName.trim());
-        setIsRenameDialogOpen(false);
-      } catch (error) {
-        console.error("Failed to rename project:", error);
-      }
-    }
-  };
+	const handleExit = async () => {
+		if (isExiting) return;
+		setIsExiting(true);
 
-  const handleDelete = () => {
-    if (activeProject) {
-      deleteProject(activeProject.id);
-      setIsDeleteDialogOpen(false);
-      router.push("/projects");
-    }
-  };
+		try {
+			await editor.project.prepareExit();
+			editor.project.closeProject();
+		} catch (error) {
+			console.error("Failed to prepare project exit:", error);
+		} finally {
+			editor.project.closeProject();
+			router.push("/projects");
+		}
+	};
 
-  const leftContent = (
-    <div className="flex items-center gap-2">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="secondary"
-            className="h-auto py-1.5 px-2.5 flex items-center justify-center"
-          >
-            <ChevronDown className="text-muted-foreground" />
-            <span className="text-[0.85rem] mr-2">{activeProject?.name}</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-40 z-100">
-          <Link href="/projects">
-            <DropdownMenuItem className="flex items-center gap-1.5">
-              <ArrowLeft className="h-4 w-4" />
-              Projects
-            </DropdownMenuItem>
-          </Link>
-          <DropdownMenuItem
-            className="flex items-center gap-1.5"
-            onClick={() => setIsRenameDialogOpen(true)}
-          >
-            <SquarePen className="h-4 w-4" />
-            Rename project
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            variant="destructive"
-            className="flex items-center gap-1.5"
-            onClick={() => setIsDeleteDialogOpen(true)}
-          >
-            <Trash className="h-4 w-4" />
-            Delete Project
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link
-              href="https://discord.gg/zmR9N35cjK"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1.5"
-            >
-              <FaDiscord className="h-4 w-4" />
-              Discord
-            </Link>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <RenameProjectDialog
-        isOpen={isRenameDialogOpen}
-        onOpenChange={setIsRenameDialogOpen}
-        onConfirm={handleNameSave}
-        projectName={activeProject?.name || ""}
-      />
-      <DeleteProjectDialog
-        isOpen={isDeleteDialogOpen}
-        onOpenChange={setIsDeleteDialogOpen}
-        onConfirm={handleDelete}
-        projectName={activeProject?.name || ""}
-      />
-    </div>
-  );
+	const handleSaveProjectName = async (newName: string) => {
+		if (
+			activeProject &&
+			newName.trim() &&
+			newName !== activeProject.metadata.name
+		) {
+			try {
+				await editor.project.renameProject({
+					id: activeProject.metadata.id,
+					name: newName.trim(),
+				});
+			} catch (error) {
+				toast.error("Failed to rename project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setOpenDialog(null);
+			}
+		}
+	};
 
-  const rightContent = (
-    <nav className="flex items-center gap-2">
-      <PanelPresetSelector />
-      <KeyboardShortcutsHelp />
-      <ExportButton />
-      <ThemeToggle />
-    </nav>
-  );
+	const handleDeleteProject = async () => {
+		if (activeProject) {
+			try {
+				await editor.project.deleteProjects({
+					ids: [activeProject.metadata.id],
+				});
+				router.push("/projects");
+			} catch (error) {
+				toast.error("Failed to delete project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setOpenDialog(null);
+			}
+		}
+	};
 
-  return (
-    <HeaderBase
-      leftContent={leftContent}
-      rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
-    />
-  );
+	return (
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="secondary"
+						className="flex h-auto items-center justify-center px-2.5 py-1.5"
+					>
+						<ChevronDown className="text-muted-foreground" />
+						<span className="mr-2 text-[0.85rem]">
+							{activeProject?.metadata.name}
+						</span>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="z-100 w-52">
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={handleExit}
+						disabled={isExiting}
+					>
+						<HugeiconsIcon icon={ArrowLeft02Icon} className="size-4" />
+						Exit project
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("rename")}
+					>
+						<HugeiconsIcon icon={Edit03Icon} className="size-4" />
+						Rename project
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						variant="destructive"
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("delete")}
+					>
+						<HugeiconsIcon icon={Delete02Icon} className="size-4" />
+						Delete project
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("shortcuts")}
+					>
+						<HugeiconsIcon icon={CommandIcon} className="size-4" />
+						Keyboard shortcuts
+					</DropdownMenuItem>
+					<DropdownMenuItem asChild>
+						<Link
+							href={SOCIAL_LINKS.discord}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center gap-1.5"
+						>
+							<FaDiscord className="size-4" />
+							Discord
+						</Link>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<RenameProjectDialog
+				isOpen={openDialog === "rename"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "rename" : null)}
+				onConfirm={(newName) => handleSaveProjectName(newName)}
+				projectName={activeProject?.metadata.name || ""}
+			/>
+			<DeleteProjectDialog
+				isOpen={openDialog === "delete"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "delete" : null)}
+				onConfirm={handleDeleteProject}
+				projectNames={[activeProject?.metadata.name || ""]}
+			/>
+			<ShortcutsDialog
+				isOpen={openDialog === "shortcuts"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "shortcuts" : null)}
+			/>
+		</>
+	);
 }
diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx
index 246e8b6f..f79710bf 100644
--- a/apps/web/src/components/editor/export-button.tsx
+++ b/apps/web/src/components/editor/export-button.tsx
@@ -1,317 +1,347 @@
 "use client";
 
-import { useState } from "react";
-import { TransitionUpIcon } from "../icons";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Button } from "../ui/button";
-import { Label } from "../ui/label";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
-import { Progress } from "../ui/progress";
-import { Checkbox } from "../ui/checkbox";
-import { cn } from "@/lib/utils";
+import { useState, useRef } from "react";
+import { TransitionTopIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 import {
-  exportProject,
-  getExportMimeType,
-  getExportFileExtension,
-  DEFAULT_EXPORT_OPTIONS,
-} from "@/lib/export";
-import { useProjectStore } from "@/stores/project-store";
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Progress } from "@/components/ui/progress";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/utils/ui";
+import { getExportMimeType, getExportFileExtension } from "@/lib/export";
 import { Check, Copy, Download, RotateCcw, X } from "lucide-react";
-import { ExportFormat, ExportQuality, ExportResult } from "@/types/export";
-import { PropertyGroup } from "./properties-panel/property-item";
+import {
+	EXPORT_FORMAT_VALUES,
+	EXPORT_QUALITY_VALUES,
+	type ExportFormat,
+	type ExportQuality,
+	type ExportResult,
+} from "@/types/export";
+import { PropertyGroup } from "@/components/editor/panels/properties/property-item";
+import { useEditor } from "@/hooks/use-editor";
+import { DEFAULT_EXPORT_OPTIONS } from "@/constants/export-constants";
 
 export function ExportButton() {
-  const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false);
-  const { activeProject } = useProjectStore();
+	const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false);
+	const editor = useEditor();
 
-  const handleExport = () => {
-    setIsExportPopoverOpen(true);
-  };
+	const handleExport = () => {
+		setIsExportPopoverOpen(true);
+	};
 
-  const hasProject = !!activeProject;
+	const hasProject = !!editor.project.getActive();
 
-  return (
-    <Popover open={isExportPopoverOpen} onOpenChange={setIsExportPopoverOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] transition-all duration-200",
-            hasProject
-              ? "cursor-pointer hover:brightness-95"
-              : "cursor-not-allowed opacity-50"
-          )}
-          onClick={hasProject ? handleExport : undefined}
-          disabled={!hasProject}
-          onKeyDown={(event) => {
-            if (hasProject && (event.key === "Enter" || event.key === " ")) {
-              event.preventDefault();
-              handleExport();
-            }
-          }}
-        >
-          <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
-            <TransitionUpIcon className="z-50" />
-            <span className="text-[0.875rem] z-50">Export</span>
-            <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
-              <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
-            </div>
-          </div>
-        </button>
-      </PopoverTrigger>
-      {hasProject && <ExportPopover onOpenChange={setIsExportPopoverOpen} />}
-    </Popover>
-  );
+	return (
+		<Popover open={isExportPopoverOpen} onOpenChange={setIsExportPopoverOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					className={cn(
+						"flex items-center gap-1.5 rounded-md bg-[#38BDF8] px-[0.12rem] py-[0.12rem] text-white",
+						hasProject
+							? "cursor-pointer hover:brightness-105"
+							: "cursor-not-allowed opacity-50",
+					)}
+					onClick={hasProject ? handleExport : undefined}
+					disabled={!hasProject}
+					onKeyDown={(event) => {
+						if (hasProject && (event.key === "Enter" || event.key === " ")) {
+							event.preventDefault();
+							handleExport();
+						}
+					}}
+				>
+					<div className="relative flex items-center gap-1.5 rounded-[0.6rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] px-4 py-1 shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
+						<HugeiconsIcon icon={TransitionTopIcon} className="z-50 size-4" />
+						<span className="z-50 text-[0.875rem]">Export</span>
+						<div className="absolute top-0 left-0 z-10 flex size-full items-center justify-center rounded-[0.6rem] bg-linear-to-t from-white/0 to-white/50">
+							<div className="absolute top-[0.08rem] z-50 h-[calc(100%-2px)] w-[calc(100%-2px)] rounded-[0.6rem] bg-linear-270 from-[#2567EC] to-[#37B6F7]"></div>
+						</div>
+					</div>
+				</button>
+			</PopoverTrigger>
+			{hasProject && <ExportPopover onOpenChange={setIsExportPopoverOpen} />}
+		</Popover>
+	);
 }
 
 function ExportPopover({
-  onOpenChange,
+	onOpenChange,
 }: {
-  onOpenChange: (open: boolean) => void;
+	onOpenChange: (open: boolean) => void;
 }) {
-  const { activeProject } = useProjectStore();
-  const [format, setFormat] = useState<ExportFormat>(
-    DEFAULT_EXPORT_OPTIONS.format
-  );
-  const [quality, setQuality] = useState<ExportQuality>(
-    DEFAULT_EXPORT_OPTIONS.quality
-  );
-  const [includeAudio, setIncludeAudio] = useState<boolean>(
-    DEFAULT_EXPORT_OPTIONS.includeAudio || true
-  );
-  const [isExporting, setIsExporting] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [exportResult, setExportResult] = useState<ExportResult | null>(null);
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const [format, setFormat] = useState<ExportFormat>(
+		DEFAULT_EXPORT_OPTIONS.format,
+	);
+	const [quality, setQuality] = useState<ExportQuality>(
+		DEFAULT_EXPORT_OPTIONS.quality,
+	);
+	const [includeAudio, setIncludeAudio] = useState<boolean>(
+		DEFAULT_EXPORT_OPTIONS.includeAudio || true,
+	);
+	const [isExporting, setIsExporting] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [exportResult, setExportResult] = useState<ExportResult | null>(null);
+	const cancelRequestedRef = useRef(false);
+
+	const handleExport = async () => {
+		if (!activeProject) return;
+
+		cancelRequestedRef.current = false;
+		setIsExporting(true);
+		setProgress(0);
+		setExportResult(null);
+
+		const result = await editor.project.export({
+			options: {
+				format,
+				quality,
+				fps: activeProject.settings.fps,
+				includeAudio,
+				onProgress: ({ progress }) => setProgress(progress),
+				onCancel: () => cancelRequestedRef.current,
+			},
+		});
 
-  const handleExport = async () => {
-    if (!activeProject) return;
+		setIsExporting(false);
 
-    setIsExporting(true);
-    setProgress(0);
-    setExportResult(null);
+		if (result.cancelled) {
+			setExportResult(null);
+			setProgress(0);
+			return;
+		}
 
-    const result = await exportProject({
-      format,
-      quality,
-      fps: activeProject.fps,
-      includeAudio,
-      onProgress: setProgress,
-      onCancel: () => false, // TODO: Add cancel functionality
-    });
+		setExportResult(result);
 
-    setIsExporting(false);
-    setExportResult(result);
+		if (result.success && result.buffer) {
+			const mimeType = getExportMimeType({ format });
+			const extension = getExportFileExtension({ format });
+			const blob = new Blob([result.buffer], { type: mimeType });
+			const url = URL.createObjectURL(blob);
 
-    if (result.success && result.buffer) {
-      // Download the file
-      const mimeType = getExportMimeType(format);
-      const extension = getExportFileExtension(format);
-      const blob = new Blob([result.buffer], { type: mimeType });
-      const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = `${activeProject.metadata.name}${extension}`;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
 
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${activeProject.name}${extension}`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+			onOpenChange(false);
+			setExportResult(null);
+			setProgress(0);
+		}
+	};
 
-      onOpenChange(false);
-      setExportResult(null);
-      setProgress(0);
-    }
-  };
+	const handleClose = () => {
+		if (!isExporting) {
+			onOpenChange(false);
+			setExportResult(null);
+			setProgress(0);
+		}
+	};
 
-  const handleClose = () => {
-    if (!isExporting) {
-      onOpenChange(false);
-      setExportResult(null);
-      setProgress(0);
-    }
-  };
+	const handleCancel = () => {
+		cancelRequestedRef.current = true;
+	};
 
-  return (
-    <PopoverContent className="w-80 mr-4 flex flex-col gap-3 bg-background">
-      <>
-        {exportResult && !exportResult.success ? (
-          <ExportError
-            error={exportResult.error || "Unknown error occurred"}
-            onRetry={handleExport}
-          />
-        ) : (
-          <>
-            <div className="flex items-center justify-between">
-              <h3 className=" font-medium">
-                {isExporting ? "Exporting project" : "Export project"}
-              </h3>
-              <Button variant="text" size="icon" onClick={handleClose}>
-                <X className="!size-5 text-foreground/85" />
-              </Button>
-            </div>
+	return (
+		<PopoverContent className="bg-background mr-4 flex w-80 flex-col gap-3">
+			{exportResult && !exportResult.success ? (
+				<ExportError
+					error={exportResult.error || "Unknown error occurred"}
+					onRetry={handleExport}
+				/>
+			) : (
+				<>
+					<div className="flex items-center justify-between">
+						<h3 className="font-medium">
+							{isExporting ? "Exporting project" : "Export project"}
+						</h3>
+						<Button variant="text" size="icon" onClick={handleClose}>
+							<X className="text-foreground/85 !size-5" />
+						</Button>
+					</div>
 
-            <div className="flex flex-col gap-4">
-              {!isExporting && (
-                <>
-                  <div className="flex flex-col gap-3">
-                    <PropertyGroup
-                      title="Format"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <RadioGroup
-                        value={format}
-                        onValueChange={(value) =>
-                          setFormat(value as ExportFormat)
-                        }
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="mp4" id="mp4" />
-                          <Label htmlFor="mp4">
-                            MP4 (H.264) - Better compatibility
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="webm" id="webm" />
-                          <Label htmlFor="webm">
-                            WebM (VP9) - Smaller file size
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </PropertyGroup>
+					<div className="flex flex-col gap-4">
+						{!isExporting && (
+							<>
+								<div className="flex flex-col gap-3">
+									<PropertyGroup
+										title="Format"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<RadioGroup
+											value={format}
+											onValueChange={(value) => {
+												if (isExportFormat(value)) {
+													setFormat(value);
+												}
+											}}
+										>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="mp4" id="mp4" />
+												<Label htmlFor="mp4">
+													MP4 (H.264) - Better compatibility
+												</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="webm" id="webm" />
+												<Label htmlFor="webm">
+													WebM (VP9) - Smaller file size
+												</Label>
+											</div>
+										</RadioGroup>
+									</PropertyGroup>
 
-                    <PropertyGroup
-                      title="Quality"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <RadioGroup
-                        value={quality}
-                        onValueChange={(value) =>
-                          setQuality(value as ExportQuality)
-                        }
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="low" id="low" />
-                          <Label htmlFor="low">Low - Smallest file size</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="medium" id="medium" />
-                          <Label htmlFor="medium">Medium - Balanced</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="high" id="high" />
-                          <Label htmlFor="high">High - Recommended</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="very_high" id="very_high" />
-                          <Label htmlFor="very_high">
-                            Very High - Largest file size
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </PropertyGroup>
+									<PropertyGroup
+										title="Quality"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<RadioGroup
+											value={quality}
+											onValueChange={(value) => {
+												if (isExportQuality(value)) {
+													setQuality(value);
+												}
+											}}
+										>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="low" id="low" />
+												<Label htmlFor="low">Low - Smallest file size</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="medium" id="medium" />
+												<Label htmlFor="medium">Medium - Balanced</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="high" id="high" />
+												<Label htmlFor="high">High - Recommended</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="very_high" id="very_high" />
+												<Label htmlFor="very_high">
+													Very High - Largest file size
+												</Label>
+											</div>
+										</RadioGroup>
+									</PropertyGroup>
 
-                    <PropertyGroup
-                      title="Audio"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <div className="flex items-center space-x-2">
-                        <Checkbox
-                          id="include-audio"
-                          checked={includeAudio}
-                          onCheckedChange={(checked) =>
-                            setIncludeAudio(!!checked)
-                          }
-                        />
-                        <Label htmlFor="include-audio">
-                          Include audio in export
-                        </Label>
-                      </div>
-                    </PropertyGroup>
-                  </div>
+									<PropertyGroup
+										title="Audio"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<div className="flex items-center space-x-2">
+											<Checkbox
+												id="include-audio"
+												checked={includeAudio}
+												onCheckedChange={(checked) =>
+													setIncludeAudio(!!checked)
+												}
+											/>
+											<Label htmlFor="include-audio">
+												Include audio in export
+											</Label>
+										</div>
+									</PropertyGroup>
+								</div>
 
-                  <Button onClick={handleExport} className="w-full gap-2">
-                    <Download className="w-4 h-4" />
-                    Export
-                  </Button>
-                </>
-              )}
+								<Button onClick={handleExport} className="w-full gap-2">
+									<Download className="size-4" />
+									Export
+								</Button>
+							</>
+						)}
 
-              {isExporting && (
-                <div className="space-y-4">
-                  <div className="flex flex-col">
-                    <div className="text-center flex items-center justify-between">
-                      <p className="text-sm text-muted-foreground mb-2">
-                        {Math.round(progress * 100)}%
-                      </p>
-                      <p className="text-sm text-muted-foreground mb-2">100%</p>
-                    </div>
-                    <Progress value={progress * 100} className="w-full" />
-                  </div>
+						{isExporting && (
+							<div className="space-y-4">
+								<div className="flex flex-col">
+									<div className="flex items-center justify-between text-center">
+										<p className="text-muted-foreground mb-2 text-sm">
+											{Math.round(progress * 100)}%
+										</p>
+										<p className="text-muted-foreground mb-2 text-sm">100%</p>
+									</div>
+									<Progress value={progress * 100} className="w-full" />
+								</div>
+
+								<Button
+									variant="outline"
+									className="w-full rounded-md"
+									onClick={handleCancel}
+								>
+									Cancel
+								</Button>
+							</div>
+						)}
+					</div>
+				</>
+			)}
+		</PopoverContent>
+	);
+}
+
+function isExportFormat(value: string): value is ExportFormat {
+	return EXPORT_FORMAT_VALUES.some((formatValue) => formatValue === value);
+}
 
-                  <Button
-                    variant="outline"
-                    className="rounded-md w-full"
-                    onClick={() => {}}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              )}
-            </div>
-          </>
-        )}
-      </>
-    </PopoverContent>
-  );
+function isExportQuality(value: string): value is ExportQuality {
+	return EXPORT_QUALITY_VALUES.some((qualityValue) => qualityValue === value);
 }
 
 function ExportError({
-  error,
-  onRetry,
+	error,
+	onRetry,
 }: {
-  error: string;
-  onRetry: () => void;
+	error: string;
+	onRetry: () => void;
 }) {
-  const [copied, setCopied] = useState(false);
+	const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(error);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1000);
-  };
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(error);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1000);
+	};
 
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-1.5">
-        <p className="text-sm font-medium text-red-400">Export failed</p>
-        <p className="text-xs text-muted-foreground">
-          {error}
-        </p>
-      </div>
+	return (
+		<div className="space-y-4">
+			<div className="flex flex-col gap-1.5">
+				<p className="text-destructive text-sm font-medium">Export failed</p>
+				<p className="text-muted-foreground text-xs">{error}</p>
+			</div>
 
-      <div className="flex gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          className="flex-1 text-xs h-8"
-          onClick={handleCopy}
-        >
-          {copied ? <Check className="text-green-500" /> : <Copy />}
-          Copy
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          className="flex-1 text-xs h-8"
-          onClick={onRetry}
-        >
-          <RotateCcw />
-          Retry
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="flex gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-8 flex-1 text-xs"
+					onClick={handleCopy}
+				>
+					{copied ? <Check className="text-constructive" /> : <Copy />}
+					Copy
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-8 flex-1 text-xs"
+					onClick={onRetry}
+				>
+					<RotateCcw />
+					Retry
+				</Button>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/layout-guide-overlay.tsx b/apps/web/src/components/editor/layout-guide-overlay.tsx
index ff4cde57..0f02da1c 100644
--- a/apps/web/src/components/editor/layout-guide-overlay.tsx
+++ b/apps/web/src/components/editor/layout-guide-overlay.tsx
@@ -4,24 +4,24 @@ import { useEditorStore } from "@/stores/editor-store";
 import Image from "next/image";

 

 function TikTokGuide() {

-  return (

-    <div className="absolute inset-0 pointer-events-none">

-      <Image

-        src="/platform-guides/tiktok-blueprint.png"

-        alt="TikTok layout guide"

-        className="absolute inset-0 w-full h-full object-contain"

-        draggable={false}

-        fill

-      />

-    </div>

-  );

+	return (

+		<div className="pointer-events-none absolute inset-0">

+			<Image

+				src="/platform-guides/tiktok-blueprint.png"

+				alt="TikTok layout guide"

+				className="absolute inset-0 size-full object-contain"

+				draggable={false}

+				fill

+			/>

+		</div>

+	);

 }

 

 export function LayoutGuideOverlay() {

-  const { layoutGuide } = useEditorStore();

+	const { layoutGuide } = useEditorStore();

 

-  if (layoutGuide.platform === null) return null;

-  if (layoutGuide.platform === "tiktok") return <TikTokGuide />;

+	if (layoutGuide.platform === null) return null;

+	if (layoutGuide.platform === "tiktok") return <TikTokGuide />;

 

-  return null;

+	return null;

 }

diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
deleted file mode 100644
index e1fd257e..00000000
--- a/apps/web/src/components/editor/media-panel/drag-overlay.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-interface MediaDragOverlayProps {
-  isVisible: boolean;
-  isProcessing?: boolean;
-  progress?: number;
-  onClick?: () => void;
-  isEmptyState?: boolean;
-}
-
-export function MediaDragOverlay({
-  isVisible,
-  isProcessing = false,
-  progress = 0,
-  onClick,
-  isEmptyState = false,
-}: MediaDragOverlayProps) {
-  if (!isVisible) return null;
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isProcessing || !onClick) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
-
-  return (
-    <div
-      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
-      onClick={handleClick}
-    >
-      <div className="flex items-center justify-center">
-        <Upload className="h-10 w-10 text-foreground" />
-      </div>
-
-      <div className="space-y-2">
-        <p className="text-xs text-muted-foreground max-w-sm">
-          {isProcessing
-            ? `Processing your files (${progress}%)`
-            : "Drag and drop videos, photos, and audio files here"}
-        </p>
-      </div>
-
-      {isProcessing && (
-        <div className="w-full max-w-xs">
-          <div className="w-full bg-muted/50 rounded-full h-2">
-            <div
-              className="bg-primary h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
deleted file mode 100644
index 89b53b64..00000000
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import { TabBar } from "./tabbar";
-import { MediaView } from "./views/media";
-import { useMediaPanelStore, Tab } from "./store";
-import { TextView } from "./views/text";
-import { SoundsView } from "./views/sounds";
-import { StickersView } from "./views/stickers";
-import { Separator } from "@/components/ui/separator";
-import { SettingsView } from "./views/settings";
-import { Captions } from "./views/captions";
-
-export function MediaPanel() {
-  const { activeTab } = useMediaPanelStore();
-
-  const viewMap: Record<Tab, React.ReactNode> = {
-    media: <MediaView />,
-    sounds: <SoundsView />,
-    text: <TextView />,
-    stickers: <StickersView />,
-    effects: (
-      <div className="p-4 text-muted-foreground">
-        Effects view coming soon...
-      </div>
-    ),
-    transitions: (
-      <div className="p-4 text-muted-foreground">
-        Transitions view coming soon...
-      </div>
-    ),
-    captions: <Captions />,
-    filters: (
-      <div className="p-4 text-muted-foreground">
-        Filters view coming soon...
-      </div>
-    ),
-    adjustment: (
-      <div className="p-4 text-muted-foreground">
-        Adjustment view coming soon...
-      </div>
-    ),
-    settings: <SettingsView />,
-  };
-
-  return (
-    <div className="h-full flex bg-panel">
-      <TabBar />
-      <Separator orientation="vertical" />
-      <div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
deleted file mode 100644
index eb645ec3..00000000
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
-  CaptionsIcon,
-  ArrowLeftRightIcon,
-  SparklesIcon,
-  StickerIcon,
-  MusicIcon,
-  VideoIcon,
-  BlendIcon,
-  SlidersHorizontalIcon,
-  LucideIcon,
-  TypeIcon,
-  SettingsIcon,
-} from "lucide-react";
-import { create } from "zustand";
-
-export type Tab =
-  | "media"
-  | "sounds"
-  | "text"
-  | "stickers"
-  | "effects"
-  | "transitions"
-  | "captions"
-  | "filters"
-  | "adjustment"
-  | "settings";
-
-export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
-  media: {
-    icon: VideoIcon,
-    label: "Media",
-  },
-  sounds: {
-    icon: MusicIcon,
-    label: "Sounds",
-  },
-  text: {
-    icon: TypeIcon,
-    label: "Text",
-  },
-  stickers: {
-    icon: StickerIcon,
-    label: "Stickers",
-  },
-  effects: {
-    icon: SparklesIcon,
-    label: "Effects",
-  },
-  transitions: {
-    icon: ArrowLeftRightIcon,
-    label: "Transitions",
-  },
-  captions: {
-    icon: CaptionsIcon,
-    label: "Captions",
-  },
-  filters: {
-    icon: BlendIcon,
-    label: "Filters",
-  },
-  adjustment: {
-    icon: SlidersHorizontalIcon,
-    label: "Adjustment",
-  },
-  settings: {
-    icon: SettingsIcon,
-    label: "Settings",
-  },
-};
-
-interface MediaPanelStore {
-  activeTab: Tab;
-  setActiveTab: (tab: Tab) => void;
-  highlightMediaId: string | null;
-  requestRevealMedia: (mediaId: string) => void;
-  clearHighlight: () => void;
-}
-
-export const useMediaPanelStore = create<MediaPanelStore>((set) => ({
-  activeTab: "media",
-  setActiveTab: (tab) => set({ activeTab: tab }),
-  highlightMediaId: null,
-  requestRevealMedia: (mediaId) =>
-    set({ activeTab: "media", highlightMediaId: mediaId }),
-  clearHighlight: () => set({ highlightMediaId: null }),
-}));
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
deleted file mode 100644
index e2bfdff7..00000000
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { Tab, tabs, useMediaPanelStore } from "./store";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useEffect, useRef, useState } from "react";
-
-export function TabBar() {
-  const { activeTab, setActiveTab } = useMediaPanelStore();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [showTopFade, setShowTopFade] = useState(false);
-  const [showBottomFade, setShowBottomFade] = useState(false);
-
-  const checkScrollPosition = () => {
-    const element = scrollRef.current;
-    if (!element) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = element;
-    setShowTopFade(scrollTop > 0);
-    setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
-  };
-
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-
-    checkScrollPosition();
-    element.addEventListener("scroll", checkScrollPosition);
-    
-    const resizeObserver = new ResizeObserver(checkScrollPosition);
-    resizeObserver.observe(element);
-
-    return () => {
-      element.removeEventListener("scroll", checkScrollPosition);
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <div className="flex relative">
-      <div 
-        ref={scrollRef}
-        className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-y-auto scrollbar-hidden relative w-full py-4"
-      >
-        {(Object.keys(tabs) as Tab[]).map((tabKey) => {
-          const tab = tabs[tabKey];
-          return (
-            <div
-              className={cn(
-                "flex z-[100] flex-col gap-0.5 items-center cursor-pointer",
-                activeTab === tabKey
-                  ? "text-primary !opacity-100"
-                  : "text-muted-foreground"
-              )}
-              onClick={() => setActiveTab(tabKey)}
-              key={tabKey}
-            >
-              <Tooltip delayDuration={10}>
-                <TooltipTrigger asChild>
-                  <tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" />
-                </TooltipTrigger>
-                <TooltipContent
-                  side="right"
-                  align="center"
-                  variant="sidebar"
-                  sideOffset={8}
-                >
-                  <div className="dark:text-base-gray-950 text-black text-sm font-medium leading-none dark:text-white">
-                    {tab.label}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          );
-        })}
-      </div>
-      
-      <FadeOverlay direction="top" show={showTopFade} />
-      <FadeOverlay direction="bottom" show={showBottomFade} />
-    </div>
-  );
-}
-
-function FadeOverlay({ direction, show }: { direction: "top" | "bottom", show: boolean }) {
-  return (
-    <div 
-      className={cn(
-        "absolute left-0 right-0 h-6 pointer-events-none z-[101] transition-opacity duration-200",
-        direction === "top" && show
-          ? "top-0 bg-gradient-to-b from-panel to-transparent" 
-          : "bottom-0 bg-gradient-to-t from-panel to-transparent"
-      )}
-    />
-  );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx
deleted file mode 100644
index fbe5b418..00000000
--- a/apps/web/src/components/editor/media-panel/views/captions.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { PropertyGroup } from "../../properties-panel/property-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import { Language, LanguageSelect } from "@/components/language-select";
-import { useState, useRef, useEffect } from "react";
-import { extractTimelineAudio } from "@/lib/mediabunny-utils";
-import { encryptWithRandomKey, arrayBufferToBase64 } from "@/lib/zk-encryption";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-import { Loader2, Shield, Trash2, Upload } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { TextElement } from "@/types/timeline";
-
-export const languages: Language[] = [
-  { code: "US", name: "English" },
-  { code: "ES", name: "Spanish" },
-  { code: "IT", name: "Italian" },
-  { code: "FR", name: "French" },
-  { code: "DE", name: "German" },
-  { code: "PT", name: "Portuguese" },
-  { code: "RU", name: "Russian" },
-  { code: "JP", name: "Japanese" },
-  { code: "CN", name: "Chinese" },
-];
-
-const PRIVACY_DIALOG_KEY = "opencut-transcription-privacy-accepted";
-
-export function Captions() {
-  const [selectedCountry, setSelectedCountry] = useState("auto");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [processingStep, setProcessingStep] = useState<string>("");
-  const [error, setError] = useState<string | null>(null);
-  const [showPrivacyDialog, setShowPrivacyDialog] = useState(false);
-  const [hasAcceptedPrivacy, setHasAcceptedPrivacy] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { insertTrackAt, addElementToTrack } = useTimelineStore();
-
-  // Check if user has already accepted privacy on mount
-  useEffect(() => {
-    const hasAccepted = localStorage.getItem(PRIVACY_DIALOG_KEY) === "true";
-    setHasAcceptedPrivacy(hasAccepted);
-  }, []);
-
-  const handleGenerateTranscript = async () => {
-    try {
-      setIsProcessing(true);
-      setError(null);
-      setProcessingStep("Extracting audio...");
-
-      const audioBlob = await extractTimelineAudio();
-
-      setProcessingStep("Encrypting audio...");
-
-      // Encrypt the audio with a random key (zero-knowledge)
-      const audioBuffer = await audioBlob.arrayBuffer();
-      const encryptionResult = await encryptWithRandomKey(audioBuffer);
-
-      // Convert encrypted data to blob for upload
-      const encryptedBlob = new Blob([encryptionResult.encryptedData]);
-
-      setProcessingStep("Uploading...");
-      const uploadResponse = await fetch("/api/get-upload-url", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ fileExtension: "wav" }),
-      });
-
-      if (!uploadResponse.ok) {
-        const error = await uploadResponse.json();
-        throw new Error(error.message || "Failed to get upload URL");
-      }
-
-      const { uploadUrl, fileName } = await uploadResponse.json();
-
-      // Upload to R2
-      await fetch(uploadUrl, {
-        method: "PUT",
-        body: encryptedBlob,
-      });
-
-      setProcessingStep("Transcribing...");
-
-      // Call Modal transcription API with encryption parameters
-      const transcriptionResponse = await fetch("/api/transcribe", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          filename: fileName,
-          language:
-            selectedCountry === "auto" ? "auto" : selectedCountry.toLowerCase(),
-          // Send the raw encryption key and IV (zero-knowledge)
-          decryptionKey: arrayBufferToBase64(encryptionResult.key),
-          iv: arrayBufferToBase64(encryptionResult.iv),
-        }),
-      });
-
-      if (!transcriptionResponse.ok) {
-        const error = await transcriptionResponse.json();
-        throw new Error(error.message || "Transcription failed");
-      }
-
-      const { text, segments } = await transcriptionResponse.json();
-
-      console.log("Transcription completed:", { text, segments });
-
-      const shortCaptions: Array<{
-        text: string;
-        startTime: number;
-        duration: number;
-      }> = [];
-
-      let globalEndTime = 0; // Track the end time of the last caption globally
-
-      segments.forEach((segment: any) => {
-        const words = segment.text.trim().split(/\s+/);
-        const segmentDuration = segment.end - segment.start;
-        const wordsPerSecond = words.length / segmentDuration;
-
-        // Split into chunks of 2-4 words
-        const chunks: string[] = [];
-        for (let i = 0; i < words.length; i += 3) {
-          chunks.push(words.slice(i, i + 3).join(" "));
-        }
-
-        // Calculate timing for each chunk to place them sequentially
-        let chunkStartTime = segment.start;
-        chunks.forEach((chunk) => {
-          const chunkWords = chunk.split(/\s+/).length;
-          const chunkDuration = Math.max(0.8, chunkWords / wordsPerSecond); // Minimum 0.8s per chunk
-
-          let adjustedStartTime = chunkStartTime;
-
-          // Prevent overlapping: if this caption would start before the last one ends,
-          // start it right after the last one ends
-          if (adjustedStartTime < globalEndTime) {
-            adjustedStartTime = globalEndTime;
-          }
-
-          shortCaptions.push({
-            text: chunk,
-            startTime: adjustedStartTime,
-            duration: chunkDuration,
-          });
-
-          // Update global end time
-          globalEndTime = adjustedStartTime + chunkDuration;
-
-          // Next chunk starts when this one ends (for within-segment timing)
-          chunkStartTime += chunkDuration;
-        });
-      });
-
-      // Create a single track for all captions
-      const captionTrackId = insertTrackAt("text", 0);
-
-      // Add all caption elements to the same track
-      shortCaptions.forEach((caption, index) => {
-        addElementToTrack(captionTrackId, {
-          ...DEFAULT_TEXT_ELEMENT,
-          name: `Caption ${index + 1}`,
-          content: caption.text,
-          duration: caption.duration,
-          startTime: caption.startTime,
-          fontSize: 65, // Larger for captions
-          fontWeight: "bold", // Bold for captions
-        } as TextElement);
-      });
-
-      console.log(
-        `✅ ${shortCaptions.length} short-form caption chunks added to timeline!`
-      );
-    } catch (error) {
-      console.error("Transcription failed:", error);
-      setError(
-        error instanceof Error ? error.message : "An unexpected error occurred"
-      );
-    } finally {
-      setIsProcessing(false);
-      setProcessingStep("");
-    }
-  };
-
-  return (
-    <BaseView ref={containerRef} className="flex flex-col justify-between h-full">
-      <PropertyGroup title="Language">
-        <LanguageSelect
-          selectedCountry={selectedCountry}
-          onSelect={setSelectedCountry}
-          containerRef={containerRef}
-          languages={languages}
-        />
-      </PropertyGroup>
-
-      <div className="flex flex-col gap-4">
-        {error && (
-          <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        )}
-
-        <Button
-          className="w-full"
-          onClick={() => {
-            if (hasAcceptedPrivacy) {
-              handleGenerateTranscript();
-            } else {
-              setShowPrivacyDialog(true);
-            }
-          }}
-          disabled={isProcessing}
-        >
-          {isProcessing && <Loader2 className="mr-1 h-4 w-4 animate-spin" />}
-          {isProcessing ? processingStep : "Generate transcript"}
-        </Button>
-
-        <Dialog open={showPrivacyDialog} onOpenChange={setShowPrivacyDialog}>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle className="flex items-center gap-2">
-                <Shield className="h-5 w-5" />
-                Audio Processing Notice
-              </DialogTitle>
-              <DialogDescription className="space-y-3">
-                <p>
-                  To generate captions, we need to process your timeline audio
-                  using speech-to-text technology.
-                </p>
-
-                <div className="space-y-2 pt-2">
-                  <div className="flex items-start gap-2">
-                    <Shield className="h-4 w-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Zero-knowledge encryption - we cannot decrypt your files
-                      even if we wanted to
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Shield className="h-4 w-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Encryption keys generated randomly in your browser, never
-                      stored anywhere
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Upload className="h-4 w-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Audio encrypted before upload - raw audio never leaves
-                      your device
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Trash2 className="h-4 w-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Everything permanently deleted within seconds after
-                      transcription
-                    </span>
-                  </div>
-                </div>
-
-                <p className="text-xs text-muted-foreground">
-                  <strong>True zero-knowledge privacy:</strong> Encryption keys
-                  are generated randomly in your browser and never stored
-                  anywhere. It's cryptographically impossible for us, our cloud
-                  providers, or anyone else to decrypt your audio files.
-                </p>
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter className="gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setShowPrivacyDialog(false)}
-                disabled={isProcessing}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={() => {
-                  localStorage.setItem(PRIVACY_DIALOG_KEY, "true");
-                  setHasAcceptedPrivacy(true);
-                  setShowPrivacyDialog(false);
-                  handleGenerateTranscript();
-                }}
-                disabled={isProcessing}
-              >
-                Continue & Generate Captions
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    </BaseView>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
deleted file mode 100644
index 07a44a7c..00000000
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ /dev/null
@@ -1,545 +0,0 @@
-"use client";
-
-import { useDragDrop } from "@/hooks/use-drag-drop";
-import { processMediaFiles } from "@/lib/media-processing";
-import { useMediaStore } from "@/stores/media-store";
-import { MediaFile } from "@/types/media";
-import {
-  ArrowDown01,
-  CloudUpload,
-  Grid2X2,
-  Image,
-  List,
-  Loader2,
-  Music,
-  Video,
-} from "lucide-react";
-import { useRef, useState, useMemo } from "react";
-import { useHighlightScroll } from "@/hooks/use-highlight-scroll";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { usePanelStore } from "@/stores/panel-store";
-import { useMediaPanelStore } from "../store";
-
-function MediaItemWithContextMenu({
-  item,
-  children,
-  onRemove,
-}: {
-  item: MediaFile;
-  children: React.ReactNode;
-  onRemove: (e: React.MouseEvent, id: string) => Promise<void>;
-}) {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{children}</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>Export clips</ContextMenuItem>
-        <ContextMenuItem
-          variant="destructive"
-          onClick={(e) => onRemove(e, item.id)}
-        >
-          Delete
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}
-
-export function MediaView() {
-  const { mediaFiles, addMediaFile, removeMediaFile } = useMediaStore();
-  const { activeProject } = useProjectStore();
-  const { mediaViewMode, setMediaViewMode } = usePanelStore();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">(
-    "name"
-  );
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-  const { highlightMediaId, clearHighlight } = useMediaPanelStore();
-  const { highlightedId, registerElement } = useHighlightScroll(
-    highlightMediaId,
-    clearHighlight
-  );
-
-  const processFiles = async (files: FileList | File[]) => {
-    if (!files || files.length === 0) return;
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
-
-    setIsProcessing(true);
-    setProgress(0);
-    try {
-      const processedItems = await processMediaFiles(files, (p) =>
-        setProgress(p)
-      );
-      for (const item of processedItems) {
-        await addMediaFile(activeProject.id, item);
-      }
-    } catch (error) {
-      console.error("Error processing files:", error);
-      toast.error("Failed to process files");
-    } finally {
-      setIsProcessing(false);
-      setProgress(0);
-    }
-  };
-
-  const { isDragOver, dragProps } = useDragDrop({
-    // When files are dropped, process them
-    onDrop: processFiles,
-  });
-
-  const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) processFiles(e.target.files);
-    e.target.value = ""; // Reset input
-  };
-
-  const handleRemove = async (e: React.MouseEvent, id: string) => {
-    e.stopPropagation();
-
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
-
-    await removeMediaFile(activeProject.id, id);
-  };
-
-  const formatDuration = (duration: number) => {
-    // Format seconds as mm:ss
-    const min = Math.floor(duration / 60);
-    const sec = Math.floor(duration % 60);
-    return `${min}:${sec.toString().padStart(2, "0")}`;
-  };
-
-  const filteredMediaItems = useMemo(() => {
-    let filtered = mediaFiles.filter((item) => {
-      if (item.ephemeral) return false;
-      return true;
-    });
-
-    filtered.sort((a, b) => {
-      let valueA: string | number;
-      let valueB: string | number;
-
-      switch (sortBy) {
-        case "name":
-          valueA = a.name.toLowerCase();
-          valueB = b.name.toLowerCase();
-          break;
-        case "type":
-          valueA = a.type;
-          valueB = b.type;
-          break;
-        case "duration":
-          valueA = a.duration || 0;
-          valueB = b.duration || 0;
-          break;
-        case "size":
-          valueA = a.file.size;
-          valueB = b.file.size;
-          break;
-        default:
-          return 0;
-      }
-
-      if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
-      if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
-      return 0;
-    });
-
-    return filtered;
-  }, [mediaFiles, sortBy, sortOrder]);
-
-  const previewComponents = useMemo(() => {
-    const previews = new Map<string, React.ReactNode>();
-
-    filteredMediaItems.forEach((item) => {
-      let preview: React.ReactNode;
-
-      if (item.type === "image") {
-        preview = (
-          <div className="w-full h-full flex items-center justify-center">
-            <img
-              src={item.url}
-              alt={item.name}
-              className="w-full max-h-full object-cover"
-              loading="lazy"
-            />
-          </div>
-        );
-      } else if (item.type === "video") {
-        if (item.thumbnailUrl) {
-          preview = (
-            <div className="relative w-full h-full">
-              <img
-                src={item.thumbnailUrl}
-                alt={item.name}
-                className="w-full h-full object-cover rounded"
-                loading="lazy"
-              />
-              <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
-                <Video className="h-6 w-6 text-white drop-shadow-md" />
-              </div>
-              {item.duration && (
-                <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
-                  {formatDuration(item.duration)}
-                </div>
-              )}
-            </div>
-          );
-        } else {
-          preview = (
-            <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-              <Video className="h-6 w-6 mb-1" />
-              <span className="text-xs">Video</span>
-              {item.duration && (
-                <span className="text-xs opacity-70">
-                  {formatDuration(item.duration)}
-                </span>
-              )}
-            </div>
-          );
-        }
-      } else if (item.type === "audio") {
-        preview = (
-          <div className="w-full h-full bg-linear-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
-            <Music className="h-6 w-6 mb-1" />
-            <span className="text-xs">Audio</span>
-            {item.duration && (
-              <span className="text-xs opacity-70">
-                {formatDuration(item.duration)}
-              </span>
-            )}
-          </div>
-        );
-      } else {
-        preview = (
-          <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-            <Image className="h-6 w-6" />
-            <span className="text-xs mt-1">Unknown</span>
-          </div>
-        );
-      }
-
-      previews.set(item.id, preview);
-    });
-
-    return previews;
-  }, [filteredMediaItems]);
-
-  const renderPreview = (item: MediaFile) => previewComponents.get(item.id);
-
-  return (
-    <>
-      {/* Hidden file input for uploading media */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*,video/*,audio/*"
-        multiple
-        className="hidden"
-        onChange={handleFileChange}
-      />
-
-      <div
-        className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
-        {...dragProps}
-      >
-        <div className="p-3 pb-2 bg-panel">
-          {/* Search and filter controls */}
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={handleFileSelect}
-              disabled={isProcessing}
-              className="!bg-background px-4 flex-1 justify-center items-center h-9 opacity-100 hover:opacity-75 transition-opacity"
-            >
-              {isProcessing ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <CloudUpload className="h-4 w-4" />
-              )}
-              <span>Upload</span>
-            </Button>
-            <div className="flex items-center gap-0">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="text"
-                      onClick={() =>
-                        setMediaViewMode(
-                          mediaViewMode === "grid" ? "list" : "grid"
-                        )
-                      }
-                      disabled={isProcessing}
-                      className="justify-center items-center"
-                    >
-                      {mediaViewMode === "grid" ? (
-                        <List strokeWidth={1.5} className="!size-[1.05rem]" />
-                      ) : (
-                        <Grid2X2
-                          strokeWidth={1.5}
-                          className="!size-[1.05rem]"
-                        />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {mediaViewMode === "grid"
-                        ? "Switch to list view"
-                        : "Switch to grid view"}
-                    </p>
-                  </TooltipContent>
-                  <Tooltip>
-                    <DropdownMenu>
-                      <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            size="icon"
-                            variant="text"
-                            disabled={isProcessing}
-                            className="justify-center items-center"
-                          >
-                            <ArrowDown01
-                              strokeWidth={1.5}
-                              className="!size-[1.05rem]"
-                            />
-                          </Button>
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => {
-                            if (sortBy === "name") {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc"
-                              );
-                            } else {
-                              setSortBy("name");
-                              setSortOrder("asc");
-                            }
-                          }}
-                        >
-                          Name{" "}
-                          {sortBy === "name" &&
-                            (sortOrder === "asc" ? "↑" : "↓")}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            if (sortBy === "type") {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc"
-                              );
-                            } else {
-                              setSortBy("type");
-                              setSortOrder("asc");
-                            }
-                          }}
-                        >
-                          Type{" "}
-                          {sortBy === "type" &&
-                            (sortOrder === "asc" ? "↑" : "↓")}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            if (sortBy === "duration") {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc"
-                              );
-                            } else {
-                              setSortBy("duration");
-                              setSortOrder("asc");
-                            }
-                          }}
-                        >
-                          Duration{" "}
-                          {sortBy === "duration" &&
-                            (sortOrder === "asc" ? "↑" : "↓")}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            if (sortBy === "size") {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc"
-                              );
-                            } else {
-                              setSortBy("size");
-                              setSortOrder("asc");
-                            }
-                          }}
-                        >
-                          File Size{" "}
-                          {sortBy === "size" &&
-                            (sortOrder === "asc" ? "↑" : "↓")}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    <TooltipContent>
-                      <p>
-                        Sort by {sortBy} (
-                        {sortOrder === "asc" ? "ascending" : "descending"})
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </div>
-        </div>
-
-        <div className="h-full w-full overflow-y-auto scrollbar-thin pt-1">
-          <div className="flex-1 p-3 pt-0 w-full">
-            {isDragOver || filteredMediaItems.length === 0 ? (
-              <MediaDragOverlay
-                isVisible={true}
-                isProcessing={isProcessing}
-                progress={progress}
-                onClick={handleFileSelect}
-                isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
-              />
-            ) : mediaViewMode === "grid" ? (
-              <GridView
-                filteredMediaItems={filteredMediaItems}
-                renderPreview={renderPreview}
-                handleRemove={handleRemove}
-                highlightedId={highlightedId}
-                registerElement={registerElement}
-              />
-            ) : (
-              <ListView
-                filteredMediaItems={filteredMediaItems}
-                renderPreview={renderPreview}
-                handleRemove={handleRemove}
-                highlightedId={highlightedId}
-                registerElement={registerElement}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-function GridView({
-  filteredMediaItems,
-  renderPreview,
-  handleRemove,
-  highlightedId,
-  registerElement,
-}: {
-  filteredMediaItems: MediaFile[];
-  renderPreview: (item: MediaFile) => React.ReactNode;
-  handleRemove: (e: React.MouseEvent, id: string) => Promise<void>;
-  highlightedId: string | null;
-  registerElement: (id: string, element: HTMLElement | null) => void;
-}) {
-  const { addElementAtTime } = useTimelineStore();
-
-  return (
-    <div
-      className="grid gap-2"
-      style={{
-        gridTemplateColumns: "repeat(auto-fill, 160px)",
-      }}
-    >
-      {filteredMediaItems.map((item) => (
-        <div key={item.id} ref={(el) => registerElement(item.id, el)}>
-          <MediaItemWithContextMenu item={item} onRemove={handleRemove}>
-            <DraggableMediaItem
-              name={item.name}
-              preview={renderPreview(item)}
-              dragData={{
-                id: item.id,
-                type: item.type,
-                name: item.name,
-              }}
-              showPlusOnDrag={false}
-              onAddToTimeline={(currentTime) =>
-                addElementAtTime(item, currentTime)
-              }
-              rounded={false}
-              variant="card"
-              isHighlighted={highlightedId === item.id}
-            />
-          </MediaItemWithContextMenu>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ListView({
-  filteredMediaItems,
-  renderPreview,
-  handleRemove,
-  highlightedId,
-  registerElement,
-}: {
-  filteredMediaItems: MediaFile[];
-  renderPreview: (item: MediaFile) => React.ReactNode;
-  handleRemove: (e: React.MouseEvent, id: string) => Promise<void>;
-  highlightedId: string | null;
-  registerElement: (id: string, element: HTMLElement | null) => void;
-}) {
-  const { addElementAtTime } = useTimelineStore();
-
-  return (
-    <div className="space-y-1">
-      {filteredMediaItems.map((item) => (
-        <div key={item.id} ref={(el) => registerElement(item.id, el)}>
-          <MediaItemWithContextMenu item={item} onRemove={handleRemove}>
-            <DraggableMediaItem
-              name={item.name}
-              preview={renderPreview(item)}
-              dragData={{
-                id: item.id,
-                type: item.type,
-                name: item.name,
-              }}
-              showPlusOnDrag={false}
-              onAddToTimeline={(currentTime) =>
-                addElementAtTime(item, currentTime)
-              }
-              variant="compact"
-              isHighlighted={highlightedId === item.id}
-            />
-          </MediaItemWithContextMenu>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
deleted file mode 100644
index be54a9c4..00000000
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-"use client";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-  PropertyGroup,
-} from "../../properties-panel/property-item";
-import { FPS_PRESETS } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
-import type { BlurIntensity } from "@/types/project";
-import { useEditorStore } from "@/stores/editor-store";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
-import Image from "next/image";
-import { cn } from "@/lib/utils";
-import { colors } from "@/data/colors/solid";
-import { patternCraftGradients } from "@/data/colors/pattern-craft";
-import { PipetteIcon, PlusIcon } from "lucide-react";
-import { useMemo, memo, useCallback } from "react";
-import { syntaxUIGradients } from "@/data/colors/syntax-ui";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-
-export function SettingsView() {
-  return <ProjectSettingsTabs />;
-}
-
-function ProjectSettingsTabs() {
-  return (
-    <BaseView
-      defaultTab="project-info"
-      tabs={[
-        {
-          value: "project-info",
-          label: "Project info",
-          content: (
-            <div className="p-5">
-              <ProjectInfoView />
-            </div>
-          ),
-        },
-        {
-          value: "background",
-          label: "Background",
-          content: (
-            <div className="flex flex-col justify-between h-full">
-              <div className="flex-1 p-5">
-                <BackgroundView />
-              </div>
-              <div className="flex flex-col sticky -bottom-0 bg-panel/85 backdrop-blur-lg">
-                <Separator />
-                <Button className="w-fit h-auto p-5 py-4 !bg-transparent shadow-none text-muted-foreground hover:text-foreground/85 text-xs">
-                  Custom background
-                  <PlusIcon />
-                </Button>
-              </div>
-
-              {/* Another UI, looks so beautiful i don't wanna remove it */}
-              {/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0">
-                <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full">
-                  <span className="text-sm">Custom</span>
-                  <PlusIcon className="" />
-                </Button>
-              </div> */}
-            </div>
-          ),
-        },
-      ]}
-      className="flex flex-col justify-between h-full p-0"
-    />
-  );
-}
-
-function ProjectInfoView() {
-  const { activeProject, updateProjectFps, updateCanvasSize } =
-    useProjectStore();
-  const { canvasPresets } = useEditorStore();
-  const { getDisplayName } = useAspectRatio();
-
-  const handleAspectRatioChange = (value: string) => {
-    const preset = canvasPresets.find((p) => p.name === value);
-    if (preset) {
-      updateCanvasSize(
-        { width: preset.width, height: preset.height },
-        "preset"
-      );
-    }
-  };
-
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    updateProjectFps(fps);
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Name</PropertyItemLabel>
-        <PropertyItemValue>
-          {activeProject?.name || "Untitled project"}
-        </PropertyItemValue>
-      </PropertyItem>
-
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Aspect ratio</PropertyItemLabel>
-        <PropertyItemValue>
-          <Select
-            value={getDisplayName()}
-            onValueChange={handleAspectRatioChange}
-          >
-            <SelectTrigger className="bg-panel-accent">
-              <SelectValue placeholder="Select an aspect ratio" />
-            </SelectTrigger>
-            <SelectContent>
-              {canvasPresets.map((preset) => (
-                <SelectItem key={preset.name} value={preset.name}>
-                  {preset.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </PropertyItemValue>
-      </PropertyItem>
-
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Frame rate</PropertyItemLabel>
-        <PropertyItemValue>
-          <Select
-            value={(activeProject?.fps || 30).toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="bg-panel-accent">
-              <SelectValue placeholder="Select a frame rate" />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map((preset) => (
-                <SelectItem key={preset.value} value={preset.value}>
-                  {preset.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </PropertyItemValue>
-      </PropertyItem>
-    </div>
-  );
-}
-
-const BlurPreview = memo(
-  ({
-    blur,
-    isSelected,
-    onSelect,
-  }: {
-    blur: { label: string; value: number };
-    isSelected: boolean;
-    onSelect: () => void;
-  }) => (
-    <div
-      className={cn(
-        "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary relative overflow-hidden",
-        isSelected && "border-2 border-primary"
-      )}
-      onClick={onSelect}
-    >
-      <Image
-        src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt={`Blur preview ${blur.label}`}
-        fill
-        className="object-cover"
-        style={{ filter: `blur(${blur.value}px)` }}
-        loading="eager"
-      />
-      <div className="absolute bottom-1 left-1 right-1 text-center">
-        <span className="text-xs text-white bg-black/50 px-1 rounded">
-          {blur.label}
-        </span>
-      </div>
-    </div>
-  )
-);
-
-BlurPreview.displayName = "BlurPreview";
-
-const BackgroundPreviews = memo(
-  ({
-    backgrounds,
-    currentBackgroundColor,
-    isColorBackground,
-    handleColorSelect,
-    useBackgroundColor = false,
-  }: {
-    backgrounds: string[];
-    currentBackgroundColor: string;
-    isColorBackground: boolean;
-    handleColorSelect: (bg: string) => void;
-    useBackgroundColor?: boolean;
-  }) => {
-    return useMemo(
-      () =>
-        backgrounds.map((bg, index) => (
-          <div
-            key={`${index}-${bg}`}
-            className={cn(
-              "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary",
-              isColorBackground &&
-                bg === currentBackgroundColor &&
-                "border-2 border-primary"
-            )}
-            style={
-              useBackgroundColor
-                ? { backgroundColor: bg }
-                : {
-                    background: bg,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                  }
-            }
-            onClick={() => handleColorSelect(bg)}
-          />
-        )),
-      [
-        backgrounds,
-        isColorBackground,
-        currentBackgroundColor,
-        handleColorSelect,
-        useBackgroundColor,
-      ]
-    );
-  }
-);
-
-BackgroundPreviews.displayName = "BackgroundPreviews";
-
-function BackgroundView() {
-  const { activeProject, updateBackgroundType } = useProjectStore();
-
-  const blurLevels = useMemo<Array<{ label: string; value: BlurIntensity }>>(
-    () => [
-      { label: "Light", value: 4 },
-      { label: "Medium", value: 8 },
-      { label: "Heavy", value: 18 },
-    ],
-    []
-  );
-
-  const handleBlurSelect = useCallback(
-    async (blurIntensity: BlurIntensity) => {
-      await updateBackgroundType("blur", { blurIntensity });
-    },
-    [updateBackgroundType]
-  );
-
-  const handleColorSelect = useCallback(
-    async (color: string) => {
-      await updateBackgroundType("color", { backgroundColor: color });
-    },
-    [updateBackgroundType]
-  );
-
-  const currentBlurIntensity = activeProject?.blurIntensity || 8;
-  const isBlurBackground = activeProject?.backgroundType === "blur";
-  const currentBackgroundColor = activeProject?.backgroundColor || "#000000";
-  const isColorBackground = activeProject?.backgroundType === "color";
-
-  const blurPreviews = useMemo(
-    () =>
-      blurLevels.map((blur) => (
-        <BlurPreview
-          key={blur.value}
-          blur={blur}
-          isSelected={isBlurBackground && currentBlurIntensity === blur.value}
-          onSelect={() => handleBlurSelect(blur.value)}
-        />
-      )),
-    [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect]
-  );
-
-  return (
-    <div className="flex flex-col gap-4 h-full">
-      <PropertyGroup title="Blur" defaultExpanded={false}>
-        <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
-      </PropertyGroup>
-
-      <PropertyGroup title="Colors" defaultExpanded={false}>
-        <div className="grid grid-cols-4 gap-2 w-full">
-          <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
-            <PipetteIcon className="size-4" />
-          </div>
-          <BackgroundPreviews
-            backgrounds={colors}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={handleColorSelect}
-            useBackgroundColor={true}
-          />
-        </div>
-      </PropertyGroup>
-
-      <PropertyGroup title="Pattern craft" defaultExpanded={false}>
-        <div className="grid grid-cols-4 gap-2 w-full">
-          <BackgroundPreviews
-            backgrounds={patternCraftGradients}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={handleColorSelect}
-          />
-        </div>
-      </PropertyGroup>
-
-      <PropertyGroup title="Syntax UI" defaultExpanded={false}>
-        <div className="grid grid-cols-4 gap-2 w-full">
-          <BackgroundPreviews
-            backgrounds={syntaxUIGradients}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={handleColorSelect}
-          />
-        </div>
-      </PropertyGroup>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
deleted file mode 100644
index 700eaea7..00000000
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ /dev/null
@@ -1,562 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { useState, useMemo, useEffect } from "react";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  PlayIcon,
-  PauseIcon,
-  HeartIcon,
-  PlusIcon,
-  ListFilter,
-} from "lucide-react";
-import { useSoundsStore } from "@/stores/sounds-store";
-import { useSoundSearch } from "@/hooks/use-sound-search";
-import type { SoundEffect, SavedSound } from "@/types/sounds";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuCheckboxItem,
-} from "@/components/ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
-
-export function SoundsView() {
-  return (
-    <div className="h-full flex flex-col">
-      <Tabs defaultValue="sound-effects" className="flex flex-col h-full">
-        <div className="px-3 pt-4 pb-0">
-          <TabsList>
-            <TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
-            <TabsTrigger value="songs">Songs</TabsTrigger>
-            <TabsTrigger value="saved">Saved</TabsTrigger>
-          </TabsList>
-        </div>
-        <Separator className="my-4" />
-        <TabsContent
-          value="sound-effects"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <SoundEffectsView />
-        </TabsContent>
-        <TabsContent
-          value="saved"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <SavedSoundsView />
-        </TabsContent>
-        <TabsContent
-          value="songs"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <SongsView />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
-
-function SoundEffectsView() {
-  const {
-    topSoundEffects,
-    isLoading,
-    searchQuery,
-    setSearchQuery,
-    scrollPosition,
-    setScrollPosition,
-    loadSavedSounds,
-    isSoundSaved,
-    toggleSavedSound,
-    showCommercialOnly,
-    toggleCommercialFilter,
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  } = useSoundsStore();
-  const {
-    results: searchResults,
-    isLoading: isSearching,
-    loadMore,
-    hasNextPage,
-    isLoadingMore,
-  } = useSoundSearch(searchQuery, showCommercialOnly);
-
-  // Audio playback state
-  const [playingId, setPlayingId] = useState<number | null>(null);
-  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
-    null
-  );
-
-  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
-    onLoadMore: loadMore,
-    hasMore: hasNextPage,
-    isLoading: isLoadingMore || isSearching,
-  });
-
-  useEffect(() => {
-    loadSavedSounds();
-
-    if (!hasLoaded) {
-      let ignore = false;
-
-      const fetchTopSounds = async () => {
-        try {
-          if (!ignore) {
-            setLoading(true);
-            setError(null);
-          }
-
-          const response = await fetch(
-            "/api/sounds/search?page_size=50&sort=downloads"
-          );
-
-          if (!ignore) {
-            if (!response.ok) {
-              throw new Error(`Failed to fetch: ${response.status}`);
-            }
-
-            const data = await response.json();
-            setTopSoundEffects(data.results);
-            setHasLoaded(true);
-
-            setCurrentPage(1);
-            setHasNextPage(!!data.next);
-            setTotalCount(data.count);
-          }
-        } catch (error) {
-          if (!ignore) {
-            console.error("Failed to fetch top sounds:", error);
-            setError(
-              error instanceof Error ? error.message : "Failed to load sounds"
-            );
-          }
-        } finally {
-          if (!ignore) {
-            setLoading(false);
-          }
-        }
-      };
-
-      const timeoutId = setTimeout(fetchTopSounds, 100);
-
-      return () => {
-        clearTimeout(timeoutId);
-        ignore = true;
-      };
-    }
-
-    if (scrollAreaRef.current && scrollPosition > 0) {
-      const timeoutId = setTimeout(() => {
-        scrollAreaRef.current?.scrollTo({ top: scrollPosition });
-      }, 100);
-
-      return () => clearTimeout(timeoutId);
-    }
-  }, [
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  ]);
-
-  const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop } = event.currentTarget;
-    setScrollPosition(scrollTop);
-    handleScroll(event);
-  };
-
-  const displayedSounds = useMemo(() => {
-    const sounds = searchQuery ? searchResults : topSoundEffects;
-    return sounds;
-  }, [searchQuery, searchResults, topSoundEffects]);
-
-  const playSound = (sound: SoundEffect) => {
-    if (playingId === sound.id) {
-      audioElement?.pause();
-      setPlayingId(null);
-      return;
-    }
-
-    // Stop previous sound
-    audioElement?.pause();
-
-    if (sound.previewUrl) {
-      const audio = new Audio(sound.previewUrl);
-      audio.addEventListener("ended", () => {
-        setPlayingId(null);
-      });
-      audio.addEventListener("error", (e) => {
-        setPlayingId(null);
-      });
-      audio.play().catch((error) => {
-        setPlayingId(null);
-      });
-
-      setAudioElement(audio);
-      setPlayingId(sound.id);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-5 mt-1 h-full">
-      <div className="flex items-center gap-3">
-        <Input
-          placeholder="Search sound effects"
-          className="bg-panel-accent w-full"
-          containerClassName="w-full"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          showClearIcon
-          onClear={() => setSearchQuery("")}
-        />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="text"
-              size="icon"
-              className={cn(showCommercialOnly && "text-primary")}
-            >
-              <ListFilter className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuCheckboxItem
-              checked={showCommercialOnly}
-              onCheckedChange={toggleCommercialFilter}
-            >
-              Show only commercially licensed
-            </DropdownMenuCheckboxItem>
-            <div className="px-2 py-1.5 text-xs text-muted-foreground">
-              {showCommercialOnly
-                ? "Only showing sounds licensed for commercial use"
-                : "Showing all sounds regardless of license"}
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea
-          className="flex-1 h-full"
-          ref={scrollAreaRef}
-          onScrollCapture={handleScrollWithPosition}
-        >
-          <div className="flex flex-col gap-4">
-            {isLoading && !searchQuery && (
-              <div className="text-muted-foreground text-sm">
-                Loading sounds...
-              </div>
-            )}
-            {isSearching && searchQuery && (
-              <div className="text-muted-foreground text-sm">Searching...</div>
-            )}
-            {displayedSounds.map((sound) => (
-              <AudioItem
-                key={sound.id}
-                sound={sound}
-                isPlaying={playingId === sound.id}
-                onPlay={() => playSound(sound)}
-                isSaved={isSoundSaved(sound.id)}
-                onToggleSaved={() => toggleSavedSound(sound)}
-              />
-            ))}
-            {!isLoading && !isSearching && displayedSounds.length === 0 && (
-              <div className="text-muted-foreground text-sm">
-                {searchQuery ? "No sounds found" : "No sounds available"}
-              </div>
-            )}
-            {isLoadingMore && (
-              <div className="text-muted-foreground text-sm text-center py-4">
-                Loading more sounds...
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-}
-
-function SavedSoundsView() {
-  const {
-    savedSounds,
-    isLoadingSavedSounds,
-    savedSoundsError,
-    loadSavedSounds,
-    isSoundSaved,
-    toggleSavedSound,
-    clearSavedSounds,
-  } = useSoundsStore();
-
-  // Audio playback state
-  const [playingId, setPlayingId] = useState<number | null>(null);
-  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
-    null
-  );
-
-  // Clear confirmation dialog state
-  const [showClearDialog, setShowClearDialog] = useState(false);
-
-  // Load saved sounds when tab becomes active
-  useEffect(() => {
-    loadSavedSounds();
-  }, [loadSavedSounds]);
-
-  const playSound = (sound: SavedSound) => {
-    if (playingId === sound.id) {
-      audioElement?.pause();
-      setPlayingId(null);
-      return;
-    }
-
-    // Stop previous sound
-    audioElement?.pause();
-
-    if (sound.previewUrl) {
-      const audio = new Audio(sound.previewUrl);
-      audio.addEventListener("ended", () => {
-        setPlayingId(null);
-      });
-      audio.addEventListener("error", (e) => {
-        setPlayingId(null);
-      });
-      audio.play().catch((error) => {
-        setPlayingId(null);
-      });
-
-      setAudioElement(audio);
-      setPlayingId(sound.id);
-    }
-  };
-
-  // Convert SavedSound to SoundEffect for compatibility with AudioItem
-  const convertToSoundEffect = (savedSound: SavedSound): SoundEffect => ({
-    id: savedSound.id,
-    name: savedSound.name,
-    description: "",
-    url: "",
-    previewUrl: savedSound.previewUrl,
-    downloadUrl: savedSound.downloadUrl,
-    duration: savedSound.duration,
-    filesize: 0,
-    type: "audio",
-    channels: 0,
-    bitrate: 0,
-    bitdepth: 0,
-    samplerate: 0,
-    username: savedSound.username,
-    tags: savedSound.tags,
-    license: savedSound.license,
-    created: savedSound.savedAt,
-    downloads: 0,
-    rating: 0,
-    ratingCount: 0,
-  });
-
-  if (isLoadingSavedSounds) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-muted-foreground text-sm">
-          Loading saved sounds...
-        </div>
-      </div>
-    );
-  }
-
-  if (savedSoundsError) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-destructive text-sm">
-          Error: {savedSoundsError}
-        </div>
-      </div>
-    );
-  }
-
-  if (savedSounds.length === 0) {
-    return (
-      <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
-        <HeartIcon
-          className="w-10 h-10 text-muted-foreground"
-          strokeWidth={1.5}
-        />
-        <div className="flex flex-col gap-2 text-center">
-          <p className="text-lg font-medium">No saved sounds</p>
-          <p className="text-sm text-muted-foreground text-balance">
-            Click the heart icon on any sound to save it here
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-5 mt-1 h-full">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
-          {savedSounds.length} saved{" "}
-          {savedSounds.length === 1 ? "sound" : "sounds"}
-        </p>
-        <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
-          <DialogTrigger asChild>
-            <Button
-              variant="text"
-              size="sm"
-              className="h-auto text-muted-foreground hover:text-destructive !opacity-100"
-            >
-              Clear all
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Clear all saved sounds?</DialogTitle>
-              <DialogDescription>
-                This will permanently remove all {savedSounds.length} saved
-                sounds from your collection. This action cannot be undone.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <Button variant="text" onClick={() => setShowClearDialog(false)}>
-                Cancel
-              </Button>
-              <Button
-                variant="destructive"
-                onClick={async () => {
-                  await clearSavedSounds();
-                  setShowClearDialog(false);
-                }}
-              >
-                Clear all sounds
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea className="flex-1 h-full">
-          <div className="flex flex-col gap-4">
-            {savedSounds.map((sound) => (
-              <AudioItem
-                key={sound.id}
-                sound={convertToSoundEffect(sound)}
-                isPlaying={playingId === sound.id}
-                onPlay={() => playSound(sound)}
-                isSaved={isSoundSaved(sound.id)}
-                onToggleSaved={() =>
-                  toggleSavedSound(convertToSoundEffect(sound))
-                }
-              />
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-}
-
-function SongsView() {
-  return <div>Songs</div>;
-}
-
-interface AudioItemProps {
-  sound: SoundEffect;
-  isPlaying: boolean;
-  onPlay: () => void;
-  isSaved: boolean;
-  onToggleSaved: () => void;
-}
-
-function AudioItem({
-  sound,
-  isPlaying,
-  onPlay,
-  isSaved,
-  onToggleSaved,
-}: AudioItemProps) {
-  const { addSoundToTimeline } = useSoundsStore();
-
-  const handleClick = () => {
-    onPlay();
-  };
-
-  const handleSaveClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onToggleSaved();
-  };
-
-  const handleAddToTimeline = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    await addSoundToTimeline(sound);
-  };
-
-  return (
-    <div
-      className="group flex items-center gap-3 opacity-100 hover:opacity-75 transition-opacity cursor-pointer"
-      onClick={handleClick}
-    >
-      <div className="relative w-12 h-12 bg-accent rounded-md flex items-center justify-center overflow-hidden shrink-0">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent" />
-        {isPlaying ? (
-          <PauseIcon className="w-5 h-5" />
-        ) : (
-          <PlayIcon className="w-5 h-5" />
-        )}
-      </div>
-
-      <div className="flex-1 min-w-0 overflow-hidden">
-        <p className="font-medium truncate text-sm">{sound.name}</p>
-        <span className="text-xs text-muted-foreground truncate block">
-          {sound.username}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-3 pr-2">
-        <Button
-          variant="text"
-          size="icon"
-          className="text-muted-foreground hover:text-foreground !opacity-100 w-auto"
-          onClick={handleAddToTimeline}
-          title="Add to timeline"
-        >
-          <PlusIcon className="w-4 h-4" />
-        </Button>
-        <Button
-          variant="text"
-          size="icon"
-          className={`hover:text-foreground !opacity-100 w-auto ${
-            isSaved
-              ? "text-red-500 hover:text-red-600"
-              : "text-muted-foreground"
-          }`}
-          onClick={handleSaveClick}
-          title={isSaved ? "Remove from saved" : "Save sound"}
-        >
-          <HeartIcon className={`w-4 h-4 ${isSaved ? "fill-current" : ""}`} />
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx
deleted file mode 100644
index f67450cc..00000000
--- a/apps/web/src/components/editor/media-panel/views/stickers.tsx
+++ /dev/null
@@ -1,612 +0,0 @@
-"use client";
-
-import { useEffect, useState, useMemo } from "react";
-import { useStickersStore } from "@/stores/stickers-store";
-import { useMediaStore } from "@/stores/media-store";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import {
-  Loader2,
-  Grid3X3,
-  Hash,
-  Smile,
-  Clock,
-  X,
-  Sparkles,
-  ArrowRight,
-  StickerIcon,
-} from "lucide-react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import {
-  getIconSvgUrl,
-  buildIconSvgUrl,
-  ICONIFY_HOSTS,
-  POPULAR_COLLECTIONS,
-} from "@/lib/iconify-api";
-import { cn } from "@/lib/utils";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import Image from "next/image";
-import type { MediaFile } from "@/types/media";
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { InputWithBack } from "@/components/ui/input-with-back";
-import { StickerCategory } from "@/stores/stickers-store";
-import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
-
-export function StickersView() {
-  const { selectedCategory, setSelectedCategory } = useStickersStore();
-
-  return (
-    <BaseView
-      value={selectedCategory}
-      onValueChange={(v) => {
-        if (["all", "general", "brands", "emoji"].includes(v)) {
-          setSelectedCategory(v as StickerCategory);
-        }
-      }}
-      tabs={[
-        {
-          value: "all",
-          label: "All",
-          icon: <Grid3X3 className="h-3 w-3" />,
-          content: <StickersContentView category="all" />,
-        },
-        {
-          value: "general",
-          label: "Icons",
-          icon: <Sparkles className="h-3 w-3" />,
-          content: <StickersContentView category="general" />,
-        },
-        {
-          value: "brands",
-          label: "Brands",
-          icon: <Hash className="h-3 w-3" />,
-          content: <StickersContentView category="brands" />,
-        },
-        {
-          value: "emoji",
-          label: "Emoji",
-          icon: <Smile className="h-3 w-3" />,
-          content: <StickersContentView category="emoji" />,
-        },
-      ]}
-      className="flex flex-col h-full p-0 overflow-hidden"
-    />
-  );
-}
-
-function StickerGrid({
-  icons,
-  onAdd,
-  addingSticker,
-  capSize = false,
-}: {
-  icons: string[];
-  onAdd: (iconName: string) => void;
-  addingSticker: string | null;
-  capSize?: boolean;
-}) {
-  return (
-    <div
-      className="grid gap-2"
-      style={{
-        gridTemplateColumns: capSize
-          ? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
-          : "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
-        ["--sticker-min" as any]: "96px",
-        ...(capSize ? ({ ["--sticker-max"]: "160px" } as any) : {}),
-      }}
-    >
-      {icons.map((iconName) => (
-        <StickerItem
-          key={iconName}
-          iconName={iconName}
-          onAdd={onAdd}
-          isAdding={addingSticker === iconName}
-          capSize={capSize}
-        />
-      ))}
-    </div>
-  );
-}
-
-function CollectionGrid({
-  collections,
-  onSelectCollection,
-}: {
-  collections: Array<{
-    prefix: string;
-    name: string;
-    total: number;
-    category?: string;
-  }>;
-  onSelectCollection: (prefix: string) => void;
-}) {
-  return (
-    <div className="grid grid-cols-1 gap-2">
-      {collections.map((collection) => (
-        <CollectionItem
-          key={collection.prefix}
-          title={collection.name}
-          subtitle={`${collection.total.toLocaleString()} icons${collection.category ? ` • ${collection.category}` : ""}`}
-          onClick={() => onSelectCollection(collection.prefix)}
-        />
-      ))}
-    </div>
-  );
-}
-
-function EmptyView({ message }: { message: string }) {
-  return (
-    <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
-      <StickerIcon
-        className="w-10 h-10 text-muted-foreground"
-        strokeWidth={1.5}
-      />
-      <div className="flex flex-col gap-2 text-center">
-        <p className="text-lg font-medium">No stickers found</p>
-        <p className="text-sm text-muted-foreground text-balance">{message}</p>
-      </div>
-    </div>
-  );
-}
-
-function StickersContentView({ category }: { category: StickerCategory }) {
-  const { activeProject } = useProjectStore();
-  const { addElementAtTime } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
-  const { addMediaFile } = useMediaStore();
-  const {
-    searchQuery,
-    selectedCollection,
-    viewMode,
-    collections,
-    currentCollection,
-    searchResults,
-    recentStickers,
-    isLoadingCollections,
-    isLoadingCollection,
-    isSearching,
-    setSearchQuery,
-    setSelectedCollection,
-    loadCollections,
-    searchStickers,
-    addStickerToTimeline,
-    clearRecentStickers,
-    setSelectedCategory,
-    addingSticker,
-  } = useStickersStore();
-
-  const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
-  const [collectionsToShow, setCollectionsToShow] = useState(20);
-  const [showCollectionItems, setShowCollectionItems] = useState(false);
-
-  const filteredCollections = useMemo(() => {
-    if (category === "all") {
-      return Object.entries(collections).map(([prefix, collection]) => ({
-        prefix,
-        name: collection.name,
-        total: collection.total,
-        category: collection.category,
-      }));
-    }
-
-    const collectionList =
-      POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
-    if (!collectionList) return [];
-
-    return collectionList
-      .map((c) => {
-        const collection = collections[c.prefix];
-        return collection
-          ? {
-              prefix: c.prefix,
-              name: c.name,
-              total: collection.total,
-            }
-          : null;
-      })
-      .filter(Boolean) as Array<{
-      prefix: string;
-      name: string;
-      total: number;
-    }>;
-  }, [collections, category]);
-
-  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
-    onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
-    hasMore: filteredCollections.length > collectionsToShow,
-    isLoading: isLoadingCollections,
-    enabled: viewMode === "browse" && !selectedCollection && category === "all",
-  });
-
-  useEffect(() => {
-    if (Object.keys(collections).length === 0) {
-      loadCollections();
-    }
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (localSearchQuery !== searchQuery) {
-        setSearchQuery(localSearchQuery);
-        if (localSearchQuery.trim()) {
-          searchStickers(localSearchQuery);
-        }
-      }
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, [localSearchQuery]);
-
-  const handleAddSticker = async (iconName: string) => {
-    try {
-      await addStickerToTimeline(iconName);
-    } catch (error) {
-      console.error("Failed to add sticker:", error);
-      toast.error("Failed to add sticker to timeline");
-    }
-  };
-
-  const iconsToDisplay = useMemo(() => {
-    if (viewMode === "search" && searchResults) {
-      return searchResults.icons;
-    }
-
-    if (viewMode === "collection" && currentCollection) {
-      const icons: string[] = [];
-
-      if (currentCollection.uncategorized) {
-        icons.push(
-          ...currentCollection.uncategorized.map(
-            (name) => `${currentCollection.prefix}:${name}`
-          )
-        );
-      }
-
-      if (currentCollection.categories) {
-        Object.values(currentCollection.categories).forEach((categoryIcons) => {
-          icons.push(
-            ...categoryIcons.map(
-              (name) => `${currentCollection.prefix}:${name}`
-            )
-          );
-        });
-      }
-
-      return icons.slice(0, 100);
-    }
-
-    return [];
-  }, [viewMode, searchResults, currentCollection]);
-
-  const isInCollection = viewMode === "collection" && !!selectedCollection;
-
-  useEffect(() => {
-    if (isInCollection) {
-      setShowCollectionItems(false);
-      const timer = setTimeout(() => setShowCollectionItems(true), 350);
-      return () => clearTimeout(timer);
-    } else {
-      setShowCollectionItems(false);
-    }
-  }, [isInCollection]);
-
-  return (
-    <div className="flex flex-col gap-5 mt-1 h-full p-4">
-      <div className="space-y-3">
-        <InputWithBack
-          isExpanded={isInCollection}
-          setIsExpanded={(expanded) => {
-            if (!expanded && isInCollection) {
-              setSelectedCollection(null);
-            }
-          }}
-          placeholder={
-            category === "all"
-              ? "Search all stickers"
-              : category === "general"
-                ? "Search icons"
-                : category === "brands"
-                  ? "Search brands"
-                  : "Search Emojis"
-          }
-          value={localSearchQuery}
-          onChange={setLocalSearchQuery}
-          disableAnimation={true}
-        />
-      </div>
-
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea
-          className="flex-1 h-full"
-          ref={scrollAreaRef}
-          onScrollCapture={handleScroll}
-        >
-          <div className="flex flex-col gap-4 h-full">
-            {recentStickers.length > 0 && viewMode === "browse" && (
-              <div className="h-full">
-                <div className="flex items-center gap-2 mb-2">
-                  <Clock className="h-4 w-4 text-muted-foreground" />
-                  <span className="text-sm font-medium">Recent</span>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <button
-                          onClick={clearRecentStickers}
-                          className="ml-auto h-5 w-5 p-0 rounded hover:bg-accent flex items-center justify-center"
-                        >
-                          <X className="h-3 w-3 text-muted-foreground" />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Clear recent stickers</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-                <StickerGrid
-                  icons={recentStickers.slice(0, 12)}
-                  onAdd={handleAddSticker}
-                  addingSticker={addingSticker}
-                  capSize
-                />
-              </div>
-            )}
-
-            {viewMode === "collection" && selectedCollection && (
-              <div className="h-full">
-                {isLoadingCollection ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : showCollectionItems ? (
-                  <StickerGrid
-                    icons={iconsToDisplay}
-                    onAdd={handleAddSticker}
-                    addingSticker={addingSticker}
-                  />
-                ) : (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  </div>
-                )}
-              </div>
-            )}
-
-            {viewMode === "search" && (
-              <div className="h-full">
-                {isSearching ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : searchResults?.icons.length ? (
-                  <>
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm text-muted-foreground">
-                        {searchResults.total} results
-                      </span>
-                    </div>
-                    <StickerGrid
-                      icons={iconsToDisplay}
-                      onAdd={handleAddSticker}
-                      addingSticker={addingSticker}
-                      capSize
-                    />
-                  </>
-                ) : searchQuery ? (
-                  <div className="flex flex-col items-center justify-center py-8 gap-3">
-                    <EmptyView
-                      message={`No stickers found for "${searchQuery}"`}
-                    />
-                    {category !== "all" && (
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          const q = localSearchQuery || searchQuery;
-                          if (q) {
-                            setSearchQuery(q);
-                          }
-                          setSelectedCategory("all");
-                          if (q) {
-                            searchStickers(q);
-                          }
-                        }}
-                      >
-                        Search in all icons
-                      </Button>
-                    )}
-                  </div>
-                ) : null}
-              </div>
-            )}
-
-            {viewMode === "browse" && !selectedCollection && (
-              <div className="space-y-4 h-full">
-                {isLoadingCollections ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : (
-                  <>
-                    {category !== "all" && (
-                      <div className="h-full">
-                        <h3 className="text-sm font-medium mb-2">
-                          Popular{" "}
-                          {category === "general"
-                            ? "Icon Sets"
-                            : category === "brands"
-                              ? "Brand Icons"
-                              : "Emoji Sets"}
-                        </h3>
-                        <CollectionGrid
-                          collections={filteredCollections}
-                          onSelectCollection={setSelectedCollection}
-                        />
-                      </div>
-                    )}
-
-                    {category === "all" && filteredCollections.length > 0 && (
-                      <div className="h-full">
-                        <CollectionGrid
-                          collections={filteredCollections.slice(
-                            0,
-                            collectionsToShow
-                          )}
-                          onSelectCollection={setSelectedCollection}
-                        />
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-}
-
-interface CollectionItemProps {
-  title: string;
-  subtitle: string;
-  onClick: () => void;
-}
-
-function CollectionItem({ title, subtitle, onClick }: CollectionItemProps) {
-  return (
-    <Button
-      variant="outline"
-      className="justify-between h-auto py-2 "
-      onClick={onClick}
-    >
-      <div className="text-left">
-        <p className="font-medium">{title}</p>
-        <p className="text-xs text-muted-foreground">{subtitle}</p>
-      </div>
-      <ArrowRight className="h-4 w-4" />
-    </Button>
-  );
-}
-
-interface StickerItemProps {
-  iconName: string;
-  onAdd: (iconName: string) => void;
-  isAdding?: boolean;
-  capSize?: boolean;
-}
-
-function StickerItem({
-  iconName,
-  onAdd,
-  isAdding,
-  capSize = false,
-}: StickerItemProps) {
-  const [imageError, setImageError] = useState(false);
-  const [hostIndex, setHostIndex] = useState(0);
-
-  useEffect(() => {
-    setImageError(false);
-    setHostIndex(0);
-  }, [iconName]);
-
-  const displayName = iconName.split(":")[1] || iconName;
-  const collectionPrefix = iconName.split(":")[0];
-
-  const preview = imageError ? (
-    <div className="w-full h-full flex items-center justify-center p-2">
-      <span className="text-xs text-muted-foreground text-center break-all">
-        {displayName}
-      </span>
-    </div>
-  ) : (
-    <div className="w-full h-full p-4 flex items-center justify-center">
-      <Image
-        src={
-          hostIndex === 0
-            ? getIconSvgUrl(iconName, { width: 64, height: 64 })
-            : buildIconSvgUrl(
-                ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
-                iconName,
-                { width: 64, height: 64 }
-              )
-        }
-        alt={displayName}
-        width={64}
-        height={64}
-        className="w-full h-full object-contain"
-        style={
-          capSize
-            ? {
-                maxWidth: "var(--sticker-max, 160px)",
-                maxHeight: "var(--sticker-max, 160px)",
-              }
-            : undefined
-        }
-        onError={() => {
-          const next = hostIndex + 1;
-          if (next < ICONIFY_HOSTS.length) {
-            setHostIndex(next);
-          } else {
-            setImageError(true);
-          }
-        }}
-        loading="lazy"
-        unoptimized
-      />
-    </div>
-  );
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "relative",
-            isAdding && "opacity-50 pointer-events-none"
-          )}
-        >
-          <DraggableMediaItem
-            name={displayName}
-            preview={preview}
-            dragData={{
-              id: "sticker-placeholder",
-              type: "image",
-              name: displayName,
-            }}
-            onAddToTimeline={() => onAdd(iconName)}
-            aspectRatio={1}
-            showLabel={false}
-            rounded={true}
-            variant="card"
-            className=""
-            containerClassName="w-full"
-            isDraggable={false}
-          />
-          {isAdding && (
-            <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-md z-10">
-              <Loader2 className="h-6 w-6 animate-spin text-white" />
-            </div>
-          )}
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <div className="space-y-1">
-          <p className="font-medium">{displayName}</p>
-          <p className="text-xs text-muted-foreground">{collectionPrefix}</p>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
deleted file mode 100644
index 22fc2413..00000000
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-
-export function TextView() {
-  return (
-    <BaseView>
-      <DraggableMediaItem
-        name="Default text"
-        preview={
-          <div className="flex items-center justify-center w-full h-full bg-panel-accent rounded">
-            <span className="text-xs select-none">Default text</span>
-          </div>
-        }
-        dragData={{
-          id: "temp-text-id",
-          type: DEFAULT_TEXT_ELEMENT.type,
-          name: DEFAULT_TEXT_ELEMENT.name,
-          content: DEFAULT_TEXT_ELEMENT.content,
-        }}
-        aspectRatio={1}
-        onAddToTimeline={(currentTime) =>
-          useTimelineStore.getState().addElementAtTime(
-            {
-              ...DEFAULT_TEXT_ELEMENT,
-              id: "temp-text-id",
-            },
-            currentTime
-          )
-        }
-        showLabel={false}
-      />
-    </BaseView>
-  );
-}
diff --git a/apps/web/src/components/editor/onboarding.tsx b/apps/web/src/components/editor/onboarding.tsx
index 8ee60690..c60c2de5 100644
--- a/apps/web/src/components/editor/onboarding.tsx
+++ b/apps/web/src/components/editor/onboarding.tsx
@@ -1,138 +1,137 @@
 "use client";
 
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
-import { Button } from "../ui/button";
 import { ArrowRightIcon } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import ReactMarkdown from "react-markdown";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
+import { useLocalStorage } from "@/hooks/storage/use-local-storage";
+import { Button } from "../ui/button";
+import { Dialog, DialogBody, DialogContent, DialogTitle } from "../ui/dialog";
 
 export function Onboarding() {
-  const [step, setStep] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
+	const [step, setStep] = useState(0);
+	const [hasSeenOnboarding, setHasSeenOnboarding] = useLocalStorage({
+		key: "hasSeenOnboarding",
+		defaultValue: false,
+	});
 
-  useEffect(() => {
-    const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");
-    if (!hasSeenOnboarding) {
-      setIsOpen(true);
-    }
-  }, []);
+	const isOpen = !hasSeenOnboarding;
 
-  const handleNext = () => {
-    setStep(step + 1);
-  };
+	const handleNext = () => {
+		setStep(step + 1);
+	};
 
-  const handleClose = () => {
-    setIsOpen(false);
-    localStorage.setItem("hasSeenOnboarding", "true");
-  };
+	const handleClose = () => {
+		setHasSeenOnboarding({ value: true });
+	};
 
-  const getStepTitle = () => {
-    switch (step) {
-      case 0:
-        return "Welcome to OpenCut Beta! 🎉";
-      case 1:
-        return "⚠️ This is a super early beta!";
-      case 2:
-        return "🦋 Have fun testing!";
-      default:
-        return "OpenCut Onboarding";
-    }
-  };
+	const getStepTitle = () => {
+		switch (step) {
+			case 0:
+				return "Welcome to OpenCut Beta! 🎉";
+			case 1:
+				return "⚠️ This is a super early beta!";
+			case 2:
+				return "🦋 Have fun testing!";
+			default:
+				return "OpenCut Onboarding";
+		}
+	};
 
-  const renderStepContent = () => {
-    switch (step) {
-      case 0:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title="Welcome to OpenCut Beta! 🎉" />
-              <Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
-            </div>
-            <NextButton onClick={handleNext}>Next</NextButton>
-          </div>
-        );
-      case 1:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title={getStepTitle()} />
-              <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
-              <Description description="A lot of features are still missing, like the export functionality. We're working hard to build them out!" />
-              <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
-            </div>
-            <NextButton onClick={handleNext}>Next</NextButton>
-          </div>
-        );
-      case 2:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title={getStepTitle()} />
-              <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), chat with cool people and share feedback to help make OpenCut the best editor ever." />
-            </div>
-            <NextButton onClick={handleClose}>Finish</NextButton>
-          </div>
-        );
-      default:
-        return null;
-    }
-  };
+	const renderStepContent = () => {
+		switch (step) {
+			case 0:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title="Welcome to OpenCut Beta! 🎉" />
+							<Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
+						</div>
+						<NextButton onClick={handleNext}>Next</NextButton>
+					</div>
+				);
+			case 1:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title={getStepTitle()} />
+							<Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
+							<Description description="A lot of features are still missing, like the export functionality. We're working hard to build them out!" />
+							<Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
+						</div>
+						<NextButton onClick={handleNext}>Next</NextButton>
+					</div>
+				);
+			case 2:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title={getStepTitle()} />
+							<Description
+								description={`Join our [Discord](${SOCIAL_LINKS.discord}), chat with cool people and share feedback to help make OpenCut the best editor ever.`}
+							/>
+						</div>
+						<NextButton onClick={handleClose}>Finish</NextButton>
+					</div>
+				);
+			default:
+				return null;
+		}
+	};
 
-  return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px] !outline-none pt-2">
-        <DialogTitle>
-          <span className="sr-only">{getStepTitle()}</span>
-        </DialogTitle>
-        {renderStepContent()}
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog open={isOpen} onOpenChange={handleClose}>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogTitle>
+					<span className="sr-only">{getStepTitle()}</span>
+				</DialogTitle>
+				<DialogBody>
+					{renderStepContent()}
+				</DialogBody>
+			</DialogContent>
+		</Dialog>
+	);
 }
 
 function Title({ title }: { title: string }) {
-  return <h2 className="text-lg md:text-xl font-bold">{title}</h2>;
-}
-
-function Subtitle({ subtitle }: { subtitle: string }) {
-  return <h3 className="text-lg font-medium">{subtitle}</h3>;
+	return <h2 className="text-lg font-bold md:text-xl">{title}</h2>;
 }
 
 function Description({ description }: { description: string }) {
-  return (
-    <div className="text-muted-foreground">
-      <ReactMarkdown
-        components={{
-          p: ({ children }) => <p className="mb-0">{children}</p>,
-          a: ({ href, children }) => (
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-foreground hover:text-foreground/80 underline"
-            >
-              {children}
-            </a>
-          ),
-        }}
-      >
-        {description}
-      </ReactMarkdown>
-    </div>
-  );
+	return (
+		<div className="text-muted-foreground">
+			<ReactMarkdown
+				components={{
+					p: ({ children }) => <p className="mb-0">{children}</p>,
+					a: ({ href, children }) => (
+						<a
+							href={href}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-foreground hover:text-foreground/80 underline"
+						>
+							{children}
+						</a>
+					),
+				}}
+			>
+				{description}
+			</ReactMarkdown>
+		</div>
+	);
 }
 
 function NextButton({
-  children,
-  onClick,
+	children,
+	onClick,
 }: {
-  children: React.ReactNode;
-  onClick: () => void;
+	children: React.ReactNode;
+	onClick: () => void;
 }) {
-  return (
-    <Button onClick={onClick} variant="default" className="w-full">
-      {children}
-      <ArrowRightIcon className="w-4 h-4" />
-    </Button>
-  );
+	return (
+		<Button onClick={onClick} variant="default" className="w-full">
+			{children}
+			<ArrowRightIcon className="size-4" />
+		</Button>
+	);
 }
diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
deleted file mode 100644
index 6e92c616..00000000
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ScrollArea } from "@/components/ui/scroll-area";

-import { Separator } from "@/components/ui/separator";

-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

-import { cn } from "@/lib/utils";

-

-interface PanelBaseViewProps {

-  children?: React.ReactNode;

-  defaultTab?: string;

-  value?: string;

-  onValueChange?: (value: string) => void;

-  tabs?: {

-    value: string;

-    label: string;

-    icon?: React.ReactNode;

-    content: React.ReactNode;

-  }[];

-  className?: string;

-  ref?: React.RefObject<HTMLDivElement>;

-}

-

-function ViewContent({

-  children,

-  className,

-}: {

-  children: React.ReactNode;

-  className?: string;

-}) {

-  return (

-    <ScrollArea className="flex-1">

-      <div className={cn("p-5", className)}>{children}</div>

-    </ScrollArea>

-  );

-}

-

-export function PanelBaseView({

-  children,

-  defaultTab,

-  value,

-  onValueChange,

-  tabs,

-  className = "",

-  ref,

-}: PanelBaseViewProps) {

-  return (

-    <div className={cn("h-full flex flex-col", className)} ref={ref}>

-      {!tabs || tabs.length === 0 ? (

-        <ViewContent className={className}>{children}</ViewContent>

-      ) : (

-        <Tabs

-          defaultValue={defaultTab}

-          value={value}

-          onValueChange={onValueChange}

-          className="flex flex-col h-full"

-        >

-          <div className="sticky top-0 z-10 bg-panel">

-            <div className="px-3 pt-3.5 pb-0">

-              <TabsList>

-                {tabs.map((tab) => (

-                  <TabsTrigger key={tab.value} value={tab.value}>

-                    {tab.icon ? (

-                      <span className="inline-flex items-center mr-1">

-                        {tab.icon}

-                      </span>

-                    ) : null}

-                    {tab.label}

-                  </TabsTrigger>

-                ))}

-              </TabsList>

-            </div>

-            <Separator className="mt-3.5" />

-          </div>

-          {tabs.map((tab) => (

-            <TabsContent

-              key={tab.value}

-              value={tab.value}

-              className="mt-0 flex-1 flex flex-col min-h-0"

-            >

-              <ViewContent className={className}>{tab.content}</ViewContent>

-            </TabsContent>

-          ))}

-        </Tabs>

-      )}

-    </div>

-  );

-}

diff --git a/apps/web/src/components/editor/panel-preset-selector.tsx b/apps/web/src/components/editor/panel-preset-selector.tsx
deleted file mode 100644
index af22a171..00000000
--- a/apps/web/src/components/editor/panel-preset-selector.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";

-

-import { Button } from "../ui/button";

-import {

-  DropdownMenu,

-  DropdownMenuContent,

-  DropdownMenuItem,

-  DropdownMenuSeparator,

-  DropdownMenuTrigger,

-} from "../ui/dropdown-menu";

-import { ChevronDown, RotateCcw, LayoutPanelTop } from "lucide-react";

-import { usePanelStore, type PanelPreset } from "@/stores/panel-store";

-

-const PRESET_LABELS: Record<PanelPreset, string> = {

-  default: "Default",

-  media: "Media",

-  inspector: "Inspector",

-  "vertical-preview": "Vertical Preview",

-};

-

-const PRESET_DESCRIPTIONS: Record<PanelPreset, string> = {

-  default: "Media, preview, and inspector on top row, timeline on bottom",

-  media: "Full height media on left, preview and inspector on top row",

-  inspector: "Full height inspector on right, media and preview on top row",

-  "vertical-preview": "Full height preview on right for vertical videos",

-};

-

-export function PanelPresetSelector() {

-  const { activePreset, setActivePreset, resetPreset } = usePanelStore();

-

-  const handlePresetChange = (preset: PanelPreset) => {

-    setActivePreset(preset);

-  };

-

-  const handleResetPreset = (preset: PanelPreset, event: React.MouseEvent) => {

-    event.stopPropagation();

-    resetPreset(preset);

-  };

-

-  return (

-    <DropdownMenu>

-      <DropdownMenuTrigger asChild>

-        <Button

-          variant="secondary"

-          size="sm"

-          className="h-8 px-2 flex items-center gap-1 text-xs"

-          title="Panel Presets"

-        >

-          <LayoutPanelTop className="h-4 w-4" />

-          <ChevronDown className="h-3 w-3" />

-        </Button>

-      </DropdownMenuTrigger>

-      <DropdownMenuContent align="start" className="w-64">

-        <div className="px-3 py-2 text-xs font-medium text-muted-foreground">

-          Panel Presets

-        </div>

-        <DropdownMenuSeparator />

-        {(Object.keys(PRESET_LABELS) as PanelPreset[]).map((preset) => (

-          <DropdownMenuItem

-            key={preset}

-            onClick={() => handlePresetChange(preset)}

-            className="flex items-start justify-between gap-2 py-2 px-3 cursor-pointer"

-          >

-            <div className="flex-1 min-w-0">

-              <div className="flex items-center gap-2">

-                <span className="font-medium text-sm">

-                  {PRESET_LABELS[preset]}

-                </span>

-                {activePreset === preset && (

-                  <div className="h-2 w-2 rounded-full bg-primary" />

-                )}

-              </div>

-              <p className="text-xs text-muted-foreground mt-0.5 leading-tight">

-                {PRESET_DESCRIPTIONS[preset]}

-              </p>

-            </div>

-            <Button

-              variant="secondary"

-              size="icon"

-              className="h-6 w-6 shrink-0 opacity-60 hover:opacity-100"

-              onClick={(e) => handleResetPreset(preset, e)}

-              title={`Reset ${PRESET_LABELS[preset]} preset`}

-            >

-              <RotateCcw className="h-3 w-3" />

-            </Button>

-          </DropdownMenuItem>

-        ))}

-      </DropdownMenuContent>

-    </DropdownMenu>

-  );

-}

diff --git a/apps/web/src/components/editor/panels/assets/drag-overlay.tsx b/apps/web/src/components/editor/panels/assets/drag-overlay.tsx
new file mode 100644
index 00000000..c6b0861c
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/drag-overlay.tsx
@@ -0,0 +1,61 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { UploadIcon } from "@hugeicons/core-free-icons";
+
+interface MediaDragOverlayProps {
+	isVisible: boolean;
+	isProcessing?: boolean;
+	progress?: number;
+	onClick?: () => void;
+}
+
+export function MediaDragOverlay({
+	isVisible,
+	isProcessing = false,
+	progress = 0,
+	onClick,
+}: MediaDragOverlayProps) {
+	if (!isVisible) return null;
+
+	const handleClick = ({
+		event,
+	}: {
+		event: React.MouseEvent<HTMLButtonElement>;
+	}) => {
+		if (isProcessing || !onClick) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onClick();
+	};
+
+	return (
+		<button
+			className="bg-foreground/5 hover:bg-foreground/10 flex size-full flex-col items-center justify-center gap-4 rounded-lg p-8 text-center"
+			type="button"
+			disabled={isProcessing || !onClick}
+			onClick={(event) => handleClick({ event })}
+		>
+			<div className="flex items-center justify-center">
+				<HugeiconsIcon icon={UploadIcon} className="text-foreground size-10" />
+			</div>
+
+			<div className="space-y-2">
+				<p className="text-muted-foreground max-w-sm text-xs">
+					{isProcessing
+						? `Processing your files (${progress}%)`
+						: "Drag and drop videos, photos, and audio files here"}
+				</p>
+			</div>
+
+			{isProcessing && (
+				<div className="w-full max-w-xs">
+					<div className="bg-muted/50 h-2 w-full rounded-full">
+						<div
+							className="bg-primary h-2 rounded-full"
+							style={{ width: `${progress}%` }}
+						/>
+					</div>
+				</div>
+			)}
+		</button>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/draggable-item.tsx b/apps/web/src/components/editor/panels/assets/draggable-item.tsx
new file mode 100644
index 00000000..10cb1f8c
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/draggable-item.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useEditor } from "@/hooks/use-editor";
+import { clearDragData, setDragData } from "@/lib/drag-data";
+import type { TimelineDragData } from "@/types/drag";
+import { cn } from "@/utils/ui";
+
+export interface DraggableItemProps {
+	name: string;
+	preview: ReactNode;
+	dragData: TimelineDragData;
+	onDragStart?: ({ e }: { e: React.DragEvent }) => void;
+	onAddToTimeline?: ({ currentTime }: { currentTime: number }) => void;
+	aspectRatio?: number;
+	className?: string;
+	containerClassName?: string;
+	shouldShowPlusOnDrag?: boolean;
+	shouldShowLabel?: boolean;
+	isRounded?: boolean;
+	variant?: "card" | "compact";
+	isDraggable?: boolean;
+	isHighlighted?: boolean;
+}
+
+export function DraggableItem({
+	name,
+	preview,
+	dragData,
+	onDragStart,
+	onAddToTimeline,
+	aspectRatio = 16 / 9,
+	className = "",
+	containerClassName,
+	shouldShowPlusOnDrag = true,
+	shouldShowLabel = true,
+	isRounded = true,
+	variant = "card",
+	isDraggable = true,
+	isHighlighted = false,
+}: DraggableItemProps) {
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+	const dragRef = useRef<HTMLDivElement>(null);
+	const editor = useEditor();
+	const highlightClassName = `ring-2 ring-primary bg-primary/10 ${isRounded ? "rounded-sm" : ""}`;
+
+	const handleAddToTimeline = () => {
+		onAddToTimeline?.({ currentTime: editor.playback.getCurrentTime() });
+	};
+
+	const emptyImg = new window.Image();
+	emptyImg.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+
+	useEffect(() => {
+		if (!isDragging) return;
+
+		const handleDragOver = (e: DragEvent) => {
+			setDragPosition({ x: e.clientX, y: e.clientY });
+		};
+
+		document.addEventListener("dragover", handleDragOver);
+
+		return () => {
+			document.removeEventListener("dragover", handleDragOver);
+		};
+	}, [isDragging]);
+
+	const handleDragStart = (e: React.DragEvent) => {
+		e.dataTransfer.setDragImage(emptyImg, 0, 0);
+
+		setDragData({ dataTransfer: e.dataTransfer, dragData });
+		e.dataTransfer.effectAllowed = "copy";
+
+		setDragPosition({ x: e.clientX, y: e.clientY });
+		setIsDragging(true);
+
+		onDragStart?.({ e });
+	};
+
+	const handleDragEnd = () => {
+		setIsDragging(false);
+		clearDragData();
+	};
+
+	return (
+		<>
+			{variant === "card" ? (
+				<div
+					ref={dragRef}
+					className={cn("group relative", containerClassName ?? "size-28")}
+				>
+					<div
+						className={cn(
+							"relative flex h-auto w-full cursor-default flex-col gap-1 p-1",
+							className,
+							isHighlighted && highlightClassName,
+						)}
+					>
+						<AspectRatio
+							ratio={aspectRatio}
+							className={cn(
+								"bg-panel-accent relative overflow-hidden",
+								isRounded && "rounded-sm",
+								isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
+							)}
+							draggable={isDraggable}
+							onDragStart={isDraggable ? handleDragStart : undefined}
+							onDragEnd={isDraggable ? handleDragEnd : undefined}
+						>
+							{preview}
+							{!isDragging && (
+								<PlusButton
+									className="opacity-0 group-hover:opacity-100"
+									onClick={handleAddToTimeline}
+								/>
+							)}
+						</AspectRatio>
+						{shouldShowLabel && (
+							<span
+								className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
+								title={name}
+							>
+								<span className="sr-only">{name}</span>
+								<span aria-hidden="true">
+									{name.length > 8
+										? `${name.slice(0, 16)}...${name.slice(-3)}`
+										: name}
+								</span>
+							</span>
+						)}
+					</div>
+				</div>
+			) : (
+				<div
+					ref={dragRef}
+					className={cn(
+						"group relative w-full",
+						isHighlighted && highlightClassName,
+					)}
+				>
+					<button
+						type="button"
+						className={cn(
+							"flex h-8 w-full cursor-default items-center gap-3 px-1",
+							isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
+							className,
+						)}
+						draggable={isDraggable}
+						onDragStart={isDraggable ? handleDragStart : undefined}
+						onDragEnd={isDraggable ? handleDragEnd : undefined}
+					>
+						<div className="size-6 flex-shrink-0 overflow-hidden rounded-[0.35rem]">
+							{preview}
+						</div>
+						<span className="w-full flex-1 truncate text-sm text-left">{name}</span>
+					</button>
+				</div>
+			)}
+
+			{isDraggable &&
+				isDragging &&
+				typeof document !== "undefined" &&
+				createPortal(
+					<div
+						className="pointer-events-none fixed z-9999"
+						style={{
+							left: dragPosition.x - 40,
+							top: dragPosition.y - 40,
+						}}
+					>
+						<div className="w-[80px]">
+							<AspectRatio
+								ratio={1}
+								className="ring-primary relative overflow-hidden rounded-md shadow-2xl ring-3"
+							>
+								<div className="size-full [&_img]:size-full [&_img]:rounded-none [&_img]:object-cover">
+									{preview}
+								</div>
+								{shouldShowPlusOnDrag && (
+									<PlusButton
+										onClick={handleAddToTimeline}
+										tooltipText="Add to timeline or drag to position"
+									/>
+								)}
+							</AspectRatio>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}
+
+function PlusButton({
+	className,
+	onClick,
+	tooltipText,
+}: {
+	className?: string;
+	onClick?: () => void;
+	tooltipText?: string;
+}) {
+	const button = (
+		<Button
+			size="icon"
+			className={cn(
+				"bg-background hover:bg-panel text-foreground absolute right-2 bottom-2 size-5",
+				className,
+			)}
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onClick?.();
+			}}
+			title={tooltipText}
+		>
+			<Plus />
+		</Button>
+	);
+
+	if (tooltipText) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>{button}</TooltipTrigger>
+				<TooltipContent>
+					<p>{tooltipText}</p>
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
+
+	return button;
+}
diff --git a/apps/web/src/components/editor/panels/assets/index.tsx b/apps/web/src/components/editor/panels/assets/index.tsx
new file mode 100644
index 00000000..9161cb1d
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/index.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import { type Tab, useAssetsPanelStore } from "@/stores/assets-panel-store";
+import { TabBar } from "./tabbar";
+import { Captions } from "./views/captions";
+import { MediaView } from "./views/media";
+import { SettingsView } from "./views/settings";
+import { SoundsView } from "./views/sounds";
+import { StickersView } from "./views/stickers";
+import { TextView } from "./views/text";
+
+export function AssetsPanel() {
+	const { activeTab } = useAssetsPanelStore();
+
+	const viewMap: Record<Tab, React.ReactNode> = {
+		media: <MediaView />,
+		sounds: <SoundsView />,
+		text: <TextView />,
+		stickers: <StickersView />,
+		effects: (
+			<div className="text-muted-foreground p-4">
+				Effects view coming soon...
+			</div>
+		),
+		transitions: (
+			<div className="text-muted-foreground p-4">
+				Transitions view coming soon...
+			</div>
+		),
+		captions: <Captions />,
+		filters: (
+			<div className="text-muted-foreground p-4">
+				Filters view coming soon...
+			</div>
+		),
+		adjustment: (
+			<div className="text-muted-foreground p-4">
+				Adjustment view coming soon...
+			</div>
+		),
+		settings: <SettingsView />,
+	};
+
+	return (
+		<div className="bg-panel flex h-full">
+			<TabBar />
+			<Separator orientation="vertical" />
+			<div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx
new file mode 100644
index 00000000..2c950fdc
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/tabbar.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/utils/ui";
+import {
+	TAB_KEYS,
+	tabs,
+	useAssetsPanelStore,
+} from "@/stores/assets-panel-store";
+
+export function TabBar() {
+	const { activeTab, setActiveTab } = useAssetsPanelStore();
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [showTopFade, setShowTopFade] = useState(false);
+	const [showBottomFade, setShowBottomFade] = useState(false);
+
+	const checkScrollPosition = useCallback(() => {
+		const element = scrollRef.current;
+		if (!element) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = element;
+		setShowTopFade(scrollTop > 0);
+		setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
+	}, []);
+
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (!element) return;
+
+		checkScrollPosition();
+		element.addEventListener("scroll", checkScrollPosition);
+
+		const resizeObserver = new ResizeObserver(checkScrollPosition);
+		resizeObserver.observe(element);
+
+		return () => {
+			element.removeEventListener("scroll", checkScrollPosition);
+			resizeObserver.disconnect();
+		};
+	}, [checkScrollPosition]);
+
+	return (
+		<div className="relative flex">
+			<div
+				ref={scrollRef}
+				className="scrollbar-hidden relative flex size-full flex-col items-center justify-start gap-5 overflow-y-auto px-4 py-4"
+			>
+				{TAB_KEYS.map((tabKey) => {
+					const tab = tabs[tabKey];
+					return (
+						<Tooltip key={tabKey} delayDuration={10}>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									aria-label={tab.label}
+									className={cn(
+										"flex cursor-pointer flex-col items-center gap-0.5 [&>svg]:size-4.5! opacity-100 hover:opacity-75",
+										activeTab === tabKey
+											? "text-primary !opacity-100"
+											: "text-muted-foreground",
+									)}
+									onClick={() => setActiveTab(tabKey)}
+									onKeyDown={(event) => {
+										if (event.key === "Enter" || event.key === " ") {
+											event.preventDefault();
+											setActiveTab(tabKey);
+										}
+									}}
+								>
+									<tab.icon className=" " />
+								</button>
+							</TooltipTrigger>
+							<TooltipContent
+								side="right"
+								align="center"
+								variant="sidebar"
+								sideOffset={8}
+							>
+								<div className="text-foreground text-sm leading-none font-medium">
+									{tab.label}
+								</div>
+							</TooltipContent>
+						</Tooltip>
+					);
+				})}
+			</div>
+
+			<FadeOverlay direction="top" show={showTopFade} />
+			<FadeOverlay direction="bottom" show={showBottomFade} />
+		</div>
+	);
+}
+
+function FadeOverlay({
+	direction,
+	show,
+}: {
+	direction: "top" | "bottom";
+	show: boolean;
+}) {
+	return (
+		<div
+			className={cn(
+				"pointer-events-none absolute right-0 left-0 h-6",
+				direction === "top" && show
+					? "from-panel top-0 bg-gradient-to-b to-transparent"
+					: "from-panel bottom-0 bg-gradient-to-t to-transparent",
+			)}
+		/>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/captions.tsx b/apps/web/src/components/editor/panels/assets/views/captions.tsx
new file mode 100644
index 00000000..306bad2a
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/captions.tsx
@@ -0,0 +1,152 @@
+import { Button } from "@/components/ui/button";
+import { PropertyGroup } from "@/components/editor/panels/properties/property-item";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { useState, useRef } from "react";
+import { extractTimelineAudio } from "@/lib/media/mediabunny";
+import { useEditor } from "@/hooks/use-editor";
+import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
+import { TRANSCRIPTION_LANGUAGES } from "@/constants/transcription-constants";
+import type {
+	TranscriptionLanguage,
+	TranscriptionProgress,
+} from "@/types/transcription";
+import { transcriptionService } from "@/services/transcription";
+import { decodeAudioToFloat32 } from "@/lib/media/audio";
+import { buildCaptionChunks } from "@/lib/transcription/caption";
+import { Spinner } from "@/components/ui/spinner";
+
+export function Captions() {
+	const [selectedLanguage, setSelectedLanguage] =
+		useState<TranscriptionLanguage>("auto");
+	const [isProcessing, setIsProcessing] = useState(false);
+	const [processingStep, setProcessingStep] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const editor = useEditor();
+
+	const handleProgress = (progress: TranscriptionProgress) => {
+		if (progress.status === "loading-model") {
+			setProcessingStep(`Loading model ${Math.round(progress.progress)}%`);
+		} else if (progress.status === "transcribing") {
+			setProcessingStep("Transcribing...");
+		}
+	};
+
+	const handleGenerateTranscript = async () => {
+		try {
+			setIsProcessing(true);
+			setError(null);
+			setProcessingStep("Extracting audio...");
+
+			const audioBlob = await extractTimelineAudio({
+				tracks: editor.timeline.getTracks(),
+				mediaAssets: editor.media.getAssets(),
+				totalDuration: editor.timeline.getTotalDuration(),
+			});
+
+			setProcessingStep("Preparing audio...");
+			const { samples } = await decodeAudioToFloat32({ audioBlob });
+
+			const result = await transcriptionService.transcribe({
+				audioData: samples,
+				language: selectedLanguage === "auto" ? undefined : selectedLanguage,
+				onProgress: handleProgress,
+			});
+
+			setProcessingStep("Generating captions...");
+			const captionChunks = buildCaptionChunks({ segments: result.segments });
+
+			const captionTrackId = editor.timeline.addTrack({
+				type: "text",
+				index: 0,
+			});
+
+			for (let i = 0; i < captionChunks.length; i++) {
+				const caption = captionChunks[i];
+				editor.timeline.insertElement({
+					placement: { mode: "explicit", trackId: captionTrackId },
+					element: {
+						...DEFAULT_TEXT_ELEMENT,
+						name: `Caption ${i + 1}`,
+						content: caption.text,
+						duration: caption.duration,
+						startTime: caption.startTime,
+						fontSize: 65,
+						fontWeight: "bold",
+					},
+				});
+			}
+		} catch (error) {
+			console.error("Transcription failed:", error);
+			setError(
+				error instanceof Error ? error.message : "An unexpected error occurred",
+			);
+		} finally {
+			setIsProcessing(false);
+			setProcessingStep("");
+		}
+	};
+
+	const handleLanguageChange = ({ value }: { value: string }) => {
+		if (value === "auto") {
+			setSelectedLanguage("auto");
+			return;
+		}
+
+		const matchedLanguage = TRANSCRIPTION_LANGUAGES.find(
+			(language) => language.code === value,
+		);
+		if (!matchedLanguage) return;
+		setSelectedLanguage(matchedLanguage.code);
+	};
+
+	return (
+		<BaseView
+			ref={containerRef}
+			className="flex h-full flex-col justify-between"
+		>
+			<PropertyGroup title="Language">
+				<Select
+					value={selectedLanguage}
+					onValueChange={(value) => handleLanguageChange({ value })}
+				>
+					<SelectTrigger className="bg-panel-accent h-8 w-full text-xs">
+						<SelectValue placeholder="Select a language" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="auto">Auto detect</SelectItem>
+						{TRANSCRIPTION_LANGUAGES.map((language) => (
+							<SelectItem key={language.code} value={language.code}>
+								{language.name}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</PropertyGroup>
+
+			<div className="flex flex-col gap-4">
+				{error && (
+					<div className="bg-destructive/10 border-destructive/20 rounded-md border p-3">
+						<p className="text-destructive text-sm">{error}</p>
+					</div>
+				)}
+
+				<Button
+					className="w-full"
+					onClick={handleGenerateTranscript}
+					disabled={isProcessing}
+				>
+					{isProcessing && <Spinner className="mr-1" />}
+					{isProcessing ? processingStep : "Generate transcript"}
+				</Button>
+			</div>
+		</BaseView>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/media.tsx b/apps/web/src/components/editor/panels/assets/views/media.tsx
new file mode 100644
index 00000000..76ae0064
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/media.tsx
@@ -0,0 +1,675 @@
+"use client";
+
+import Image from "next/image";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { MediaDragOverlay } from "@/components/editor/panels/assets/drag-overlay";
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
+import { Button } from "@/components/ui/button";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useEditor } from "@/hooks/use-editor";
+import { useFileUpload } from "@/hooks/use-file-upload";
+import { useRevealItem } from "@/hooks/use-reveal-item";
+import { processMediaAssets } from "@/lib/media/processing";
+import {
+	buildImageElement,
+	buildUploadAudioElement,
+	buildVideoElement,
+} from "@/lib/timeline/element-utils";
+import { useAssetsPanelStore } from "@/stores/assets-panel-store";
+import type { MediaAsset } from "@/types/assets";
+import type { CreateTimelineElement } from "@/types/timeline";
+import { cn } from "@/utils/ui";
+import {
+	CloudUploadIcon,
+	GridViewIcon,
+	LeftToRightListDashIcon,
+	SortingOneNineIcon,
+	Image02Icon,
+	MusicNote03Icon,
+	Video01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
+
+export function MediaView() {
+	const editor = useEditor();
+	const mediaFiles = editor.media.getAssets();
+	const activeProject = editor.project.getActive();
+
+	const { mediaViewMode, setMediaViewMode, highlightMediaId, clearHighlight } =
+		useAssetsPanelStore();
+	const { highlightedId, registerElement } = useRevealItem(
+		highlightMediaId,
+		clearHighlight,
+	);
+
+	const [isProcessing, setIsProcessing] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">(
+		"name",
+	);
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+
+	const processFiles = async ({ files }: { files: FileList }) => {
+		if (!files || files.length === 0) return;
+		if (!activeProject) {
+			toast.error("No active project");
+			return;
+		}
+
+		setIsProcessing(true);
+		setProgress(0);
+		try {
+			const processedAssets = await processMediaAssets({
+				files,
+				onProgress: (progress: { progress: number }) =>
+					setProgress(progress.progress),
+			});
+			for (const asset of processedAssets) {
+				await editor.media.addMediaAsset({
+					projectId: activeProject.metadata.id,
+					asset,
+				});
+			}
+		} catch (error) {
+			console.error("Error processing files:", error);
+			toast.error("Failed to process files");
+		} finally {
+			setIsProcessing(false);
+			setProgress(0);
+		}
+	};
+
+	const { isDragOver, dragProps, openFilePicker, fileInputProps } =
+		useFileUpload({
+			accept: "image/*,video/*,audio/*",
+			multiple: true,
+			onFilesSelected: (files) => processFiles({ files }),
+		});
+
+	const handleRemove = async ({
+		event,
+		id,
+	}: {
+		event: React.MouseEvent;
+		id: string;
+	}) => {
+		event.stopPropagation();
+
+		if (!activeProject) {
+			toast.error("No active project");
+			return;
+		}
+
+		await editor.media.removeMediaAsset({
+			projectId: activeProject.metadata.id,
+			id,
+		});
+	};
+
+	const addElementAtTime = ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}): boolean => {
+		const element = createElementFromMedia({ asset, startTime });
+		editor.timeline.insertElement({
+			element,
+			placement: { mode: "auto" },
+		});
+		return true;
+	};
+
+	const filteredMediaItems = useMemo(() => {
+		const filtered = mediaFiles.filter((item) => !item.ephemeral);
+
+		filtered.sort((a, b) => {
+			let valueA: string | number;
+			let valueB: string | number;
+
+			switch (sortBy) {
+				case "name":
+					valueA = a.name.toLowerCase();
+					valueB = b.name.toLowerCase();
+					break;
+				case "type":
+					valueA = a.type;
+					valueB = b.type;
+					break;
+				case "duration":
+					valueA = a.duration || 0;
+					valueB = b.duration || 0;
+					break;
+				case "size":
+					valueA = a.file.size;
+					valueB = b.file.size;
+					break;
+				default:
+					return 0;
+			}
+
+			if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
+			if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
+			return 0;
+		});
+
+		return filtered;
+	}, [mediaFiles, sortBy, sortOrder]);
+
+	const previewComponents = useMemo(() => {
+		const previews = new Map<string, React.ReactNode>();
+
+		filteredMediaItems.forEach((item) => {
+			previews.set(item.id, <MediaPreview item={item} />);
+			previews.set(
+				`compact-${item.id}`,
+				<MediaPreview item={item} variant="compact" />,
+			);
+		});
+
+		return previews;
+	}, [filteredMediaItems]);
+
+	const renderPreview = (item: MediaAsset) => previewComponents.get(item.id);
+	const renderCompactPreview = (item: MediaAsset) =>
+		previewComponents.get(`compact-${item.id}`);
+
+	return (
+		<>
+			<input {...fileInputProps} />
+
+			<div
+				className={`relative flex h-full flex-col gap-1 ${isDragOver ? "bg-accent/30" : ""}`}
+				{...dragProps}
+			>
+				<div className="bg-panel py-2 px-4 flex items-center justify-between border-b">
+					<span className="text-muted-foreground text-sm">Assets</span>
+					<div className="flex items-center gap-0">
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										size="icon"
+										variant="text"
+										onClick={() =>
+											setMediaViewMode(
+												mediaViewMode === "grid" ? "list" : "grid",
+											)
+										}
+										disabled={isProcessing}
+										className="items-center justify-center"
+									>
+										{mediaViewMode === "grid" ? (
+											<HugeiconsIcon icon={LeftToRightListDashIcon} />
+										) : (
+											<HugeiconsIcon icon={GridViewIcon} />
+										)}
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p>
+										{mediaViewMode === "grid"
+											? "Switch to list view"
+											: "Switch to grid view"}
+									</p>
+								</TooltipContent>
+								<Tooltip>
+									<DropdownMenu>
+										<TooltipTrigger asChild>
+											<DropdownMenuTrigger asChild>
+												<Button
+													size="icon"
+													variant="text"
+													disabled={isProcessing}
+													className="items-center justify-center"
+												>
+													<HugeiconsIcon icon={SortingOneNineIcon} />
+												</Button>
+											</DropdownMenuTrigger>
+										</TooltipTrigger>
+										<DropdownMenuContent align="end">
+											<SortMenuItem
+												label="Name"
+												sortKey="name"
+												currentSortBy={sortBy}
+												currentSortOrder={sortOrder}
+												onSort={({ key }) => {
+													if (sortBy === key) {
+														setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+													} else {
+														setSortBy(key);
+														setSortOrder("asc");
+													}
+												}}
+											/>
+											<SortMenuItem
+												label="Type"
+												sortKey="type"
+												currentSortBy={sortBy}
+												currentSortOrder={sortOrder}
+												onSort={({ key }) => {
+													if (sortBy === key) {
+														setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+													} else {
+														setSortBy(key);
+														setSortOrder("asc");
+													}
+												}}
+											/>
+											<SortMenuItem
+												label="Duration"
+												sortKey="duration"
+												currentSortBy={sortBy}
+												currentSortOrder={sortOrder}
+												onSort={({ key }) => {
+													if (sortBy === key) {
+														setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+													} else {
+														setSortBy(key);
+														setSortOrder("asc");
+													}
+												}}
+											/>
+											<SortMenuItem
+												label="File size"
+												sortKey="size"
+												currentSortBy={sortBy}
+												currentSortOrder={sortOrder}
+												onSort={({ key }) => {
+													if (sortBy === key) {
+														setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+													} else {
+														setSortBy(key);
+														setSortOrder("asc");
+													}
+												}}
+											/>
+										</DropdownMenuContent>
+									</DropdownMenu>
+									<TooltipContent>
+										<p>
+											Sort by {sortBy} (
+											{sortOrder === "asc" ? "ascending" : "descending"})
+										</p>
+									</TooltipContent>
+								</Tooltip>
+							</Tooltip>
+						</TooltipProvider>
+						<Button
+							variant="outline"
+							onClick={openFilePicker}
+							disabled={isProcessing}
+							size="sm"
+							className="items-center justify-center gap-1.5 ml-1.5"
+						>
+							<HugeiconsIcon icon={CloudUploadIcon} />
+							Upload
+						</Button>
+					</div>
+				</div>
+
+				<div className="scrollbar-thin size-full overflow-y-auto pt-1">
+					<div className="w-full flex-1 p-3 pt-0">
+						{isDragOver || filteredMediaItems.length === 0 ? (
+							<MediaDragOverlay
+								isVisible={true}
+								isProcessing={isProcessing}
+								progress={progress}
+								onClick={openFilePicker}
+							/>
+						) : mediaViewMode === "grid" ? (
+							<GridView
+								items={filteredMediaItems}
+								renderPreview={renderPreview}
+								onRemove={handleRemove}
+								onAddToTimeline={addElementAtTime}
+								highlightedId={highlightedId}
+								registerElement={registerElement}
+							/>
+						) : (
+							<ListView
+								items={filteredMediaItems}
+								renderPreview={renderCompactPreview}
+								onRemove={handleRemove}
+								onAddToTimeline={addElementAtTime}
+								highlightedId={highlightedId}
+								registerElement={registerElement}
+							/>
+						)}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+function MediaItemWithContextMenu({
+	item,
+	children,
+	onRemove,
+}: {
+	item: MediaAsset;
+	children: React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+}) {
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem>Export clips</ContextMenuItem>
+				<ContextMenuItem
+					variant="destructive"
+					onClick={(event) => onRemove({ event, id: item.id })}
+				>
+					Delete
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+}
+
+function GridView({
+	items,
+	renderPreview,
+	onRemove,
+	onAddToTimeline,
+	highlightedId,
+	registerElement,
+}: {
+	items: MediaAsset[];
+	renderPreview: (item: MediaAsset) => React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+	onAddToTimeline: ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}) => boolean;
+	highlightedId: string | null;
+	registerElement: (id: string, element: HTMLElement | null) => void;
+}) {
+	return (
+		<div
+			className="grid gap-2"
+			style={{
+				gridTemplateColumns: "repeat(auto-fill, 160px)",
+			}}
+		>
+			{items.map((item) => (
+				<div key={item.id} ref={(el) => registerElement(item.id, el)}>
+					<MediaItemWithContextMenu item={item} onRemove={onRemove}>
+						<DraggableItem
+							name={item.name}
+							preview={renderPreview(item)}
+							dragData={{
+								id: item.id,
+								type: "media",
+								mediaType: item.type,
+								name: item.name,
+							}}
+							shouldShowPlusOnDrag={false}
+							onAddToTimeline={({ currentTime }) =>
+								onAddToTimeline({ asset: item, startTime: currentTime })
+							}
+							isRounded={false}
+							variant="card"
+							isHighlighted={highlightedId === item.id}
+						/>
+					</MediaItemWithContextMenu>
+				</div>
+			))}
+		</div>
+	);
+}
+
+function ListView({
+	items,
+	renderPreview,
+	onRemove,
+	onAddToTimeline,
+	highlightedId,
+	registerElement,
+}: {
+	items: MediaAsset[];
+	renderPreview: (item: MediaAsset) => React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+	onAddToTimeline: ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}) => boolean;
+	highlightedId: string | null;
+	registerElement: (id: string, element: HTMLElement | null) => void;
+}) {
+	return (
+		<div className="space-y-1">
+			{items.map((item) => (
+				<div key={item.id} ref={(el) => registerElement(item.id, el)}>
+					<MediaItemWithContextMenu item={item} onRemove={onRemove}>
+						<DraggableItem
+							name={item.name}
+							preview={renderPreview(item)}
+							dragData={{
+								id: item.id,
+								type: "media",
+								mediaType: item.type,
+								name: item.name,
+							}}
+							shouldShowPlusOnDrag={false}
+							onAddToTimeline={({ currentTime }) =>
+								onAddToTimeline({ asset: item, startTime: currentTime })
+							}
+							variant="compact"
+							isHighlighted={highlightedId === item.id}
+						/>
+					</MediaItemWithContextMenu>
+				</div>
+			))}
+		</div>
+	);
+}
+
+const formatDuration = ({ duration }: { duration: number }) => {
+	const min = Math.floor(duration / 60);
+	const sec = Math.floor(duration % 60);
+	return `${min}:${sec.toString().padStart(2, "0")}`;
+};
+
+function MediaDurationBadge({ duration }: { duration?: number }) {
+	if (!duration) return null;
+
+	return (
+		<div className="absolute right-1 bottom-1 rounded bg-black/70 px-1 text-xs text-white">
+			{formatDuration({ duration })}
+		</div>
+	);
+}
+
+function MediaDurationLabel({ duration }: { duration?: number }) {
+	if (!duration) return null;
+
+	return (
+		<span className="text-xs opacity-70">{formatDuration({ duration })}</span>
+	);
+}
+
+function MediaTypePlaceholder({
+	icon,
+	label,
+	duration,
+	variant,
+}: {
+	icon: IconSvgElement;
+	label: string;
+	duration?: number;
+	variant: "muted" | "bordered";
+}) {
+	const iconClassName = cn("size-6", variant === "bordered" && "mb-1");
+
+	return (
+		<div
+			className={cn(
+				"text-muted-foreground flex size-full flex-col items-center justify-center rounded",
+				variant === "muted" ? "bg-muted/30" : "border",
+			)}
+		>
+			<HugeiconsIcon icon={icon} className={iconClassName} />
+			<span className="text-xs">{label}</span>
+			<MediaDurationLabel duration={duration} />
+		</div>
+	);
+}
+
+function MediaPreview({
+	item,
+	variant = "grid",
+}: {
+	item: MediaAsset;
+	variant?: "grid" | "compact";
+}) {
+	const shouldShowDurationBadge = variant === "grid";
+
+	if (item.type === "image") {
+		return (
+			<div className="relative flex size-full items-center justify-center">
+				<Image
+					src={item.url ?? ""}
+					alt={item.name}
+					fill
+					sizes="100vw"
+					className="object-cover"
+					loading="lazy"
+					unoptimized
+				/>
+			</div>
+		);
+	}
+
+	if (item.type === "video") {
+		if (item.thumbnailUrl) {
+			return (
+				<div className="relative size-full">
+					<Image
+						src={item.thumbnailUrl}
+						alt={item.name}
+						fill
+						sizes="100vw"
+						className="rounded object-cover"
+						loading="lazy"
+						unoptimized
+					/>
+					{shouldShowDurationBadge ? (
+						<MediaDurationBadge duration={item.duration} />
+					) : null}
+				</div>
+			);
+		}
+
+		return (
+			<MediaTypePlaceholder
+				icon={Video01Icon}
+				label="Video"
+				duration={item.duration}
+				variant="muted"
+			/>
+		);
+	}
+
+	if (item.type === "audio") {
+		return (
+			<MediaTypePlaceholder
+				icon={MusicNote03Icon}
+				label="Audio"
+				duration={item.duration}
+				variant="bordered"
+			/>
+		);
+	}
+
+	return (
+		<MediaTypePlaceholder icon={Image02Icon} label="Unknown" variant="muted" />
+	);
+}
+
+function SortMenuItem({
+	label,
+	sortKey,
+	currentSortBy,
+	currentSortOrder,
+	onSort,
+}: {
+	label: string;
+	sortKey: "name" | "type" | "duration" | "size";
+	currentSortBy: string;
+	currentSortOrder: "asc" | "desc";
+	onSort: ({ key }: { key: "name" | "type" | "duration" | "size" }) => void;
+}) {
+	const isActive = currentSortBy === sortKey;
+	const arrow = isActive ? (currentSortOrder === "asc" ? "↑" : "↓") : "";
+
+	return (
+		<DropdownMenuItem onClick={() => onSort({ key: sortKey })}>
+			{label} {arrow}
+		</DropdownMenuItem>
+	);
+}
+
+function createElementFromMedia({
+	asset,
+	startTime,
+}: {
+	asset: MediaAsset;
+	startTime: number;
+}): CreateTimelineElement {
+	const duration =
+		asset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+
+	switch (asset.type) {
+		case "video":
+			return buildVideoElement({
+				mediaId: asset.id,
+				name: asset.name,
+				duration,
+				startTime,
+			});
+		case "image":
+			return buildImageElement({
+				mediaId: asset.id,
+				name: asset.name,
+				duration,
+				startTime,
+			});
+		case "audio":
+			return buildUploadAudioElement({
+				mediaId: asset.id,
+				name: asset.name,
+				duration,
+				startTime,
+			});
+		default:
+			throw new Error(`Unsupported media type: ${asset.type}`);
+	}
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/settings.tsx b/apps/web/src/components/editor/panels/assets/views/settings.tsx
new file mode 100644
index 00000000..b8c54510
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/settings.tsx
@@ -0,0 +1,394 @@
+"use client";
+
+import Image from "next/image";
+import { memo, useCallback, useMemo } from "react";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	BLUR_INTENSITY_PRESETS,
+	DEFAULT_BLUR_INTENSITY,
+	DEFAULT_COLOR,
+	FPS_PRESETS,
+} from "@/constants/project-constants";
+import { patternCraftGradients } from "@/data/colors/pattern-craft";
+import { colors } from "@/data/colors/solid";
+import { syntaxUIGradients } from "@/data/colors/syntax-ui";
+import { useEditor } from "@/hooks/use-editor";
+import { useEditorStore } from "@/stores/editor-store";
+import type { TProject } from "@/types/project";
+import { dimensionToAspectRatio } from "@/utils/geometry";
+import { cn } from "@/utils/ui";
+import {
+	PropertyGroup,
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
+} from "@/components/editor/panels/properties/property-item";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { DropperIcon } from "@hugeicons/core-free-icons";
+
+export function SettingsView() {
+	return <ProjectSettingsTabs />;
+}
+
+function ProjectSettingsTabs() {
+	return (
+		<BaseView
+			defaultTab="project-info"
+			tabs={[
+				{
+					value: "project-info",
+					label: "Project info",
+					content: (
+						<div className="p-5">
+							<ProjectInfoView />
+						</div>
+					),
+				},
+				{
+					value: "background",
+					label: "Background",
+					content: (
+						<div className="flex h-full flex-col justify-between">
+							<div className="flex-1 p-5">
+								<BackgroundView />
+							</div>
+							{/* <div className="bg-panel/85 sticky -bottom-0 flex flex-col backdrop-blur-lg">
+                <Separator />
+                <Button className="text-muted-foreground hover:text-foreground/85 h-auto w-fit !bg-transparent p-5 py-4 text-xs shadow-none">
+                  Custom background
+                  <PlusIcon />
+                </Button>
+              </div> */}
+
+							{/* another ui */}
+							{/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0">
+                <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full">
+                  <span className="text-sm">Custom</span>
+                  <PlusIcon className="" />
+                </Button>
+              </div> */}
+						</div>
+					),
+				},
+			]}
+			className="flex h-full flex-col justify-between p-0"
+		/>
+	);
+}
+
+function getCurrentCanvasSize({ activeProject }: { activeProject: TProject }) {
+	const { canvasSize } = activeProject.settings;
+
+	return {
+		width: canvasSize.width,
+		height: canvasSize.height,
+	};
+}
+
+function ProjectInfoView() {
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const { canvasPresets } = useEditorStore();
+
+	const findPresetIndexByAspectRatio = ({
+		presets,
+		targetAspectRatio,
+	}: {
+		presets: Array<{ width: number; height: number }>;
+		targetAspectRatio: string;
+	}) => {
+		for (let index = 0; index < presets.length; index++) {
+			const preset = presets[index];
+			const presetAspectRatio = dimensionToAspectRatio({
+				width: preset.width,
+				height: preset.height,
+			});
+			if (presetAspectRatio === targetAspectRatio) {
+				return index;
+			}
+		}
+		return -1;
+	};
+
+	const currentCanvasSize = getCurrentCanvasSize({ activeProject });
+	const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize);
+	const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null;
+	const presetIndex = findPresetIndexByAspectRatio({
+		presets: canvasPresets,
+		targetAspectRatio: currentAspectRatio,
+	});
+	const originalPresetValue = "original";
+	const selectedPresetValue =
+		presetIndex !== -1 ? presetIndex.toString() : originalPresetValue;
+
+	const handleAspectRatioChange = ({ value }: { value: string }) => {
+		if (value === originalPresetValue) {
+			const canvasSize = originalCanvasSize ?? currentCanvasSize;
+			editor.project.updateSettings({
+				settings: { canvasSize },
+			});
+			return;
+		}
+		const index = parseInt(value, 10);
+		const preset = canvasPresets[index];
+		if (preset) {
+			editor.project.updateSettings({ settings: { canvasSize: preset } });
+		}
+	};
+
+	const handleFpsChange = (value: string) => {
+		const fps = parseFloat(value);
+		editor.project.updateSettings({ settings: { fps } });
+	};
+
+	return (
+		<div className="flex flex-col gap-4">
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Name</PropertyItemLabel>
+				<PropertyItemValue>{activeProject.metadata.name}</PropertyItemValue>
+			</PropertyItem>
+
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Aspect ratio</PropertyItemLabel>
+				<PropertyItemValue>
+					<Select
+						value={selectedPresetValue}
+						onValueChange={(value) => handleAspectRatioChange({ value })}
+					>
+						<SelectTrigger className="bg-panel-accent">
+							<SelectValue placeholder="Select an aspect ratio" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value={originalPresetValue}>Original</SelectItem>
+							{canvasPresets.map((preset, index) => {
+								const label = dimensionToAspectRatio({
+									width: preset.width,
+									height: preset.height,
+								});
+								return (
+									<SelectItem key={label} value={index.toString()}>
+										{label}
+									</SelectItem>
+								);
+							})}
+						</SelectContent>
+					</Select>
+				</PropertyItemValue>
+			</PropertyItem>
+
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Frame rate</PropertyItemLabel>
+				<PropertyItemValue>
+					<Select
+						value={activeProject.settings.fps.toString()}
+						onValueChange={handleFpsChange}
+					>
+						<SelectTrigger className="bg-panel-accent">
+							<SelectValue placeholder="Select a frame rate" />
+						</SelectTrigger>
+						<SelectContent>
+							{FPS_PRESETS.map((preset) => (
+								<SelectItem key={preset.value} value={preset.value}>
+									{preset.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</PropertyItemValue>
+			</PropertyItem>
+		</div>
+	);
+}
+
+const BlurPreview = memo(
+	({
+		blur,
+		isSelected,
+		onSelect,
+	}: {
+		blur: { label: string; value: number };
+		isSelected: boolean;
+		onSelect: () => void;
+	}) => (
+		<button
+			className={cn(
+				"border-foreground/15 hover:border-primary relative aspect-square w-full cursor-pointer overflow-hidden rounded-sm border",
+				isSelected && "border-primary border-2",
+			)}
+			onClick={onSelect}
+			type="button"
+			aria-label={`Select ${blur.label} blur`}
+		>
+			<Image
+				src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+				alt={`Blur preview ${blur.label}`}
+				fill
+				className="object-cover"
+				style={{ filter: `blur(${blur.value}px)` }}
+				loading="eager"
+			/>
+			<div className="absolute right-1 bottom-1 left-1 text-center">
+				<span className="rounded bg-black/50 px-1 text-xs text-white">
+					{blur.label}
+				</span>
+			</div>
+		</button>
+	),
+);
+
+BlurPreview.displayName = "BlurPreview";
+
+const BackgroundPreviews = memo(
+	({
+		backgrounds,
+		currentBackgroundColor,
+		isColorBackground,
+		handleColorSelect,
+		useBackgroundColor = false,
+	}: {
+		backgrounds: string[];
+		currentBackgroundColor: string;
+		isColorBackground: boolean;
+		handleColorSelect: ({ bg }: { bg: string }) => void;
+		useBackgroundColor?: boolean;
+	}) => {
+		return useMemo(
+			() =>
+				backgrounds.map((bg, index) => (
+					<button
+						key={`${index}-${bg}`}
+						className={cn(
+							"border-foreground/15 hover:border-primary aspect-square w-full cursor-pointer rounded-sm border",
+							isColorBackground &&
+								bg === currentBackgroundColor &&
+								"border-primary border-2",
+						)}
+						style={
+							useBackgroundColor
+								? { backgroundColor: bg }
+								: {
+										background: bg,
+										backgroundSize: "cover",
+										backgroundPosition: "center",
+										backgroundRepeat: "no-repeat",
+									}
+						}
+						onClick={() => handleColorSelect({ bg })}
+						type="button"
+						aria-label={`Select background ${useBackgroundColor ? bg : index + 1}`}
+					/>
+				)),
+			[
+				backgrounds,
+				isColorBackground,
+				currentBackgroundColor,
+				handleColorSelect,
+				useBackgroundColor,
+			],
+		);
+	},
+);
+
+BackgroundPreviews.displayName = "BackgroundPreviews";
+
+function BackgroundView() {
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const blurLevels = useMemo(() => BLUR_INTENSITY_PRESETS, []);
+
+	const handleBlurSelect = useCallback(
+		async ({ blurIntensity }: { blurIntensity: number }) => {
+			await editor.project.updateSettings({
+				settings: { background: { type: "blur", blurIntensity } },
+			});
+		},
+		[editor.project],
+	);
+
+	const handleColorSelect = useCallback(
+		async ({ color }: { color: string }) => {
+			await editor.project.updateSettings({
+				settings: { background: { type: "color", color } },
+			});
+		},
+		[editor.project],
+	);
+
+	const currentBlurIntensity =
+		activeProject.settings.background.type === "blur"
+			? activeProject.settings.background.blurIntensity
+			: DEFAULT_BLUR_INTENSITY;
+
+	const currentBackgroundColor =
+		activeProject.settings.background.type === "color"
+			? activeProject.settings.background.color
+			: DEFAULT_COLOR;
+
+	const isBlurBackground = activeProject.settings.background.type === "blur";
+	const isColorBackground = activeProject.settings.background.type === "color";
+
+	const blurPreviews = useMemo(
+		() =>
+			blurLevels.map((blur) => (
+				<BlurPreview
+					key={blur.value}
+					blur={blur}
+					isSelected={isBlurBackground && currentBlurIntensity === blur.value}
+					onSelect={() => handleBlurSelect({ blurIntensity: blur.value })}
+				/>
+			)),
+		[blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect],
+	);
+
+	return (
+		<div className="flex h-full flex-col gap-4">
+			<PropertyGroup title="Blur" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">{blurPreviews}</div>
+			</PropertyGroup>
+
+			<PropertyGroup title="Colors" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<div className="border-foreground/15 hover:border-primary flex aspect-square w-full cursor-pointer items-center justify-center rounded-sm border">
+						<HugeiconsIcon icon={DropperIcon} className="size-4" />
+					</div>
+					<BackgroundPreviews
+						backgrounds={colors}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+						useBackgroundColor={true}
+					/>
+				</div>
+			</PropertyGroup>
+
+			<PropertyGroup title="Pattern craft" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<BackgroundPreviews
+						backgrounds={patternCraftGradients}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+					/>
+				</div>
+			</PropertyGroup>
+
+			<PropertyGroup title="Syntax UI" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<BackgroundPreviews
+						backgrounds={syntaxUIGradients}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+					/>
+				</div>
+			</PropertyGroup>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/sounds.tsx b/apps/web/src/components/editor/panels/assets/views/sounds.tsx
new file mode 100644
index 00000000..84a5d0bf
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/sounds.tsx
@@ -0,0 +1,574 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+import { useSoundSearch } from "@/hooks/use-sound-search";
+import { useSoundsStore } from "@/stores/sounds-store";
+import type { SavedSound, SoundEffect } from "@/types/sounds";
+import { cn } from "@/utils/ui";
+import {
+	FavouriteIcon,
+	FilterMailIcon,
+	PauseIcon,
+	PlayIcon,
+	PlusSignIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+
+export function SoundsView() {
+	return (
+		<div className="flex h-full flex-col">
+			<Tabs defaultValue="sound-effects" className="flex h-full flex-col">
+				<div className="px-3 pt-4 pb-0">
+					<TabsList>
+						<TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
+						<TabsTrigger value="songs">Songs</TabsTrigger>
+						<TabsTrigger value="saved">Saved</TabsTrigger>
+					</TabsList>
+				</div>
+				<Separator className="my-4" />
+				<TabsContent
+					value="sound-effects"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SoundEffectsView />
+				</TabsContent>
+				<TabsContent
+					value="saved"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SavedSoundsView />
+				</TabsContent>
+				<TabsContent
+					value="songs"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SongsView />
+				</TabsContent>
+			</Tabs>
+		</div>
+	);
+}
+
+function SoundEffectsView() {
+	const {
+		topSoundEffects,
+		isLoading,
+		searchQuery,
+		setSearchQuery,
+		scrollPosition,
+		setScrollPosition,
+		loadSavedSounds,
+		showCommercialOnly,
+		toggleCommercialFilter,
+		hasLoaded,
+		setTopSoundEffects,
+		setLoading,
+		setError,
+		setHasLoaded,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+	} = useSoundsStore();
+	const {
+		results: searchResults,
+		isLoading: isSearching,
+		loadMore,
+		hasNextPage,
+		isLoadingMore,
+	} = useSoundSearch({
+		query: searchQuery,
+		commercialOnly: showCommercialOnly,
+	});
+
+	const [playingId, setPlayingId] = useState<number | null>(null);
+	const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+		null,
+	);
+
+	const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+		onLoadMore: loadMore,
+		hasMore: hasNextPage,
+		isLoading: isLoadingMore || isSearching,
+	});
+
+	useEffect(() => {
+		loadSavedSounds();
+	}, [loadSavedSounds]);
+
+	useEffect(() => {
+		if (hasLoaded) {
+			return;
+		}
+
+		let shouldIgnore = false;
+
+		const fetchTopSounds = async () => {
+			try {
+				if (!shouldIgnore) {
+					setLoading({ loading: true });
+					setError({ error: null });
+				}
+
+				const response = await fetch(
+					"/api/sounds/search?page_size=50&sort=downloads",
+				);
+
+				if (!shouldIgnore) {
+					if (!response.ok) {
+						throw new Error(`Failed to fetch: ${response.status}`);
+					}
+
+					const data = await response.json();
+					setTopSoundEffects({ sounds: data.results });
+					setHasLoaded({ loaded: true });
+
+					setCurrentPage({ page: 1 });
+					setHasNextPage({ hasNext: !!data.next });
+					setTotalCount({ count: data.count });
+				}
+			} catch (error) {
+				if (!shouldIgnore) {
+					console.error("Failed to fetch top sounds:", error);
+					setError({
+						error:
+							error instanceof Error ? error.message : "Failed to load sounds",
+					});
+				}
+			} finally {
+				if (!shouldIgnore) {
+					setLoading({ loading: false });
+				}
+			}
+		};
+
+		const timeoutId = setTimeout(fetchTopSounds, 100, {});
+
+		return () => {
+			shouldIgnore = true;
+			clearTimeout(timeoutId);
+		};
+	}, [
+		hasLoaded,
+		setTopSoundEffects,
+		setLoading,
+		setError,
+		setHasLoaded,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+	]);
+
+	useEffect(() => {
+		if (!scrollAreaRef.current || scrollPosition <= 0) {
+			return;
+		}
+
+		const restoreScrollPosition = () => {
+			scrollAreaRef.current?.scrollTo({ top: scrollPosition });
+		};
+
+		const timeoutId = setTimeout(restoreScrollPosition, 100, {});
+
+		return () => clearTimeout(timeoutId);
+	}, [scrollPosition, scrollAreaRef]);
+
+	const handleScrollWithPosition = ({
+		currentTarget,
+	}: React.UIEvent<HTMLDivElement>) => {
+		const { scrollTop } = currentTarget;
+		setScrollPosition({ position: scrollTop });
+		handleScroll({ currentTarget } as React.UIEvent<HTMLDivElement>);
+	};
+
+	const displayedSounds = searchQuery ? searchResults : topSoundEffects;
+
+	const playSound = ({ sound }: { sound: SoundEffect }) => {
+		if (playingId === sound.id) {
+			audioElement?.pause();
+			setPlayingId(null);
+			return;
+		}
+
+		audioElement?.pause();
+
+		if (sound.previewUrl) {
+			const audio = new Audio(sound.previewUrl);
+			audio.addEventListener("ended", () => {
+				setPlayingId(null);
+			});
+			audio.addEventListener("error", () => {
+				setPlayingId(null);
+			});
+			audio.play().catch((error) => {
+				console.error("Failed to play sound preview:", error);
+				setPlayingId(null);
+			});
+
+			setAudioElement(audio);
+			setPlayingId(sound.id);
+		}
+	};
+
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5">
+			<div className="flex items-center gap-3">
+				<Input
+					placeholder="Search sound effects"
+					className="bg-panel-accent w-full"
+					containerClassName="w-full"
+					value={searchQuery}
+					onChange={({ currentTarget }) =>
+						setSearchQuery({ query: currentTarget.value })
+					}
+					showClearIcon
+					onClear={() => setSearchQuery({ query: "" })}
+				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button
+							variant="text"
+							size="icon"
+							className={cn(showCommercialOnly && "text-primary")}
+						>
+							<HugeiconsIcon icon={FilterMailIcon} />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-56">
+						<DropdownMenuCheckboxItem
+							checked={showCommercialOnly}
+							onCheckedChange={() => toggleCommercialFilter()}
+						>
+							Show only commercially licensed
+						</DropdownMenuCheckboxItem>
+						<div className="text-muted-foreground px-2 py-1.5 text-xs">
+							{showCommercialOnly
+								? "Only showing sounds licensed for commercial use"
+								: "Showing all sounds regardless of license"}
+						</div>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea
+					className="h-full flex-1"
+					ref={scrollAreaRef}
+					onScrollCapture={handleScrollWithPosition}
+				>
+					<div className="flex flex-col gap-4">
+						{isLoading && !searchQuery && (
+							<div className="text-muted-foreground text-sm">
+								Loading sounds...
+							</div>
+						)}
+						{isSearching && searchQuery && (
+							<div className="text-muted-foreground text-sm">Searching...</div>
+						)}
+						{displayedSounds.map((sound) => (
+							<AudioItem
+								key={sound.id}
+								sound={sound}
+								isPlaying={playingId === sound.id}
+								onPlay={playSound}
+							/>
+						))}
+						{!isLoading && !isSearching && displayedSounds.length === 0 && (
+							<div className="text-muted-foreground text-sm">
+								{searchQuery ? "No sounds found" : "No sounds available"}
+							</div>
+						)}
+						{isLoadingMore && (
+							<div className="text-muted-foreground py-4 text-center text-sm">
+								Loading more sounds...
+							</div>
+						)}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
+}
+
+function SavedSoundsView() {
+	const {
+		savedSounds,
+		isLoadingSavedSounds,
+		savedSoundsError,
+		loadSavedSounds,
+		clearSavedSounds,
+	} = useSoundsStore();
+
+	const [playingId, setPlayingId] = useState<number | null>(null);
+	const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+		null,
+	);
+
+	const [showClearDialog, setShowClearDialog] = useState(false);
+
+	useEffect(() => {
+		loadSavedSounds();
+	}, [loadSavedSounds]);
+
+	const playSound = ({ sound }: { sound: SoundEffect }) => {
+		if (playingId === sound.id) {
+			audioElement?.pause();
+			setPlayingId(null);
+			return;
+		}
+
+		audioElement?.pause();
+
+		if (sound.previewUrl) {
+			const audio = new Audio(sound.previewUrl);
+			audio.addEventListener("ended", () => {
+				setPlayingId(null);
+			});
+			audio.addEventListener("error", () => {
+				setPlayingId(null);
+			});
+			audio.play().catch((error) => {
+				console.error("Failed to play sound preview:", error);
+				setPlayingId(null);
+			});
+
+			setAudioElement(audio);
+			setPlayingId(sound.id);
+		}
+	};
+
+	const convertToSoundEffect = ({
+		savedSound,
+	}: {
+		savedSound: SavedSound;
+	}): SoundEffect => ({
+		id: savedSound.id,
+		name: savedSound.name,
+		description: "",
+		url: "",
+		previewUrl: savedSound.previewUrl,
+		downloadUrl: savedSound.downloadUrl,
+		duration: savedSound.duration,
+		filesize: 0,
+		type: "audio",
+		channels: 0,
+		bitrate: 0,
+		bitdepth: 0,
+		samplerate: 0,
+		username: savedSound.username,
+		tags: savedSound.tags,
+		license: savedSound.license,
+		created: savedSound.savedAt,
+		downloads: 0,
+		rating: 0,
+		ratingCount: 0,
+	});
+
+	if (isLoadingSavedSounds) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="text-muted-foreground text-sm">
+					Loading saved sounds...
+				</div>
+			</div>
+		);
+	}
+
+	if (savedSoundsError) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="text-destructive text-sm">
+					Error: {savedSoundsError}
+				</div>
+			</div>
+		);
+	}
+
+	if (savedSounds.length === 0) {
+		return (
+			<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+				<HugeiconsIcon
+					icon={FavouriteIcon}
+					className="text-muted-foreground size-10"
+				/>
+				<div className="flex flex-col gap-2 text-center">
+					<p className="text-lg font-medium">No saved sounds</p>
+					<p className="text-muted-foreground text-sm text-balance">
+						Click the heart icon on any sound to save it here
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5">
+			<div className="flex items-center justify-between">
+				<p className="text-muted-foreground text-sm">
+					{savedSounds.length} saved{" "}
+					{savedSounds.length === 1 ? "sound" : "sounds"}
+				</p>
+				<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
+					<DialogTrigger asChild>
+						<Button
+							variant="text"
+							size="sm"
+							className="text-muted-foreground hover:text-destructive h-auto !opacity-100"
+						>
+							Clear all
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>Clear all saved sounds?</DialogTitle>
+							<DialogDescription>
+								This will permanently remove all {savedSounds.length} saved
+								sounds from your collection. This action cannot be undone.
+							</DialogDescription>
+						</DialogHeader>
+						<DialogFooter>
+							<Button variant="text" onClick={() => setShowClearDialog(false)}>
+								Cancel
+							</Button>
+							<Button
+								variant="destructive"
+								onClick={async ({
+									stopPropagation,
+								}: React.MouseEvent<HTMLButtonElement>) => {
+									stopPropagation();
+									await clearSavedSounds();
+									setShowClearDialog(false);
+								}}
+							>
+								Clear all sounds
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			</div>
+
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea className="h-full flex-1">
+					<div className="flex flex-col gap-4">
+						{savedSounds.map((sound) => (
+							<AudioItem
+								key={sound.id}
+								sound={convertToSoundEffect({ savedSound: sound })}
+								isPlaying={playingId === sound.id}
+								onPlay={playSound}
+							/>
+						))}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
+}
+
+function SongsView() {
+	return <div>Songs</div>;
+}
+
+interface AudioItemProps {
+	sound: SoundEffect;
+	isPlaying: boolean;
+	onPlay: ({ sound }: { sound: SoundEffect }) => void;
+}
+
+function AudioItem({ sound, isPlaying, onPlay }: AudioItemProps) {
+	const { addSoundToTimeline, isSoundSaved, toggleSavedSound } =
+		useSoundsStore();
+	const isSaved = isSoundSaved({ soundId: sound.id });
+
+	const handleClick = () => {
+		onPlay({ sound });
+	};
+
+	const handleSaveClick = ({
+		stopPropagation,
+	}: React.MouseEvent<HTMLButtonElement>) => {
+		stopPropagation();
+		toggleSavedSound({ soundEffect: sound });
+	};
+
+	const handleAddToTimeline = async ({
+		stopPropagation,
+	}: React.MouseEvent<HTMLButtonElement>) => {
+		stopPropagation();
+		await addSoundToTimeline({ sound });
+	};
+
+	return (
+		<div className="group flex items-center gap-3 opacity-100 hover:opacity-75">
+			<button
+				type="button"
+				className="flex min-w-0 flex-1 items-center gap-3 text-left"
+				onClick={handleClick}
+			>
+				<div className="bg-accent relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-md">
+					<div className="from-primary/20 absolute inset-0 bg-gradient-to-br to-transparent" />
+					{isPlaying ? (
+						<HugeiconsIcon icon={PauseIcon} className="size-5" />
+					) : (
+						<HugeiconsIcon icon={PlayIcon} className="size-5" />
+					)}
+				</div>
+
+				<div className="min-w-0 flex-1 overflow-hidden">
+					<p className="truncate text-sm font-medium">{sound.name}</p>
+					<span className="text-muted-foreground block truncate text-xs">
+						{sound.username}
+					</span>
+				</div>
+			</button>
+
+			<div className="flex items-center gap-3 pr-2">
+				<Button
+					variant="text"
+					size="icon"
+					className="text-muted-foreground hover:text-foreground w-auto !opacity-100"
+					onClick={handleAddToTimeline}
+					title="Add to timeline"
+				>
+					<HugeiconsIcon icon={PlusSignIcon} />
+				</Button>
+				<Button
+					variant="text"
+					size="icon"
+					className={`hover:text-foreground w-auto !opacity-100 ${
+						isSaved
+							? "text-red-500 hover:text-red-600"
+							: "text-muted-foreground"
+					}`}
+					onClick={handleSaveClick}
+					title={isSaved ? "Remove from saved" : "Save sound"}
+				>
+					<HugeiconsIcon
+						icon={FavouriteIcon}
+						className={`${isSaved ? "fill-current" : ""}`}
+					/>
+				</Button>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/stickers.tsx b/apps/web/src/components/editor/panels/assets/views/stickers.tsx
new file mode 100644
index 00000000..6b48e775
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/stickers.tsx
@@ -0,0 +1,615 @@
+"use client";
+
+import Image from "next/image";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
+import { Button } from "@/components/ui/button";
+import { InputWithBack } from "@/components/ui/input-with-back";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { STICKER_CATEGORIES } from "@/constants/stickers-constants";
+import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+import {
+	buildIconSvgUrl,
+	getIconSvgUrl,
+	ICONIFY_HOSTS,
+	POPULAR_COLLECTIONS,
+} from "@/lib/iconify-api";
+import { useStickersStore } from "@/stores/stickers-store";
+import type { StickerCategory } from "@/types/stickers";
+import { cn } from "@/utils/ui";
+import {
+	ArrowRightIcon,
+	HappyIcon,
+	ClockIcon,
+	LayoutGridIcon,
+	MultiplicationSignIcon,
+	SparklesIcon,
+	HashtagIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Spinner } from "@/components/ui/spinner";
+
+function isStickerCategory(value: string): value is StickerCategory {
+	return STICKER_CATEGORIES.includes(value as StickerCategory);
+}
+
+export function StickersView() {
+	const { selectedCategory, setSelectedCategory } = useStickersStore();
+
+	return (
+		<BaseView
+			value={selectedCategory}
+			onValueChange={(v) => {
+				if (isStickerCategory(v)) {
+					setSelectedCategory({ category: v });
+				}
+			}}
+			tabs={[
+				{
+					value: "all",
+					label: "All",
+					icon: <HugeiconsIcon icon={LayoutGridIcon} className="size-3" />,
+					content: <StickersContentView category="all" />,
+				},
+				{
+					value: "general",
+					label: "Icons",
+					icon: <HugeiconsIcon icon={SparklesIcon} className="size-3" />,
+					content: <StickersContentView category="general" />,
+				},
+				{
+					value: "brands",
+					label: "Brands",
+					icon: <HugeiconsIcon icon={HashtagIcon} className="size-3" />,
+					content: <StickersContentView category="brands" />,
+				},
+				{
+					value: "emoji",
+					label: "Emoji",
+					icon: <HugeiconsIcon icon={HappyIcon} className="size-3" />,
+					content: <StickersContentView category="emoji" />,
+				},
+			]}
+			className="flex h-full flex-col overflow-hidden p-0"
+		/>
+	);
+}
+
+function StickerGrid({
+	icons,
+	onAdd,
+	addingSticker,
+	capSize = false,
+}: {
+	icons: string[];
+	onAdd: (iconName: string) => void;
+	addingSticker: string | null;
+	capSize?: boolean;
+}) {
+	const gridStyle: CSSProperties & {
+		"--sticker-min": string;
+		"--sticker-max"?: string;
+	} = {
+		gridTemplateColumns: capSize
+			? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
+			: "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
+		"--sticker-min": "96px",
+		...(capSize ? { "--sticker-max": "160px" } : {}),
+	};
+
+	return (
+		<div className="grid gap-2" style={gridStyle}>
+			{icons.map((iconName) => (
+				<StickerItem
+					key={iconName}
+					iconName={iconName}
+					onAdd={onAdd}
+					isAdding={addingSticker === iconName}
+					capSize={capSize}
+				/>
+			))}
+		</div>
+	);
+}
+
+function CollectionGrid({
+	collections,
+	onSelectCollection,
+}: {
+	collections: Array<{
+		prefix: string;
+		name: string;
+		total: number;
+		category?: string;
+	}>;
+	onSelectCollection: ({ prefix }: { prefix: string }) => void;
+}) {
+	return (
+		<div className="grid grid-cols-1 gap-2">
+			{collections.map((collection) => (
+				<CollectionItem
+					key={collection.prefix}
+					title={collection.name}
+					subtitle={`${collection.total.toLocaleString()} icons${collection.category ? ` • ${collection.category}` : ""}`}
+					onClick={() => onSelectCollection({ prefix: collection.prefix })}
+				/>
+			))}
+		</div>
+	);
+}
+
+function EmptyView({ message }: { message: string }) {
+	return (
+		<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+			<HugeiconsIcon
+				icon={HappyIcon}
+				className="text-muted-foreground size-10"
+			/>
+			<div className="flex flex-col gap-2 text-center">
+				<p className="text-lg font-medium">No stickers found</p>
+				<p className="text-muted-foreground text-sm text-balance">{message}</p>
+			</div>
+		</div>
+	);
+}
+
+function StickersContentView({ category }: { category: StickerCategory }) {
+	const {
+		searchQuery,
+		selectedCollection,
+		viewMode,
+		collections,
+		currentCollection,
+		searchResults,
+		recentStickers,
+		isLoadingCollections,
+		isLoadingCollection,
+		isSearching,
+		setSearchQuery,
+		setSelectedCollection,
+		loadCollections,
+		searchStickers,
+		addStickerToTimeline,
+		clearRecentStickers,
+		setSelectedCategory,
+		addingSticker,
+	} = useStickersStore();
+
+	const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
+	const [collectionsToShow, setCollectionsToShow] = useState(20);
+	const [showCollectionItems, setShowCollectionItems] = useState(false);
+
+	const filteredCollections = useMemo(() => {
+		if (category === "all") {
+			return Object.entries(collections).map(([prefix, collection]) => ({
+				prefix,
+				name: collection.name,
+				total: collection.total,
+				category: collection.category,
+			}));
+		}
+
+		const collectionList =
+			POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
+		if (!collectionList) return [];
+
+		return collectionList
+			.map((c) => {
+				const collection = collections[c.prefix];
+				return collection
+					? {
+							prefix: c.prefix,
+							name: c.name,
+							total: collection.total,
+						}
+					: null;
+			})
+			.filter(Boolean) as Array<{
+			prefix: string;
+			name: string;
+			total: number;
+		}>;
+	}, [collections, category]);
+
+	const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+		onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
+		hasMore: filteredCollections.length > collectionsToShow,
+		isLoading: isLoadingCollections,
+		enabled: viewMode === "browse" && !selectedCollection && category === "all",
+	});
+
+	useEffect(() => {
+		if (Object.keys(collections).length === 0) {
+			loadCollections();
+		}
+	}, [collections, loadCollections]);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (localSearchQuery !== searchQuery) {
+				setSearchQuery({ query: localSearchQuery });
+				if (localSearchQuery.trim()) {
+					searchStickers({ query: localSearchQuery });
+				}
+			}
+		}, 500);
+
+		return () => clearTimeout(timer);
+	}, [localSearchQuery, searchQuery, searchStickers, setSearchQuery]);
+
+	const handleAddSticker = async (iconName: string) => {
+		try {
+			await addStickerToTimeline({ iconName });
+		} catch (error) {
+			console.error("Failed to add sticker:", error);
+			toast.error("Failed to add sticker to timeline");
+		}
+	};
+
+	const iconsToDisplay = useMemo(() => {
+		if (viewMode === "search" && searchResults) {
+			return searchResults.icons;
+		}
+
+		if (viewMode === "collection" && currentCollection) {
+			const icons: string[] = [];
+
+			if (currentCollection.uncategorized) {
+				icons.push(
+					...currentCollection.uncategorized.map(
+						(name) => `${currentCollection.prefix}:${name}`,
+					),
+				);
+			}
+
+			if (currentCollection.categories) {
+				Object.values(currentCollection.categories).forEach((categoryIcons) => {
+					icons.push(
+						...categoryIcons.map(
+							(name) => `${currentCollection.prefix}:${name}`,
+						),
+					);
+				});
+			}
+
+			return icons.slice(0, 100);
+		}
+
+		return [];
+	}, [viewMode, searchResults, currentCollection]);
+
+	const isInCollection = viewMode === "collection" && !!selectedCollection;
+
+	useEffect(() => {
+		if (isInCollection) {
+			setShowCollectionItems(false);
+			const timer = setTimeout(() => setShowCollectionItems(true), 350);
+			return () => clearTimeout(timer);
+		} else {
+			setShowCollectionItems(false);
+		}
+	}, [isInCollection]);
+
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5 p-4">
+			<div className="space-y-3">
+				<InputWithBack
+					isExpanded={isInCollection}
+					setIsExpanded={(expanded) => {
+						if (!expanded && isInCollection) {
+							setSelectedCollection({ collection: null });
+						}
+					}}
+					placeholder={
+						category === "all"
+							? "Search all stickers"
+							: category === "general"
+								? "Search icons"
+								: category === "brands"
+									? "Search brands"
+									: "Search Emojis"
+					}
+					value={localSearchQuery}
+					onChange={setLocalSearchQuery}
+					disableAnimation={true}
+				/>
+			</div>
+
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea
+					className="h-full flex-1"
+					ref={scrollAreaRef}
+					onScrollCapture={handleScroll}
+				>
+					<div className="flex h-full flex-col gap-4">
+						{recentStickers.length > 0 && viewMode === "browse" && (
+							<div className="h-full">
+								<div className="mb-2 flex items-center gap-2">
+									<HugeiconsIcon
+										icon={ClockIcon}
+										className="text-muted-foreground size-4"
+									/>
+									<span className="text-sm font-medium">Recent</span>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<button
+													type="button"
+													onClick={clearRecentStickers}
+													className="hover:bg-accent ml-auto flex size-5 items-center justify-center rounded p-0"
+												>
+													<HugeiconsIcon
+														icon={MultiplicationSignIcon}
+														className="text-muted-foreground size-3"
+													/>
+												</button>
+											</TooltipTrigger>
+											<TooltipContent>
+												<p>Clear recent stickers</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+								<StickerGrid
+									icons={recentStickers.slice(0, 12)}
+									onAdd={handleAddSticker}
+									addingSticker={addingSticker}
+									capSize
+								/>
+							</div>
+						)}
+
+						{viewMode === "collection" && selectedCollection && (
+							<div className="h-full">
+								{isLoadingCollection ? (
+									<div className="flex items-center justify-center py-8">
+										<Spinner className="text-muted-foreground size-6" />
+									</div>
+								) : showCollectionItems ? (
+									<StickerGrid
+										icons={iconsToDisplay}
+										onAdd={handleAddSticker}
+										addingSticker={addingSticker}
+									/>
+								) : (
+									<div className="flex items-center justify-center py-8">
+										<Spinner className="text-muted-foreground size-6" />
+									</div>
+								)}
+							</div>
+						)}
+
+						{viewMode === "search" && (
+							<div className="h-full">
+								{isSearching ? (
+									<div className="flex items-center justify-center py-8">
+										<Spinner className="text-muted-foreground size-6" />
+									</div>
+								) : searchResults?.icons.length ? (
+									<>
+										<div className="mb-3 flex items-center justify-between">
+											<span className="text-muted-foreground text-sm">
+												{searchResults.total} results
+											</span>
+										</div>
+										<StickerGrid
+											icons={iconsToDisplay}
+											onAdd={handleAddSticker}
+											addingSticker={addingSticker}
+											capSize
+										/>
+									</>
+								) : searchQuery ? (
+									<div className="flex flex-col items-center justify-center gap-3 py-8">
+										<EmptyView
+											message={`No stickers found for "${searchQuery}"`}
+										/>
+										{category !== "all" && (
+											<Button
+												variant="outline"
+												onClick={() => {
+													const q = localSearchQuery || searchQuery;
+													if (q) {
+														setSearchQuery({ query: q });
+													}
+													setSelectedCategory({ category: "all" });
+													if (q) {
+														searchStickers({ query: q });
+													}
+												}}
+											>
+												Search in all icons
+											</Button>
+										)}
+									</div>
+								) : null}
+							</div>
+						)}
+
+						{viewMode === "browse" && !selectedCollection && (
+							<div className="h-full space-y-4">
+								{isLoadingCollections ? (
+									<div className="flex items-center justify-center py-8">
+										<Spinner className="text-muted-foreground size-6" />
+									</div>
+								) : (
+									<>
+										{category !== "all" && (
+											<div className="h-full">
+												<CollectionGrid
+													collections={filteredCollections}
+													onSelectCollection={({ prefix }) =>
+														setSelectedCollection({ collection: prefix })
+													}
+												/>
+											</div>
+										)}
+
+										{category === "all" && filteredCollections.length > 0 && (
+											<div className="h-full">
+												<CollectionGrid
+													collections={filteredCollections.slice(
+														0,
+														collectionsToShow,
+													)}
+													onSelectCollection={({ prefix }) =>
+														setSelectedCollection({ collection: prefix })
+													}
+												/>
+											</div>
+										)}
+									</>
+								)}
+							</div>
+						)}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
+}
+
+interface CollectionItemProps {
+	title: string;
+	subtitle: string;
+	onClick: () => void;
+}
+
+function CollectionItem({ title, subtitle, onClick }: CollectionItemProps) {
+	return (
+		<Button
+			variant="outline"
+			className="h-auto justify-between rounded-md py-2"
+			onClick={onClick}
+		>
+			<div className="text-left">
+				<p className="font-medium">{title}</p>
+				<p className="text-muted-foreground text-xs">{subtitle}</p>
+			</div>
+			<HugeiconsIcon icon={ArrowRightIcon} className="size-4" />
+		</Button>
+	);
+}
+
+interface StickerItemProps {
+	iconName: string;
+	onAdd: (iconName: string) => void;
+	isAdding?: boolean;
+	capSize?: boolean;
+}
+
+function StickerItem({
+	iconName,
+	onAdd,
+	isAdding,
+	capSize = false,
+}: StickerItemProps) {
+	const [imageError, setImageError] = useState(false);
+	const [hostIndex, setHostIndex] = useState(0);
+
+	useEffect(() => {
+		if (!iconName) {
+			return;
+		}
+		setImageError(false);
+		setHostIndex(0);
+	}, [iconName]);
+
+	const displayName = iconName.split(":")[1] || iconName;
+	const collectionPrefix = iconName.split(":")[0];
+
+	const preview = imageError ? (
+		<div className="flex size-full items-center justify-center p-2">
+			<span className="text-muted-foreground text-center text-xs break-all">
+				{displayName}
+			</span>
+		</div>
+	) : (
+		<div className="flex size-full items-center justify-center p-4">
+			<Image
+				src={
+					hostIndex === 0
+						? getIconSvgUrl(iconName, { width: 64, height: 64 })
+						: buildIconSvgUrl(
+								ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
+								iconName,
+								{ width: 64, height: 64 },
+							)
+				}
+				alt={displayName}
+				width={64}
+				height={64}
+				className="size-full object-contain"
+				style={
+					capSize
+						? {
+								maxWidth: "var(--sticker-max, 160px)",
+								maxHeight: "var(--sticker-max, 160px)",
+							}
+						: undefined
+				}
+				onError={() => {
+					const next = hostIndex + 1;
+					if (next < ICONIFY_HOSTS.length) {
+						setHostIndex(next);
+					} else {
+						setImageError(true);
+					}
+				}}
+				loading="lazy"
+				unoptimized
+			/>
+		</div>
+	);
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<div
+					className={cn(
+						"relative",
+						isAdding && "pointer-events-none opacity-50",
+					)}
+				>
+					<DraggableItem
+						name={displayName}
+						preview={preview}
+						dragData={{
+							id: iconName,
+							type: "sticker",
+							name: displayName,
+							iconName,
+						}}
+						onAddToTimeline={() => onAdd(iconName)}
+						aspectRatio={1}
+						shouldShowLabel={false}
+						isRounded={true}
+						variant="card"
+						className=""
+						containerClassName="w-full"
+					/>
+					{isAdding && (
+						<div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-black/60">
+							<Spinner className="size-6 text-white" />
+						</div>
+					)}
+				</div>
+			</TooltipTrigger>
+			<TooltipContent>
+				<div className="space-y-1">
+					<p className="font-medium">{displayName}</p>
+					<p className="text-muted-foreground text-xs">{collectionPrefix}</p>
+				</div>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/text.tsx b/apps/web/src/components/editor/panels/assets/views/text.tsx
new file mode 100644
index 00000000..6ccf5d98
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/text.tsx
@@ -0,0 +1,46 @@
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
+import { useEditor } from "@/hooks/use-editor";
+import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
+import { buildTextElement } from "@/lib/timeline/element-utils";
+
+export function TextView() {
+	const editor = useEditor();
+
+	const handleAddToTimeline = ({ currentTime }: { currentTime: number }) => {
+		const activeScene = editor.scenes.getActiveScene();
+		if (!activeScene) return;
+
+		const element = buildTextElement({
+			raw: DEFAULT_TEXT_ELEMENT,
+			startTime: currentTime,
+		});
+
+		editor.timeline.insertElement({
+			element,
+			placement: { mode: "auto" },
+		});
+	};
+
+	return (
+		<BaseView>
+			<DraggableItem
+				name="Default text"
+				preview={
+					<div className="bg-panel-accent flex size-full items-center justify-center rounded">
+						<span className="text-xs select-none">Default text</span>
+					</div>
+				}
+				dragData={{
+					id: "temp-text-id",
+					type: DEFAULT_TEXT_ELEMENT.type,
+					name: DEFAULT_TEXT_ELEMENT.name,
+					content: DEFAULT_TEXT_ELEMENT.content,
+				}}
+				aspectRatio={1}
+				onAddToTimeline={handleAddToTimeline}
+				shouldShowLabel={false}
+			/>
+		</BaseView>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/panel-base-view.tsx b/apps/web/src/components/editor/panels/panel-base-view.tsx
new file mode 100644
index 00000000..b16d1db6
--- /dev/null
+++ b/apps/web/src/components/editor/panels/panel-base-view.tsx
@@ -0,0 +1,85 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/utils/ui";
+
+interface PanelBaseViewProps {
+	children?: React.ReactNode;
+	defaultTab?: string;
+	value?: string;
+	onValueChange?: (value: string) => void;
+	tabs?: {
+		value: string;
+		label: string;
+		icon?: React.ReactNode;
+		content: React.ReactNode;
+	}[];
+	className?: string;
+	ref?: React.RefObject<HTMLDivElement>;
+}
+
+function ViewContent({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return (
+		<ScrollArea className="flex-1">
+			<div className={cn("p-5", className)}>{children}</div>
+		</ScrollArea>
+	);
+}
+
+export function PanelBaseView({
+	children,
+	defaultTab,
+	value,
+	onValueChange,
+	tabs,
+	className = "",
+	ref,
+}: PanelBaseViewProps) {
+	return (
+		<div className={cn("flex h-full flex-col", className)} ref={ref}>
+			{!tabs || tabs.length === 0 ? (
+				<ViewContent className={className}>{children}</ViewContent>
+			) : (
+				<Tabs
+					defaultValue={defaultTab}
+					value={value}
+					onValueChange={onValueChange}
+					className="flex h-full flex-col"
+				>
+					<div className="bg-panel sticky top-0 z-10">
+						<div className="px-3 pt-3 pb-0">
+							<TabsList>
+								{tabs.map((tab) => (
+									<TabsTrigger key={tab.value} value={tab.value}>
+										{tab.icon ? (
+											<span className="mr-1 inline-flex items-center">
+												{tab.icon}
+											</span>
+										) : null}
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</div>
+						<Separator className="mt-3" />
+					</div>
+					{tabs.map((tab) => (
+						<TabsContent
+							key={tab.value}
+							value={tab.value}
+							className="mt-0 flex min-h-0 flex-1 flex-col"
+						>
+							<ViewContent className={className}>{tab.content}</ViewContent>
+						</TabsContent>
+					))}
+				</Tabs>
+			)}
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/preview/index.tsx b/apps/web/src/components/editor/panels/preview/index.tsx
new file mode 100644
index 00000000..5ed9db00
--- /dev/null
+++ b/apps/web/src/components/editor/panels/preview/index.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useCallback, useMemo, useRef } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { useEditor } from "@/hooks/use-editor";
+import { useRafLoop } from "@/hooks/use-raf-loop";
+import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
+import type { RootNode } from "@/services/renderer/nodes/root-node";
+import { buildScene } from "@/services/renderer/scene-builder";
+import { getLastFrameTime } from "@/lib/time";
+
+function usePreviewSize() {
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+
+	return {
+		width: activeProject?.settings.canvasSize.width,
+		height: activeProject?.settings.canvasSize.height,
+	};
+}
+
+function RenderTreeController() {
+	const editor = useEditor();
+	const tracks = editor.timeline.getTracks();
+	const mediaAssets = editor.media.getAssets();
+	const activeProject = editor.project.getActive();
+
+	const { width, height } = usePreviewSize();
+
+	useDeepCompareEffect(() => {
+		if (!activeProject) return;
+
+		const duration = editor.timeline.getTotalDuration();
+		const renderTree = buildScene({
+			tracks,
+			mediaAssets,
+			duration,
+			canvasSize: { width, height },
+			background: activeProject.settings.background,
+		});
+
+		editor.renderer.setRenderTree({ renderTree });
+	}, [tracks, mediaAssets, activeProject?.settings.background, width, height]);
+
+	return null;
+}
+
+export function PreviewPanel() {
+	return (
+		<div className="bg-panel relative flex h-full min-h-0 w-full min-w-0 flex-col rounded-sm">
+			<div className="flex min-h-0 min-w-0 flex-1 items-center justify-center p-2">
+				<PreviewCanvas />
+				<RenderTreeController />
+			</div>
+		</div>
+	);
+}
+
+function PreviewCanvas() {
+	const ref = useRef<HTMLCanvasElement>(null);
+	const lastFrameRef = useRef(-1);
+	const lastSceneRef = useRef<RootNode | null>(null);
+	const renderingRef = useRef(false);
+	const { width, height } = usePreviewSize();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+
+	const renderer = useMemo(() => {
+		return new CanvasRenderer({
+			width,
+			height,
+			fps: activeProject.settings.fps,
+		});
+	}, [width, height, activeProject.settings.fps]);
+
+	const renderTree = editor.renderer.getRenderTree();
+
+	const render = useCallback(() => {
+		if (ref.current && renderTree && !renderingRef.current) {
+			const time = editor.playback.getCurrentTime();
+			const lastFrameTime = getLastFrameTime({
+				duration: renderTree.duration,
+				fps: renderer.fps,
+			});
+			const renderTime = Math.min(time, lastFrameTime);
+			const frame = Math.floor(renderTime * renderer.fps);
+
+			if (
+				frame !== lastFrameRef.current ||
+				renderTree !== lastSceneRef.current
+			) {
+				renderingRef.current = true;
+				lastSceneRef.current = renderTree;
+				lastFrameRef.current = frame;
+				renderer
+					.renderToCanvas({
+						node: renderTree,
+						time: renderTime,
+						targetCanvas: ref.current,
+					})
+					.then(() => {
+						renderingRef.current = false;
+					});
+			}
+		}
+	}, [renderer, renderTree, editor.playback]);
+
+	useRafLoop(render);
+
+	return (
+		<canvas
+			ref={ref}
+			width={width}
+			height={height}
+			className="block max-h-full max-w-full border"
+			style={{
+				background:
+					activeProject.settings.background.type === "blur"
+						? "transparent"
+						: activeProject?.settings.background.color,
+			}}
+		/>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/properties/audio-properties.tsx b/apps/web/src/components/editor/panels/properties/audio-properties.tsx
new file mode 100644
index 00000000..0b83a4b6
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/audio-properties.tsx
@@ -0,0 +1,5 @@
+import type { AudioElement } from "@/types/timeline";
+
+export function AudioProperties({ _element }: { _element: AudioElement }) {
+	return <div className="space-y-4 p-5">Audio properties</div>;
+}
diff --git a/apps/web/src/components/editor/panels/properties/index.tsx b/apps/web/src/components/editor/panels/properties/index.tsx
new file mode 100644
index 00000000..3a552b93
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/index.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { AudioProperties } from "./audio-properties";
+import { VideoProperties } from "./video-properties";
+import { TextProperties } from "./text-properties";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Settings05Icon } from "@hugeicons/core-free-icons";
+import { useEditor } from "@/hooks/use-editor";
+import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
+
+export function PropertiesPanel() {
+	const editor = useEditor();
+	const { selectedElements } = useElementSelection();
+
+	const elementsWithTracks = editor.timeline.getElementsWithTracks({
+		elements: selectedElements,
+	});
+
+	return (
+		<>
+			{selectedElements.length > 0 ? (
+				<ScrollArea className="bg-panel h-full rounded-sm">
+					{elementsWithTracks.map(({ track, element }) => {
+						if (element.type === "text") {
+							return (
+								<div key={element.id}>
+									<TextProperties element={element} trackId={track.id} />
+								</div>
+							);
+						}
+						if (element.type === "audio") {
+							return <AudioProperties key={element.id} _element={element} />;
+						}
+						if (element.type === "video" || element.type === "image") {
+							return (
+								<div key={element.id}>
+									<VideoProperties _element={element} />
+								</div>
+							);
+						}
+						return null;
+					})}
+				</ScrollArea>
+			) : (
+				<EmptyView />
+			)}
+		</>
+	);
+}
+
+function EmptyView() {
+	return (
+		<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+			<HugeiconsIcon
+				icon={Settings05Icon}
+				className="text-muted-foreground/75 size-10"
+				strokeWidth={1}
+			/>
+			<div className="flex flex-col gap-2 text-center">
+				<p className="text-lg font-medium">It's empty here</p>
+				<p className="text-muted-foreground text-sm text-balance">
+					Click an element on the timeline to edit its properties
+				</p>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/properties/property-item.tsx b/apps/web/src/components/editor/panels/properties/property-item.tsx
new file mode 100644
index 00000000..6d2fe444
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/property-item.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { cn } from "@/utils/ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowDownIcon } from "@hugeicons/core-free-icons";
+
+interface PropertyItemProps {
+	direction?: "row" | "column";
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function PropertyItem({
+	direction = "row",
+	children,
+	className,
+}: PropertyItemProps) {
+	return (
+		<div
+			className={cn(
+				"flex gap-2",
+				direction === "row"
+					? "items-center justify-between gap-6"
+					: "flex-col gap-1.5",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function PropertyItemLabel({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return (
+		<span className={cn("text-muted-foreground text-xs", className)}>
+			{children}
+		</span>
+	);
+}
+
+export function PropertyItemValue({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
+}
+
+interface PropertyGroupProps {
+	title: string;
+	children: React.ReactNode;
+	defaultExpanded?: boolean;
+	className?: string;
+	titleClassName?: string;
+}
+
+export function PropertyGroup({
+	title,
+	children,
+	defaultExpanded = true,
+	className,
+	titleClassName,
+}: PropertyGroupProps) {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+	return (
+		<PropertyItem direction="column" className={cn("gap-3", className)}>
+			<button
+				type="button"
+				className="flex items-center gap-1.5 cursor-pointer"
+				onClick={() => setIsExpanded(!isExpanded)}
+			>
+				<PropertyItemLabel className={cn(titleClassName)}>
+					{title}
+				</PropertyItemLabel>
+				<HugeiconsIcon
+					icon={ArrowDownIcon}
+					className={cn("size-3", !isExpanded && "-rotate-90")}
+				/>
+			</button>
+			{isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
+		</PropertyItem>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/properties/text-properties.tsx b/apps/web/src/components/editor/panels/properties/text-properties.tsx
new file mode 100644
index 00000000..f8c9bf87
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/text-properties.tsx
@@ -0,0 +1,410 @@
+import { Textarea } from "@/components/ui/textarea";
+import { FontPicker } from "@/components/ui/font-picker";
+import type { FontFamily } from "@/constants/font-constants";
+import type { TextElement } from "@/types/timeline";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useState, useRef } from "react";
+import { PanelBaseView } from "@/components/editor/panels/panel-base-view";
+import {
+	TEXT_PROPERTIES_TABS,
+	isTextPropertiesTab,
+	useTextPropertiesStore,
+} from "@/stores/text-properties-store";
+import {
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
+} from "./property-item";
+import { ColorPicker } from "@/components/ui/color-picker";
+import { cn } from "@/utils/ui";
+import { capitalizeFirstLetter, uppercase } from "@/utils/string";
+import { clamp } from "@/utils/math";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { LayoutGridIcon } from "@hugeicons/core-free-icons";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useEditor } from "@/hooks/use-editor";
+import { DEFAULT_COLOR } from "@/constants/project-constants";
+
+export function TextProperties({
+	element,
+	trackId,
+}: {
+	element: TextElement;
+	trackId: string;
+}) {
+	const editor = useEditor();
+	const { activeTab, setActiveTab } = useTextPropertiesStore();
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fontSizeInput, setFontSizeInput] = useState(
+		element.fontSize.toString(),
+	);
+	const [opacityInput, setOpacityInput] = useState(
+		Math.round(element.opacity * 100).toString(),
+	);
+
+	const lastSelectedColor = useRef(DEFAULT_COLOR);
+
+	const handleFontSizeChange = ({ value }: { value: string }) => {
+		setFontSizeInput(value);
+
+		if (value.trim() !== "") {
+			const parsed = parseInt(value, 10);
+			const fontSize = Number.isNaN(parsed)
+				? element.fontSize
+				: clamp({ value: parsed, min: 8, max: 300 });
+			editor.timeline.updateTextElement({
+				trackId,
+				elementId: element.id,
+				updates: { fontSize },
+			});
+		}
+	};
+
+	const handleFontSizeBlur = () => {
+		const parsed = parseInt(fontSizeInput, 10);
+		const fontSize = Number.isNaN(parsed)
+			? element.fontSize
+			: clamp({ value: parsed, min: 8, max: 300 });
+		setFontSizeInput(fontSize.toString());
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { fontSize },
+		});
+	};
+
+	const handleOpacityChange = ({ value }: { value: string }) => {
+		setOpacityInput(value);
+
+		if (value.trim() !== "") {
+			const parsed = parseInt(value, 10);
+			const opacityPercent = Number.isNaN(parsed)
+				? Math.round(element.opacity * 100)
+				: clamp({ value: parsed, min: 0, max: 100 });
+			editor.timeline.updateTextElement({
+				trackId,
+				elementId: element.id,
+				updates: { opacity: opacityPercent / 100 },
+			});
+		}
+	};
+
+	const handleOpacityBlur = () => {
+		const parsed = parseInt(opacityInput, 10);
+		const opacityPercent = Number.isNaN(parsed)
+			? Math.round(element.opacity * 100)
+			: clamp({ value: parsed, min: 0, max: 100 });
+		setOpacityInput(opacityPercent.toString());
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { opacity: opacityPercent / 100 },
+		});
+	};
+
+	const handleColorChange = ({ color }: { color: string }) => {
+		if (color !== "transparent") {
+			lastSelectedColor.current = color;
+		}
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { backgroundColor: color },
+		});
+	};
+
+	const handleTransparentToggle = ({
+		isTransparent,
+	}: {
+		isTransparent: boolean;
+	}) => {
+		const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { backgroundColor: newColor },
+		});
+	};
+
+	return (
+		<PanelBaseView
+			defaultTab="transform"
+			value={activeTab}
+			onValueChange={(v) => {
+				if (isTextPropertiesTab(v)) setActiveTab(v);
+			}}
+			ref={containerRef}
+			tabs={TEXT_PROPERTIES_TABS.map((t) => ({
+				value: t.value,
+				label: t.label,
+				content:
+					t.value === "transform" ? (
+						<div className="space-y-6"></div>
+					) : (
+						<div className="space-y-6">
+							<Textarea
+								placeholder="Name"
+								defaultValue={element.content}
+								className="bg-panel-accent min-h-20"
+								onChange={(e) =>
+									editor.timeline.updateTextElement({
+										trackId,
+										elementId: element.id,
+										updates: { content: e.target.value },
+									})
+								}
+							/>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Font</PropertyItemLabel>
+								<PropertyItemValue>
+									<FontPicker
+										defaultValue={element.fontFamily}
+										onValueChange={(value: FontFamily) =>
+											editor.timeline.updateTextElement({
+												trackId,
+												elementId: element.id,
+												updates: { fontFamily: value },
+											})
+										}
+									/>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Style</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Button
+											variant={
+												element.fontWeight === "bold" ? "default" : "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														fontWeight:
+															element.fontWeight === "bold" ? "normal" : "bold",
+													},
+												})
+											}
+											className="h-8 px-3 font-bold"
+										>
+											B
+										</Button>
+										<Button
+											variant={
+												element.fontStyle === "italic" ? "default" : "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														fontStyle:
+															element.fontStyle === "italic"
+																? "normal"
+																: "italic",
+													},
+												})
+											}
+											className="h-8 px-3 italic"
+										>
+											I
+										</Button>
+										<Button
+											variant={
+												element.textDecoration === "underline"
+													? "default"
+													: "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														textDecoration:
+															element.textDecoration === "underline"
+																? "none"
+																: "underline",
+													},
+												})
+											}
+											className="h-8 px-3 underline"
+										>
+											U
+										</Button>
+										<Button
+											variant={
+												element.textDecoration === "line-through"
+													? "default"
+													: "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														textDecoration:
+															element.textDecoration === "line-through"
+																? "none"
+																: "line-through",
+													},
+												})
+											}
+											className="h-8 px-3 line-through"
+										>
+											S
+										</Button>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Font size</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Slider
+											value={[element.fontSize]}
+											min={8}
+											max={300}
+											step={1}
+											onValueChange={([value]) => {
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: { fontSize: value },
+												});
+												setFontSizeInput(value.toString());
+											}}
+											className="w-full"
+										/>
+										<Input
+											type="number"
+											value={fontSizeInput}
+											min={8}
+											max={300}
+											onChange={(e) =>
+												handleFontSizeChange({ value: e.target.value })
+											}
+											onBlur={handleFontSizeBlur}
+											className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm px-2 text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+										/>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Color</PropertyItemLabel>
+								<PropertyItemValue>
+									<ColorPicker
+										value={uppercase({
+											string: (element.color || "FFFFFF").replace("#", ""),
+										})}
+										onChange={(color) => {
+											editor.timeline.updateTextElement({
+												trackId,
+												elementId: element.id,
+												updates: { color: `#${color}` },
+											});
+										}}
+										containerRef={containerRef}
+									/>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Opacity</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Slider
+											value={[element.opacity * 100]}
+											min={0}
+											max={100}
+											step={1}
+											onValueChange={([value]) => {
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: { opacity: value / 100 },
+												});
+												setOpacityInput(value.toString());
+											}}
+											className="w-full"
+										/>
+										<Input
+											type="number"
+											value={opacityInput}
+											min={0}
+											max={100}
+											onChange={(e) =>
+												handleOpacityChange({ value: e.target.value })
+											}
+											onBlur={handleOpacityBlur}
+											className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+										/>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Background</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<ColorPicker
+											value={capitalizeFirstLetter({
+												string:
+													element.backgroundColor === "transparent"
+														? lastSelectedColor.current.replace("#", "")
+														: element.backgroundColor.replace("#", ""),
+											})}
+											onChange={(color) =>
+												handleColorChange({ color: `#${color}` })
+											}
+											containerRef={containerRef}
+											className={
+												element.backgroundColor === "transparent"
+													? "pointer-events-none opacity-50"
+													: ""
+											}
+										/>
+
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<Button
+													variant="outline"
+													size="icon"
+													onClick={() =>
+														handleTransparentToggle({
+															isTransparent:
+																element.backgroundColor !== "transparent",
+														})
+													}
+													className="bg-panel-accent size-9 overflow-hidden rounded-full p-0"
+												>
+													<HugeiconsIcon
+														icon={LayoutGridIcon}
+														className={cn(
+															"text-foreground",
+															element.backgroundColor === "transparent" &&
+																"text-primary",
+														)}
+													/>
+												</Button>
+											</TooltipTrigger>
+											<TooltipContent>Transparent background</TooltipContent>
+										</Tooltip>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+						</div>
+					),
+			}))}
+		/>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/properties/video-properties.tsx b/apps/web/src/components/editor/panels/properties/video-properties.tsx
new file mode 100644
index 00000000..bf6d92d8
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/video-properties.tsx
@@ -0,0 +1,9 @@
+import type { ImageElement, VideoElement } from "@/types/timeline";
+
+export function VideoProperties({
+	_element,
+}: {
+	_element: VideoElement | ImageElement;
+}) {
+	return <div className="space-y-4 p-5">Video properties</div>;
+}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
deleted file mode 100644
index 36f6a2ba..00000000
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ /dev/null
@@ -1,1134 +0,0 @@
-"use client";
-
-import { useTimelineStore } from "@/stores/timeline-store";
-import { TimelineElement, TimelineTrack } from "@/types/timeline";
-import { useMediaStore } from "@/stores/media-store";
-import { MediaFile } from "@/types/media";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useEditorStore } from "@/stores/editor-store";
-import { Button } from "@/components/ui/button";
-import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react";
-import { useState, useRef, useEffect, useCallback } from "react";
-import { renderTimelineFrame } from "@/lib/timeline-renderer";
-import { cn } from "@/lib/utils";
-import { formatTimeCode } from "@/lib/time";
-import { EditableTimecode } from "@/components/ui/editable-timecode";
-import { useFrameCache } from "@/hooks/use-frame-cache";
-import { useSceneStore } from "@/stores/scene-store";
-import {
-  DEFAULT_CANVAS_SIZE,
-  DEFAULT_FPS,
-  useProjectStore,
-} from "@/stores/project-store";
-import { TextElementDragState } from "@/types/editor";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Checkbox } from "@/components/ui/checkbox";
-import { LayoutGuideOverlay } from "./layout-guide-overlay";
-import { Label } from "../ui/label";
-import { SocialsIcon } from "../icons";
-import { PLATFORM_LAYOUTS, type PlatformLayout } from "@/stores/editor-store";
-
-interface ActiveElement {
-  element: TimelineElement;
-  track: TimelineTrack;
-  mediaItem: MediaFile | null;
-}
-
-export function PreviewPanel() {
-  const { tracks, getTotalDuration, updateTextElement } = useTimelineStore();
-  const { mediaFiles } = useMediaStore();
-  const { currentTime, toggle, setCurrentTime } = usePlaybackStore();
-  const { isPlaying, volume, muted } = usePlaybackStore();
-  const { activeProject } = useProjectStore();
-  const { currentScene } = useSceneStore();
-  const previewRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const { getCachedFrame, cacheFrame, invalidateCache, preRenderNearbyFrames } =
-    useFrameCache();
-  const lastFrameTimeRef = useRef(0);
-  const renderSeqRef = useRef(0);
-  const offscreenCanvasRef = useRef<OffscreenCanvas | HTMLCanvasElement | null>(
-    null
-  );
-
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const audioGainRef = useRef<GainNode | null>(null);
-  const audioBuffersRef = useRef<Map<string, AudioBuffer>>(new Map());
-  const playingSourcesRef = useRef<Set<AudioBufferSourceNode>>(new Set());
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [previewDimensions, setPreviewDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const canvasSize = activeProject?.canvasSize || DEFAULT_CANVAS_SIZE;
-  const [dragState, setDragState] = useState<TextElementDragState>({
-    isDragging: false,
-    elementId: null,
-    trackId: null,
-    startX: 0,
-    startY: 0,
-    initialElementX: 0,
-    initialElementY: 0,
-    currentX: 0,
-    currentY: 0,
-    elementWidth: 0,
-    elementHeight: 0,
-  });
-
-  useEffect(() => {
-    const updatePreviewSize = () => {
-      if (!containerRef.current) return;
-
-      let availableWidth, availableHeight;
-
-      if (isExpanded) {
-        const controlsHeight = 80;
-        const marginSpace = 24;
-        availableWidth = window.innerWidth - marginSpace;
-        availableHeight = window.innerHeight - controlsHeight - marginSpace;
-      } else {
-        const container = containerRef.current.getBoundingClientRect();
-        const computedStyle = getComputedStyle(containerRef.current);
-        const paddingTop = parseFloat(computedStyle.paddingTop);
-        const paddingBottom = parseFloat(computedStyle.paddingBottom);
-        const paddingLeft = parseFloat(computedStyle.paddingLeft);
-        const paddingRight = parseFloat(computedStyle.paddingRight);
-        const gap = parseFloat(computedStyle.gap) || 16;
-        const toolbar = containerRef.current.querySelector("[data-toolbar]");
-        const toolbarHeight = toolbar
-          ? toolbar.getBoundingClientRect().height
-          : 0;
-
-        availableWidth = container.width - paddingLeft - paddingRight;
-        availableHeight =
-          container.height -
-          paddingTop -
-          paddingBottom -
-          toolbarHeight -
-          (toolbarHeight > 0 ? gap : 0);
-      }
-
-      const targetRatio = canvasSize.width / canvasSize.height;
-      const containerRatio = availableWidth / availableHeight;
-      let width, height;
-
-      if (containerRatio > targetRatio) {
-        height = availableHeight * (isExpanded ? 0.95 : 1);
-        width = height * targetRatio;
-      } else {
-        width = availableWidth * (isExpanded ? 0.95 : 1);
-        height = width / targetRatio;
-      }
-
-      setPreviewDimensions({ width, height });
-    };
-
-    updatePreviewSize();
-    const resizeObserver = new ResizeObserver(updatePreviewSize);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    if (isExpanded) {
-      window.addEventListener("resize", updatePreviewSize);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-      if (isExpanded) {
-        window.removeEventListener("resize", updatePreviewSize);
-      }
-    };
-  }, [canvasSize.width, canvasSize.height, isExpanded]);
-
-  useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && isExpanded) {
-        setIsExpanded(false);
-      }
-    };
-
-    if (isExpanded) {
-      document.addEventListener("keydown", handleEscapeKey);
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-      document.body.style.overflow = "";
-    };
-  }, [isExpanded]);
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!dragState.isDragging) return;
-
-      const deltaX = e.clientX - dragState.startX;
-      const deltaY = e.clientY - dragState.startY;
-
-      const scaleRatio = previewDimensions.width / canvasSize.width;
-      const newX = dragState.initialElementX + deltaX / scaleRatio;
-      const newY = dragState.initialElementY + deltaY / scaleRatio;
-
-      const halfWidth = dragState.elementWidth / scaleRatio / 2;
-      const halfHeight = dragState.elementHeight / scaleRatio / 2;
-
-      const constrainedX = Math.max(
-        -canvasSize.width / 2 + halfWidth,
-        Math.min(canvasSize.width / 2 - halfWidth, newX)
-      );
-      const constrainedY = Math.max(
-        -canvasSize.height / 2 + halfHeight,
-        Math.min(canvasSize.height / 2 - halfHeight, newY)
-      );
-
-      setDragState((prev) => ({
-        ...prev,
-        currentX: constrainedX,
-        currentY: constrainedY,
-      }));
-    };
-
-    const handleMouseUp = () => {
-      if (dragState.isDragging && dragState.trackId && dragState.elementId) {
-        updateTextElement(dragState.trackId, dragState.elementId, {
-          x: dragState.currentX,
-          y: dragState.currentY,
-        });
-      }
-      setDragState((prev) => ({ ...prev, isDragging: false }));
-    };
-
-    if (dragState.isDragging) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "grabbing";
-      document.body.style.userSelect = "none";
-    }
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-  }, [dragState, previewDimensions, canvasSize, updateTextElement]);
-
-  // Clear the frame cache when background settings change since they affect rendering
-  useEffect(() => {
-    invalidateCache();
-  }, [
-    mediaFiles,
-    activeProject?.backgroundColor,
-    activeProject?.backgroundType,
-    invalidateCache,
-  ]);
-
-  const handleTextMouseDown = (
-    e: React.MouseEvent<HTMLDivElement>,
-    element: any,
-    trackId: string
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const rect = e.currentTarget.getBoundingClientRect();
-
-    setDragState({
-      isDragging: true,
-      elementId: element.id,
-      trackId,
-      startX: e.clientX,
-      startY: e.clientY,
-      initialElementX: element.x,
-      initialElementY: element.y,
-      currentX: element.x,
-      currentY: element.y,
-      elementWidth: rect.width,
-      elementHeight: rect.height,
-    });
-  };
-
-  const toggleExpanded = useCallback(() => {
-    setIsExpanded((prev) => !prev);
-  }, []);
-
-  const hasAnyElements = tracks.some((track) => track.elements.length > 0);
-  const shouldRenderPreview = hasAnyElements || activeProject?.backgroundType;
-  const getActiveElements = (): ActiveElement[] => {
-    const activeElements: ActiveElement[] = [];
-
-    // Iterate tracks from bottom to top so topmost track renders last (on top)
-    [...tracks].reverse().forEach((track) => {
-      track.elements.forEach((element) => {
-        if (element.hidden) return;
-        const elementStart = element.startTime;
-        const elementEnd =
-          element.startTime +
-          (element.duration - element.trimStart - element.trimEnd);
-
-        if (currentTime >= elementStart && currentTime < elementEnd) {
-          let mediaItem = null;
-          if (element.type === "media") {
-            mediaItem =
-              element.mediaId === "test"
-                ? null
-                : mediaFiles.find((item) => item.id === element.mediaId) ||
-                  null;
-          }
-          activeElements.push({ element, track, mediaItem });
-        }
-      });
-    });
-
-    return activeElements;
-  };
-
-  const activeElements = getActiveElements();
-
-  // Ensure first frame after mount/seek renders immediately
-  useEffect(() => {
-    const onSeek = () => {
-      lastFrameTimeRef.current = -Infinity;
-      renderSeqRef.current++;
-    };
-    window.addEventListener("playback-seek", onSeek as EventListener);
-    lastFrameTimeRef.current = -Infinity;
-    return () => {
-      window.removeEventListener("playback-seek", onSeek as EventListener);
-    };
-  }, []);
-
-  // Web Audio: schedule only on play/pause/seek/volume/mute changes
-  useEffect(() => {
-    const stopAll = () => {
-      for (const src of playingSourcesRef.current) {
-        try {
-          src.stop();
-        } catch {}
-      }
-      playingSourcesRef.current.clear();
-    };
-
-    type WebAudioWindow = Window & {
-      AudioContext?: typeof AudioContext;
-      webkitAudioContext?: typeof AudioContext;
-    };
-    const ensureAudioGraph = async () => {
-      if (!audioContextRef.current) {
-        const win = window as WebAudioWindow;
-        const Ctx = win.AudioContext ?? win.webkitAudioContext;
-        if (!Ctx) return;
-        audioContextRef.current = new Ctx();
-      }
-      if (!audioGainRef.current) {
-        audioGainRef.current = audioContextRef.current!.createGain();
-        audioGainRef.current.connect(audioContextRef.current!.destination);
-      }
-      if (audioContextRef.current!.state === "suspended") {
-        try {
-          await audioContextRef.current!.resume();
-        } catch {}
-      }
-      const gainValue = muted ? 0 : Math.max(0, Math.min(1, volume));
-      audioGainRef.current!.gain.setValueAtTime(
-        gainValue,
-        audioContextRef.current!.currentTime
-      );
-    };
-
-    const scheduleNow = async () => {
-      await ensureAudioGraph();
-      const audioCtx = audioContextRef.current!;
-      const gain = audioGainRef.current!;
-
-      const tracksSnapshot = useTimelineStore.getState().tracks;
-      const mediaList = mediaFiles;
-      const idToMedia = new Map(mediaList.map((m) => [m.id, m] as const));
-      const playbackNow = usePlaybackStore.getState().currentTime;
-
-      const audible: Array<{
-        id: string;
-        elementStart: number;
-        trimStart: number;
-        trimEnd: number;
-        duration: number;
-        muted: boolean;
-        trackMuted: boolean;
-      }> = [];
-      const uniqueIds = new Set<string>();
-      for (const track of tracksSnapshot) {
-        for (const element of track.elements) {
-          if (element.type !== "media") continue;
-          const media = idToMedia.get(element.mediaId);
-          if (!media || media.type !== "audio") continue;
-          const visibleDuration =
-            element.duration - element.trimStart - element.trimEnd;
-          if (visibleDuration <= 0) continue;
-          const localTime = playbackNow - element.startTime + element.trimStart;
-          if (localTime < 0 || localTime >= visibleDuration) continue;
-          audible.push({
-            id: media.id,
-            elementStart: element.startTime,
-            trimStart: element.trimStart,
-            trimEnd: element.trimEnd,
-            duration: element.duration,
-            muted: !!element.muted,
-            trackMuted: !!track.muted,
-          });
-          uniqueIds.add(media.id);
-        }
-      }
-
-      if (audible.length === 0) return;
-
-      // Decode buffers as needed
-      const decodePromises: Array<Promise<void>> = [];
-      for (const id of uniqueIds) {
-        if (!audioBuffersRef.current.has(id)) {
-          const mediaItem = idToMedia.get(id);
-          if (!mediaItem) continue;
-          const p = (async () => {
-            const arr = await mediaItem.file.arrayBuffer();
-            const buf = await audioCtx.decodeAudioData(arr.slice(0));
-            audioBuffersRef.current.set(id, buf);
-          })();
-          decodePromises.push(p);
-        }
-      }
-      await Promise.all(decodePromises);
-
-      const startAt = audioCtx.currentTime + 0.02;
-      for (const entry of audible) {
-        if (entry.muted || entry.trackMuted) continue;
-        const buffer = audioBuffersRef.current.get(entry.id);
-        if (!buffer) continue;
-        const visibleDuration =
-          entry.duration - entry.trimStart - entry.trimEnd;
-        const localTime = Math.max(
-          0,
-          playbackNow - entry.elementStart + entry.trimStart
-        );
-        const playDuration = Math.max(0, visibleDuration - localTime);
-        if (playDuration <= 0) continue;
-        const src = audioCtx.createBufferSource();
-        src.buffer = buffer;
-        src.connect(gain);
-        try {
-          src.start(startAt, localTime, playDuration);
-          playingSourcesRef.current.add(src);
-        } catch {}
-      }
-    };
-
-    const onSeek = () => {
-      if (!isPlaying) return;
-      for (const src of playingSourcesRef.current) {
-        try {
-          src.stop();
-        } catch {}
-      }
-      playingSourcesRef.current.clear();
-      void scheduleNow();
-    };
-
-    // Apply volume/mute changes immediately
-    void ensureAudioGraph();
-
-    // Start/stop on play state changes
-    for (const src of playingSourcesRef.current) {
-      try {
-        src.stop();
-      } catch {}
-    }
-    playingSourcesRef.current.clear();
-    if (isPlaying) {
-      void scheduleNow();
-    }
-
-    window.addEventListener("playback-seek", onSeek as EventListener);
-    return () => {
-      window.removeEventListener("playback-seek", onSeek as EventListener);
-      for (const src of playingSourcesRef.current) {
-        try {
-          src.stop();
-        } catch {}
-      }
-      playingSourcesRef.current.clear();
-    };
-  }, [isPlaying, volume, muted, mediaFiles]);
-
-  // Canvas: draw current frame with caching
-  useEffect(() => {
-    const draw = async () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const mainCtx = canvas.getContext("2d");
-      if (!mainCtx) return;
-
-      // Set canvas internal resolution to avoid blurry scaling
-      const displayWidth = Math.max(1, Math.floor(previewDimensions.width));
-      const displayHeight = Math.max(1, Math.floor(previewDimensions.height));
-      if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
-        canvas.width = displayWidth;
-        canvas.height = displayHeight;
-      }
-
-      // Throttle rendering to project FPS during playback only
-      const fps = activeProject?.fps || DEFAULT_FPS;
-      const minDelta = 1 / fps;
-      if (isPlaying) {
-        if (currentTime - lastFrameTimeRef.current < minDelta) {
-          return;
-        }
-        lastFrameTimeRef.current = currentTime;
-      }
-
-      const cachedFrame = getCachedFrame(
-        currentTime,
-        tracks,
-        mediaFiles,
-        activeProject,
-        currentScene?.id
-      );
-      if (cachedFrame) {
-        mainCtx.putImageData(cachedFrame, 0, 0);
-
-        // Pre-render nearby frames in background
-        if (!isPlaying) {
-          // Only during scrubbing to avoid interfering with playback
-          preRenderNearbyFrames(
-            currentTime,
-            tracks,
-            mediaFiles,
-            activeProject,
-            async (time: number) => {
-              const tempCanvas = document.createElement("canvas");
-              tempCanvas.width = displayWidth;
-              tempCanvas.height = displayHeight;
-              const tempCtx = tempCanvas.getContext("2d");
-              if (!tempCtx)
-                throw new Error("Failed to create temp canvas context");
-
-              await renderTimelineFrame({
-                ctx: tempCtx,
-                time,
-                canvasWidth: displayWidth,
-                canvasHeight: displayHeight,
-                tracks,
-                mediaFiles,
-                backgroundType: activeProject?.backgroundType,
-                blurIntensity: activeProject?.blurIntensity,
-                backgroundColor:
-                  activeProject?.backgroundType === "blur"
-                    ? undefined
-                    : activeProject?.backgroundColor || "#000000",
-                projectCanvasSize: canvasSize,
-              });
-
-              return tempCtx.getImageData(0, 0, displayWidth, displayHeight);
-            },
-            currentScene?.id,
-            3
-          );
-        } else {
-          // Small lookahead while playing
-          preRenderNearbyFrames(
-            currentTime,
-            tracks,
-            mediaFiles,
-            activeProject,
-            async (time: number) => {
-              const tempCanvas = document.createElement("canvas");
-              tempCanvas.width = displayWidth;
-              tempCanvas.height = displayHeight;
-              const tempCtx = tempCanvas.getContext("2d");
-              if (!tempCtx)
-                throw new Error("Failed to create temp canvas context");
-
-              await renderTimelineFrame({
-                ctx: tempCtx,
-                time,
-                canvasWidth: displayWidth,
-                canvasHeight: displayHeight,
-                tracks,
-                mediaFiles,
-                backgroundType: activeProject?.backgroundType,
-                blurIntensity: activeProject?.blurIntensity,
-                backgroundColor:
-                  activeProject?.backgroundType === "blur"
-                    ? undefined
-                    : activeProject?.backgroundColor || "#000000",
-                projectCanvasSize: canvasSize,
-              });
-
-              return tempCtx.getImageData(0, 0, displayWidth, displayHeight);
-            },
-            currentScene?.id,
-            1
-          );
-        }
-        return;
-      }
-
-      // Cache miss - render from scratch
-      if (!offscreenCanvasRef.current) {
-        const hasOffscreen =
-          typeof (globalThis as unknown as { OffscreenCanvas?: unknown })
-            .OffscreenCanvas !== "undefined";
-        if (hasOffscreen) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          offscreenCanvasRef.current = new (globalThis as any).OffscreenCanvas(
-            displayWidth,
-            displayHeight
-          ) as OffscreenCanvas;
-        } else {
-          const c = document.createElement("canvas");
-          c.width = displayWidth;
-          c.height = displayHeight;
-          offscreenCanvasRef.current = c;
-        }
-      }
-      // Ensure size matches
-      if (
-        offscreenCanvasRef.current &&
-        (offscreenCanvasRef.current as HTMLCanvasElement).getContext
-      ) {
-        const c = offscreenCanvasRef.current as HTMLCanvasElement;
-        if (c.width !== displayWidth || c.height !== displayHeight) {
-          c.width = displayWidth;
-          c.height = displayHeight;
-        }
-      } else {
-        const c = offscreenCanvasRef.current as OffscreenCanvas;
-        // @ts-ignore width/height exist on OffscreenCanvas in modern browsers
-        if (
-          (c as unknown as { width: number }).width !== displayWidth ||
-          (c as unknown as { height: number }).height !== displayHeight
-        ) {
-          // @ts-ignore
-          (c as unknown as { width: number }).width = displayWidth;
-          // @ts-ignore
-          (c as unknown as { height: number }).height = displayHeight;
-        }
-      }
-      const offscreenCanvas = offscreenCanvasRef.current as
-        | HTMLCanvasElement
-        | OffscreenCanvas;
-      const offCtx = (offscreenCanvas as HTMLCanvasElement).getContext
-        ? (offscreenCanvas as HTMLCanvasElement).getContext("2d")
-        : (offscreenCanvas as OffscreenCanvas).getContext("2d");
-      if (!offCtx) return;
-
-      await renderTimelineFrame({
-        ctx: offCtx as CanvasRenderingContext2D,
-        time: currentTime,
-        canvasWidth: displayWidth,
-        canvasHeight: displayHeight,
-        tracks,
-        mediaFiles,
-        backgroundType: activeProject?.backgroundType,
-        blurIntensity: activeProject?.blurIntensity,
-        backgroundColor:
-          activeProject?.backgroundType === "blur"
-            ? undefined
-            : activeProject?.backgroundColor || "#000000",
-        projectCanvasSize: canvasSize,
-      });
-
-      const imageData = (offCtx as CanvasRenderingContext2D).getImageData(
-        0,
-        0,
-        displayWidth,
-        displayHeight
-      );
-      cacheFrame(
-        currentTime,
-        imageData,
-        tracks,
-        mediaFiles,
-        activeProject,
-        currentScene?.id
-      );
-
-      // Blit offscreen to visible canvas
-      mainCtx.clearRect(0, 0, displayWidth, displayHeight);
-      if ((offscreenCanvas as HTMLCanvasElement).getContext) {
-        mainCtx.drawImage(offscreenCanvas as HTMLCanvasElement, 0, 0);
-      } else {
-        mainCtx.drawImage(
-          offscreenCanvas as unknown as CanvasImageSource,
-          0,
-          0
-        );
-      }
-    };
-
-    void draw();
-  }, [
-    activeElements,
-    currentTime,
-    previewDimensions.width,
-    previewDimensions.height,
-    canvasSize.width,
-    canvasSize.height,
-    activeProject?.backgroundType,
-    activeProject?.backgroundColor,
-    getCachedFrame,
-    cacheFrame,
-    preRenderNearbyFrames,
-    isPlaying,
-  ]);
-
-  // Get media elements for blur background (video/image only)
-  const getBlurBackgroundElements = (): ActiveElement[] => {
-    return activeElements.filter(
-      ({ element, mediaItem }) =>
-        element.type === "media" &&
-        mediaItem &&
-        (mediaItem.type === "video" || mediaItem.type === "image") &&
-        element.mediaId !== "test" // Exclude test elements
-    );
-  };
-
-  const blurBackgroundElements = getBlurBackgroundElements();
-
-  // Render blur background layer (handled by canvas now)
-  const renderBlurBackground = () => null;
-
-  // Render an element (canvas handles visuals now). Audio playback to be implemented via Web Audio.
-  const renderElement = (_elementData: ActiveElement) => null;
-
-  return (
-    <>
-      <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm relative">
-        <div
-          ref={containerRef}
-          className="flex-1 flex flex-col items-center justify-center min-h-0 min-w-0"
-        >
-          <div className="flex-1" />
-          {shouldRenderPreview ? (
-            <div
-              ref={previewRef}
-              className="relative overflow-hidden border"
-              style={{
-                width: previewDimensions.width,
-                height: previewDimensions.height,
-                background:
-                  activeProject?.backgroundType === "blur"
-                    ? "transparent"
-                    : activeProject?.backgroundColor || "#000000",
-              }}
-            >
-              {renderBlurBackground()}
-              <canvas
-                ref={canvasRef}
-                style={{
-                  position: "absolute",
-                  left: 0,
-                  top: 0,
-                  width: previewDimensions.width,
-                  height: previewDimensions.height,
-                }}
-                aria-label="Video preview canvas"
-              />
-              {activeElements.length === 0 ? (
-                <></>
-              ) : (
-                activeElements.map((elementData) => renderElement(elementData))
-              )}
-              <LayoutGuideOverlay />
-            </div>
-          ) : null}
-
-          <div className="flex-1" />
-
-          <PreviewToolbar
-            hasAnyElements={hasAnyElements}
-            onToggleExpanded={toggleExpanded}
-            isExpanded={isExpanded}
-            currentTime={currentTime}
-            setCurrentTime={setCurrentTime}
-            toggle={toggle}
-            getTotalDuration={getTotalDuration}
-          />
-        </div>
-      </div>
-
-      {isExpanded && (
-        <FullscreenPreview
-          previewDimensions={previewDimensions}
-          activeProject={activeProject}
-          renderBlurBackground={renderBlurBackground}
-          activeElements={activeElements}
-          renderElement={renderElement}
-          blurBackgroundElements={blurBackgroundElements}
-          hasAnyElements={hasAnyElements}
-          toggleExpanded={toggleExpanded}
-          currentTime={currentTime}
-          setCurrentTime={setCurrentTime}
-          toggle={toggle}
-          getTotalDuration={getTotalDuration}
-        />
-      )}
-    </>
-  );
-}
-
-function FullscreenToolbar({
-  hasAnyElements,
-  onToggleExpanded,
-  currentTime,
-  setCurrentTime,
-  toggle,
-  getTotalDuration,
-}: {
-  hasAnyElements: boolean;
-  onToggleExpanded: () => void;
-  currentTime: number;
-  setCurrentTime: (time: number) => void;
-  toggle: () => void;
-  getTotalDuration: () => number;
-}) {
-  const { isPlaying, seek } = usePlaybackStore();
-  const { activeProject } = useProjectStore();
-  const [isDragging, setIsDragging] = useState(false);
-
-  const totalDuration = getTotalDuration();
-  const progress = totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0;
-
-  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!hasAnyElements) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
-    const newTime = percentage * totalDuration;
-    setCurrentTime(Math.max(0, Math.min(newTime, totalDuration)));
-  };
-
-  const handleTimelineDrag = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!hasAnyElements) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const rect = e.currentTarget.getBoundingClientRect();
-    setIsDragging(true);
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      moveEvent.preventDefault();
-      const dragX = moveEvent.clientX - rect.left;
-      const percentage = Math.max(0, Math.min(1, dragX / rect.width));
-      const newTime = percentage * totalDuration;
-      setCurrentTime(Math.max(0, Math.min(newTime, totalDuration)));
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.userSelect = "";
-    };
-
-    document.body.style.userSelect = "none";
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    handleMouseMove(e.nativeEvent);
-  };
-
-  const skipBackward = () => {
-    const newTime = Math.max(0, currentTime - 1);
-    setCurrentTime(newTime);
-  };
-
-  const skipForward = () => {
-    const newTime = Math.min(totalDuration, currentTime + 1);
-    setCurrentTime(newTime);
-  };
-
-  return (
-    <div
-      data-toolbar
-      className="flex items-center gap-2 p-1 pt-2 w-full text-foreground relative"
-    >
-      <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-foreground/90">
-        <EditableTimecode
-          time={currentTime}
-          duration={totalDuration}
-          format="HH:MM:SS:FF"
-          fps={activeProject?.fps || DEFAULT_FPS}
-          onTimeChange={seek}
-          disabled={!hasAnyElements}
-          className="text-foreground/90 hover:bg-white/10"
-        />
-        <span className="opacity-50">/</span>
-        <span>
-          {formatTimeCode(
-            totalDuration,
-            "HH:MM:SS:FF",
-            activeProject?.fps || DEFAULT_FPS
-          )}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <Button
-          variant="text"
-          size="icon"
-          onClick={skipBackward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-foreground"
-          title="Skip backward 1s"
-        >
-          <SkipBack className="h-3 w-3" />
-        </Button>
-        <Button
-          variant="text"
-          size="icon"
-          onClick={toggle}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-foreground hover:text-foreground/80"
-        >
-          {isPlaying ? (
-            <Pause className="h-3 w-3" />
-          ) : (
-            <Play className="h-3 w-3" />
-          )}
-        </Button>
-        <Button
-          variant="text"
-          size="icon"
-          onClick={skipForward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-foreground hover:text-foreground/80"
-          title="Skip forward 1s"
-        >
-          <SkipForward className="h-3 w-3" />
-        </Button>
-      </div>
-
-      <div className="flex-1 flex items-center gap-2">
-        <div
-          className={cn(
-            "relative h-1 rounded-full cursor-pointer flex-1 bg-foreground/20",
-            !hasAnyElements && "opacity-50 cursor-not-allowed"
-          )}
-          onClick={hasAnyElements ? handleTimelineClick : undefined}
-          onMouseDown={hasAnyElements ? handleTimelineDrag : undefined}
-          style={{ userSelect: "none" }}
-        >
-          <div
-            className={cn(
-              "absolute top-0 left-0 h-full rounded-full bg-foreground",
-              !isDragging && "duration-100"
-            )}
-            style={{ width: `${progress}%` }}
-          />
-          <div
-            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-foreground border border-black/20"
-            style={{ left: `${progress}%` }}
-          />
-        </div>
-      </div>
-
-      <Button
-        variant="text"
-        size="icon"
-        className="size-4! text-foreground/80 hover:text-foreground"
-        onClick={onToggleExpanded}
-        title="Exit fullscreen (Esc)"
-      >
-        <Expand className="size-4!" />
-      </Button>
-    </div>
-  );
-}
-
-function FullscreenPreview({
-  previewDimensions,
-  activeProject,
-  renderBlurBackground,
-  activeElements,
-  renderElement,
-  blurBackgroundElements,
-  hasAnyElements,
-  toggleExpanded,
-  currentTime,
-  setCurrentTime,
-  toggle,
-  getTotalDuration,
-}: {
-  previewDimensions: { width: number; height: number };
-  activeProject: any;
-  renderBlurBackground: () => React.ReactNode;
-  activeElements: ActiveElement[];
-  renderElement: (elementData: ActiveElement, index: number) => React.ReactNode;
-  blurBackgroundElements: ActiveElement[];
-  hasAnyElements: boolean;
-  toggleExpanded: () => void;
-  currentTime: number;
-  setCurrentTime: (time: number) => void;
-  toggle: () => void;
-  getTotalDuration: () => number;
-}) {
-  return (
-    <div className="fixed inset-0 z-9999 flex flex-col">
-      <div className="flex-1 flex items-center justify-center bg-background">
-        <div
-          className="relative overflow-hidden border border-border m-3"
-          style={{
-            width: previewDimensions.width,
-            height: previewDimensions.height,
-            background:
-              activeProject?.backgroundType === "blur"
-                ? "#1a1a1a"
-                : activeProject?.backgroundColor || "#1a1a1a",
-          }}
-        >
-          {renderBlurBackground()}
-          {activeElements.length === 0 ? (
-            <div className="absolute inset-0 flex items-center justify-center text-white/60">
-              No elements at current time
-            </div>
-          ) : (
-            activeElements.map((elementData, index) =>
-              renderElement(elementData, index)
-            )
-          )}
-          <LayoutGuideOverlay />
-        </div>
-      </div>
-      <div className="p-4 bg-background">
-        <FullscreenToolbar
-          hasAnyElements={hasAnyElements}
-          onToggleExpanded={toggleExpanded}
-          currentTime={currentTime}
-          setCurrentTime={setCurrentTime}
-          toggle={toggle}
-          getTotalDuration={getTotalDuration}
-        />
-      </div>
-    </div>
-  );
-}
-
-function PreviewToolbar({
-  hasAnyElements,
-  onToggleExpanded,
-  isExpanded,
-  currentTime,
-  setCurrentTime,
-  toggle,
-  getTotalDuration,
-}: {
-  hasAnyElements: boolean;
-  onToggleExpanded: () => void;
-  isExpanded: boolean;
-  currentTime: number;
-  setCurrentTime: (time: number) => void;
-  toggle: () => void;
-  getTotalDuration: () => number;
-}) {
-  const { isPlaying } = usePlaybackStore();
-  const { layoutGuide, toggleLayoutGuide } = useEditorStore();
-
-  if (isExpanded) {
-    return (
-      <FullscreenToolbar
-        {...{
-          hasAnyElements,
-          onToggleExpanded,
-          currentTime,
-          setCurrentTime,
-          toggle,
-          getTotalDuration,
-        }}
-      />
-    );
-  }
-
-  return (
-    <div
-      data-toolbar
-      className="flex justify-end gap-2 h-auto pb-5 pr-5 pt-4 w-full"
-    >
-      <div className="flex items-center gap-2">
-        <Button
-          variant="text"
-          size="icon"
-          onClick={toggle}
-          disabled={!hasAnyElements}
-          className="h-auto p-0"
-        >
-          {isPlaying ? (
-            <Pause className="h-3 w-3" />
-          ) : (
-            <Play className="h-3 w-3" />
-          )}
-        </Button>
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant="text"
-              size="icon"
-              className="h-auto p-0 mr-1"
-              title="Toggle layout guide"
-            >
-              <SocialsIcon className="!size-6" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80">
-            <div className="grid gap-4">
-              <div className="space-y-2">
-                <h4 className="font-medium leading-none">Layout guide</h4>
-                <p className="text-sm text-muted-foreground">
-                  Show platform-specific layout guides to help align your
-                  content with interface elements like profile pictures,
-                  usernames, and interaction buttons.
-                </p>
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="none"
-                    checked={layoutGuide.platform === null}
-                    onCheckedChange={() =>
-                      toggleLayoutGuide(layoutGuide.platform || "tiktok")
-                    }
-                  />
-                  <Label htmlFor="none">None</Label>
-                </div>
-                {Object.entries(PLATFORM_LAYOUTS).map(([platform, label]) => (
-                  <div key={platform} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={platform}
-                      checked={layoutGuide.platform === platform}
-                      onCheckedChange={() =>
-                        toggleLayoutGuide(platform as PlatformLayout)
-                      }
-                    />
-                    <Label htmlFor={platform}>{label}</Label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </PopoverContent>
-        </Popover>
-        <Button
-          variant="text"
-          size="icon"
-          className="size-4!"
-          onClick={onToggleExpanded}
-          title="Enter fullscreen"
-        >
-          <Expand className="size-4!" />
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
deleted file mode 100644
index 8d69e36a..00000000
--- a/apps/web/src/components/editor/properties-panel/audio-properties.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MediaElement } from "@/types/timeline";
-
-export function AudioProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Audio properties</div>;
-}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
deleted file mode 100644
index 150f9512..00000000
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { useMediaStore } from "@/stores/media-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { ScrollArea } from "../../ui/scroll-area";
-import { AudioProperties } from "./audio-properties";
-import { MediaProperties } from "./media-properties";
-import { TextProperties } from "./text-properties";
-import { SquareSlashIcon } from "lucide-react";
-
-export function PropertiesPanel() {
-  const { selectedElements, tracks } = useTimelineStore();
-  const { mediaFiles } = useMediaStore();
-
-  return (
-    <>
-      {selectedElements.length > 0 ? (
-        <ScrollArea className="h-full bg-panel rounded-sm">
-          {selectedElements.map(({ trackId, elementId }) => {
-            const track = tracks.find((t) => t.id === trackId);
-            const element = track?.elements.find((e) => e.id === elementId);
-
-            if (element?.type === "text") {
-              return (
-                <div key={elementId}>
-                  <TextProperties element={element} trackId={trackId} />
-                </div>
-              );
-            }
-            if (element?.type === "media") {
-              const mediaFile = mediaFiles.find(
-                (file) => file.id === element.mediaId
-              );
-
-              if (mediaFile?.type === "audio") {
-                return <AudioProperties key={elementId} element={element} />;
-              }
-
-              return (
-                <div key={elementId}>
-                  <MediaProperties element={element} />
-                </div>
-              );
-            }
-            return null;
-          })}
-        </ScrollArea>
-      ) : (
-        <EmptyView />
-      )}
-    </>
-  );
-}
-
-function EmptyView() {
-  return (
-    <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
-      <SquareSlashIcon
-        className="w-10 h-10 text-muted-foreground"
-        strokeWidth={1.5}
-      />
-      <div className="flex flex-col gap-2 text-center">
-        <p className="text-lg font-medium">It’s empty here</p>
-        <p className="text-sm text-muted-foreground text-balance">
-          Click an element on the timeline to edit its properties
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/properties-panel/media-properties.tsx b/apps/web/src/components/editor/properties-panel/media-properties.tsx
deleted file mode 100644
index 4ea28bb2..00000000
--- a/apps/web/src/components/editor/properties-panel/media-properties.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MediaElement } from "@/types/timeline";
-
-export function MediaProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Media properties</div>;
-}
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
deleted file mode 100644
index f7d5dbda..00000000
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { cn } from "@/lib/utils";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-
-interface PropertyItemProps {
-  direction?: "row" | "column";
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function PropertyItem({
-  direction = "row",
-  children,
-  className,
-}: PropertyItemProps) {
-  return (
-    <div
-      className={cn(
-        "flex gap-2",
-        direction === "row"
-          ? "items-center justify-between gap-6"
-          : "flex-col gap-1.5",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function PropertyItemLabel({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <label className={cn("text-xs text-muted-foreground", className)}>
-      {children}
-    </label>
-  );
-}
-
-export function PropertyItemValue({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
-}
-
-interface PropertyGroupProps {
-  title: string;
-  children: React.ReactNode;
-  defaultExpanded?: boolean;
-  className?: string;
-  titleClassName?: string;
-}
-
-export function PropertyGroup({
-  title,
-  children,
-  defaultExpanded = true,
-  className,
-  titleClassName,
-}: PropertyGroupProps) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-
-  return (
-    <PropertyItem direction="column" className={cn("gap-3", className)}>
-      <div
-        className="flex items-center gap-1.5 cursor-pointer"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <PropertyItemLabel className={cn("cursor-pointer", titleClassName)}>
-          {title}
-        </PropertyItemLabel>
-        <ChevronDown className={cn("size-3", !isExpanded && "-rotate-90")} />
-      </div>
-      {isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
-    </PropertyItem>
-  );
-}
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
deleted file mode 100644
index deaee157..00000000
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-import { Textarea } from "@/components/ui/textarea";
-import { FontPicker } from "@/components/ui/font-picker";
-import { FontFamily } from "@/constants/font-constants";
-import { TextElement } from "@/types/timeline";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { useState, useRef } from "react";
-import { PanelBaseView } from "@/components/editor/panel-base-view";
-import {
-  TEXT_PROPERTIES_TABS,
-  isTextPropertiesTab,
-  useTextPropertiesStore,
-} from "@/stores/text-properties-store";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-} from "./property-item";
-import { ColorPicker } from "@/components/ui/color-picker";
-import { cn, uppercase } from "@/lib/utils";
-import { Grid2x2 } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-export function TextProperties({
-  element,
-  trackId,
-}: {
-  element: TextElement;
-  trackId: string;
-}) {
-  const { updateTextElement } = useTimelineStore();
-  const { activeTab, setActiveTab } = useTextPropertiesStore();
-  const containerRef = useRef<HTMLDivElement>(null);
-  // Local state for input values to allow temporary empty/invalid states
-  const [fontSizeInput, setFontSizeInput] = useState(
-    element.fontSize.toString()
-  );
-  const [opacityInput, setOpacityInput] = useState(
-    Math.round(element.opacity * 100).toString()
-  );
-
-  // Track the last selected color for toggling
-  const lastSelectedColor = useRef("#000000");
-
-  const parseAndValidateNumber = (
-    value: string,
-    min: number,
-    max: number,
-    fallback: number
-  ): number => {
-    const parsed = parseInt(value, 10);
-    if (isNaN(parsed)) return fallback;
-    return Math.max(min, Math.min(max, parsed));
-  };
-
-  const handleFontSizeChange = (value: string) => {
-    setFontSizeInput(value);
-
-    if (value.trim() !== "") {
-      const fontSize = parseAndValidateNumber(value, 8, 300, element.fontSize);
-      updateTextElement(trackId, element.id, { fontSize });
-    }
-  };
-
-  const handleFontSizeBlur = () => {
-    const fontSize = parseAndValidateNumber(
-      fontSizeInput,
-      8,
-      300,
-      element.fontSize
-    );
-    setFontSizeInput(fontSize.toString());
-    updateTextElement(trackId, element.id, { fontSize });
-  };
-
-  const handleOpacityChange = (value: string) => {
-    setOpacityInput(value);
-
-    if (value.trim() !== "") {
-      const opacityPercent = parseAndValidateNumber(
-        value,
-        0,
-        100,
-        Math.round(element.opacity * 100)
-      );
-      updateTextElement(trackId, element.id, { opacity: opacityPercent / 100 });
-    }
-  };
-
-  const handleOpacityBlur = () => {
-    const opacityPercent = parseAndValidateNumber(
-      opacityInput,
-      0,
-      100,
-      Math.round(element.opacity * 100)
-    );
-    setOpacityInput(opacityPercent.toString());
-    updateTextElement(trackId, element.id, { opacity: opacityPercent / 100 });
-  };
-
-  // Update last selected color when a new color is picked
-  const handleColorChange = (color: string) => {
-    if (color !== "transparent") {
-      lastSelectedColor.current = color;
-    }
-    updateTextElement(trackId, element.id, { backgroundColor: color });
-  };
-
-  // Toggle between transparent and last selected color
-  const handleTransparentToggle = (isTransparent: boolean) => {
-    const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
-    updateTextElement(trackId, element.id, { backgroundColor: newColor });
-  };
-
-  return (
-    <PanelBaseView
-      defaultTab="transform"
-      value={activeTab}
-      onValueChange={(v) => {
-        if (isTextPropertiesTab(v)) setActiveTab(v);
-      }}
-      ref={containerRef}
-      tabs={TEXT_PROPERTIES_TABS.map((t) => ({
-        value: t.value,
-        label: t.label,
-        content:
-          t.value === "transform" ? (
-            <div className="space-y-6"></div>
-          ) : (
-            <div className="space-y-6">
-              <Textarea
-                placeholder="Name"
-                defaultValue={element.content}
-                className="min-h-18 resize-none bg-panel-accent"
-                onChange={(e) =>
-                  updateTextElement(trackId, element.id, {
-                    content: e.target.value,
-                  })
-                }
-              />
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Font</PropertyItemLabel>
-                <PropertyItemValue>
-                  <FontPicker
-                    defaultValue={element.fontFamily}
-                    onValueChange={(value: FontFamily) =>
-                      updateTextElement(trackId, element.id, {
-                        fontFamily: value,
-                      })
-                    }
-                  />
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Style</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Button
-                      variant={
-                        element.fontWeight === "bold" ? "default" : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        updateTextElement(trackId, element.id, {
-                          fontWeight:
-                            element.fontWeight === "bold" ? "normal" : "bold",
-                        })
-                      }
-                      className="h-8 px-3 font-bold"
-                    >
-                      B
-                    </Button>
-                    <Button
-                      variant={
-                        element.fontStyle === "italic" ? "default" : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        updateTextElement(trackId, element.id, {
-                          fontStyle:
-                            element.fontStyle === "italic"
-                              ? "normal"
-                              : "italic",
-                        })
-                      }
-                      className="h-8 px-3 italic"
-                    >
-                      I
-                    </Button>
-                    <Button
-                      variant={
-                        element.textDecoration === "underline"
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        updateTextElement(trackId, element.id, {
-                          textDecoration:
-                            element.textDecoration === "underline"
-                              ? "none"
-                              : "underline",
-                        })
-                      }
-                      className="h-8 px-3 underline"
-                    >
-                      U
-                    </Button>
-                    <Button
-                      variant={
-                        element.textDecoration === "line-through"
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        updateTextElement(trackId, element.id, {
-                          textDecoration:
-                            element.textDecoration === "line-through"
-                              ? "none"
-                              : "line-through",
-                        })
-                      }
-                      className="h-8 px-3 line-through"
-                    >
-                      S
-                    </Button>
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Font size</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Slider
-                      value={[element.fontSize]}
-                      min={8}
-                      max={300}
-                      step={1}
-                      onValueChange={([value]) => {
-                        updateTextElement(trackId, element.id, {
-                          fontSize: value,
-                        });
-                        setFontSizeInput(value.toString());
-                      }}
-                      className="w-full"
-                    />
-                    <Input
-                      type="number"
-                      value={fontSizeInput}
-                      min={8}
-                      max={300}
-                      onChange={(e) => handleFontSizeChange(e.target.value)}
-                      onBlur={handleFontSizeBlur}
-                      className="w-12 px-2 !text-xs h-7 rounded-sm text-center bg-panel-accent
-               [appearance:textfield]
-               [&::-webkit-outer-spin-button]:appearance-none
-               [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Color</PropertyItemLabel>
-                <PropertyItemValue>
-                  <ColorPicker
-                    value={uppercase(
-                      (element.color || "FFFFFF").replace("#", "")
-                    )}
-                    onChange={(color) => {
-                      updateTextElement(trackId, element.id, {
-                        color: `#${color}`,
-                      });
-                    }}
-                    containerRef={containerRef}
-                  />
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Opacity</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Slider
-                      value={[element.opacity * 100]}
-                      min={0}
-                      max={100}
-                      step={1}
-                      onValueChange={([value]) => {
-                        updateTextElement(trackId, element.id, {
-                          opacity: value / 100,
-                        });
-                        setOpacityInput(value.toString());
-                      }}
-                      className="w-full"
-                    />
-                    <Input
-                      type="number"
-                      value={opacityInput}
-                      min={0}
-                      max={100}
-                      onChange={(e) => handleOpacityChange(e.target.value)}
-                      onBlur={handleOpacityBlur}
-                      className="w-12 !text-xs h-7 rounded-sm text-center bg-panel-accent
-               [appearance:textfield]
-               [&::-webkit-outer-spin-button]:appearance-none
-               [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Background</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <ColorPicker
-                      value={uppercase(
-                        element.backgroundColor === "transparent"
-                          ? lastSelectedColor.current.replace("#", "")
-                          : (element.backgroundColor || "#000000").replace(
-                              "#",
-                              ""
-                            )
-                      )}
-                      onChange={(color) => handleColorChange(`#${color}`)}
-                      containerRef={containerRef}
-                      className={
-                        element.backgroundColor === "transparent"
-                          ? "opacity-50 pointer-events-none"
-                          : ""
-                      }
-                    />
-
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onClick={() =>
-                            handleTransparentToggle(
-                              element.backgroundColor !== "transparent"
-                            )
-                          }
-                          className="size-9 rounded-full bg-panel-accent p-0 overflow-hidden"
-                        >
-                          <Grid2x2
-                            className={cn(
-                              "text-foreground",
-                              element.backgroundColor === "transparent" &&
-                                "text-primary"
-                            )}
-                          />
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>Transparent background</TooltipContent>
-                    </Tooltip>
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-            </div>
-          ),
-      }))}
-    />
-  );
-}
diff --git a/apps/web/src/components/editor/scenes-view.tsx b/apps/web/src/components/editor/scenes-view.tsx
index b5432b53..f7576377 100644
--- a/apps/web/src/components/editor/scenes-view.tsx
+++ b/apps/web/src/components/editor/scenes-view.tsx
@@ -1,198 +1,219 @@
 "use client";
 
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
 } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
-import { useSceneStore } from "@/stores/scene-store";
 import { Check, ListCheck, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn } from "@/utils/ui";
 import { useState } from "react";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+	DialogTrigger,
 } from "@/components/ui/dialog";
+import { canDeleteScene, getMainScene } from "@/lib/scenes";
+import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
 
 export function ScenesView({ children }: { children: React.ReactNode }) {
-  const { scenes, currentScene, switchToScene, deleteScene } = useSceneStore();
-  const [isSelectMode, setIsSelectMode] = useState(false);
-  const [selectedScenes, setSelectedScenes] = useState<Set<string>>(new Set());
+	const editor = useEditor();
+	const scenes = editor.scenes.getScenes();
+	const currentScene = editor.scenes.getActiveScene();
+	const [isSelectMode, setIsSelectMode] = useState(false);
+	const [selectedScenes, setSelectedScenes] = useState<Set<string>>(new Set());
 
-  const handleSceneSwitch = async (sceneId: string) => {
-    if (isSelectMode) {
-      toggleSceneSelection(sceneId);
-      return;
-    }
+	const handleSceneSwitch = async (sceneId: string) => {
+		if (isSelectMode) {
+			toggleSceneSelection({ sceneId });
+			return;
+		}
 
-    try {
-      await switchToScene({ sceneId });
-    } catch (error) {
-      console.error("Failed to switch scene:", error);
-    }
-  };
+		try {
+			await editor.scenes.switchToScene({ sceneId });
+		} catch (error) {
+			console.error("Failed to switch scene:", error);
+		}
+	};
 
-  const toggleSceneSelection = (sceneId: string) => {
-    setSelectedScenes((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(sceneId)) {
-        newSet.delete(sceneId);
-      } else {
-        newSet.add(sceneId);
-      }
-      return newSet;
-    });
-  };
+	const toggleSceneSelection = ({ sceneId }: { sceneId: string }) => {
+		setSelectedScenes((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(sceneId)) {
+				newSet.delete(sceneId);
+			} else {
+				newSet.add(sceneId);
+			}
+			return newSet;
+		});
+	};
 
-  const handleSelectMode = () => {
-    setIsSelectMode(!isSelectMode);
-    setSelectedScenes(new Set());
-  };
+	const handleSelectMode = () => {
+		setIsSelectMode(!isSelectMode);
+		setSelectedScenes(new Set());
+	};
 
-  const handleDeleteSelected = async () => {
-    for (const sceneId of selectedScenes) {
-      const scene = scenes.find((s) => s.id === sceneId);
-      if (scene && !scene.isMain) {
-        try {
-          await deleteScene({ sceneId });
-        } catch (error) {
-          console.error("Failed to delete scene:", error);
-        }
-      }
-    }
-    setSelectedScenes(new Set());
-    setIsSelectMode(false);
-  };
+	const handleDeleteSelected = async () => {
+		for (const sceneId of selectedScenes) {
+			const scene = scenes.find((scene) => scene.id === sceneId);
+			if (!scene) {
+				continue;
+			}
 
-  return (
-    <Sheet>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>
-            {isSelectMode ? `Select scenes (${selectedScenes.size})` : "Scenes"}
-          </SheetTitle>
-          <SheetDescription>
-            {isSelectMode
-              ? "Select scenes to delete"
-              : "Switch between scenes in your project"}
-          </SheetDescription>
-        </SheetHeader>
-        <div className="py-4 flex flex-col gap-4">
-          <div className="flex items-center gap-2">
-            <Button
-              className="rounded-md"
-              variant={isSelectMode ? "default" : "outline"}
-              size="sm"
-              onClick={handleSelectMode}
-            >
-              <ListCheck />
-              {isSelectMode ? "Cancel" : "Select"}
-            </Button>
-            {isSelectMode && (
-              <DeleteDialog
-                count={selectedScenes.size}
-                onDelete={handleDeleteSelected}
-                disabled={Array.from(selectedScenes).some(
-                  (id) => scenes.find((s) => s.id === id)?.isMain
-                )}
-              >
-                <Button className="rounded-md" variant="destructive" size="sm">
-                  <Trash2 />
-                  Delete ({selectedScenes.size})
-                </Button>
-              </DeleteDialog>
-            )}
-          </div>
-          {scenes.length === 0 ? (
-            <div className="text-sm text-muted-foreground">
-              No scenes available
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {scenes.map((scene) => (
-                <Button
-                  key={scene.id}
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-between font-normal",
-                    currentScene?.id === scene.id &&
-                      !isSelectMode &&
-                      "border-primary !text-primary",
-                    isSelectMode &&
-                      selectedScenes.has(scene.id) &&
-                      "bg-accent border-foreground/30"
-                  )}
-                  onClick={() => handleSceneSwitch(scene.id)}
-                >
-                  <span>{scene.name}</span>
-                  <div className="flex items-center gap-2">
-                    {((isSelectMode && selectedScenes.has(scene.id)) ||
-                      (!isSelectMode && currentScene?.id === scene.id)) && (
-                      <Check className="h-4 w-4" />
-                    )}
-                  </div>
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
+			const { canDelete, reason } = canDeleteScene({ scene });
+			if (!canDelete) {
+				toast.error(reason || "Failed to delete scene");
+				continue;
+			}
+
+			try {
+				await editor.scenes.deleteScene({ sceneId });
+			} catch (error) {
+				console.error("Failed to delete scene:", error);
+			}
+		}
+		setSelectedScenes(new Set());
+		setIsSelectMode(false);
+	};
+
+	const isMainSceneSelected = (() => {
+		const mainScene = getMainScene({ scenes });
+		return Boolean(mainScene?.id && selectedScenes.has(mainScene.id));
+	})();
+
+	return (
+		<Sheet>
+			<SheetTrigger asChild>{children}</SheetTrigger>
+			<SheetContent>
+				<SheetHeader>
+					<SheetTitle>
+						{isSelectMode ? `Select scenes (${selectedScenes.size})` : "Scenes"}
+					</SheetTitle>
+					<SheetDescription>
+						{isSelectMode
+							? "Select scenes to delete"
+							: "Switch between scenes in your project"}
+					</SheetDescription>
+				</SheetHeader>
+				<div className="flex flex-col gap-4 py-4">
+					<div className="flex items-center gap-2">
+						<Button
+							className="rounded-md"
+							variant={isSelectMode ? "default" : "outline"}
+							size="sm"
+							onClick={handleSelectMode}
+						>
+							<ListCheck />
+							{isSelectMode ? "Cancel" : "Select"}
+						</Button>
+						{isSelectMode && (
+							<DeleteDialog
+								count={selectedScenes.size}
+								onDelete={handleDeleteSelected}
+								disabled={isMainSceneSelected}
+								trigger={
+									<Button
+										className="rounded-md"
+										variant="destructive"
+										disabled={isMainSceneSelected}
+										size="sm"
+									>
+										<Trash2 />
+										Delete ({selectedScenes.size})
+									</Button>
+								}
+							/>
+						)}
+					</div>
+					{scenes.length === 0 ? (
+						<div className="text-muted-foreground text-sm">
+							No scenes available
+						</div>
+					) : (
+						<div className="space-y-2">
+							{scenes.map((scene) => (
+								<Button
+									key={scene.id}
+									variant="outline"
+									className={cn(
+										"w-full justify-between font-normal",
+										currentScene?.id === scene.id &&
+											!isSelectMode &&
+											"border-primary !text-primary",
+										isSelectMode &&
+											selectedScenes.has(scene.id) &&
+											"bg-accent border-foreground/30",
+									)}
+									onClick={() => handleSceneSwitch(scene.id)}
+								>
+									<span>{scene.name}</span>
+									<div className="flex items-center gap-2">
+										{((isSelectMode && selectedScenes.has(scene.id)) ||
+											(!isSelectMode && currentScene?.id === scene.id)) && (
+											<Check className="size-4" />
+										)}
+									</div>
+								</Button>
+							))}
+						</div>
+					)}
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
 }
 
 function DeleteDialog({
-  count,
-  onDelete,
-  disabled,
-  children,
+	count,
+	onDelete,
+	disabled,
+	trigger,
 }: {
-  count: number;
-  onDelete: () => void;
-  disabled?: boolean;
-  children: React.ReactNode;
+	count: number;
+	onDelete: () => void;
+	disabled?: boolean;
+	trigger: React.ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(false);
 
-  const handleDelete = () => {
-    onDelete();
-    setOpen(false);
-  };
+	const handleDelete = () => {
+		onDelete();
+		setOpen(false);
+	};
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Scenes</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete {count} scene
-            {count === 1 ? "" : "s"}? This action cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={disabled}
-          >
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>{trigger}</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Delete Scenes</DialogTitle>
+					<DialogDescription>
+						Are you sure you want to delete {count} scene
+						{count === 1 ? "" : "s"}? This action cannot be undone.
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => setOpen(false)}>
+						Cancel
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={handleDelete}
+						disabled={disabled}
+					>
+						Delete
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index ca9d799f..32adbfd8 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/apps/web/src/components/editor/selection-box.tsx
@@ -1,55 +1,50 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useMemo } from "react";
 
 interface SelectionBoxProps {
-  startPos: { x: number; y: number } | null;
-  currentPos: { x: number; y: number } | null;
-  containerRef: React.RefObject<HTMLElement>;
-  isActive: boolean;
+	startPos: { x: number; y: number } | null;
+	currentPos: { x: number; y: number } | null;
+	containerRef: React.RefObject<HTMLElement>;
+	isActive: boolean;
 }
 
 export function SelectionBox({
-  startPos,
-  currentPos,
-  containerRef,
-  isActive,
+	startPos,
+	currentPos,
+	containerRef,
+	isActive,
 }: SelectionBoxProps) {
-  const selectionBoxRef = useRef<HTMLDivElement>(null);
+	const selectionBoxStyle = useMemo(() => {
+		if (!isActive || !startPos || !currentPos || !containerRef.current) {
+			return null;
+		}
 
-  useEffect(() => {
-    if (!isActive || !startPos || !currentPos || !containerRef.current) return;
+		const containerRect = containerRef.current.getBoundingClientRect();
+		const startX = startPos.x - containerRect.left;
+		const startY = startPos.y - containerRect.top;
+		const currentX = currentPos.x - containerRect.left;
+		const currentY = currentPos.y - containerRect.top;
 
-    const container = containerRef.current;
-    const containerRect = container.getBoundingClientRect();
+		const left = Math.min(startX, currentX);
+		const top = Math.min(startY, currentY);
+		const width = Math.abs(currentX - startX);
+		const height = Math.abs(currentY - startY);
 
-    // Calculate relative positions within the container
-    const startX = startPos.x - containerRect.left;
-    const startY = startPos.y - containerRect.top;
-    const currentX = currentPos.x - containerRect.left;
-    const currentY = currentPos.y - containerRect.top;
+		return {
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+		};
+	}, [containerRef, currentPos, isActive, startPos]);
 
-    // Calculate the selection rectangle bounds
-    const left = Math.min(startX, currentX);
-    const top = Math.min(startY, currentY);
-    const width = Math.abs(currentX - startX);
-    const height = Math.abs(currentY - startY);
+	if (!selectionBoxStyle) return null;
 
-    // Update the selection box position and size
-    if (selectionBoxRef.current) {
-      selectionBoxRef.current.style.left = `${left}px`;
-      selectionBoxRef.current.style.top = `${top}px`;
-      selectionBoxRef.current.style.width = `${width}px`;
-      selectionBoxRef.current.style.height = `${height}px`;
-    }
-  }, [startPos, currentPos, isActive, containerRef]);
-
-  if (!isActive || !startPos || !currentPos) return null;
-
-  return (
-    <div
-      ref={selectionBoxRef}
-      className="absolute pointer-events-none z-50 bg-foreground/10"
-    />
-  );
+	return (
+		<div
+			style={selectionBoxStyle}
+			className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx
deleted file mode 100644
index ac884b71..00000000
--- a/apps/web/src/components/editor/snap-indicator.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { SnapPoint } from "@/hooks/use-timeline-snapping";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import type { TimelineTrack } from "@/types/timeline";
-import { useState, useEffect } from "react";
-
-interface SnapIndicatorProps {
-  snapPoint: SnapPoint | null;
-  zoomLevel: number;
-  isVisible: boolean;
-  tracks: TimelineTrack[];
-  timelineRef: React.RefObject<HTMLDivElement>;
-  trackLabelsRef?: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-}
-
-export function SnapIndicator({
-  snapPoint,
-  zoomLevel,
-  isVisible,
-  tracks,
-  timelineRef,
-  trackLabelsRef,
-  tracksScrollRef,
-}: SnapIndicatorProps) {
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  // Track scroll position to lock snap indicator to frame
-  useEffect(() => {
-    const tracksViewport = tracksScrollRef.current;
-
-    if (!tracksViewport) return;
-
-    const handleScroll = () => {
-      setScrollLeft(tracksViewport.scrollLeft);
-    };
-
-    // Set initial scroll position
-    setScrollLeft(tracksViewport.scrollLeft);
-
-    tracksViewport.addEventListener("scroll", handleScroll);
-    return () => tracksViewport.removeEventListener("scroll", handleScroll);
-  }, [tracksScrollRef]);
-
-  if (!isVisible || !snapPoint) {
-    return null;
-  }
-
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
-
-  // Get dynamic track labels width, fallback to 0 if no tracks or no ref
-  const trackLabelsWidth =
-    tracks.length > 0 && trackLabelsRef?.current
-      ? trackLabelsRef.current.offsetWidth
-      : 0;
-
-  // Calculate position locked to timeline content (accounting for scroll)
-  const timelinePosition =
-    snapPoint.time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const leftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
-
-  return (
-    <div
-      className="absolute pointer-events-none z-90"
-      style={{
-        left: `${leftPosition}px`,
-        top: 0,
-        height: `${totalHeight}px`,
-        width: "2px",
-      }}
-    >
-      <div className={"w-0.5 h-full bg-primary/40 opacity-80"} />
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
deleted file mode 100644
index f2b0568d..00000000
--- a/apps/web/src/components/editor/speed-control.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Slider } from "../ui/slider";
-import { Label } from "../ui/label";
-import { Button } from "../ui/button";
-import { usePlaybackStore } from "@/stores/playback-store";
-
-const SPEED_PRESETS = [
-  { label: "0.5x", value: 0.5 },
-  { label: "1x", value: 1.0 },
-  { label: "1.5x", value: 1.5 },
-  { label: "2x", value: 2.0 },
-];
-
-export function SpeedControl() {
-  const { speed, setSpeed } = usePlaybackStore();
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-sm font-medium">Playback Speed</h3>
-      <div className="space-y-4">
-        <div className="flex gap-2">
-          {SPEED_PRESETS.map((preset) => (
-            <Button
-              key={preset.value}
-              variant={speed === preset.value ? "default" : "outline"}
-              className="flex-1"
-              onClick={() => setSpeed(preset.value)}
-            >
-              {preset.label}
-            </Button>
-          ))}
-        </div>
-        <div className="space-y-1">
-          <Label>Custom ({speed.toFixed(1)}x)</Label>
-          <Slider
-            value={[speed]}
-            min={0.1}
-            max={2.0}
-            step={0.1}
-            onValueChange={(value) => setSpeed(value[0])}
-            className="mt-2"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/timeline/audio-waveform.tsx b/apps/web/src/components/editor/timeline/audio-waveform.tsx
new file mode 100644
index 00000000..bbc5cb83
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/audio-waveform.tsx
@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
+
+interface AudioWaveformProps {
+	audioUrl?: string;
+	audioBuffer?: AudioBuffer;
+	height?: number;
+	className?: string;
+}
+
+function extractPeaks({
+	buffer,
+	length = 512,
+}: {
+	buffer: AudioBuffer;
+	length?: number;
+}): number[][] {
+	const channels = buffer.numberOfChannels;
+	const peaks: number[][] = [];
+
+	for (let c = 0; c < channels; c++) {
+		const data = buffer.getChannelData(c);
+		const step = Math.floor(data.length / length);
+		const channelPeaks: number[] = [];
+
+		for (let i = 0; i < length; i++) {
+			const start = i * step;
+			const end = Math.min(start + step, data.length);
+			let max = 0;
+			for (let j = start; j < end; j++) {
+				const abs = Math.abs(data[j]);
+				if (abs > max) max = abs;
+			}
+			channelPeaks.push(max);
+		}
+		peaks.push(channelPeaks);
+	}
+
+	return peaks;
+}
+
+export function AudioWaveform({
+	audioUrl,
+	audioBuffer,
+	height = 32,
+	className = "",
+}: AudioWaveformProps) {
+	const waveformRef = useRef<HTMLDivElement>(null);
+	const wavesurfer = useRef<WaveSurfer | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(false);
+
+	useEffect(() => {
+		let mounted = true;
+		const ws = wavesurfer.current;
+
+		const initWaveSurfer = async () => {
+			if (!waveformRef.current || (!audioUrl && !audioBuffer)) return;
+
+			try {
+				if (ws) {
+					wavesurfer.current = null;
+				}
+
+				const newWaveSurfer = WaveSurfer.create({
+					container: waveformRef.current,
+					waveColor: "rgba(255, 255, 255, 0.6)",
+					progressColor: "rgba(255, 255, 255, 0.9)",
+					cursorColor: "transparent",
+					barWidth: 2,
+					barGap: 1,
+					height,
+					normalize: true,
+					interact: false,
+				});
+
+				if (mounted) {
+					wavesurfer.current = newWaveSurfer;
+				} else {
+					try {
+						newWaveSurfer.destroy();
+					} catch {}
+					return;
+				}
+
+				newWaveSurfer.on("ready", () => {
+					if (mounted) {
+						setIsLoading(false);
+						setError(false);
+					}
+				});
+
+				newWaveSurfer.on("error", (err) => {
+					if (mounted) {
+						console.error("WaveSurfer error:", err);
+						setError(true);
+						setIsLoading(false);
+					}
+				});
+
+				if (audioBuffer) {
+					const peaks = extractPeaks({ buffer: audioBuffer });
+					newWaveSurfer.load("", peaks, audioBuffer.duration);
+				} else if (audioUrl) {
+					await newWaveSurfer.load(audioUrl);
+				}
+			} catch (err) {
+				if (mounted) {
+					console.error("Failed to initialize WaveSurfer:", err);
+					setError(true);
+					setIsLoading(false);
+				}
+			}
+		};
+
+		if (ws) {
+			const wsToDestroy = ws;
+			wavesurfer.current = null;
+
+			requestAnimationFrame(() => {
+				try {
+					wsToDestroy.destroy();
+				} catch {}
+				if (mounted) {
+					initWaveSurfer();
+				}
+			});
+		} else {
+			initWaveSurfer();
+		}
+
+		return () => {
+			mounted = false;
+
+			const wsToDestroy = wavesurfer.current;
+
+			wavesurfer.current = null;
+
+			if (wsToDestroy) {
+				requestAnimationFrame(() => {
+					try {
+						wsToDestroy.destroy();
+					} catch {}
+				});
+			}
+		};
+	}, [audioUrl, audioBuffer, height]);
+
+	if (error) {
+		return (
+			<div
+				className={`flex items-center justify-center ${className}`}
+				style={{ height }}
+			>
+				<span className="text-foreground/60 text-xs">Audio unavailable</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className={`relative ${className}`}>
+			{isLoading && (
+				<div className="absolute inset-0 flex items-center justify-center">
+					<span className="text-foreground/60 text-xs">Loading...</span>
+				</div>
+			)}
+			<div
+				ref={waveformRef}
+				className={`w-full ${isLoading ? "opacity-0" : "opacity-100"}`}
+				style={{ height }}
+			/>
+		</div>
+	);
+}
+
+export default AudioWaveform;
diff --git a/apps/web/src/components/editor/timeline/bookmarks.tsx b/apps/web/src/components/editor/timeline/bookmarks.tsx
new file mode 100644
index 00000000..cfcb1e23
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/bookmarks.tsx
@@ -0,0 +1,111 @@
+import { useEditor } from "@/hooks/use-editor";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { getSnappedSeekTime } from "@/lib/time";
+import { Bookmark02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+
+interface TimelineBookmarksRowProps {
+	zoomLevel: number;
+	dynamicTimelineWidth: number;
+	handleWheel: (e: React.WheelEvent) => void;
+	handleTimelineContentClick: (e: React.MouseEvent) => void;
+	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
+	handleRulerMouseDown: (e: React.MouseEvent) => void;
+}
+
+export function TimelineBookmarksRow({
+	zoomLevel,
+	dynamicTimelineWidth,
+	handleWheel,
+	handleTimelineContentClick,
+	handleRulerTrackingMouseDown,
+	handleRulerMouseDown,
+}: TimelineBookmarksRowProps) {
+	const editor = useEditor();
+	const activeScene = editor.scenes.getActiveScene();
+
+	return (
+		<div className="relative h-4 flex-1 overflow-hidden">
+			<button
+				className="relative h-4 w-full cursor-default select-none border-0 bg-transparent p-0"
+				style={{
+					width: `${dynamicTimelineWidth}px`,
+				}}
+				aria-label="Timeline ruler"
+				type="button"
+				onWheel={handleWheel}
+				onClick={handleTimelineContentClick}
+				onMouseDown={(event) => {
+					handleRulerMouseDown(event);
+					handleRulerTrackingMouseDown(event);
+				}}
+			>
+				{activeScene.bookmarks.map((time: number) => (
+					<TimelineBookmark
+						key={`bookmark-row-${time}`}
+						time={time}
+						zoomLevel={zoomLevel}
+					/>
+				))}
+			</button>
+		</div>
+	);
+}
+
+export function TimelineBookmark({
+	time,
+	zoomLevel,
+}: {
+	time: number;
+	zoomLevel: number;
+}) {
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const duration = editor.timeline.getTotalDuration();
+
+	const handleBookmarkActivate = ({
+		event,
+	}: {
+		event:
+			| React.MouseEvent<HTMLButtonElement>
+			| React.KeyboardEvent<HTMLButtonElement>;
+	}) => {
+		event.stopPropagation();
+		const framesPerSecond = activeProject?.settings.fps ?? 30;
+		const snappedTime = getSnappedSeekTime({
+			rawTime: time,
+			duration,
+			fps: framesPerSecond,
+		});
+		editor.playback.seek({ time: snappedTime });
+	};
+
+	return (
+		<button
+			className="absolute top-0 h-10 w-0.5 cursor-pointer border-0 bg-transparent p-0"
+			style={{
+				left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+			}}
+			aria-label={`Seek to bookmark at ${time}s`}
+			type="button"
+			onMouseDown={(event) => {
+				event.preventDefault();
+				event.stopPropagation();
+			}}
+			onClick={(event) => handleBookmarkActivate({ event })}
+			onKeyDown={(event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				handleBookmarkActivate({ event });
+			}}
+		>
+			<div className="text-primary absolute top-[-1px] left-[-5px]">
+				<HugeiconsIcon
+					icon={Bookmark02Icon}
+					aria-hidden="true"
+					className="fill-primary size-3"
+				/>
+			</div>
+		</button>
+	);
+}
diff --git a/apps/web/src/components/editor/timeline/drag-line.tsx b/apps/web/src/components/editor/timeline/drag-line.tsx
new file mode 100644
index 00000000..f31c6e28
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/drag-line.tsx
@@ -0,0 +1,28 @@
+import { getDropLineY } from "@/lib/timeline/drop-utils";
+import type { TimelineTrack, DropTarget } from "@/types/timeline";
+
+interface DragLineProps {
+	dropTarget: DropTarget | null;
+	tracks: TimelineTrack[];
+	isVisible: boolean;
+	headerHeight?: number;
+}
+
+export function DragLine({
+	dropTarget,
+	tracks,
+	isVisible,
+	headerHeight = 0,
+}: DragLineProps) {
+	if (!isVisible || !dropTarget) return null;
+
+	const y = getDropLineY({ dropTarget, tracks });
+	const lineTop = y + headerHeight;
+
+	return (
+		<div
+			className="bg-primary pointer-events-none absolute right-0 left-0 z-50 h-0.5"
+			style={{ top: `${lineTop}px` }}
+		/>
+	);
+}
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 4a59fd21..7e2b2b66 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -1,925 +1,530 @@
 "use client";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "../../ui/button";
 import {
-  Scissors,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  Trash2,
-  Snowflake,
-  Copy,
-  SplitSquareHorizontal,
-  Pause,
-  Play,
-  SkipBack,
-  Video,
-  Music,
-  TypeIcon,
-  Magnet,
-  Link,
-  ZoomIn,
-  ZoomOut,
-  Bookmark,
-  Eye,
-  VolumeOff,
-  Volume2,
-} from "lucide-react";
+	Delete02Icon,
+	TaskAdd02Icon,
+	ViewIcon,
+	ViewOffSlashIcon,
+	VolumeHighIcon,
+	VolumeOffIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from "../../ui/tooltip";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
 } from "../../ui/context-menu";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
-
-import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
-import { processMediaFiles } from "@/lib/media-processing";
-
-import { toast } from "sonner";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useTimelineZoom } from "@/hooks/timeline/use-timeline-zoom";
+import { useState, useRef, useCallback } from "react";
 import { TimelineTrackContent } from "./timeline-track";
-import {
-  TimelinePlayhead,
-  useTimelinePlayheadRuler,
-} from "./timeline-playhead";
+import { TimelinePlayhead } from "./timeline-playhead";
 import { SelectionBox } from "../selection-box";
-import { useSelectionBox } from "@/hooks/use-selection-box";
-import { SnapIndicator } from "../snap-indicator";
-import { SnapPoint } from "@/hooks/use-timeline-snapping";
-import type { DragData, TimelineTrack, TrackType } from "@/types/timeline";
-import { TimelineCacheIndicator } from "./timeline-cache-indicator";
-import { TimelineMarker } from "./timeline-marker";
-import { useFrameCache } from "@/hooks/use-frame-cache";
+import { useSelectionBox } from "@/hooks/timeline/use-selection-box";
+import { SnapIndicator } from "./snap-indicator";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
+import type { TimelineTrack } from "@/types/timeline";
 import {
-  getTrackHeight,
-  getCumulativeHeightBefore,
-  getTotalTracksHeight,
-  TIMELINE_CONSTANTS,
-  snapTimeToFrame,
+	TIMELINE_CONSTANTS,
+	TRACK_ICONS,
 } from "@/constants/timeline-constants";
-import { Slider } from "@/components/ui/slider";
-import { formatTimeCode } from "@/lib/time";
-import { EditableTimecode } from "@/components/ui/editable-timecode";
+import { useElementInteraction } from "@/hooks/timeline/element/use-element-interaction";
+import {
+	getTrackHeight,
+	getCumulativeHeightBefore,
+	getTotalTracksHeight,
+	canTracktHaveAudio,
+	canTrackBeHidden,
+	getTimelineZoomMin,
+	getTimelinePaddingPx,
+	isMainTrack,
+} from "@/lib/timeline";
 import { TimelineToolbar } from "./timeline-toolbar";
+import { useScrollSync } from "@/hooks/timeline/use-scroll-sync";
+import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
+import { useTimelineSeek } from "@/hooks/timeline/use-timeline-seek";
+import { useTimelineDragDrop } from "@/hooks/timeline/use-timeline-drag-drop";
+import { TimelineRuler } from "./timeline-ruler";
+import { TimelineBookmarksRow } from "./bookmarks";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useEditor } from "@/hooks/use-editor";
+import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
+import { DragLine } from "./drag-line";
+import { invokeAction } from "@/lib/actions";
 
 export function Timeline() {
-  // Timeline shows all tracks (video, audio, effects) and their elements.
-  // You can drag media here to add it to your project.
-  // elements can be trimmed, deleted, and moved.
-
-  const {
-    tracks,
-    getTotalDuration,
-    clearSelectedElements,
-    snappingEnabled,
-    setSelectedElements,
-    toggleTrackMute,
-    dragState,
-  } = useTimelineStore();
-  const { mediaFiles, addMediaFile } = useMediaStore();
-  const { activeProject } = useProjectStore();
-  const { currentTime, duration, seek, setDuration } = usePlaybackStore();
-  const { getRenderStatus } = useFrameCache();
-  const [isDragOver, setIsDragOver] = useState(false);
-  const { addElementToNewTrack } = useTimelineStore();
-  const dragCounterRef = useRef(0);
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const rulerRef = useRef<HTMLDivElement>(null);
-  const [isInTimeline, setIsInTimeline] = useState(false);
-
-  // Track mouse down/up for distinguishing clicks from drag/resize ends
-  const mouseTrackingRef = useRef({
-    isMouseDown: false,
-    downX: 0,
-    downY: 0,
-    downTime: 0,
-  });
-
-  // Timeline zoom functionality
-  const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
-    containerRef: timelineRef,
-    isInTimeline,
-  });
-
-  // Old marquee selection removed - using new SelectionBox component instead
-
-  // Dynamic timeline width calculation based on playhead position and duration
-  const dynamicTimelineWidth = Math.max(
-    (duration || 0) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Base width from duration
-    (currentTime + 30) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Width to show current time + 30 seconds buffer
-    timelineRef.current?.clientWidth || 1000 // Minimum width
-  );
-
-  // Scroll synchronization and auto-scroll to playhead
-  const rulerScrollRef = useRef<HTMLDivElement>(null);
-  const tracksScrollRef = useRef<HTMLDivElement>(null);
-  const trackLabelsRef = useRef<HTMLDivElement>(null);
-  const playheadRef = useRef<HTMLDivElement>(null);
-  const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
-  const isUpdatingRef = useRef(false);
-  const lastRulerSync = useRef(0);
-  const lastTracksSync = useRef(0);
-  const lastVerticalSync = useRef(0);
-
-  // Timeline playhead ruler handlers
-  const { handleRulerMouseDown } = useTimelinePlayheadRuler({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  // Selection box functionality
-  const tracksContainerRef = useRef<HTMLDivElement>(null);
-  const {
-    selectionBox,
-    handleMouseDown: handleSelectionMouseDown,
-    isSelecting,
-    justFinishedSelecting,
-  } = useSelectionBox({
-    containerRef: tracksContainerRef,
-    playheadRef,
-    onSelectionComplete: (elements) => {
-      console.log(JSON.stringify({ onSelectionComplete: elements.length }));
-      setSelectedElements(elements);
-    },
-  });
-
-  // Calculate snap indicator state
-  const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
-    null
-  );
-  const showSnapIndicator =
-    dragState.isDragging && snappingEnabled && currentSnapPoint !== null;
-
-  // Callback to handle snap point changes from TimelineTrackContent
-  const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
-    setCurrentSnapPoint(snapPoint);
-  }, []);
-
-  // Track mouse down to distinguish real clicks from drag/resize ends
-  const handleTimelineMouseDown = useCallback((e: React.MouseEvent) => {
-    // Only track mouse down on timeline background areas (not elements)
-    const target = e.target as HTMLElement;
-    console.log(
-      JSON.stringify({
-        debug_mousedown: "START",
-        target_class: target.className,
-        target_parent_class: target.parentElement?.className,
-        clientX: e.clientX,
-        clientY: e.clientY,
-        timeStamp: e.timeStamp,
-      })
-    );
-
-    const isTimelineBackground =
-      !target.closest(".timeline-element") &&
-      !playheadRef.current?.contains(target) &&
-      !target.closest("[data-track-labels]");
-
-    console.log(
-      JSON.stringify({
-        debug_mousedown: "CHECK",
-        isTimelineBackground,
-        hasTimelineElement: !!target.closest(".timeline-element"),
-        hasPlayhead: !!playheadRef.current?.contains(target),
-        hasTrackLabels: !!target.closest("[data-track-labels]"),
-      })
-    );
-
-    if (isTimelineBackground) {
-      mouseTrackingRef.current = {
-        isMouseDown: true,
-        downX: e.clientX,
-        downY: e.clientY,
-        downTime: e.timeStamp,
-      };
-      console.log(
-        JSON.stringify({
-          debug_mousedown: "TRACKED",
-          mouseTracking: mouseTrackingRef.current,
-        })
-      );
-    } else {
-      console.log(
-        JSON.stringify({
-          debug_mousedown: "IGNORED - not timeline background",
-        })
-      );
-    }
-  }, []);
-
-  // Timeline content click to seek handler
-  const handleTimelineContentClick = useCallback(
-    (e: React.MouseEvent) => {
-      console.log(
-        JSON.stringify({
-          debug_click: "START",
-          target: (e.target as HTMLElement).className,
-          target_parent: (e.target as HTMLElement).parentElement?.className,
-          mouseTracking: mouseTrackingRef.current,
-          isSelecting,
-          justFinishedSelecting,
-          clickX: e.clientX,
-          clickY: e.clientY,
-          timeStamp: e.timeStamp,
-        })
-      );
-
-      const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
-
-      // Reset mouse tracking
-      mouseTrackingRef.current = {
-        isMouseDown: false,
-        downX: 0,
-        downY: 0,
-        downTime: 0,
-      };
-
-      // Only process as click if we tracked a mouse down on timeline background
-      if (!isMouseDown) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - no mousedown",
-            mouseTracking: mouseTrackingRef.current,
-          })
-        );
-        return;
-      }
-
-      // Check if mouse moved significantly (indicates drag, not click)
-      const deltaX = Math.abs(e.clientX - downX);
-      const deltaY = Math.abs(e.clientY - downY);
-      const deltaTime = e.timeStamp - downTime;
-
-      if (deltaX > 5 || deltaY > 5 || deltaTime > 500) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - movement too large",
-            deltaX,
-            deltaY,
-            deltaTime,
-          })
-        );
-        return;
-      }
-
-      // Don't seek if this was a selection box operation
-      if (isSelecting || justFinishedSelecting) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - selection operation",
-            isSelecting,
-            justFinishedSelecting,
-          })
-        );
-        return;
-      }
+	const tracksContainerHeight = { min: 0, max: 800 };
+	const { snappingEnabled } = useTimelineStore();
+	const { clearElementSelection, setElementSelection } = useElementSelection();
+	const editor = useEditor();
+	const timeline = editor.timeline;
+	const tracks = timeline.getTracks();
+	const seek = (time: number) => editor.playback.seek({ time });
 
-      // Don't seek if clicking on timeline elements, but still deselect
-      if ((e.target as HTMLElement).closest(".timeline-element")) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - clicked timeline element",
-          })
-        );
-        return;
-      }
+	// refs
+	const timelineRef = useRef<HTMLDivElement>(null);
+	const timelineHeaderRef = useRef<HTMLDivElement>(null);
+	const rulerRef = useRef<HTMLDivElement>(null);
+	const tracksContainerRef = useRef<HTMLDivElement>(null);
+	const tracksScrollRef = useRef<HTMLDivElement>(null);
+	const trackLabelsRef = useRef<HTMLDivElement>(null);
+	const playheadRef = useRef<HTMLDivElement>(null);
+	const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
 
-      // Don't seek if clicking on playhead
-      if (playheadRef.current?.contains(e.target as Node)) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - clicked playhead",
-          })
-        );
-        return;
-      }
+	// state
+	const [isResizing, setIsResizing] = useState(false);
+	const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
+		null,
+	);
 
-      // Don't seek if clicking on track labels
-      if ((e.target as HTMLElement).closest("[data-track-labels]")) {
-        console.log(
-          JSON.stringify({
-            debug_click: "REJECTED - clicked track labels",
-          })
-        );
-        clearSelectedElements();
-        return;
-      }
+	const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
+		setCurrentSnapPoint(snapPoint);
+	}, []);
+	const handleResizeStateChange = useCallback(
+		({ isResizing: nextIsResizing }: { isResizing: boolean }) => {
+			setIsResizing(nextIsResizing);
+			if (!nextIsResizing) {
+				setCurrentSnapPoint(null);
+			}
+		},
+		[],
+	);
 
-      // Clear selected elements when clicking empty timeline area
-      console.log(
-        JSON.stringify({
-          debug_click: "PROCEEDING - clearing elements",
-          clearingSelectedElements: true,
-        })
-      );
-      clearSelectedElements();
+	const timelineDuration = timeline.getTotalDuration() || 0;
+	const minZoomLevel = getTimelineZoomMin({
+		duration: timelineDuration,
+		containerWidth: tracksContainerRef.current?.clientWidth,
+	});
 
-      // Determine if we're clicking in ruler or tracks area
-      const isRulerClick = (e.target as HTMLElement).closest(
-        "[data-ruler-area]"
-      );
+	const savedViewState = editor.project.getTimelineViewState();
 
-      console.log(
-        JSON.stringify({
-          debug_click: "CALCULATING POSITION",
-          isRulerClick,
-          clientX: e.clientX,
-          clientY: e.clientY,
-          target_element: (e.target as HTMLElement).tagName,
-          target_class: (e.target as HTMLElement).className,
-        })
-      );
+	const { zoomLevel, setZoomLevel, handleWheel, saveScrollPosition } =
+		useTimelineZoom({
+			containerRef: timelineRef,
+			minZoom: minZoomLevel,
+			initialZoom: savedViewState?.zoomLevel,
+			initialScrollLeft: savedViewState?.scrollLeft,
+			initialPlayheadTime: savedViewState?.playheadTime,
+			tracksScrollRef,
+			rulerScrollRef: tracksScrollRef,
+		});
 
-      let mouseX: number;
-      let scrollLeft = 0;
+	const {
+		dragState,
+		dragDropTarget,
+		handleElementMouseDown,
+		handleElementClick,
+		lastMouseXRef,
+	} = useElementInteraction({
+		zoomLevel,
+		timelineRef,
+		tracksContainerRef,
+		tracksScrollRef,
+		headerRef: timelineHeaderRef,
+		snappingEnabled,
+		onSnapPointChange: handleSnapPointChange,
+	});
 
-      if (isRulerClick) {
-        // Calculate based on ruler position
-        const rulerContent = rulerScrollRef.current;
-        if (!rulerContent) {
-          console.log(
-            JSON.stringify({
-              debug_click: "ERROR - no ruler container found",
-            })
-          );
-          return;
-        }
-        const rect = rulerContent.getBoundingClientRect();
-        mouseX = e.clientX - rect.left;
-        scrollLeft = rulerContent.scrollLeft;
-      } else {
-        const tracksContent = tracksScrollRef.current;
-        if (!tracksContent) {
-          return;
-        }
-        const rect = tracksContent.getBoundingClientRect();
-        mouseX = e.clientX - rect.left;
-        scrollLeft = tracksContent.scrollLeft;
-      }
+	const { handleRulerMouseDown: handlePlayheadRulerMouseDown } =
+		useTimelinePlayhead({
+			zoomLevel,
+			rulerRef,
+			rulerScrollRef: tracksScrollRef,
+			tracksScrollRef,
+			playheadRef,
+		});
 
-      const rawTime = Math.max(
-        0,
-        Math.min(
-          duration,
-          (mouseX + scrollLeft) /
-            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-        )
-      );
+	const { isDragOver, dropTarget, dragProps } = useTimelineDragDrop({
+		containerRef: tracksContainerRef,
+		headerRef: timelineHeaderRef,
+		zoomLevel,
+	});
 
-      // Use frame snapping for timeline clicking
-      const projectFps = activeProject?.fps || 30;
-      const time = snapTimeToFrame(rawTime, projectFps);
-      seek(time);
-    },
-    [
-      duration,
-      zoomLevel,
-      seek,
-      rulerScrollRef,
-      tracksScrollRef,
-      clearSelectedElements,
-      isSelecting,
-      justFinishedSelecting,
-    ]
-  );
+	const {
+		selectionBox,
+		handleMouseDown: handleSelectionMouseDown,
+		isSelecting,
+		shouldIgnoreClick,
+	} = useSelectionBox({
+		containerRef: tracksContainerRef,
+		onSelectionComplete: (elements) => {
+			setElementSelection({ elements });
+		},
+		tracksScrollRef,
+		zoomLevel,
+	});
 
-  // Update timeline duration when tracks change
-  useEffect(() => {
-    const totalDuration = getTotalDuration();
-    setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline
-  }, [tracks, setDuration, getTotalDuration]);
+	const containerWidth = tracksContainerRef.current?.clientWidth || 1000;
+	const contentWidth =
+		timelineDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const paddingPx = getTimelinePaddingPx({
+		containerWidth,
+		zoomLevel,
+		minZoom: minZoomLevel,
+	});
+	const dynamicTimelineWidth = Math.max(
+		contentWidth + paddingPx,
+		containerWidth,
+	);
 
-  // Old marquee system removed - using new SelectionBox component instead
+	const showSnapIndicator =
+		snappingEnabled &&
+		currentSnapPoint !== null &&
+		(dragState.isDragging || isResizing);
 
-  const handleDragEnter = (e: React.DragEvent) => {
-    // When something is dragged over the timeline, show overlay
-    e.preventDefault();
-    // Don't show overlay for timeline elements - they're handled by tracks
-    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-      return;
-    }
-    dragCounterRef.current += 1;
-    if (!isDragOver) {
-      setIsDragOver(true);
-    }
-  };
+	const {
+		handleTracksMouseDown,
+		handleTracksClick,
+		handleRulerMouseDown,
+		handleRulerClick,
+	} = useTimelineSeek({
+		playheadRef,
+		trackLabelsRef,
+		rulerScrollRef: tracksScrollRef,
+		tracksScrollRef,
+		zoomLevel,
+		duration: timeline.getTotalDuration(),
+		isSelecting,
+		clearSelectedElements: clearElementSelection,
+		seek,
+	});
 
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-  };
+	useScrollSync({
+		tracksScrollRef,
+		trackLabelsScrollRef,
+	});
 
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
+	const timelineHeaderHeight =
+		timelineHeaderRef.current?.getBoundingClientRect().height ?? 0;
 
-    // Don't update state for timeline elements - they're handled by tracks
-    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-      return;
-    }
+	return (
+		<section
+			className={
+				"bg-panel relative flex h-full flex-col overflow-hidden rounded-sm"
+			}
+			{...dragProps}
+			aria-label="Timeline"
+		>
+			<TimelineToolbar
+				zoomLevel={zoomLevel}
+				minZoom={minZoomLevel}
+				setZoomLevel={({ zoom }) => setZoomLevel(zoom)}
+			/>
 
-    dragCounterRef.current -= 1;
-    if (dragCounterRef.current === 0) {
-      setIsDragOver(false);
-    }
-  };
+			<div
+				className="relative flex flex-1 flex-col overflow-hidden"
+				ref={timelineRef}
+			>
+				<SnapIndicator
+					snapPoint={currentSnapPoint}
+					zoomLevel={zoomLevel}
+					tracks={tracks}
+					timelineRef={timelineRef}
+					trackLabelsRef={trackLabelsRef}
+					tracksScrollRef={tracksScrollRef}
+					isVisible={showSnapIndicator}
+				/>
+				<div className="flex flex-1 overflow-hidden">
+					<div className="bg-panel flex w-28 shrink-0 flex-col border-r">
+						<div className="bg-panel flex h-4 items-center justify-between px-3">
+							<span className="opacity-0">.</span>
+						</div>
+						<div className="bg-panel flex h-4 items-center justify-between px-3">
+							<span className="opacity-0">.</span>
+						</div>
+						{tracks.length > 0 && (
+							<div
+								ref={trackLabelsRef}
+								className="bg-panel flex-1 overflow-y-auto"
+								style={{ paddingTop: TIMELINE_CONSTANTS.PADDING_TOP_PX }}
+							>
+								<ScrollArea className="size-full" ref={trackLabelsScrollRef}>
+									<div className="flex flex-col gap-1">
+										{tracks.map((track) => (
+											<div
+												key={track.id}
+												className="group flex items-center px-3"
+												style={{
+													height: `${getTrackHeight({ type: track.type })}px`,
+												}}
+											>
+												<div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+													{process.env.NODE_ENV === "development" &&
+														isMainTrack(track) && (
+															<div className="bg-red-500 size-1.5 rounded-full" />
+														)}
+													{canTracktHaveAudio(track) && (
+														<TrackToggleIcon
+															isOff={track.muted}
+															icons={{
+																on: VolumeHighIcon,
+																off: VolumeOffIcon,
+															}}
+															onClick={() =>
+																editor.timeline.toggleTrackMute({
+																	trackId: track.id,
+																})
+															}
+														/>
+													)}
+													{canTrackBeHidden(track) && (
+														<TrackToggleIcon
+															isOff={track.hidden}
+															icons={{
+																on: ViewIcon,
+																off: ViewOffSlashIcon,
+															}}
+															onClick={() =>
+																editor.timeline.toggleTrackVisibility({
+																	trackId: track.id,
+																})
+															}
+														/>
+													)}
+													<TrackIcon track={track} />
+												</div>
+											</div>
+										))}
+									</div>
+								</ScrollArea>
+							</div>
+						)}
+					</div>
 
-  const handleDrop = async (e: React.DragEvent) => {
-    // When media is dropped, add it as a new track/element
-    e.preventDefault();
-    setIsDragOver(false);
-    dragCounterRef.current = 0;
-
-    // Ignore timeline element drags - they're handled by track-specific handlers
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    if (hasTimelineElement) {
-      return;
-    }
-
-    const itemData = e.dataTransfer.getData("application/x-media-item");
-    if (itemData) {
-      try {
-        const dragData: DragData = JSON.parse(itemData);
-
-        if (dragData.type === "text") {
-          // Always create new text track to avoid overlaps
-          addElementToNewTrack(dragData);
-        } else {
-          // Handle media items
-          const mediaItem = mediaFiles.find(
-            (item: any) => item.id === dragData.id
-          );
-          if (!mediaItem) {
-            toast.error("Media item not found");
-            return;
-          }
-
-          addElementToNewTrack(mediaItem);
-        }
-      } catch (error) {
-        console.error("Error parsing dropped item data:", error);
-        toast.error("Failed to add item to timeline");
-      }
-    } else if (e.dataTransfer.files?.length > 0) {
-      // Handle file drops by creating new tracks
-      if (!activeProject) {
-        toast.error("No active project");
-        return;
-      }
-
-      try {
-        const processedItems = await processMediaFiles(e.dataTransfer.files);
-        for (const processedItem of processedItems) {
-          await addMediaFile(activeProject.id, processedItem);
-          const currentMediaFiles = mediaFiles;
-          const addedItem = currentMediaFiles.find(
-            (item) =>
-              item.name === processedItem.name && item.url === processedItem.url
-          );
-          if (addedItem) {
-            const trackType: TrackType =
-              addedItem.type === "audio" ? "audio" : "media";
-            const targetTrackId = useTimelineStore
-              .getState()
-              .insertTrackAt(trackType, 0);
-
-            useTimelineStore.getState().addElementToTrack(targetTrackId, {
-              type: "media",
-              mediaId: addedItem.id,
-              name: addedItem.name,
-              duration: addedItem.duration || 5,
-              startTime: currentTime,
-              trimStart: 0,
-              trimEnd: 0,
-            });
-          }
-        }
-      } catch (error) {
-        // Show error if file processing fails
-        console.error("Error processing external files:", error);
-        toast.error("Failed to process dropped files");
-      }
-    }
-  };
-
-  const dragProps = {
-    onDragEnter: handleDragEnter,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop,
-  };
-
-  // --- Scroll synchronization effect ---
-  useEffect(() => {
-    const rulerViewport = rulerScrollRef.current;
-    const tracksViewport = tracksScrollRef.current;
-    const trackLabelsViewport = trackLabelsScrollRef.current;
-
-    if (!rulerViewport || !tracksViewport) return;
-
-    // Horizontal scroll synchronization between ruler and tracks
-    const handleRulerScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
-      lastRulerSync.current = now;
-      isUpdatingRef.current = true;
-      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
-      isUpdatingRef.current = false;
-    };
-    const handleTracksScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
-      lastTracksSync.current = now;
-      isUpdatingRef.current = true;
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
-      isUpdatingRef.current = false;
-    };
-
-    rulerViewport.addEventListener("scroll", handleRulerScroll);
-    tracksViewport.addEventListener("scroll", handleTracksScroll);
-
-    // Vertical scroll synchronization between track labels and tracks content
-    if (trackLabelsViewport) {
-      const handleTrackLabelsScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
-      const handleTracksVerticalScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
-
-      trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
-      tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
-
-      return () => {
-        rulerViewport.removeEventListener("scroll", handleRulerScroll);
-        tracksViewport.removeEventListener("scroll", handleTracksScroll);
-        trackLabelsViewport.removeEventListener(
-          "scroll",
-          handleTrackLabelsScroll
-        );
-        tracksViewport.removeEventListener(
-          "scroll",
-          handleTracksVerticalScroll
-        );
-      };
-    }
-
-    return () => {
-      rulerViewport.removeEventListener("scroll", handleRulerScroll);
-      tracksViewport.removeEventListener("scroll", handleTracksScroll);
-    };
-  }, []);
-
-  return (
-    <div
-      className={
-        "h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden"
-      }
-      {...dragProps}
-      onMouseEnter={() => setIsInTimeline(true)}
-      onMouseLeave={() => setIsInTimeline(false)}
-    >
-      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
-
-      {/* Timeline Container */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden relative"
-        ref={timelineRef}
-      >
-        <TimelinePlayhead
-          currentTime={currentTime}
-          duration={duration}
-          zoomLevel={zoomLevel}
-          tracks={tracks}
-          seek={seek}
-          rulerRef={rulerRef}
-          rulerScrollRef={rulerScrollRef}
-          tracksScrollRef={tracksScrollRef}
-          trackLabelsRef={trackLabelsRef}
-          timelineRef={timelineRef}
-          playheadRef={playheadRef}
-          isSnappingToPlayhead={
-            showSnapIndicator && currentSnapPoint?.type === "playhead"
-          }
-        />
-        <SnapIndicator
-          snapPoint={currentSnapPoint}
-          zoomLevel={zoomLevel}
-          tracks={tracks}
-          timelineRef={timelineRef}
-          trackLabelsRef={trackLabelsRef}
-          tracksScrollRef={tracksScrollRef}
-          isVisible={showSnapIndicator}
-        />
-        {/* Timeline Header with Ruler */}
-        <div className="flex bg-panel sticky top-0 z-10">
-          {/* Track Labels Header */}
-          <div className="w-28 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
-            {/* Empty space */}
-            <span className="text-sm font-medium text-muted-foreground opacity-0">
-              .
-            </span>
-          </div>
-
-          {/* Timeline Ruler */}
-          <div
-            className="flex-1 relative overflow-hidden h-10"
-            onWheel={(e) => {
-              // Check if this is horizontal scrolling - if so, don't handle it here
-              if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
-                return; // Let ScrollArea handle horizontal scrolling
-              }
-              handleWheel(e);
-            }}
-            onMouseDown={handleSelectionMouseDown}
-            onClick={handleTimelineContentClick}
-            data-ruler-area
-          >
-            <ScrollArea
-              className="w-full"
-              ref={rulerScrollRef}
-              onScroll={(e) => {
-                if (isUpdatingRef.current) return;
-                isUpdatingRef.current = true;
-                const tracksViewport = tracksScrollRef.current;
-                if (tracksViewport) {
-                  tracksViewport.scrollLeft = (
-                    e.currentTarget as HTMLDivElement
-                  ).scrollLeft;
-                }
-                isUpdatingRef.current = false;
-              }}
-            >
-              <div
-                ref={rulerRef}
-                className="relative h-10 select-none cursor-default"
-                style={{
-                  width: `${dynamicTimelineWidth}px`,
-                }}
-                onMouseDown={handleRulerMouseDown}
-              >
-                <TimelineCacheIndicator
-                  duration={duration}
-                  zoomLevel={zoomLevel}
-                  tracks={tracks}
-                  mediaFiles={mediaFiles}
-                  activeProject={activeProject}
-                  getRenderStatus={getRenderStatus}
-                />
-                {/* Time markers */}
-                {(() => {
-                  // Calculate appropriate time interval based on zoom level
-                  const getTimeInterval = (zoom: number) => {
-                    const pixelsPerSecond =
-                      TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
-                    if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
-                    if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
-                    if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
-                    if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
-                    if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
-                    if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
-                    return 30; // Every 30s when extremely zoomed out
-                  };
-
-                  const interval = getTimeInterval(zoomLevel);
-                  const markerCount = Math.ceil(duration / interval) + 1;
-
-                  return Array.from({ length: markerCount }, (_, i) => {
-                    const time = i * interval;
-                    if (time > duration) return null;
-
-                    const isMainMarker =
-                      time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-
-                    return (
-                      <TimelineMarker
-                        key={i}
-                        time={time}
-                        zoomLevel={zoomLevel}
-                        interval={interval}
-                        isMainMarker={isMainMarker}
-                      />
-                    );
-                  }).filter(Boolean);
-                })()}
-
-                {/* Bookmark markers */}
-                {(() => {
-                  const { activeProject } = useProjectStore.getState();
-                  if (!activeProject?.bookmarks?.length) return null;
-
-                  return activeProject.bookmarks.map((bookmarkTime, i) => (
-                    <div
-                      key={`bookmark-${i}`}
-                      className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer"
-                      style={{
-                        left: `${bookmarkTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-                      }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        usePlaybackStore.getState().seek(bookmarkTime);
-                      }}
-                    >
-                      <div className="absolute top-[-1px] left-[-5px] text-primary">
-                        <Bookmark className="h-3 w-3 fill-primary" />
-                      </div>
-                    </div>
-                  ));
-                })()}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-
-        {/* Tracks Area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Track Labels */}
-          {tracks.length > 0 && (
-            <div
-              ref={trackLabelsRef}
-              className="w-28 shrink-0 border-r overflow-y-auto z-100 bg-panel"
-              data-track-labels
-            >
-              <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
-                <div className="flex flex-col gap-1">
-                  {tracks.map((track) => (
-                    <div
-                      key={track.id}
-                      className="flex items-center px-3 group"
-                      style={{ height: `${getTrackHeight(track.type)}px` }}
-                    >
-                      <div className="flex items-center justify-end flex-1 min-w-0 gap-2">
-                        {track.muted ? (
-                          <VolumeOff
-                            className="h-4 w-4 text-destructive cursor-pointer"
-                            onClick={() => toggleTrackMute(track.id)}
-                          />
-                        ) : (
-                          <Volume2
-                            className="h-4 w-4 text-muted-foreground cursor-pointer"
-                            onClick={() => toggleTrackMute(track.id)}
-                          />
-                        )}
-                        <Eye className="h-4 w-4 text-muted-foreground" />
-                        <TrackIcon track={track} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            </div>
-          )}
-
-          {/* Timeline Tracks Content */}
-          <div
-            className="flex-1 relative overflow-hidden"
-            onWheel={(e) => {
-              // Check if this is horizontal scrolling - if so, don't handle it here
-              if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
-                return; // Let ScrollArea handle horizontal scrolling
-              }
-              handleWheel(e);
-            }}
-            onMouseDown={(e) => {
-              handleTimelineMouseDown(e);
-              handleSelectionMouseDown(e);
-            }}
-            onClick={handleTimelineContentClick}
-            ref={tracksContainerRef}
-          >
-            <SelectionBox
-              startPos={selectionBox?.startPos || null}
-              currentPos={selectionBox?.currentPos || null}
-              containerRef={tracksContainerRef}
-              isActive={selectionBox?.isActive || false}
-            />
-            <ScrollArea
-              className="w-full h-full"
-              ref={tracksScrollRef}
-              onScroll={(e) => {
-                if (isUpdatingRef.current) return;
-                isUpdatingRef.current = true;
-                const rulerViewport = rulerScrollRef.current;
-                if (rulerViewport) {
-                  rulerViewport.scrollLeft = (
-                    e.currentTarget as HTMLDivElement
-                  ).scrollLeft;
-                }
-                isUpdatingRef.current = false;
-              }}
-            >
-              <div
-                className="relative flex-1"
-                style={{
-                  height: `${Math.max(
-                    200,
-                    Math.min(800, getTotalTracksHeight(tracks))
-                  )}px`,
-                  width: `${dynamicTimelineWidth}px`,
-                }}
-              >
-                {tracks.length === 0 ? (
-                  <div />
-                ) : (
-                  <>
-                    {tracks.map((track, index) => (
-                      <ContextMenu key={track.id}>
-                        <ContextMenuTrigger asChild>
-                          <div
-                            className="absolute left-0 right-0"
-                            style={{
-                              top: `${getCumulativeHeightBefore(
-                                tracks,
-                                index
-                              )}px`,
-                              height: `${getTrackHeight(track.type)}px`,
-                            }}
-                            onClick={(e) => {
-                              // If clicking empty area (not on a element), deselect all elements
-                              if (
-                                !(e.target as HTMLElement).closest(
-                                  ".timeline-element"
-                                )
-                              ) {
-                                clearSelectedElements();
-                              }
-                            }}
-                          >
-                            <TimelineTrackContent
-                              track={track}
-                              zoomLevel={zoomLevel}
-                              onSnapPointChange={handleSnapPointChange}
-                              rulerScrollRef={rulerScrollRef}
-                              tracksScrollRef={tracksScrollRef}
-                            />
-                          </div>
-                        </ContextMenuTrigger>
-                        <ContextMenuContent className="z-200">
-                          <ContextMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              toggleTrackMute(track.id);
-                            }}
-                          >
-                            {track.muted ? "Unmute Track" : "Mute Track"}
-                          </ContextMenuItem>
-                          <ContextMenuItem onClick={(e) => e.stopPropagation()}>
-                            Track settings (soon)
-                          </ContextMenuItem>
-                        </ContextMenuContent>
-                      </ContextMenu>
-                    ))}
-                  </>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+					<div
+						className="relative flex flex-1 flex-col overflow-hidden"
+						ref={tracksContainerRef}
+					>
+						<SelectionBox
+							startPos={selectionBox?.startPos || null}
+							currentPos={selectionBox?.currentPos || null}
+							containerRef={tracksContainerRef}
+							isActive={selectionBox?.isActive || false}
+						/>
+						<DragLine
+							dropTarget={dropTarget}
+							tracks={timeline.getTracks()}
+							isVisible={isDragOver}
+							headerHeight={timelineHeaderHeight}
+						/>
+						<DragLine
+							dropTarget={dragDropTarget}
+							tracks={timeline.getTracks()}
+							isVisible={dragState.isDragging}
+							headerHeight={timelineHeaderHeight}
+						/>
+						<ScrollArea
+							className="size-full overflow-y-hidden"
+							ref={tracksScrollRef}
+							onMouseDown={(event) => {
+								const isDirectTarget = event.target === event.currentTarget;
+								if (!isDirectTarget) return;
+								event.stopPropagation();
+								handleTracksMouseDown(event);
+								handleSelectionMouseDown(event);
+							}}
+							onClick={(event) => {
+								const isDirectTarget = event.target === event.currentTarget;
+								if (!isDirectTarget) return;
+								event.stopPropagation();
+								handleTracksClick(event);
+							}}
+							onWheel={(event) => {
+								if (
+									event.shiftKey ||
+									Math.abs(event.deltaX) > Math.abs(event.deltaY)
+								) {
+									return;
+								}
+								handleWheel(event);
+							}}
+							onScroll={() => {
+								saveScrollPosition();
+							}}
+						>
+							<div
+								className="relative"
+								style={{
+									width: `${dynamicTimelineWidth}px`,
+								}}
+							>
+								<div
+									ref={timelineHeaderRef}
+									className="bg-panel sticky top-0 z-30 flex flex-col"
+								>
+									<TimelineRuler
+										zoomLevel={zoomLevel}
+										dynamicTimelineWidth={dynamicTimelineWidth}
+										rulerRef={rulerRef}
+										handleWheel={handleWheel}
+										handleTimelineContentClick={handleRulerClick}
+										handleRulerTrackingMouseDown={handleRulerMouseDown}
+										handleRulerMouseDown={handlePlayheadRulerMouseDown}
+									/>
+									<TimelineBookmarksRow
+										zoomLevel={zoomLevel}
+										dynamicTimelineWidth={dynamicTimelineWidth}
+										handleWheel={handleWheel}
+										handleTimelineContentClick={handleRulerClick}
+										handleRulerTrackingMouseDown={handleRulerMouseDown}
+										handleRulerMouseDown={handlePlayheadRulerMouseDown}
+									/>
+								</div>
+								<TimelinePlayhead
+									zoomLevel={zoomLevel}
+									rulerRef={rulerRef}
+									rulerScrollRef={tracksScrollRef}
+									tracksScrollRef={tracksScrollRef}
+									timelineRef={timelineRef}
+									playheadRef={playheadRef}
+									isSnappingToPlayhead={
+										showSnapIndicator && currentSnapPoint?.type === "playhead"
+									}
+								/>
+								<div
+									className="relative"
+									style={{
+										height: `${Math.max(
+											tracksContainerHeight.min,
+											Math.min(
+												tracksContainerHeight.max,
+												getTotalTracksHeight({ tracks }),
+											),
+										)}px`,
+									}}
+								>
+									{tracks.length === 0 ? (
+										<div />
+									) : (
+										tracks.map((track, index) => (
+											<ContextMenu key={track.id}>
+												<ContextMenuTrigger asChild>
+													<div
+														className="absolute right-0 left-0"
+														style={{
+															top: `${getCumulativeHeightBefore({
+																tracks,
+																trackIndex: index,
+															})}px`,
+															height: `${getTrackHeight({
+																type: track.type,
+															})}px`,
+														}}
+													>
+														<TimelineTrackContent
+															track={track}
+															zoomLevel={zoomLevel}
+															dragState={dragState}
+															rulerScrollRef={tracksScrollRef}
+															tracksScrollRef={tracksScrollRef}
+															lastMouseXRef={lastMouseXRef}
+															onSnapPointChange={handleSnapPointChange}
+															onResizeStateChange={handleResizeStateChange}
+															onElementMouseDown={handleElementMouseDown}
+															onElementClick={handleElementClick}
+															onTrackMouseDown={handleSelectionMouseDown}
+															shouldIgnoreClick={shouldIgnoreClick}
+														/>
+													</div>
+												</ContextMenuTrigger>
+												<ContextMenuContent className="z-200 w-40">
+													<ContextMenuItem
+														icon={<HugeiconsIcon icon={TaskAdd02Icon} />}
+														onClick={(e) => {
+															e.stopPropagation();
+															invokeAction("paste-copied");
+														}}
+													>
+														Paste elements
+													</ContextMenuItem>
+													<ContextMenuItem
+														onClick={(e) => {
+															e.stopPropagation();
+															timeline.toggleTrackMute({
+																trackId: track.id,
+															});
+														}}
+													>
+														<HugeiconsIcon icon={VolumeHighIcon} />
+														<span>
+															{canTracktHaveAudio(track) && track.muted
+																? "Unmute track"
+																: "Mute track"}
+														</span>
+													</ContextMenuItem>
+													<ContextMenuItem
+														onClick={(e) => {
+															e.stopPropagation();
+															timeline.toggleTrackVisibility({
+																trackId: track.id,
+															});
+														}}
+													>
+														<HugeiconsIcon icon={ViewIcon} />
+														<span>
+															{canTrackBeHidden(track) && track.hidden
+																? "Show track"
+																: "Hide track"}
+														</span>
+													</ContextMenuItem>
+													<ContextMenuItem
+														onClick={(e) => {
+															e.stopPropagation();
+															timeline.removeTrack({
+																trackId: track.id,
+															});
+														}}
+														variant="destructive"
+													>
+														<HugeiconsIcon icon={Delete02Icon} />
+														Delete track
+													</ContextMenuItem>
+												</ContextMenuContent>
+											</ContextMenu>
+										))
+									)}
+								</div>
+							</div>
+						</ScrollArea>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
 }
 
 function TrackIcon({ track }: { track: TimelineTrack }) {
-  return (
-    <>
-      {track.type === "media" && (
-        <Video className="w-4 h-4 shrink-0 text-muted-foreground" />
-      )}
-      {track.type === "text" && (
-        <TypeIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
-      )}
-      {track.type === "audio" && (
-        <Music className="w-4 h-4 shrink-0 text-muted-foreground" />
-      )}
-    </>
-  );
+	return <>{TRACK_ICONS[track.type]}</>;
+}
+
+function TrackToggleIcon({
+	isOff,
+	icons,
+	onClick,
+}: {
+	isOff: boolean;
+	icons: {
+		on: IconSvgElement;
+		off: IconSvgElement;
+	};
+	onClick: () => void;
+}) {
+	return (
+		<>
+			{isOff ? (
+				<HugeiconsIcon
+					icon={icons.off}
+					className="text-destructive size-4 cursor-pointer"
+					onClick={onClick}
+				/>
+			) : (
+				<HugeiconsIcon
+					icon={icons.on}
+					className="text-muted-foreground size-4 cursor-pointer"
+					onClick={onClick}
+				/>
+			)}
+		</>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/snap-indicator.tsx b/apps/web/src/components/editor/timeline/snap-indicator.tsx
new file mode 100644
index 00000000..6bfdf086
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/snap-indicator.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useSnapIndicatorPosition } from "@/hooks/timeline/use-snap-indicator-position";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
+import type { TimelineTrack } from "@/types/timeline";
+
+interface SnapIndicatorProps {
+	snapPoint: SnapPoint | null;
+	zoomLevel: number;
+	isVisible: boolean;
+	tracks: TimelineTrack[];
+	timelineRef: React.RefObject<HTMLDivElement>;
+	trackLabelsRef?: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+}
+
+export function SnapIndicator({
+	snapPoint,
+	zoomLevel,
+	isVisible,
+	tracks,
+	timelineRef,
+	trackLabelsRef,
+	tracksScrollRef,
+}: SnapIndicatorProps) {
+	const { leftPosition, topPosition, height } = useSnapIndicatorPosition({
+		snapPoint,
+		zoomLevel,
+		tracks,
+		timelineRef,
+		trackLabelsRef,
+		tracksScrollRef,
+	});
+
+	if (!isVisible || !snapPoint) {
+		return null;
+	}
+
+	return (
+		<div
+			className="pointer-events-none absolute z-90"
+			style={{
+				left: `${leftPosition}px`,
+				top: topPosition,
+				height: `${height}px`,
+				width: "2px",
+			}}
+		>
+			<div className={"bg-primary/40 h-full w-0.5 opacity-80"} />
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx b/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx
deleted file mode 100644
index 7def2985..00000000
--- a/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { TimelineTrack } from "@/types/timeline";
-import { MediaFile } from "@/types/media";
-import { TProject } from "@/types/project";
-import { useSceneStore } from "@/stores/scene-store";
-
-interface CacheSegment {
-  startTime: number;
-  endTime: number;
-  cached: boolean;
-}
-
-interface TimelineCacheIndicatorProps {
-  duration: number;
-  zoomLevel: number;
-  tracks: TimelineTrack[];
-  mediaFiles: MediaFile[];
-  activeProject: TProject | null;
-  getRenderStatus: (
-    time: number,
-    tracks: TimelineTrack[],
-    mediaFiles: MediaFile[],
-    activeProject: TProject | null,
-    sceneId?: string
-  ) => "cached" | "not-cached";
-}
-
-export function TimelineCacheIndicator({
-  duration,
-  zoomLevel,
-  tracks,
-  mediaFiles,
-  activeProject,
-  getRenderStatus,
-}: TimelineCacheIndicatorProps) {
-  const { currentScene } = useSceneStore();
-
-  // Calculate cache segments by sampling the timeline
-  const calculateCacheSegments = (): CacheSegment[] => {
-    const segments: CacheSegment[] = [];
-    const sampleRate = 10; // Sample every 0.1 seconds
-    const totalSamples = Math.ceil(duration * sampleRate);
-
-    if (totalSamples === 0) {
-      return [{ startTime: 0, endTime: duration, cached: false }];
-    }
-
-    let currentSegment: CacheSegment | null = null;
-
-    for (let i = 0; i <= totalSamples; i++) {
-      const time = i / sampleRate;
-      const cached =
-        getRenderStatus(
-          time,
-          tracks,
-          mediaFiles,
-          activeProject,
-          currentScene?.id
-        ) === "cached";
-
-      if (!currentSegment) {
-        // Start first segment
-        currentSegment = {
-          startTime: time,
-          endTime: time,
-          cached,
-        };
-      } else if (currentSegment.cached === cached) {
-        // Extend current segment
-        currentSegment.endTime = time;
-      } else {
-        // Finish current segment and start new one
-        segments.push(currentSegment);
-        currentSegment = {
-          startTime: time,
-          endTime: time,
-          cached,
-        };
-      }
-    }
-
-    // Add the last segment
-    if (currentSegment) {
-      currentSegment.endTime = duration;
-      segments.push(currentSegment);
-    }
-
-    return segments;
-  };
-
-  const cacheSegments = calculateCacheSegments();
-
-  return (
-    <div className="absolute top-0 left-0 right-0 h-px z-10 pointer-events-none">
-      {cacheSegments.map((segment, index) => {
-        const startX =
-          segment.startTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-        const endX =
-          segment.endTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-        const width = endX - startX;
-
-        return (
-          <div
-            key={index}
-            className={cn(
-              "absolute top-0 h-px",
-              segment.cached ? "bg-primary" : "bg-transparent"
-            )}
-            style={{
-              left: `${startX}px`,
-              width: `${width}px`,
-            }}
-            title={
-              segment.cached
-                ? "Cached (fast playback)"
-                : "Not cached (will render)"
-            }
-          />
-        );
-      })}
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index ca47d3ca..fd292ad8 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -1,387 +1,554 @@
 "use client";
 
+import { useEditor } from "@/hooks/use-editor";
+import { useAssetsPanelStore } from "@/stores/assets-panel-store";
+import AudioWaveform from "./audio-waveform";
+import { useTimelineElementResize } from "@/hooks/timeline/element/use-element-resize";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import {
-  Scissors,
-  Trash2,
-  Copy,
-  Search,
-  RefreshCw,
-  EyeOff,
-  Eye,
-  Volume2,
-  VolumeX,
-} from "lucide-react";
-import { useMediaStore } from "@/stores/media-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import AudioWaveform from "../audio-waveform";
-import { toast } from "sonner";
-import { TimelineElementProps, MediaElement } from "@/types/timeline";
-import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
+	getTrackClasses,
+	getTrackHeight,
+	canElementHaveAudio,
+	canElementBeHidden,
+	hasMediaId,
+} from "@/lib/timeline";
 import {
-  getTrackElementClasses,
-  TIMELINE_CONSTANTS,
-  getTrackHeight,
-} from "@/constants/timeline-constants";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
 } from "../../ui/context-menu";
-import { useMediaPanelStore } from "../media-panel/store";
+import type {
+	TimelineElement as TimelineElementType,
+	TimelineTrack,
+	ElementDragState,
+} from "@/types/timeline";
+import type { MediaAsset } from "@/types/assets";
+import { mediaSupportsAudio } from "@/lib/media/media-utils";
+import { getActionDefinition, type TAction, invokeAction } from "@/lib/actions";
+import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
+import Image from "next/image";
+import {
+	ScissorIcon,
+	Delete02Icon,
+	Copy01Icon,
+	ViewIcon,
+	ViewOffSlashIcon,
+	VolumeHighIcon,
+	VolumeOffIcon,
+	VolumeMute02Icon,
+	Search01Icon,
+	Exchange01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { uppercase } from "@/utils/string";
+import type { ComponentProps } from "react";
 
-export function TimelineElement({
-  element,
-  track,
-  zoomLevel,
-  isSelected,
-  onElementMouseDown,
-  onElementClick,
-}: TimelineElementProps) {
-  const { mediaFiles } = useMediaStore();
-  const {
-    dragState,
-    copySelected,
-    selectedElements,
-    deleteSelected,
-    splitSelected,
-    toggleSelectedHidden,
-    toggleSelectedMuted,
-    duplicateElement,
-    revealElementInMedia,
-    replaceElementWithFile,
-    getContextMenuState,
-  } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
+function getDisplayShortcut(action: TAction) {
+	const { defaultShortcuts } = getActionDefinition(action);
+	if (!defaultShortcuts?.length) {
+		return "";
+	}
 
-  const mediaItem =
-    element.type === "media"
-      ? mediaFiles.find((file) => file.id === element.mediaId)
-      : null;
-  const hasAudio = mediaItem?.type === "audio" || mediaItem?.type === "video";
+	return uppercase({
+		string: defaultShortcuts[0].replace("+", " "),
+	});
+}
 
-  const { resizing, handleResizeStart, handleResizeMove, handleResizeEnd } =
-    useTimelineElementResize({
-      element,
-      track,
-      zoomLevel,
-    });
+interface TimelineElementProps {
+	element: TimelineElementType;
+	track: TimelineTrack;
+	zoomLevel: number;
+	isSelected: boolean;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	onResizeStateChange?: (params: { isResizing: boolean }) => void;
+	onElementMouseDown: (
+		e: React.MouseEvent,
+		element: TimelineElementType,
+	) => void;
+	onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
+	dragState: ElementDragState;
+}
 
-  const {
-    isMultipleSelected,
-    isCurrentElementSelected,
-    hasAudioElements,
-    canSplitSelected,
-  } = getContextMenuState(track.id, element.id);
+export function TimelineElement({
+	element,
+	track,
+	zoomLevel,
+	isSelected,
+	onSnapPointChange,
+	onResizeStateChange,
+	onElementMouseDown,
+	onElementClick,
+	dragState,
+}: TimelineElementProps) {
+	const editor = useEditor();
+	const { selectedElements } = useElementSelection();
+	const { requestRevealMedia } = useAssetsPanelStore();
 
-  const effectiveDuration =
-    element.duration - element.trimStart - element.trimEnd;
-  const elementWidth = Math.max(
-    TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,
-    effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel
-  );
+	const mediaAssets = editor.media.getAssets();
+	let mediaAsset: MediaAsset | null = null;
 
-  const isBeingDragged = dragState.elementId === element.id;
-  const elementStartTime =
-    isBeingDragged && dragState.isDragging
-      ? dragState.currentTime
-      : element.startTime;
+	if (hasMediaId(element)) {
+		mediaAsset =
+			mediaAssets.find((asset) => asset.id === element.mediaId) ?? null;
+	}
 
-  const elementLeft = elementStartTime * 50 * zoomLevel;
+	const hasAudio = mediaSupportsAudio({ media: mediaAsset });
 
-  const handleElementSplitContext = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    splitSelected(
-      currentTime,
-      isMultipleSelected && isCurrentElementSelected ? undefined : track.id,
-      isMultipleSelected && isCurrentElementSelected ? undefined : element.id
-    );
-  };
+	const { handleResizeStart, isResizing, currentStartTime, currentDuration } =
+		useTimelineElementResize({
+			element,
+			track,
+			zoomLevel,
+			onSnapPointChange,
+			onResizeStateChange,
+		});
 
-  const handleElementDuplicateContext = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    duplicateElement(track.id, element.id);
-  };
+	const isCurrentElementSelected = selectedElements.some(
+		(selected) =>
+			selected.elementId === element.id && selected.trackId === track.id,
+	);
 
-  const handleElementCopyContext = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    copySelected();
-  };
+	const isBeingDragged = dragState.elementId === element.id;
+	const dragOffsetY =
+		isBeingDragged && dragState.isDragging
+			? dragState.currentMouseY - dragState.startMouseY
+			: 0;
+	const elementStartTime =
+		isBeingDragged && dragState.isDragging
+			? dragState.currentTime
+			: element.startTime;
+	const displayedStartTime = isResizing ? currentStartTime : elementStartTime;
+	const displayedDuration = isResizing ? currentDuration : element.duration;
+	const elementWidth =
+		displayedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const elementLeft = displayedStartTime * 50 * zoomLevel;
 
-  const handleElementDeleteContext = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    deleteSelected(
-      isMultipleSelected && isCurrentElementSelected ? undefined : track.id,
-      isMultipleSelected && isCurrentElementSelected ? undefined : element.id
-    );
-  };
+	const handleRevealInMedia = ({ event }: { event: React.MouseEvent }) => {
+		event.stopPropagation();
+		if (hasMediaId(element)) {
+			requestRevealMedia(element.mediaId);
+		}
+	};
 
-  const handleToggleElementContext = (e: React.MouseEvent) => {
-    e.stopPropagation();
+	const isMuted = canElementHaveAudio(element) && element.muted === true;
 
-    if (hasAudio && element.type === "media") {
-      toggleSelectedMuted(
-        isMultipleSelected && isCurrentElementSelected ? undefined : track.id,
-        isMultipleSelected && isCurrentElementSelected ? undefined : element.id
-      );
-    } else {
-      toggleSelectedHidden(
-        isMultipleSelected && isCurrentElementSelected ? undefined : track.id,
-        isMultipleSelected && isCurrentElementSelected ? undefined : element.id
-      );
-    }
-  };
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger asChild>
+				<div
+					className={`absolute top-0 h-full select-none ${
+						isBeingDragged ? "z-30" : "z-10"
+					}`}
+					style={{
+						left: `${elementLeft}px`,
+						width: `${elementWidth}px`,
+						transform:
+							isBeingDragged && dragState.isDragging
+								? `translate3d(0, ${dragOffsetY}px, 0)`
+								: undefined,
+					}}
+				>
+					<ElementInner
+						element={element}
+						track={track}
+						isSelected={isSelected}
+						isBeingDragged={isBeingDragged}
+						hasAudio={hasAudio}
+						isMuted={isMuted}
+						mediaAssets={mediaAssets}
+						onElementClick={onElementClick}
+						onElementMouseDown={onElementMouseDown}
+						handleResizeStart={handleResizeStart}
+					/>
+				</div>
+			</ContextMenuTrigger>
+			<ContextMenuContent className="z-200 w-64">
+				<ActionMenuItem action="split" icon={<HugeiconsIcon icon={ScissorIcon} />}>
+					Split
+				</ActionMenuItem>
+				<CopyMenuItem />
+				{canElementHaveAudio(element) && hasAudio && (
+					<MuteMenuItem
+						isMultipleSelected={selectedElements.length > 1}
+						isCurrentElementSelected={isCurrentElementSelected}
+						isMuted={isMuted}
+					/>
+				)}
+				{canElementBeHidden(element) && (
+					<VisibilityMenuItem
+						element={element}
+						isMultipleSelected={selectedElements.length > 1}
+						isCurrentElementSelected={isCurrentElementSelected}
+					/>
+				)}
+				{selectedElements.length === 1 && (
+					<ActionMenuItem action="duplicate-selected" icon={<HugeiconsIcon icon={Copy01Icon} />}>
+						Duplicate
+					</ActionMenuItem>
+				)}
+				{selectedElements.length === 1 && hasMediaId(element) && (
+					<>
+						<ContextMenuItem
+							icon={<HugeiconsIcon icon={Search01Icon} />}
+							onClick={(event) => handleRevealInMedia({ event })}
+						>
+							Reveal media
+						</ContextMenuItem>
+						<ContextMenuItem
+							icon={<HugeiconsIcon icon={Exchange01Icon} />}
+							disabled
+						>
+							Replace media
+						</ContextMenuItem>
+					</>
+				)}
+				<ContextMenuSeparator />
+				<DeleteMenuItem
+					isMultipleSelected={selectedElements.length > 1}
+					isCurrentElementSelected={isCurrentElementSelected}
+					elementType={element.type}
+					selectedCount={selectedElements.length}
+				/>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+}
 
-  const handleReplaceClip = (e: React.MouseEvent) => {
-    e.stopPropagation();
+function ElementInner({
+	element,
+	track,
+	isSelected,
+	isBeingDragged,
+	hasAudio,
+	isMuted,
+	mediaAssets,
+	onElementClick,
+	onElementMouseDown,
+	handleResizeStart,
+}: {
+	element: TimelineElementType;
+	track: TimelineTrack;
+	isSelected: boolean;
+	isBeingDragged: boolean;
+	hasAudio: boolean;
+	isMuted: boolean;
+	mediaAssets: MediaAsset[];
+	onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
+	onElementMouseDown: (
+		e: React.MouseEvent,
+		element: TimelineElementType,
+	) => void;
+	handleResizeStart: (params: {
+		e: React.MouseEvent;
+		elementId: string;
+		side: "left" | "right";
+	}) => void;
+}) {
+	return (
+		<div
+			className={`relative h-full cursor-pointer overflow-hidden rounded-[0.5rem] ${getTrackClasses(
+				{
+					type: track.type,
+				},
+			)} ${isBeingDragged ? "z-30" : "z-10"} ${canElementBeHidden(element) && element.hidden ? "opacity-50" : ""}`}
+		>
+			<button
+				type="button"
+				className="absolute inset-0 size-full cursor-pointer"
+				onClick={(e) => onElementClick(e, element)}
+				onMouseDown={(e) => onElementMouseDown(e, element)}
+			>
+				<div className="absolute inset-0 flex h-full items-center">
+					<ElementContent
+						element={element}
+						track={track}
+						isSelected={isSelected}
+						mediaAssets={mediaAssets}
+					/>
+				</div>
 
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "video/*,audio/*,image/*";
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (file) {
-        await replaceElementWithFile(track.id, element.id, file);
-      }
-    };
-    input.click();
-  };
+				{(hasAudio
+					? isMuted
+					: canElementBeHidden(element) && element.hidden) && (
+					<div className="bg-opacity-50 pointer-events-none absolute inset-0 flex items-center justify-center bg-black">
+						{hasAudio ? (
+							<HugeiconsIcon
+								icon={VolumeHighIcon}
+								className="size-6 text-white"
+							/>
+						) : (
+							<HugeiconsIcon
+								icon={VolumeOffIcon}
+								className="size-6 text-white"
+							/>
+						)}
+					</div>
+				)}
+			</button>
 
-  const handleRevealInMedia = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    revealElementInMedia(element.id);
-  };
+			{isSelected && (
+				<>
+					<ResizeHandle
+						side="left"
+						elementId={element.id}
+						handleResizeStart={handleResizeStart}
+					/>
+					<ResizeHandle
+						side="right"
+						elementId={element.id}
+						handleResizeStart={handleResizeStart}
+					/>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ResizeHandle({
+	side,
+	elementId,
+	handleResizeStart,
+}: {
+	side: "left" | "right";
+	elementId: string;
+	handleResizeStart: (params: {
+		e: React.MouseEvent;
+		elementId: string;
+		side: "left" | "right";
+	}) => void;
+}) {
+	const isLeft = side === "left";
+	return (
+		<button
+			type="button"
+			className={`bg-primary absolute top-0 bottom-0 z-50 flex w-[0.6rem] items-center justify-center ${isLeft ? "left-0 cursor-w-resize" : "right-0 cursor-e-resize"}`}
+			onMouseDown={(e) => handleResizeStart({ e, elementId, side })}
+			aria-label={`${isLeft ? "Left" : "Right"} resize handle`}
+		>
+			<div className="bg-foreground h-[1.5rem] w-[0.2rem] rounded-full" />
+		</button>
+	);
+}
 
-  const renderElementContent = () => {
-    if (element.type === "text") {
-      return (
-        <div className="w-full h-full flex items-center justify-start pl-2">
-          <span className="text-xs text-white truncate">{element.content}</span>
-        </div>
-      );
-    }
+function ElementContent({
+	element,
+	track,
+	isSelected,
+	mediaAssets,
+}: {
+	element: TimelineElementType;
+	track: TimelineTrack;
+	isSelected: boolean;
+	mediaAssets: MediaAsset[];
+}) {
+	if (element.type === "text") {
+		return (
+			<div className="flex size-full items-center justify-start pl-2">
+				<span className="truncate text-xs text-white">{element.content}</span>
+			</div>
+		);
+	}
 
-    const mediaItem = mediaFiles.find((file) => file.id === element.mediaId);
-    if (!mediaItem) {
-      return (
-        <span className="text-xs text-foreground/80 truncate">
-          {element.name}
-        </span>
-      );
-    }
+	if (element.type === "sticker") {
+		return (
+			<div className="flex size-full items-center gap-2 pl-2">
+				<Image
+					src={`https://api.iconify.design/${element.iconName}.svg?width=20&height=20`}
+					alt={element.name}
+					className="size-5 shrink-0"
+					width={20}
+					height={20}
+					unoptimized
+				/>
+				<span className="truncate text-xs text-white">{element.name}</span>
+			</div>
+		);
+	}
 
-    if (
-      mediaItem.type === "image" ||
-      (mediaItem.type === "video" && mediaItem.thumbnailUrl)
-    ) {
-      const trackHeight = getTrackHeight(track.type);
-      const tileWidth = trackHeight * (16 / 9);
+	if (element.type === "audio") {
+		const audioBuffer =
+			element.sourceType === "library" ? element.buffer : undefined;
 
-      const imageUrl =
-        mediaItem.type === "image" ? mediaItem.url : mediaItem.thumbnailUrl;
+		const audioUrl =
+			element.sourceType === "library"
+				? element.sourceUrl
+				: mediaAssets.find((asset) => asset.id === element.mediaId)?.url;
 
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <div
-            className={`w-full h-full relative ${
-              isSelected ? "bg-primary" : "bg-transparent"
-            }`}
-          >
-            <div
-              className={`absolute top-[0.25rem] bottom-[0.25rem] left-0 right-0`}
-              style={{
-                backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
-                backgroundRepeat: "repeat-x",
-                backgroundSize: `${tileWidth}px ${trackHeight}px`,
-                backgroundPosition: "left center",
-                pointerEvents: "none",
-              }}
-              aria-label={`Tiled ${mediaItem.type === "image" ? "background" : "thumbnail"} of ${mediaItem.name}`}
-            />
-          </div>
-        </div>
-      );
-    }
+		if (audioBuffer || audioUrl) {
+			return (
+				<div className="flex size-full items-center gap-2">
+					<div className="min-w-0 flex-1">
+						<AudioWaveform
+							audioBuffer={audioBuffer}
+							audioUrl={audioUrl}
+							height={24}
+							className="w-full"
+						/>
+					</div>
+				</div>
+			);
+		}
 
-    if (mediaItem.type === "audio") {
-      return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="flex-1 min-w-0">
-            <AudioWaveform
-              audioUrl={mediaItem.url || ""}
-              height={24}
-              className="w-full"
-            />
-          </div>
-        </div>
-      );
-    }
+		return (
+			<span className="text-foreground/80 truncate text-xs">
+				{element.name}
+			</span>
+		);
+	}
 
-    return (
-      <span className="text-xs text-foreground/80 truncate">
-        {element.name}
-      </span>
-    );
-  };
+	const mediaAsset = mediaAssets.find((asset) => asset.id === element.mediaId);
+	if (!mediaAsset) {
+		return (
+			<span className="text-foreground/80 truncate text-xs">
+				{element.name}
+			</span>
+		);
+	}
 
-  const handleElementMouseDown = (e: React.MouseEvent) => {
-    if (onElementMouseDown) {
-      onElementMouseDown(e, element);
-    }
-  };
+	if (
+		mediaAsset.type === "image" ||
+		(mediaAsset.type === "video" && mediaAsset.thumbnailUrl)
+	) {
+		const trackHeight = getTrackHeight({ type: track.type });
+		const tileWidth = trackHeight * (16 / 9);
+		const imageUrl =
+			mediaAsset.type === "image" ? mediaAsset.url : mediaAsset.thumbnailUrl;
 
-  const isMuted = element.type === "media" && element.muted;
+		return (
+			<div className="flex size-full items-center justify-center">
+				<div
+					className={`relative size-full ${isSelected ? "bg-primary" : "bg-transparent"}`}
+				>
+					<div
+						className="absolute right-0 left-0"
+						style={{
+							backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
+							backgroundRepeat: "repeat-x",
+							backgroundSize: `${tileWidth}px ${trackHeight}px`,
+							backgroundPosition: "left center",
+							pointerEvents: "none",
+							top: isSelected ? "0.25rem" : "0rem",
+							bottom: isSelected ? "0.25rem" : "0rem",
+						}}
+					/>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <div
-          className={`absolute top-0 h-full select-none timeline-element ${
-            isBeingDragged ? "z-50" : "z-10"
-          }`}
-          style={{
-            left: `${elementLeft}px`,
-            width: `${elementWidth}px`,
-          }}
-          data-element-id={element.id}
-          data-track-id={track.id}
-          onMouseMove={resizing ? handleResizeMove : undefined}
-          onMouseUp={resizing ? handleResizeEnd : undefined}
-          onMouseLeave={resizing ? handleResizeEnd : undefined}
-        >
-          <div
-            className={`relative h-full rounded-[0.5rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
-              track.type
-            )} ${isSelected ? "" : ""} ${
-              isBeingDragged ? "z-50" : "z-10"
-            } ${element.hidden ? "opacity-50" : ""}`}
-            onClick={(e) => onElementClick && onElementClick(e, element)}
-            onMouseDown={handleElementMouseDown}
-            onContextMenu={(e) =>
-              onElementMouseDown && onElementMouseDown(e, element)
-            }
-          >
-            <div className="absolute inset-0 flex items-center h-full">
-              {renderElementContent()}
-            </div>
+	return (
+		<span className="text-foreground/80 truncate text-xs">{element.name}</span>
+	);
+}
 
-            {(hasAudio ? isMuted : element.hidden) && (
-              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center pointer-events-none">
-                {hasAudio ? (
-                  <VolumeX className="h-6 w-6 text-white" />
-                ) : (
-                  <EyeOff className="h-6 w-6 text-white" />
-                )}
-              </div>
-            )}
+function CopyMenuItem() {
+	return (
+		<ActionMenuItem action="copy-selected" icon={<HugeiconsIcon icon={Copy01Icon} />}>
+			Copy
+		</ActionMenuItem>
+	);
+}
 
-            {isSelected && (
-              <>
-                <div
-                  className="absolute left-0 top-0 bottom-0 w-[0.6rem] cursor-w-resize bg-primary z-50 flex items-center justify-center"
-                  onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
-                >
-                  <div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" />
-                </div>
-                <div
-                  className="absolute right-0 top-0 bottom-0 w-[0.6rem] cursor-e-resize bg-primary z-50 flex items-center justify-center"
-                  onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
-                >
-                  <div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" />
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent className="z-200">
-        {(!isMultipleSelected ||
-          (isMultipleSelected &&
-            isCurrentElementSelected &&
-            canSplitSelected)) && (
-          <ContextMenuItem onClick={handleElementSplitContext}>
-            <Scissors className="h-4 w-4 mr-2" />
-            {isMultipleSelected && isCurrentElementSelected
-              ? `Split ${selectedElements.length} elements at playhead`
-              : "Split at playhead"}
-          </ContextMenuItem>
-        )}
+function MuteMenuItem({
+	isMultipleSelected,
+	isCurrentElementSelected,
+	isMuted,
+}: {
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	isMuted: boolean;
+}) {
+	const getIcon = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return <HugeiconsIcon icon={VolumeMute02Icon} />;
+		}
+		return isMuted ? (
+			<HugeiconsIcon icon={VolumeHighIcon} />
+		) : (
+			<HugeiconsIcon icon={VolumeOffIcon} />
+		);
+	};
 
-        <ContextMenuItem onClick={handleElementCopyContext}>
-          <Copy className="h-4 w-4 mr-2" />
-          {isMultipleSelected && isCurrentElementSelected
-            ? `Copy ${selectedElements.length} elements`
-            : "Copy element"}
-        </ContextMenuItem>
+	return (
+		<ActionMenuItem action="toggle-elements-muted-selected" icon={getIcon()}>
+			{isMuted ? "Unmute" : "Mute"}
+		</ActionMenuItem>
+	);
+}
 
-        <ContextMenuItem onClick={handleToggleElementContext}>
-          {isMultipleSelected && isCurrentElementSelected ? (
-            hasAudioElements ? (
-              <VolumeX className="h-4 w-4 mr-2" />
-            ) : (
-              <EyeOff className="h-4 w-4 mr-2" />
-            )
-          ) : hasAudio ? (
-            isMuted ? (
-              <Volume2 className="h-4 w-4 mr-2" />
-            ) : (
-              <VolumeX className="h-4 w-4 mr-2" />
-            )
-          ) : element.hidden ? (
-            <Eye className="h-4 w-4 mr-2" />
-          ) : (
-            <EyeOff className="h-4 w-4 mr-2" />
-          )}
-          <span>
-            {isMultipleSelected && isCurrentElementSelected
-              ? hasAudioElements
-                ? `Toggle mute ${selectedElements.length} elements`
-                : `Toggle visibility ${selectedElements.length} elements`
-              : hasAudio
-                ? isMuted
-                  ? "Unmute"
-                  : "Mute"
-                : element.hidden
-                  ? "Show"
-                  : "Hide"}{" "}
-            {!isMultipleSelected && (element.type === "text" ? "text" : "clip")}
-          </span>
-        </ContextMenuItem>
+function VisibilityMenuItem({
+	element,
+	isMultipleSelected,
+	isCurrentElementSelected,
+}: {
+	element: TimelineElementType;
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+}) {
+	const isHidden = canElementBeHidden(element) && element.hidden;
 
-        {!isMultipleSelected && (
-          <ContextMenuItem onClick={handleElementDuplicateContext}>
-            <Copy className="h-4 w-4 mr-2" />
-            Duplicate {element.type === "text" ? "text" : "clip"}
-          </ContextMenuItem>
-        )}
+	const getIcon = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return <HugeiconsIcon icon={ViewOffSlashIcon} />;
+		}
+		return isHidden ? (
+			<HugeiconsIcon icon={ViewIcon} />
+		) : (
+			<HugeiconsIcon icon={ViewOffSlashIcon} />
+		);
+	};
 
-        {!isMultipleSelected && element.type === "media" && (
-          <>
-            <ContextMenuItem onClick={handleRevealInMedia}>
-              <Search className="h-4 w-4 mr-2" />
-              Reveal in media
-            </ContextMenuItem>
-            <ContextMenuItem onClick={handleReplaceClip}>
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Replace clip
-            </ContextMenuItem>
-          </>
-        )}
+	return (
+		<ActionMenuItem action="toggle-elements-visibility-selected" icon={getIcon()}>
+			{isHidden ? "Show" : "Hide"}
+		</ActionMenuItem>
+	);
+}
 
-        <ContextMenuSeparator />
+function DeleteMenuItem({
+	isMultipleSelected,
+	isCurrentElementSelected,
+	elementType,
+	selectedCount,
+}: {
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	elementType: TimelineElementType["type"];
+	selectedCount: number;
+}) {
+	return (
+		<ActionMenuItem
+			action="delete-selected"
+			variant="destructive"
+			icon={<HugeiconsIcon icon={Delete02Icon} />}
+		>
+			{isMultipleSelected && isCurrentElementSelected
+				? `Delete ${selectedCount} elements`
+				: `Delete ${elementType === "text" ? "text" : "clip"}`}
+		</ActionMenuItem>
+	);
+}
 
-        <ContextMenuItem
-          onClick={handleElementDeleteContext}
-          className="text-destructive focus:text-destructive"
-        >
-          <Trash2 className="h-4 w-4 mr-2" />
-          {isMultipleSelected && isCurrentElementSelected
-            ? `Delete ${selectedElements.length} elements`
-            : `Delete ${element.type === "text" ? "text" : "clip"}`}
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
+function ActionMenuItem({
+	action,
+	children,
+	...props
+}: Omit<ComponentProps<typeof ContextMenuItem>, "onClick" | "textRight"> & {
+	action: TAction;
+}) {
+	return (
+		<ContextMenuItem
+			onClick={(event) => {
+				event.stopPropagation();
+				invokeAction(action);
+			}}
+			textRight={getDisplayShortcut(action)}
+			{...props}
+		>
+			{children}
+		</ContextMenuItem>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-marker.tsx b/apps/web/src/components/editor/timeline/timeline-marker.tsx
deleted file mode 100644
index 1351a457..00000000
--- a/apps/web/src/components/editor/timeline/timeline-marker.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";

-

-import { cn } from "@/lib/utils";

-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

-

-interface TimelineMarkerProps {

-  time: number;

-  zoomLevel: number;

-  interval: number;

-  isMainMarker: boolean;

-}

-

-export function TimelineMarker({

-  time,

-  zoomLevel,

-  interval,

-  isMainMarker,

-}: TimelineMarkerProps) {

-  return (

-    <div

-      className={cn(

-        "absolute top-0 h-4",

-        isMainMarker

-          ? "border-l border-muted-foreground/40"

-          : "border-l border-muted-foreground/20"

-      )}

-      style={{

-        left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,

-      }}

-    >

-      <span

-        className={cn(

-          "absolute top-1 left-1 text-[0.6rem]",

-          isMainMarker

-            ? "text-muted-foreground font-medium"

-            : "text-muted-foreground/70"

-        )}

-      >

-        {(() => {

-          const formatTime = (seconds: number) => {

-            const hours = Math.floor(seconds / 3600);

-            const minutes = Math.floor((seconds % 3600) / 60);

-            const secs = seconds % 60;

-

-            if (hours > 0) {

-              return `${hours}:${minutes

-                .toString()

-                .padStart(2, "0")}:${Math.floor(secs)

-                .toString()

-                .padStart(2, "0")}`;

-            }

-            if (minutes > 0) {

-              return `${minutes}:${Math.floor(secs)

-                .toString()

-                .padStart(2, "0")}`;

-            }

-            if (interval >= 1) {

-              return `${Math.floor(secs)}s`;

-            }

-            return `${secs.toFixed(1)}s`;

-          };

-          return formatTime(time);

-        })()}

-      </span>

-    </div>

-  );

-}

diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index a1be5b26..58d0adb0 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -1,172 +1,92 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
-import { TimelineTrack } from "@/types/timeline";
+import { useRef } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
+import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
+import { useEditor } from "@/hooks/use-editor";
 
 interface TimelinePlayheadProps {
-  currentTime: number;
-  duration: number;
-  zoomLevel: number;
-  tracks: TimelineTrack[];
-  seek: (time: number) => void;
-  rulerRef: React.RefObject<HTMLDivElement>;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  trackLabelsRef?: React.RefObject<HTMLDivElement>;
-  timelineRef: React.RefObject<HTMLDivElement>;
-  playheadRef?: React.RefObject<HTMLDivElement>;
-  isSnappingToPlayhead?: boolean;
+	zoomLevel: number;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	timelineRef: React.RefObject<HTMLDivElement>;
+	playheadRef?: React.RefObject<HTMLDivElement>;
+	isSnappingToPlayhead?: boolean;
 }
 
 export function TimelinePlayhead({
-  currentTime,
-  duration,
-  zoomLevel,
-  tracks,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  trackLabelsRef,
-  timelineRef,
-  playheadRef: externalPlayheadRef,
-  isSnappingToPlayhead = false,
+	zoomLevel,
+	rulerRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	timelineRef,
+	playheadRef: externalPlayheadRef,
+	isSnappingToPlayhead = false,
 }: TimelinePlayheadProps) {
-  const internalPlayheadRef = useRef<HTMLDivElement>(null);
-  const playheadRef = externalPlayheadRef || internalPlayheadRef;
-  const [scrollLeft, setScrollLeft] = useState(0);
+	const editor = useEditor();
+	const duration = editor.timeline.getTotalDuration();
+	const internalPlayheadRef = useRef<HTMLDivElement>(null);
+	const playheadRef = externalPlayheadRef || internalPlayheadRef;
 
-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
+	const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
+		zoomLevel,
+		rulerRef,
+		rulerScrollRef,
+		tracksScrollRef,
+		playheadRef,
+	});
 
-  // Track scroll position to lock playhead to frame
-  useEffect(() => {
-    const tracksViewport = tracksScrollRef.current;
+	const timelineContainerHeight =
+		tracksScrollRef.current?.clientHeight ??
+		timelineRef.current?.clientHeight ??
+		400;
+	const totalHeight = Math.max(0, timelineContainerHeight - 4);
 
-    if (!tracksViewport) return;
+	const timelinePosition =
+		playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const leftPosition = timelinePosition;
 
-    const handleScroll = () => {
-      setScrollLeft(tracksViewport.scrollLeft);
-    };
+	const handlePlayheadKeyDown = (
+		event: React.KeyboardEvent<HTMLDivElement>,
+	) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
 
-    // Set initial scroll position
-    setScrollLeft(tracksViewport.scrollLeft);
+		event.preventDefault();
+		const step = 1 / Math.max(1, editor.project.getActive().settings.fps);
+		const direction = event.key === "ArrowRight" ? 1 : -1;
+		const nextTime = Math.max(
+			0,
+			Math.min(duration, playheadPosition + direction * step),
+		);
 
-    tracksViewport.addEventListener("scroll", handleScroll);
-    return () => tracksViewport.removeEventListener("scroll", handleScroll);
-  }, [tracksScrollRef]);
+		editor.playback.seek({ time: nextTime });
+	};
 
-  // Use timeline container height minus a few pixels for breathing room
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 4;
+	return (
+		<div
+			ref={playheadRef}
+			role="slider"
+			aria-label="Timeline playhead"
+			aria-valuemin={0}
+			aria-valuemax={duration}
+			aria-valuenow={playheadPosition}
+			tabIndex={0}
+			className="pointer-events-auto absolute z-60"
+			style={{
+				left: `${leftPosition}px`,
+				top: 0,
+				height: `${totalHeight}px`,
+				width: "2px",
+			}}
+			onMouseDown={handlePlayheadMouseDown}
+			onKeyDown={handlePlayheadKeyDown}
+		>
+			<div className="bg-foreground absolute left-0 h-full w-0.5 cursor-col-resize" />
 
-  // Get dynamic track labels width, fallback to 0 if no tracks or no ref
-  const trackLabelsWidth =
-    tracks.length > 0 && trackLabelsRef?.current
-      ? trackLabelsRef.current.offsetWidth
-      : 0;
-
-  // Calculate position locked to timeline content (accounting for scroll)
-  const timelinePosition =
-    playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const rawLeftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
-
-  // Get the timeline content width and viewport width for right boundary
-  const timelineContentWidth =
-    duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const tracksViewport = tracksScrollRef.current;
-  const viewportWidth = tracksViewport?.clientWidth || 1000;
-
-  // Constrain playhead to never appear outside the timeline area
-  const leftBoundary = trackLabelsWidth;
-  const rightBoundary = Math.min(
-    trackLabelsWidth + timelineContentWidth - scrollLeft, // Don't go beyond timeline content
-    trackLabelsWidth + viewportWidth // Don't go beyond viewport
-  );
-
-  const leftPosition = Math.max(
-    leftBoundary,
-    Math.min(rightBoundary, rawLeftPosition)
-  );
-
-  // Debug logging when playhead might go outside
-  if (rawLeftPosition < leftBoundary || rawLeftPosition > rightBoundary) {
-    console.log(
-      "PLAYHEAD VISUAL DEBUG:",
-      JSON.stringify({
-        playheadPosition,
-        timelinePosition,
-        trackLabelsWidth,
-        scrollLeft,
-        rawLeftPosition,
-        constrainedLeftPosition: leftPosition,
-        leftBoundary,
-        rightBoundary,
-        timelineContentWidth,
-        viewportWidth,
-        zoomLevel,
-      })
-    );
-  }
-
-  return (
-    <div
-      ref={playheadRef}
-      className="absolute pointer-events-auto z-40"
-      style={{
-        left: `${leftPosition}px`,
-        top: 0,
-        height: `${totalHeight}px`,
-        width: "2px", // Slightly wider for better click target
-      }}
-      onMouseDown={handlePlayheadMouseDown}
-    >
-      {/* The playhead line spanning full height */}
-      <div
-        className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-foreground" : "bg-foreground"}`}
-      />
-
-      {/* Playhead dot indicator at the top (in ruler area) */}
-      <div
-        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-foreground border-foreground" : "bg-foreground border-foreground/50"}`}
-      />
-    </div>
-  );
+			<div
+				className={`absolute top-1 left-1/2 size-3 -translate-x-1/2 transform rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-foreground border-foreground" : "bg-foreground border-foreground/50"}`}
+			/>
+		</div>
+	);
 }
-
-// Also export a hook for getting ruler handlers
-export function useTimelinePlayheadRuler({
-  currentTime,
-  duration,
-  zoomLevel,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  playheadRef,
-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
-  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  return { handleRulerMouseDown, isDraggingRuler };
-}
-
-export { TimelinePlayhead as default };
diff --git a/apps/web/src/components/editor/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
new file mode 100644
index 00000000..87702a4f
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
@@ -0,0 +1,83 @@
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { DEFAULT_FPS } from "@/constants/project-constants";
+import { useEditor } from "@/hooks/use-editor";
+import { getRulerConfig, shouldShowLabel } from "@/lib/timeline/ruler-utils";
+import { TimelineTick } from "./timeline-tick";
+
+interface TimelineRulerProps {
+	zoomLevel: number;
+	dynamicTimelineWidth: number;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	handleWheel: (e: React.WheelEvent) => void;
+	handleTimelineContentClick: (e: React.MouseEvent) => void;
+	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
+	handleRulerMouseDown: (e: React.MouseEvent) => void;
+}
+
+export function TimelineRuler({
+	zoomLevel,
+	dynamicTimelineWidth,
+	rulerRef,
+	handleWheel,
+	handleTimelineContentClick,
+	handleRulerTrackingMouseDown,
+	handleRulerMouseDown,
+}: TimelineRulerProps) {
+	const editor = useEditor();
+	const duration = editor.timeline.getTotalDuration();
+	const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const visibleDuration = dynamicTimelineWidth / pixelsPerSecond;
+	const effectiveDuration = Math.max(duration, visibleDuration);
+	const project = editor.project.getActive();
+	const fps = project?.settings.fps ?? DEFAULT_FPS;
+	const { labelIntervalSeconds, tickIntervalSeconds } = getRulerConfig({
+		zoomLevel,
+		fps,
+	});
+	const tickCount = Math.ceil(effectiveDuration / tickIntervalSeconds) + 1;
+
+	const timelineTicks: Array<JSX.Element> = [];
+	for (let tickIndex = 0; tickIndex < tickCount; tickIndex += 1) {
+		const time = tickIndex * tickIntervalSeconds;
+		if (time > effectiveDuration) break;
+
+		const showLabel = shouldShowLabel({ time, labelIntervalSeconds });
+		timelineTicks.push(
+			<TimelineTick
+				key={tickIndex}
+				time={time}
+				zoomLevel={zoomLevel}
+				fps={fps}
+				showLabel={showLabel}
+			/>,
+		);
+	}
+
+	return (
+		<div
+			role="slider"
+			tabIndex={0}
+			aria-label="Timeline ruler"
+			aria-valuemin={0}
+			aria-valuemax={effectiveDuration}
+			aria-valuenow={0}
+			className="relative h-4 flex-1 overflow-x-visible"
+			onWheel={handleWheel}
+			onClick={handleTimelineContentClick}
+			onMouseDown={handleRulerTrackingMouseDown}
+			onKeyDown={() => {}}
+		>
+			<div
+				role="none"
+				ref={rulerRef}
+				className="relative h-4 cursor-default select-none"
+				style={{
+					width: `${dynamicTimelineWidth}px`,
+				}}
+				onMouseDown={handleRulerMouseDown}
+			>
+				{timelineTicks}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/editor/timeline/timeline-tick.tsx b/apps/web/src/components/editor/timeline/timeline-tick.tsx
new file mode 100644
index 00000000..9402d25e
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/timeline-tick.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { formatRulerLabel } from "@/lib/timeline/ruler-utils";
+
+interface TimelineTickProps {
+	time: number;
+	zoomLevel: number;
+	fps: number;
+	showLabel: boolean;
+}
+
+export function TimelineTick({
+	time,
+	zoomLevel,
+	fps,
+	showLabel,
+}: TimelineTickProps) {
+	const leftPosition = time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+
+	if (showLabel) {
+		const label = formatRulerLabel({ timeInSeconds: time, fps });
+		return (
+			<span
+				className="text-muted-foreground/85 absolute bottom-0 select-none text-[10px] leading-none"
+				style={{ left: `${leftPosition}px` }}
+			>
+				{label}
+			</span>
+		);
+	}
+
+	return (
+		<div
+			className="border-muted-foreground/25 absolute bottom-0.5 h-1.5 border-l"
+			style={{ left: `${leftPosition}px` }}
+		/>
+	);
+}
diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
index 80c6ce08..822bb438 100644
--- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
@@ -1,397 +1,355 @@
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useSceneStore } from "@/stores/scene-store";
-import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
 import {
-  TooltipProvider,
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
+	TooltipProvider,
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
 } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
+import { SkipBack, SplitSquareHorizontal } from "lucide-react";
 import {
-  Pause,
-  Play,
-  SkipBack,
-  Bookmark,
-  Magnet,
-  Link,
-  ZoomOut,
-  ZoomIn,
-  Copy,
-  Trash2,
-  Snowflake,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  SplitSquareHorizontal,
-  Scissors,
-  LayersIcon,
-} from "lucide-react";
-import {
-  SplitButton,
-  SplitButtonLeft,
-  SplitButtonRight,
-  SplitButtonSeparator,
+	SplitButton,
+	SplitButtonLeft,
+	SplitButtonRight,
+	SplitButtonSeparator,
 } from "@/components/ui/split-button";
 import { Slider } from "@/components/ui/slider";
-import { DEFAULT_FPS } from "@/stores/project-store";
 import { formatTimeCode } from "@/lib/time";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { EditableTimecode } from "@/components/ui/editable-timecode";
+import { EditableTimecode } from "@/components/editable-timecode";
 import { ScenesView } from "../scenes-view";
+import { type TAction, invokeAction } from "@/lib/actions";
+import { cn } from "@/utils/ui";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Bookmark02Icon,
+	Delete02Icon,
+	SnowIcon,
+	ScissorIcon,
+	MagnetIcon,
+	Link04Icon,
+	SearchAddIcon,
+	SearchMinusIcon,
+	PauseIcon,
+	PlayIcon,
+	Copy01Icon,
+	AlignLeftIcon,
+	AlignRightIcon,
+	Layers01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 
 export function TimelineToolbar({
-  zoomLevel,
-  setZoomLevel,
+	zoomLevel,
+	minZoom,
+	setZoomLevel,
 }: {
-  zoomLevel: number;
-  setZoomLevel: (zoom: number) => void;
+	zoomLevel: number;
+	minZoom: number;
+	setZoomLevel: ({ zoom }: { zoom: number }) => void;
 }) {
-  const {
-    tracks,
-    addTrack,
-    addElementToTrack,
-    selectedElements,
-    clearSelectedElements,
-    deleteSelected,
-    splitSelected,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
-    snappingEnabled,
-    toggleSnapping,
-    rippleEditingEnabled,
-    toggleRippleEditing,
-  } = useTimelineStore();
-  const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
-  const { toggleBookmark, isBookmarked, activeProject } = useProjectStore();
-  const { scenes, currentScene } = useSceneStore();
+	const handleZoom = ({ direction }: { direction: "in" | "out" }) => {
+		const newZoomLevel =
+			direction === "in"
+				? Math.min(
+						TIMELINE_CONSTANTS.ZOOM_MAX,
+						zoomLevel + TIMELINE_CONSTANTS.ZOOM_STEP,
+					)
+				: Math.max(minZoom, zoomLevel - TIMELINE_CONSTANTS.ZOOM_STEP);
+		setZoomLevel({ zoom: newZoomLevel });
+	};
+
+	return (
+		<ScrollArea className="scrollbar-hidden">
+			<div className="flex h-10 items-center justify-between border-b px-2 py-1">
+				<ToolbarLeftSection />
+
+				<SceneSelector />
+
+				<ToolbarRightSection
+					zoomLevel={zoomLevel}
+					minZoom={minZoom}
+					onZoomChange={(zoom) => setZoomLevel({ zoom })}
+					onZoom={handleZoom}
+				/>
+			</div>
+		</ScrollArea>
+	);
+}
+
+function ToolbarLeftSection() {
+	const editor = useEditor();
+	const currentTime = editor.playback.getCurrentTime();
+	const isPlaying = editor.playback.getIsPlaying();
+	const currentBookmarked = editor.scenes.isBookmarked({ time: currentTime });
+
+	const handleAction = ({
+		action,
+		event,
+	}: {
+		action: TAction;
+		event: React.MouseEvent;
+	}) => {
+		event.stopPropagation();
+		invokeAction(action);
+	};
+
+	return (
+		<div className="flex items-center gap-1">
+			<TooltipProvider delayDuration={500}>
+				<ToolbarButton
+					icon={
+						isPlaying ? (
+							<HugeiconsIcon icon={PauseIcon} />
+						) : (
+							<HugeiconsIcon icon={PlayIcon} />
+						)
+					}
+					tooltip={isPlaying ? "Pause" : "Play"}
+					onClick={({ event }) =>
+						handleAction({ action: "toggle-play", event })
+					}
+				/>
+
+				<ToolbarButton
+					icon={<SkipBack />}
+					tooltip="Go to start"
+					onClick={({ event }) => handleAction({ action: "goto-start", event })}
+				/>
+
+				<div className="bg-border mx-1 h-6 w-px" />
+
+				<TimeDisplay />
 
-  const handleSplitSelected = () => {
-    splitSelected(currentTime);
-  };
+				<div className="bg-border mx-1 h-6 w-px" />
 
-  const handleDuplicateSelected = () => {
-    if (selectedElements.length === 0) return;
-    const canDuplicate = selectedElements.length === 1;
-    if (!canDuplicate) return;
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={ScissorIcon} />}
+					tooltip="Split element"
+					onClick={({ event }) =>
+						handleAction({ action: "split", event })
+					}
+				/>
 
-    selectedElements.forEach(({ trackId, elementId }) => {
-      const track = tracks.find((t) => t.id === trackId);
-      const element = track?.elements.find((el) => el.id === elementId);
-      if (element) {
-        const newStartTime =
-          element.startTime +
-          (element.duration - element.trimStart - element.trimEnd) +
-          0.1;
-        const { id, ...elementWithoutId } = element;
-        addElementToTrack(trackId, {
-          ...elementWithoutId,
-          startTime: newStartTime,
-        });
-      }
-    });
-    clearSelectedElements();
-  };
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={AlignLeftIcon} />}
+					tooltip="Split left"
+					onClick={({ event }) =>
+						handleAction({ action: "split-left", event })
+					}
+				/>
 
-  const handleFreezeSelected = () => {
-    toast.info("Freeze frame functionality coming soon!");
-  };
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={AlignRightIcon} />}
+					tooltip="Split right"
+					onClick={({ event }) =>
+						handleAction({ action: "split-right", event })
+					}
+				/>
 
-  const handleSplitAndKeepLeft = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((c) => c.id === elementId);
-    if (!element) return;
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
-    splitAndKeepLeft(trackId, elementId, currentTime);
-  };
+				<ToolbarButton
+					icon={<SplitSquareHorizontal />}
+					tooltip="Coming soon" /* separate audio */
+					disabled={true}
+					onClick={({ event: _event }) => {}}
+				/>
 
-  const handleSplitAndKeepRight = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((c) => c.id === elementId);
-    if (!element) return;
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
-    splitAndKeepRight(trackId, elementId, currentTime);
-  };
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={Copy01Icon} />}
+					tooltip="Duplicate element"
+					onClick={({ event }) =>
+						handleAction({ action: "duplicate-selected", event })
+					}
+				/>
 
-  const handleSeparateAudio = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one media element to separate audio");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    if (!track || track.type !== "media") {
-      toast.error("Select a media element to separate audio");
-      return;
-    }
-    separateAudio(trackId, elementId);
-  };
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={SnowIcon} />}
+					tooltip="Coming soon" /* freeze frame */
+					disabled={true}
+					onClick={({ event: _event }) => {}}
+				/>
 
-  const handleDeleteSelected = () => {
-    deleteSelected();
-  };
+				<ToolbarButton
+					icon={<HugeiconsIcon icon={Delete02Icon} />}
+					tooltip="Delete element"
+					onClick={({ event }) =>
+						handleAction({ action: "delete-selected", event })
+					}
+				/>
 
-  const handleZoomIn = () => {
-    setZoomLevel(Math.min(4, zoomLevel + 0.25));
-  };
+				<div className="bg-border mx-1 h-6 w-px" />
 
-  const handleZoomOut = () => {
-    setZoomLevel(Math.max(0.25, zoomLevel - 0.25));
-  };
+				<Tooltip>
+					<ToolbarButton
+						icon={
+							<HugeiconsIcon
+								icon={Bookmark02Icon}
+								className={currentBookmarked ? "fill-primary text-primary" : ""}
+							/>
+						}
+						tooltip={currentBookmarked ? "Remove bookmark" : "Add bookmark"}
+						onClick={({ event }) =>
+							handleAction({ action: "toggle-bookmark", event })
+						}
+					/>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+	);
+}
+
+function TimeDisplay() {
+	const editor = useEditor();
+	const currentTime = editor.playback.getCurrentTime();
+	const totalDuration = editor.timeline.getTotalDuration();
+	const fps = editor.project.getActive().settings.fps;
+
+	return (
+		<div className="flex flex-row items-center justify-center px-2">
+			<EditableTimecode
+				time={currentTime}
+				duration={totalDuration}
+				format="HH:MM:SS:FF"
+				fps={fps}
+				onTimeChange={({ time }) => editor.playback.seek({ time })}
+				className="text-center"
+			/>
+			<div className="text-muted-foreground px-2 font-mono text-xs">/</div>
+			<div className="text-muted-foreground text-center font-mono text-xs">
+				{formatTimeCode({
+					timeInSeconds: totalDuration,
+					format: "HH:MM:SS:FF",
+					fps,
+				})}
+			</div>
+		</div>
+	);
+}
+
+function SceneSelector() {
+	const editor = useEditor();
+	const currentScene = editor.scenes.getActiveScene();
+
+	return (
+		<div>
+			<SplitButton className="border-foreground/10 border">
+				<SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft>
+				<SplitButtonSeparator />
+				<ScenesView>
+					<SplitButtonRight onClick={() => {}} type="button">
+						<HugeiconsIcon icon={Layers01Icon} className="size-4" />
+					</SplitButtonRight>
+				</ScenesView>
+			</SplitButton>
+		</div>
+	);
+}
 
-  const handleZoomSliderChange = (values: number[]) => {
-    setZoomLevel(values[0]);
-  };
+function ToolbarRightSection({
+	zoomLevel,
+	minZoom,
+	onZoomChange,
+	onZoom,
+}: {
+	zoomLevel: number;
+	minZoom: number;
+	onZoomChange: (zoom: number) => void;
+	onZoom: (options: { direction: "in" | "out" }) => void;
+}) {
+	const {
+		snappingEnabled,
+		rippleEditingEnabled,
+		toggleSnapping,
+		toggleRippleEditing,
+	} = useTimelineStore();
 
-  const handleToggleBookmark = async () => {
-    await toggleBookmark(currentTime);
-  };
+	return (
+		<div className="flex items-center gap-1">
+			<TooltipProvider delayDuration={500}>
+				<ToolbarButton
+					icon={
+						<HugeiconsIcon
+							icon={MagnetIcon}
+							className={cn(snappingEnabled ? "text-primary" : "")}
+						/>
+					}
+					tooltip="Auto snapping"
+					onClick={() => toggleSnapping()}
+				/>
 
-  const currentBookmarked = isBookmarked(currentTime);
-  return (
-    <div className="flex items-center justify-between px-2 py-1 border-b h-10">
-      <div className="flex items-center gap-1">
-        <TooltipProvider delayDuration={500}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={toggle}>
-                {isPlaying ? (
-                  <Pause className="h-4 w-4" />
-                ) : (
-                  <Play className="h-4 w-4" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {isPlaying ? "Pause (Space)" : "Play (Space)"}
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={() => seek(0)}>
-                <SkipBack className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Return to Start (Home / Enter)</TooltipContent>
-          </Tooltip>
-          <div className="w-px h-6 bg-border mx-1" />
-          {/* Time Display */}
-          <div className="flex flex-row items-center justify-center px-2">
-            <EditableTimecode
-              time={currentTime}
-              duration={duration}
-              format="HH:MM:SS:FF"
-              fps={activeProject?.fps ?? DEFAULT_FPS}
-              onTimeChange={seek}
-              className="text-center"
-            />
-            <div className="text-xs text-muted-foreground font-mono px-2">
-              /
-            </div>
-            <div className="text-xs text-muted-foreground font-mono text-center">
-              {formatTimeCode(duration, "HH:MM:SS:FF")}
-            </div>
-          </div>
-          {tracks.length === 0 && (
-            <>
-              <div className="w-px h-6 bg-border mx-1" />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      const trackId = addTrack("media");
-                      addElementToTrack(trackId, {
-                        type: "media",
-                        mediaId: "test",
-                        name: "Test Clip",
-                        duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-                        startTime: 0,
-                        trimStart: 0,
-                        trimEnd: 0,
-                      });
-                    }}
-                    className="text-xs"
-                  >
-                    Add Test Clip
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Add a test clip to try playback</TooltipContent>
-              </Tooltip>
-            </>
-          )}
-          <div className="w-px h-6 bg-border mx-1" />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleSplitSelected}>
-                <Scissors className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split element (Ctrl+S)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="text"
-                size="icon"
-                onClick={handleSplitAndKeepLeft}
-              >
-                <ArrowLeftToLine className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="text"
-                size="icon"
-                onClick={handleSplitAndKeepRight}
-              >
-                <ArrowRightToLine className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleSeparateAudio}>
-                <SplitSquareHorizontal className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="text"
-                size="icon"
-                onClick={handleDuplicateSelected}
-              >
-                <Copy className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleFreezeSelected}>
-                <Snowflake className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Freeze frame (F)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleDeleteSelected}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Delete element (Delete)</TooltipContent>
-          </Tooltip>
-          <div className="w-px h-6 bg-border mx-1" />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleToggleBookmark}>
-                <Bookmark
-                  className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`}
-                />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {currentBookmarked ? "Remove bookmark" : "Add bookmark"}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-      <div>
-        <SplitButton className="border border-foreground/10">
-          <SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft>
-          <SplitButtonSeparator />
-          <ScenesView>
-            <SplitButtonRight disabled={scenes.length === 1} onClick={() => {}}>
-              <LayersIcon />
-            </SplitButtonRight>
-          </ScenesView>
-        </SplitButton>
-      </div>
-      <div className="flex items-center gap-1">
-        <TooltipProvider delayDuration={500}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={toggleSnapping}>
-                {snappingEnabled ? (
-                  <Magnet className="h-4 w-4 text-primary" />
-                ) : (
-                  <Magnet className="h-4 w-4" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Auto snapping</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={toggleRippleEditing}>
-                <Link
-                  className={`h-4 w-4 ${
-                    rippleEditingEnabled ? "text-primary" : ""
-                  }`}
-                />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {rippleEditingEnabled
-                ? "Disable Ripple Editing"
-                : "Enable Ripple Editing"}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+				<ToolbarButton
+					icon={
+						<HugeiconsIcon
+							icon={Link04Icon}
+							className={cn(
+								rippleEditingEnabled ? "text-primary" : "",
+								"scale-110",
+							)}
+						/>
+					}
+					tooltip="Ripple editing"
+					onClick={() => toggleRippleEditing()}
+				/>
+			</TooltipProvider>
 
-        <div className="h-6 w-px bg-border mx-1" />
-        <div className="flex items-center gap-1">
-          <Button variant="text" size="icon" onClick={handleZoomOut}>
-            <ZoomOut className="h-4 w-4" />
-          </Button>
-          <Slider
-            className="w-24"
-            value={[zoomLevel]}
-            onValueChange={handleZoomSliderChange}
-            min={0.25}
-            max={4}
-            step={0.25}
-          />
-          <Button variant="text" size="icon" onClick={handleZoomIn}>
-            <ZoomIn className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
+			<div className="bg-border mx-1 h-6 w-px" />
+
+			<div className="flex items-center gap-1">
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={() => onZoom({ direction: "out" })}
+				>
+					<HugeiconsIcon icon={SearchAddIcon} />
+				</Button>
+				<Slider
+					className="w-24"
+					value={[zoomLevel]}
+					onValueChange={(values) => onZoomChange(values[0])}
+					min={minZoom}
+					max={TIMELINE_CONSTANTS.ZOOM_MAX}
+					step={TIMELINE_CONSTANTS.ZOOM_STEP}
+				/>
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={() => onZoom({ direction: "in" })}
+				>
+					<HugeiconsIcon icon={SearchMinusIcon} />
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+function ToolbarButton({
+	icon,
+	tooltip,
+	onClick,
+	disabled,
+}: {
+	icon: React.ReactNode;
+	tooltip: string;
+	onClick: ({ event }: { event: React.MouseEvent }) => void;
+	disabled?: boolean;
+}) {
+	return (
+		<Tooltip delayDuration={200}>
+			<TooltipTrigger asChild>
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={(event) => onClick({ event })}
+					className={disabled ? "cursor-not-allowed opacity-50" : ""}
+				>
+					{icon}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>{tooltip}</TooltipContent>
+		</Tooltip>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index 7cfde931..29d58315 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -1,1199 +1,113 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { toast } from "sonner";
-import { processMediaFiles } from "@/lib/media-processing";
+import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import { TimelineElement } from "./timeline-element";
-import {
-  TimelineTrack,
-  getMainTrack,
-  canElementGoOnTrack,
-} from "@/types/timeline";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-import type {
-  TimelineElement as TimelineElementType,
-  DragData,
-  TrackType,
-} from "@/types/timeline";
-import {
-  snapTimeToFrame,
-  TIMELINE_CONSTANTS,
-} from "@/constants/timeline-constants";
-import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
-import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
-import { useEdgeAutoScroll } from "@/hooks/use-edge-auto-scroll";
+import type { TimelineTrack } from "@/types/timeline";
+import type { TimelineElement as TimelineElementType } from "@/types/timeline";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
+import type { ElementDragState } from "@/types/timeline";
+import { useEditor } from "@/hooks/use-editor";
+import { cn } from "@/utils/ui";
 
-export function TimelineTrackContent({
-  track,
-  zoomLevel,
-  onSnapPointChange,
-  rulerScrollRef,
-  tracksScrollRef,
-}: {
-  track: TimelineTrack;
-  zoomLevel: number;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-}) {
-  const { mediaFiles } = useMediaStore();
-  const {
-    tracks,
-    addTrack,
-    moveElementToTrack,
-    updateElementStartTime,
-    updateElementStartTimeWithRipple,
-    addElementToTrack,
-    selectedElements,
-    selectElement,
-    dragState,
-    startDrag: startDragAction,
-    updateDragTime,
-    endDrag: endDragAction,
-    clearSelectedElements,
-    insertTrackAt,
-    snappingEnabled,
-    rippleEditingEnabled,
-  } = useTimelineStore();
-
-  const { currentTime, duration } = usePlaybackStore();
-
-  // Initialize snapping hook
-  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({
-    snapThreshold: 10,
-    enableElementSnapping: snappingEnabled,
-    enablePlayheadSnapping: snappingEnabled,
-  });
-
-  // Helper function for drop snapping that tries both edges
-  const getDropSnappedTime = (
-    dropTime: number,
-    elementDuration: number,
-    excludeElementId?: string
-  ) => {
-    // Always apply frame snapping first
-    const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
-    let finalTime = snapTimeToFrame(dropTime, projectFps);
-
-    // Additionally apply element snapping if enabled
-    if (snappingEnabled) {
-      // Try snapping both start and end edges for drops
-      const startSnapResult = snapElementEdge(
-        dropTime,
-        elementDuration,
-        tracks,
-        currentTime,
-        zoomLevel,
-        excludeElementId,
-        true // snap to start edge
-      );
-
-      const endSnapResult = snapElementEdge(
-        dropTime,
-        elementDuration,
-        tracks,
-        currentTime,
-        zoomLevel,
-        excludeElementId,
-        false // snap to end edge
-      );
-
-      // Choose the snap result with the smaller distance (closer snap)
-      let bestSnapResult = startSnapResult;
-      if (
-        endSnapResult.snapPoint &&
-        (!startSnapResult.snapPoint ||
-          endSnapResult.snapDistance < startSnapResult.snapDistance)
-      ) {
-        bestSnapResult = endSnapResult;
-      }
-
-      // Only use element snapping if it found a snap point, otherwise keep frame-snapped time
-      if (bestSnapResult.snapPoint) {
-        finalTime = bestSnapResult.snappedTime;
-      }
-    }
-
-    return finalTime;
-  };
-
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const [isDropping, setIsDropping] = useState(false);
-  const [dropPosition, setDropPosition] = useState<number | null>(null);
-  const [wouldOverlap, setWouldOverlap] = useState(false);
-  const dragCounterRef = useRef(0);
-  const [mouseDownLocation, setMouseDownLocation] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-
-  const lastMouseXRef = useRef(0);
-
-  // Set up mouse event listeners for drag
-  useEffect(() => {
-    if (!dragState.isDragging) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!timelineRef.current) return;
-      lastMouseXRef.current = e.clientX;
-
-      // On first mouse move during drag, ensure the element is selected
-      if (dragState.elementId && dragState.trackId) {
-        const isSelected = selectedElements.some(
-          (c) =>
-            c.trackId === dragState.trackId &&
-            c.elementId === dragState.elementId
-        );
-
-        if (!isSelected) {
-          // Select this element (replacing other selections) since we're dragging it
-          selectElement(dragState.trackId, dragState.elementId, false);
-        }
-      }
-
-      const timelineRect = timelineRef.current.getBoundingClientRect();
-      const mouseX = e.clientX - timelineRect.left;
-      const mouseTime = Math.max(
-        0,
-        mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-      );
-      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
-
-      // Always apply frame snapping first
-      const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
-      let finalTime = snapTimeToFrame(adjustedTime, projectFps);
-      let snapPoint = null;
-
-      // Additionally apply element snapping if enabled
-      if (snappingEnabled) {
-        // Find the element being dragged to get its duration
-        let elementDuration = 5; // fallback duration
-        if (dragState.elementId && dragState.trackId) {
-          const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-          const element = sourceTrack?.elements.find(
-            (e) => e.id === dragState.elementId
-          );
-          if (element) {
-            elementDuration =
-              element.duration - element.trimStart - element.trimEnd;
-          }
-        }
-
-        // Try snapping both start and end edges
-        const startSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          true // snap to start edge
-        );
-
-        const endSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          false // snap to end edge
-        );
-
-        // Choose the snap result with the smaller distance (closer snap)
-        let bestSnapResult = startSnapResult;
-        if (
-          endSnapResult.snapPoint &&
-          (!startSnapResult.snapPoint ||
-            endSnapResult.snapDistance < startSnapResult.snapDistance)
-        ) {
-          bestSnapResult = endSnapResult;
-        }
-
-        // Only use element snapping if it found a snap point, otherwise keep frame-snapped time
-        if (bestSnapResult.snapPoint) {
-          finalTime = bestSnapResult.snappedTime;
-          snapPoint = bestSnapResult.snapPoint;
-        }
-
-        // Notify parent component about snap point change
-        onSnapPointChange?.(snapPoint);
-      } else {
-        // Clear snap point when element snapping is disabled
-        onSnapPointChange?.(null);
-      }
-
-      updateDragTime(finalTime);
-    };
-
-    const handleMouseUp = (e: MouseEvent) => {
-      if (!dragState.elementId || !dragState.trackId) return;
-
-      // If this track initiated the drag, we should handle the mouse up regardless of where it occurs
-      const isTrackThatStartedDrag = dragState.trackId === track.id;
-
-      const timelineRect = timelineRef.current?.getBoundingClientRect();
-      if (!timelineRect) {
-        if (isTrackThatStartedDrag) {
-          if (rippleEditingEnabled) {
-            updateElementStartTimeWithRipple(
-              track.id,
-              dragState.elementId,
-              dragState.currentTime
-            );
-          } else {
-            updateElementStartTime(
-              track.id,
-              dragState.elementId,
-              dragState.currentTime
-            );
-          }
-          endDragAction();
-          // Clear snap point when drag ends
-          onSnapPointChange?.(null);
-        }
-        return;
-      }
-
-      const isMouseOverThisTrack =
-        e.clientY >= timelineRect.top && e.clientY <= timelineRect.bottom;
-
-      if (!isMouseOverThisTrack && !isTrackThatStartedDrag) return;
-
-      const finalTime = dragState.currentTime;
-
-      if (isMouseOverThisTrack) {
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const targetTrack = tracks.find((t) => t.id === track.id);
-          const hasOverlap = targetTrack?.elements.some((existingElement) => {
-            if (
-              dragState.trackId === track.id &&
-              existingElement.id === dragState.elementId
-            ) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            if (dragState.trackId === track.id) {
-              if (rippleEditingEnabled) {
-                updateElementStartTimeWithRipple(
-                  track.id,
-                  dragState.elementId,
-                  finalTime
-                );
-              } else {
-                updateElementStartTime(
-                  track.id,
-                  dragState.elementId,
-                  finalTime
-                );
-              }
-            } else {
-              moveElementToTrack(
-                dragState.trackId,
-                track.id,
-                dragState.elementId
-              );
-              requestAnimationFrame(() => {
-                if (rippleEditingEnabled) {
-                  updateElementStartTimeWithRipple(
-                    track.id,
-                    dragState.elementId!,
-                    finalTime
-                  );
-                } else {
-                  updateElementStartTime(
-                    track.id,
-                    dragState.elementId!,
-                    finalTime
-                  );
-                }
-              });
-            }
-          }
-        }
-      } else if (isTrackThatStartedDrag) {
-        // Mouse is not over this track, but this track started the drag
-        // This means user released over ruler/outside - update position within same track
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const hasOverlap = track.elements.some((existingElement) => {
-            if (existingElement.id === dragState.elementId) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            if (rippleEditingEnabled) {
-              updateElementStartTimeWithRipple(
-                track.id,
-                dragState.elementId,
-                finalTime
-              );
-            } else {
-              updateElementStartTime(track.id, dragState.elementId, finalTime);
-            }
-          }
-        }
-      }
-
-      if (isTrackThatStartedDrag) {
-        endDragAction();
-        // Clear snap point when drag ends
-        onSnapPointChange?.(null);
-      }
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [
-    dragState.isDragging,
-    dragState.clickOffsetTime,
-    dragState.elementId,
-    dragState.trackId,
-    dragState.currentTime,
-    zoomLevel,
-    tracks,
-    track.id,
-    updateDragTime,
-    updateElementStartTime,
-    moveElementToTrack,
-    endDragAction,
-    selectedElements,
-    selectElement,
-    onSnapPointChange,
-  ]);
-
-  useEdgeAutoScroll({
-    isActive: dragState.isDragging,
-    getMouseClientX: () => lastMouseXRef.current,
-    rulerScrollRef,
-    tracksScrollRef,
-    contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
-  });
-
-  const handleElementMouseDown = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    setMouseDownLocation({ x: e.clientX, y: e.clientY });
-
-    // Detect right-click (button 2) and handle selection without starting drag
-    const isRightClick = e.button === 2;
-    const isMultiSelect = e.metaKey || e.ctrlKey || e.shiftKey;
-
-    if (isRightClick) {
-      // Handle right-click selection
-      const isSelected = selectedElements.some(
-        (c) => c.trackId === track.id && c.elementId === element.id
-      );
-
-      // If element is not selected, select it (keep other selections if multi-select)
-      if (!isSelected) {
-        selectElement(track.id, element.id, isMultiSelect);
-      }
-      // If element is already selected, keep it selected
-
-      // Don't start drag action for right-clicks
-      return;
-    }
-
-    // Handle multi-selection for left-click with modifiers
-    if (isMultiSelect) {
-      selectElement(track.id, element.id, true);
-    }
-
-    // Calculate the offset from the left edge of the element to where the user clicked
-    const elementElement = e.currentTarget as HTMLElement;
-    const elementRect = elementElement.getBoundingClientRect();
-    const clickOffsetX = e.clientX - elementRect.left;
-    const clickOffsetTime =
-      clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-
-    startDragAction(
-      element.id,
-      track.id,
-      e.clientX,
-      element.startTime,
-      clickOffsetTime
-    );
-  };
-
-  const handleElementClick = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    e.stopPropagation();
-
-    // Check if mouse moved significantly
-    if (mouseDownLocation) {
-      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
-      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
-      // If it moved more than a few pixels, consider it a drag and not a click.
-      if (deltaX > 5 || deltaY > 5) {
-        setMouseDownLocation(null); // Reset for next interaction
-        return;
-      }
-    }
-
-    // Skip selection logic for multi-selection (handled in mousedown)
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      return;
-    }
-
-    // Handle single selection
-    const isSelected = selectedElements.some(
-      (c) => c.trackId === track.id && c.elementId === element.id
-    );
-
-    if (!isSelected) {
-      // If element is not selected, select it (replacing other selections)
-      selectElement(track.id, element.id, false);
-    }
-    // If element is already selected, keep it selected (do nothing)
-  };
-
-  const handleTrackDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Handle both timeline elements and media items
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    // Calculate drop position for overlap checking
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    let dropTime = 0;
-    if (trackContainer) {
-      const rect = trackContainer.getBoundingClientRect();
-      const mouseX = Math.max(0, e.clientX - rect.left);
-      dropTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    }
-
-    // Check for potential overlaps and show appropriate feedback
-    let wouldOverlap = false;
-
-    if (hasMediaItem) {
-      try {
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (mediaItemData) {
-          const dragData: DragData = JSON.parse(mediaItemData);
-
-          if (dragData.type === "text") {
-            // Text elements have default duration of 5 seconds
-            const newElementDuration = 5;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              newElementDuration
-            );
-            const newElementEnd = snappedTime + newElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return snappedTime < existingEnd && newElementEnd > existingStart;
-            });
-          } else {
-            // Media elements
-            const mediaItem = mediaFiles.find(
-              (item) => item.id === dragData.id
-            );
-            if (mediaItem) {
-              const newElementDuration = mediaItem.duration || 5;
-              const snappedTime = getDropSnappedTime(
-                dropTime,
-                newElementDuration
-              );
-              const newElementEnd = snappedTime + newElementDuration;
-
-              wouldOverlap = track.elements.some((existingElement) => {
-                const existingStart = existingElement.startTime;
-                const existingEnd =
-                  existingElement.startTime +
-                  (existingElement.duration -
-                    existingElement.trimStart -
-                    existingElement.trimEnd);
-                return (
-                  snappedTime < existingEnd && newElementEnd > existingStart
-                );
-              });
-            }
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    } else if (hasTimelineElement) {
-      try {
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (timelineElementData) {
-          const { elementId, trackId: fromTrackId } =
-            JSON.parse(timelineElementData);
-          const sourceTrack = tracks.find(
-            (t: TimelineTrack) => t.id === fromTrackId
-          );
-          const movingElement = sourceTrack?.elements.find(
-            (c: any) => c.id === elementId
-          );
-
-          if (movingElement) {
-            const movingElementDuration =
-              movingElement.duration -
-              movingElement.trimStart -
-              movingElement.trimEnd;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              movingElementDuration,
-              elementId
-            );
-            const movingElementEnd = snappedTime + movingElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              if (fromTrackId === track.id && existingElement.id === elementId)
-                return false;
-
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return (
-                snappedTime < existingEnd && movingElementEnd > existingStart
-              );
-            });
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    }
-
-    if (wouldOverlap) {
-      e.dataTransfer.dropEffect = "none";
-      setWouldOverlap(true);
-      // Use default duration for position indicator
-      setDropPosition(getDropSnappedTime(dropTime, 5));
-      return;
-    }
-
-    e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";
-    setWouldOverlap(false);
-    // Use default duration for position indicator
-    setDropPosition(getDropSnappedTime(dropTime, 5));
-  };
-
-  const handleTrackDragEnter = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current++;
-    setIsDropping(true);
-  };
-
-  const handleTrackDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current--;
-
-    if (dragCounterRef.current === 0) {
-      setIsDropping(false);
-      setWouldOverlap(false);
-      setDropPosition(null);
-    }
-  };
-
-  const handleTrackDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Debug logging
-    console.log(
-      JSON.stringify({
-        message: "Drop event started in timeline track",
-        dataTransferTypes: Array.from(e.dataTransfer.types),
-        trackId: track.id,
-        trackType: track.type,
-      })
-    );
-
-    // Reset all drag states
-    dragCounterRef.current = 0;
-    setIsDropping(false);
-    setWouldOverlap(false);
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-    const hasFiles = e.dataTransfer.files?.length > 0;
-
-    if (!hasTimelineElement && !hasMediaItem && !hasFiles) return;
-
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    if (!trackContainer) return;
-
-    const rect = trackContainer.getBoundingClientRect();
-    const mouseX = Math.max(0, e.clientX - rect.left);
-    const mouseY = e.clientY - rect.top; // Get Y position relative to this track
-    const newStartTime =
-      mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
-    const snappedTime = snapTimeToFrame(newStartTime, projectFps);
-
-    // Calculate drop position relative to tracks
-    const currentTrackIndex = tracks.findIndex((t) => t.id === track.id);
-
-    // Determine drop zone within the track (top 20px, middle 20px, bottom 20px)
-    let dropPosition: "above" | "on" | "below";
-    if (mouseY < 20) {
-      dropPosition = "above";
-    } else if (mouseY > 40) {
-      dropPosition = "below";
-    } else {
-      dropPosition = "on";
-    }
-
-    try {
-      if (hasTimelineElement) {
-        // Handle timeline element movement
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (!timelineElementData) return;
-
-        const {
-          elementId,
-          trackId: fromTrackId,
-          clickOffsetTime = 0,
-        } = JSON.parse(timelineElementData);
-
-        // Find the element being moved
-        const sourceTrack = tracks.find(
-          (t: TimelineTrack) => t.id === fromTrackId
-        );
-        const movingElement = sourceTrack?.elements.find(
-          (c: TimelineElementType) => c.id === elementId
-        );
-
-        if (!movingElement) {
-          toast.error("Element not found");
-          return;
-        }
-
-        // Check for overlaps with existing elements (excluding the moving element itself)
-        const movingElementDuration =
-          movingElement.duration -
-          movingElement.trimStart -
-          movingElement.trimEnd;
-
-        // Adjust position based on where user clicked on the element
-        const adjustedStartTime = newStartTime - clickOffsetTime;
-        const snappedStartTime = getDropSnappedTime(
-          adjustedStartTime,
-          movingElementDuration,
-          elementId
-        );
-        const finalStartTime = Math.max(0, snappedStartTime);
-        const movingElementEnd = finalStartTime + movingElementDuration;
-
-        const hasOverlap = track.elements.some((existingElement) => {
-          // Skip the element being moved if it's on the same track
-          if (fromTrackId === track.id && existingElement.id === elementId)
-            return false;
-
-          const existingStart = existingElement.startTime;
-          const existingEnd =
-            existingElement.startTime +
-            (existingElement.duration -
-              existingElement.trimStart -
-              existingElement.trimEnd);
-
-          // Check if elements overlap
-          return (
-            finalStartTime < existingEnd && movingElementEnd > existingStart
-          );
-        });
-
-        if (hasOverlap) {
-          toast.error(
-            "Cannot move element here - it would overlap with existing elements"
-          );
-          return;
-        }
-
-        if (fromTrackId === track.id) {
-          // Moving within same track
-          if (rippleEditingEnabled) {
-            updateElementStartTimeWithRipple(
-              track.id,
-              elementId,
-              finalStartTime
-            );
-          } else {
-            updateElementStartTime(track.id, elementId, finalStartTime);
-          }
-        } else {
-          // Moving to different track
-          moveElementToTrack(fromTrackId, track.id, elementId);
-          requestAnimationFrame(() => {
-            if (rippleEditingEnabled) {
-              updateElementStartTimeWithRipple(
-                track.id,
-                elementId,
-                finalStartTime
-              );
-            } else {
-              updateElementStartTime(track.id, elementId, finalStartTime);
-            }
-          });
-        }
-      } else if (hasMediaItem) {
-        // Handle media item drop
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (!mediaItemData) return;
-
-        const dragData: DragData = JSON.parse(mediaItemData);
-
-        if (dragData.type === "text") {
-          let targetTrackId = track.id;
-          let targetTrack = track;
-
-          // Handle position-aware track creation for text
-          if (track.type !== "text" || dropPosition !== "on") {
-            // Text tracks should go above the main track
-            const mainTrack = getMainTrack(tracks);
-            let insertIndex: number;
-
-            if (dropPosition === "above") {
-              insertIndex = currentTrackIndex;
-            } else if (dropPosition === "below") {
-              insertIndex = currentTrackIndex + 1;
-            } else {
-              // dropPosition === "on" but track is not text type
-              // Insert above main track if main track exists, otherwise at top
-              if (mainTrack) {
-                const mainTrackIndex = tracks.findIndex(
-                  (t) => t.id === mainTrack.id
-                );
-                insertIndex = mainTrackIndex;
-              } else {
-                insertIndex = 0; // Top of timeline
-              }
-            }
-
-            targetTrackId = insertTrackAt("text", insertIndex);
-            // Get the updated tracks array after creating the new track
-            const updatedTracks = useTimelineStore.getState().tracks;
-            const newTargetTrack = updatedTracks.find(
-              (t) => t.id === targetTrackId
-            );
-            if (!newTargetTrack) return;
-            targetTrack = newTargetTrack;
-          }
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = 5; // Default text duration
-          const textSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = textSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              textSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            ...DEFAULT_TEXT_ELEMENT,
-            name: dragData.name || DEFAULT_TEXT_ELEMENT.name,
-            content: dragData.content || DEFAULT_TEXT_ELEMENT.content,
-            startTime: textSnappedTime,
-          });
-        } else {
-          // Handle media items
-          const mediaItem = mediaFiles.find((item) => item.id === dragData.id);
-
-          if (!mediaItem) {
-            toast.error("Media item not found");
-            return;
-          }
-
-          let targetTrackId = track.id;
-
-          // Check if track type is compatible
-          const isVideoOrImage =
-            dragData.type === "video" || dragData.type === "image";
-          const isAudio = dragData.type === "audio";
-          const isCompatible = isVideoOrImage
-            ? canElementGoOnTrack("media", track.type)
-            : isAudio
-              ? canElementGoOnTrack("media", track.type)
-              : false;
-
-          let targetTrack = tracks.find((t) => t.id === targetTrackId);
-
-          // Handle position-aware track creation for media elements
-          if (!isCompatible || dropPosition !== "on") {
-            if (isVideoOrImage) {
-              // For video/image, check if we need a main track or additional media track
-              const mainTrack = getMainTrack(tracks);
-
-              if (!mainTrack) {
-                // No main track exists, create it
-                targetTrackId = addTrack("media");
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              } else if (
-                mainTrack.elements.length === 0 &&
-                dropPosition === "on"
-              ) {
-                // Main track exists and is empty, use it
-                targetTrackId = mainTrack.id;
-                targetTrack = mainTrack;
-              } else {
-                // Create new media track
-                let insertIndex: number;
-
-                if (dropPosition === "above") {
-                  insertIndex = currentTrackIndex;
-                } else if (dropPosition === "below") {
-                  insertIndex = currentTrackIndex + 1;
-                } else {
-                  // Insert above main track
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex;
-                }
-
-                targetTrackId = insertTrackAt("media", insertIndex);
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              }
-            } else if (isAudio) {
-              // Audio tracks go at the bottom
-              const mainTrack = getMainTrack(tracks);
-              let insertIndex: number;
-
-              if (dropPosition === "above") {
-                insertIndex = currentTrackIndex;
-              } else if (dropPosition === "below") {
-                insertIndex = currentTrackIndex + 1;
-              } else {
-                // Insert after main track (bottom area)
-                if (mainTrack) {
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex + 1;
-                } else {
-                  insertIndex = tracks.length; // Bottom of timeline
-                }
-              }
-
-              targetTrackId = insertTrackAt("audio", insertIndex);
-              const updatedTracks = useTimelineStore.getState().tracks;
-              const newTargetTrack = updatedTracks.find(
-                (t) => t.id === targetTrackId
-              );
-              if (!newTargetTrack) return;
-              targetTrack = newTargetTrack;
-            }
-          }
-
-          if (!targetTrack) return;
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = mediaItem.duration || 5;
-          const mediaSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = mediaSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              mediaSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            type: "media",
-            mediaId: mediaItem.id,
-            name: mediaItem.name,
-            duration: mediaItem.duration || 5,
-            startTime: mediaSnappedTime,
-            trimStart: 0,
-            trimEnd: 0,
-          });
-        }
-      } else if (hasFiles) {
-        // External file drops
-        const { activeProject } = useProjectStore.getState();
-        const { addMediaFile } = useMediaStore.getState();
-        const { addElementToTrack } = useTimelineStore.getState();
-
-        if (!activeProject) {
-          toast.error("No active project");
-          return;
-        }
-
-        // Process and add files to new timeline tracks at playhead position
-        processMediaFiles(e.dataTransfer.files)
-          .then(async (processedItems) => {
-            for (const processedItem of processedItems) {
-              await addMediaFile(activeProject.id, processedItem);
-              const currentMediaFiles = mediaFiles;
-              const addedItem = currentMediaFiles.find(
-                (item) =>
-                  item.name === processedItem.name &&
-                  item.url === processedItem.url
-              );
-
-              if (addedItem) {
-                const trackType: TrackType =
-                  addedItem.type === "audio" ? "audio" : "media";
-                const targetTrackId = insertTrackAt(trackType, 0);
-
-                addElementToTrack(targetTrackId, {
-                  type: "media",
-                  mediaId: addedItem.id,
-                  name: addedItem.name,
-                  duration: addedItem.duration || 5,
-                  startTime: currentTime,
-                  trimStart: 0,
-                  trimEnd: 0,
-                });
-              }
-            }
-          })
-          .catch((error) => {
-            console.error("Error processing external files:", error);
-            toast.error("Failed to process dropped files");
-          });
-      }
-    } catch (error) {
-      console.error("Error handling drop:", error);
-      toast.error("Failed to add media to track");
-    }
-  };
+interface TimelineTrackContentProps {
+	track: TimelineTrack;
+	zoomLevel: number;
+	dragState: ElementDragState;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	lastMouseXRef: React.RefObject<number>;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	onResizeStateChange?: (params: { isResizing: boolean }) => void;
+	onElementMouseDown: (params: {
+		event: React.MouseEvent;
+		element: TimelineElementType;
+		track: TimelineTrack;
+	}) => void;
+	onElementClick: (params: {
+		event: React.MouseEvent;
+		element: TimelineElementType;
+		track: TimelineTrack;
+	}) => void;
+	onTrackMouseDown?: (event: React.MouseEvent) => void;
+	shouldIgnoreClick?: () => boolean;
+}
 
-  return (
-    <div
-      className="w-full h-full hover:bg-muted/20"
-      onClick={(e) => {
-        // If clicking empty area (not on an element), deselect all elements
-        if (!(e.target as HTMLElement).closest(".timeline-element")) {
-          clearSelectedElements();
-        }
-      }}
-      onDragOver={handleTrackDragOver}
-      onDragEnter={handleTrackDragEnter}
-      onDragLeave={handleTrackDragLeave}
-      onDrop={handleTrackDrop}
-    >
-      <div
-        ref={timelineRef}
-        className="h-full relative track-elements-container min-w-full"
-      >
-        {track.elements.length === 0 ? (
-          <div
-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
-              isDropping
-                ? wouldOverlap
-                  ? "border-red-500 bg-red-500/10 text-red-600"
-                  : "border-blue-500 bg-blue-500/10 text-blue-600"
-                : "border-muted/30"
-            }`}
-          >
-            {isDropping
-              ? wouldOverlap
-                ? "Cannot drop - would overlap"
-                : "Drop element here"
-              : ""}
-          </div>
-        ) : (
-          <>
-            {track.elements.map((element) => {
-              const isSelected = selectedElements.some(
-                (c) => c.trackId === track.id && c.elementId === element.id
-              );
+export function TimelineTrackContent({
+	track,
+	zoomLevel,
+	dragState,
+	rulerScrollRef,
+	tracksScrollRef,
+	lastMouseXRef,
+	onSnapPointChange,
+	onResizeStateChange,
+	onElementMouseDown,
+	onElementClick,
+	onTrackMouseDown,
+	shouldIgnoreClick,
+}: TimelineTrackContentProps) {
+	const editor = useEditor();
+	const { isElementSelected, clearElementSelection } = useElementSelection();
 
-              const handleElementSplit = () => {
-                const { currentTime } = usePlaybackStore();
-                const { splitSelected } = useTimelineStore();
-                const splitTime = currentTime;
-                const effectiveStart = element.startTime;
-                const effectiveEnd =
-                  element.startTime +
-                  (element.duration - element.trimStart - element.trimEnd);
+	const duration = editor.timeline.getTotalDuration();
 
-                if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-                  splitSelected(splitTime, track.id, element.id);
-                } else {
-                  toast.error("Playhead must be within element to split");
-                }
-              };
+	useEdgeAutoScroll({
+		isActive: dragState.isDragging,
+		getMouseClientX: () => lastMouseXRef.current ?? 0,
+		rulerScrollRef,
+		tracksScrollRef,
+		contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
+	});
 
-              const handleElementDuplicate = () => {
-                const { addElementToTrack } = useTimelineStore.getState();
-                const { id, ...elementWithoutId } = element;
-                addElementToTrack(track.id, {
-                  ...elementWithoutId,
-                  name: element.name + " (copy)",
-                  startTime:
-                    element.startTime +
-                    (element.duration - element.trimStart - element.trimEnd) +
-                    0.1,
-                });
-              };
+	const hasSelectedElements = track.elements.some((element) =>
+		isElementSelected({ trackId: track.id, elementId: element.id }),
+	);
 
-              const handleElementDelete = () => {
-                const { deleteSelected } = useTimelineStore.getState();
-                deleteSelected(track.id, element.id);
-              };
+	return (
+		<button
+			className={cn("size-full", hasSelectedElements && "bg-panel-accent/35")}
+			onClick={() => {
+				if (shouldIgnoreClick?.()) return;
+				clearElementSelection();
+			}}
+			onMouseDown={(event) => {
+				onTrackMouseDown?.(event);
+			}}
+			type="button"
+		>
+			<div className="relative h-full min-w-full">
+				{track.elements.length === 0 ? (
+					<div className="text-muted-foreground border-muted/30 flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
+				) : (
+					track.elements.map((element) => {
+						const isSelected = isElementSelected({
+							trackId: track.id,
+							elementId: element.id,
+						});
 
-              return (
-                <TimelineElement
-                  key={element.id}
-                  element={element}
-                  track={track}
-                  zoomLevel={zoomLevel}
-                  isSelected={isSelected}
-                  onElementMouseDown={handleElementMouseDown}
-                  onElementClick={handleElementClick}
-                />
-              );
-            })}
-          </>
-        )}
-      </div>
-    </div>
-  );
+						return (
+							<TimelineElement
+								key={element.id}
+								element={element}
+								track={track}
+								zoomLevel={zoomLevel}
+								isSelected={isSelected}
+								onSnapPointChange={onSnapPointChange}
+								onResizeStateChange={onResizeStateChange}
+								onElementMouseDown={(event, element) =>
+									onElementMouseDown({ event, element, track })
+								}
+								onElementClick={(event, element) =>
+									onElementClick({ event, element, track })
+								}
+								dragState={dragState}
+							/>
+						);
+					})
+				)}
+			</div>
+		</button>
+	);
 }
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index 176452cd..7c78fc57 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -1,130 +1,122 @@
-"use client";
-
-import { motion } from "motion/react";
 import Link from "next/link";
 import { RiDiscordFill, RiTwitterXLine } from "react-icons/ri";
 import { FaGithub } from "react-icons/fa6";
 import Image from "next/image";
+import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
+import { capitalizeFirstLetter } from "@/utils/string";
 
-export function Footer() {
-  return (
-    <motion.footer
-      className="bg-background border-t"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ delay: 0.8, duration: 0.8 }}
-    >
-      <div className="max-w-5xl mx-auto px-8 py-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-8">
-          {/* Brand Section */}
-          <div className="md:col-span-1 max-w-sm">
-            <div className="flex justify-start items-center gap-2 mb-4">
-              <Image 
-                src="/logo.svg" 
-                alt="OpenCut" 
-                width={24} 
-                height={24}
-                className="invert dark:invert-0"
-              />
-              <span className="font-bold text-lg">OpenCut</span>
-            </div>
-            <p className="text-sm md:text-left text-muted-foreground mb-5">
-              The open source video editor that gets the job done. Simple,
-              powerful, and works on any platform.
-            </p>
-            <div className="flex justify-start gap-3">
-              <Link
-                href="https://github.com/OpenCut-app/OpenCut"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <FaGithub className="h-5 w-5" />
-              </Link>
-              <Link
-                href="https://x.com/OpenCutApp"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiTwitterXLine className="h-5 w-5" />
-              </Link>
-              <Link
-                href="https://discord.com/invite/Mu3acKZvCp"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiDiscordFill className="h-5 w-5" />
-              </Link>
-            </div>
-          </div>
+type Category = "resources" | "company";
+
+interface FooterLink {
+	label: string;
+	href: string;
+}
 
-          <div className="flex gap-12 justify-start items-start py-2">
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Resources</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link
-                    href="/roadmap"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Roadmap
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="/privacy"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Privacy policy
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="/terms"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Terms of use
-                  </Link>
-                </li>
-              </ul>
-            </div>
+type CategoryLinks = Record<Category, FooterLink[]>;
+
+const links: CategoryLinks = {
+	resources: [
+		{ label: "Roadmap", href: "/roadmap" },
+		{ label: "Blog", href: "/blog" },
+		{ label: "Privacy", href: "/privacy" },
+		{ label: "Terms of use", href: "/terms" },
+	],
+	company: [
+		{ label: "Contributors", href: "/contributors" },
+		{ label: "Sponsors", href: "/sponsors" },
+		{ label: "Branding", href: "/branding" },
+		{ label: "About", href: `${SOCIAL_LINKS.github}/blob/main/README.md` },
+	],
+};
+
+export function Footer() {
+	return (
+		<footer className="bg-background border-t">
+			<div className="mx-auto max-w-5xl px-8 py-10">
+				<div className="mb-8 grid grid-cols-1 gap-12 md:grid-cols-2">
+					{/* Brand Section */}
+					<div className="max-w-sm md:col-span-1">
+						<div className="mb-4 flex items-center justify-start gap-2">
+							<Image
+								src={DEFAULT_LOGO_URL}
+								alt="OpenCut"
+								width={24}
+								height={24}
+								className="invert dark:invert-0"
+							/>
+							<span className="text-lg font-bold">OpenCut</span>
+						</div>
+						<p className="text-muted-foreground mb-5 text-sm md:text-left">
+							The privacy-first video editor that feels simple to use.
+						</p>
+						<div className="flex justify-start gap-3">
+							<Link
+								href={SOCIAL_LINKS.github}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<FaGithub className="size-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.x}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiTwitterXLine className="size-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.discord}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiDiscordFill className="size-5" />
+							</Link>
+						</div>
+					</div>
 
-            {/* Company Links */}
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Company</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link
-                    href="/contributors"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    Contributors
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/blob/main/README.md"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    About
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+					<div className="flex items-start justify-start gap-12 py-2">
+						{(Object.keys(links) as Category[]).map((category) => (
+							<div key={category} className="flex flex-col gap-2">
+								<h3 className="text-foreground font-semibold">
+									{capitalizeFirstLetter({ string: category })}
+								</h3>
+								<ul className="space-y-2 text-sm">
+									{links[category].map((link) => (
+										<li key={link.href}>
+											<Link
+												href={link.href}
+												className="text-muted-foreground hover:text-foreground transition-colors"
+												target={
+													link.href.startsWith("http") ? "_blank" : undefined
+												}
+												rel={
+													link.href.startsWith("http")
+														? "noopener noreferrer"
+														: undefined
+												}
+											>
+												{link.label}
+											</Link>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+				</div>
 
-        {/* Bottom Section */}
-        <div className="pt-2 flex flex-col md:flex-row justify-between items-start gap-4">
-          <div className="flex items-center gap-4 text-sm text-muted-foreground">
-            <span>© 2025 OpenCut, All Rights Reserved</span>
-          </div>
-        </div>
-      </div>
-    </motion.footer>
-  );
+				{/* Bottom Section */}
+				<div className="flex flex-col items-start justify-between gap-4 pt-2 md:flex-row">
+					<div className="text-muted-foreground flex items-center gap-4 text-sm">
+						<span>
+							© {new Date().getFullYear()} OpenCut, All Rights Reserved
+						</span>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
 }
diff --git a/apps/web/src/components/gitHub-contribute-section.tsx b/apps/web/src/components/gitHub-contribute-section.tsx
new file mode 100644
index 00000000..f96def4a
--- /dev/null
+++ b/apps/web/src/components/gitHub-contribute-section.tsx
@@ -0,0 +1,47 @@
+import { Button } from "./ui/button";
+import Link from "next/link";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
+import {
+	GithubIcon,
+	Link04Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+
+export function GitHubContributeSection({
+	title,
+	description,
+}: {
+	title: string;
+	description: string;
+}) {
+	return (
+		<div className="flex flex-col gap-6">
+			<div className="flex flex-col gap-4 text-center">
+				<h3 className="text-2xl font-semibold">{title}</h3>
+				<p className="text-muted-foreground">{description}</p>
+			</div>
+			<div className="flex flex-col justify-center gap-4 sm:flex-row">
+				<Link
+					href={`${SOCIAL_LINKS.github}/blob/main/.github/CONTRIBUTING.md`}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button className="w-full" size="lg">
+						<HugeiconsIcon icon={GithubIcon} />
+						Start contributing
+					</Button>
+				</Link>
+				<Link
+					href={`${SOCIAL_LINKS.github}/issues`}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button variant="outline" className="w-full" size="lg">
+						<HugeiconsIcon icon={Link04Icon} />
+						Report issues
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/header-base.tsx b/apps/web/src/components/header-base.tsx
deleted file mode 100644
index 98f1c431..00000000
--- a/apps/web/src/components/header-base.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { ReactNode } from "react";
-
-interface HeaderBaseProps {
-  leftContent?: ReactNode;
-  centerContent?: ReactNode;
-  rightContent?: ReactNode;
-  className?: string;
-  children?: ReactNode;
-}
-
-export function HeaderBase({
-  leftContent,
-  centerContent,
-  rightContent,
-  className,
-  children,
-}: HeaderBaseProps) {
-  // If children is provided, render it directly without the grid layout
-  if (children) {
-    return (
-      <header className={cn("px-6 h-16 flex items-center", className)}>
-        {children}
-      </header>
-    );
-  }
-
-  return (
-    <header
-      className={cn("px-6 h-14 flex justify-between items-center", className)}
-    >
-      {leftContent && <div className="flex items-center">{leftContent}</div>}
-      {centerContent && (
-        <div className="flex items-center">{centerContent}</div>
-      )}
-      {rightContent && <div className="flex items-center">{rightContent}</div>}
-    </header>
-  );
-}
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index f8877330..95f08304 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -1,57 +1,147 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
+import { motion } from "motion/react";
 import { Button } from "./ui/button";
 import { ArrowRight } from "lucide-react";
-import { HeaderBase } from "./header-base";
 import Image from "next/image";
 import { ThemeToggle } from "./theme-toggle";
+import { GithubIcon, Menu02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "@/utils/ui";
+import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
 
 export function Header() {
-  const leftContent = (
-    <Link href="/" className="flex items-center gap-3">
-      <Image
-        src="/logo.svg"
-        alt="OpenCut Logo"
-        className="invert dark:invert-0"
-        width={32}
-        height={32}
-      />
-      <span className="text-xl font-medium hidden md:block">OpenCut</span>
-    </Link>
-  );
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const closeMenu = () => setIsMenuOpen(false);
 
-  const rightContent = (
-    <nav className="flex items-center gap-2">
-      <div className="flex items-center gap-4">
-        <Link href="/blog">
-          <Button variant="text" className="text-sm p-0">
-            Blog
-          </Button>
-        </Link>
-        <Link href="/contributors">
-          <Button variant="text" className="text-sm p-0">
-            Contributors
-          </Button>
-        </Link>
-      </div>
-      <Link href="/projects">
-        <Button size="sm" className="text-sm ml-2">
-          Projects
-          <ArrowRight className="h-4 w-4" />
-        </Button>
-      </Link>
-      <ThemeToggle className="mr-2" />
-    </nav>
-  );
+	const links = [
+		{
+			label: "Contributors",
+			href: "/contributors",
+		},
+		{
+			label: "Sponsors",
+			href: "/sponsors",
+		},
+		{
+			label: "Blog",
+			href: "/blog",
+		},
+	];
 
-  return (
-    <div className="sticky top-4 z-50 mx-4 md:mx-0">
-      <HeaderBase
-        className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[11px]"
-        leftContent={leftContent}
-        rightContent={rightContent}
-      />
-    </div>
-  );
+	return (
+		<header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]">
+			<div className="relative flex w-full items-center justify-between px-6 pt-4">
+				<div className="relative z-10 flex items-center gap-6">
+					<Link href="/" className="flex items-center gap-3">
+						<Image
+							src={DEFAULT_LOGO_URL}
+							alt="OpenCut Logo"
+							className="invert dark:invert-0"
+							width={32}
+							height={32}
+						/>
+					</Link>
+					<nav className="hidden items-center gap-4 md:flex">
+						{links.map((link) => (
+							<Link key={link.href} href={link.href}>
+								<Button variant="text" className="p-0 text-sm">
+									{link.label}
+								</Button>
+							</Link>
+						))}
+					</nav>
+				</div>
+
+				<div className="relative z-10">
+					<div className="flex items-center gap-3 md:hidden">
+						<Button
+							variant="text"
+							size="icon"
+							className="flex items-center justify-center p-0"
+							onClick={() => setIsMenuOpen(!isMenuOpen)}
+						>
+							<HugeiconsIcon icon={Menu02Icon} size={30} />
+						</Button>
+					</div>
+					<div className="hidden items-center gap-3 md:flex">
+						<Link href={SOCIAL_LINKS.github}>
+							<Button className="bg-background text-sm" variant="outline">
+								<HugeiconsIcon icon={GithubIcon} className="size-4" />
+								40k+
+							</Button>
+						</Link>
+						<Link href="/projects">
+							<Button variant="foreground" className="text-sm">
+								Projects
+								<ArrowRight className="size-4" />
+							</Button>
+						</Link>
+						<ThemeToggle />
+					</div>
+				</div>
+				<div
+					className={cn(
+						"bg-background/20 pointer-events-none fixed inset-0 opacity-0 backdrop-blur-3xl",
+						"transition-opacity duration-150",
+						isMenuOpen && "pointer-events-auto opacity-100",
+					)}
+				>
+					<div className="relative h-full">
+						<button
+							type="button"
+							aria-label="Close menu"
+							className="absolute inset-0"
+							onClick={closeMenu}
+							onKeyDown={(event) => {
+								if (
+									event.key === "Enter" ||
+									event.key === " " ||
+									event.key === "Escape"
+								) {
+									event.preventDefault();
+									closeMenu();
+								}
+							}}
+						/>
+						<nav className="flex flex-col gap-3 px-6 pt-[5rem]">
+							{links.map((link, index) => (
+								<motion.div
+									key={link.href}
+									initial={{ scale: 0.98, opacity: 0 }}
+									animate={{
+										scale: isMenuOpen ? 1 : 0.98,
+										opacity: isMenuOpen ? 1 : 0,
+									}}
+									transition={{
+										duration: 0.4,
+										delay: isMenuOpen ? index * 0.1 : 0,
+										ease: [0.25, 0.46, 0.45, 0.94],
+									}}
+								>
+									<Link
+										href={link.href}
+										className="text-2xl font-semibold"
+										onClick={() => setIsMenuOpen(false)}
+									>
+										{link.label}
+									</Link>
+								</motion.div>
+							))}
+						</nav>
+						<ThemeToggle
+							className="absolute right-8 bottom-8 size-10"
+							iconClassName="!size-[1.2rem]"
+							onToggle={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
 }
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
deleted file mode 100644
index b24687a6..00000000
--- a/apps/web/src/components/icons.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-export function GoogleIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24">
-      <path
-        fill="#4285F4"
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      />
-    </svg>
-  );
-}
-
-export function GithubIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      viewBox="0 -3.5 256 256"
-      preserveAspectRatio="xMinYMin meet"
-    >
-      <g fill="currentColor">
-        <path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0" />
-
-        <path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398" />
-      </g>
-    </svg>
-  );
-}
-
-export function VercelIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="20"
-      height="18"
-      viewBox="0 0 76 65"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
-    </svg>
-  );
-}
-
-export function BackgroundIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="353"
-      height="353"
-      viewBox="0 0 353 353"
-      fill="none"
-      className={className}
-    >
-      <g clipPath="url(#clip0_1_3)">
-        <rect
-          x="-241.816"
-          y="233.387"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -241.816 233.387)"
-          fill="white"
-        />
-        <rect
-          x="-189.907"
-          y="306.804"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -189.907 306.804)"
-          fill="white"
-        />
-        <rect
-          x="-146.928"
-          y="389.501"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -146.928 389.501)"
-          fill="white"
-        />
-        <rect
-          x="-103.144"
-          y="477.904"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -103.144 477.904)"
-          fill="white"
-        />
-        <rect
-          x="-57.169"
-          y="570.714"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -57.169 570.714)"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1_3">
-          <rect width="353" height="353" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
-
-export function MarbleIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      fill="none"
-      viewBox="0 0 256 256"
-    >
-      <path fill="#202027" d="M0 0h256v256H0z" />
-      <path
-        fill="#fff"
-        d="M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256"
-      />
-    </svg>
-  );
-}
-
-export function DataBuddyIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      viewBox="0 0 8 8"
-      shapeRendering="crispEdges"
-    >
-      <path d="M0 0h8v8H0z" />
-      <path
-        fill="#fff"
-        d="M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z"
-      />
-    </svg>
-  );
-}
-
-export function SocialsIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 345 243"
-      fill="none"
-      className={className}
-    >
-      <g opacity="0.5">
-        <path d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z" fill="#FFFC00"/>
-        <path d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z" fill="white"/>
-        <path d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z" stroke="black" strokeWidth="7"/>
-        <path d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z" stroke="black" strokeWidth="7"/>
-      </g>
-      <path fillRule="evenodd" clipRule="evenodd" d="M133.5 4H321.5C334.48 4 345 14.5205 345 27.5V215.5C345 228.48 334.48 239 321.5 239H133.5C120.52 239 110 228.48 110 215.5V27.5C110 14.5205 120.52 4 133.5 4Z" fill="#010101"/>
-      <path fillRule="evenodd" clipRule="evenodd" d="M261.497 99.4086C271.784 106.758 284.388 111.083 297.999 111.083V84.9035C295.423 84.9045 292.854 84.6357 290.333 84.1016V104.709C276.723 104.709 264.121 100.384 253.831 93.0345V146.459C253.831 173.185 232.155 194.85 205.417 194.85C195.44 194.85 186.167 191.835 178.464 186.665C187.256 195.65 199.516 201.224 213.08 201.224C239.821 201.224 261.498 179.56 261.498 152.833L261.497 99.4086ZM270.953 72.9965C265.696 67.2559 262.244 59.8365 261.497 51.634V48.267H254.233C256.061 58.6916 262.298 67.5981 270.953 72.9965ZM195.376 166.157C192.438 162.308 190.851 157.598 190.858 152.756C190.858 140.533 200.773 130.622 213.005 130.622C215.285 130.621 217.551 130.97 219.723 131.659V104.894C217.185 104.547 214.622 104.399 212.061 104.454V125.286C209.887 124.597 207.62 124.247 205.34 124.249C193.107 124.249 183.193 134.159 183.193 146.384C183.193 155.027 188.149 162.512 195.376 166.157Z" fill="#EE1D52"/>
-      <path fillRule="evenodd" clipRule="evenodd" d="M253.831 93.0345C264.121 100.384 276.723 104.709 290.333 104.709V84.1016C282.736 82.4848 276.011 78.5162 270.953 72.9965C262.298 67.5981 256.061 58.6916 254.233 48.267H235.152V152.832C235.108 165.022 225.21 174.892 213.004 174.892C205.811 174.892 199.422 171.465 195.376 166.157C188.149 162.512 183.193 155.027 183.193 146.384C183.193 134.159 193.107 124.249 205.34 124.249C207.683 124.249 209.942 124.614 212.061 125.286V104.454C185.792 104.996 164.665 126.449 164.665 152.833C164.665 166.003 169.926 177.942 178.464 186.665C186.167 191.835 195.44 194.85 205.417 194.85C232.155 194.85 253.831 173.185 253.831 146.459V93.0345Z" fill="white"/>
-      <path fillRule="evenodd" clipRule="evenodd" d="M290.333 84.1016V78.5293C283.482 78.5396 276.766 76.6229 270.953 72.9965C276.099 78.6269 282.874 82.5087 290.333 84.1016ZM254.233 48.267C254.058 47.2708 253.924 46.2679 253.831 45.2608V41.8938H227.485V146.459C227.443 158.648 217.545 168.518 205.339 168.518C201.754 168.518 198.372 167.669 195.376 166.157C199.422 171.465 205.811 174.892 213.004 174.892C225.21 174.892 235.108 165.022 235.152 152.832V48.267H254.233ZM212.061 104.454L212.061 98.5212C209.859 98.2202 207.64 98.0698 205.418 98.071C178.676 98.071 157 119.736 157 146.459C157 163.214 165.518 177.979 178.464 186.665C169.926 177.942 164.666 166.002 164.666 152.832C164.666 126.449 185.791 104.996 212.061 104.454Z" fill="#69C9D0"/>
-    </svg>
-  );
-}
-
-export function TransitionUpIcon({
-  className = "",
-  size = 16,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 12.6667C2.5 13.4951 3.17157 14.1667 4 14.1667H12C12.8284 14.1667 13.5 13.4951 13.5 12.6667V11.3333C13.5 10.5049 12.8284 9.83333 12 9.83333H4C3.17157 9.83333 2.5 10.5049 2.5 11.3333V12.6667ZM4 15.1667C2.61929 15.1667 1.5 14.0474 1.5 12.6667V11.3333C1.5 9.95262 2.61929 8.83333 4 8.83333H12C13.3807 8.83333 14.5 9.95262 14.5 11.3333V12.6667C14.5 14.0474 13.3807 15.1667 12 15.1667H4Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2 5.83333C1.72386 5.83333 1.5 5.60947 1.5 5.33333L1.5 4C1.5 2.2511 2.91777 0.833332 4.66667 0.833332L11.3333 0.833332C13.0822 0.833332 14.5 2.2511 14.5 4V5.33333C14.5 5.60947 14.2761 5.83333 14 5.83333C13.7239 5.83333 13.5 5.60947 13.5 5.33333V4C13.5 2.80338 12.53 1.83333 11.3333 1.83333L4.66667 1.83333C3.47005 1.83333 2.5 2.80338 2.5 4V5.33333C2.5 5.60947 2.27614 5.83333 2 5.83333Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.35355 3.64645C8.15829 3.45118 7.84171 3.45118 7.64645 3.64645L5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355C5.84171 6.54882 6.15829 6.54882 6.35355 6.35355L7.5 5.20711L7.5 9.33333C7.5 9.60948 7.72386 9.83333 8 9.83333C8.27614 9.83333 8.5 9.60948 8.5 9.33333V5.20711L9.64645 6.35355C9.84171 6.54882 10.1583 6.54882 10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L8.35355 3.64645Z"
-        fill="white"
-      />
-    </svg>
-  );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
deleted file mode 100644
index 689c3ee3..00000000
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-"use client";
-
-import { Keyboard } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import {
-  type KeyboardShortcut,
-  useKeyboardShortcutsHelp,
-} from "@/hooks/use-keyboard-shortcuts-help";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
-import { Button } from "./ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "./ui/dialog";
-
-export function KeyboardShortcutsHelp() {
-  const [open, setOpen] = useState(false);
-  const [recordingShortcut, setRecordingShortcut] =
-    useState<KeyboardShortcut | null>(null);
-
-  const {
-    updateKeybinding,
-    removeKeybinding,
-    getKeybindingString,
-    validateKeybinding,
-    getKeybindingsForAction,
-    setIsRecording,
-    resetToDefaults,
-    isRecording,
-  } = useKeybindingsStore();
-
-  // Get shortcuts from centralized hook
-  const { shortcuts } = useKeyboardShortcutsHelp();
-
-  const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
-
-  useEffect(() => {
-    if (!isRecording || !recordingShortcut) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const keyString = getKeybindingString(e);
-      if (keyString) {
-        // Auto-save the new keybinding
-        const conflict = validateKeybinding(
-          keyString,
-          recordingShortcut.action
-        );
-        if (conflict) {
-          toast.error(
-            `Key "${keyString}" is already bound to "${conflict.existingAction}"`
-          );
-          setRecordingShortcut(null);
-          return;
-        }
-
-        // Remove old keybindings for this action
-        const oldKeys = getKeybindingsForAction(recordingShortcut.action);
-        oldKeys.forEach((key) => removeKeybinding(key));
-
-        // Add new keybinding
-        updateKeybinding(keyString, recordingShortcut.action);
-
-        setIsRecording(false);
-        setRecordingShortcut(null);
-      }
-    };
-
-    const handleClickOutside = () => {
-      setRecordingShortcut(null);
-      setIsRecording(false);
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("click", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [
-    recordingShortcut,
-    getKeybindingString,
-    updateKeybinding,
-    removeKeybinding,
-    validateKeybinding,
-    getKeybindingsForAction,
-    setIsRecording,
-    isRecording,
-  ]);
-
-  const handleStartRecording = (shortcut: KeyboardShortcut) => {
-    setRecordingShortcut(shortcut);
-    setIsRecording(true);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="text" size="sm" className="gap-2">
-          <Keyboard className="w-4 h-4" />
-          Shortcuts
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0">
-        <DialogHeader className="flex-shrink-0 p-6 pb-0">
-          <DialogTitle className="flex items-center gap-2">
-            <Keyboard className="w-5 h-5" />
-            Keyboard Shortcuts
-          </DialogTitle>
-          <DialogDescription>
-            Speed up your video editing workflow with these keyboard shortcuts.
-            Click any shortcut key to edit it.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="overflow-y-auto flex-grow scrollbar-thin">
-          <div className="space-y-6 p-6 pt-2">
-            {categories.map((category) => (
-              <div key={category} className="flex flex-col gap-1">
-                <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
-                  {category}
-                </h3>
-                <div className="space-y-0.5">
-                  {shortcuts
-                    .filter((shortcut) => shortcut.category === category)
-                    .map((shortcut) => (
-                      <ShortcutItem
-                        key={shortcut.action}
-                        shortcut={shortcut}
-                        isRecording={
-                          shortcut.action === recordingShortcut?.action
-                        }
-                        onStartRecording={handleStartRecording}
-                      />
-                    ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <DialogFooter className="flex-shrink-0 p-6 pt-4">
-          <Button size="sm" variant="destructive" onClick={resetToDefaults}>
-            Reset to Default
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function ShortcutItem({
-  shortcut,
-  isRecording,
-  onStartRecording,
-}: {
-  shortcut: KeyboardShortcut;
-  isRecording: boolean;
-  onStartRecording: (shortcut: KeyboardShortcut) => void;
-}) {
-  // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
-  const displayKeys = shortcut.keys.filter((key: string) => {
-    if (
-      key.includes("Cmd") &&
-      shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
-    )
-      return false;
-
-    return true;
-  });
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        {shortcut.icon && (
-          <div className="text-muted-foreground">{shortcut.icon}</div>
-        )}
-        <span className="text-sm">{shortcut.description}</span>
-      </div>
-      <div className="flex items-center gap-1">
-        {displayKeys.map((key: string, index: number) => (
-          <div key={key} className="flex items-center gap-1">
-            <div className="flex items-center">
-              {key.split("+").map((keyPart: string, partIndex: number) => {
-                const keyId = `${shortcut.id}-${index}-${partIndex}`;
-                return (
-                  <EditableShortcutKey
-                    key={keyId}
-                    isRecording={isRecording}
-                    onStartRecording={() => onStartRecording(shortcut)}
-                  >
-                    {keyPart}
-                  </EditableShortcutKey>
-                );
-              })}
-            </div>
-            {index < displayKeys.length - 1 && (
-              <span className="text-xs text-muted-foreground">or</span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function EditableShortcutKey({
-  children,
-  isRecording,
-  onStartRecording,
-}: {
-  children: React.ReactNode;
-  isRecording: boolean;
-  onStartRecording: () => void;
-}) {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onStartRecording();
-  };
-
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      className={`font-sans px-2 min-w-6 min-h-6 leading-none mr-1 hover:bg-opacity-80 ${
-        isRecording ? "border-primary bg-primary/10" : "border bg-accent/50"
-      }`}
-      onClick={handleClick}
-      title={
-        isRecording ? "Press any key combination..." : "Click to edit shortcut"
-      }
-    >
-      {children}
-    </Button>
-  );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 758717e5..da0d895d 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -1,105 +1,173 @@
 "use client";
 
-import {
-  motion,
-  useMotionTemplate,
-  useMotionValue,
-  useMotionValueEvent,
-  useTransform,
-} from "motion/react";
 import { type PropsWithChildren, useEffect, useRef, useState } from "react";
 
 type HandlebarsProps = PropsWithChildren;
 
 export function Handlebars({ children }: HandlebarsProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const leftHandleRef = useRef<HTMLDivElement>(null);
+	const rightHandleRef = useRef<HTMLDivElement>(null);
 
-  const [width, setWidth] = useState(0);
+	const [width, setWidth] = useState(0);
+	const [leftHandle, setLeftHandle] = useState(0);
+	const [rightHandle, setRightHandle] = useState(0);
 
-  const [leftHandle, setLeftHandle] = useState(0);
-  const [rightHandle, setRightHandle] = useState(width);
+	const widthRef = useRef(0);
+	const leftHandlePositionRef = useRef(0);
+	const rightHandlePositionRef = useRef(0);
 
-  const leftHandleX = useMotionValue(0);
-  const rightHandleX = useMotionValue(width);
+	const dragRef = useRef<{
+		isDragging: boolean;
+		side: "left" | "right" | null;
+		pointerId: number | null;
+		startX: number;
+		initialPosition: number;
+	}>({
+		isDragging: false,
+		side: null,
+		pointerId: null,
+		startX: 0,
+		initialPosition: 0,
+	});
 
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
 
-    const observer = new ResizeObserver(() => {
-      setWidth(el.offsetWidth);
-      setRightHandle(el.offsetWidth);
-      rightHandleX.set(el.offsetWidth);
-    });
+		const updateWidth = () => {
+			const newWidth = el.offsetWidth;
+			setWidth(newWidth);
+			setRightHandle(newWidth);
+		};
 
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [rightHandleX.set]);
+		const observer = new ResizeObserver(updateWidth);
+		observer.observe(el);
+		updateWidth();
 
-  useMotionValueEvent(leftHandleX, "change", () => {
-    setLeftHandle(leftHandleX.get());
-  });
-  useMotionValueEvent(rightHandleX, "change", () => {
-    setRightHandle(rightHandleX.get());
-  });
-  const leftGradient = useTransform(leftHandleX, [0, width - 10], [0, 100]);
-  const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
+		return () => observer.disconnect();
+	}, []);
 
-  return (
-    <div className="flex justify-center gap-4 leading-16">
-      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-0.5">
-        <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-1">
-          <motion.div
-            className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-background flex items-center justify-center select-none"
-            style={{
-              x: leftHandleX,
-            }}
-            drag="x"
-            dragConstraints={{ left: 0, right: rightHandle - 60 }}
-            dragElastic={0}
-            dragMomentum={false}
-            whileHover={{ scale: 1.05, cursor: "grab" }}
-            whileDrag={{ scale: 1.1, cursor: "grabbing" }}
-            transition={{ type: "spring", stiffness: 400, damping: 30 }}
-          >
-            <div className="w-2 h-8 rounded-full bg-yellow-500" />
-          </motion.div>
+	useEffect(() => {
+		widthRef.current = width;
+		leftHandlePositionRef.current = leftHandle;
+		rightHandlePositionRef.current = rightHandle;
+	}, [leftHandle, rightHandle, width]);
 
-          <motion.div
-            className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-background flex items-center justify-center select-none"
-            style={{
-              x: rightHandleX,
-            }}
-            drag="x"
-            dragConstraints={{
-              left: leftHandle + 60,
-              right: width,
-            }}
-            dragElastic={0}
-            dragMomentum={false}
-            whileHover={{ scale: 1.05, cursor: "grab" }}
-            whileDrag={{ scale: 1.1, cursor: "grabbing" }}
-            transition={{ type: "spring", stiffness: 400, damping: 30 }}
-          >
-            <div className="w-2 h-8 rounded-full bg-yellow-500" />
-          </motion.div>
-        </div>
+	useEffect(() => {
+		const handlePointerMove = (event: PointerEvent) => {
+			const { isDragging, side, pointerId, startX, initialPosition } =
+				dragRef.current;
 
-        <motion.span
-          className="inline-flex items-center justify-center w-full h-full px-9 relative rounded-2xl will-change-auto"
-          style={{
-            mask: useMotionTemplate`linear-gradient(90deg,
+			if (!isDragging) return;
+			if (pointerId !== null && event.pointerId !== pointerId) return;
+			if (!side) return;
+
+			const deltaX = event.clientX - startX;
+
+			if (side === "left") {
+				const maxLeft = Math.max(0, rightHandlePositionRef.current - 60);
+				const nextLeftHandle = Math.max(
+					0,
+					Math.min(maxLeft, initialPosition + deltaX),
+				);
+				setLeftHandle(nextLeftHandle);
+				return;
+			}
+
+			const minRight = Math.min(
+				widthRef.current,
+				leftHandlePositionRef.current + 60,
+			);
+			const nextRightHandle = Math.max(
+				minRight,
+				Math.min(widthRef.current, initialPosition + deltaX),
+			);
+			setRightHandle(nextRightHandle);
+		};
+
+		const handlePointerEnd = (event: PointerEvent) => {
+			const { pointerId } = dragRef.current;
+			if (pointerId !== null && event.pointerId !== pointerId) return;
+
+			dragRef.current.isDragging = false;
+			dragRef.current.side = null;
+			dragRef.current.pointerId = null;
+		};
+
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerEnd);
+		window.addEventListener("pointercancel", handlePointerEnd);
+
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerEnd);
+			window.removeEventListener("pointercancel", handlePointerEnd);
+		};
+	}, []);
+
+	const leftGradientPercent = width > 0 ? (leftHandle / (width - 10)) * 100 : 0;
+	const rightGradientPercent =
+		width > 0 ? (rightHandle / (width + 10)) * 100 : 0;
+
+	return (
+		<div className="flex justify-center gap-4 leading-16">
+			<div ref={containerRef} className="relative mt-0.5 -rotate-[2.76deg]">
+				<div className="absolute inset-0 z-10 flex size-full justify-between rounded-2xl border border-yellow-500">
+					<div
+						ref={leftHandleRef}
+						className="bg-background absolute left-0 z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
+						style={{
+							translate: `${leftHandle}px 0`,
+						}}
+						onPointerDown={(event) => {
+							event.preventDefault();
+							leftHandleRef.current?.setPointerCapture(event.pointerId);
+							dragRef.current.isDragging = true;
+							dragRef.current.side = "left";
+							dragRef.current.pointerId = event.pointerId;
+							dragRef.current.startX = event.clientX;
+							dragRef.current.initialPosition = leftHandlePositionRef.current;
+						}}
+					>
+						<div className="h-8 w-2 rounded-full bg-yellow-500" />
+					</div>
+
+					<div
+						ref={rightHandleRef}
+						className="bg-background absolute -left-[30px] z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
+						style={{
+							translate: `${rightHandle}px 0`,
+						}}
+						onPointerDown={(event) => {
+							event.preventDefault();
+							rightHandleRef.current?.setPointerCapture(event.pointerId);
+							dragRef.current.isDragging = true;
+							dragRef.current.side = "right";
+							dragRef.current.pointerId = event.pointerId;
+							dragRef.current.startX = event.clientX;
+							dragRef.current.initialPosition = rightHandlePositionRef.current;
+						}}
+					>
+						<div className="h-8 w-2 rounded-full bg-yellow-500" />
+					</div>
+				</div>
+
+				<span
+					className="relative z-0 inline-flex size-full items-center justify-center rounded-2xl px-9 will-change-auto"
+					style={{
+						mask: `linear-gradient(90deg,
             rgba(255, 255, 255, 0) 0%, 
-            rgba(255, 255, 255, 0) ${leftGradient}%, 
-            rgba(0, 0, 0) ${leftGradient}%, 
-            rgba(0, 0, 0) ${rightGradient}%, 
-            rgba(255, 255, 255, 0) ${rightGradient}%, 
+            rgba(255, 255, 255, 0) ${leftGradientPercent}%, 
+            rgba(0, 0, 0) ${leftGradientPercent}%, 
+            rgba(0, 0, 0) ${rightGradientPercent}%, 
+            rgba(255, 255, 255, 0) ${rightGradientPercent}%, 
             rgba(255, 255, 255, 0) 100%)`,
-          }}
-        >
-          {children}
-        </motion.span>
-      </div>
-    </div>
-  );
+					}}
+				>
+					{children}
+				</span>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index 1b557412..6f11ad7c 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -1,81 +1,46 @@
 "use client";
 
-import { motion } from "motion/react";
 import { Button } from "../ui/button";
-import { SponsorButton } from "../ui/sponsor-button";
-import { VercelIcon } from "../icons";
 import { ArrowRight } from "lucide-react";
-
 import Image from "next/image";
 import { Handlebars } from "./handlebars";
 import Link from "next/link";
 
 export function Hero() {
-  return (
-    <div className="min-h-[calc(100svh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
-      <Image
-        className="absolute top-0 left-0 -z-50 size-full object-cover invert dark:invert-0 opacity-85"
-        src="/landing-page-dark.png"
-        height={1903.5}
-        width={1269}
-        alt="landing-page.bg"
-      />
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1 }}
-        className="max-w-3xl mx-auto w-full flex-1 flex flex-col justify-center"
-      >
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.6, duration: 0.8 }}
-          className="mb-4 flex justify-center"
-        >
-          <SponsorButton
-            href="https://vercel.com/home?utm_source=opencut"
-            logo={VercelIcon}
-            companyName="Vercel"
-          />
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 0.8 }}
-          className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]"
-        >
-          <h1>The Open Source</h1>
-          <Handlebars>Video Editor</Handlebars>
-        </motion.div>
+	return (
+		<div className="flex min-h-[calc(100svh-4.5rem)] flex-col items-center justify-between px-4 text-center">
+			<Image
+				className="absolute top-0 left-0 -z-50 size-full object-cover opacity-85 invert dark:invert-0"
+				src="/landing-page-dark.png"
+				height={1903.5}
+				width={1269}
+				alt="landing-page.bg"
+			/>
+			<div className="mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center">
+				<div className="inline-block text-4xl font-bold tracking-tighter md:text-[4rem]">
+					<h1>The open source</h1>
+					<Handlebars>Video editor</Handlebars>
+				</div>
 
-        <motion.p
-          className="mt-10 text-base sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.4, duration: 0.8 }}
-        >
-          A simple but powerful video editor that gets the job done. Works on
-          any platform.
-        </motion.p>
+				<p className="text-muted-foreground mx-auto mt-10 max-w-xl text-base font-light tracking-wide sm:text-xl">
+					A simple but powerful video editor that gets the job done. Works on
+					any platform.
+				</p>
 
-        <motion.div
-          className="mt-8 flex gap-8 justify-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.6, duration: 0.8 }}
-        >
-          <Link href="/projects">
-            <Button
-              type="submit"
-              size="lg"
-              className="px-6 h-11 text-base bg-foreground"
-            >
-              Try early beta
-              <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
-            </Button>
-          </Link>
-        </motion.div>
-      </motion.div>
-    </div>
-  );
+				<div className="mt-8 flex justify-center gap-8">
+					<Link href="/projects">
+						<Button
+							variant="foreground"
+							type="submit"
+							size="lg"
+							className="h-11 text-base"
+						>
+							Try early beta
+							<ArrowRight className="ml-0.5" />
+						</Button>
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/language-select.tsx b/apps/web/src/components/language-select.tsx
deleted file mode 100644
index 43ed632d..00000000
--- a/apps/web/src/components/language-select.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { useState, useRef, useEffect } from "react";

-import { ChevronDown, Globe } from "lucide-react";

-import { cn } from "@/lib/utils";

-import { motion } from "framer-motion";

-import ReactCountryFlag from "react-country-flag";

-

-export interface Language {

-  code: string;

-  name: string;

-  flag?: string;

-}

-

-interface LanguageSelectProps {

-  selectedCountry: string;

-  onSelect: (country: string) => void;

-  containerRef: React.RefObject<HTMLDivElement>;

-  languages: Language[];

-}

-

-function FlagPreloader({ languages }: { languages: Language[] }) {

-  return (

-    <div className="absolute -top-[9999px] left-0 pointer-events-none">

-      {languages.map((language) => (

-        <ReactCountryFlag

-          key={language.code}

-          countryCode={language.code}

-          svg

-          style={{ width: "1.05rem", height: "1.05rem" }}

-        />

-      ))}

-    </div>

-  );

-}

-

-export function LanguageSelect({

-  selectedCountry,

-  onSelect,

-  containerRef,

-  languages,

-}: LanguageSelectProps) {

-  const [expanded, setExpanded] = useState(false);

-  const [isTapping, setIsTapping] = useState(false);

-  const [isClosing, setIsClosing] = useState(false);

-  const collapsedHeight = "2.5rem";

-  const expandHeight = "12rem";

-  const buttonRef = useRef<HTMLButtonElement>(null);

-

-  const expand = () => {

-    setIsTapping(true);

-    setTimeout(() => setIsTapping(false), 600);

-    setExpanded(true);

-    buttonRef.current?.focus();

-  };

-

-  useEffect(() => {

-    if (!expanded) return;

-

-    const handleClickOutside = (event: MouseEvent) => {

-      if (

-        buttonRef.current &&

-        !buttonRef.current.contains(event.target as Node)

-      ) {

-        setIsClosing(true);

-        setTimeout(() => setIsClosing(false), 600);

-        setExpanded(false);

-        buttonRef.current?.blur();

-      }

-    };

-

-    document.addEventListener("mousedown", handleClickOutside);

-    return () => {

-      document.removeEventListener("mousedown", handleClickOutside);

-    };

-  }, [expanded]);

-

-  const selectedLanguage = languages.find(

-    (lang) => lang.code === selectedCountry

-  );

-

-  const handleSelect = ({

-    code,

-    e,

-  }: {

-    code: string;

-    e: React.MouseEvent<HTMLButtonElement>;

-  }) => {

-    e.stopPropagation();

-    e.preventDefault();

-    onSelect(code);

-    setExpanded(false);

-  };

-

-  return (

-    <div className="relative w-full h-9">

-      <FlagPreloader languages={languages} />

-      <motion.button

-        type="button"

-        className={cn(

-          "absolute w-full h-full flex flex-col overflow-hidden items-start justify-between z-10 rounded-lg px-3 cursor-pointer",

-          "!bg-foreground/10 backdrop-blur-md text-foreground py-0",

-          "transition-[color,box-shadow] focus:border-ring focus:ring-ring/50 focus:ring-[1px]"

-        )}

-        initial={{

-          height: collapsedHeight,

-          scale: 1,

-        }}

-        animate={{

-          height: expanded ? expandHeight : collapsedHeight,

-          scale: isTapping ? [1, 0.985, 1] : 1,

-        }}

-        transition={{

-          height: { duration: 0.25, ease: [0.4, 0, 0.2, 1] },

-          scale: { duration: 0.6, ease: "easeOut" },

-        }}

-        onClick={expand}

-        ref={buttonRef}

-      >

-        {!expanded ? (

-          <div

-            className="flex items-center justify-between w-full"

-            style={{

-              height: collapsedHeight,

-            }}

-          >

-            <div className="flex items-center gap-2">

-              {selectedCountry === "auto" ? (

-                <Globe className="!size-[1.05rem]" />

-              ) : (

-                <ReactCountryFlag

-                  countryCode={selectedCountry}

-                  svg

-                  style={{ width: "1.05rem", height: "1.05rem" }}

-                />

-              )}

-              <span className="pt-[0.05rem]">

-                {selectedCountry === "auto" ? "Auto" : selectedLanguage?.name}

-              </span>

-            </div>

-          </div>

-        ) : (

-          <div className="flex flex-col gap-2 my-2.5 w-full overflow-y-auto scrollbar-hidden">

-            <LanguageButton

-              language={{ code: "auto", name: "Auto" }}

-              onSelect={handleSelect}

-              selectedCountry={selectedCountry}

-            />

-            {languages.map((language) => (

-              <LanguageButton

-                key={language.code}

-                language={language}

-                onSelect={handleSelect}

-                selectedCountry={selectedCountry}

-              />

-            ))}

-          </div>

-        )}

-      </motion.button>

-

-      <motion.div

-        className="absolute top-1/2 right-3 -translate-y-1/2 pointer-events-none z-20 mt-0.5"

-        initial={{ opacity: 1 }}

-        animate={{ opacity: expanded ? 0 : 1 }}

-        transition={{ duration: 0.2, ease: "easeInOut" }}

-      >

-        <ChevronDown className="text-muted-foreground size-4" />

-      </motion.div>

-    </div>

-  );

-}

-

-function LanguageButton({

-  language,

-  onSelect,

-  selectedCountry,

-}: {

-  language: Language;

-  onSelect: ({

-    code,

-    e,

-  }: {

-    code: string;

-    e: React.MouseEvent<HTMLButtonElement>;

-  }) => void;

-  selectedCountry: string;

-}) {

-  return (

-    <button

-      type="button"

-      className="flex items-center gap-2 cursor-pointer text-foreground hover:text-foreground/75"

-      onClick={(e) => onSelect({ code: language.code, e })}

-    >

-      {language.code === "auto" ? (

-        <Globe className="!size-[1.0rem]" />

-      ) : (

-        <ReactCountryFlag

-          countryCode={language.code}

-          svg

-          style={{ width: "1.05rem", height: "1.05rem" }}

-        />

-      )}

-      <span className="pt-[0.05rem]">{language.name}</span>

-    </button>

-  );

-}

diff --git a/apps/web/src/components/providers/editor-provider.tsx b/apps/web/src/components/providers/editor-provider.tsx
index b8e9ae1d..b1b5ab3a 100644
--- a/apps/web/src/components/providers/editor-provider.tsx
+++ b/apps/web/src/components/providers/editor-provider.tsx
@@ -1,53 +1,136 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
-import { useEditorStore } from "@/stores/editor-store";
+import { useEditor } from "@/hooks/use-editor";
 import {
-  useKeybindingsListener,
-  useKeybindingDisabler,
+	useKeybindingsListener,
+	useKeybindingDisabler,
 } from "@/hooks/use-keybindings";
-import { useEditorActions } from "@/hooks/use-editor-actions";
+import { useEditorActions } from "@/hooks/actions/use-editor-actions";
 
 interface EditorProviderProps {
-  children: React.ReactNode;
+	projectId: string;
+	children: React.ReactNode;
 }
 
-export function EditorProvider({ children }: EditorProviderProps) {
-  const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
-  const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
+export function EditorProvider({ projectId, children }: EditorProviderProps) {
+	const editor = useEditor();
+	const router = useRouter();
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
+	const activeProject = editor.project.getActiveOrNull();
 
-  // Set up action handlers
-  useEditorActions();
+	useEffect(() => {
+		if (isLoading) {
+			disableKeybindings();
+		} else {
+			enableKeybindings();
+		}
+	}, [isLoading, disableKeybindings, enableKeybindings]);
 
-  // Set up keybinding listener
-  useKeybindingsListener();
+	useEffect(() => {
+		let cancelled = false;
 
-  // Disable keybindings when initializing
-  useEffect(() => {
-    if (isInitializing || !isPanelsReady) {
-      disableKeybindings();
-    } else {
-      enableKeybindings();
-    }
-  }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]);
+		const loadProject = async () => {
+			try {
+				setIsLoading(true);
+				await editor.project.loadProject({ id: projectId });
 
-  useEffect(() => {
-    initializeApp();
-  }, [initializeApp]);
+				if (cancelled) return;
 
-  // Show loading screen while initializing
-  if (isInitializing || !isPanelsReady) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">Loading editor...</p>
-        </div>
-      </div>
-    );
-  }
+				setIsLoading(false);
+			} catch (err) {
+				if (cancelled) return;
 
-  // App is ready, render children
-  return <>{children}</>;
+				const isNotFound =
+					err instanceof Error &&
+					(err.message.includes("not found") ||
+						err.message.includes("does not exist"));
+
+				if (isNotFound) {
+					try {
+						const newProjectId = await editor.project.createNewProject({
+							name: "Untitled Project",
+						});
+						router.replace(`/editor/${newProjectId}`);
+					} catch (_createErr) {
+						setError("Failed to create project");
+						setIsLoading(false);
+					}
+				} else {
+					setError(
+						err instanceof Error ? err.message : "Failed to load project",
+					);
+					setIsLoading(false);
+				}
+			}
+		};
+
+		loadProject();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [projectId, editor, router]);
+
+	if (error) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<p className="text-destructive text-sm">{error}</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (isLoading) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground size-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Loading project...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (!activeProject) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground size-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Exiting project...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<EditorRuntimeBindings />
+			{children}
+		</>
+	);
+}
+
+function EditorRuntimeBindings() {
+	const editor = useEditor();
+
+	useEffect(() => {
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (!editor.save.getIsDirty()) return;
+			event.preventDefault();
+			(event as unknown as { returnValue: string }).returnValue = "";
+		};
+
+		window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+	}, [editor]);
+
+	useEditorActions();
+	useKeybindingsListener();
+	return null;
 }
diff --git a/apps/web/src/components/providers/migrators/scenes-migrator.tsx b/apps/web/src/components/providers/migrators/scenes-migrator.tsx
deleted file mode 100644
index b984a7f4..00000000
--- a/apps/web/src/components/providers/migrators/scenes-migrator.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import { storageService } from "@/lib/storage/storage-service";
-import { TProject, Scene } from "@/types/project";
-import { generateUUID } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Progress } from "@/components/ui/progress";
-import { createMainScene } from "@/stores/project-store";
-
-interface MigrationProgress {
-  current: number;
-  total: number;
-  currentProjectName: string;
-}
-
-export function ScenesMigrator({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const [isMigrating, setIsMigrating] = useState(false);
-  const [progress, setProgress] = useState<MigrationProgress>({
-    current: 0,
-    total: 0,
-    currentProjectName: "",
-  });
-
-  const shouldCheckMigration =
-    pathname.startsWith("/editor") || pathname.startsWith("/projects");
-
-  useEffect(() => {
-    if (!shouldCheckMigration) return;
-
-    checkAndMigrateProjects();
-  }, [shouldCheckMigration]);
-
-  const checkAndMigrateProjects = async () => {
-    try {
-      const projects = await storageService.loadAllProjects();
-      const legacyProjects = projects.filter(
-        (project) => !project.scenes || project.scenes.length === 0
-      );
-
-      if (legacyProjects.length === 0) {
-        // No migration needed
-        return;
-      }
-
-      setIsMigrating(true);
-      setProgress({
-        current: 0,
-        total: legacyProjects.length,
-        currentProjectName: "",
-      });
-
-      // Migrate each legacy project
-      for (let i = 0; i < legacyProjects.length; i++) {
-        const project = legacyProjects[i];
-
-        setProgress({
-          current: i,
-          total: legacyProjects.length,
-          currentProjectName: project.name,
-        });
-
-        await migrateLegacyProject(project);
-      }
-
-      setProgress({
-        current: legacyProjects.length,
-        total: legacyProjects.length,
-        currentProjectName: "Complete!",
-      });
-
-      setTimeout(() => {
-        setIsMigrating(false);
-      }, 1000);
-    } catch (error) {
-      console.error("Migration failed:", error);
-      setIsMigrating(false);
-    }
-  };
-
-  const migrateLegacyProject = async (project: TProject) => {
-    try {
-      const mainScene: Scene = {
-        id: generateUUID(),
-        name: "Main Scene",
-        isMain: true,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      const migratedProject: TProject = {
-        ...project,
-        scenes: [mainScene],
-        currentSceneId: mainScene.id,
-        updatedAt: new Date(),
-      };
-
-      // Load existing timeline data (legacy format)
-      const legacyTimeline = await storageService.loadTimeline({
-        projectId: project.id,
-      });
-
-      await storageService.saveProject({ project: migratedProject });
-
-      // If timeline data, migrate it to the main scene
-      if (legacyTimeline && legacyTimeline.length > 0) {
-        await storageService.saveTimeline({
-          projectId: project.id,
-          tracks: legacyTimeline,
-          sceneId: mainScene.id,
-        });
-      }
-
-      // Clean up legacy timeline storage
-      await storageService.deleteProjectTimeline({ projectId: project.id });
-    } catch (error) {
-      console.error(`Failed to migrate project ${project.name}:`, error);
-      throw error;
-    }
-  };
-
-  if (!shouldCheckMigration) {
-    return children;
-  }
-
-  if (isMigrating) {
-    const progressPercent =
-      progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
-
-    return (
-      <Dialog open={true}>
-        <DialogContent
-          className="sm:max-w-md"
-          onPointerDownOutside={(e) => e.preventDefault()}
-        >
-          <DialogHeader>
-            <DialogTitle>Updating Projects</DialogTitle>
-            <DialogDescription>
-              We're adding scene support to your projects. This will only take a
-              moment.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span>Progress</span>
-                <span>
-                  {progress.current} of {progress.total}
-                </span>
-              </div>
-              <Progress value={progressPercent} className="w-full" />
-            </div>
-
-            {progress.currentProjectName && (
-              <div className="text-sm text-muted-foreground">
-                {progress.current < progress.total
-                  ? `Updating: ${progress.currentProjectName}`
-                  : progress.currentProjectName}
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return children;
-}
diff --git a/apps/web/src/components/rename-project-dialog.tsx b/apps/web/src/components/rename-project-dialog.tsx
deleted file mode 100644
index dc576b00..00000000
--- a/apps/web/src/components/rename-project-dialog.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-export function RenameProjectDialog({
-  isOpen,
-  onOpenChange,
-  onConfirm,
-  projectName,
-}: {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: (name: string) => void;
-  projectName: string;
-}) {
-  const [name, setName] = useState(projectName);
-
-  // Reset the name when dialog opens - this is better UX than syncing with every prop change
-  const handleOpenChange = (open: boolean) => {
-    if (open) {
-      setName(projectName);
-    }
-    onOpenChange(open);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rename Project</DialogTitle>
-          <DialogDescription>
-            Enter a new name for your project.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Input
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              onConfirm(name);
-            }
-          }}
-          placeholder="Enter a new name"
-          className="mt-0 bg-background border-2 border-border"
-        />
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button onClick={() => onConfirm(name)}>Rename</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/web/src/components/storage-provider.tsx b/apps/web/src/components/storage-provider.tsx
index 69105d0f..144790dc 100644
--- a/apps/web/src/components/storage-provider.tsx
+++ b/apps/web/src/components/storage-provider.tsx
@@ -1,80 +1,81 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState } from "react";
-import { useProjectStore } from "@/stores/project-store";
-import { useMediaStore } from "@/stores/media-store";
-import { storageService } from "@/lib/storage/storage-service";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
+import { storageService } from "@/services/storage/storage-service";
 
 interface StorageContextType {
-  isInitialized: boolean;
-  isLoading: boolean;
-  hasSupport: boolean;
-  error: string | null;
+	isInitialized: boolean;
+	isLoading: boolean;
+	hasSupport: boolean;
+	error: string | null;
 }
 
 const StorageContext = createContext<StorageContextType | null>(null);
 
 export function useStorage() {
-  const context = useContext(StorageContext);
-  if (!context) {
-    throw new Error("useStorage must be used within StorageProvider");
-  }
-  return context;
+	const context = useContext(StorageContext);
+	if (!context) {
+		throw new Error("useStorage must be used within StorageProvider");
+	}
+	return context;
 }
 
 interface StorageProviderProps {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 export function StorageProvider({ children }: StorageProviderProps) {
-  const [status, setStatus] = useState<StorageContextType>({
-    isInitialized: false,
-    isLoading: true,
-    hasSupport: false,
-    error: null,
-  });
+	const [status, setStatus] = useState<StorageContextType>({
+		isInitialized: false,
+		isLoading: true,
+		hasSupport: false,
+		error: null,
+	});
 
-  const loadAllProjects = useProjectStore((state) => state.loadAllProjects);
+	const editor = useEditor();
+	const hasInitialized = useRef(false);
 
-  useEffect(() => {
-    const initializeStorage = async () => {
-      setStatus((prev) => ({ ...prev, isLoading: true }));
+	useEffect(() => {
+		if (hasInitialized.current) return;
+		hasInitialized.current = true;
 
-      try {
-        // Check browser support
-        const hasSupport = storageService.isFullySupported();
+		const initializeStorage = async () => {
+			setStatus((prev) => ({ ...prev, isLoading: true }));
 
-        if (!hasSupport) {
-          toast.warning(
-            "Storage not fully supported. Some features may not work."
-          );
-        }
+			try {
+				const hasSupport = storageService.isFullySupported();
 
-        // Load saved projects (media will be loaded when a project is loaded)
-        await loadAllProjects();
+				if (!hasSupport) {
+					toast.warning(
+						"Storage not fully supported. Some features may not work.",
+					);
+				}
 
-        setStatus({
-          isInitialized: true,
-          isLoading: false,
-          hasSupport,
-          error: null,
-        });
-      } catch (error) {
-        console.error("Failed to initialize storage:", error);
-        setStatus({
-          isInitialized: false,
-          isLoading: false,
-          hasSupport: storageService.isFullySupported(),
-          error: error instanceof Error ? error.message : "Unknown error",
-        });
-      }
-    };
+				await editor.project.loadAllProjects();
 
-    initializeStorage();
-  }, [loadAllProjects]);
+				setStatus({
+					isInitialized: true,
+					isLoading: false,
+					hasSupport,
+					error: null,
+				});
+			} catch (error) {
+				console.error("Failed to initialize storage:", error);
+				setStatus({
+					isInitialized: false,
+					isLoading: false,
+					hasSupport: storageService.isFullySupported(),
+					error: error instanceof Error ? error.message : "Unknown error",
+				});
+			}
+		};
 
-  return (
-    <StorageContext.Provider value={status}>{children}</StorageContext.Provider>
-  );
+		initializeStorage();
+	}, [editor.project.loadAllProjects]);
+
+	return (
+		<StorageContext.Provider value={status}>{children}</StorageContext.Provider>
+	);
 }
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c..394d75b2 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,25 +1,36 @@
 "use client";

 

 import { Button } from "./ui/button";

-import { Sun, Moon } from "lucide-react";

 import { useTheme } from "next-themes";

+import { cn } from "@/utils/ui";

+import { Sun03Icon } from "@hugeicons/core-free-icons";

+import { HugeiconsIcon } from "@hugeicons/react";

 

 interface ThemeToggleProps {

-  className?: string;

+	className?: string;

+	iconClassName?: string;

+	onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;

 }

 

-export function ThemeToggle({ className }: ThemeToggleProps) {

-  const { theme, setTheme } = useTheme();

+export function ThemeToggle({

+	className,

+	iconClassName,

+	onToggle,

+}: ThemeToggleProps) {

+	const { theme, setTheme } = useTheme();

 

-  return (

-    <Button

-      size="icon"

-      variant="text"

-      className="h-7"

-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}

-    >

-      <Sun className="!size-[1.1rem]" />

-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>

-    </Button>

-  );

+	return (

+		<Button

+			size="icon"

+			variant="text"

+			className={cn("h-7", className)}

+			onClick={(e) => {

+				setTheme(theme === "dark" ? "light" : "dark");

+				onToggle?.(e);

+			}}

+		>

+			<HugeiconsIcon icon={Sun03Icon} className={cn("!size-[1.1rem]", iconClassName)} />

+			<span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>

+		</Button>

+	);

 }

diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx
index 68edd869..95a1c2df 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/apps/web/src/components/ui/accordion.tsx
@@ -4,53 +4,53 @@ import * as React from "react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn("border-b", className)}
+		{...props}
+	/>
 ));
 AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"flex flex-1 cursor-pointer items-center justify-between py-4 text-left text-sm font-medium hover:underline [&[data-state=open]>svg]:rotate-180",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDown className="text-muted-foreground size-4 shrink-0" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
 ));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+		{...props}
+	>
+		<div className={cn("pt-0 pb-4", className)}>{children}</div>
+	</AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 2cce235c..e7295429 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { buttonVariants } from "./button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
@@ -13,129 +13,129 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4",
+			className,
+		)}
+		{...props}
+	/>
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+	AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(
+			buttonVariants({ variant: "outline" }),
+			"mt-2 sm:mt-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
 };
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index cef19199..e941ca43 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -1,58 +1,65 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
+import { AlertTriangle } from "lucide-react";
+import { cn } from "@/utils/ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Alert02Icon } from "@hugeicons/core-free-icons";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"relative w-full rounded-lg border p-5 py-4.5 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-destructive [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"bg-destructive/5 border-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, children, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	>
+		{variant === "destructive" && (
+			<HugeiconsIcon icon={Alert02Icon} className="size-5 text-destructive mt-0.5" />
+		)}
+		{children}
+	</div>
 ));
 Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
+	<h5
+		ref={ref}
+		className={cn("mb-2 text-base leading-none font-semibold tracking-tight", className)}
+		{...props}
+	/>
 ));
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
 ));
 AlertDescription.displayName = "AlertDescription";
 
diff --git a/apps/web/src/components/ui/audio-player.tsx b/apps/web/src/components/ui/audio-player.tsx
deleted file mode 100644
index 37bf8ca9..00000000
--- a/apps/web/src/components/ui/audio-player.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { useRef, useEffect } from "react";
-import { usePlaybackStore } from "@/stores/playback-store";
-
-interface AudioPlayerProps {
-  src: string;
-  className?: string;
-  clipStartTime: number;
-  trimStart: number;
-  trimEnd: number;
-  clipDuration: number;
-  trackMuted?: boolean;
-}
-
-export function AudioPlayer({
-  src,
-  className = "",
-  clipStartTime,
-  trimStart,
-  trimEnd,
-  clipDuration,
-  trackMuted = false,
-}: AudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();
-
-  // Calculate if we're within this clip's timeline range
-  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
-  const isInClipRange =
-    currentTime >= clipStartTime && currentTime < clipEndTime;
-
-  // Sync playback events
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio || !isInClipRange) return;
-
-    const handleSeekEvent = (e: CustomEvent) => {
-      // Always update audio time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const audioTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-      audio.currentTime = audioTime;
-    };
-
-    const handleUpdateEvent = (e: CustomEvent) => {
-      // Always update audio time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const targetTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-
-      if (Math.abs(audio.currentTime - targetTime) > 0.5) {
-        audio.currentTime = targetTime;
-      }
-    };
-
-    const handleSpeed = (e: CustomEvent) => {
-      audio.playbackRate = e.detail.speed;
-    };
-
-    window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-    window.addEventListener(
-      "playback-update",
-      handleUpdateEvent as EventListener
-    );
-    window.addEventListener("playback-speed", handleSpeed as EventListener);
-
-    return () => {
-      window.removeEventListener(
-        "playback-seek",
-        handleSeekEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-update",
-        handleUpdateEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-speed",
-        handleSpeed as EventListener
-      );
-    };
-  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
-
-  // Sync playback state
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    if (isPlaying && isInClipRange && !trackMuted) {
-      audio.play().catch(() => {});
-    } else {
-      audio.pause();
-    }
-  }, [isPlaying, isInClipRange, trackMuted]);
-
-  // Sync volume and speed
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    audio.volume = volume;
-    audio.muted = muted || trackMuted;
-    audio.playbackRate = speed;
-  }, [volume, speed, muted, trackMuted]);
-
-  return (
-    <audio
-      ref={audioRef}
-      src={src}
-      className={className}
-      preload="auto"
-      controls={false}
-      style={{ display: "none" }} // Audio elements don't need visual representation
-      onContextMenu={(e) => e.preventDefault()}
-    />
-  );
-}
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index 7979c415..0c2fb4c4 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -3,47 +3,47 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex size-10 shrink-0 overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square size-full", className)}
+		{...props}
+	/>
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
+	<AvatarPrimitive.Fallback
+		ref={ref}
+			className={cn(
+				"bg-muted flex size-full items-center justify-center rounded-full",
+				className,
+			)}
+		{...props}
+	/>
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 02b8532b..21240ba0 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -1,36 +1,36 @@
-import * as React from "react";
+import type * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
 export { Badge, badgeVariants };
diff --git a/apps/web/src/components/ui/breadcrumb.tsx b/apps/web/src/components/ui/breadcrumb.tsx
index d9df9bf5..e95f2965 100644
--- a/apps/web/src/components/ui/breadcrumb.tsx
+++ b/apps/web/src/components/ui/breadcrumb.tsx
@@ -2,114 +2,114 @@ import * as React from "react";
 import { Slot as SlotPrimitive } from "radix-ui";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
+	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">
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
+	<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">
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
+	<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;
-  }
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a";
+	const Comp = asChild ? SlotPrimitive.Slot : "a";
 
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			ref={ref}
+			className={cn("hover:text-foreground", className)}
+			{...props}
+		/>
+	);
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
+	<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
+	children,
+	className,
+	...props
 }: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </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
+	className,
+	...props
 }: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </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,
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
 };
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 56a10f44..6c063eff 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -2,59 +2,63 @@ import * as React from "react";
 import { Slot as SlotPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const buttonVariants = cva(
-  "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-foreground text-background shadow-sm hover:bg-foreground/90",
-        primary:
-          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
-        "primary-gradient":
-          "bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity",
-        destructive:
-          "bg-destructive/0 border border-destructive/25 text-destructive shadow-xs hover:bg-destructive hover:text-destructive-foreground",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
-        text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-sm px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-7 w-7",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
+	"inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary-hover",
+				background:
+					"bg-background text-foreground hover:bg-background/90",
+				foreground:
+					"bg-foreground text-background hover:bg-foreground/90",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				"destructive-foreground":
+					"border bg-background hover:bg-destructive/15 text-destructive",
+				outline:
+					"border border-border bg-transparent hover:bg-accent/50",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-foreground/15 border border-input",
+				text: "bg-transparent rounded-none opacity-100 hover:opacity-75",
+				link: "text-primary underline-offset-4 hover:underline !p-0 !h-auto",
+			},
+			size: {
+				default: "h-9.5 px-4 py-2",
+				sm: "h-8 px-3 text-xs",
+				lg: "h-10 p-5 px-6",
+				icon: "size-7",
+				text: "p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? SlotPrimitive.Slot : "button";
+		const effectiveSize = size ?? (variant === "text" ? "text" : "default");
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size: effectiveSize, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
 );
 Button.displayName = "Button";
 
diff --git a/apps/web/src/components/ui/calendar.tsx b/apps/web/src/components/ui/calendar.tsx
index 192643cb..a0664cc3 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/apps/web/src/components/ui/calendar.tsx
@@ -1,71 +1,71 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { buttonVariants } from "./button";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
 }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "text" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  );
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "text" }),
+					"size-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ ...props }) => <ChevronLeft className="size-4" />,
+				IconRight: ({ ...props }) => <ChevronRight className="size-4" />,
+			}}
+			{...props}
+		/>
+	);
 }
 Calendar.displayName = "Calendar";
 
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index 6d0b37cc..c3fc45f0 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -1,80 +1,80 @@
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("bg-card text-card-foreground rounded-2xl border", className)}
+		{...props}
+	/>
 ));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("leading-none font-semibold tracking-tight", className)}
+		{...props}
+	/>
 ));
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
 ));
 CardFooter.displayName = "CardFooter";
 
 export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
 };
diff --git a/apps/web/src/components/ui/carousel.tsx b/apps/web/src/components/ui/carousel.tsx
index a9c98b67..9018b9ea 100644
--- a/apps/web/src/components/ui/carousel.tsx
+++ b/apps/web/src/components/ui/carousel.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import * as React from "react";
 import useEmblaCarousel, {
-  type UseEmblaCarouselType,
+	type UseEmblaCarouselType,
 } from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { Button } from "./button";
 
 type CarouselApi = UseEmblaCarouselType[1];
@@ -15,248 +15,248 @@ type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
+	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;
+	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);
+	const context = React.useContext(CarouselContext);
 
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
 
-  return context;
+	return context;
 }
 
 const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+	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);
+	(
+		{
+			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;
-      }
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return;
+			}
 
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);
 
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev();
+		}, [api]);
 
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [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]
-    );
+		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;
-      }
+		React.useEffect(() => {
+			if (!api || !setApi) {
+				return;
+			}
 
-      setApi(api);
-    }, [api, setApi]);
+			setApi(api);
+		}, [api, setApi]);
 
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
+		React.useEffect(() => {
+			if (!api) {
+				return;
+			}
 
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
+			onSelect(api);
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);
 
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, 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>
-    );
-  }
+		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>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+	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>
-  );
+	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>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+	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}
-    />
-  );
+	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>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
+	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>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
+	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,
+	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
index a469c87a..2bd04b20 100644
--- a/apps/web/src/components/ui/chart.tsx
+++ b/apps/web/src/components/ui/chart.tsx
@@ -3,368 +3,368 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import {
-  NameType,
-  Payload,
-  ValueType,
+	NameType,
+	Payload,
+	ValueType,
 } from "recharts/types/component/DefaultTooltipContent";
 
-import { cn } from "../../lib/utils";
+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> }
-  );
+	[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;
+	config: ChartConfig;
 };
 
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext);
+	const context = React.useContext(ChartContext);
 
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
 
-  return context;
+	return context;
 }
 
 const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"];
-  }
+	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, "")}`;
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
+	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
-  );
+	const colorConfig = Object.entries(config).filter(
+		([_, config]) => config.theme || config.color,
+	);
 
-  if (!colorConfig.length) {
-    return null;
-  }
+	if (!colorConfig.length) {
+		return null;
+	}
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
+	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")}
+	.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"),
-      }}
-    />
-  );
+`,
+					)
+					.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;
-    }
+	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();
+	(
+		{
+			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 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;
+			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 (labelFormatter) {
+				return (
+					<div className={cn("font-medium", labelClassName)}>
+						{labelFormatter(value, payload)}
+					</div>
+				);
+			}
 
-      if (!value) {
-        return null;
-      }
+			if (!value) {
+				return null;
+			}
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ]);
+			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+		}, [
+			label,
+			labelFormatter,
+			payload,
+			hideLabel,
+			labelClassName,
+			config,
+			labelKey,
+		]);
 
-    if (!active || !payload?.length) {
-      return null;
-    }
+		if (!active || !payload?.length) {
+			return null;
+		}
 
-    const nestLabel = payload.length === 1 && indicator !== "dot";
+		const nestLabel = payload.length === 1 && indicator !== "dot";
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background 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
+				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(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  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)",
-                            {
-                              "h-2.5 w-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="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
+						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;
-    }
+	HTMLDivElement,
+	React.ComponentProps<"div"> &
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean;
+			nameKey?: string;
+		}
 >(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart();
+	(
+		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+		ref,
+	) => {
+		const { config } = useChart();
 
-    if (!payload?.length) {
-      return null;
-    }
+		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
+				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(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
+					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
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
-    return;
-  }
+	if (typeof payload !== "object" || payload === null) {
+		return;
+	}
 
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
 
-  let configLabelKey: string = key;
+	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;
-  }
+	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];
+	return configLabelKey in config
+		? config[configLabelKey]
+		: config[key as keyof typeof config];
 }
 
 export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
 };
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 5e429994..af33b5b3 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -4,26 +4,26 @@ import * as React from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { Check } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"cursor-pointer bg-background peer focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary size-4 shrink-0 shadow-xs rounded-sm border focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="size-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index b94c1f98..ad350e0e 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -1,336 +1,343 @@
-import * as React from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { Input } from "./input";
 
 interface ColorPickerProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  className?: string;
-  containerRef?: React.RefObject<HTMLDivElement>;
+	value?: string;
+	onChange?: (value: string) => void;
+	className?: string;
+	containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 const hexToHsv = (hex: string) => {
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
+	const r = parseInt(hex.slice(0, 2), 16) / 255;
+	const g = parseInt(hex.slice(2, 4), 16) / 255;
+	const b = parseInt(hex.slice(4, 6), 16) / 255;
 
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const diff = max - min;
 
-  let h = 0;
-  let s = max === 0 ? 0 : diff / max;
-  let v = max;
+	let h = 0;
+	const s = max === 0 ? 0 : diff / max;
+	const v = max;
 
-  if (diff !== 0) {
-    switch (max) {
-      case r:
-        h = ((g - b) / diff) % 6;
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-  }
+	if (diff !== 0) {
+		switch (max) {
+			case r:
+				h = ((g - b) / diff) % 6;
+				break;
+			case g:
+				h = (b - r) / diff + 2;
+				break;
+			case b:
+				h = (r - g) / diff + 4;
+				break;
+		}
+	}
 
-  h = (h * 60 + 360) % 360;
-  if (isNaN(h)) h = 0;
+	h = (h * 60 + 360) % 360;
+	if (Number.isNaN(h)) h = 0;
 
-  return [h, s, v];
+	return [h, s, v];
 };
 
 const hsvToHex = (h: number, s: number, v: number) => {
-  const c = v * s;
-  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-  const m = v - c;
+	const c = v * s;
+	const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+	const m = v - c;
 
-  let r = 0,
-    g = 0,
-    b = 0;
+	let r = 0,
+		g = 0,
+		b = 0;
 
-  if (h >= 0 && h < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h >= 60 && h < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h >= 120 && h < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h >= 180 && h < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h >= 240 && h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else if (h >= 300 && h < 360) {
-    r = c;
-    g = 0;
-    b = x;
-  }
+	if (h >= 0 && h < 60) {
+		r = c;
+		g = x;
+		b = 0;
+	} else if (h >= 60 && h < 120) {
+		r = x;
+		g = c;
+		b = 0;
+	} else if (h >= 120 && h < 180) {
+		r = 0;
+		g = c;
+		b = x;
+	} else if (h >= 180 && h < 240) {
+		r = 0;
+		g = x;
+		b = c;
+	} else if (h >= 240 && h < 300) {
+		r = x;
+		g = 0;
+		b = c;
+	} else if (h >= 300 && h < 360) {
+		r = c;
+		g = 0;
+		b = x;
+	}
 
-  r = Math.round((r + m) * 255);
-  g = Math.round((g + m) * 255);
-  b = Math.round((b + m) * 255);
+	r = Math.round((r + m) * 255);
+	g = Math.round((g + m) * 255);
+	b = Math.round((b + m) * 255);
 
-  return [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+	return [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
 };
 
-const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
-  ({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [isDragging, setIsDragging] = React.useState<
-      "saturation" | "hue" | null
-    >(null);
-    const [pickerPosition, setPickerPosition] = React.useState({
-      right: 0,
-      bottom: 0,
-    });
-    const [internalHue, setInternalHue] = React.useState(0);
-    const [inputValue, setInputValue] = React.useState(value);
+const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
+	({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
+		const [isOpen, setIsOpen] = useState(false);
+		const [isDragging, setIsDragging] = useState<"saturation" | "hue" | null>(
+			null,
+		);
+		const [pickerPosition, setPickerPosition] = useState({
+			right: 0,
+			bottom: 0,
+		});
+		const [internalHue, setInternalHue] = useState(0);
+		const [inputValue, setInputValue] = useState(value);
 
-    const pickerRef = React.useRef<HTMLDivElement>(null);
-    const saturationRef = React.useRef<HTMLDivElement>(null);
-    const hueRef = React.useRef<HTMLDivElement>(null);
-    const triggerRef = React.useRef<HTMLDivElement>(null);
+		const pickerRef = useRef<HTMLDivElement>(null);
+		const saturationRef = useRef<HTMLButtonElement>(null);
+		const hueRef = useRef<HTMLButtonElement>(null);
+		const triggerRef = useRef<HTMLButtonElement>(null);
 
-    const [h, s, v] = hexToHsv(value);
-    const displayHue = s > 0 ? h : internalHue;
+		const [h, s, v] = hexToHsv(value);
+		const displayHue = s > 0 ? h : internalHue;
 
-    React.useEffect(() => {
-      setInputValue(value);
-    }, [value]);
+		useEffect(() => {
+			setInputValue(value);
+		}, [value]);
 
-    React.useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (
-          pickerRef.current &&
-          !pickerRef.current.contains(event.target as Node)
-        ) {
-          setIsOpen(false);
-        }
-      };
+		useEffect(() => {
+			const handleClickOutside = (event: MouseEvent) => {
+				if (
+					pickerRef.current &&
+					!pickerRef.current.contains(event.target as Node)
+				) {
+					setIsOpen(false);
+				}
+			};
 
-      if (isOpen) {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () =>
-          document.removeEventListener("mousedown", handleClickOutside);
-      }
-    }, [isOpen]);
+			if (isOpen) {
+				document.addEventListener("mousedown", handleClickOutside);
+				return () =>
+					document.removeEventListener("mousedown", handleClickOutside);
+			}
+		}, [isOpen]);
 
-    React.useEffect(() => {
-      const handleMouseMove = (e: MouseEvent) => {
-        if (!isDragging) return;
+		useEffect(() => {
+			const handleMouseMove = (e: MouseEvent) => {
+				if (!isDragging) return;
 
-        if (isDragging === "saturation" && saturationRef.current) {
-          const rect = saturationRef.current.getBoundingClientRect();
-          const x = Math.max(
-            0,
-            Math.min(1, (e.clientX - rect.left) / rect.width)
-          );
-          const y = Math.max(
-            0,
-            Math.min(1, (e.clientY - rect.top) / rect.height)
-          );
-          const newS = x;
-          const newV = 1 - y;
-          const newHex = hsvToHex(displayHue, newS, newV);
-          onChange?.(newHex);
-        }
+				if (isDragging === "saturation" && saturationRef.current) {
+					const rect = saturationRef.current.getBoundingClientRect();
+					const x = Math.max(
+						0,
+						Math.min(1, (e.clientX - rect.left) / rect.width),
+					);
+					const y = Math.max(
+						0,
+						Math.min(1, (e.clientY - rect.top) / rect.height),
+					);
+					const newS = x;
+					const newV = 1 - y;
+					const newHex = hsvToHex(displayHue, newS, newV);
+					onChange?.(newHex);
+				}
 
-        if (isDragging === "hue" && hueRef.current) {
-          const rect = hueRef.current.getBoundingClientRect();
-          const x = Math.max(
-            0,
-            Math.min(1, (e.clientX - rect.left) / rect.width)
-          );
-          const newH = x * 360;
-          setInternalHue(newH);
-          if (s > 0) {
-            const newHex = hsvToHex(newH, s, v);
-            onChange?.(newHex);
-          }
-        }
-      };
+				if (isDragging === "hue" && hueRef.current) {
+					const rect = hueRef.current.getBoundingClientRect();
+					const x = Math.max(
+						0,
+						Math.min(1, (e.clientX - rect.left) / rect.width),
+					);
+					const newH = x * 360;
+					setInternalHue(newH);
+					if (s > 0) {
+						const newHex = hsvToHex(newH, s, v);
+						onChange?.(newHex);
+					}
+				}
+			};
 
-      const handleMouseUp = () => {
-        setIsDragging(null);
-      };
+			const handleMouseUp = () => {
+				setIsDragging(null);
+			};
 
-      if (isDragging) {
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-        return () => {
-          document.removeEventListener("mousemove", handleMouseMove);
-          document.removeEventListener("mouseup", handleMouseUp);
-        };
-      }
-    }, [isDragging, displayHue, s, v, onChange]);
+			if (isDragging) {
+				document.addEventListener("mousemove", handleMouseMove);
+				document.addEventListener("mouseup", handleMouseUp);
+				return () => {
+					document.removeEventListener("mousemove", handleMouseMove);
+					document.removeEventListener("mouseup", handleMouseUp);
+				};
+			}
+		}, [isDragging, displayHue, s, v, onChange]);
 
-    const handleSaturationMouseDown = (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging("saturation");
-      const rect = saturationRef.current!.getBoundingClientRect();
-      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-      const newS = x;
-      const newV = 1 - y;
-      const newHex = hsvToHex(displayHue, newS, newV);
-      onChange?.(newHex);
-    };
+		const handleSaturationMouseDown = (e: React.MouseEvent) => {
+			e.preventDefault();
+			const saturationElement = saturationRef.current;
+			if (!saturationElement) return;
+			setIsDragging("saturation");
+			const rect = saturationElement.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			const newS = x;
+			const newV = 1 - y;
+			const newHex = hsvToHex(displayHue, newS, newV);
+			onChange?.(newHex);
+		};
 
-    const handleHueMouseDown = (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging("hue");
-      const rect = hueRef.current!.getBoundingClientRect();
-      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const newH = x * 360;
-      setInternalHue(newH);
-      if (s > 0) {
-        const newHex = hsvToHex(newH, s, v);
-        onChange?.(newHex);
-      }
-    };
+		const handleHueMouseDown = (e: React.MouseEvent) => {
+			e.preventDefault();
+			const hueElement = hueRef.current;
+			if (!hueElement) return;
+			setIsDragging("hue");
+			const rect = hueElement.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const newH = x * 360;
+			setInternalHue(newH);
+			if (s > 0) {
+				const newHex = hsvToHex(newH, s, v);
+				onChange?.(newHex);
+			}
+		};
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const hex = e.target.value.replace("#", "");
-      setInputValue(hex);
-    };
+		const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+			const hex = e.target.value.replace("#", "");
+			setInputValue(hex);
+		};
 
-    const handleInputBlur = () => {
-      onChange?.(inputValue);
-    };
+		const handleInputBlur = () => {
+			onChange?.(inputValue);
+		};
 
-    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter") {
-        onChange?.(inputValue);
-        e.currentTarget.blur();
-      }
-    };
+		const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				onChange?.(inputValue);
+				e.currentTarget.blur();
+			}
+		};
 
-    const saturationStyle = {
-      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${displayHue}, 100%, 50%))`,
-    };
+		const saturationStyle = {
+			background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${displayHue}, 100%, 50%))`,
+		};
 
-    const hueStyle = {
-      background:
-        "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
-    };
+		const hueStyle = {
+			background:
+				"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+		};
 
-    return (
-      <div className="relative">
-        <div
-          ref={ref}
-          className={cn(
-            "bg-panel-accent h-9 rounded-full flex items-center gap-2 px-[0.45rem]",
-            className
-          )}
-          {...props}
-        >
-          <div
-            ref={triggerRef}
-            className="size-6 rounded-full cursor-pointer hover:ring-2 hover:ring-white/20 transition-all"
-            style={{ backgroundColor: `#${value}` }}
-            onClick={() => {
-              if (!isOpen && triggerRef.current && containerRef?.current) {
-                const containerRect =
-                  containerRef.current.getBoundingClientRect();
-                setPickerPosition({
-                  right: window.innerWidth - containerRect.left - 8,
-                  bottom: window.innerHeight - containerRect.bottom,
-                });
-              }
-              setIsOpen(!isOpen);
-            }}
-          />
-          <div className="flex-1 flex items-center">
-            <Input
-              className="bg-transparent p-0 !ring-0 !ring-offset-0 !border-0"
-              containerClassName="w-full"
-              value={inputValue}
-              onChange={handleInputChange}
-              onBlur={handleInputBlur}
-              onKeyDown={handleInputKeyDown}
-            />
-          </div>
-        </div>
+		return (
+			<div className="relative flex-1">
+				<div
+					ref={ref}
+					className={cn(
+						"bg-panel-accent flex h-9 items-center gap-2 rounded-full px-[0.45rem]",
+						className,
+					)}
+					{...props}
+				>
+					<button
+						ref={triggerRef}
+						className="size-6 cursor-pointer rounded-full hover:ring-2 hover:ring-white/20"
+						style={{ backgroundColor: `#${value}` }}
+						type="button"
+						onClick={() => {
+							if (!isOpen && triggerRef.current && containerRef?.current) {
+								const containerRect =
+									containerRef.current.getBoundingClientRect();
+								setPickerPosition({
+									right: window.innerWidth - containerRect.left - 8,
+									bottom: window.innerHeight - containerRect.bottom,
+								});
+							}
+							setIsOpen(!isOpen);
+						}}
+					/>
+					<div className="flex flex-1 items-center">
+						<Input
+							className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0"
+							containerClassName="w-full"
+							value={inputValue}
+							onChange={handleInputChange}
+							onBlur={handleInputBlur}
+							onKeyDown={handleInputKeyDown}
+						/>
+					</div>
+				</div>
 
-        {isOpen &&
-          createPortal(
-            <div
-              ref={pickerRef}
-              className="fixed z-50 p-4 bg-popover border border-border rounded-lg shadow-lg select-none"
-              style={{
-                right: pickerPosition.right,
-                bottom: pickerPosition.bottom,
-              }}
-            >
-              <div
-                ref={saturationRef}
-                className="relative w-48 h-32 cursor-crosshair mb-3"
-                style={saturationStyle}
-                onMouseDown={handleSaturationMouseDown}
-              >
-                <ColorCircle
-                  size="sm"
-                  position={{ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }}
-                  color={`#${value}`}
-                />
-              </div>
+				{isOpen &&
+					createPortal(
+						<div
+							ref={pickerRef}
+							className="bg-popover border-border fixed z-50 rounded-lg border p-4 shadow-lg select-none"
+							style={{
+								right: pickerPosition.right,
+								bottom: pickerPosition.bottom,
+							}}
+						>
+							<button
+								ref={saturationRef}
+								className="relative mb-3 h-32 w-48 cursor-crosshair appearance-none border-0 bg-transparent p-0"
+								style={saturationStyle}
+								type="button"
+								onMouseDown={handleSaturationMouseDown}
+							>
+								<ColorCircle
+									size="sm"
+									position={{ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }}
+									color={`#${value}`}
+								/>
+							</button>
 
-              <div
-                ref={hueRef}
-                className="relative w-48 h-4 rounded-lg cursor-pointer"
-                style={hueStyle}
-                onMouseDown={handleHueMouseDown}
-              >
-                <ColorCircle
-                  size="md"
-                  position={{
-                    left: `${(displayHue / 360) * 100}%`,
-                    top: "50%",
-                  }}
-                  color={`#${value}`}
-                />
-              </div>
-            </div>,
-            document.body
-          )}
-      </div>
-    );
-  }
+							<button
+								ref={hueRef}
+								className="relative h-4 w-48 cursor-pointer rounded-lg appearance-none border-0 bg-transparent p-0"
+								style={hueStyle}
+								type="button"
+								onMouseDown={handleHueMouseDown}
+							>
+								<ColorCircle
+									size="md"
+									position={{
+										left: `${(displayHue / 360) * 100}%`,
+										top: "50%",
+									}}
+									color={`#${value}`}
+								/>
+							</button>
+						</div>,
+						document.body,
+					)}
+			</div>
+		);
+	},
 );
 ColorPicker.displayName = "ColorPicker";
 
 const ColorCircle = ({
-  size,
-  position,
-  color,
+	size,
+	position,
+	color,
 }: {
-  size: "sm" | "md";
-  position: { left: string; top: string };
-  color: string;
+	size: "sm" | "md";
+	position: { left: string; top: string };
+	color: string;
 }) => (
-  <div
-    className={`absolute border-3 border-white rounded-full shadow-lg pointer-events-none ${
-      size === "sm" ? "w-3 h-3" : "w-4 h-4"
-    }`}
-    style={{
-      left: position.left,
-      top: position.top,
-      transform: "translate(-50%, -50%)",
-      backgroundColor: color,
-    }}
-  />
+	<div
+		className={`pointer-events-none absolute rounded-full border-3 border-white shadow-lg ${
+			size === "sm" ? "size-3" : "size-4"
+		}`}
+		style={{
+			left: position.left,
+			top: position.top,
+			transform: "translate(-50%, -50%)",
+			backgroundColor: color,
+		}}
+	/>
 );
 
 export { ColorPicker };
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 887c1ab7..0f77a4ce 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,153 +1,152 @@
 "use client";
 
 import * as React from "react";
-import { DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
-
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
+	<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]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
+	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>
+	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 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
+	<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>
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"data-[selected=true]:bg-accent 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
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  );
+	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,
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
 };
diff --git a/apps/web/src/components/ui/context-menu.tsx b/apps/web/src/components/ui/context-menu.tsx
index a1a28fa6..4af92764 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/apps/web/src/components/ui/context-menu.tsx
@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
-import { Check, ChevronRight, Circle } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Tick02Icon, ArrowRightIcon, CircleIcon } from "@hugeicons/core-free-icons"
 
 const ContextMenu = ContextMenuPrimitive.Root;
 
@@ -20,196 +20,215 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const contextMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"relative flex cursor-pointer select-none items-center gap-2.5 px-4 py-1.5 last:pb-1 text-base outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "focus:bg-accent/35 focus:text-accent-foreground [&_svg]:text-muted-foreground",
+				destructive: "text-destructive focus:bg-destructive/5 focus:text-destructive [&_svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
->(({ className, inset, children, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      contextMenuItemVariants({ variant }),
-      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </ContextMenuPrimitive.SubTrigger>
+	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+		icon?: React.ReactNode;
+	}
+>(({ className, inset, children, variant = "default", icon, ...props }, ref) => (
+	<ContextMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			contextMenuItemVariants({ variant }),
+			"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{icon && <span className="size-4 shrink-0 text-muted-foreground">{icon}</span>}
+		{children}
+		<HugeiconsIcon icon={ArrowRightIcon} className="ml-auto text-muted-foreground/80" />
+	</ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+	<ContextMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground z-50 min-w-48 overflow-hidden rounded-lg border shadow-xl py-2.5",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+	React.ElementRef<typeof ContextMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-32 overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-popover text-popover-foreground z-50 min-w-48 overflow-hidden rounded-lg border shadow-xl py-2.5",
+				className,
+			)}
+			{...props}
+		/>
+	</ContextMenuPrimitive.Portal>
 ));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
->(({ className, inset, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      contextMenuItemVariants({ variant }),
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	React.ElementRef<typeof ContextMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+		icon?: React.ReactNode;
+		textRight?: string;
+	}
+>(({ className, inset, variant = "default", icon, children, textRight, ...props }, ref) => (
+	<ContextMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			contextMenuItemVariants({ variant }),
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{icon && <span className="[&_svg]:size-4 [&_svg]:shrink-0">{icon}</span>}
+		{children}
+		{textRight && (
+			<span className="ml-auto text-[0.60rem] tracking-widest text-muted-foreground/80 mb-0.5">
+				{textRight}
+			</span>
+		)}
+	</ContextMenuPrimitive.Item>
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
->(({ className, children, checked, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(contextMenuItemVariants({ variant }), "pl-8 pr-2", className)}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
+	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+		icon?: React.ReactNode;
+	}
+>(({ className, children, checked, variant = "default", icon, ...props }, ref) => (
+	<ContextMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<HugeiconsIcon icon={Tick02Icon} className="size-4" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{icon && <span className="size-4 shrink-0 text-muted-foreground">{icon}</span>}
+		{children}
+	</ContextMenuPrimitive.CheckboxItem>
 ));
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+	ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
->(({ className, children, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(contextMenuItemVariants({ variant }), "pl-8 pr-2", className)}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
+	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+		icon?: React.ReactNode;
+	}
+>(({ className, children, variant = "default", icon, ...props }, ref) => (
+	<ContextMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<HugeiconsIcon icon={CircleIcon} className="size-2 fill-current" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{icon && <span className="size-4 shrink-0 text-muted-foreground">{icon}</span>}
+		{children}
+	</ContextMenuPrimitive.RadioItem>
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	React.ElementRef<typeof ContextMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+		inset?: boolean;
+		icon?: React.ReactNode;
+	}
+>(({ className, inset, icon, children, ...props }, ref) => (
+	<ContextMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"flex items-center gap-2.5 px-4 py-1.5 text-sm font-semibold text-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{icon && <span className="size-4 shrink-0 text-muted-foreground">{icon}</span>}
+		{children}
+	</ContextMenuPrimitive.Label>
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-foreground/10", className)}
-    {...props}
-  />
+	<ContextMenuPrimitive.Separator
+		ref={ref}
+		className={cn("bg-border my-2 h-px", className)}
+		{...props}
+	/>
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground opacity-60", className)}
+			{...props}
+		/>
+	);
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
 };
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 42d0f80d..3577f796 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -3,9 +3,7 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { X } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import { ScrollArea } from "./scroll-area";
+import { cn } from "@/utils/ui";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -16,112 +14,118 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-250 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-250 backdrop-blur-sm bg-black/10",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] p-6 z-250 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
-        className
-      )}
-      onCloseAutoFocus={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-popover fixed top-[50%] left-[50%] z-250 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200",
+				className,
+			)}
+			onCloseAutoFocus={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			}}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-6 right-6 cursor-pointer opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+				<X className="size-5 text-muted-foreground" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn("flex flex-col space-y-2 text-left border-b p-6", className)}
+		{...props}
+	/>
 );
 DialogHeader.displayName = "DialogHeader";
 
+const DialogBody = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("p-6 flex flex-col gap-6", className)} {...props} />
+);
+DialogBody.displayName = "DialogBody";
+
 const DialogFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex gap-3 flex-col-reverse sm:flex-row sm:justify-end p-6 py-5 border-t",
+			className,
+		)}
+		{...props}
+	/>
 );
 DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg leading-none font-semibold tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
 };
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
deleted file mode 100644
index 9f5c7887..00000000
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-"use client";
-
-import { AspectRatio } from "@/components/ui/aspect-ratio";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { ReactNode, useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { Plus } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { DragData } from "@/types/timeline";
-
-export interface DraggableMediaItemProps {
-  name: string;
-  preview: ReactNode;
-  dragData: DragData;
-  onDragStart?: (e: React.DragEvent) => void;
-  onAddToTimeline?: (currentTime: number) => void;
-  aspectRatio?: number;
-  className?: string;
-  containerClassName?: string;
-  showPlusOnDrag?: boolean;
-  showLabel?: boolean;
-  rounded?: boolean;
-  variant?: "card" | "compact";
-  isDraggable?: boolean;
-  isHighlighted?: boolean;
-}
-
-export function DraggableMediaItem({
-  name,
-  preview,
-  dragData,
-  onDragStart,
-  onAddToTimeline,
-  aspectRatio = 16 / 9,
-  className = "",
-  containerClassName,
-  showPlusOnDrag = true,
-  showLabel = true,
-  rounded = true,
-  variant = "card",
-  isDraggable = true,
-  isHighlighted = false,
-}: DraggableMediaItemProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
-  const dragRef = useRef<HTMLDivElement>(null);
-  const currentTime = isDraggable
-    ? usePlaybackStore((state) => state.currentTime)
-    : 0;
-  const highlightClassName = "ring-2 ring-primary rounded-sm bg-primary/10";
-
-  const handleAddToTimeline = () => {
-    onAddToTimeline?.(currentTime);
-  };
-
-  const emptyImg = new window.Image();
-  emptyImg.src =
-    "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const handleDragOver = (e: DragEvent) => {
-      setDragPosition({ x: e.clientX, y: e.clientY });
-    };
-
-    document.addEventListener("dragover", handleDragOver);
-
-    return () => {
-      document.removeEventListener("dragover", handleDragOver);
-    };
-  }, [isDragging]);
-
-  const handleDragStart = (e: React.DragEvent) => {
-    e.dataTransfer.setDragImage(emptyImg, 0, 0);
-
-    // Set drag data
-    e.dataTransfer.setData(
-      "application/x-media-item",
-      JSON.stringify(dragData)
-    );
-    e.dataTransfer.effectAllowed = "copy";
-
-    // Set initial position and show custom drag preview
-    setDragPosition({ x: e.clientX, y: e.clientY });
-    setIsDragging(true);
-
-    onDragStart?.(e);
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-  };
-
-  return (
-    <>
-      {variant === "card" ? (
-        <div
-          ref={dragRef}
-          className={cn("relative group", containerClassName ?? "w-28 h-28")}
-        >
-          <div
-            className={cn(
-              "flex flex-col gap-1 p-1 h-auto w-full relative cursor-default",
-              className,
-              isHighlighted && highlightClassName
-            )}
-          >
-            <AspectRatio
-              ratio={aspectRatio}
-              className={cn(
-                "bg-panel-accent relative overflow-hidden",
-                rounded && "rounded-md",
-                isDraggable && "[&::-webkit-drag-ghost]:opacity-0" // Webkit-specific ghost hiding
-              )}
-              draggable={isDraggable}
-              onDragStart={isDraggable ? handleDragStart : undefined}
-              onDragEnd={isDraggable ? handleDragEnd : undefined}
-            >
-              {preview}
-              {!isDragging && (
-                <PlusButton
-                  className="opacity-0 group-hover:opacity-100"
-                  onClick={handleAddToTimeline}
-                />
-              )}
-            </AspectRatio>
-            {showLabel && (
-              <span
-                className="text-[0.7rem] text-muted-foreground truncate w-full text-left"
-                aria-label={name}
-                title={name}
-              >
-                {name.length > 8
-                  ? `${name.slice(0, 16)}...${name.slice(-3)}`
-                  : name}
-              </span>
-            )}
-          </div>
-        </div>
-      ) : (
-        <div
-          ref={dragRef}
-          className={cn(
-            "relative group w-full",
-            isHighlighted && highlightClassName
-          )}
-        >
-          <div
-            className={cn(
-              "h-8 flex items-center gap-3 cursor-default w-full px-1",
-              isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
-              className
-            )}
-            draggable={isDraggable}
-            onDragStart={isDraggable ? handleDragStart : undefined}
-            onDragEnd={isDraggable ? handleDragEnd : undefined}
-          >
-            <div className="w-6 h-6 flex-shrink-0 rounded-[0.35rem] overflow-hidden">
-              {preview}
-            </div>
-            <span className="text-sm truncate flex-1 w-full">{name}</span>
-          </div>
-        </div>
-      )}
-
-      {/* Custom drag preview */}
-      {isDraggable &&
-        isDragging &&
-        typeof document !== "undefined" &&
-        createPortal(
-          <div
-            className="fixed pointer-events-none z-9999"
-            style={{
-              left: dragPosition.x - 40, // Center the preview (half of 80px)
-              top: dragPosition.y - 40, // Center the preview (half of 80px)
-            }}
-          >
-            <div className="w-[80px]">
-              <AspectRatio
-                ratio={1}
-                className="relative rounded-md overflow-hidden shadow-2xl ring-3 ring-primary"
-              >
-                <div className="w-full h-full [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_img]:rounded-none">
-                  {preview}
-                </div>
-                {showPlusOnDrag && (
-                  <PlusButton
-                    onClick={handleAddToTimeline}
-                    tooltipText="Add to timeline or drag to position"
-                  />
-                )}
-              </AspectRatio>
-            </div>
-          </div>,
-          document.body
-        )}
-    </>
-  );
-}
-
-function PlusButton({
-  className,
-  onClick,
-  tooltipText,
-}: {
-  className?: string;
-  onClick?: () => void;
-  tooltipText?: string;
-}) {
-  const button = (
-    <Button
-      size="icon"
-      className={cn(
-        "absolute bottom-2 right-2 size-5 bg-background hover:bg-panel text-foreground",
-        className
-      )}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick?.();
-      }}
-      title={tooltipText}
-    >
-      <Plus className="size-4!" />
-    </Button>
-  );
-
-  if (tooltipText) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent>
-          <p>{tooltipText}</p>
-        </TooltipContent>
-      </Tooltip>
-    );
-  }
-
-  return button;
-}
diff --git a/apps/web/src/components/ui/drawer.tsx b/apps/web/src/components/ui/drawer.tsx
index 7e065e5c..d5752d62 100644
--- a/apps/web/src/components/ui/drawer.tsx
+++ b/apps/web/src/components/ui/drawer.tsx
@@ -3,16 +3,16 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
+	shouldScaleBackground = true,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
+	<DrawerPrimitive.Root
+		shouldScaleBackground={shouldScaleBackground}
+		{...props}
+	/>
 );
 Drawer.displayName = "Drawer";
 
@@ -23,96 +23,96 @@ const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+	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}
-  />
+	<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>
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
+	<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
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
+	<div
+		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+		{...props}
+	/>
 );
 DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
+	<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>
+	React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<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,
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
 };
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 823d48a3..a7736e6e 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -5,7 +5,7 @@ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -20,215 +20,215 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const dropdownMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "",
+				destructive:
+					"text-destructive data-[highlighted]:bg-destructive/5 data-[highlighted]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, inset, children, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"data-[state=open]:bg-muted data-[state=open]:text-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+	DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+	DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      onCloseAutoFocus={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      className={cn(
-        "z-50 min-w-32 overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			onCloseAutoFocus={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			}}
+			className={cn(
+				"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-2 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, inset, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, children, checked, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "pl-2 pr-8",
-      className
-    )}
-    checked={checked}
-    onSelect={(e) => {
-      e.preventDefault();
-    }}
-    {...props}
-  >
-    {children}
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-  </DropdownMenuPrimitive.CheckboxItem>
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"pr-8 pl-2",
+			className,
+		)}
+		checked={checked}
+		onSelect={(e) => {
+			e.preventDefault();
+		}}
+		{...props}
+	>
+		{children}
+		<span className="absolute right-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="size-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+	</DropdownMenuPrimitive.CheckboxItem>
 ));
 
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+	DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, children, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "pl-8 pr-2",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"pr-2 pl-8",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="size-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-3 pb-2 pt-1 text-[11px] font-bold uppercase tracking-wider text-muted-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-foreground/10", className)}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("bg-border/60 mx-1 my-2 h-px", className)}
+		{...props}
+	/>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			{...props}
+		/>
+	);
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
 };
diff --git a/apps/web/src/components/ui/editable-timecode.tsx b/apps/web/src/components/ui/editable-timecode.tsx
deleted file mode 100644
index 404831f6..00000000
--- a/apps/web/src/components/ui/editable-timecode.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";

-

-import { useState, useRef, useEffect } from "react";

-import { cn } from "@/lib/utils";

-import { formatTimeCode, parseTimeCode, TimeCode } from "@/lib/time";

-import { DEFAULT_FPS } from "@/stores/project-store";

-

-interface EditableTimecodeProps {

-  time: number;

-  duration?: number;

-  format?: TimeCode;

-  fps?: number;

-  onTimeChange?: (time: number) => void;

-  className?: string;

-  disabled?: boolean;

-}

-

-export function EditableTimecode({

-  time,

-  duration,

-  format = "HH:MM:SS:FF",

-  fps = DEFAULT_FPS,

-  onTimeChange,

-  className,

-  disabled = false,

-}: EditableTimecodeProps) {

-  const [isEditing, setIsEditing] = useState(false);

-  const [inputValue, setInputValue] = useState("");

-  const [hasError, setHasError] = useState(false);

-  const inputRef = useRef<HTMLInputElement>(null);

-  const enterPressedRef = useRef(false);

-

-  const formattedTime = formatTimeCode(time, format, fps);

-

-  const startEditing = () => {

-    if (disabled) return;

-    setIsEditing(true);

-    setInputValue(formattedTime);

-    setHasError(false);

-    enterPressedRef.current = false;

-  };

-

-  const cancelEditing = () => {

-    setIsEditing(false);

-    setInputValue("");

-    setHasError(false);

-    enterPressedRef.current = false;

-  };

-

-  const applyEdit = () => {

-    const parsedTime = parseTimeCode(inputValue, format, fps);

-

-    if (parsedTime === null) {

-      setHasError(true);

-      return;

-    }

-

-    // Clamp time to valid range

-    const clampedTime = Math.max(

-      0,

-      duration ? Math.min(duration, parsedTime) : parsedTime

-    );

-

-    onTimeChange?.(clampedTime);

-    setIsEditing(false);

-    setInputValue("");

-    setHasError(false);

-    enterPressedRef.current = false;

-  };

-

-  const handleKeyDown = (e: React.KeyboardEvent) => {

-    if (e.key === "Enter") {

-      e.preventDefault();

-      enterPressedRef.current = true;

-      applyEdit();

-    } else if (e.key === "Escape") {

-      e.preventDefault();

-      cancelEditing();

-    }

-  };

-

-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

-    setInputValue(e.target.value);

-    setHasError(false);

-  };

-

-  const handleBlur = () => {

-    // Only apply edit if Enter wasn't pressed (to avoid double processing)

-    if (!enterPressedRef.current && isEditing) {

-      applyEdit();

-    }

-  };

-

-  // Focus input when entering edit mode

-  useEffect(() => {

-    if (isEditing && inputRef.current) {

-      inputRef.current.focus();

-      inputRef.current.select();

-    }

-  }, [isEditing]);

-

-  if (isEditing) {

-    return (

-      <input

-        ref={inputRef}

-        type="text"

-        value={inputValue}

-        onChange={handleInputChange}

-        onKeyDown={handleKeyDown}

-        onBlur={handleBlur}

-        className={cn(

-          "text-xs font-mono bg-transparent border-none outline-none",

-          "focus:bg-background focus:border focus:border-primary focus:px-1 focus:rounded",

-          "tabular-nums text-primary",

-          hasError && "text-destructive focus:border-destructive",

-          className

-        )}

-        style={{ width: `${formattedTime.length + 1}ch` }}

-        placeholder={formattedTime}

-      />

-    );

-  }

-

-  return (

-    <span

-      onClick={startEditing}

-      className={cn(

-        "text-xs font-mono tabular-nums text-primary cursor-pointer",

-        "hover:bg-muted/50 hover:rounded px-1 -mx-1 transition-colors",

-        disabled && "cursor-default hover:bg-transparent",

-        className

-      )}

-      title={disabled ? undefined : "Click to edit time"}

-    >

-      {formattedTime}

-    </span>

-  );

-}

diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 7bb11274..1806b48a 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -1,40 +1,42 @@
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
-import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
 
 interface FontPickerProps {
-  defaultValue?: FontFamily;
-  onValueChange?: (value: FontFamily) => void;
-  className?: string;
+	defaultValue?: FontFamily;
+	onValueChange?: (value: FontFamily) => void;
+	className?: string;
 }
 
 export function FontPicker({
-  defaultValue,
-  onValueChange,
-  className,
+	defaultValue,
+	onValueChange,
+	className,
 }: FontPickerProps) {
-  return (
-    <Select defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger className={`w-full bg-panel-accent h-8 text-xs ${className || ""}`}>
-        <SelectValue placeholder="Select a font" />
-      </SelectTrigger>
-      <SelectContent>
-        {FONT_OPTIONS.map((font) => (
-          <SelectItem
-            key={font.value}
-            value={font.value}
-            className="text-xs"
-            style={{ fontFamily: font.value }}
-          >
-            {font.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
+	return (
+		<Select defaultValue={defaultValue} onValueChange={onValueChange}>
+			<SelectTrigger
+				className={`bg-panel-accent h-9 w-full text-base ${className || ""}`}
+			>
+				<SelectValue placeholder="Select a font" className="text-sm" />
+			</SelectTrigger>
+			<SelectContent>
+				{FONT_OPTIONS.map((font) => (
+					<SelectItem
+						key={font.value}
+						value={font.value}
+						className="text-sn"
+						style={{ fontFamily: font.value }}
+					>
+						{font.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
 }
diff --git a/apps/web/src/components/ui/form.tsx b/apps/web/src/components/ui/form.tsx
index cab151e1..a6a18752 100644
--- a/apps/web/src/components/ui/form.tsx
+++ b/apps/web/src/components/ui/form.tsx
@@ -1,177 +1,177 @@
 "use client";
 
 import * as React from "react";
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
+import { type Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
 
 import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
 } from "react-hook-form";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { Label } from "./label";
 
 const Form = FormProvider;
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName;
+	name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+	{} as FormFieldContextValue,
 );
 
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
 };
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+	const fieldState = getFieldState(fieldContext.name, formState);
 
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
 
-  const { id } = itemContext;
+	const { id } = itemContext;
 
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
 };
 
 type FormItemContextValue = {
-  id: string;
+	id: string;
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+	{} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId();
+	const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  );
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
 });
 FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
+	const { error, formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && "text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
 });
 FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
-  React.ElementRef<typeof SlotPrimitive.Slot>,
-  React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
+	React.ElementRef<typeof SlotPrimitive.Slot>,
+	React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
 
-  return (
-    <SlotPrimitive.Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
+	return (
+		<SlotPrimitive.Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={
+				error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
 });
 FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+	const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
+	return (
+		<p
+			ref={ref}
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-[0.8rem]", className)}
+			{...props}
+		/>
+	);
 });
 FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
+	if (!body) {
+		return null;
+	}
 
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
+	return (
+		<p
+			ref={ref}
+			id={formMessageId}
+			className={cn("text-destructive text-[0.8rem] font-medium", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
 });
 FormMessage.displayName = "FormMessage";
 
 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
 };
diff --git a/apps/web/src/components/ui/hover-card.tsx b/apps/web/src/components/ui/hover-card.tsx
index 92700e09..6f2c34e1 100644
--- a/apps/web/src/components/ui/hover-card.tsx
+++ b/apps/web/src/components/ui/hover-card.tsx
@@ -3,26 +3,26 @@
 import * as React from "react";
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const HoverCard = HoverCardPrimitive.Root;
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
+			className,
+		)}
+		{...props}
+	/>
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
deleted file mode 100644
index 7a64be18..00000000
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import type { BackgroundType } from "@/types/editor";
-
-interface ImageTimelineTreatmentProps {
-  src: string;
-  alt: string;
-  targetAspectRatio?: number; // Default to 16:9 for video
-  className?: string;
-  backgroundType?: BackgroundType;
-  backgroundColor?: string;
-}
-
-export function ImageTimelineTreatment({
-  src,
-  alt,
-  targetAspectRatio = 16 / 9,
-  className,
-  backgroundType = "blur",
-  backgroundColor = "#000000",
-}: ImageTimelineTreatmentProps) {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageDimensions, setImageDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget;
-    setImageDimensions({
-      width: img.naturalWidth,
-      height: img.naturalHeight,
-    });
-    setImageLoaded(true);
-  };
-
-  const imageAspectRatio = imageDimensions
-    ? imageDimensions.width / imageDimensions.height
-    : 1;
-
-  const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio;
-
-  return (
-    <div
-      className={cn("relative overflow-hidden", className)}
-      style={{ aspectRatio: targetAspectRatio }}
-    >
-      {/* Background Layer */}
-      {needsAspectRatioTreatment && imageLoaded && (
-        <>
-          {backgroundType === "blur" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover filter blur-xl scale-110 opacity-60"
-                aria-hidden="true"
-              />
-              <div className="absolute inset-0 bg-black/20" />
-            </div>
-          )}
-
-          {backgroundType === "mirror" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover opacity-30"
-                aria-hidden="true"
-              />
-            </div>
-          )}
-
-          {backgroundType === "color" && (
-            <div className="absolute inset-0" style={{ backgroundColor }} />
-          )}
-        </>
-      )}
-
-      {/* Main Image Layer */}
-      <div className="absolute inset-0">
-        <img
-          src={src}
-          alt={alt}
-          className="w-full h-full object-cover"
-          onLoad={handleImageLoad}
-        />
-      </div>
-
-      {/* Loading state */}
-      {!imageLoaded && (
-        <div className="absolute inset-0 flex items-center justify-center bg-muted/30">
-          <div className="animate-pulse text-xs text-muted-foreground">
-            Loading...
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
index 0d2cc002..ec71f96a 100644
--- a/apps/web/src/components/ui/input-otp.tsx
+++ b/apps/web/src/components/ui/input-otp.tsx
@@ -4,71 +4,71 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+	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}
-  />
+	<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">
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center flex-1 gap-2", className)}
-    {...props}
-  />
+	<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 }
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  );
+	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">
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
+	<div ref={ref} role="separator" {...props}>
+		<Minus />
+	</div>
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
index cae9f8c9..392ab3c3 100644
--- a/apps/web/src/components/ui/input-with-back.tsx
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -7,82 +7,82 @@ import { motion } from "motion/react";
 import { useState, useEffect } from "react";

 

 interface InputWithBackProps {

-  isExpanded: boolean;

-  setIsExpanded: (isExpanded: boolean) => void;

-  placeholder?: string;

-  value?: string;

-  onChange?: (value: string) => void;

-  disableAnimation?: boolean;

+	isExpanded: boolean;

+	setIsExpanded: (isExpanded: boolean) => void;

+	placeholder?: string;

+	value?: string;

+	onChange?: (value: string) => void;

+	disableAnimation?: boolean;

 }

 

 export function InputWithBack({

-  isExpanded,

-  setIsExpanded,

-  placeholder = "Search anything",

-  value,

-  onChange,

-  disableAnimation = false,

+	isExpanded,

+	setIsExpanded,

+	placeholder = "Search anything",

+	value,

+	onChange,

+	disableAnimation = false,

 }: InputWithBackProps) {

-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);

-  const [buttonOffset, setButtonOffset] = useState(-60);

+	const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);

+	const [buttonOffset, setButtonOffset] = useState(-60);

 

-  const smoothTransition = {

-    duration: disableAnimation ? 0 : 0.35,

-    ease: [0.25, 0.1, 0.25, 1] as const,

-  };

+	const smoothTransition = {

+		duration: disableAnimation ? 0 : 0.35,

+		ease: [0.25, 0.1, 0.25, 1] as const,

+	};

 

-  useEffect(() => {

-    if (containerRef) {

-      const rect = containerRef.getBoundingClientRect();

-      setButtonOffset(-rect.left - 48);

-    }

-  }, [containerRef]);

+	useEffect(() => {

+		if (containerRef) {

+			const rect = containerRef.getBoundingClientRect();

+			setButtonOffset(-rect.left - 48);

+		}

+	}, [containerRef]);

 

-  return (

-    <div ref={setContainerRef} className="relative w-full">

-      <motion.div

-        className="absolute left-0 top-1/2 -translate-y-1/2 cursor-pointer hover:opacity-75 transition-opacity z-10"

-        initial={{

-          x: isExpanded ? 0 : buttonOffset,

-          opacity: isExpanded ? 1 : 0.5,

-        }}

-        animate={{

-          x: isExpanded ? 0 : buttonOffset,

-          opacity: isExpanded ? 1 : 0.5,

-        }}

-        transition={smoothTransition}

-        onClick={() => setIsExpanded(!isExpanded)}

-      >

-        <Button

-          variant="outline"

-          className="!size-9 rounded-full bg-panel-accent"

-        >

-          <ArrowLeft />

-        </Button>

-      </motion.div>

-      <div

-        className="relative flex-1"

-        style={{ marginLeft: "0px", paddingLeft: "0px" }}

-      >

-        <motion.div

-          className="relative"

-          initial={{

-            marginLeft: isExpanded ? 50 : 0,

-          }}

-          animate={{

-            marginLeft: isExpanded ? 50 : 0,

-          }}

-          transition={smoothTransition}

-        >

-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />

-          <Input

-            placeholder={placeholder}

-            className="pl-9 bg-panel-accent w-full"

-            value={value}

-            onChange={(e) => onChange?.(e.target.value)}

-          />

-        </motion.div>

-      </div>

-    </div>

-  );

+	return (

+		<div ref={setContainerRef} className="relative w-full">

+			<motion.div

+				className="absolute top-1/2 left-0 z-10 -translate-y-1/2 cursor-pointer hover:opacity-75"

+				initial={{

+					x: isExpanded ? 0 : buttonOffset,

+					opacity: isExpanded ? 1 : 0.5,

+				}}

+				animate={{

+					x: isExpanded ? 0 : buttonOffset,

+					opacity: isExpanded ? 1 : 0.5,

+				}}

+				transition={smoothTransition}

+				onClick={() => setIsExpanded(!isExpanded)}

+			>

+				<Button

+					variant="outline"

+					className="bg-panel-accent !size-9 rounded-full"

+				>

+					<ArrowLeft />

+				</Button>

+			</motion.div>

+			<div

+				className="relative flex-1"

+				style={{ marginLeft: "0px", paddingLeft: "0px" }}

+			>

+				<motion.div

+					className="relative"

+					initial={{

+						marginLeft: isExpanded ? 50 : 0,

+					}}

+					animate={{

+						marginLeft: isExpanded ? 50 : 0,

+					}}

+					transition={smoothTransition}

+				>

+					<Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />

+					<Input

+						placeholder={placeholder}

+						className="bg-panel-accent w-full pl-9"

+						value={value}

+						onChange={(e) => onChange?.(e.target.value)}

+					/>

+				</motion.div>

+			</div>

+		</div>

+	);

 }

diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 8f195a50..9be4bca2 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,113 +1,142 @@
 "use client";
 
 import { Eye, EyeOff, X } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/utils/ui";
 import { Button } from "./button";
-import { forwardRef, ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
 import { useState } from "react";
 
-interface InputProps extends ComponentProps<"input"> {
-  showPassword?: boolean;
-  onShowPasswordChange?: (show: boolean) => void;
-  showClearIcon?: boolean;
-  onClear?: () => void;
-  containerClassName?: string;
+const inputVariants = cva(
+	"file:text-foreground placeholder:text-muted-foreground border-border bg-background flex w-full min-w-0 rounded-md border shadow-xs outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-4 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "selection:bg-primary selection:text-primary-foreground focus-visible:border-primary focus-visible:ring-primary/10",
+				destructive: "selection:bg-destructive selection:text-destructive-foreground focus-visible:border-destructive focus-visible:ring-destructive/10",
+			},
+			size: {
+				default:
+					"h-9 px-3 py-1 text-base file:h-7 file:text-sm md:text-sm",
+				sm: "h-8 px-3 text-xs file:h-6 file:text-xs",
+				lg: "h-10 px-4 text-base file:h-8 file:text-sm md:text-sm",
+			},
+		},
+		defaultVariants: {
+			size: "default",
+			variant: "default",
+		},
+	},
+);
+
+interface InputProps
+	extends Omit<ComponentProps<"input">, "size">,
+		VariantProps<typeof inputVariants> {
+	showPassword?: boolean;
+	onShowPasswordChange?: (show: boolean) => void;
+	showClearIcon?: boolean;
+	onClear?: () => void;
+	containerClassName?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type,
-      containerClassName,
-      showPassword,
-      onShowPasswordChange,
-      showClearIcon,
-      onClear,
-      value,
-      onFocus,
-      onBlur,
-      ...props
-    },
-    ref
-  ) => {
-    const [isFocused, setIsFocused] = useState(false);
+	(
+		{
+			className,
+			type,
+			size,
+			variant,
+			containerClassName,
+			showPassword,
+			onShowPasswordChange,
+			showClearIcon,
+			onClear,
+			value,
+			onFocus,
+			onBlur,
+			...props
+		},
+		ref,
+	) => {
+		const [isFocused, setIsFocused] = useState(false);
 
-    const isPassword = type === "password";
-    const showPasswordToggle = isPassword && onShowPasswordChange;
-    const showClear =
-      showClearIcon &&
-      onClear &&
-      value &&
-      String(value).length > 0 &&
-      isFocused;
-    const inputType = isPassword && showPassword ? "text" : type;
+		const isPassword = type === "password";
+		const showPasswordToggle = isPassword && onShowPasswordChange;
+		const showClear =
+			showClearIcon &&
+			onClear &&
+			value &&
+			String(value).length > 0 &&
+			isFocused;
+		const inputType = isPassword && showPassword ? "text" : type;
 
-    const hasIcons = showPasswordToggle || showClear;
-    const iconCount = Number(showPasswordToggle) + Number(showClear);
-    const paddingRight =
-      iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
+		const hasIcons = showPasswordToggle || showClear;
+		const iconCount = Number(showPasswordToggle) + Number(showClear);
+		const paddingRight =
+			iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
 
-    return (
-      <div className={cn(hasIcons ? "relative w-full" : "", containerClassName)}>
-        <input
-          type={inputType}
-          className={cn(
-            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-accent/50 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
-            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            paddingRight,
-            className
-          )}
-          ref={ref}
-          value={value}
-          onFocus={(e) => {
-            setIsFocused(true);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setIsFocused(false);
-            onBlur?.(e);
-          }}
-          {...props}
-        />
-        {showClear && (
-          <Button
-            type="button"
-            variant="text"
-            size="icon"
-            onMouseDown={(e) => {
-              e.preventDefault();
-              onClear?.();
-            }}
-            className="absolute right-0 top-0 h-full px-3 text-muted-foreground !opacity-100"
-            aria-label="Clear input"
-          >
-            <X className="!size-[0.85]" />
-          </Button>
-        )}
-        {showPasswordToggle && (
-          <Button
-            type="button"
-            variant="text"
-            size="icon"
-            onClick={() => onShowPasswordChange?.(!showPassword)}
-            className={cn(
-              "absolute top-0 h-full px-3 text-muted-foreground hover:text-foreground",
-              showClear ? "right-10" : "right-0"
-            )}
-            aria-label={showPassword ? "Hide password" : "Show password"}
-          >
-            {showPassword ? (
-              <Eye className="h-4 w-4" />
-            ) : (
-              <EyeOff className="h-4 w-4" />
-            )}
-          </Button>
-        )}
-      </div>
-    );
-  }
+		return (
+			<div
+				className={cn(hasIcons ? "relative w-full" : "", containerClassName)}
+			>
+				<input
+					type={inputType}
+					className={cn(
+						inputVariants({
+							size,
+							className: cn(paddingRight, className),
+							variant,
+						}),
+					)}
+					ref={ref}
+					value={value}
+					onFocus={(e) => {
+						setIsFocused(true);
+						onFocus?.(e);
+					}}
+					onBlur={(e) => {
+						setIsFocused(false);
+						onBlur?.(e);
+					}}
+					{...props}
+				/>
+				{showClear && (
+					<Button
+						type="button"
+						variant="text"
+						size="icon"
+						onMouseDown={(e) => {
+							e.preventDefault();
+							onClear?.();
+						}}
+						className="text-muted-foreground absolute top-0 right-0 h-full px-3 !opacity-100"
+						aria-label="Clear input"
+					>
+						<X className="!size-[0.85]" />
+					</Button>
+				)}
+				{showPasswordToggle && (
+					<Button
+						type="button"
+						variant="text"
+						size="icon"
+						onClick={() => onShowPasswordChange?.(!showPassword)}
+						className={cn(
+							"text-muted-foreground hover:text-foreground absolute top-0 h-full px-3",
+							showClear ? "right-10" : "right-0",
+						)}
+						aria-label={showPassword ? "Hide password" : "Show password"}
+					>
+						{showPassword ? (
+							<Eye className="size-4" />
+						) : (
+							<EyeOff className="size-4" />
+						)}
+					</Button>
+				)}
+			</div>
+		);
+	},
 );
 Input.displayName = "Input";
 
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 877af15b..0ea7be03 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -4,22 +4,22 @@ import * as React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	"text-sm text-muted-foreground font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+		VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/menubar.tsx b/apps/web/src/components/ui/menubar.tsx
index 96e66c8a..17a93839 100644
--- a/apps/web/src/components/ui/menubar.tsx
+++ b/apps/web/src/components/ui/menubar.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { Menubar as MenubarPrimitive } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const MenubarMenu = MenubarPrimitive.Menu;
 
@@ -17,220 +17,220 @@ const MenubarSub = MenubarPrimitive.Sub;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
 const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+	React.ElementRef<typeof MenubarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs",
-      className
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+	React.ElementRef<typeof MenubarPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden select-none",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
+	<MenubarPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto size-4" />
+	</MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+	React.ElementRef<typeof MenubarPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+	React.ElementRef<typeof MenubarPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 >(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
+	(
+		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+		ref,
+	) => (
+		<MenubarPrimitive.Portal>
+			<MenubarPrimitive.Content
+				ref={ref}
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPrimitive.Portal>
+	),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Item
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
+	<MenubarPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<Check className="size-4" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.CheckboxItem>
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
+	<MenubarPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex size-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<Circle className="size-4 fill-current" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.RadioItem>
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+	React.ElementRef<typeof MenubarPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
+	<MenubarPrimitive.Separator
+		ref={ref}
+		className={cn("bg-muted -mx-1 my-1 h-px", className)}
+		{...props}
+	/>
 ));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
+	Menubar,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarItem,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarPortal,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarGroup,
+	MenubarSub,
+	MenubarShortcut,
 };
diff --git a/apps/web/src/components/ui/navigation-menu.tsx b/apps/web/src/components/ui/navigation-menu.tsx
index 288b5d88..f619d575 100644
--- a/apps/web/src/components/ui/navigation-menu.tsx
+++ b/apps/web/src/components/ui/navigation-menu.tsx
@@ -3,126 +3,126 @@ import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
+	<NavigationMenuPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuViewport />
+	</NavigationMenuPrimitive.Root>
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
+	<NavigationMenuPrimitive.List
+		ref={ref}
+		className={cn(
+			"group flex flex-1 list-none items-center justify-center space-x-1",
+			className,
+		)}
+		{...props}
+	/>
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50"
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
 const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
+	<NavigationMenuPrimitive.Trigger
+		ref={ref}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
+		{...props}
+	>
+		{children}{" "}
+		<ChevronDown
+			className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    )}
-    {...props}
-  />
+	<NavigationMenuPrimitive.Content
+		ref={ref}
+		className={cn(
+			"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto",
+			className,
+		)}
+		{...props}
+	/>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
+	<div className={cn("absolute top-full left-0 flex justify-center")}>
+		<NavigationMenuPrimitive.Viewport
+			className={cn(
+				"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	</div>
 ));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName;
+	NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
+	<NavigationMenuPrimitive.Indicator
+		ref={ref}
+		className={cn(
+			"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+			className,
+		)}
+		{...props}
+	>
+		<div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
+	</NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName;
+	NavigationMenuPrimitive.Indicator.displayName;
 
 export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuContent,
+	NavigationMenuTrigger,
+	NavigationMenuLink,
+	NavigationMenuIndicator,
+	NavigationMenuViewport,
 };
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index 61766cec..96eec969 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -1,117 +1,117 @@
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "../../lib/utils";
-import { ButtonProps, buttonVariants } from "./button";
+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}
-  />
+	<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">
+	HTMLUListElement,
+	React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
+	<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">
+	HTMLLIElement,
+	React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
+	<li ref={ref} className={cn("", className)} {...props} />
 ));
 PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
-  isActive?: boolean;
+	isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
+	React.ComponentProps<"a">;
 
 const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
+	className,
+	isActive,
+	size = "icon",
+	...props
 }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "text",
-        size,
-      }),
-      className
-    )}
-    {...props}
-  />
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "text",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
 );
 PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
-  className,
-  ...props
+	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="h-4 w-4" />
-    <span>Previous</span>
-  </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
+	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="h-4 w-4" />
-  </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
+	className,
+	...props
 }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </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,
+	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
index ca85df8f..1d0eeb07 100644
--- a/apps/web/src/components/ui/phone-input.tsx
+++ b/apps/web/src/components/ui/phone-input.tsx
@@ -5,163 +5,163 @@ import flags from "react-phone-number-input/flags";
 
 import { Button } from "./button";
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
+	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 "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 type PhoneInputProps = Omit<
-  React.ComponentProps<"input">,
-  "onChange" | "value" | "ref"
+	React.ComponentProps<"input">,
+	"onChange" | "value" | "ref"
 > &
-  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
-    onChange?: (value: RPNInput.Value) => void;
-  };
+	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}
-        />
-      );
-    }
-  );
+	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">
+	HTMLInputElement,
+	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-  <Input
-    className={cn("rounded-e-lg rounded-s-none", className)}
-    {...props}
-    ref={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;
+	disabled?: boolean;
+	value: RPNInput.Country;
+	options: CountryEntry[];
+	onChange: (country: RPNInput.Country) => void;
 };
 
 const CountrySelect = ({
-  disabled,
-  value: selectedCountry,
-  options: countryList,
-  onChange,
+	disabled,
+	value: selectedCountry,
+	options: countryList,
+	onChange,
 }: CountrySelectProps) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          className="flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10"
-          disabled={disabled}
-        >
-          <FlagComponent
-            country={selectedCountry}
-            countryName={selectedCountry}
-          />
-          <ChevronsUpDown
-            className={cn(
-              "-mr-2 size-4 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>
-  );
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					type="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;
+	selectedCountry: RPNInput.Country;
+	onChange: (country: RPNInput.Country) => void;
 }
 
 const CountrySelectOption = ({
-  country,
-  countryName,
-  selectedCountry,
-  onChange,
+	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-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
-      <CheckIcon
-        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
-      />
-    </CommandItem>
-  );
+	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];
+	const Flag = flags[country];
 
-  return (
-    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full">
-      {Flag && <Flag title={countryName} />}
-    </span>
-  );
+	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/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 406ff8eb..34738303 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Popover = PopoverPrimitive.Root;
 
@@ -12,21 +12,21 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index 6b785a58..8bf5e939 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -3,25 +3,25 @@
 import * as React from "react";
 import { Progress as ProgressPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-accent",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-foreground transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"bg-accent relative h-2 w-full overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="bg-primary size-full flex-1"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/prose.tsx b/apps/web/src/components/ui/prose.tsx
index c25a5a65..7586344c 100644
--- a/apps/web/src/components/ui/prose.tsx
+++ b/apps/web/src/components/ui/prose.tsx
@@ -1,22 +1,22 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/utils/ui";
 import type React from "react";
 
 type ProseProps = React.HTMLAttributes<HTMLElement> & {
-  as?: "article";
-  html: string;
+	as?: "article";
+	html: string;
 };
 
 function Prose({ children, html, className }: ProseProps) {
-  return (
-    <article
-      className={cn(
-        "prose prose-h2:font-semibold max-w-none prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify dark:prose-invert mx-auto",
-        className
-      )}
-    >
-      {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
-    </article>
-  );
+	return (
+		<article
+			className={cn(
+				"prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify dark:prose-invert mx-auto max-w-none",
+				className,
+			)}
+		>
+			{html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
+		</article>
+	);
 }
 
 export default Prose;
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index 859b8b5f..fe2045dc 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -4,40 +4,40 @@ import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { Circle } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn("grid gap-2", className)}
+			{...props}
+			ref={ref}
+		/>
+	);
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-3.5 w-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				"border-primary text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow-sm focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="fill-primary size-3.5" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
diff --git a/apps/web/src/components/ui/react-markdown-wrapper.tsx b/apps/web/src/components/ui/react-markdown-wrapper.tsx
new file mode 100644
index 00000000..181ae8ac
--- /dev/null
+++ b/apps/web/src/components/ui/react-markdown-wrapper.tsx
@@ -0,0 +1,26 @@
+import ReactMarkdown from "react-markdown";
+import { cn } from "@/utils/ui";
+
+export function ReactMarkdownWrapper({ children }: { children: string }) {
+	return (
+		<ReactMarkdown
+			components={{
+				a: ({ className: linkClassName, children, ...props }) => (
+					<a
+						className={cn("text-primary hover:underline", linkClassName)}
+						target="_blank"
+						rel="noopener noreferrer"
+						{...props}
+					>
+						{children}
+					</a>
+				),
+				strong: ({ children }) => (
+					<strong className="text-foreground font-semibold">{children}</strong>
+				),
+			}}
+		>
+			{children}
+		</ReactMarkdown>
+	);
+}
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index fc9d8b81..9287797d 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -2,37 +2,37 @@
 
 import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const ResizablePanelGroup = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
+	<ResizablePrimitive.PanelGroup
+		className={cn(
+			"flex size-full data-[panel-group-direction=vertical]:flex-col",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
+	withHandle,
+	className,
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
+	withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  />
+	<ResizablePrimitive.PanelResizeHandle
+		className={cn(
+			"focus-visible:ring-ring relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 1fc227b0..9019fae5 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -1,17 +1,17 @@
 import * as React from "react";
-import { cn } from "@/lib/utils";
+import { cn } from "@/utils/ui";
 
 const ScrollArea = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("overflow-auto scrollbar-thin", className)}
-    {...props}
-  >
-    {children}
-  </div>
+	<div
+		ref={ref}
+		className={cn("scrollbar-thin overflow-auto", className)}
+		{...props}
+	>
+		{children}
+	</div>
 ));
 ScrollArea.displayName = "ScrollArea";
 
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 53ca27cb..79462d4a 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -5,7 +5,7 @@ import { Select as SelectPrimitive } from "radix-ui";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Select = SelectPrimitive.Root;
 
@@ -14,165 +14,166 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const selectItemVariants = cva(
-  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "",
+				destructive: "text-destructive data-[highlighted]:bg-destructive/5 data-[highlighted]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex gap-1 h-7 cursor-pointer w-auto items-center justify-between whitespace-nowrap rounded-md bg-accent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-3 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-7 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"focus:border-primary focus:ring-4 focus:ring-primary/10 border-transparent transition-none",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="size-3 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUp className="size-4" />
+	</SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDown className="size-4" />
+	</SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+	SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      onCloseAutoFocus={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+			"bg-popover text-popover-foreground z-50 max-h-96 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
+				className,
+			)}
+			position={position}
+			onCloseAutoFocus={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					position === "popper" &&
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
 ));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-3 pb-2 pt-1 text-[11px] font-bold uppercase tracking-wider text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-    variant?: VariantProps<typeof selectItemVariants>["variant"];
-  }
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+		variant?: VariantProps<typeof selectItemVariants>["variant"];
+	}
 >(({ className, children, variant = "default", ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(selectItemVariants({ variant }), className)}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(selectItemVariants({ variant }), "pr-8 pl-2", className)}
+		{...props}
+	>
+		<span className="absolute right-2 flex size-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="size-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-foreground/10", className)}
-    {...props}
-  />
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("bg-border/60 mx-1 my-2 h-px", className)}
+		{...props}
+	/>
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
 };
diff --git a/apps/web/src/components/ui/separator.tsx b/apps/web/src/components/ui/separator.tsx
index f0040a52..f3f93ad7 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/apps/web/src/components/ui/separator.tsx
@@ -3,28 +3,28 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/utils/ui";
 
 const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
-      )}
-      {...props}
-    />
-  )
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0",
+				orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+				className,
+			)}
+			{...props}
+		/>
+	),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index f97bd438..3155787d 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -5,7 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -16,129 +16,129 @@ const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-200 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
+	<SheetPrimitive.Overlay
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-200 bg-black/50",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-250 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
+	"fixed z-250 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
 );
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      onOpenAutoFocus={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      {...props}
-    >
-      <SheetPrimitive.Close className="absolute cursor-pointer right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="size-5" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content
+			ref={ref}
+			className={cn(sheetVariants({ side }), className)}
+			onOpenAutoFocus={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+			{...props}
+		>
+			<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+				<X className="size-5" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+			{children}
+		</SheetPrimitive.Content>
+	</SheetPortal>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
 );
 SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4",
+			className,
+		)}
+		{...props}
+	/>
 );
 SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
+	<SheetPrimitive.Title
+		ref={ref}
+		className={cn("text-foreground text-lg font-semibold", className)}
+		{...props}
+	/>
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
+	Sheet,
+	SheetPortal,
+	SheetOverlay,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
 };
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index 819116c3..3ac9d93a 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -1,763 +1,725 @@
 "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 { Slot as SlotPrimitive } from "radix-ui";
-import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
-
-import { useIsMobile } from "../../hooks/use-mobile";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Separator } from "./separator";
-import { Sheet, SheetContent, SheetTitle } from "./sheet";
-import { Skeleton } from "./skeleton";
+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 "./tooltip";
+	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_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 SidebarContext = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
+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<SidebarContext | null>(null);
+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.");
-  }
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
 
-  return context;
+	return context;
 }
 
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
+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 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]
-    );
+			// 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]);
+	// 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();
-        }
-      };
+	// 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]);
+		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";
+	// 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<SidebarContext>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    );
+	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
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    );
-  }
-);
-SidebarProvider.displayName = "SidebarProvider";
+	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>
+	);
+}
 
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+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
-          className={cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
+	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-mobile="true"
-            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
+	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
-        ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "duration-200 relative h-full w-(--sidebar-width) bg-transparent transition-[width] 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
-          className={cn(
-            "duration-200 fixed h-[calc(100vh-4rem)] top-16 z-10 hidden w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
-            side === "left"
-              ? "left-0 border-r group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 border-l group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            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)",
-            className
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
+	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>
+	);
+}
 
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="text"
-      size="icon"
-      className={cn("h-8 w-8", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
 
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 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",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-SidebarRail.displayName = "SidebarRail";
+	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}
+		/>
+	);
+}
 
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInset.displayName = "SidebarInset";
+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}
+		/>
+	);
+}
 
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInput.displayName = "SidebarInput";
+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}
+		/>
+	);
+}
 
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarHeader.displayName = "SidebarHeader";
+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}
+		/>
+	);
+}
 
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarFooter.displayName = "SidebarFooter";
+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}
+		/>
+	);
+}
 
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  );
-});
-SidebarSeparator.displayName = "SidebarSeparator";
+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}
+		/>
+	);
+}
 
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      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}
-    />
-  );
-});
-SidebarContent.displayName = "SidebarContent";
+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}
+		/>
+	);
+}
 
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarGroup.displayName = "SidebarGroup";
+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}
+		/>
+	);
+}
 
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "div";
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
 
-  return (
-    <Comp
-      ref={ref as any}
-      data-sidebar="group-label"
-      className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] 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}
-    />
-  );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
+	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}
+		/>
+	);
+}
 
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button";
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      ref={ref as any}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground 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}
-    />
-  );
-});
-SidebarGroupAction.displayName = "SidebarGroupAction";
+	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}
+		/>
+	);
+}
 
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-));
-SidebarGroupContent.displayName = "SidebarGroupContent";
+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}
+		/>
+	);
+}
 
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-));
-SidebarMenu.displayName = "SidebarMenu";
+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}
+		/>
+	);
+}
 
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-));
-SidebarMenuItem.displayName = "SidebarMenuItem";
+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_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_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",
-    },
-  }
+	"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",
+		},
+	},
 );
 
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button";
-    const { isMobile, state } = useSidebar();
+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
-        ref={ref as any}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    );
+	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 (!tooltip) {
+		return button;
+	}
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
 
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    );
-  }
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
+}
 
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button";
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      ref={ref as any}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>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 &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
+	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}
+		/>
+	);
+}
 
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-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}
-  />
-));
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
+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}
+		/>
+	);
+}
 
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+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
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 flex-1 max-w-(--skeleton-width)"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+	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>
+	);
+}
 
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-));
-SidebarMenuSub.displayName = "SidebarMenuSub";
+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}
+		/>
+	);
+}
 
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+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}
+		/>
+	);
+}
 
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a";
+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
-      ref={ref as any}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "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}
-    />
-  );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+	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,
+	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/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
index 4525c3a0..bf59fec2 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -1,15 +1,15 @@
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 function Skeleton({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
 }
 
 export { Skeleton };
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index d4afdd06..994159a1 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -3,25 +3,25 @@
 import * as React from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none items-center select-none",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+			<SliderPrimitive.Range className="bg-primary absolute h-full" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
index 13694b43..4bae2fad 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -6,30 +6,30 @@ import { Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+	const { theme = "system" } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      position="top-center"
-      offset={20}
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      expand={false}
-      richColors
-      {...props}
-    />
-  );
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			position="top-center"
+			offset={20}
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			expand={false}
+			richColors
+			{...props}
+		/>
+	);
 };
 
 export { Toaster };
diff --git a/apps/web/src/components/ui/spinner.tsx b/apps/web/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..a46792f7
--- /dev/null
+++ b/apps/web/src/components/ui/spinner.tsx
@@ -0,0 +1,17 @@
+import { HugeiconsIcon, type HugeiconsIconProps } from "@hugeicons/react";
+import { Loading03Icon } from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
+
+function Spinner({ className, ...props }: Omit<HugeiconsIconProps, "icon">) {
+  return (
+    <HugeiconsIcon
+      icon={Loading03Icon}
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx
index ca3b518c..26e54cab 100644
--- a/apps/web/src/components/ui/split-button.tsx
+++ b/apps/web/src/components/ui/split-button.tsx
@@ -1,89 +1,89 @@
-import { Button, ButtonProps } from "@/components/ui/button";

+import { Button, type ButtonProps } from "@/components/ui/button";

 import { Separator } from "@/components/ui/separator";

-import { ReactNode, forwardRef } from "react";

-import { cn } from "@/lib/utils";

+import { type ReactNode, forwardRef } from "react";

+import { cn } from "@/utils/ui";

 

 interface SplitButtonProps {

-  children: ReactNode;

-  className?: string;

+	children: ReactNode;

+	className?: string;

 }

 

 interface SplitButtonSideProps extends Omit<ButtonProps, "variant" | "size"> {

-  children: ReactNode;

+	children: ReactNode;

 }

 

 const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(

-  ({ children, className, ...props }, ref) => {

-    return (

-      <div

-        ref={ref}

-        className={cn(

-          "inline-flex rounded-full h-7 border border-input bg-panel-accent overflow-hidden",

-          className

-        )}

-        {...props}

-      >

-        {children}

-      </div>

-    );

-  }

+	({ children, className, ...props }, ref) => {

+		return (

+			<div

+				ref={ref}

+				className={cn(

+					"border-input bg-panel-accent inline-flex h-7 overflow-hidden rounded-lg border",

+					className,

+				)}

+				{...props}

+			>

+				{children}

+			</div>

+		);

+	},

 );

 SplitButton.displayName = "SplitButton";

 

 const SplitButtonSide = forwardRef<

-  HTMLButtonElement,

-  SplitButtonSideProps & { paddingClass: string }

+	HTMLButtonElement,

+	SplitButtonSideProps & { paddingClass: string }

 >(({ children, className, paddingClass, onClick, ...props }, ref) => {

-  return (

-    <Button

-      ref={ref}

-      variant="text"

-      className={cn(

-        "h-full rounded-none bg-panel-accent !opacity-100 border-0 gap-0 font-normal transition-colors disabled:text-muted-foreground",

-        onClick

-          ? "hover:bg-foreground/10 hover:opacity-100 cursor-pointer"

-          : "cursor-default select-text",

-        paddingClass,

-        className

-      )}

-      onClick={onClick}

-      {...props}

-    >

-      {typeof children === "string" ? (

-        <span className="font-normal cursor-text">{children}</span>

-      ) : (

-        children

-      )}

-    </Button>

-  );

+	return (

+		<Button

+			ref={ref}

+			variant="text"

+			className={cn(

+				"bg-panel-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",

+				onClick

+					? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"

+					: "cursor-default select-text",

+				paddingClass,

+				className,

+			)}

+			onClick={onClick}

+			{...props}

+		>

+			{typeof children === "string" ? (

+				<span className="cursor-text font-normal">{children}</span>

+			) : (

+				children

+			)}

+		</Button>

+	);

 });

 SplitButtonSide.displayName = "SplitButtonSide";

 

 const SplitButtonLeft = forwardRef<HTMLButtonElement, SplitButtonSideProps>(

-  ({ ...props }, ref) => {

-    return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;

-  }

+	({ ...props }, ref) => {

+		return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;

+	},

 );

 SplitButtonLeft.displayName = "SplitButtonLeft";

 

 const SplitButtonRight = forwardRef<HTMLButtonElement, SplitButtonSideProps>(

-  ({ ...props }, ref) => {

-    return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;

-  }

+	({ ...props }, ref) => {

+		return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;

+	},

 );

 SplitButtonRight.displayName = "SplitButtonRight";

 

 const SplitButtonSeparator = forwardRef<HTMLDivElement, { className?: string }>(

-  ({ className, ...props }, ref) => {

-    return (

-      <Separator

-        ref={ref}

-        orientation="vertical"

-        className={cn("h-full bg-foreground/15", className)}

-        {...props}

-      />

-    );

-  }

+	({ className, ...props }, ref) => {

+		return (

+			<Separator

+				ref={ref}

+				orientation="vertical"

+				className={cn("bg-foreground/15 h-full", className)}

+				{...props}

+			/>

+		);

+	},

 );

 SplitButtonSeparator.displayName = "SplitButtonSeparator";

 

diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx
deleted file mode 100644
index 146566a6..00000000
--- a/apps/web/src/components/ui/sponsor-button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { motion } from "motion/react";
-import { ComponentType } from "react";
-
-interface SponsorButtonProps {
-  href: string;
-  logo: ComponentType<{ className?: string }>;
-  companyName: string;
-  className?: string;
-}
-
-export function SponsorButton({
-  href,
-  logo: Logo,
-  companyName,
-  className = "",
-}: SponsorButtonProps) {
-  return (
-    <motion.a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={`inline-flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-background/5 backdrop-blur-xs hover:bg-background/10 transition-all duration-200 group shadow-lg ${className}`}
-    >
-      <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
-        Sponsored by
-      </span>
-
-      <div className="flex items-center gap-1.5">
-        <div className="text-foreground/90 group-hover:text-foreground transition-colors">
-          <Logo className="w-4 h-4" />
-        </div>
-
-        <span className="text-xs font-medium text-foreground/90 group-hover:text-foreground transition-colors">
-          {companyName}
-        </span>
-      </div>
-    </motion.a>
-  );
-}
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index f210afdf..c0207804 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -3,26 +3,26 @@
 import * as React from "react";
 import { Switch as SwitchPrimitives } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index 7481cabb..7e8541ce 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -1,120 +1,120 @@
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+	HTMLTableElement,
+	React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		/>
+	</div>
 ));
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
 ));
 TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
-      className
-    )}
-    {...props}
-  />
+	<tfoot
+		ref={ref}
+		className={cn(
+			"bg-muted/50 border-t font-medium last:[&>tr]:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
+	HTMLTableRowElement,
+	React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
+	<tr
+		ref={ref}
+		className={cn(
+			"hover:bg-muted/50 data-[state=selected]:bg-muted border-b",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
+	<th
+		ref={ref}
+		className={cn(
+			"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
+	<td
+		ref={ref}
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<caption
+		ref={ref}
+		className={cn("text-muted-foreground mt-4 text-sm", className)}
+		{...props}
+	/>
 ));
 TableCaption.displayName = "TableCaption";
 
 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
 };
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index ea628959..3668477c 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -3,52 +3,52 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-auto items-center justify-center gap-2 rounded-lg bg-transparent p-0 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"text-muted-foreground inline-flex h-auto items-center justify-center gap-2 rounded-lg bg-transparent p-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground",
-      className
-    )}
-    {...props}
-  />
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-panel-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index d9ae9ea6..9c098475 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
+	HTMLTextAreaElement,
+	React.ComponentProps<"textarea">
 >(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[60px] w-full rounded-md border bg-accent/50 px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
+	return (
+		<textarea
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-accent/50 flex min-h-[60px] w-full rounded-md border px-3 py-2 text-base shadow-xs outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/10",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
 });
 Textarea.displayName = "Textarea";
 
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index bd733f63..44dc790f 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -5,110 +5,110 @@ import { Toast as ToastPrimitives } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive/35 bg-destructive/15 text-destructive-foreground backdrop-blur-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive/35 bg-destructive/15 text-destructive-foreground backdrop-blur-lg",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus-visible:outline-hidden focus-visible:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive",
-      className
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus-visible::ring-1 group-hover:opacity-100 group-[.destructive]:text-muted-foreground hover:group-[.destructive]:text-red-50 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"text-foreground/50 hover:text-foreground focus-visible::ring-1 group-[.destructive]:text-muted-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 group-hover:opacity-100 hover:group-[.destructive]:text-red-50 focus:opacity-100 focus:outline-hidden focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="size-4" />
+	</ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
@@ -117,13 +117,13 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
 };
diff --git a/apps/web/src/components/ui/toaster.tsx b/apps/web/src/components/ui/toaster.tsx
deleted file mode 100644
index baf623f0..00000000
--- a/apps/web/src/components/ui/toaster.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { useToast } from "../../hooks/use-toast";
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "./toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
diff --git a/apps/web/src/components/ui/toggle-group.tsx b/apps/web/src/components/ui/toggle-group.tsx
index 5842a07d..66368d50 100644
--- a/apps/web/src/components/ui/toggle-group.tsx
+++ b/apps/web/src/components/ui/toggle-group.tsx
@@ -2,58 +2,58 @@
 
 import * as React from "react";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 import { toggleVariants } from "./toggle";
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
+	VariantProps<typeof toggleVariants>
 >({
-  size: "default",
-  variant: "default",
+	size: "default",
+	variant: "default",
 });
 
 const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
+	<ToggleGroupPrimitive.Root
+		ref={ref}
+		className={cn("flex items-center justify-center gap-1", className)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider value={{ variant, size }}>
+			{children}
+		</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive.Root>
 ));
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+		VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
+	const context = React.useContext(ToggleGroupContext);
 
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
+	return (
+		<ToggleGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
 });
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
diff --git a/apps/web/src/components/ui/toggle.tsx b/apps/web/src/components/ui/toggle.tsx
index 460aa9f2..836d81ec 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/apps/web/src/components/ui/toggle.tsx
@@ -4,40 +4,40 @@ import * as React from "react";
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 );
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
+	<TogglePrimitive.Root
+		ref={ref}
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
 ));
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
index bfb75e2e..769ac360 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -1,8 +1,8 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Tooltip as TooltipPrimitive } from 'radix-ui';
-import * as React from 'react';
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/utils/ui";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -11,62 +11,65 @@ const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const tooltipVariants = cva(
-  'z-50 overflow-visible rounded-sm text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-  {
-    variants: {
-      variant: {
-        default: 'bg-popover text-popover-foreground border px-3 py-1.5',
-        destructive:
-          'bg-destructive/10 text-destructive dark:bg-destructive/20 border-destructive [border-width:0.5px]',
-        outline: 'border-border',
-        important:
-          'bg-amber-100/90 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300 border-amber-900 [border-width:0.5px]',
-        promotions:
-          'bg-red-100/90 text-red-900 dark:bg-red-900/20 dark:text-red-300 border-red-900 [border-width:0.5px]',
-        personal:
-          'bg-green-100/90 text-green-900 dark:bg-green-900/20 dark:text-green-300 border-green-900 [border-width:0.5px]',
-        updates:
-          'bg-purple-100/90 text-purple-900 dark:bg-purple-900/20 dark:text-purple-300 border-purple-900 [border-width:0.5px]',
-        forums:
-          'bg-blue-100/90 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300 border-blue-900 [border-width:0.5px]',
-        sidebar: 'bg-white dark:bg-[#413F3E] p-2.5 flex flex-col gap-2',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	"z-50 overflow-visible rounded-sm text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+	{
+		variants: {
+			variant: {
+				default: "bg-popover text-popover-foreground border px-3 py-1.5",
+				destructive:
+					"bg-destructive/10 text-destructive dark:bg-destructive/20 border-destructive [border-width:0.5px]",
+				outline: "border-border",
+				important:
+					"bg-amber-100/90 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300 border-amber-900 [border-width:0.5px]",
+				promotions:
+					"bg-red-100/90 text-red-900 dark:bg-red-900/20 dark:text-red-300 border-red-900 [border-width:0.5px]",
+				personal:
+					"bg-green-100/90 text-green-900 dark:bg-green-900/20 dark:text-green-300 border-green-900 [border-width:0.5px]",
+				updates:
+					"bg-purple-100/90 text-purple-900 dark:bg-purple-900/20 dark:text-purple-300 border-purple-900 [border-width:0.5px]",
+				forums:
+					"bg-blue-100/90 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300 border-blue-900 [border-width:0.5px]",
+				sidebar: "bg-white dark:bg-[#413F3E] p-2.5 flex flex-col gap-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
-    VariantProps<typeof tooltipVariants> {}
+	extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+		VariantProps<typeof tooltipVariants> {}
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  TooltipContentProps
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	TooltipContentProps
 >(({ className, sideOffset = 4, variant, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(tooltipVariants({ variant }), className)}
-    {...props}
-  >
-    {variant === 'sidebar' && (
-      <svg
-        width="6"
-        height="10"
-        viewBox="0 0 6 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="absolute left-[-6px] top-1/2 -translate-y-1/2"
-      >
-        <path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" />
-      </svg>
-    )}
-    {props.children}
-  </TooltipPrimitive.Content>
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(tooltipVariants({ variant }), className)}
+		{...props}
+	>
+		{variant === "sidebar" && (
+			<svg
+				width="6"
+				height="10"
+				viewBox="0 0 6 10"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className="absolute top-1/2 left-[-6px] -translate-y-1/2"
+			>
+				<path
+					d="M6 0L0 5L6 10V0Z"
+					className="fill-white/80 dark:fill-[#413F3E]"
+				/>
+			</svg>
+		)}
+		{props.children}
+	</TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
\ No newline at end of file
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
deleted file mode 100644
index 99e787ef..00000000
--- a/apps/web/src/components/ui/video-player.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-
-import { useRef, useEffect } from "react";
-import { usePlaybackStore } from "@/stores/playback-store";
-
-interface VideoPlayerProps {
-  src: string;
-  poster?: string;
-  className?: string;
-  clipStartTime: number;
-  trimStart: number;
-  trimEnd: number;
-  clipDuration: number;
-  trackMuted?: boolean;
-}
-
-export function VideoPlayer({
-  src,
-  poster,
-  className = "",
-  clipStartTime,
-  trimStart,
-  trimEnd,
-  clipDuration,
-  trackMuted = false,
-}: VideoPlayerProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();
-
-  // Calculate if we're within this clip's timeline range
-  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
-  const isInClipRange =
-    currentTime >= clipStartTime && currentTime < clipEndTime;
-
-  // Sync playback events
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video || !isInClipRange) return;
-
-    const handleSeekEvent = (e: CustomEvent) => {
-      // Always update video time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const videoTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-      video.currentTime = videoTime;
-    };
-
-    const handleUpdateEvent = (e: CustomEvent) => {
-      // Always update video time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const targetTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-
-      if (Math.abs(video.currentTime - targetTime) > 0.5) {
-        video.currentTime = targetTime;
-      }
-    };
-
-    const handleSpeed = (e: CustomEvent) => {
-      video.playbackRate = e.detail.speed;
-    };
-
-    window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-    window.addEventListener(
-      "playback-update",
-      handleUpdateEvent as EventListener
-    );
-    window.addEventListener("playback-speed", handleSpeed as EventListener);
-
-    return () => {
-      window.removeEventListener(
-        "playback-seek",
-        handleSeekEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-update",
-        handleUpdateEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-speed",
-        handleSpeed as EventListener
-      );
-    };
-  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
-
-  // Sync playback state
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    if (isPlaying && isInClipRange) {
-      video.play().catch(() => {});
-    } else {
-      video.pause();
-    }
-  }, [isPlaying, isInClipRange]);
-
-  // Sync volume and speed
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    video.volume = volume;
-    video.muted = muted || trackMuted;
-    video.playbackRate = speed;
-  }, [volume, speed, muted, trackMuted]);
-
-  return (
-    <video
-      ref={videoRef}
-      src={src}
-      poster={poster}
-      className={`max-w-full max-h-full object-contain ${className}`}
-      playsInline
-      preload="auto"
-      controls={false}
-      disablePictureInPicture
-      disableRemotePlayback
-      style={{ pointerEvents: "none" }}
-      onContextMenu={(e) => e.preventDefault()}
-    />
-  );
-}