23 files changed, 3368 insertions, 3368 deletions
diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
index e17d0cce..544457e2 100644
--- a/apps/web/src/app/api/auth/[...all]/route.ts
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -1,4 +1,4 @@
-import { auth } from "@/lib/auth/server";
-import { toNextJsHandler } from "better-auth/next-js";
-
-export const { POST, GET } = toNextJsHandler(auth);
+import { auth } from "@/lib/auth/server";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);
diff --git a/apps/web/src/app/api/health/route.ts b/apps/web/src/app/api/health/route.ts
index edb40a0d..dbe6fdb1 100644
--- a/apps/web/src/app/api/health/route.ts
+++ b/apps/web/src/app/api/health/route.ts
@@ -1,3 +1,3 @@
-export async function GET() {
-	return new Response("OK", { status: 200 });
-}
+export async function GET() {
+	return new Response("OK", { status: 200 });
+}
diff --git a/apps/web/src/app/api/sounds/search/route.ts b/apps/web/src/app/api/sounds/search/route.ts
index 339a54da..3070d152 100644
--- a/apps/web/src/app/api/sounds/search/route.ts
+++ b/apps/web/src/app/api/sounds/search/route.ts
@@ -1,280 +1,280 @@
-import { webEnv } from "@opencut/env/web";
-import { type NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
-import { checkRateLimit } from "@/lib/rate-limit";
-
-const searchParamsSchema = z.object({
-	q: z.string().max(500, "Query too long").optional(),
-	type: z.enum(["songs", "effects"]).optional(),
-	page: z.coerce.number().int().min(1).max(1000).default(1),
-	page_size: z.coerce.number().int().min(1).max(150).default(20),
-	sort: z
-		.enum(["downloads", "rating", "created", "score"])
-		.default("downloads"),
-	min_rating: z.coerce.number().min(0).max(5).default(3),
-	commercial_only: z.coerce.boolean().default(true),
-});
-
-const freesoundResultSchema = z.object({
-	id: z.number(),
-	name: z.string(),
-	description: z.string(),
-	url: z.string().url(),
-	previews: z
-		.object({
-			"preview-hq-mp3": z.string().url(),
-			"preview-lq-mp3": z.string().url(),
-			"preview-hq-ogg": z.string().url(),
-			"preview-lq-ogg": z.string().url(),
-		})
-		.optional(),
-	download: z.string().url().optional(),
-	duration: z.number(),
-	filesize: z.number(),
-	type: z.string(),
-	channels: z.number(),
-	bitrate: z.number(),
-	bitdepth: z.number(),
-	samplerate: z.number(),
-	username: z.string(),
-	tags: z.array(z.string()),
-	license: z.string(),
-	created: z.string(),
-	num_downloads: z.number().optional(),
-	avg_rating: z.number().optional(),
-	num_ratings: z.number().optional(),
-});
-
-const freesoundResponseSchema = z.object({
-	count: z.number(),
-	next: z.string().url().nullable(),
-	previous: z.string().url().nullable(),
-	results: z.array(freesoundResultSchema),
-});
-
-const transformedResultSchema = z.object({
-	id: z.number(),
-	name: z.string(),
-	description: z.string(),
-	url: z.string(),
-	previewUrl: z.string().optional(),
-	downloadUrl: z.string().optional(),
-	duration: z.number(),
-	filesize: z.number(),
-	type: z.string(),
-	channels: z.number(),
-	bitrate: z.number(),
-	bitdepth: z.number(),
-	samplerate: z.number(),
-	username: z.string(),
-	tags: z.array(z.string()),
-	license: z.string(),
-	created: z.string(),
-	downloads: z.number().optional(),
-	rating: z.number().optional(),
-	ratingCount: z.number().optional(),
-});
-
-const apiResponseSchema = z.object({
-	count: z.number(),
-	next: z.string().nullable(),
-	previous: z.string().nullable(),
-	results: z.array(transformedResultSchema),
-	query: z.string().optional(),
-	type: z.string(),
-	page: z.number(),
-	pageSize: z.number(),
-	sort: z.string(),
-	minRating: z.number().optional(),
-});
-
-function buildSortParameter({ query, sort }: { query?: string; sort: string }) {
-	if (!query) return `${sort}_desc`;
-	return sort === "score" ? "score" : `${sort}_desc`;
-}
-
-function applyEffectsFilters({
-	params,
-	min_rating,
-	commercial_only,
-}: {
-	params: URLSearchParams;
-	min_rating: number;
-	commercial_only: boolean;
-}) {
-	params.append("filter", "duration:[* TO 30.0]");
-	params.append("filter", `avg_rating:[${min_rating} TO *]`);
-
-	if (commercial_only) {
-		params.append(
-			"filter",
-			'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")',
-		);
-	}
-
-	params.append(
-		"filter",
-		"tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion",
-	);
-}
-
-function transformFreesoundResult(
-	result: z.infer<typeof freesoundResultSchema>,
-) {
-	return {
-		id: result.id,
-		name: result.name,
-		description: result.description,
-		url: result.url,
-		previewUrl:
-			result.previews?.["preview-hq-mp3"] ||
-			result.previews?.["preview-lq-mp3"],
-		downloadUrl: result.download,
-		duration: result.duration,
-		filesize: result.filesize,
-		type: result.type,
-		channels: result.channels,
-		bitrate: result.bitrate,
-		bitdepth: result.bitdepth,
-		samplerate: result.samplerate,
-		username: result.username,
-		tags: result.tags,
-		license: result.license,
-		created: result.created,
-		downloads: result.num_downloads || 0,
-		rating: result.avg_rating || 0,
-		ratingCount: result.num_ratings || 0,
-	};
-}
-
-export async function GET(request: NextRequest) {
-	try {
-		const { limited } = await checkRateLimit({ request });
-		if (limited) {
-			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
-		}
-
-		const { searchParams } = new URL(request.url);
-
-		const validationResult = searchParamsSchema.safeParse({
-			q: searchParams.get("q") || undefined,
-			type: searchParams.get("type") || undefined,
-			page: searchParams.get("page") || undefined,
-			page_size: searchParams.get("page_size") || undefined,
-			sort: searchParams.get("sort") || undefined,
-			min_rating: searchParams.get("min_rating") || undefined,
-		});
-
-		if (!validationResult.success) {
-			return NextResponse.json(
-				{
-					error: "Invalid parameters",
-					details: validationResult.error.flatten().fieldErrors,
-				},
-				{ status: 400 },
-			);
-		}
-
-		const {
-			q: query,
-			type,
-			page,
-			page_size: pageSize,
-			sort,
-			min_rating,
-			commercial_only,
-		} = validationResult.data;
-
-		if (type === "songs") {
-			return NextResponse.json(
-				{
-					error: "Songs are not available yet",
-					message:
-						"Song search functionality is coming soon. Try searching for sound effects instead.",
-				},
-				{ status: 501 },
-			);
-		}
-
-		const baseUrl = "https://freesound.org/apiv2/search/text/";
-
-		const sortParam = buildSortParameter({ query, sort });
-
-		const params = new URLSearchParams({
-			query: query || "",
-			token: webEnv.FREESOUND_API_KEY,
-			page: page.toString(),
-			page_size: pageSize.toString(),
-			sort: sortParam,
-			fields:
-				"id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
-		});
-
-		const isEffectsSearch = type === "effects" || !type;
-		if (isEffectsSearch) {
-			applyEffectsFilters({ params, min_rating, commercial_only });
-		}
-
-		const response = await fetch(`${baseUrl}?${params.toString()}`);
-
-		if (!response.ok) {
-			const errorText = await response.text();
-			console.error("Freesound API error:", response.status, errorText);
-			return NextResponse.json(
-				{ error: "Failed to search sounds" },
-				{ status: response.status },
-			);
-		}
-
-		const rawData = await response.json();
-
-		const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
-		if (!freesoundValidation.success) {
-			console.error(
-				"Invalid Freesound API response:",
-				freesoundValidation.error,
-			);
-			return NextResponse.json(
-				{ error: "Invalid response from Freesound API" },
-				{ status: 502 },
-			);
-		}
-
-		const data = freesoundValidation.data;
-
-		const transformedResults = data.results.map(transformFreesoundResult);
-
-		const responseData = {
-			count: data.count,
-			next: data.next,
-			previous: data.previous,
-			results: transformedResults,
-			query: query || "",
-			type: type || "effects",
-			page,
-			pageSize,
-			sort,
-			minRating: min_rating,
-		};
-
-		const responseValidation = apiResponseSchema.safeParse(responseData);
-		if (!responseValidation.success) {
-			console.error(
-				"Invalid API response structure:",
-				responseValidation.error,
-			);
-			return NextResponse.json(
-				{ error: "Internal response formatting error" },
-				{ status: 500 },
-			);
-		}
-
-		return NextResponse.json(responseValidation.data);
-	} catch (error) {
-		console.error("Error searching sounds:", error);
-		return NextResponse.json(
-			{ error: "Internal server error" },
-			{ status: 500 },
-		);
-	}
-}
+import { webEnv } from "@opencut/env/web";
+import { type NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { checkRateLimit } from "@/lib/rate-limit";
+
+const searchParamsSchema = z.object({
+	q: z.string().max(500, "Query too long").optional(),
+	type: z.enum(["songs", "effects"]).optional(),
+	page: z.coerce.number().int().min(1).max(1000).default(1),
+	page_size: z.coerce.number().int().min(1).max(150).default(20),
+	sort: z
+		.enum(["downloads", "rating", "created", "score"])
+		.default("downloads"),
+	min_rating: z.coerce.number().min(0).max(5).default(3),
+	commercial_only: z.coerce.boolean().default(true),
+});
+
+const freesoundResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string().url(),
+	previews: z
+		.object({
+			"preview-hq-mp3": z.string().url(),
+			"preview-lq-mp3": z.string().url(),
+			"preview-hq-ogg": z.string().url(),
+			"preview-lq-ogg": z.string().url(),
+		})
+		.optional(),
+	download: z.string().url().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	num_downloads: z.number().optional(),
+	avg_rating: z.number().optional(),
+	num_ratings: z.number().optional(),
+});
+
+const freesoundResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().url().nullable(),
+	previous: z.string().url().nullable(),
+	results: z.array(freesoundResultSchema),
+});
+
+const transformedResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string(),
+	previewUrl: z.string().optional(),
+	downloadUrl: z.string().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	downloads: z.number().optional(),
+	rating: z.number().optional(),
+	ratingCount: z.number().optional(),
+});
+
+const apiResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().nullable(),
+	previous: z.string().nullable(),
+	results: z.array(transformedResultSchema),
+	query: z.string().optional(),
+	type: z.string(),
+	page: z.number(),
+	pageSize: z.number(),
+	sort: z.string(),
+	minRating: z.number().optional(),
+});
+
+function buildSortParameter({ query, sort }: { query?: string; sort: string }) {
+	if (!query) return `${sort}_desc`;
+	return sort === "score" ? "score" : `${sort}_desc`;
+}
+
+function applyEffectsFilters({
+	params,
+	min_rating,
+	commercial_only,
+}: {
+	params: URLSearchParams;
+	min_rating: number;
+	commercial_only: boolean;
+}) {
+	params.append("filter", "duration:[* TO 30.0]");
+	params.append("filter", `avg_rating:[${min_rating} TO *]`);
+
+	if (commercial_only) {
+		params.append(
+			"filter",
+			'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")',
+		);
+	}
+
+	params.append(
+		"filter",
+		"tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion",
+	);
+}
+
+function transformFreesoundResult(
+	result: z.infer<typeof freesoundResultSchema>,
+) {
+	return {
+		id: result.id,
+		name: result.name,
+		description: result.description,
+		url: result.url,
+		previewUrl:
+			result.previews?.["preview-hq-mp3"] ||
+			result.previews?.["preview-lq-mp3"],
+		downloadUrl: result.download,
+		duration: result.duration,
+		filesize: result.filesize,
+		type: result.type,
+		channels: result.channels,
+		bitrate: result.bitrate,
+		bitdepth: result.bitdepth,
+		samplerate: result.samplerate,
+		username: result.username,
+		tags: result.tags,
+		license: result.license,
+		created: result.created,
+		downloads: result.num_downloads || 0,
+		rating: result.avg_rating || 0,
+		ratingCount: result.num_ratings || 0,
+	};
+}
+
+export async function GET(request: NextRequest) {
+	try {
+		const { limited } = await checkRateLimit({ request });
+		if (limited) {
+			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+		}
+
+		const { searchParams } = new URL(request.url);
+
+		const validationResult = searchParamsSchema.safeParse({
+			q: searchParams.get("q") || undefined,
+			type: searchParams.get("type") || undefined,
+			page: searchParams.get("page") || undefined,
+			page_size: searchParams.get("page_size") || undefined,
+			sort: searchParams.get("sort") || undefined,
+			min_rating: searchParams.get("min_rating") || undefined,
+		});
+
+		if (!validationResult.success) {
+			return NextResponse.json(
+				{
+					error: "Invalid parameters",
+					details: validationResult.error.flatten().fieldErrors,
+				},
+				{ status: 400 },
+			);
+		}
+
+		const {
+			q: query,
+			type,
+			page,
+			page_size: pageSize,
+			sort,
+			min_rating,
+			commercial_only,
+		} = validationResult.data;
+
+		if (type === "songs") {
+			return NextResponse.json(
+				{
+					error: "Songs are not available yet",
+					message:
+						"Song search functionality is coming soon. Try searching for sound effects instead.",
+				},
+				{ status: 501 },
+			);
+		}
+
+		const baseUrl = "https://freesound.org/apiv2/search/text/";
+
+		const sortParam = buildSortParameter({ query, sort });
+
+		const params = new URLSearchParams({
+			query: query || "",
+			token: webEnv.FREESOUND_API_KEY,
+			page: page.toString(),
+			page_size: pageSize.toString(),
+			sort: sortParam,
+			fields:
+				"id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
+		});
+
+		const isEffectsSearch = type === "effects" || !type;
+		if (isEffectsSearch) {
+			applyEffectsFilters({ params, min_rating, commercial_only });
+		}
+
+		const response = await fetch(`${baseUrl}?${params.toString()}`);
+
+		if (!response.ok) {
+			const errorText = await response.text();
+			console.error("Freesound API error:", response.status, errorText);
+			return NextResponse.json(
+				{ error: "Failed to search sounds" },
+				{ status: response.status },
+			);
+		}
+
+		const rawData = await response.json();
+
+		const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
+		if (!freesoundValidation.success) {
+			console.error(
+				"Invalid Freesound API response:",
+				freesoundValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Invalid response from Freesound API" },
+				{ status: 502 },
+			);
+		}
+
+		const data = freesoundValidation.data;
+
+		const transformedResults = data.results.map(transformFreesoundResult);
+
+		const responseData = {
+			count: data.count,
+			next: data.next,
+			previous: data.previous,
+			results: transformedResults,
+			query: query || "",
+			type: type || "effects",
+			page,
+			pageSize,
+			sort,
+			minRating: min_rating,
+		};
+
+		const responseValidation = apiResponseSchema.safeParse(responseData);
+		if (!responseValidation.success) {
+			console.error(
+				"Invalid API response structure:",
+				responseValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Internal response formatting error" },
+				{ status: 500 },
+			);
+		}
+
+		return NextResponse.json(responseValidation.data);
+	} catch (error) {
+		console.error("Error searching sounds:", error);
+		return NextResponse.json(
+			{ error: "Internal server error" },
+			{ status: 500 },
+		);
+	}
+}
diff --git a/apps/web/src/app/base-page.tsx b/apps/web/src/app/base-page.tsx
index 1841a1ee..78768581 100644
--- a/apps/web/src/app/base-page.tsx
+++ b/apps/web/src/app/base-page.tsx
@@ -1,56 +1,56 @@
-import { Header } from "@/components/header";
-import { Footer } from "@/components/footer";
-import { cn } from "@/utils/ui";
-
-interface BasePageProps {
-	children: React.ReactNode;
-	className?: string;
-	mainClassName?: string;
-	maxWidth?: "3xl" | "6xl" | "full";
-	title?: string;
-	description?: React.ReactNode;
-	action?: React.ReactNode;
-}
-
-export function BasePage({
-	children,
-	className = "",
-	mainClassName = "",
-	maxWidth = "3xl",
-	title,
-	description,
-	action,
-}: BasePageProps) {
-	const maxWidthClass = {
-		"3xl": "max-w-3xl",
-		"6xl": "max-w-6xl",
-		full: "max-w-full",
-	}[maxWidth];
-
-	return (
-		<section className={cn("bg-background min-h-screen", className)}>
-			<Header />
-			<main
-				className={cn(
-					"relative container mx-auto flex flex-col gap-12 px-6 pt-12 pb-24 md:pt-24",
-					maxWidthClass,
-					mainClassName,
-				)}
-			>
-				{title && description && (
-					<div className="flex flex-col gap-8 text-center">
-						<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
-							{title}
-						</h1>
-						<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
-							{description}
-						</p>
-						{action}
-					</div>
-				)}
-				{children}
-			</main>
-			<Footer />
-		</section>
-	);
-}
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { cn } from "@/utils/ui";
+
+interface BasePageProps {
+	children: React.ReactNode;
+	className?: string;
+	mainClassName?: string;
+	maxWidth?: "3xl" | "6xl" | "full";
+	title?: string;
+	description?: React.ReactNode;
+	action?: React.ReactNode;
+}
+
+export function BasePage({
+	children,
+	className = "",
+	mainClassName = "",
+	maxWidth = "3xl",
+	title,
+	description,
+	action,
+}: BasePageProps) {
+	const maxWidthClass = {
+		"3xl": "max-w-3xl",
+		"6xl": "max-w-6xl",
+		full: "max-w-full",
+	}[maxWidth];
+
+	return (
+		<section className={cn("bg-background min-h-screen", className)}>
+			<Header />
+			<main
+				className={cn(
+					"relative container mx-auto flex flex-col gap-12 px-6 pt-12 pb-24 md:pt-24",
+					maxWidthClass,
+					mainClassName,
+				)}
+			>
+				{title && description && (
+					<div className="flex flex-col gap-8 text-center">
+						<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
+							{title}
+						</h1>
+						<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
+							{description}
+						</p>
+						{action}
+					</div>
+				)}
+				{children}
+			</main>
+			<Footer />
+		</section>
+	);
+}
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 90afd919..b581de95 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -1,135 +1,135 @@
-import type { Metadata } from "next";
-import Image from "next/image";
-import { notFound } from "next/navigation";
-import { BasePage } from "@/app/base-page";
-import Prose from "@/components/ui/prose";
-import { Separator } from "@/components/ui/separator";
-import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog/query";
-import type { Author, Post } from "@/lib/blog/types";
-
-type PageProps = {
-	params: Promise<{ slug: string }>;
-	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-};
-
-export async function generateMetadata({
-	params,
-}: PageProps): Promise<Metadata> {
-	const slug = (await params).slug;
-
-	const data = await getSinglePost({ slug });
-
-	if (!data || !data.post) return {};
-
-	return {
-		title: data.post.title,
-		description: data.post.description,
-		twitter: {
-			title: `${data.post.title}`,
-			description: `${data.post.description}`,
-			card: "summary_large_image",
-			images: [
-				{
-					url: data.post.coverImage,
-					width: "1200",
-					height: "630",
-					alt: data.post.title,
-				},
-			],
-		},
-		openGraph: {
-			type: "article",
-			images: [
-				{
-					url: data.post.coverImage,
-					width: "1200",
-					height: "630",
-					alt: data.post.title,
-				},
-			],
-			title: data.post.title,
-			description: data.post.description,
-			publishedTime: new Date(data.post.publishedAt).toISOString(),
-			authors: data.post.authors.map((author: Author) => author.name),
-		},
-	};
-}
-
-export async function generateStaticParams() {
-	const data = await getPosts();
-	if (!data || !data.posts.length) return [];
-
-	return data.posts.map((post) => ({
-		slug: post.slug,
-	}));
-}
-
-export default async function BlogPostPage({ params }: PageProps) {
-	const slug = (await params).slug;
-	const data = await getSinglePost({ slug });
-	if (!data || !data.post) return notFound();
-
-	const html = await processHtmlContent({ html: data.post.content });
-
-	return (
-		<BasePage>
-			<PostHeader post={data.post} />
-			<Separator />
-			<PostContent html={html} />
-		</BasePage>
-	);
-}
-
-function PostHeader({ post }: { post: Post }) {
-	const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
-		day: "numeric",
-		month: "long",
-		year: "numeric",
-	});
-
-	return (
-		<div className="flex flex-col items-center justify-center gap-8">
-			<PostMeta date={formattedDate} publishedAt={post.publishedAt} />
-			<PostTitle title={post.title} />
-			{post.coverImage && <PostCoverImage post={post} />}
-		</div>
-	);
-}
-
-function PostCoverImage({ post }: { post: Post }) {
-	return (
-		<div className="relative aspect-video overflow-hidden rounded-lg w-full mt-4">
-			<Image
-				src={post.coverImage}
-				alt={post.title}
-				loading="eager"
-				fill
-				className="rounded-lg object-cover"
-			/>
-		</div>
-	);
-}
-
-function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
-	return (
-		<div className="flex items-center justify-center">
-			<time dateTime={publishedAt.toString()}>{date}</time>
-		</div>
-	);
-}
-
-function PostTitle({ title }: { title: string }) {
-	return (
-		<h1 className="text-5xl font-bold tracking-tight md:text-4xl text-center">
-			{title}
-		</h1>
-	);
-}
-
-function PostContent({ html }: { html: string }) {
-	return (
-		<section className="">
-			<Prose html={html} />
-		</section>
-	);
-}
+import type { Metadata } from "next";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { BasePage } from "@/app/base-page";
+import Prose from "@/components/ui/prose";
+import { Separator } from "@/components/ui/separator";
+import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog/query";
+import type { Author, Post } from "@/lib/blog/types";
+
+type PageProps = {
+	params: Promise<{ slug: string }>;
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+};
+
+export async function generateMetadata({
+	params,
+}: PageProps): Promise<Metadata> {
+	const slug = (await params).slug;
+
+	const data = await getSinglePost({ slug });
+
+	if (!data || !data.post) return {};
+
+	return {
+		title: data.post.title,
+		description: data.post.description,
+		twitter: {
+			title: `${data.post.title}`,
+			description: `${data.post.description}`,
+			card: "summary_large_image",
+			images: [
+				{
+					url: data.post.coverImage,
+					width: "1200",
+					height: "630",
+					alt: data.post.title,
+				},
+			],
+		},
+		openGraph: {
+			type: "article",
+			images: [
+				{
+					url: data.post.coverImage,
+					width: "1200",
+					height: "630",
+					alt: data.post.title,
+				},
+			],
+			title: data.post.title,
+			description: data.post.description,
+			publishedTime: new Date(data.post.publishedAt).toISOString(),
+			authors: data.post.authors.map((author: Author) => author.name),
+		},
+	};
+}
+
+export async function generateStaticParams() {
+	const data = await getPosts();
+	if (!data || !data.posts.length) return [];
+
+	return data.posts.map((post) => ({
+		slug: post.slug,
+	}));
+}
+
+export default async function BlogPostPage({ params }: PageProps) {
+	const slug = (await params).slug;
+	const data = await getSinglePost({ slug });
+	if (!data || !data.post) return notFound();
+
+	const html = await processHtmlContent({ html: data.post.content });
+
+	return (
+		<BasePage>
+			<PostHeader post={data.post} />
+			<Separator />
+			<PostContent html={html} />
+		</BasePage>
+	);
+}
+
+function PostHeader({ post }: { post: Post }) {
+	const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+	});
+
+	return (
+		<div className="flex flex-col items-center justify-center gap-8">
+			<PostMeta date={formattedDate} publishedAt={post.publishedAt} />
+			<PostTitle title={post.title} />
+			{post.coverImage && <PostCoverImage post={post} />}
+		</div>
+	);
+}
+
+function PostCoverImage({ post }: { post: Post }) {
+	return (
+		<div className="relative aspect-video overflow-hidden rounded-lg w-full mt-4">
+			<Image
+				src={post.coverImage}
+				alt={post.title}
+				loading="eager"
+				fill
+				className="rounded-lg object-cover"
+			/>
+		</div>
+	);
+}
+
+function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
+	return (
+		<div className="flex items-center justify-center">
+			<time dateTime={publishedAt.toString()}>{date}</time>
+		</div>
+	);
+}
+
+function PostTitle({ title }: { title: string }) {
+	return (
+		<h1 className="text-5xl font-bold tracking-tight md:text-4xl text-center">
+			{title}
+		</h1>
+	);
+}
+
+function PostContent({ html }: { html: string }) {
+	return (
+		<section className="">
+			<Prose html={html} />
+		</section>
+	);
+}
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index df0b195d..9f5a8972 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -1,52 +1,52 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { BasePage } from "@/app/base-page";
-import { Separator } from "@/components/ui/separator";
-import { getPosts } from "@/lib/blog/query";
-import type { Post } from "@/lib/blog/types";
-
-export const metadata: Metadata = {
-	title: "Blog - OpenCut",
-	description:
-		"Read the latest news and updates about OpenCut, the free and open-source video editor.",
-	openGraph: {
-		title: "Blog - OpenCut",
-		description:
-			"Read the latest news and updates about OpenCut, the free and open-source video editor.",
-		type: "website",
-	},
-};
-
-export default async function BlogPage() {
-	const data = await getPosts().catch(() => null);
-	if (!data || !data.posts) return <div>No posts yet</div>;
-
-	return (
-		<BasePage
-			title="Blog"
-			description="Read the latest news and updates about OpenCut, the free and open-source video editor."
-		>
-			<div className="flex flex-col">
-				{data.posts.map((post) => (
-					<div key={post.id} className="flex flex-col">
-						<BlogPostItem post={post} />
-						<Separator />
-					</div>
-				))}
-			</div>
-		</BasePage>
-	);
-}
-
-function BlogPostItem({ post }: { post: Post }) {
-	return (
-		<Link href={`/blog/${post.slug}`}>
-			<div className="flex h-auto w-full items-center justify-between py-6 opacity-100 hover:opacity-75">
-				<div className="flex flex-col gap-2">
-					<h2 className="text-xl font-semibold">{post.title}</h2>
-					<p className="text-muted-foreground">{post.description}</p>
-				</div>
-			</div>
-		</Link>
-	);
-}
+import type { Metadata } from "next";
+import Link from "next/link";
+import { BasePage } from "@/app/base-page";
+import { Separator } from "@/components/ui/separator";
+import { getPosts } from "@/lib/blog/query";
+import type { Post } from "@/lib/blog/types";
+
+export const metadata: Metadata = {
+	title: "Blog - OpenCut",
+	description:
+		"Read the latest news and updates about OpenCut, the free and open-source video editor.",
+	openGraph: {
+		title: "Blog - OpenCut",
+		description:
+			"Read the latest news and updates about OpenCut, the free and open-source video editor.",
+		type: "website",
+	},
+};
+
+export default async function BlogPage() {
+	const data = await getPosts().catch(() => null);
+	if (!data || !data.posts) return <div>No posts yet</div>;
+
+	return (
+		<BasePage
+			title="Blog"
+			description="Read the latest news and updates about OpenCut, the free and open-source video editor."
+		>
+			<div className="flex flex-col">
+				{data.posts.map((post) => (
+					<div key={post.id} className="flex flex-col">
+						<BlogPostItem post={post} />
+						<Separator />
+					</div>
+				))}
+			</div>
+		</BasePage>
+	);
+}
+
+function BlogPostItem({ post }: { post: Post }) {
+	return (
+		<Link href={`/blog/${post.slug}`}>
+			<div className="flex h-auto w-full items-center justify-between py-6 opacity-100 hover:opacity-75">
+				<div className="flex flex-col gap-2">
+					<h2 className="text-xl font-semibold">{post.title}</h2>
+					<p className="text-muted-foreground">{post.description}</p>
+				</div>
+			</div>
+		</Link>
+	);
+}
diff --git a/apps/web/src/app/brand/page.tsx b/apps/web/src/app/brand/page.tsx
index 94e3f3e1..a7085154 100644
--- a/apps/web/src/app/brand/page.tsx
+++ b/apps/web/src/app/brand/page.tsx
@@ -1,268 +1,268 @@
-"use client";
-
-import type { CSSProperties } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Check, Copy, Download } from "lucide-react";
-import { useState } from "react";
-import { BasePage } from "@/app/base-page";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/utils/ui";
-
-function downloadAsset(src: string) {
-	const filename = src.split("/").pop() ?? "asset.svg";
-	const a = document.createElement("a");
-	a.href = src;
-	a.download = filename;
-	a.click();
-}
-
-async function copyAsset(src: string) {
-	const res = await fetch(src);
-	const text = await res.text();
-	await navigator.clipboard.writeText(text);
-}
-
-const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
-
-type AssetTheme = "dark" | "light" | "icon";
-
-interface AssetVariant {
-	src: string;
-	theme: AssetTheme;
-	label: string;
-	width: number;
-	height: number;
-}
-
-interface AssetSection {
-	title: string;
-	description: string;
-	cols: "1" | "2";
-	assets: AssetVariant[];
-}
-
-const ASSET_SECTIONS: AssetSection[] = [
-	{
-		title: "Symbol",
-		description:
-			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
-		cols: "2",
-		assets: [
-			{
-				src: "/logos/opencut/symbol.svg",
-				theme: "dark",
-				label: "Symbol",
-				width: 400,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/symbol-light.svg",
-				theme: "light",
-				label: "Symbol",
-				width: 400,
-				height: 400,
-			},
-		],
-	},
-	{
-		title: "Lockup",
-		description:
-			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
-		cols: "2",
-		assets: [
-			{
-				src: "/logos/opencut/logo.svg",
-				theme: "dark",
-				label: "Logo",
-				width: 1809,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/logo-light.svg",
-				theme: "light",
-				label: "Logo",
-				width: 1809,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/text.svg",
-				theme: "dark",
-				label: "Text",
-				width: 1760,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/text-light.svg",
-				theme: "light",
-				label: "Text",
-				width: 1760,
-				height: 400,
-			},
-		],
-	},
-];
-
-export default function BrandPage() {
-	return (
-		<BasePage
-			maxWidth="6xl"
-			title="Brand"
-			description={
-				<>
-					Download OpenCut brand assets for use in your projects.{" "}
-					<Link
-						href="#guidelines"
-						className="underline underline-offset-4"
-						onClick={() =>
-							document
-								.getElementById("guidelines")
-								?.scrollIntoView({ behavior: "smooth" })
-						}
-					>
-						Read the brand guidelines.
-					</Link>
-				</>
-			}
-			action={
-				<Button
-					variant="outline"
-					size="lg"
-					className="mx-auto gap-2"
-					onClick={() => {
-						ALL_ASSETS().forEach((asset, i) => {
-							setTimeout(() => downloadAsset(asset.src), i * 200);
-						});
-					}}
-				>
-					<Download />
-					Download all
-				</Button>
-			}
-		>
-			<div className="flex flex-col gap-10">
-				{ASSET_SECTIONS.map((section) => (
-					<div key={section.title} className="flex flex-col gap-4">
-						<div className="flex flex-col gap-1">
-							<h2 className="font-semibold text-lg">{section.title}</h2>
-							<p className="text-muted-foreground text-sm">
-								{section.description}
-							</p>
-						</div>
-						<div
-							className={cn(
-								"grid gap-3",
-								section.cols === "2"
-									? "grid-cols-1 sm:grid-cols-2"
-									: "grid-cols-1",
-							)}
-						>
-							{section.assets.map((variant) => (
-								<AssetCard key={variant.src} variant={variant} />
-							))}
-						</div>
-					</div>
-				))}
-			</div>
-
-			<Separator />
-
-			<div id="guidelines" className="flex flex-col gap-8 text-sm">
-				<div className="flex flex-col gap-3">
-					<h2 className="font-semibold text-lg">Usage</h2>
-					<p className="text-muted-foreground text-base leading-relaxed">
-						OpenCut is open source — the code is free to use under its license.
-						That license does not cover the name or logo. You can say you use
-						OpenCut, that your project integrates with OpenCut, or that it was
-						built on top of OpenCut. You cannot name your product OpenCut, imply
-						we made or endorse your product, or use the marks commercially
-						without asking first. For anything unclear, reach out at{" "}
-						<Link
-							href="mailto:brand@opencut.app"
-							className="underline underline-offset-4"
-						>
-							brand@opencut.app
-						</Link>
-						.
-					</p>
-				</div>
-
-				<div className="flex flex-col gap-3">
-					<h2 className="font-semibold text-lg">What's not allowed</h2>
-					<ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">
-						{[
-							"Using OpenCut in the name of your product, service, or domain.",
-							"Implying that OpenCut made, sponsors, or endorses your work.",
-							"Using the logo or name on merchandise or commercial marketing.",
-							"Modifying the marks.",
-						].map((item) => (
-							<li key={item} className="flex gap-2">
-								<span className="mt-0.5 shrink-0">-</span>
-								<span>{item}</span>
-							</li>
-						))}
-					</ul>
-				</div>
-			</div>
-		</BasePage>
-	);
-}
-
-const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
-	light: {
-		backgroundImage:
-			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
-		backgroundSize: "18px 18px",
-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
-		backgroundColor: "#000",
-	},
-	dark: {
-		backgroundImage:
-			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
-		backgroundSize: "18px 18px",
-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
-		backgroundColor: "#f5f5f5",
-	},
-};
-
-function AssetCard({ variant }: { variant: AssetVariant }) {
-	const [copied, setCopied] = useState(false);
-
-	async function handleCopy() {
-		await copyAsset(variant.src);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	}
-
-	return (
-		<Card
-			className="group relative overflow-hidden"
-			style={
-				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
-			}
-		>
-			<div className="flex h-56 items-center justify-center px-12 py-8">
-				<Image
-					src={variant.src}
-					alt={variant.label}
-					width={variant.width}
-					height={variant.height}
-					className="max-h-16 w-auto select-none object-contain"
-					draggable={false}
-					unoptimized
-				/>
-			</div>
-
-			<Button
-				variant="outline"
-				size="icon"
-				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
-				onClick={handleCopy}
-			>
-				{copied ? <Check /> : <Copy />}
-			</Button>
-		</Card>
-	);
-}
+"use client";
+
+import type { CSSProperties } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Check, Copy, Download } from "lucide-react";
+import { useState } from "react";
+import { BasePage } from "@/app/base-page";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/utils/ui";
+
+function downloadAsset(src: string) {
+	const filename = src.split("/").pop() ?? "asset.svg";
+	const a = document.createElement("a");
+	a.href = src;
+	a.download = filename;
+	a.click();
+}
+
+async function copyAsset(src: string) {
+	const res = await fetch(src);
+	const text = await res.text();
+	await navigator.clipboard.writeText(text);
+}
+
+const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
+
+type AssetTheme = "dark" | "light" | "icon";
+
+interface AssetVariant {
+	src: string;
+	theme: AssetTheme;
+	label: string;
+	width: number;
+	height: number;
+}
+
+interface AssetSection {
+	title: string;
+	description: string;
+	cols: "1" | "2";
+	assets: AssetVariant[];
+}
+
+const ASSET_SECTIONS: AssetSection[] = [
+	{
+		title: "Symbol",
+		description:
+			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/symbol.svg",
+				theme: "dark",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/symbol-light.svg",
+				theme: "light",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+		],
+	},
+	{
+		title: "Lockup",
+		description:
+			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/logo.svg",
+				theme: "dark",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/logo-light.svg",
+				theme: "light",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text.svg",
+				theme: "dark",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text-light.svg",
+				theme: "light",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+		],
+	},
+];
+
+export default function BrandPage() {
+	return (
+		<BasePage
+			maxWidth="6xl"
+			title="Brand"
+			description={
+				<>
+					Download OpenCut brand assets for use in your projects.{" "}
+					<Link
+						href="#guidelines"
+						className="underline underline-offset-4"
+						onClick={() =>
+							document
+								.getElementById("guidelines")
+								?.scrollIntoView({ behavior: "smooth" })
+						}
+					>
+						Read the brand guidelines.
+					</Link>
+				</>
+			}
+			action={
+				<Button
+					variant="outline"
+					size="lg"
+					className="mx-auto gap-2"
+					onClick={() => {
+						ALL_ASSETS().forEach((asset, i) => {
+							setTimeout(() => downloadAsset(asset.src), i * 200);
+						});
+					}}
+				>
+					<Download />
+					Download all
+				</Button>
+			}
+		>
+			<div className="flex flex-col gap-10">
+				{ASSET_SECTIONS.map((section) => (
+					<div key={section.title} className="flex flex-col gap-4">
+						<div className="flex flex-col gap-1">
+							<h2 className="font-semibold text-lg">{section.title}</h2>
+							<p className="text-muted-foreground text-sm">
+								{section.description}
+							</p>
+						</div>
+						<div
+							className={cn(
+								"grid gap-3",
+								section.cols === "2"
+									? "grid-cols-1 sm:grid-cols-2"
+									: "grid-cols-1",
+							)}
+						>
+							{section.assets.map((variant) => (
+								<AssetCard key={variant.src} variant={variant} />
+							))}
+						</div>
+					</div>
+				))}
+			</div>
+
+			<Separator />
+
+			<div id="guidelines" className="flex flex-col gap-8 text-sm">
+				<div className="flex flex-col gap-3">
+					<h2 className="font-semibold text-lg">Usage</h2>
+					<p className="text-muted-foreground text-base leading-relaxed">
+						OpenCut is open source — the code is free to use under its license.
+						That license does not cover the name or logo. You can say you use
+						OpenCut, that your project integrates with OpenCut, or that it was
+						built on top of OpenCut. You cannot name your product OpenCut, imply
+						we made or endorse your product, or use the marks commercially
+						without asking first. For anything unclear, reach out at{" "}
+						<Link
+							href="mailto:brand@opencut.app"
+							className="underline underline-offset-4"
+						>
+							brand@opencut.app
+						</Link>
+						.
+					</p>
+				</div>
+
+				<div className="flex flex-col gap-3">
+					<h2 className="font-semibold text-lg">What's not allowed</h2>
+					<ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">
+						{[
+							"Using OpenCut in the name of your product, service, or domain.",
+							"Implying that OpenCut made, sponsors, or endorses your work.",
+							"Using the logo or name on merchandise or commercial marketing.",
+							"Modifying the marks.",
+						].map((item) => (
+							<li key={item} className="flex gap-2">
+								<span className="mt-0.5 shrink-0">-</span>
+								<span>{item}</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+		</BasePage>
+	);
+}
+
+const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
+	light: {
+		backgroundImage:
+			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#000",
+	},
+	dark: {
+		backgroundImage:
+			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#f5f5f5",
+	},
+};
+
+function AssetCard({ variant }: { variant: AssetVariant }) {
+	const [copied, setCopied] = useState(false);
+
+	async function handleCopy() {
+		await copyAsset(variant.src);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	}
+
+	return (
+		<Card
+			className="group relative overflow-hidden"
+			style={
+				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
+			}
+		>
+			<div className="flex h-56 items-center justify-center px-12 py-8">
+				<Image
+					src={variant.src}
+					alt={variant.label}
+					width={variant.width}
+					height={variant.height}
+					className="max-h-16 w-auto select-none object-contain"
+					draggable={false}
+					unoptimized
+				/>
+			</div>
+
+			<Button
+				variant="outline"
+				size="icon"
+				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
+				onClick={handleCopy}
+			>
+				{copied ? <Check /> : <Copy />}
+			</Button>
+		</Card>
+	);
+}
diff --git a/apps/web/src/app/changelog/[version]/page.tsx b/apps/web/src/app/changelog/[version]/page.tsx
index af382822..a3647fbd 100644
--- a/apps/web/src/app/changelog/[version]/page.tsx
+++ b/apps/web/src/app/changelog/[version]/page.tsx
@@ -1,105 +1,105 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { BasePage } from "@/app/base-page";
-import { allChangelogs } from "content-collections";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { getSortedReleases } from "../utils";
-import {
-	ReleaseArticle,
-	ReleaseMeta,
-	ReleaseTitle,
-	ReleaseDescription,
-	ReleaseChanges,
-} from "../components/release";
-import { CopyMarkdownButton } from "../components/copy-markdown-button";
-
-type Props = { params: Promise<{ version: string }> };
-
-export async function generateStaticParams() {
-	return allChangelogs.map((r) => ({ version: r.version }));
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-	const { version } = await params;
-	const release = allChangelogs.find((r) => r.version === version);
-	if (!release) return {};
-	return {
-		title: `${release.title} (${release.version}) - OpenCut Changelog`,
-		description: release.description,
-	};
-}
-
-export default async function ReleaseDetailPage({ params }: Props) {
-	const { version } = await params;
-	const releases = getSortedReleases();
-	const index = releases.findIndex((r) => r.version === version);
-
-	if (index === -1) notFound();
-
-	const release = releases[index];
-	const newer = index > 0 ? releases[index - 1] : null;
-	const older = index < releases.length - 1 ? releases[index + 1] : null;
-
-	return (
-		<BasePage>
-			<div className="mx-auto w-full max-w-3xl flex flex-col gap-12">
-				<Link
-					href="/changelog"
-					className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 w-fit"
-				>
-					<ChevronLeftIcon className="size-4" />
-					All releases
-				</Link>
-
-			<ReleaseArticle variant="detail">
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center justify-between">
-						<ReleaseMeta release={release} />
-						<CopyMarkdownButton
-							description={release.description}
-							changes={release.changes}
-						/>
-					</div>
-					<ReleaseTitle as="h1">{release.title}</ReleaseTitle>
-					{release.description && (
-						<ReleaseDescription>{release.description}</ReleaseDescription>
-					)}
-				</div>
-					<ReleaseChanges release={release} />
-				</ReleaseArticle>
-
-				<nav className="flex items-center justify-between border-t pt-8">
-					{older ? (
-						<Link
-							href={`/changelog/${older.version}`}
-							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground group"
-						>
-							<ChevronLeftIcon className="size-4" />
-							<div className="flex flex-col">
-								<span className="text-xs text-muted-foreground/60">Older</span>
-								<span className="font-medium">{older.title}</span>
-							</div>
-						</Link>
-					) : (
-						<div />
-					)}
-					{newer ? (
-						<Link
-							href={`/changelog/${newer.version}`}
-							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground group text-right"
-						>
-							<div className="flex flex-col">
-								<span className="text-xs text-muted-foreground/60">Newer</span>
-								<span className="font-medium">{newer.title}</span>
-							</div>
-							<ChevronRightIcon className="size-4" />
-						</Link>
-					) : (
-						<div />
-					)}
-				</nav>
-			</div>
-		</BasePage>
-	);
-}
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { BasePage } from "@/app/base-page";
+import { allChangelogs } from "content-collections";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { getSortedReleases } from "../utils";
+import {
+	ReleaseArticle,
+	ReleaseMeta,
+	ReleaseTitle,
+	ReleaseDescription,
+	ReleaseChanges,
+} from "../components/release";
+import { CopyMarkdownButton } from "../components/copy-markdown-button";
+
+type Props = { params: Promise<{ version: string }> };
+
+export async function generateStaticParams() {
+	return allChangelogs.map((r) => ({ version: r.version }));
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+	const { version } = await params;
+	const release = allChangelogs.find((r) => r.version === version);
+	if (!release) return {};
+	return {
+		title: `${release.title} (${release.version}) - OpenCut Changelog`,
+		description: release.description,
+	};
+}
+
+export default async function ReleaseDetailPage({ params }: Props) {
+	const { version } = await params;
+	const releases = getSortedReleases();
+	const index = releases.findIndex((r) => r.version === version);
+
+	if (index === -1) notFound();
+
+	const release = releases[index];
+	const newer = index > 0 ? releases[index - 1] : null;
+	const older = index < releases.length - 1 ? releases[index + 1] : null;
+
+	return (
+		<BasePage>
+			<div className="mx-auto w-full max-w-3xl flex flex-col gap-12">
+				<Link
+					href="/changelog"
+					className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 w-fit"
+				>
+					<ChevronLeftIcon className="size-4" />
+					All releases
+				</Link>
+
+			<ReleaseArticle variant="detail">
+				<div className="flex flex-col gap-4">
+					<div className="flex items-center justify-between">
+						<ReleaseMeta release={release} />
+						<CopyMarkdownButton
+							description={release.description}
+							changes={release.changes}
+						/>
+					</div>
+					<ReleaseTitle as="h1">{release.title}</ReleaseTitle>
+					{release.description && (
+						<ReleaseDescription>{release.description}</ReleaseDescription>
+					)}
+				</div>
+					<ReleaseChanges release={release} />
+				</ReleaseArticle>
+
+				<nav className="flex items-center justify-between border-t pt-8">
+					{older ? (
+						<Link
+							href={`/changelog/${older.version}`}
+							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground group"
+						>
+							<ChevronLeftIcon className="size-4" />
+							<div className="flex flex-col">
+								<span className="text-xs text-muted-foreground/60">Older</span>
+								<span className="font-medium">{older.title}</span>
+							</div>
+						</Link>
+					) : (
+						<div />
+					)}
+					{newer ? (
+						<Link
+							href={`/changelog/${newer.version}`}
+							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground group text-right"
+						>
+							<div className="flex flex-col">
+								<span className="text-xs text-muted-foreground/60">Newer</span>
+								<span className="font-medium">{newer.title}</span>
+							</div>
+							<ChevronRightIcon className="size-4" />
+						</Link>
+					) : (
+						<div />
+					)}
+				</nav>
+			</div>
+		</BasePage>
+	);
+}
diff --git a/apps/web/src/app/changelog/components/copy-markdown-button.tsx b/apps/web/src/app/changelog/components/copy-markdown-button.tsx
index 2366550a..edb920f5 100644
--- a/apps/web/src/app/changelog/components/copy-markdown-button.tsx
+++ b/apps/web/src/app/changelog/components/copy-markdown-button.tsx
@@ -1,68 +1,68 @@
-"use client";
-
-import { useState } from "react";
-import { CheckIcon, ClipboardIcon } from "lucide-react";
-import { getSectionTitle, groupAndOrderChanges } from "../utils";
-import type { Change } from "../utils";
-import { cn } from "@/utils/ui";
-import { Button } from "@/components/ui/button";
-
-function buildMarkdown({
-	description,
-	changes,
-}: {
-	description?: string;
-	changes: Change[];
-}): string {
-	const lines: string[] = [];
-
-	if (description) {
-		lines.push(description, "");
-	}
-
-	const { grouped, orderedTypes } = groupAndOrderChanges({ changes });
-
-	for (const type of orderedTypes) {
-		lines.push(`## ${getSectionTitle(type)}`);
-		for (const change of grouped[type]) {
-			lines.push(`- ${change.text}`);
-		}
-		lines.push("");
-	}
-
-	return lines.join("\n").trimEnd();
-}
-
-export function CopyMarkdownButton({
-	description,
-	changes,
-}: {
-	description?: string;
-	changes: Change[];
-}) {
-	const [copied, setCopied] = useState(false);
-
-	const handleCopy = async () => {
-		const markdown = buildMarkdown({ description, changes });
-		await navigator.clipboard.writeText(markdown);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	return (
-		<Button
-			size="sm"
-			variant="text"
-			onClick={handleCopy}
-			className={cn("flex items-center gap-1.5", copied && "pointer-events-none")}
-			title="Copy as markdown"
-		>
-			{copied ? (
-				<CheckIcon className="size-4" />
-			) : (
-				<ClipboardIcon className="size-4" />
-			)}
-			{copied ? "Copied!" : "Copy markdown"}
-		</Button>
-	);
-}
+"use client";
+
+import { useState } from "react";
+import { CheckIcon, ClipboardIcon } from "lucide-react";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
+import type { Change } from "../utils";
+import { cn } from "@/utils/ui";
+import { Button } from "@/components/ui/button";
+
+function buildMarkdown({
+	description,
+	changes,
+}: {
+	description?: string;
+	changes: Change[];
+}): string {
+	const lines: string[] = [];
+
+	if (description) {
+		lines.push(description, "");
+	}
+
+	const { grouped, orderedTypes } = groupAndOrderChanges({ changes });
+
+	for (const type of orderedTypes) {
+		lines.push(`## ${getSectionTitle(type)}`);
+		for (const change of grouped[type]) {
+			lines.push(`- ${change.text}`);
+		}
+		lines.push("");
+	}
+
+	return lines.join("\n").trimEnd();
+}
+
+export function CopyMarkdownButton({
+	description,
+	changes,
+}: {
+	description?: string;
+	changes: Change[];
+}) {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		const markdown = buildMarkdown({ description, changes });
+		await navigator.clipboard.writeText(markdown);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<Button
+			size="sm"
+			variant="text"
+			onClick={handleCopy}
+			className={cn("flex items-center gap-1.5", copied && "pointer-events-none")}
+			title="Copy as markdown"
+		>
+			{copied ? (
+				<CheckIcon className="size-4" />
+			) : (
+				<ClipboardIcon className="size-4" />
+			)}
+			{copied ? "Copied!" : "Copy markdown"}
+		</Button>
+	);
+}
diff --git a/apps/web/src/app/changelog/components/release.tsx b/apps/web/src/app/changelog/components/release.tsx
index eb04c1f0..2226c321 100644
--- a/apps/web/src/app/changelog/components/release.tsx
+++ b/apps/web/src/app/changelog/components/release.tsx
@@ -1,106 +1,106 @@
-import type { ReactNode } from "react";
-import Link from "next/link";
-import { cn } from "@/utils/ui";
-import { getSectionTitle, groupAndOrderChanges } from "../utils";
-import type { Release } from "../utils";
-
-export function ReleaseArticle({
-	variant,
-	isLatest,
-	children,
-}: {
-	variant: "list" | "detail";
-	isLatest?: boolean;
-	children: ReactNode;
-}) {
-	if (variant === "list") {
-		return (
-			<article className="relative sm:pl-10">
-				<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
-					<div
-						className={cn(
-							"size-[11px] rounded-full border-[1.5px]",
-							isLatest
-								? "border-foreground bg-foreground"
-								: "border-muted-foreground/30 bg-background",
-						)}
-					/>
-				</div>
-				<div className="flex flex-col gap-5">{children}</div>
-			</article>
-		);
-	}
-
-	return <article className="flex flex-col gap-8">{children}</article>;
-}
-
-export function ReleaseMeta({ release }: { release: Release }) {
-	return (
-		<span className="text-sm font-medium tracking-widest text-muted-foreground">
-			{release.version} — {release.date}
-		</span>
-	);
-}
-
-const titleSizes: Record<"h1" | "h2", string> = {
-	h1: "text-4xl",
-	h2: "text-2xl",
-};
-
-export function ReleaseTitle({
-	as: As,
-	href,
-	children,
-}: {
-	as: "h1" | "h2";
-	href?: string;
-	children: ReactNode;
-}) {
-	return (
-		<As className={cn("font-bold tracking-tight", titleSizes[As])}>
-			{href ? (
-				<Link href={href} className="hover:underline underline-offset-4">
-					{children}
-				</Link>
-			) : (
-				children
-			)}
-		</As>
-	);
-}
-
-export function ReleaseDescription({ children }: { children: ReactNode }) {
-	return (
-		<p className="text-base text-foreground leading-relaxed max-w-xl">
-			{children}
-		</p>
-	);
-}
-
-export function ReleaseChanges({ release }: { release: Release }) {
-	const { grouped, orderedTypes } = groupAndOrderChanges({
-		changes: release.changes,
-	});
-
-	return (
-		<div className="flex flex-col gap-4">
-			{orderedTypes.map((type) => (
-				<div key={type} className="flex flex-col gap-1.5">
-					<h3 className="text-base font-semibold text-foreground">
-						{getSectionTitle(type)}:
-					</h3>
-					<ul className="list-disc pl-5 space-y-1.5">
-						{grouped[type].map((change) => (
-							<li
-								key={change.text}
-								className="text-base text-foreground leading-relaxed"
-							>
-								{change.text}
-							</li>
-						))}
-					</ul>
-				</div>
-			))}
-		</div>
-	);
-}
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { cn } from "@/utils/ui";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
+import type { Release } from "../utils";
+
+export function ReleaseArticle({
+	variant,
+	isLatest,
+	children,
+}: {
+	variant: "list" | "detail";
+	isLatest?: boolean;
+	children: ReactNode;
+}) {
+	if (variant === "list") {
+		return (
+			<article className="relative sm:pl-10">
+				<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
+					<div
+						className={cn(
+							"size-[11px] rounded-full border-[1.5px]",
+							isLatest
+								? "border-foreground bg-foreground"
+								: "border-muted-foreground/30 bg-background",
+						)}
+					/>
+				</div>
+				<div className="flex flex-col gap-5">{children}</div>
+			</article>
+		);
+	}
+
+	return <article className="flex flex-col gap-8">{children}</article>;
+}
+
+export function ReleaseMeta({ release }: { release: Release }) {
+	return (
+		<span className="text-sm font-medium tracking-widest text-muted-foreground">
+			{release.version} — {release.date}
+		</span>
+	);
+}
+
+const titleSizes: Record<"h1" | "h2", string> = {
+	h1: "text-4xl",
+	h2: "text-2xl",
+};
+
+export function ReleaseTitle({
+	as: As,
+	href,
+	children,
+}: {
+	as: "h1" | "h2";
+	href?: string;
+	children: ReactNode;
+}) {
+	return (
+		<As className={cn("font-bold tracking-tight", titleSizes[As])}>
+			{href ? (
+				<Link href={href} className="hover:underline underline-offset-4">
+					{children}
+				</Link>
+			) : (
+				children
+			)}
+		</As>
+	);
+}
+
+export function ReleaseDescription({ children }: { children: ReactNode }) {
+	return (
+		<p className="text-base text-foreground leading-relaxed max-w-xl">
+			{children}
+		</p>
+	);
+}
+
+export function ReleaseChanges({ release }: { release: Release }) {
+	const { grouped, orderedTypes } = groupAndOrderChanges({
+		changes: release.changes,
+	});
+
+	return (
+		<div className="flex flex-col gap-4">
+			{orderedTypes.map((type) => (
+				<div key={type} className="flex flex-col gap-1.5">
+					<h3 className="text-base font-semibold text-foreground">
+						{getSectionTitle(type)}:
+					</h3>
+					<ul className="list-disc pl-5 space-y-1.5">
+						{grouped[type].map((change) => (
+							<li
+								key={change.text}
+								className="text-base text-foreground leading-relaxed"
+							>
+								{change.text}
+							</li>
+						))}
+					</ul>
+				</div>
+			))}
+		</div>
+	);
+}
diff --git a/apps/web/src/app/changelog/utils.ts b/apps/web/src/app/changelog/utils.ts
index 163207c0..d3405631 100644
--- a/apps/web/src/app/changelog/utils.ts
+++ b/apps/web/src/app/changelog/utils.ts
@@ -1,43 +1,43 @@
-import { allChangelogs } from "content-collections";
-
-export type Change = { type: string; text: string };
-export type Release = (typeof allChangelogs)[number];
-
-const knownSectionOrder = ["new", "improved", "fixed", "breaking"];
-
-const knownSectionTitles: Record<string, string> = {
-	new: "Features",
-	improved: "Improvements",
-	fixed: "Fixes",
-	breaking: "Breaking Changes",
-};
-
-export function getSectionTitle(type: string): string {
-	return (
-		knownSectionTitles[type] ?? type.charAt(0).toUpperCase() + type.slice(1)
-	);
-}
-
-export function groupAndOrderChanges({ changes }: { changes: Change[] }) {
-	const grouped = changes.reduce<Record<string, Change[]>>((acc, change) => {
-		if (!acc[change.type]) acc[change.type] = [];
-		acc[change.type].push(change);
-		return acc;
-	}, {});
-
-	const customTypes = Object.keys(grouped).filter(
-		(type) => !knownSectionOrder.includes(type),
-	);
-	const orderedTypes = [
-		...knownSectionOrder.filter((type) => grouped[type]?.length > 0),
-		...customTypes,
-	];
-
-	return { grouped, orderedTypes };
-}
-
-export function getSortedReleases() {
-	return [...allChangelogs].sort((a, b) =>
-		b.version.localeCompare(a.version, undefined, { numeric: true }),
-	);
-}
+import { allChangelogs } from "content-collections";
+
+export type Change = { type: string; text: string };
+export type Release = (typeof allChangelogs)[number];
+
+const knownSectionOrder = ["new", "improved", "fixed", "breaking"];
+
+const knownSectionTitles: Record<string, string> = {
+	new: "Features",
+	improved: "Improvements",
+	fixed: "Fixes",
+	breaking: "Breaking Changes",
+};
+
+export function getSectionTitle(type: string): string {
+	return (
+		knownSectionTitles[type] ?? type.charAt(0).toUpperCase() + type.slice(1)
+	);
+}
+
+export function groupAndOrderChanges({ changes }: { changes: Change[] }) {
+	const grouped = changes.reduce<Record<string, Change[]>>((acc, change) => {
+		if (!acc[change.type]) acc[change.type] = [];
+		acc[change.type].push(change);
+		return acc;
+	}, {});
+
+	const customTypes = Object.keys(grouped).filter(
+		(type) => !knownSectionOrder.includes(type),
+	);
+	const orderedTypes = [
+		...knownSectionOrder.filter((type) => grouped[type]?.length > 0),
+		...customTypes,
+	];
+
+	return { grouped, orderedTypes };
+}
+
+export function getSortedReleases() {
+	return [...allChangelogs].sort((a, b) =>
+		b.version.localeCompare(a.version, undefined, { numeric: true }),
+	);
+}
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 21703852..64792632 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -1,242 +1,242 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Card, CardContent } from "@/components/ui/card";
-import { EXTERNAL_TOOLS } from "@/constants/site-constants";
-import { BasePage } from "../base-page";
-
-export const metadata: Metadata = {
-	title: "Contributors - OpenCut",
-	description:
-		"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
-	openGraph: {
-		title: "Contributors - OpenCut",
-		description:
-			"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
-		type: "website",
-	},
-};
-
-interface Contributor {
-	id: number;
-	login: string;
-	avatar_url: string;
-	html_url: string;
-	contributions: number;
-	type: string;
-}
-
-async function getContributors(): Promise<Contributor[]> {
-	try {
-		const response = await fetch(
-			"https://api.github.com/repos/OpenCut-app/OpenCut/contributors?per_page=100",
-			{
-				headers: {
-					Accept: "application/vnd.github.v3+json",
-					"User-Agent": "OpenCut-Web-App",
-				},
-				next: { revalidate: 600 }, // 10 minutes
-			},
-		);
-
-		if (!response.ok) {
-			console.error("Failed to fetch contributors");
-			return [];
-		}
-
-		const contributors = (await response.json()) as Contributor[];
-
-		const filteredContributors = contributors.filter(
-			(contributor) => contributor.type === "User",
-		);
-
-		return filteredContributors;
-	} catch (error) {
-		console.error("Error fetching contributors:", error);
-		return [];
-	}
-}
-
-export default async function ContributorsPage() {
-	const contributors = await getContributors();
-	const topContributors = contributors.slice(0, 2);
-	const otherContributors = contributors.slice(2);
-	const totalContributions = contributors.reduce(
-		(sum, c) => sum + c.contributions,
-		0,
-	);
-
-	return (
-		<BasePage
-			title="Contributors"
-			description="Meet the amazing people who contribute to OpenCut, the free and open-source video editor."
-		>
-			<div className="-mt-4 flex items-center justify-center gap-8 text-sm">
-				<StatItem value={contributors.length} label="contributors" />
-				<StatItem value={totalContributions} label="contributions" />
-			</div>
-
-			<div className="mx-auto flex max-w-6xl flex-col gap-20">
-				{topContributors.length > 0 && (
-					<TopContributorsSection contributors={topContributors} />
-				)}
-				{otherContributors.length > 0 && (
-					<AllContributorsSection contributors={otherContributors} />
-				)}
-				<ExternalToolsSection />
-				<GitHubContributeSection
-					title="Join the community"
-					description="OpenCut is built by developers like you. Every contribution, no matter how small, helps make video editing more accessible for everyone."
-				/>
-			</div>
-		</BasePage>
-	);
-}
-
-function StatItem({ value, label }: { value: number; label: string }) {
-	return (
-		<div className="flex items-center gap-2">
-			<div className="bg-foreground size-2 rounded-full" />
-			<span className="font-medium">{value}</span>
-			<span className="text-muted-foreground">{label}</span>
-		</div>
-	);
-}
-
-function TopContributorsSection({
-	contributors,
-}: {
-	contributors: Contributor[];
-}) {
-	return (
-		<div className="flex flex-col gap-10">
-			<div className="flex flex-col gap-2 text-center">
-				<h2 className="text-2xl font-semibold">Top contributors</h2>
-				<p className="text-muted-foreground">
-					Leading the way in contributions
-				</p>
-			</div>
-
-			<div className="mx-auto flex w-full max-w-xl flex-col justify-center gap-6 md:flex-row">
-				{contributors.map((contributor) => (
-					<TopContributorCard key={contributor.id} contributor={contributor} />
-				))}
-			</div>
-		</div>
-	);
-}
-
-function TopContributorCard({ contributor }: { contributor: Contributor }) {
-	return (
-		<Link
-			href={contributor.html_url}
-			target="_blank"
-			rel="noopener noreferrer"
-			className="w-full"
-		>
-			<Card>
-				<CardContent className="flex flex-col gap-6 p-8 text-center">
-					<Avatar className="mx-auto size-28">
-						<AvatarImage
-							src={contributor.avatar_url}
-							alt={`${contributor.login}'s avatar`}
-						/>
-						<AvatarFallback className="text-lg font-semibold">
-							{contributor.login.charAt(0).toUpperCase()}
-						</AvatarFallback>
-					</Avatar>
-					<div className="flex flex-col gap-2">
-						<h3 className="text-xl font-semibold">{contributor.login}</h3>
-						<div className="flex items-center justify-center gap-2">
-							<span className="font-medium">{contributor.contributions}</span>
-							<span className="text-muted-foreground">contributions</span>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		</Link>
-	);
-}
-
-function AllContributorsSection({
-	contributors,
-}: {
-	contributors: Contributor[];
-}) {
-	return (
-		<div className="flex flex-col gap-12">
-			<div className="flex flex-col gap-2 text-center">
-				<h2 className="text-2xl font-semibold">All contributors</h2>
-				<p className="text-muted-foreground">
-					Everyone who makes OpenCut better
-				</p>
-			</div>
-
-			<div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-				{contributors.map((contributor) => (
-					<Link
-						key={contributor.id}
-						href={contributor.html_url}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="opacity-100 hover:opacity-70"
-					>
-						<div className="flex flex-col items-center gap-2 p-2">
-							<Avatar className="size-16">
-								<AvatarImage
-									src={contributor.avatar_url}
-									alt={`${contributor.login}'s avatar`}
-								/>
-								<AvatarFallback>
-									{contributor.login.charAt(0).toUpperCase()}
-								</AvatarFallback>
-							</Avatar>
-							<div className="text-center">
-								<h3 className="text-sm font-medium">{contributor.login}</h3>
-								<p className="text-muted-foreground text-xs">
-									{contributor.contributions}
-								</p>
-							</div>
-						</div>
-					</Link>
-				))}
-			</div>
-		</div>
-	);
-}
-
-function ExternalToolsSection() {
-	return (
-		<div className="flex flex-col gap-10">
-			<div className="flex flex-col gap-2 text-center">
-				<h2 className="text-2xl font-semibold">External tools</h2>
-				<p className="text-muted-foreground">Tools we use to build OpenCut</p>
-			</div>
-
-			<div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2">
-				{EXTERNAL_TOOLS.map((tool, index) => (
-					<Link
-						key={tool.url}
-						href={tool.url}
-						target="_blank"
-						className="block"
-						style={{ animationDelay: `${index * 100}ms` }}
-					>
-						<Card className="h-full">
-							<CardContent className="flex items-center justify-center h-full flex-col gap-4 p-6 text-center">
-								<tool.icon className="size-8" />
-								<div className="flex flex-1 flex-col gap-2">
-									<h3 className="text-lg font-semibold">{tool.name}</h3>
-									<p className="text-muted-foreground text-sm">
-										{tool.description}
-									</p>
-								</div>
-							</CardContent>
-						</Card>
-					</Link>
-				))}
-			</div>
-		</div>
-	);
-}
+import type { Metadata } from "next";
+import Link from "next/link";
+import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { EXTERNAL_TOOLS } from "@/constants/site-constants";
+import { BasePage } from "../base-page";
+
+export const metadata: Metadata = {
+	title: "Contributors - OpenCut",
+	description:
+		"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+	openGraph: {
+		title: "Contributors - OpenCut",
+		description:
+			"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+		type: "website",
+	},
+};
+
+interface Contributor {
+	id: number;
+	login: string;
+	avatar_url: string;
+	html_url: string;
+	contributions: number;
+	type: string;
+}
+
+async function getContributors(): Promise<Contributor[]> {
+	try {
+		const response = await fetch(
+			"https://api.github.com/repos/OpenCut-app/OpenCut/contributors?per_page=100",
+			{
+				headers: {
+					Accept: "application/vnd.github.v3+json",
+					"User-Agent": "OpenCut-Web-App",
+				},
+				next: { revalidate: 600 }, // 10 minutes
+			},
+		);
+
+		if (!response.ok) {
+			console.error("Failed to fetch contributors");
+			return [];
+		}
+
+		const contributors = (await response.json()) as Contributor[];
+
+		const filteredContributors = contributors.filter(
+			(contributor) => contributor.type === "User",
+		);
+
+		return filteredContributors;
+	} catch (error) {
+		console.error("Error fetching contributors:", error);
+		return [];
+	}
+}
+
+export default async function ContributorsPage() {
+	const contributors = await getContributors();
+	const topContributors = contributors.slice(0, 2);
+	const otherContributors = contributors.slice(2);
+	const totalContributions = contributors.reduce(
+		(sum, c) => sum + c.contributions,
+		0,
+	);
+
+	return (
+		<BasePage
+			title="Contributors"
+			description="Meet the amazing people who contribute to OpenCut, the free and open-source video editor."
+		>
+			<div className="-mt-4 flex items-center justify-center gap-8 text-sm">
+				<StatItem value={contributors.length} label="contributors" />
+				<StatItem value={totalContributions} label="contributions" />
+			</div>
+
+			<div className="mx-auto flex max-w-6xl flex-col gap-20">
+				{topContributors.length > 0 && (
+					<TopContributorsSection contributors={topContributors} />
+				)}
+				{otherContributors.length > 0 && (
+					<AllContributorsSection contributors={otherContributors} />
+				)}
+				<ExternalToolsSection />
+				<GitHubContributeSection
+					title="Join the community"
+					description="OpenCut is built by developers like you. Every contribution, no matter how small, helps make video editing more accessible for everyone."
+				/>
+			</div>
+		</BasePage>
+	);
+}
+
+function StatItem({ value, label }: { value: number; label: string }) {
+	return (
+		<div className="flex items-center gap-2">
+			<div className="bg-foreground size-2 rounded-full" />
+			<span className="font-medium">{value}</span>
+			<span className="text-muted-foreground">{label}</span>
+		</div>
+	);
+}
+
+function TopContributorsSection({
+	contributors,
+}: {
+	contributors: Contributor[];
+}) {
+	return (
+		<div className="flex flex-col gap-10">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">Top contributors</h2>
+				<p className="text-muted-foreground">
+					Leading the way in contributions
+				</p>
+			</div>
+
+			<div className="mx-auto flex w-full max-w-xl flex-col justify-center gap-6 md:flex-row">
+				{contributors.map((contributor) => (
+					<TopContributorCard key={contributor.id} contributor={contributor} />
+				))}
+			</div>
+		</div>
+	);
+}
+
+function TopContributorCard({ contributor }: { contributor: Contributor }) {
+	return (
+		<Link
+			href={contributor.html_url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="w-full"
+		>
+			<Card>
+				<CardContent className="flex flex-col gap-6 p-8 text-center">
+					<Avatar className="mx-auto size-28">
+						<AvatarImage
+							src={contributor.avatar_url}
+							alt={`${contributor.login}'s avatar`}
+						/>
+						<AvatarFallback className="text-lg font-semibold">
+							{contributor.login.charAt(0).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+					<div className="flex flex-col gap-2">
+						<h3 className="text-xl font-semibold">{contributor.login}</h3>
+						<div className="flex items-center justify-center gap-2">
+							<span className="font-medium">{contributor.contributions}</span>
+							<span className="text-muted-foreground">contributions</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</Link>
+	);
+}
+
+function AllContributorsSection({
+	contributors,
+}: {
+	contributors: Contributor[];
+}) {
+	return (
+		<div className="flex flex-col gap-12">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">All contributors</h2>
+				<p className="text-muted-foreground">
+					Everyone who makes OpenCut better
+				</p>
+			</div>
+
+			<div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+				{contributors.map((contributor) => (
+					<Link
+						key={contributor.id}
+						href={contributor.html_url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="opacity-100 hover:opacity-70"
+					>
+						<div className="flex flex-col items-center gap-2 p-2">
+							<Avatar className="size-16">
+								<AvatarImage
+									src={contributor.avatar_url}
+									alt={`${contributor.login}'s avatar`}
+								/>
+								<AvatarFallback>
+									{contributor.login.charAt(0).toUpperCase()}
+								</AvatarFallback>
+							</Avatar>
+							<div className="text-center">
+								<h3 className="text-sm font-medium">{contributor.login}</h3>
+								<p className="text-muted-foreground text-xs">
+									{contributor.contributions}
+								</p>
+							</div>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function ExternalToolsSection() {
+	return (
+		<div className="flex flex-col gap-10">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">External tools</h2>
+				<p className="text-muted-foreground">Tools we use to build OpenCut</p>
+			</div>
+
+			<div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2">
+				{EXTERNAL_TOOLS.map((tool, index) => (
+					<Link
+						key={tool.url}
+						href={tool.url}
+						target="_blank"
+						className="block"
+						style={{ animationDelay: `${index * 100}ms` }}
+					>
+						<Card className="h-full">
+							<CardContent className="flex items-center justify-center h-full flex-col gap-4 p-6 text-center">
+								<tool.icon className="size-8" />
+								<div className="flex flex-1 flex-col gap-2">
+									<h3 className="text-lg font-semibold">{tool.name}</h3>
+									<p className="text-muted-foreground text-sm">
+										{tool.description}
+									</p>
+								</div>
+							</CardContent>
+						</Card>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 3ec6ddb8..38a25d4c 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -1,113 +1,113 @@
-"use client";
-
-import { useParams } from "next/navigation";
-import {
-	ResizablePanelGroup,
-	ResizablePanel,
-	ResizableHandle,
-} from "@/components/ui/resizable";
-import { AssetsPanel } from "@/components/editor/panels/assets";
-import { PropertiesPanel } from "@/components/editor/panels/properties";
-import { Timeline } from "@/components/editor/panels/timeline";
-import { PreviewPanel } from "@/components/editor/panels/preview";
-import { EditorHeader } from "@/components/editor/editor-header";
-import { EditorProvider } from "@/components/providers/editor-provider";
-import { Onboarding } from "@/components/editor/onboarding";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
-import { usePanelStore } from "@/stores/panel-store";
-import { usePasteMedia } from "@/hooks/use-paste-media";
-import { MobileGate } from "@/components/editor/mobile-gate";
-
-export default function Editor() {
-	const params = useParams();
-	const projectId = params.project_id as string;
-
-	return (
-		<MobileGate>
-			<EditorProvider projectId={projectId}>
-				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
-					<EditorHeader />
-					<div className="min-h-0 min-w-0 flex-1">
-						<EditorLayout />
-					</div>
-					<Onboarding />
-					<MigrationDialog />
-				</div>
-			</EditorProvider>
-		</MobileGate>
-	);
-}
-
-function EditorLayout() {
-	usePasteMedia();
-	const { panels, setPanel } = usePanelStore();
-
-	return (
-		<ResizablePanelGroup
-			direction="vertical"
-			className="size-full gap-[0.18rem]"
-			onLayout={(sizes) => {
-				setPanel("mainContent", sizes[0] ?? panels.mainContent);
-				setPanel("timeline", sizes[1] ?? panels.timeline);
-			}}
-		>
-			<ResizablePanel
-				defaultSize={panels.mainContent}
-				minSize={30}
-				maxSize={85}
-				className="min-h-0"
-			>
-				<ResizablePanelGroup
-					direction="horizontal"
-					className="size-full gap-[0.19rem] px-3"
-					onLayout={(sizes) => {
-						setPanel("tools", sizes[0] ?? panels.tools);
-						setPanel("preview", sizes[1] ?? panels.preview);
-						setPanel("properties", sizes[2] ?? panels.properties);
-					}}
-				>
-					<ResizablePanel
-						defaultSize={panels.tools}
-						minSize={15}
-						maxSize={40}
-						className="min-w-0"
-					>
-						<AssetsPanel />
-					</ResizablePanel>
-
-					<ResizableHandle withHandle />
-
-					<ResizablePanel
-						defaultSize={panels.preview}
-						minSize={30}
-						className="min-h-0 min-w-0 flex-1"
-					>
-						<PreviewPanel />
-					</ResizablePanel>
-
-					<ResizableHandle withHandle />
-
-					<ResizablePanel
-						defaultSize={panels.properties}
-						minSize={15}
-						maxSize={40}
-						className="min-w-0"
-					>
-						<PropertiesPanel />
-					</ResizablePanel>
-				</ResizablePanelGroup>
-			</ResizablePanel>
-
-			<ResizableHandle withHandle />
-
-			<ResizablePanel
-				defaultSize={panels.timeline}
-				minSize={15}
-				maxSize={70}
-				className="min-h-0 px-3 pb-3"
-			>
-				<Timeline />
-			</ResizablePanel>
-		</ResizablePanelGroup>
-	);
-}
+"use client";
+
+import { useParams } from "next/navigation";
+import {
+	ResizablePanelGroup,
+	ResizablePanel,
+	ResizableHandle,
+} from "@/components/ui/resizable";
+import { AssetsPanel } from "@/components/editor/panels/assets";
+import { PropertiesPanel } from "@/components/editor/panels/properties";
+import { Timeline } from "@/components/editor/panels/timeline";
+import { PreviewPanel } from "@/components/editor/panels/preview";
+import { EditorHeader } from "@/components/editor/editor-header";
+import { EditorProvider } from "@/components/providers/editor-provider";
+import { Onboarding } from "@/components/editor/onboarding";
+import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { usePanelStore } from "@/stores/panel-store";
+import { usePasteMedia } from "@/hooks/use-paste-media";
+import { MobileGate } from "@/components/editor/mobile-gate";
+
+export default function Editor() {
+	const params = useParams();
+	const projectId = params.project_id as string;
+
+	return (
+		<MobileGate>
+			<EditorProvider projectId={projectId}>
+				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
+					<EditorHeader />
+					<div className="min-h-0 min-w-0 flex-1">
+						<EditorLayout />
+					</div>
+					<Onboarding />
+					<MigrationDialog />
+				</div>
+			</EditorProvider>
+		</MobileGate>
+	);
+}
+
+function EditorLayout() {
+	usePasteMedia();
+	const { panels, setPanel } = usePanelStore();
+
+	return (
+		<ResizablePanelGroup
+			direction="vertical"
+			className="size-full gap-[0.18rem]"
+			onLayout={(sizes) => {
+				setPanel("mainContent", sizes[0] ?? panels.mainContent);
+				setPanel("timeline", sizes[1] ?? panels.timeline);
+			}}
+		>
+			<ResizablePanel
+				defaultSize={panels.mainContent}
+				minSize={30}
+				maxSize={85}
+				className="min-h-0"
+			>
+				<ResizablePanelGroup
+					direction="horizontal"
+					className="size-full gap-[0.19rem] px-3"
+					onLayout={(sizes) => {
+						setPanel("tools", sizes[0] ?? panels.tools);
+						setPanel("preview", sizes[1] ?? panels.preview);
+						setPanel("properties", sizes[2] ?? panels.properties);
+					}}
+				>
+					<ResizablePanel
+						defaultSize={panels.tools}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0"
+					>
+						<AssetsPanel />
+					</ResizablePanel>
+
+					<ResizableHandle withHandle />
+
+					<ResizablePanel
+						defaultSize={panels.preview}
+						minSize={30}
+						className="min-h-0 min-w-0 flex-1"
+					>
+						<PreviewPanel />
+					</ResizablePanel>
+
+					<ResizableHandle withHandle />
+
+					<ResizablePanel
+						defaultSize={panels.properties}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0"
+					>
+						<PropertiesPanel />
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</ResizablePanel>
+
+			<ResizableHandle withHandle />
+
+			<ResizablePanel
+				defaultSize={panels.timeline}
+				minSize={15}
+				maxSize={70}
+				className="min-h-0 px-3 pb-3"
+			>
+				<Timeline />
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
+}
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 21219427..a2df844a 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,284 +1,284 @@
-@import "tailwindcss";
-
-/* Custom variant for dark mode */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Plugins */
-@plugin "@tailwindcss/typography";
-@plugin "tailwindcss-animate";
-
-:root {
-  --background: hsl(0, 0%, 100%);
-  --foreground: hsl(0 0% 11%);
-  --card: hsl(0, 0%, 100%);
-  --card-foreground: hsl(0 0% 11%);
-  --popover: hsl(0, 0%, 100%);
-  --popover-hover: hsl(0, 0%, 96%);
-  --popover-foreground: hsl(0 0% 2%);
-  --primary: hsl(200, 90%, 52%);
-  --primary-foreground: hsl(0, 0%, 100%);
-  --secondary: hsl(204, 100%, 97%);
-  --secondary-border: hsl(204, 100%, 94%);
-  --secondary-foreground: hsl(200, 98%, 39%);
-  --muted: hsl(0 0% 85.1%);
-  --muted-foreground: hsl(0 0% 50%);
-  --accent: hsl(0, 0%, 96%);
-  --accent-foreground: hsl(0 0% 2%);
-  --destructive: hsl(0, 83%, 50%);
-  --destructive-foreground: hsl(0, 0%, 100%);
-  --constructive: hsl(141, 71%, 48%);
-  --constructive-foreground: hsl(0, 0%, 100%);
-  --border: hsl(0 0% 91%);
-  --input: hsl(0, 0%, 100%);
-  --ring: hsl(0, 0%, 55%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-  --sidebar-background: hsl(0 0% 96.1%);
-  --sidebar-foreground: hsl(0 0% 2%);
-  --sidebar-primary: hsl(0 0% 2%);
-  --sidebar-primary-foreground: hsl(0 0% 91%);
-  --sidebar-accent: hsl(0 0% 85.1%);
-  --sidebar-accent-foreground: hsl(0 0% 2%);
-  --sidebar-border: hsl(0 0% 85.1%);
-  --sidebar-ring: hsl(0 0% 16.9%);
-  --sidebar: hsl(0 0% 98%);
-}
-
-.panel {
-  --background: hsl(210, 20%, 98%);
-  --foreground: hsl(0 0% 13%);
-  --card: hsl(0, 0%, 98%);
-  --card-foreground: hsl(0 0% 13%);
-  --primary-foreground: hsl(0, 0%, 98%);
-  --secondary: hsl(204, 100%, 95%);
-  --secondary-border: hsl(204, 100%, 92%);
-  --secondary-foreground: hsl(200, 98%, 37%);
-  --muted: hsl(0 0% 83.1%);
-  --muted-foreground: hsl(0 0% 48%);
-  --accent: hsl(0, 0%, 93%);
-  --accent-foreground: hsl(0 0% 5%);
-  --destructive-foreground: hsl(0, 0%, 98%);
-  --constructive-foreground: hsl(0, 0%, 98%);
-  --border: hsl(0 0% 87%);
-  --input: hsl(0 0% 93%);
-  --ring: hsl(0, 0%, 53%);
-}
-
-.dark {
-  --background: hsl(0, 0%, 5%);
-  --foreground: hsl(0 0% 87%);
-  --card: hsl(0, 0%, 5%);
-  --card-foreground: hsl(0 0% 87%);
-  --popover: hsl(0, 0%, 5%);
-  --popover-hover: hsl(0, 0%, 13%);
-  --popover-foreground: hsl(0 0% 95%);
-  --secondary: hsl(204, 100%, 12%);
-  --secondary-border: hsl(204, 100%, 15%);
-  --secondary-foreground: hsl(200, 98%, 61%);
-  --muted: hsl(0 0% 20%);
-  --accent: hsl(0, 0%, 14%);
-  --accent-foreground: hsl(0 0% 95%);
-  --border: hsl(0 0% 16%);
-  --input: hsl(0 0% 5%);
-  --ring: hsl(0, 0%, 50%);
-  --sidebar-background: hsl(0 0% 8%);
-  --sidebar-foreground: hsl(0 0% 95%);
-  --sidebar-primary: hsl(0 0% 95%);
-  --sidebar-primary-foreground: hsl(0 0% 15%);
-  --sidebar-accent: hsl(0 0% 20%);
-  --sidebar-accent-foreground: hsl(0 0% 95%);
-  --sidebar-border: hsl(0 0% 20%);
-  --sidebar-ring: hsl(0 0% 83.1%);
-  --sidebar: hsl(0 0% 6%);
-}
-
-.dark .panel {
-  --background: hsl(0 0% 10%);
-  --foreground: hsl(0 0% 85%);
-  --card: hsl(0, 0%, 10%);
-  --card-foreground: hsl(0 0% 85%);
-  --secondary: hsl(204, 67%, 9%);
-  --secondary-border: hsl(204, 100%, 14%);
-  --secondary-foreground: hsl(200, 98%, 63%);
-  --muted: hsl(0 0% 22%);
-  --accent: hsl(0, 0%, 15%);
-  --accent-foreground: hsl(0 0% 93%);
-  --border: hsl(0 0% 18%);
-  --input: hsl(0 0% 22%);
-  --ring: hsl(0, 0%, 52%);
-}
-
-@layer base {
-  /*
-    The default border color has changed to `currentcolor` in Tailwind CSS v4,
-    so we've added these compatibility styles to make sure everything still
-    looks the same as it did with Tailwind CSS v3.
-
-    If we ever want to remove these styles, we need to add an explicit border
-    color utility to any element that depends on these defaults.
-  */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-  /* Other default base styles */
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    /* Prevent back/forward swipe */
-    overscroll-behavior-x: contain;
-  }
-  ::selection {
-    @apply bg-primary/35 selection:text-primary-foreground;
-  }
-}
-
-@theme inline {
-  /* Responsive breakpoints */
-  --breakpoint-xs: 30rem;
-
-  /* Typography */
-  --font-sans: var(--font-inter), sans-serif;
-
-  /* Font sizes */
-  --text-xs: 0.72rem;
-  --text-sm: 0.79rem;
-  --text-base: 0.92rem;
-  --text-base--line-height: calc(1.5 / 0.95);
-  --text-xs--line-height: calc(1 / 0.8);
-
-  /* Border radius */
-  --radius-lg: 0.82rem;
-  --radius-md: 0.65rem;
-  --radius-sm: 0.35rem;
-
-  /* Palette mapped to root design tokens */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-hover: var(--popover-hover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-border: var(--secondary-border);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --color-constructive: var(--constructive);
-  --color-constructive-foreground: var(--constructive-foreground);
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Chart colors */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* Sidebar */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@utility scrollbar-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility scrollbar-x-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:horizontal {
-    display: none;
-  }
-}
-
-@utility scrollbar-y-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:vertical {
-    display: none;
-  }
-}
-
-@utility scrollbar-thin {
-  &::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--muted-foreground);
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "tailwindcss";
+
+/* Custom variant for dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Plugins */
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+:root {
+  --background: hsl(0, 0%, 100%);
+  --foreground: hsl(0 0% 11%);
+  --card: hsl(0, 0%, 100%);
+  --card-foreground: hsl(0 0% 11%);
+  --popover: hsl(0, 0%, 100%);
+  --popover-hover: hsl(0, 0%, 96%);
+  --popover-foreground: hsl(0 0% 2%);
+  --primary: hsl(200, 90%, 52%);
+  --primary-foreground: hsl(0, 0%, 100%);
+  --secondary: hsl(204, 100%, 97%);
+  --secondary-border: hsl(204, 100%, 94%);
+  --secondary-foreground: hsl(200, 98%, 39%);
+  --muted: hsl(0 0% 85.1%);
+  --muted-foreground: hsl(0 0% 50%);
+  --accent: hsl(0, 0%, 96%);
+  --accent-foreground: hsl(0 0% 2%);
+  --destructive: hsl(0, 83%, 50%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --constructive: hsl(141, 71%, 48%);
+  --constructive-foreground: hsl(0, 0%, 100%);
+  --border: hsl(0 0% 91%);
+  --input: hsl(0, 0%, 100%);
+  --ring: hsl(0, 0%, 55%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(0 0% 96.1%);
+  --sidebar-foreground: hsl(0 0% 2%);
+  --sidebar-primary: hsl(0 0% 2%);
+  --sidebar-primary-foreground: hsl(0 0% 91%);
+  --sidebar-accent: hsl(0 0% 85.1%);
+  --sidebar-accent-foreground: hsl(0 0% 2%);
+  --sidebar-border: hsl(0 0% 85.1%);
+  --sidebar-ring: hsl(0 0% 16.9%);
+  --sidebar: hsl(0 0% 98%);
+}
+
+.panel {
+  --background: hsl(210, 20%, 98%);
+  --foreground: hsl(0 0% 13%);
+  --card: hsl(0, 0%, 98%);
+  --card-foreground: hsl(0 0% 13%);
+  --primary-foreground: hsl(0, 0%, 98%);
+  --secondary: hsl(204, 100%, 95%);
+  --secondary-border: hsl(204, 100%, 92%);
+  --secondary-foreground: hsl(200, 98%, 37%);
+  --muted: hsl(0 0% 83.1%);
+  --muted-foreground: hsl(0 0% 48%);
+  --accent: hsl(0, 0%, 93%);
+  --accent-foreground: hsl(0 0% 5%);
+  --destructive-foreground: hsl(0, 0%, 98%);
+  --constructive-foreground: hsl(0, 0%, 98%);
+  --border: hsl(0 0% 87%);
+  --input: hsl(0 0% 93%);
+  --ring: hsl(0, 0%, 53%);
+}
+
+.dark {
+  --background: hsl(0, 0%, 5%);
+  --foreground: hsl(0 0% 87%);
+  --card: hsl(0, 0%, 5%);
+  --card-foreground: hsl(0 0% 87%);
+  --popover: hsl(0, 0%, 5%);
+  --popover-hover: hsl(0, 0%, 13%);
+  --popover-foreground: hsl(0 0% 95%);
+  --secondary: hsl(204, 100%, 12%);
+  --secondary-border: hsl(204, 100%, 15%);
+  --secondary-foreground: hsl(200, 98%, 61%);
+  --muted: hsl(0 0% 20%);
+  --accent: hsl(0, 0%, 14%);
+  --accent-foreground: hsl(0 0% 95%);
+  --border: hsl(0 0% 16%);
+  --input: hsl(0 0% 5%);
+  --ring: hsl(0, 0%, 50%);
+  --sidebar-background: hsl(0 0% 8%);
+  --sidebar-foreground: hsl(0 0% 95%);
+  --sidebar-primary: hsl(0 0% 95%);
+  --sidebar-primary-foreground: hsl(0 0% 15%);
+  --sidebar-accent: hsl(0 0% 20%);
+  --sidebar-accent-foreground: hsl(0 0% 95%);
+  --sidebar-border: hsl(0 0% 20%);
+  --sidebar-ring: hsl(0 0% 83.1%);
+  --sidebar: hsl(0 0% 6%);
+}
+
+.dark .panel {
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 85%);
+  --card: hsl(0, 0%, 10%);
+  --card-foreground: hsl(0 0% 85%);
+  --secondary: hsl(204, 67%, 9%);
+  --secondary-border: hsl(204, 100%, 14%);
+  --secondary-foreground: hsl(200, 98%, 63%);
+  --muted: hsl(0 0% 22%);
+  --accent: hsl(0, 0%, 15%);
+  --accent-foreground: hsl(0 0% 93%);
+  --border: hsl(0 0% 18%);
+  --input: hsl(0 0% 22%);
+  --ring: hsl(0, 0%, 52%);
+}
+
+@layer base {
+  /*
+    The default border color has changed to `currentcolor` in Tailwind CSS v4,
+    so we've added these compatibility styles to make sure everything still
+    looks the same as it did with Tailwind CSS v3.
+
+    If we ever want to remove these styles, we need to add an explicit border
+    color utility to any element that depends on these defaults.
+  */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+  /* Other default base styles */
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* Prevent back/forward swipe */
+    overscroll-behavior-x: contain;
+  }
+  ::selection {
+    @apply bg-primary/35 selection:text-primary-foreground;
+  }
+}
+
+@theme inline {
+  /* Responsive breakpoints */
+  --breakpoint-xs: 30rem;
+
+  /* Typography */
+  --font-sans: var(--font-inter), sans-serif;
+
+  /* Font sizes */
+  --text-xs: 0.72rem;
+  --text-sm: 0.79rem;
+  --text-base: 0.92rem;
+  --text-base--line-height: calc(1.5 / 0.95);
+  --text-xs--line-height: calc(1 / 0.8);
+
+  /* Border radius */
+  --radius-lg: 0.82rem;
+  --radius-md: 0.65rem;
+  --radius-sm: 0.35rem;
+
+  /* Palette mapped to root design tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-hover: var(--popover-hover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-border: var(--secondary-border);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-constructive: var(--constructive);
+  --color-constructive-foreground: var(--constructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-x-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:horizontal {
+    display: none;
+  }
+}
+
+@utility scrollbar-y-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:vertical {
+    display: none;
+  }
+}
+
+@utility scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
index 7c192d2b..72f0c2aa 100644
--- a/apps/web/src/app/metadata.ts
+++ b/apps/web/src/app/metadata.ts
@@ -1,86 +1,86 @@
-import type { Metadata } from "next";
-import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
-
-export const baseMetaData: Metadata = {
-	metadataBase: new URL(SITE_URL),
-	title: SITE_INFO.title,
-	description: SITE_INFO.description,
-	openGraph: {
-		title: SITE_INFO.title,
-		description: SITE_INFO.description,
-		url: SITE_URL,
-		siteName: SITE_INFO.title,
-		locale: "en_US",
-		type: "website",
-		images: [
-			{
-				url: SITE_INFO.openGraphImage,
-				width: 1200,
-				height: 630,
-				alt: "OpenCut Wordmark",
-			},
-		],
-	},
-	twitter: {
-		card: "summary_large_image",
-		title: SITE_INFO.title,
-		description: SITE_INFO.description,
-		creator: "@opencutapp",
-		images: [SITE_INFO.twitterImage],
-	},
-	pinterest: {
-		richPin: false,
-	},
-	robots: {
-		index: true,
-		follow: true,
-	},
-	icons: {
-		icon: [
-			{ url: "/favicon.ico" },
-			{ url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-			{ url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-			{ url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
-		],
-		apple: [
-			{ url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
-			{ url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
-			{ url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
-			{ url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
-			{
-				url: "/icons/apple-icon-114x114.png",
-				sizes: "114x114",
-				type: "image/png",
-			},
-			{
-				url: "/icons/apple-icon-120x120.png",
-				sizes: "120x120",
-				type: "image/png",
-			},
-			{
-				url: "/icons/apple-icon-144x144.png",
-				sizes: "144x144",
-				type: "image/png",
-			},
-			{
-				url: "/icons/apple-icon-152x152.png",
-				sizes: "152x152",
-				type: "image/png",
-			},
-			{
-				url: "/icons/apple-icon-180x180.png",
-				sizes: "180x180",
-				type: "image/png",
-			},
-		],
-		shortcut: ["/favicon.ico"],
-	},
-	appleWebApp: {
-		capable: true,
-		title: SITE_INFO.title,
-	},
-	manifest: "/manifest.json",
-	other: {
-		"msapplication-config": "/browserconfig.xml",
-	},
-};
+import type { Metadata } from "next";
+import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
+
+export const baseMetaData: Metadata = {
+	metadataBase: new URL(SITE_URL),
+	title: SITE_INFO.title,
+	description: SITE_INFO.description,
+	openGraph: {
+		title: SITE_INFO.title,
+		description: SITE_INFO.description,
+		url: SITE_URL,
+		siteName: SITE_INFO.title,
+		locale: "en_US",
+		type: "website",
+		images: [
+			{
+				url: SITE_INFO.openGraphImage,
+				width: 1200,
+				height: 630,
+				alt: "OpenCut Wordmark",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: SITE_INFO.title,
+		description: SITE_INFO.description,
+		creator: "@opencutapp",
+		images: [SITE_INFO.twitterImage],
+	},
+	pinterest: {
+		richPin: false,
+	},
+	robots: {
+		index: true,
+		follow: true,
+	},
+	icons: {
+		icon: [
+			{ url: "/favicon.ico" },
+			{ url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+			{ url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+			{ url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+		],
+		apple: [
+			{ url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
+			{ url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
+			{ url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
+			{ url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
+			{
+				url: "/icons/apple-icon-114x114.png",
+				sizes: "114x114",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-120x120.png",
+				sizes: "120x120",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-144x144.png",
+				sizes: "144x144",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-152x152.png",
+				sizes: "152x152",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-180x180.png",
+				sizes: "180x180",
+				type: "image/png",
+			},
+		],
+		shortcut: ["/favicon.ico"],
+	},
+	appleWebApp: {
+		capable: true,
+		title: SITE_INFO.title,
+	},
+	manifest: "/manifest.json",
+	other: {
+		"msapplication-config": "/browserconfig.xml",
+	},
+};
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index d97c9a54..43dbc104 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,21 +1,21 @@
-import { Hero } from "@/components/landing/hero";
-import { Header } from "@/components/header";
-import { Footer } from "@/components/footer";
-import type { Metadata } from "next";
-import { SITE_URL } from "@/constants/site-constants";
-
-export const metadata: Metadata = {
-	alternates: {
-		canonical: SITE_URL,
-	},
-};
-
-export default async function Home() {
-	return (
-		<div>
-			<Header />
-			<Hero />
-			<Footer />
-		</div>
-	);
-}
+import { Hero } from "@/components/landing/hero";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import type { Metadata } from "next";
+import { SITE_URL } from "@/constants/site-constants";
+
+export const metadata: Metadata = {
+	alternates: {
+		canonical: SITE_URL,
+	},
+};
+
+export default async function Home() {
+	return (
+		<div>
+			<Header />
+			<Hero />
+			<Footer />
+		</div>
+	);
+}
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index f32ce2b9..8c5d9d04 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -1,1015 +1,1015 @@
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import type { KeyboardEvent, MouseEvent } from "react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import type { EditorCore } from "@/core";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
-import { StoragePersistenceDialog } from "@/components/editor/dialogs/storage-persistence-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useEditor } from "@/hooks/use-editor";
-import { useProjectsStore } from "./store";
-import type {
-	TProjectMetadata,
-	TProjectSortKey,
-	TProjectSortOption,
-} from "@/lib/project/types";
-import { formatTimeCode } from "@/lib/time";
-import { formatDate } from "@/utils/date";
-import { HugeiconsIcon } from "@hugeicons/react";
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import {
-	Calendar04Icon,
-	GridViewIcon,
-	LeftToRightListDashIcon,
-	PlusSignIcon,
-	Search01Icon,
-	Video01Icon,
-	MoreHorizontalIcon,
-	Delete02Icon,
-	Copy01Icon,
-	Edit03Icon,
-	ArrowDown02Icon,
-	InformationCircleIcon,
-} from "@hugeicons/core-free-icons";
-import { OcVideoIcon } from "@opencut/ui/icons";
-import { Label } from "@/components/ui/label";
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuSeparator,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
-import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
-import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
-import { cn } from "@/utils/ui";
-
-const formatProjectDuration = ({
-	duration,
-}: {
-	duration: number | undefined;
-}): string | null => {
-	if (duration === undefined) {
-		return null;
-	}
-
-	const format = duration >= 3600 ? "HH:MM:SS" : "MM:SS";
-	return formatTimeCode({ timeInSeconds: duration, format });
-};
-
-const VIEW_MODE_OPTIONS = [
-	{ mode: "grid" as const, icon: GridViewIcon, label: "Grid view" },
-	{ mode: "list" as const, icon: LeftToRightListDashIcon, label: "List view" },
-];
-
-export default function ProjectsPage() {
-	const { searchQuery, sortKey, sortOrder, viewMode } = useProjectsStore();
-	const editor = useEditor();
-	const sortOption: TProjectSortOption = `${sortKey}-${sortOrder}`;
-
-	const isLoading = useEditor((e) => e.project.getIsLoading());
-	const isInitialized = useEditor((e) => e.project.getIsInitialized());
-	const projectsToDisplay = useEditor((e) =>
-		e.project.getFilteredAndSortedProjects({ searchQuery, sortOption }),
-	);
-
-	useEffect(() => {
-		if (!editor.project.getIsInitialized()) {
-			editor.project.loadAllProjects();
-		}
-	}, [editor.project]);
-
-	return (
-		<div className="bg-background min-h-screen">
-			<MigrationDialog />
-			<StoragePersistenceDialog />
-			<ProjectsHeader />
-			<ProjectsToolbar projectIds={projectsToDisplay.map((p) => p.id)} />
-			<main className="mx-auto px-4 pt-2 pb-6 flex flex-col gap-4">
-				{isLoading || !isInitialized ? (
-					<ProjectsSkeleton />
-				) : projectsToDisplay.length === 0 ? (
-					<EmptyState />
-				) : (
-					<div
-						className={
-							viewMode === "grid"
-								? "xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4 px-4"
-								: "flex flex-col"
-						}
-					>
-						{projectsToDisplay.map((project) => (
-							<ProjectItem
-								key={project.id}
-								project={project}
-								allProjectIds={projectsToDisplay.map((p) => p.id)}
-							/>
-						))}
-					</div>
-				)}
-			</main>
-		</div>
-	);
-}
-
-function ProjectsHeader() {
-	const { viewMode, isHydrated, setViewMode } = useProjectsStore();
-
-	return (
-		<header className="sticky top-0 z-20 px-8 bg-background flex flex-col gap-2">
-			<div className="flex items-center justify-between h-16 pt-2">
-				<div className="flex items-center gap-5">
-					<Breadcrumb>
-						<BreadcrumbList>
-							<BreadcrumbItem>
-								<BreadcrumbLink asChild>
-									<Link href="/" className="text-sm sm:text-base">
-										Home
-									</Link>
-								</BreadcrumbLink>
-							</BreadcrumbItem>
-							<BreadcrumbSeparator />
-							<BreadcrumbItem>
-								<BreadcrumbPage className="text-sm sm:text-base font-medium">
-									All projects
-								</BreadcrumbPage>
-							</BreadcrumbItem>
-						</BreadcrumbList>
-					</Breadcrumb>
-
-					<div className="hidden md:flex items-center rounded-md border p-1 px-1.5 h-10">
-						{VIEW_MODE_OPTIONS.map(({ mode, icon, label }) => (
-							<Button
-								key={mode}
-								variant="ghost"
-								size="icon"
-								className={cn(
-									"rounded-sm hover:bg-background",
-									isHydrated && viewMode === mode && "!bg-accent",
-								)}
-								onClick={() => setViewMode({ viewMode: mode })}
-								aria-label={label}
-								aria-pressed={isHydrated && viewMode === mode}
-							>
-								<HugeiconsIcon icon={icon} className="size-4" />
-							</Button>
-						))}
-					</div>
-				</div>
-
-				<div className="flex items-center gap-3 md:gap-4">
-					<SearchBar className="hidden md:block" />
-					<NewProjectButton />
-				</div>
-			</div>
-			<SearchBar className="block md:hidden mb-4" />
-		</header>
-	);
-}
-
-const SORT_LABELS: Record<TProjectSortKey, string> = {
-	createdAt: "Created",
-	updatedAt: "Modified",
-	name: "Name",
-	duration: "Duration",
-};
-
-function ProjectsToolbar({ projectIds }: { projectIds: string[] }) {
-	const {
-		selectedProjectIds,
-		sortKey,
-		sortOrder,
-		setSortOrder,
-		setSelectedProjects,
-		clearSelectedProjects,
-		viewMode,
-		setViewMode,
-	} = useProjectsStore();
-
-	const selectedProjectCount = selectedProjectIds.length;
-	const isAllSelected =
-		projectIds.length > 0 && selectedProjectCount === projectIds.length;
-	const hasSomeSelected =
-		selectedProjectCount > 0 && selectedProjectCount < projectIds.length;
-
-	const handleSelectAll = ({ checked }: { checked: boolean }) => {
-		if (checked) {
-			setSelectedProjects({ projectIds });
-			return;
-		}
-		clearSelectedProjects();
-	};
-
-	return (
-		<div className="sticky top-16 z-10 flex items-center justify-between px-6 h-14 pt-2 bg-background">
-			<div className="flex items-center gap-2">
-				<Label
-					className="flex items-center gap-3 cursor-pointer px-2"
-					htmlFor="select-all-projects"
-				>
-					<Checkbox
-						className="size-5"
-						id="select-all-projects"
-						checked={
-							isAllSelected ? true : hasSomeSelected ? "indeterminate" : false
-						}
-						onCheckedChange={(checked) =>
-							handleSelectAll({ checked: checked === true })
-						}
-					/>
-					<span className="text-muted-foreground hidden md:block">
-						Select all
-					</span>
-				</Label>
-
-				<div className="h-4 w-px bg-border/50" />
-
-				<SortDropdown>
-					<Button variant="text" className="text-muted-foreground pl-2">
-						{SORT_LABELS[sortKey]}
-					</Button>
-				</SortDropdown>
-				<Button
-					variant="text"
-					className="text-muted-foreground"
-					onClick={() =>
-						setSortOrder({
-							sortOrder: sortOrder === "asc" ? "desc" : "asc",
-						})
-					}
-					onKeyDown={(event) => {
-						if (event.key === "Enter" || event.key === " ") {
-							setSortOrder({
-								sortOrder: sortOrder === "asc" ? "desc" : "asc",
-							});
-						}
-					}}
-					aria-label={`Sort ${sortOrder === "asc" ? "ascending" : "descending"}`}
-				>
-					<HugeiconsIcon
-						icon={ArrowDown02Icon}
-						className={sortOrder === "asc" ? "rotate-180" : ""}
-					/>
-				</Button>
-
-				<div className="h-4 w-px bg-border/50 block md:hidden" />
-
-				<div className="flex md:hidden items-center gap-4">
-					{VIEW_MODE_OPTIONS.map(({ mode, icon, label }) => (
-						<Button
-							key={mode}
-							variant="text"
-							onClick={() => setViewMode({ viewMode: mode })}
-							aria-label={label}
-						>
-							<HugeiconsIcon
-								icon={icon}
-								className={cn(
-									viewMode === mode ? "text-primary" : "text-muted-foreground",
-								)}
-							/>
-						</Button>
-					))}
-				</div>
-			</div>
-			{selectedProjectCount > 0 ? <ProjectActions /> : null}
-		</div>
-	);
-}
-
-function SearchBar({
-	className,
-	collapsed,
-}: {
-	className?: string;
-	collapsed?: boolean;
-}) {
-	const { searchQuery, setSearchQuery } = useProjectsStore();
-
-	return (
-		<>
-			{collapsed ? (
-				<div className="block md:hidden">
-					<Button
-						size="icon"
-						variant="outline"
-						className="size-10.5 rounded-full"
-					>
-						<HugeiconsIcon icon={Search01Icon} />
-					</Button>
-				</div>
-			) : (
-				<div className={cn("relative", className)}>
-					<HugeiconsIcon
-						icon={Search01Icon}
-						className="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-						aria-hidden="true"
-					/>
-					<Input
-						placeholder="Search..."
-						value={searchQuery}
-						onChange={(event) => setSearchQuery({ query: event.target.value })}
-						size="lg"
-						className="pl-9"
-					/>
-				</div>
-			)}
-		</>
-	);
-}
-
-const PROJECT_ACTIONS = [
-	{
-		id: "duplicate",
-		label: "Duplicate",
-		icon: Copy01Icon,
-		variant: "outline" as const,
-	},
-	{
-		id: "delete",
-		label: "Delete",
-		icon: Delete02Icon,
-		variant: "destructive-foreground" as const,
-	},
-] as const;
-
-async function deleteProjects({
-	editor,
-	ids,
-}: {
-	editor: EditorCore;
-	ids: string[];
-}) {
-	await editor.project.deleteProjects({ ids });
-}
-
-async function duplicateProjects({
-	editor,
-	ids,
-}: {
-	editor: EditorCore;
-	ids: string[];
-}) {
-	await editor.project.duplicateProjects({ ids });
-}
-
-async function renameProject({
-	editor,
-	id,
-	name,
-}: {
-	editor: EditorCore;
-	id: string;
-	name: string;
-}) {
-	await editor.project.renameProject({ id, name });
-}
-
-function ProjectActions() {
-	const editor = useEditor();
-	const { selectedProjectIds, clearSelectedProjects } = useProjectsStore();
-	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-
-	const savedProjects = editor.project.getSavedProjects();
-	const selectedProjectNames = savedProjects
-		.filter((project) => selectedProjectIds.includes(project.id))
-		.map((project) => project.name);
-
-	const handleDuplicate = async () => {
-		await duplicateProjects({ editor, ids: selectedProjectIds });
-		clearSelectedProjects();
-	};
-
-	const handleDeleteClick = () => {
-		setIsDeleteDialogOpen(true);
-	};
-
-	const handleDeleteConfirm = async () => {
-		await deleteProjects({ editor, ids: selectedProjectIds });
-		clearSelectedProjects();
-		setIsDeleteDialogOpen(false);
-	};
-
-	const actionHandlers: Record<string, () => void> = {
-		duplicate: handleDuplicate,
-		delete: handleDeleteClick,
-	};
-
-	return (
-		<>
-			<div className="flex items-center gap-2.5 px-3">
-				<div className="hidden sm:flex items-center gap-2.5">
-					{PROJECT_ACTIONS.map((action) => (
-						<Button
-							key={action.id}
-							size="icon"
-							variant={action.variant}
-							className="size-9"
-							onClick={actionHandlers[action.id]}
-						>
-							<HugeiconsIcon icon={action.icon} />
-						</Button>
-					))}
-				</div>
-
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild className="sm:hidden">
-						<Button size="icon" variant="outline" className="size-9">
-							<HugeiconsIcon icon={MoreHorizontalIcon} />
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						{PROJECT_ACTIONS.map((action) => (
-							<DropdownMenuItem
-								key={action.id}
-								variant={action.id === "delete" ? "destructive" : undefined}
-								onClick={actionHandlers[action.id]}
-							>
-								<HugeiconsIcon icon={action.icon} />
-								{action.label}
-							</DropdownMenuItem>
-						))}
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-
-			<DeleteProjectDialog
-				isOpen={isDeleteDialogOpen}
-				onOpenChange={setIsDeleteDialogOpen}
-				projectNames={selectedProjectNames}
-				onConfirm={handleDeleteConfirm}
-			/>
-		</>
-	);
-}
-
-function SortDropdown({ children }: { children: React.ReactNode }) {
-	const { sortKey, setSortKey } = useProjectsStore();
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-			<DropdownMenuContent className="w-48" align="center">
-				<DropdownMenuCheckboxItem
-					checked={sortKey === "createdAt"}
-					onCheckedChange={() => setSortKey({ sortKey: "createdAt" })}
-				>
-					Created
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
-					checked={sortKey === "updatedAt"}
-					onCheckedChange={() => setSortKey({ sortKey: "updatedAt" })}
-				>
-					Modified
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
-					checked={sortKey === "name"}
-					onCheckedChange={() => setSortKey({ sortKey: "name" })}
-				>
-					Name
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
-					checked={sortKey === "duration"}
-					onCheckedChange={() => setSortKey({ sortKey: "duration" })}
-				>
-					Duration
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-}
-
-function NewProjectButton() {
-	const editor = useEditor();
-	const router = useRouter();
-
-	const handleCreateProject = async () => {
-		const projectId = await editor.project.createNewProject({
-			name: "New project",
-		});
-		router.push(`/editor/${projectId}`);
-	};
-
-	return (
-		<Button
-			size="lg"
-			className="flex px-5 md:px-6"
-			onClick={handleCreateProject}
-		>
-			<span className="text-sm font-medium hidden md:block">New project</span>
-			<span className="text-sm font-medium block md:hidden">New</span>
-		</Button>
-	);
-}
-
-function ProjectItem({
-	project,
-	allProjectIds,
-}: {
-	project: TProjectMetadata;
-	allProjectIds: string[];
-}) {
-	const {
-		selectedProjectIds,
-		viewMode,
-		setProjectSelected,
-		selectProjectRange,
-	} = useProjectsStore();
-	const selectedProjectIdSet = new Set(selectedProjectIds);
-	const isSelected = selectedProjectIdSet.has(project.id);
-	const selectedProjectCount = selectedProjectIds.length;
-	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-	const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
-	const editor = useEditor();
-	const durationLabel = formatProjectDuration({ duration: project.duration });
-	const isMultiSelect = selectedProjectCount > 1;
-	const isGridView = viewMode === "grid";
-
-	const handleRename = () => setIsRenameDialogOpen(true);
-	const handleDuplicate = async () => {
-		await duplicateProjects({ editor, ids: [project.id] });
-	};
-	const handleDeleteClick = () => setIsDeleteDialogOpen(true);
-	const handleInfoClick = () => setIsInfoDialogOpen(true);
-	const handleDeleteConfirm = async () => {
-		await deleteProjects({ editor, ids: [project.id] });
-		setIsDeleteDialogOpen(false);
-	};
-
-	const handleCheckboxChange = ({
-		checked,
-		shiftKey,
-	}: {
-		checked: boolean;
-		shiftKey: boolean;
-	}) => {
-		if (shiftKey && checked) {
-			selectProjectRange({ projectId: project.id, allProjectIds });
-			return;
-		}
-		setProjectSelected({ projectId: project.id, isSelected: checked });
-	};
-
-	const gridContent = (
-		<Card className="bg-background overflow-hidden border-none p-0">
-			<div className="bg-muted relative aspect-video">
-				<div className="absolute inset-0">
-					{project.thumbnail ? (
-						<Image
-							src={project.thumbnail}
-							alt="Project thumbnail"
-							fill
-							className="object-cover"
-						/>
-					) : (
-						<div className="flex size-full items-center justify-center">
-							<OcVideoIcon className="text-muted-foreground size-12 shrink-0" />
-						</div>
-					)}
-				</div>
-
-				{durationLabel && (
-					<div className="absolute bottom-2 right-2 bg-black/60 text-white text-xs font-semibold px-2 py-1 rounded-sm">
-						{durationLabel}
-					</div>
-				)}
-			</div>
-
-			<CardContent className="flex flex-col gap-2 px-0 pt-4">
-				<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium">
-					{project.name}
-				</h3>
-				<div className="text-muted-foreground flex items-center gap-1.5 text-sm">
-					<HugeiconsIcon icon={Calendar04Icon} className="size-4" />
-					<span>Created {formatDate({ date: project.createdAt })}</span>
-				</div>
-			</CardContent>
-		</Card>
-	);
-
-	const listRowContent = (
-		<div className="flex items-center gap-3 flex-1 min-w-0">
-			<div className="bg-muted relative size-10 rounded overflow-hidden shrink-0">
-				{project.thumbnail ? (
-					<Image
-						src={project.thumbnail}
-						alt="Project thumbnail"
-						fill
-						className="object-cover"
-					/>
-				) : (
-					<div className="flex size-full items-center justify-center">
-						<OcVideoIcon className="text-muted-foreground size-5 shrink-0" />
-					</div>
-				)}
-			</div>
-
-			<h3 className="group-hover:text-foreground/90 text-sm font-medium truncate flex-1 min-w-0">
-				{project.name}
-			</h3>
-
-			<span className="text-muted-foreground text-sm shrink-0 hidden sm:block">
-				{durationLabel ?? "—"}
-			</span>
-
-			<span className="text-muted-foreground text-sm shrink-0 w-auto pl-8 text-right hidden xs:block">
-				{formatDate({ date: project.createdAt })}
-			</span>
-		</div>
-	);
-
-	const listContent = (
-		<div
-			className={`flex items-center gap-4 py-2 px-4 border-b border-border/50 ${
-				isSelected ? "bg-primary/5" : ""
-			}`}
-		>
-			<Checkbox
-				checked={isSelected}
-				onMouseDown={(event) => event.preventDefault()}
-				onClick={(event) => {
-					handleCheckboxChange({
-						checked: !isSelected,
-						shiftKey: event.shiftKey,
-					});
-				}}
-				onCheckedChange={() => {}}
-				className="size-5 shrink-0"
-			/>
-
-			<Link href={`/editor/${project.id}`} className="flex-1 min-w-0">
-				{listRowContent}
-			</Link>
-
-			{!isMultiSelect && (
-				<ProjectMenu
-					isOpen={isDropdownOpen}
-					onOpenChange={setIsDropdownOpen}
-					variant="list"
-					onRenameClick={handleRename}
-					onDuplicateClick={handleDuplicate}
-					onDeleteClick={handleDeleteClick}
-					onInfoClick={handleInfoClick}
-				/>
-			)}
-		</div>
-	);
-
-	return (
-		<>
-			<ContextMenu>
-				<ContextMenuTrigger asChild>
-					<div className="group relative">
-						{isGridView ? (
-							<>
-								<Link href={`/editor/${project.id}`} className="block">
-									{gridContent}
-								</Link>
-
-								<Checkbox
-									checked={isSelected}
-									onMouseDown={(event) => event.preventDefault()}
-									onClick={(event) => {
-										handleCheckboxChange({
-											checked: !isSelected,
-											shiftKey: event.shiftKey,
-										});
-									}}
-									onCheckedChange={() => {}}
-									className={`absolute z-10 size-5 top-3 left-3 ${
-										isSelected || isDropdownOpen
-											? "opacity-100"
-											: "opacity-0 group-hover:opacity-100"
-									}`}
-								/>
-
-								{!isMultiSelect && (
-									<ProjectMenu
-										isOpen={isDropdownOpen}
-										onOpenChange={setIsDropdownOpen}
-										onRenameClick={handleRename}
-										onDuplicateClick={handleDuplicate}
-										onDeleteClick={handleDeleteClick}
-										onInfoClick={handleInfoClick}
-									/>
-								)}
-							</>
-						) : (
-							listContent
-						)}
-					</div>
-				</ContextMenuTrigger>
-				<ProjectContextMenuContent
-					onRenameClick={handleRename}
-					onDuplicateClick={handleDuplicate}
-					onDeleteClick={handleDeleteClick}
-					onInfoClick={handleInfoClick}
-				/>
-			</ContextMenu>
-
-			<RenameProjectDialog
-				isOpen={isRenameDialogOpen}
-				onOpenChange={setIsRenameDialogOpen}
-				projectName={project.name}
-				onConfirm={async (newName) => {
-					await renameProject({ editor, id: project.id, name: newName });
-					setIsRenameDialogOpen(false);
-				}}
-			/>
-
-			<DeleteProjectDialog
-				isOpen={isDeleteDialogOpen}
-				onOpenChange={setIsDeleteDialogOpen}
-				projectNames={[project.name]}
-				onConfirm={handleDeleteConfirm}
-			/>
-
-			<ProjectInfoDialog
-				isOpen={isInfoDialogOpen}
-				onOpenChange={setIsInfoDialogOpen}
-				project={project}
-			/>
-		</>
-	);
-}
-
-function ProjectContextMenuContent({
-	onRenameClick,
-	onDuplicateClick,
-	onDeleteClick,
-	onInfoClick,
-}: {
-	onRenameClick: () => void;
-	onDuplicateClick: () => void;
-	onDeleteClick: () => void;
-	onInfoClick: () => void;
-}) {
-	return (
-		<ContextMenuContent>
-			<ContextMenuItem
-				icon={<HugeiconsIcon icon={Edit03Icon} />}
-				onClick={onRenameClick}
-			>
-				Rename
-			</ContextMenuItem>
-			<ContextMenuItem
-				icon={<HugeiconsIcon icon={Copy01Icon} />}
-				onClick={onDuplicateClick}
-			>
-				Duplicate
-			</ContextMenuItem>
-			<ContextMenuItem
-				icon={<HugeiconsIcon icon={InformationCircleIcon} />}
-				onClick={onInfoClick}
-			>
-				Info
-			</ContextMenuItem>
-			<ContextMenuSeparator />
-			<ContextMenuItem
-				variant="destructive"
-				icon={<HugeiconsIcon icon={Delete02Icon} />}
-				onClick={onDeleteClick}
-			>
-				Delete
-			</ContextMenuItem>
-		</ContextMenuContent>
-	);
-}
-
-function ProjectMenu({
-	isOpen,
-	onOpenChange,
-	variant = "grid",
-	onRenameClick,
-	onDuplicateClick,
-	onDeleteClick,
-	onInfoClick,
-}: {
-	isOpen: boolean;
-	onOpenChange: (open: boolean) => void;
-	variant?: "grid" | "list";
-	onRenameClick: () => void;
-	onDuplicateClick: () => void;
-	onDeleteClick: () => void;
-	onInfoClick: () => void;
-}) {
-	const handleMenuClick = ({
-		event,
-	}: {
-		event: MouseEvent<HTMLButtonElement>;
-	}) => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
-
-	const handleMenuKeyDown = ({
-		event,
-	}: {
-		event: KeyboardEvent<HTMLButtonElement>;
-	}) => {
-		if (event.key !== "Enter" && event.key !== " ") {
-			return;
-		}
-		event.preventDefault();
-		event.stopPropagation();
-	};
-
-	const handleRename = () => {
-		onRenameClick();
-		onOpenChange(false);
-	};
-
-	const handleDuplicate = () => {
-		onDuplicateClick();
-		onOpenChange(false);
-	};
-
-	const handleDeleteClick = () => {
-		onDeleteClick();
-		onOpenChange(false);
-	};
-
-	const handleInfoClick = () => {
-		onInfoClick();
-		onOpenChange(false);
-	};
-
-	const isGrid = variant === "grid";
-
-	return (
-		<DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
-			<DropdownMenuTrigger asChild>
-				<Button
-					variant="background"
-					className={
-						isGrid
-							? `absolute z-10 top-3 right-3 ${isOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
-							: "!bg-transparent !shadow-none"
-					}
-					size="icon"
-					aria-label="Project menu"
-					onClick={(event) =>
-						handleMenuClick({
-							event: event as unknown as MouseEvent<HTMLButtonElement>,
-						})
-					}
-					onMouseDown={(event) => event.stopPropagation()}
-					onKeyDown={(event) =>
-						handleMenuKeyDown({
-							event: event as unknown as KeyboardEvent<HTMLButtonElement>,
-						})
-					}
-				>
-					<HugeiconsIcon
-						icon={MoreHorizontalIcon}
-						className="text-foreground"
-						aria-hidden="true"
-					/>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent className="w-48" align="end">
-				<DropdownMenuItem onClick={handleRename}>
-					<HugeiconsIcon icon={Edit03Icon} />
-					Rename
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={handleDuplicate}>
-					<HugeiconsIcon icon={Copy01Icon} />
-					Duplicate
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={handleInfoClick}>
-					<HugeiconsIcon icon={InformationCircleIcon} />
-					Info
-				</DropdownMenuItem>
-				<DropdownMenuItem variant="destructive" onClick={handleDeleteClick}>
-					<HugeiconsIcon icon={Delete02Icon} />
-					Delete
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-}
-
-function ProjectsSkeleton() {
-	const skeletonIds = Array.from(
-		{ length: 24 },
-		(_, index) => `skeleton-${index}`,
-	);
-
-	return (
-		<div className="px-4 xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
-			{skeletonIds.map((skeletonId) => (
-				<Card
-					key={skeletonId}
-					className="bg-background overflow-hidden border-none p-0"
-				>
-					<div className="bg-muted relative aspect-video">
-						<div className="absolute inset-0">
-							<Skeleton className="bg-muted/50 size-full" />
-						</div>
-					</div>
-					<CardContent className="flex flex-col gap-2 px-0 pt-4">
-						<Skeleton className="bg-muted/50 h-4 w-3/4" />
-						<div className="text-muted-foreground flex items-center gap-1.5">
-							<Skeleton className="bg-muted/50 size-4" />
-							<Skeleton className="bg-muted/50 h-4 w-24" />
-						</div>
-					</CardContent>
-				</Card>
-			))}
-		</div>
-	);
-}
-
-function EmptyState() {
-	const { searchQuery, setSearchQuery } = useProjectsStore();
-	const router = useRouter();
-	const editor = useEditor();
-	const savedProjects = editor.project.getSavedProjects();
-
-	const handleCreateProject = async () => {
-		try {
-			const projectId = await editor.project.createNewProject({
-				name: "New project",
-			});
-			router.push(`/editor/${projectId}`);
-		} catch (error) {
-			toast.error("Failed to create project", {
-				description:
-					error instanceof Error ? error.message : "Please try again",
-			});
-		}
-	};
-
-	if (savedProjects.length > 0) {
-		return (
-			<div className="flex flex-col items-center justify-center gap-5 py-16 text-center">
-				<div className="flex flex-col items-center gap-8">
-					<HugeiconsIcon
-						icon={Search01Icon}
-						className="text-muted-foreground size-16 bg-accent/35 border rounded-md p-4"
-					/>
-					<div className="flex flex-col items-center gap-3">
-						<h3 className="text-lg font-medium">No results found</h3>
-						<p className="text-muted-foreground max-w-md">
-							Your search for "{searchQuery}" did not return any results.
-						</p>
-					</div>
-				</div>
-				<Button
-					onClick={() => setSearchQuery({ query: "" })}
-					variant="outline"
-					size="lg"
-				>
-					Clear search
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
-			<div className="flex flex-col items-center gap-2">
-				<div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
-					<HugeiconsIcon
-						icon={Video01Icon}
-						className="text-muted-foreground size-8"
-					/>
-				</div>
-				<h3 className="text-lg font-medium">No projects yet</h3>
-				<p className="text-muted-foreground max-w-md">
-					Start creating your first project. Import media, edit, and export your
-					videos. All privately.
-				</p>
-			</div>
-			<Button size="lg" className="gap-2" onClick={handleCreateProject}>
-				<HugeiconsIcon icon={PlusSignIcon} />
-				Create your first project
-			</Button>
-		</div>
-	);
-}
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type { KeyboardEvent, MouseEvent } from "react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import type { EditorCore } from "@/core";
+import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { StoragePersistenceDialog } from "@/components/editor/dialogs/storage-persistence-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useEditor } from "@/hooks/use-editor";
+import { useProjectsStore } from "./store";
+import type {
+	TProjectMetadata,
+	TProjectSortKey,
+	TProjectSortOption,
+} from "@/lib/project/types";
+import { formatTimeCode } from "@/lib/time";
+import { formatDate } from "@/utils/date";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+	Calendar04Icon,
+	GridViewIcon,
+	LeftToRightListDashIcon,
+	PlusSignIcon,
+	Search01Icon,
+	Video01Icon,
+	MoreHorizontalIcon,
+	Delete02Icon,
+	Copy01Icon,
+	Edit03Icon,
+	ArrowDown02Icon,
+	InformationCircleIcon,
+} from "@hugeicons/core-free-icons";
+import { OcVideoIcon } from "@opencut/ui/icons";
+import { Label } from "@/components/ui/label";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
+import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
+import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
+import { cn } from "@/utils/ui";
+
+const formatProjectDuration = ({
+	duration,
+}: {
+	duration: number | undefined;
+}): string | null => {
+	if (duration === undefined) {
+		return null;
+	}
+
+	const format = duration >= 3600 ? "HH:MM:SS" : "MM:SS";
+	return formatTimeCode({ timeInSeconds: duration, format });
+};
+
+const VIEW_MODE_OPTIONS = [
+	{ mode: "grid" as const, icon: GridViewIcon, label: "Grid view" },
+	{ mode: "list" as const, icon: LeftToRightListDashIcon, label: "List view" },
+];
+
+export default function ProjectsPage() {
+	const { searchQuery, sortKey, sortOrder, viewMode } = useProjectsStore();
+	const editor = useEditor();
+	const sortOption: TProjectSortOption = `${sortKey}-${sortOrder}`;
+
+	const isLoading = useEditor((e) => e.project.getIsLoading());
+	const isInitialized = useEditor((e) => e.project.getIsInitialized());
+	const projectsToDisplay = useEditor((e) =>
+		e.project.getFilteredAndSortedProjects({ searchQuery, sortOption }),
+	);
+
+	useEffect(() => {
+		if (!editor.project.getIsInitialized()) {
+			editor.project.loadAllProjects();
+		}
+	}, [editor.project]);
+
+	return (
+		<div className="bg-background min-h-screen">
+			<MigrationDialog />
+			<StoragePersistenceDialog />
+			<ProjectsHeader />
+			<ProjectsToolbar projectIds={projectsToDisplay.map((p) => p.id)} />
+			<main className="mx-auto px-4 pt-2 pb-6 flex flex-col gap-4">
+				{isLoading || !isInitialized ? (
+					<ProjectsSkeleton />
+				) : projectsToDisplay.length === 0 ? (
+					<EmptyState />
+				) : (
+					<div
+						className={
+							viewMode === "grid"
+								? "xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4 px-4"
+								: "flex flex-col"
+						}
+					>
+						{projectsToDisplay.map((project) => (
+							<ProjectItem
+								key={project.id}
+								project={project}
+								allProjectIds={projectsToDisplay.map((p) => p.id)}
+							/>
+						))}
+					</div>
+				)}
+			</main>
+		</div>
+	);
+}
+
+function ProjectsHeader() {
+	const { viewMode, isHydrated, setViewMode } = useProjectsStore();
+
+	return (
+		<header className="sticky top-0 z-20 px-8 bg-background flex flex-col gap-2">
+			<div className="flex items-center justify-between h-16 pt-2">
+				<div className="flex items-center gap-5">
+					<Breadcrumb>
+						<BreadcrumbList>
+							<BreadcrumbItem>
+								<BreadcrumbLink asChild>
+									<Link href="/" className="text-sm sm:text-base">
+										Home
+									</Link>
+								</BreadcrumbLink>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbPage className="text-sm sm:text-base font-medium">
+									All projects
+								</BreadcrumbPage>
+							</BreadcrumbItem>
+						</BreadcrumbList>
+					</Breadcrumb>
+
+					<div className="hidden md:flex items-center rounded-md border p-1 px-1.5 h-10">
+						{VIEW_MODE_OPTIONS.map(({ mode, icon, label }) => (
+							<Button
+								key={mode}
+								variant="ghost"
+								size="icon"
+								className={cn(
+									"rounded-sm hover:bg-background",
+									isHydrated && viewMode === mode && "!bg-accent",
+								)}
+								onClick={() => setViewMode({ viewMode: mode })}
+								aria-label={label}
+								aria-pressed={isHydrated && viewMode === mode}
+							>
+								<HugeiconsIcon icon={icon} className="size-4" />
+							</Button>
+						))}
+					</div>
+				</div>
+
+				<div className="flex items-center gap-3 md:gap-4">
+					<SearchBar className="hidden md:block" />
+					<NewProjectButton />
+				</div>
+			</div>
+			<SearchBar className="block md:hidden mb-4" />
+		</header>
+	);
+}
+
+const SORT_LABELS: Record<TProjectSortKey, string> = {
+	createdAt: "Created",
+	updatedAt: "Modified",
+	name: "Name",
+	duration: "Duration",
+};
+
+function ProjectsToolbar({ projectIds }: { projectIds: string[] }) {
+	const {
+		selectedProjectIds,
+		sortKey,
+		sortOrder,
+		setSortOrder,
+		setSelectedProjects,
+		clearSelectedProjects,
+		viewMode,
+		setViewMode,
+	} = useProjectsStore();
+
+	const selectedProjectCount = selectedProjectIds.length;
+	const isAllSelected =
+		projectIds.length > 0 && selectedProjectCount === projectIds.length;
+	const hasSomeSelected =
+		selectedProjectCount > 0 && selectedProjectCount < projectIds.length;
+
+	const handleSelectAll = ({ checked }: { checked: boolean }) => {
+		if (checked) {
+			setSelectedProjects({ projectIds });
+			return;
+		}
+		clearSelectedProjects();
+	};
+
+	return (
+		<div className="sticky top-16 z-10 flex items-center justify-between px-6 h-14 pt-2 bg-background">
+			<div className="flex items-center gap-2">
+				<Label
+					className="flex items-center gap-3 cursor-pointer px-2"
+					htmlFor="select-all-projects"
+				>
+					<Checkbox
+						className="size-5"
+						id="select-all-projects"
+						checked={
+							isAllSelected ? true : hasSomeSelected ? "indeterminate" : false
+						}
+						onCheckedChange={(checked) =>
+							handleSelectAll({ checked: checked === true })
+						}
+					/>
+					<span className="text-muted-foreground hidden md:block">
+						Select all
+					</span>
+				</Label>
+
+				<div className="h-4 w-px bg-border/50" />
+
+				<SortDropdown>
+					<Button variant="text" className="text-muted-foreground pl-2">
+						{SORT_LABELS[sortKey]}
+					</Button>
+				</SortDropdown>
+				<Button
+					variant="text"
+					className="text-muted-foreground"
+					onClick={() =>
+						setSortOrder({
+							sortOrder: sortOrder === "asc" ? "desc" : "asc",
+						})
+					}
+					onKeyDown={(event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							setSortOrder({
+								sortOrder: sortOrder === "asc" ? "desc" : "asc",
+							});
+						}
+					}}
+					aria-label={`Sort ${sortOrder === "asc" ? "ascending" : "descending"}`}
+				>
+					<HugeiconsIcon
+						icon={ArrowDown02Icon}
+						className={sortOrder === "asc" ? "rotate-180" : ""}
+					/>
+				</Button>
+
+				<div className="h-4 w-px bg-border/50 block md:hidden" />
+
+				<div className="flex md:hidden items-center gap-4">
+					{VIEW_MODE_OPTIONS.map(({ mode, icon, label }) => (
+						<Button
+							key={mode}
+							variant="text"
+							onClick={() => setViewMode({ viewMode: mode })}
+							aria-label={label}
+						>
+							<HugeiconsIcon
+								icon={icon}
+								className={cn(
+									viewMode === mode ? "text-primary" : "text-muted-foreground",
+								)}
+							/>
+						</Button>
+					))}
+				</div>
+			</div>
+			{selectedProjectCount > 0 ? <ProjectActions /> : null}
+		</div>
+	);
+}
+
+function SearchBar({
+	className,
+	collapsed,
+}: {
+	className?: string;
+	collapsed?: boolean;
+}) {
+	const { searchQuery, setSearchQuery } = useProjectsStore();
+
+	return (
+		<>
+			{collapsed ? (
+				<div className="block md:hidden">
+					<Button
+						size="icon"
+						variant="outline"
+						className="size-10.5 rounded-full"
+					>
+						<HugeiconsIcon icon={Search01Icon} />
+					</Button>
+				</div>
+			) : (
+				<div className={cn("relative", className)}>
+					<HugeiconsIcon
+						icon={Search01Icon}
+						className="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
+						aria-hidden="true"
+					/>
+					<Input
+						placeholder="Search..."
+						value={searchQuery}
+						onChange={(event) => setSearchQuery({ query: event.target.value })}
+						size="lg"
+						className="pl-9"
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
+const PROJECT_ACTIONS = [
+	{
+		id: "duplicate",
+		label: "Duplicate",
+		icon: Copy01Icon,
+		variant: "outline" as const,
+	},
+	{
+		id: "delete",
+		label: "Delete",
+		icon: Delete02Icon,
+		variant: "destructive-foreground" as const,
+	},
+] as const;
+
+async function deleteProjects({
+	editor,
+	ids,
+}: {
+	editor: EditorCore;
+	ids: string[];
+}) {
+	await editor.project.deleteProjects({ ids });
+}
+
+async function duplicateProjects({
+	editor,
+	ids,
+}: {
+	editor: EditorCore;
+	ids: string[];
+}) {
+	await editor.project.duplicateProjects({ ids });
+}
+
+async function renameProject({
+	editor,
+	id,
+	name,
+}: {
+	editor: EditorCore;
+	id: string;
+	name: string;
+}) {
+	await editor.project.renameProject({ id, name });
+}
+
+function ProjectActions() {
+	const editor = useEditor();
+	const { selectedProjectIds, clearSelectedProjects } = useProjectsStore();
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+	const savedProjects = editor.project.getSavedProjects();
+	const selectedProjectNames = savedProjects
+		.filter((project) => selectedProjectIds.includes(project.id))
+		.map((project) => project.name);
+
+	const handleDuplicate = async () => {
+		await duplicateProjects({ editor, ids: selectedProjectIds });
+		clearSelectedProjects();
+	};
+
+	const handleDeleteClick = () => {
+		setIsDeleteDialogOpen(true);
+	};
+
+	const handleDeleteConfirm = async () => {
+		await deleteProjects({ editor, ids: selectedProjectIds });
+		clearSelectedProjects();
+		setIsDeleteDialogOpen(false);
+	};
+
+	const actionHandlers: Record<string, () => void> = {
+		duplicate: handleDuplicate,
+		delete: handleDeleteClick,
+	};
+
+	return (
+		<>
+			<div className="flex items-center gap-2.5 px-3">
+				<div className="hidden sm:flex items-center gap-2.5">
+					{PROJECT_ACTIONS.map((action) => (
+						<Button
+							key={action.id}
+							size="icon"
+							variant={action.variant}
+							className="size-9"
+							onClick={actionHandlers[action.id]}
+						>
+							<HugeiconsIcon icon={action.icon} />
+						</Button>
+					))}
+				</div>
+
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild className="sm:hidden">
+						<Button size="icon" variant="outline" className="size-9">
+							<HugeiconsIcon icon={MoreHorizontalIcon} />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						{PROJECT_ACTIONS.map((action) => (
+							<DropdownMenuItem
+								key={action.id}
+								variant={action.id === "delete" ? "destructive" : undefined}
+								onClick={actionHandlers[action.id]}
+							>
+								<HugeiconsIcon icon={action.icon} />
+								{action.label}
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<DeleteProjectDialog
+				isOpen={isDeleteDialogOpen}
+				onOpenChange={setIsDeleteDialogOpen}
+				projectNames={selectedProjectNames}
+				onConfirm={handleDeleteConfirm}
+			/>
+		</>
+	);
+}
+
+function SortDropdown({ children }: { children: React.ReactNode }) {
+	const { sortKey, setSortKey } = useProjectsStore();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-48" align="center">
+				<DropdownMenuCheckboxItem
+					checked={sortKey === "createdAt"}
+					onCheckedChange={() => setSortKey({ sortKey: "createdAt" })}
+				>
+					Created
+				</DropdownMenuCheckboxItem>
+				<DropdownMenuCheckboxItem
+					checked={sortKey === "updatedAt"}
+					onCheckedChange={() => setSortKey({ sortKey: "updatedAt" })}
+				>
+					Modified
+				</DropdownMenuCheckboxItem>
+				<DropdownMenuCheckboxItem
+					checked={sortKey === "name"}
+					onCheckedChange={() => setSortKey({ sortKey: "name" })}
+				>
+					Name
+				</DropdownMenuCheckboxItem>
+				<DropdownMenuCheckboxItem
+					checked={sortKey === "duration"}
+					onCheckedChange={() => setSortKey({ sortKey: "duration" })}
+				>
+					Duration
+				</DropdownMenuCheckboxItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+function NewProjectButton() {
+	const editor = useEditor();
+	const router = useRouter();
+
+	const handleCreateProject = async () => {
+		const projectId = await editor.project.createNewProject({
+			name: "New project",
+		});
+		router.push(`/editor/${projectId}`);
+	};
+
+	return (
+		<Button
+			size="lg"
+			className="flex px-5 md:px-6"
+			onClick={handleCreateProject}
+		>
+			<span className="text-sm font-medium hidden md:block">New project</span>
+			<span className="text-sm font-medium block md:hidden">New</span>
+		</Button>
+	);
+}
+
+function ProjectItem({
+	project,
+	allProjectIds,
+}: {
+	project: TProjectMetadata;
+	allProjectIds: string[];
+}) {
+	const {
+		selectedProjectIds,
+		viewMode,
+		setProjectSelected,
+		selectProjectRange,
+	} = useProjectsStore();
+	const selectedProjectIdSet = new Set(selectedProjectIds);
+	const isSelected = selectedProjectIdSet.has(project.id);
+	const selectedProjectCount = selectedProjectIds.length;
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+	const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
+	const editor = useEditor();
+	const durationLabel = formatProjectDuration({ duration: project.duration });
+	const isMultiSelect = selectedProjectCount > 1;
+	const isGridView = viewMode === "grid";
+
+	const handleRename = () => setIsRenameDialogOpen(true);
+	const handleDuplicate = async () => {
+		await duplicateProjects({ editor, ids: [project.id] });
+	};
+	const handleDeleteClick = () => setIsDeleteDialogOpen(true);
+	const handleInfoClick = () => setIsInfoDialogOpen(true);
+	const handleDeleteConfirm = async () => {
+		await deleteProjects({ editor, ids: [project.id] });
+		setIsDeleteDialogOpen(false);
+	};
+
+	const handleCheckboxChange = ({
+		checked,
+		shiftKey,
+	}: {
+		checked: boolean;
+		shiftKey: boolean;
+	}) => {
+		if (shiftKey && checked) {
+			selectProjectRange({ projectId: project.id, allProjectIds });
+			return;
+		}
+		setProjectSelected({ projectId: project.id, isSelected: checked });
+	};
+
+	const gridContent = (
+		<Card className="bg-background overflow-hidden border-none p-0">
+			<div className="bg-muted relative aspect-video">
+				<div className="absolute inset-0">
+					{project.thumbnail ? (
+						<Image
+							src={project.thumbnail}
+							alt="Project thumbnail"
+							fill
+							className="object-cover"
+						/>
+					) : (
+						<div className="flex size-full items-center justify-center">
+							<OcVideoIcon className="text-muted-foreground size-12 shrink-0" />
+						</div>
+					)}
+				</div>
+
+				{durationLabel && (
+					<div className="absolute bottom-2 right-2 bg-black/60 text-white text-xs font-semibold px-2 py-1 rounded-sm">
+						{durationLabel}
+					</div>
+				)}
+			</div>
+
+			<CardContent className="flex flex-col gap-2 px-0 pt-4">
+				<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium">
+					{project.name}
+				</h3>
+				<div className="text-muted-foreground flex items-center gap-1.5 text-sm">
+					<HugeiconsIcon icon={Calendar04Icon} className="size-4" />
+					<span>Created {formatDate({ date: project.createdAt })}</span>
+				</div>
+			</CardContent>
+		</Card>
+	);
+
+	const listRowContent = (
+		<div className="flex items-center gap-3 flex-1 min-w-0">
+			<div className="bg-muted relative size-10 rounded overflow-hidden shrink-0">
+				{project.thumbnail ? (
+					<Image
+						src={project.thumbnail}
+						alt="Project thumbnail"
+						fill
+						className="object-cover"
+					/>
+				) : (
+					<div className="flex size-full items-center justify-center">
+						<OcVideoIcon className="text-muted-foreground size-5 shrink-0" />
+					</div>
+				)}
+			</div>
+
+			<h3 className="group-hover:text-foreground/90 text-sm font-medium truncate flex-1 min-w-0">
+				{project.name}
+			</h3>
+
+			<span className="text-muted-foreground text-sm shrink-0 hidden sm:block">
+				{durationLabel ?? "—"}
+			</span>
+
+			<span className="text-muted-foreground text-sm shrink-0 w-auto pl-8 text-right hidden xs:block">
+				{formatDate({ date: project.createdAt })}
+			</span>
+		</div>
+	);
+
+	const listContent = (
+		<div
+			className={`flex items-center gap-4 py-2 px-4 border-b border-border/50 ${
+				isSelected ? "bg-primary/5" : ""
+			}`}
+		>
+			<Checkbox
+				checked={isSelected}
+				onMouseDown={(event) => event.preventDefault()}
+				onClick={(event) => {
+					handleCheckboxChange({
+						checked: !isSelected,
+						shiftKey: event.shiftKey,
+					});
+				}}
+				onCheckedChange={() => {}}
+				className="size-5 shrink-0"
+			/>
+
+			<Link href={`/editor/${project.id}`} className="flex-1 min-w-0">
+				{listRowContent}
+			</Link>
+
+			{!isMultiSelect && (
+				<ProjectMenu
+					isOpen={isDropdownOpen}
+					onOpenChange={setIsDropdownOpen}
+					variant="list"
+					onRenameClick={handleRename}
+					onDuplicateClick={handleDuplicate}
+					onDeleteClick={handleDeleteClick}
+					onInfoClick={handleInfoClick}
+				/>
+			)}
+		</div>
+	);
+
+	return (
+		<>
+			<ContextMenu>
+				<ContextMenuTrigger asChild>
+					<div className="group relative">
+						{isGridView ? (
+							<>
+								<Link href={`/editor/${project.id}`} className="block">
+									{gridContent}
+								</Link>
+
+								<Checkbox
+									checked={isSelected}
+									onMouseDown={(event) => event.preventDefault()}
+									onClick={(event) => {
+										handleCheckboxChange({
+											checked: !isSelected,
+											shiftKey: event.shiftKey,
+										});
+									}}
+									onCheckedChange={() => {}}
+									className={`absolute z-10 size-5 top-3 left-3 ${
+										isSelected || isDropdownOpen
+											? "opacity-100"
+											: "opacity-0 group-hover:opacity-100"
+									}`}
+								/>
+
+								{!isMultiSelect && (
+									<ProjectMenu
+										isOpen={isDropdownOpen}
+										onOpenChange={setIsDropdownOpen}
+										onRenameClick={handleRename}
+										onDuplicateClick={handleDuplicate}
+										onDeleteClick={handleDeleteClick}
+										onInfoClick={handleInfoClick}
+									/>
+								)}
+							</>
+						) : (
+							listContent
+						)}
+					</div>
+				</ContextMenuTrigger>
+				<ProjectContextMenuContent
+					onRenameClick={handleRename}
+					onDuplicateClick={handleDuplicate}
+					onDeleteClick={handleDeleteClick}
+					onInfoClick={handleInfoClick}
+				/>
+			</ContextMenu>
+
+			<RenameProjectDialog
+				isOpen={isRenameDialogOpen}
+				onOpenChange={setIsRenameDialogOpen}
+				projectName={project.name}
+				onConfirm={async (newName) => {
+					await renameProject({ editor, id: project.id, name: newName });
+					setIsRenameDialogOpen(false);
+				}}
+			/>
+
+			<DeleteProjectDialog
+				isOpen={isDeleteDialogOpen}
+				onOpenChange={setIsDeleteDialogOpen}
+				projectNames={[project.name]}
+				onConfirm={handleDeleteConfirm}
+			/>
+
+			<ProjectInfoDialog
+				isOpen={isInfoDialogOpen}
+				onOpenChange={setIsInfoDialogOpen}
+				project={project}
+			/>
+		</>
+	);
+}
+
+function ProjectContextMenuContent({
+	onRenameClick,
+	onDuplicateClick,
+	onDeleteClick,
+	onInfoClick,
+}: {
+	onRenameClick: () => void;
+	onDuplicateClick: () => void;
+	onDeleteClick: () => void;
+	onInfoClick: () => void;
+}) {
+	return (
+		<ContextMenuContent>
+			<ContextMenuItem
+				icon={<HugeiconsIcon icon={Edit03Icon} />}
+				onClick={onRenameClick}
+			>
+				Rename
+			</ContextMenuItem>
+			<ContextMenuItem
+				icon={<HugeiconsIcon icon={Copy01Icon} />}
+				onClick={onDuplicateClick}
+			>
+				Duplicate
+			</ContextMenuItem>
+			<ContextMenuItem
+				icon={<HugeiconsIcon icon={InformationCircleIcon} />}
+				onClick={onInfoClick}
+			>
+				Info
+			</ContextMenuItem>
+			<ContextMenuSeparator />
+			<ContextMenuItem
+				variant="destructive"
+				icon={<HugeiconsIcon icon={Delete02Icon} />}
+				onClick={onDeleteClick}
+			>
+				Delete
+			</ContextMenuItem>
+		</ContextMenuContent>
+	);
+}
+
+function ProjectMenu({
+	isOpen,
+	onOpenChange,
+	variant = "grid",
+	onRenameClick,
+	onDuplicateClick,
+	onDeleteClick,
+	onInfoClick,
+}: {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	variant?: "grid" | "list";
+	onRenameClick: () => void;
+	onDuplicateClick: () => void;
+	onDeleteClick: () => void;
+	onInfoClick: () => void;
+}) {
+	const handleMenuClick = ({
+		event,
+	}: {
+		event: MouseEvent<HTMLButtonElement>;
+	}) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	const handleMenuKeyDown = ({
+		event,
+	}: {
+		event: KeyboardEvent<HTMLButtonElement>;
+	}) => {
+		if (event.key !== "Enter" && event.key !== " ") {
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	const handleRename = () => {
+		onRenameClick();
+		onOpenChange(false);
+	};
+
+	const handleDuplicate = () => {
+		onDuplicateClick();
+		onOpenChange(false);
+	};
+
+	const handleDeleteClick = () => {
+		onDeleteClick();
+		onOpenChange(false);
+	};
+
+	const handleInfoClick = () => {
+		onInfoClick();
+		onOpenChange(false);
+	};
+
+	const isGrid = variant === "grid";
+
+	return (
+		<DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
+			<DropdownMenuTrigger asChild>
+				<Button
+					variant="background"
+					className={
+						isGrid
+							? `absolute z-10 top-3 right-3 ${isOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
+							: "!bg-transparent !shadow-none"
+					}
+					size="icon"
+					aria-label="Project menu"
+					onClick={(event) =>
+						handleMenuClick({
+							event: event as unknown as MouseEvent<HTMLButtonElement>,
+						})
+					}
+					onMouseDown={(event) => event.stopPropagation()}
+					onKeyDown={(event) =>
+						handleMenuKeyDown({
+							event: event as unknown as KeyboardEvent<HTMLButtonElement>,
+						})
+					}
+				>
+					<HugeiconsIcon
+						icon={MoreHorizontalIcon}
+						className="text-foreground"
+						aria-hidden="true"
+					/>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-48" align="end">
+				<DropdownMenuItem onClick={handleRename}>
+					<HugeiconsIcon icon={Edit03Icon} />
+					Rename
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleDuplicate}>
+					<HugeiconsIcon icon={Copy01Icon} />
+					Duplicate
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleInfoClick}>
+					<HugeiconsIcon icon={InformationCircleIcon} />
+					Info
+				</DropdownMenuItem>
+				<DropdownMenuItem variant="destructive" onClick={handleDeleteClick}>
+					<HugeiconsIcon icon={Delete02Icon} />
+					Delete
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+function ProjectsSkeleton() {
+	const skeletonIds = Array.from(
+		{ length: 24 },
+		(_, index) => `skeleton-${index}`,
+	);
+
+	return (
+		<div className="px-4 xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+			{skeletonIds.map((skeletonId) => (
+				<Card
+					key={skeletonId}
+					className="bg-background overflow-hidden border-none p-0"
+				>
+					<div className="bg-muted relative aspect-video">
+						<div className="absolute inset-0">
+							<Skeleton className="bg-muted/50 size-full" />
+						</div>
+					</div>
+					<CardContent className="flex flex-col gap-2 px-0 pt-4">
+						<Skeleton className="bg-muted/50 h-4 w-3/4" />
+						<div className="text-muted-foreground flex items-center gap-1.5">
+							<Skeleton className="bg-muted/50 size-4" />
+							<Skeleton className="bg-muted/50 h-4 w-24" />
+						</div>
+					</CardContent>
+				</Card>
+			))}
+		</div>
+	);
+}
+
+function EmptyState() {
+	const { searchQuery, setSearchQuery } = useProjectsStore();
+	const router = useRouter();
+	const editor = useEditor();
+	const savedProjects = editor.project.getSavedProjects();
+
+	const handleCreateProject = async () => {
+		try {
+			const projectId = await editor.project.createNewProject({
+				name: "New project",
+			});
+			router.push(`/editor/${projectId}`);
+		} catch (error) {
+			toast.error("Failed to create project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+		}
+	};
+
+	if (savedProjects.length > 0) {
+		return (
+			<div className="flex flex-col items-center justify-center gap-5 py-16 text-center">
+				<div className="flex flex-col items-center gap-8">
+					<HugeiconsIcon
+						icon={Search01Icon}
+						className="text-muted-foreground size-16 bg-accent/35 border rounded-md p-4"
+					/>
+					<div className="flex flex-col items-center gap-3">
+						<h3 className="text-lg font-medium">No results found</h3>
+						<p className="text-muted-foreground max-w-md">
+							Your search for "{searchQuery}" did not return any results.
+						</p>
+					</div>
+				</div>
+				<Button
+					onClick={() => setSearchQuery({ query: "" })}
+					variant="outline"
+					size="lg"
+				>
+					Clear search
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
+			<div className="flex flex-col items-center gap-2">
+				<div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
+					<HugeiconsIcon
+						icon={Video01Icon}
+						className="text-muted-foreground size-8"
+					/>
+				</div>
+				<h3 className="text-lg font-medium">No projects yet</h3>
+				<p className="text-muted-foreground max-w-md">
+					Start creating your first project. Import media, edit, and export your
+					videos. All privately.
+				</p>
+			</div>
+			<Button size="lg" className="gap-2" onClick={handleCreateProject}>
+				<HugeiconsIcon icon={PlusSignIcon} />
+				Create your first project
+			</Button>
+		</div>
+	);
+}
diff --git a/apps/web/src/app/projects/store.ts b/apps/web/src/app/projects/store.ts
index 2c79aa0a..71f89b4a 100644
--- a/apps/web/src/app/projects/store.ts
+++ b/apps/web/src/app/projects/store.ts
@@ -1,135 +1,135 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import type { TProjectSortKey } from "@/lib/project/types";
-
-export type ProjectsViewMode = "grid" | "list";
-
-interface ProjectsState {
-	searchQuery: string;
-	sortKey: TProjectSortKey;
-	sortOrder: "asc" | "desc";
-	viewMode: ProjectsViewMode;
-	selectedProjectIds: string[];
-	lastSelectedProjectId: string | null;
-	isHydrated: boolean;
-	setIsHydrated: ({ isHydrated }: { isHydrated: boolean }) => void;
-	setSearchQuery: ({ query }: { query: string }) => void;
-	setSortKey: ({ sortKey }: { sortKey: TProjectSortKey }) => void;
-	setSortOrder: ({ sortOrder }: { sortOrder: "asc" | "desc" }) => void;
-	toggleSortOrder: () => void;
-	setViewMode: ({ viewMode }: { viewMode: ProjectsViewMode }) => void;
-	setSelectedProjects: ({ projectIds }: { projectIds: string[] }) => void;
-	clearSelectedProjects: () => void;
-	setProjectSelected: ({
-		projectId,
-		isSelected,
-	}: {
-		projectId: string;
-		isSelected: boolean;
-	}) => void;
-	selectProjectRange: ({
-		projectId,
-		allProjectIds,
-	}: {
-		projectId: string;
-		allProjectIds: string[];
-	}) => void;
-}
-
-const getNextSelectedProjectIds = ({
-	selectedProjectIds,
-	projectId,
-	isSelected,
-}: {
-	selectedProjectIds: string[];
-	projectId: string;
-	isSelected: boolean;
-}): string[] => {
-	const selectedProjectIdSet = new Set(selectedProjectIds);
-
-	if (isSelected) {
-		selectedProjectIdSet.add(projectId);
-		return Array.from(selectedProjectIdSet);
-	}
-
-	selectedProjectIdSet.delete(projectId);
-	return Array.from(selectedProjectIdSet);
-};
-
-export const useProjectsStore = create<ProjectsState>()(
-	persist(
-		(set) => ({
-			searchQuery: "",
-			sortKey: "updatedAt",
-			sortOrder: "desc",
-			viewMode: "grid",
-			selectedProjectIds: [],
-			lastSelectedProjectId: null,
-			isHydrated: false,
-			setIsHydrated: ({ isHydrated }) => set({ isHydrated }),
-			setSearchQuery: ({ query }) => set({ searchQuery: query }),
-			setSortKey: ({ sortKey }) => set({ sortKey }),
-			setSortOrder: ({ sortOrder }) => set({ sortOrder }),
-			toggleSortOrder: () =>
-				set((state) => ({
-					sortOrder: state.sortOrder === "asc" ? "desc" : "asc",
-				})),
-			setViewMode: ({ viewMode }) => set({ viewMode }),
-			setSelectedProjects: ({ projectIds }) =>
-				set({ selectedProjectIds: projectIds }),
-			clearSelectedProjects: () =>
-				set({ selectedProjectIds: [], lastSelectedProjectId: null }),
-			setProjectSelected: ({ projectId, isSelected }) =>
-				set((state) => ({
-					selectedProjectIds: getNextSelectedProjectIds({
-						selectedProjectIds: state.selectedProjectIds,
-						projectId,
-						isSelected,
-					}),
-					lastSelectedProjectId: isSelected
-						? projectId
-						: state.lastSelectedProjectId,
-				})),
-			selectProjectRange: ({ projectId, allProjectIds }) =>
-				set((state) => {
-					const anchorId = state.lastSelectedProjectId;
-					if (!anchorId) {
-						return {
-							selectedProjectIds: [projectId],
-							lastSelectedProjectId: projectId,
-						};
-					}
-
-					const anchorIndex = allProjectIds.indexOf(anchorId);
-					const targetIndex = allProjectIds.indexOf(projectId);
-
-					if (anchorIndex === -1 || targetIndex === -1) {
-						return {
-							selectedProjectIds: [projectId],
-							lastSelectedProjectId: projectId,
-						};
-					}
-
-					const startIndex = Math.min(anchorIndex, targetIndex);
-					const endIndex = Math.max(anchorIndex, targetIndex);
-					const rangeIds = allProjectIds.slice(startIndex, endIndex + 1);
-
-					const merged = new Set([...state.selectedProjectIds, ...rangeIds]);
-					return {
-						selectedProjectIds: Array.from(merged),
-					};
-				}),
-		}),
-		{
-			name: "projects-view-mode",
-			partialize: (state) => ({
-				viewMode: state.viewMode,
-				sortKey: state.sortKey,
-				sortOrder: state.sortOrder,
-			}),
-			onRehydrateStorage: () => (state) => {
-				state?.setIsHydrated({ isHydrated: true });
-			},
-		},
-	),
-);
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { TProjectSortKey } from "@/lib/project/types";
+
+export type ProjectsViewMode = "grid" | "list";
+
+interface ProjectsState {
+	searchQuery: string;
+	sortKey: TProjectSortKey;
+	sortOrder: "asc" | "desc";
+	viewMode: ProjectsViewMode;
+	selectedProjectIds: string[];
+	lastSelectedProjectId: string | null;
+	isHydrated: boolean;
+	setIsHydrated: ({ isHydrated }: { isHydrated: boolean }) => void;
+	setSearchQuery: ({ query }: { query: string }) => void;
+	setSortKey: ({ sortKey }: { sortKey: TProjectSortKey }) => void;
+	setSortOrder: ({ sortOrder }: { sortOrder: "asc" | "desc" }) => void;
+	toggleSortOrder: () => void;
+	setViewMode: ({ viewMode }: { viewMode: ProjectsViewMode }) => void;
+	setSelectedProjects: ({ projectIds }: { projectIds: string[] }) => void;
+	clearSelectedProjects: () => void;
+	setProjectSelected: ({
+		projectId,
+		isSelected,
+	}: {
+		projectId: string;
+		isSelected: boolean;
+	}) => void;
+	selectProjectRange: ({
+		projectId,
+		allProjectIds,
+	}: {
+		projectId: string;
+		allProjectIds: string[];
+	}) => void;
+}
+
+const getNextSelectedProjectIds = ({
+	selectedProjectIds,
+	projectId,
+	isSelected,
+}: {
+	selectedProjectIds: string[];
+	projectId: string;
+	isSelected: boolean;
+}): string[] => {
+	const selectedProjectIdSet = new Set(selectedProjectIds);
+
+	if (isSelected) {
+		selectedProjectIdSet.add(projectId);
+		return Array.from(selectedProjectIdSet);
+	}
+
+	selectedProjectIdSet.delete(projectId);
+	return Array.from(selectedProjectIdSet);
+};
+
+export const useProjectsStore = create<ProjectsState>()(
+	persist(
+		(set) => ({
+			searchQuery: "",
+			sortKey: "updatedAt",
+			sortOrder: "desc",
+			viewMode: "grid",
+			selectedProjectIds: [],
+			lastSelectedProjectId: null,
+			isHydrated: false,
+			setIsHydrated: ({ isHydrated }) => set({ isHydrated }),
+			setSearchQuery: ({ query }) => set({ searchQuery: query }),
+			setSortKey: ({ sortKey }) => set({ sortKey }),
+			setSortOrder: ({ sortOrder }) => set({ sortOrder }),
+			toggleSortOrder: () =>
+				set((state) => ({
+					sortOrder: state.sortOrder === "asc" ? "desc" : "asc",
+				})),
+			setViewMode: ({ viewMode }) => set({ viewMode }),
+			setSelectedProjects: ({ projectIds }) =>
+				set({ selectedProjectIds: projectIds }),
+			clearSelectedProjects: () =>
+				set({ selectedProjectIds: [], lastSelectedProjectId: null }),
+			setProjectSelected: ({ projectId, isSelected }) =>
+				set((state) => ({
+					selectedProjectIds: getNextSelectedProjectIds({
+						selectedProjectIds: state.selectedProjectIds,
+						projectId,
+						isSelected,
+					}),
+					lastSelectedProjectId: isSelected
+						? projectId
+						: state.lastSelectedProjectId,
+				})),
+			selectProjectRange: ({ projectId, allProjectIds }) =>
+				set((state) => {
+					const anchorId = state.lastSelectedProjectId;
+					if (!anchorId) {
+						return {
+							selectedProjectIds: [projectId],
+							lastSelectedProjectId: projectId,
+						};
+					}
+
+					const anchorIndex = allProjectIds.indexOf(anchorId);
+					const targetIndex = allProjectIds.indexOf(projectId);
+
+					if (anchorIndex === -1 || targetIndex === -1) {
+						return {
+							selectedProjectIds: [projectId],
+							lastSelectedProjectId: projectId,
+						};
+					}
+
+					const startIndex = Math.min(anchorIndex, targetIndex);
+					const endIndex = Math.max(anchorIndex, targetIndex);
+					const rangeIds = allProjectIds.slice(startIndex, endIndex + 1);
+
+					const merged = new Set([...state.selectedProjectIds, ...rangeIds]);
+					return {
+						selectedProjectIds: Array.from(merged),
+					};
+				}),
+		}),
+		{
+			name: "projects-view-mode",
+			partialize: (state) => ({
+				viewMode: state.viewMode,
+				sortKey: state.sortKey,
+				sortOrder: state.sortOrder,
+			}),
+			onRehydrateStorage: () => (state) => {
+				state?.setIsHydrated({ isHydrated: true });
+			},
+		},
+	),
+);
diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
index 59c36d78..a0c3d9be 100644
--- a/apps/web/src/app/roadmap/page.tsx
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -1,146 +1,146 @@
-import type { Metadata } from "next";
-import { BasePage } from "@/app/base-page";
-import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
-import { Badge } from "@/components/ui/badge";
-import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
-import { cn } from "@/utils/ui";
-
-const LAST_UPDATED = "February 25, 2026";
-
-type StatusType = "complete" | "pending" | "default" | "info";
-
-interface Status {
-	text: string;
-	type: StatusType;
-}
-
-interface RoadmapItem {
-	title: string;
-	description: string;
-	status: Status;
-}
-
-const roadmapItems: RoadmapItem[] = [
-	{
-		title: "Start",
-		description:
-			"This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.",
-		status: {
-			text: "Completed",
-			type: "complete",
-		},
-	},
-	{
-		title: "Core UI",
-		description:
-			"Build the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.",
-		status: {
-			text: "Completed",
-			type: "complete",
-		},
-	},
-	{
-		title: "Essential functionality",
-		description:
-			"Everything that makes a video editor **useful**. Timeline interactivity, storage, effects, transitions, etc.",
-		status: {
-			text: "In progress",
-			type: "pending",
-		},
-	},
-	{
-		title: "Native app (mobile/desktop)",
-		description:
-			"Native OpenCut apps for Mac, Windows, Linux, and iOS/Android.",
-		status: {
-			text: "Not started",
-			type: "default",
-		},
-	},
-];
-
-export const metadata: Metadata = {
-	title: "Roadmap - OpenCut",
-	description:
-		"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-	openGraph: {
-		title: "OpenCut Roadmap - What's Coming Next",
-		description:
-			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-		type: "website",
-		images: [
-			{
-				url: "/open-graph/roadmap.jpg",
-				width: 1200,
-				height: 630,
-				alt: "OpenCut Roadmap",
-			},
-		],
-	},
-	twitter: {
-		card: "summary_large_image",
-		title: "OpenCut Roadmap - What's Coming Next",
-		description:
-			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-		images: ["/open-graph/roadmap.jpg"],
-	},
-};
-
-export default function RoadmapPage() {
-	return (
-		<BasePage
-			title="Roadmap"
-			description={`What's coming next for OpenCut (last updated: ${LAST_UPDATED})`}
-		>
-			<div className="mx-auto flex max-w-4xl flex-col gap-16">
-				<div className="flex flex-col gap-6">
-					{roadmapItems.map((item, index) => (
-						<RoadmapItem key={item.title} item={item} index={index} />
-					))}
-				</div>
-				<GitHubContributeSection
-					title="Want to help?"
-					description="OpenCut is open source and built by the community. Every contribution,
-          no matter how small, helps us build the best free video editor
-          possible."
-				/>
-			</div>
-		</BasePage>
-	);
-}
-
-function RoadmapItem({ item, index }: { item: RoadmapItem; index: number }) {
-	return (
-		<div className="flex flex-col gap-2">
-			<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-lg font-medium">
-				<span className="leading-normal select-none">{index + 1}</span>
-				<h3>{item.title}</h3>
-				<StatusBadge status={item.status} className="ml-1" />
-			</div>
-			<div className="text-foreground/70 leading-relaxed">
-				<ReactMarkdownWrapper>{item.description}</ReactMarkdownWrapper>
-			</div>
-		</div>
-	);
-}
-
-function StatusBadge({
-	status,
-	className,
-}: {
-	status: Status;
-	className?: string;
-}) {
-	return (
-		<Badge
-			className={cn("shadow-none", className, {
-				"bg-green-500! text-white": status.type === "complete",
-				"bg-yellow-500! text-white": status.type === "pending",
-				"bg-blue-500! text-white": status.type === "info",
-				"bg-foreground/10! text-accent-foreground": status.type === "default",
-			})}
-		>
-			{status.text}
-		</Badge>
-	);
-}
+import type { Metadata } from "next";
+import { BasePage } from "@/app/base-page";
+import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
+import { Badge } from "@/components/ui/badge";
+import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
+import { cn } from "@/utils/ui";
+
+const LAST_UPDATED = "February 25, 2026";
+
+type StatusType = "complete" | "pending" | "default" | "info";
+
+interface Status {
+	text: string;
+	type: StatusType;
+}
+
+interface RoadmapItem {
+	title: string;
+	description: string;
+	status: Status;
+}
+
+const roadmapItems: RoadmapItem[] = [
+	{
+		title: "Start",
+		description:
+			"This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.",
+		status: {
+			text: "Completed",
+			type: "complete",
+		},
+	},
+	{
+		title: "Core UI",
+		description:
+			"Build the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.",
+		status: {
+			text: "Completed",
+			type: "complete",
+		},
+	},
+	{
+		title: "Essential functionality",
+		description:
+			"Everything that makes a video editor **useful**. Timeline interactivity, storage, effects, transitions, etc.",
+		status: {
+			text: "In progress",
+			type: "pending",
+		},
+	},
+	{
+		title: "Native app (mobile/desktop)",
+		description:
+			"Native OpenCut apps for Mac, Windows, Linux, and iOS/Android.",
+		status: {
+			text: "Not started",
+			type: "default",
+		},
+	},
+];
+
+export const metadata: Metadata = {
+	title: "Roadmap - OpenCut",
+	description:
+		"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+	openGraph: {
+		title: "OpenCut Roadmap - What's Coming Next",
+		description:
+			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+		type: "website",
+		images: [
+			{
+				url: "/open-graph/roadmap.jpg",
+				width: 1200,
+				height: 630,
+				alt: "OpenCut Roadmap",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "OpenCut Roadmap - What's Coming Next",
+		description:
+			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+		images: ["/open-graph/roadmap.jpg"],
+	},
+};
+
+export default function RoadmapPage() {
+	return (
+		<BasePage
+			title="Roadmap"
+			description={`What's coming next for OpenCut (last updated: ${LAST_UPDATED})`}
+		>
+			<div className="mx-auto flex max-w-4xl flex-col gap-16">
+				<div className="flex flex-col gap-6">
+					{roadmapItems.map((item, index) => (
+						<RoadmapItem key={item.title} item={item} index={index} />
+					))}
+				</div>
+				<GitHubContributeSection
+					title="Want to help?"
+					description="OpenCut is open source and built by the community. Every contribution,
+          no matter how small, helps us build the best free video editor
+          possible."
+				/>
+			</div>
+		</BasePage>
+	);
+}
+
+function RoadmapItem({ item, index }: { item: RoadmapItem; index: number }) {
+	return (
+		<div className="flex flex-col gap-2">
+			<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-lg font-medium">
+				<span className="leading-normal select-none">{index + 1}</span>
+				<h3>{item.title}</h3>
+				<StatusBadge status={item.status} className="ml-1" />
+			</div>
+			<div className="text-foreground/70 leading-relaxed">
+				<ReactMarkdownWrapper>{item.description}</ReactMarkdownWrapper>
+			</div>
+		</div>
+	);
+}
+
+function StatusBadge({
+	status,
+	className,
+}: {
+	status: Status;
+	className?: string;
+}) {
+	return (
+		<Badge
+			className={cn("shadow-none", className, {
+				"bg-green-500! text-white": status.type === "complete",
+				"bg-yellow-500! text-white": status.type === "pending",
+				"bg-blue-500! text-white": status.type === "info",
+				"bg-foreground/10! text-accent-foreground": status.type === "default",
+			})}
+		>
+			{status.text}
+		</Badge>
+	);
+}
diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
index 60c13829..c3e80a6a 100644
--- a/apps/web/src/app/robots.ts
+++ b/apps/web/src/app/robots.ts
@@ -1,13 +1,13 @@
-import type { MetadataRoute } from "next";
-import { SITE_URL } from "@/constants/site-constants";
-
-export default function robots(): MetadataRoute.Robots {
-	return {
-		rules: {
-			userAgent: "*",
-			allow: "/",
-			disallow: ["/_next/", "/projects/", "/editor/"],
-		},
-		sitemap: `${SITE_URL}/sitemap.xml`,
-	};
-}
+import type { MetadataRoute } from "next";
+import { SITE_URL } from "@/constants/site-constants";
+
+export default function robots(): MetadataRoute.Robots {
+	return {
+		rules: {
+			userAgent: "*",
+			allow: "/",
+			disallow: ["/_next/", "/projects/", "/editor/"],
+		},
+		sitemap: `${SITE_URL}/sitemap.xml`,
+	};
+}
diff --git a/apps/web/src/app/rss.xml/route.ts b/apps/web/src/app/rss.xml/route.ts
index 909d5a1a..9cfad635 100644
--- a/apps/web/src/app/rss.xml/route.ts
+++ b/apps/web/src/app/rss.xml/route.ts
@@ -1,46 +1,46 @@
-import { Feed } from "feed";
-import { getPosts } from "@/lib/blog/query";
-import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
-
-export async function GET() {
-	try {
-		const { posts } = await getPosts();
-
-		const feed = new Feed({
-			title: `${SITE_INFO.title} Blog`,
-			description: SITE_INFO.description,
-			id: `${SITE_URL}`,
-			link: `${SITE_URL}/blog/`,
-			language: "en",
-			image: `${SITE_INFO.openGraphImage}`,
-			favicon: `${SITE_INFO.favicon}`,
-			copyright: `All rights reserved ${new Date().getFullYear()}, ${
-				SITE_INFO.title
-			}`,
-		});
-
-		for (const post of posts) {
-			feed.addItem({
-				title: post.title,
-				id: `${SITE_URL}/blog/${post.slug}`,
-				link: `${SITE_URL}/blog/${post.slug}`,
-				description: post.description,
-				author: post.authors.map((author) => ({
-					name: author.name,
-				})),
-				date: new Date(post.publishedAt),
-				image: post.coverImage || SITE_INFO.openGraphImage,
-			});
-		}
-
-		return new Response(feed.rss2(), {
-			headers: {
-				"Content-Type": "text/xml",
-				"Cache-Control": "public, max-age=86400, stale-while-revalidate",
-			},
-		});
-	} catch (error) {
-		console.error("Error generating RSS feed", error);
-		return new Response("Internal Server Error", { status: 500 });
-	}
-}
+import { Feed } from "feed";
+import { getPosts } from "@/lib/blog/query";
+import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
+
+export async function GET() {
+	try {
+		const { posts } = await getPosts();
+
+		const feed = new Feed({
+			title: `${SITE_INFO.title} Blog`,
+			description: SITE_INFO.description,
+			id: `${SITE_URL}`,
+			link: `${SITE_URL}/blog/`,
+			language: "en",
+			image: `${SITE_INFO.openGraphImage}`,
+			favicon: `${SITE_INFO.favicon}`,
+			copyright: `All rights reserved ${new Date().getFullYear()}, ${
+				SITE_INFO.title
+			}`,
+		});
+
+		for (const post of posts) {
+			feed.addItem({
+				title: post.title,
+				id: `${SITE_URL}/blog/${post.slug}`,
+				link: `${SITE_URL}/blog/${post.slug}`,
+				description: post.description,
+				author: post.authors.map((author) => ({
+					name: author.name,
+				})),
+				date: new Date(post.publishedAt),
+				image: post.coverImage || SITE_INFO.openGraphImage,
+			});
+		}
+
+		return new Response(feed.rss2(), {
+			headers: {
+				"Content-Type": "text/xml",
+				"Cache-Control": "public, max-age=86400, stale-while-revalidate",
+			},
+		});
+	} catch (error) {
+		console.error("Error generating RSS feed", error);
+		return new Response("Internal Server Error", { status: 500 });
+	}
+}
diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts
index fed1aed6..2dea655d 100644
--- a/apps/web/src/app/sitemap.ts
+++ b/apps/web/src/app/sitemap.ts
@@ -1,61 +1,61 @@
-import { SITE_URL } from "@/constants/site-constants";
-import { getPosts } from "@/lib/blog/query";
-import type { MetadataRoute } from "next";
-
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-	const data = await getPosts();
-
-	const postPages: MetadataRoute.Sitemap =
-		data?.posts?.map((post) => ({
-			url: `${SITE_URL}/blog/${post.slug}`,
-			lastModified: new Date(post.publishedAt),
-			changeFrequency: "weekly",
-			priority: 0.8,
-		})) ?? [];
-
-	return [
-		{
-			url: SITE_URL,
-			lastModified: new Date(),
-			changeFrequency: "weekly",
-			priority: 1,
-		},
-		{
-			url: `${SITE_URL}/contributors`,
-			lastModified: new Date(),
-			changeFrequency: "daily",
-			priority: 0.5,
-		},
-		{
-			url: `${SITE_URL}/roadmap`,
-			lastModified: new Date(),
-			changeFrequency: "weekly",
-			priority: 1,
-		},
-		{
-			url: `${SITE_URL}/privacy`,
-			lastModified: new Date(),
-			changeFrequency: "monthly",
-			priority: 0.5,
-		},
-		{
-			url: `${SITE_URL}/terms`,
-			lastModified: new Date(),
-			changeFrequency: "monthly",
-			priority: 0.5,
-		},
-		{
-			url: `${SITE_URL}/why-not-capcut`,
-			lastModified: new Date(),
-			changeFrequency: "yearly",
-			priority: 1,
-		},
-		{
-			url: `${SITE_URL}/blog`,
-			lastModified: new Date(),
-			changeFrequency: "weekly",
-			priority: 1,
-		},
-		...postPages,
-	];
-}
+import { SITE_URL } from "@/constants/site-constants";
+import { getPosts } from "@/lib/blog/query";
+import type { MetadataRoute } from "next";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+	const data = await getPosts();
+
+	const postPages: MetadataRoute.Sitemap =
+		data?.posts?.map((post) => ({
+			url: `${SITE_URL}/blog/${post.slug}`,
+			lastModified: new Date(post.publishedAt),
+			changeFrequency: "weekly",
+			priority: 0.8,
+		})) ?? [];
+
+	return [
+		{
+			url: SITE_URL,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/contributors`,
+			lastModified: new Date(),
+			changeFrequency: "daily",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/roadmap`,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/privacy`,
+			lastModified: new Date(),
+			changeFrequency: "monthly",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/terms`,
+			lastModified: new Date(),
+			changeFrequency: "monthly",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/why-not-capcut`,
+			lastModified: new Date(),
+			changeFrequency: "yearly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/blog`,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		...postPages,
+	];
+}
diff --git a/apps/web/src/app/sponsors/page.tsx b/apps/web/src/app/sponsors/page.tsx
index a1a57fce..64f18776 100644
--- a/apps/web/src/app/sponsors/page.tsx
+++ b/apps/web/src/app/sponsors/page.tsx
@@ -1,86 +1,86 @@
-import type { Metadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { BasePage } from "@/app/base-page";
-import { Card, CardContent } from "@/components/ui/card";
-import { SPONSORS, type Sponsor } from "@/constants/site-constants";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
-import { cn } from "@/utils/ui";
-
-export const metadata: Metadata = {
-	title: "Sponsors - OpenCut",
-	description:
-		"Support OpenCut and help us build the future of free and open-source video editing.",
-	openGraph: {
-		title: "Sponsors - OpenCut",
-		description:
-			"Support OpenCut and help us build the future of free and open-source video editing.",
-		type: "website",
-	},
-};
-
-export default function SponsorsPage() {
-	return (
-		<BasePage>
-			<div className="flex flex-col gap-8 text-center">
-				<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
-					Sponsors
-				</h1>
-				<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed text-pretty">
-					Support OpenCut and help us build the future of privacy-first video
-					editing.
-				</p>
-			</div>
-			<SponsorsGrid />
-		</BasePage>
-	);
-}
-
-function SponsorsGrid() {
-	return (
-		<div className="grid gap-6 sm:grid-cols-2">
-			{SPONSORS.map((sponsor) => (
-				<SponsorCard key={sponsor.name} sponsor={sponsor} />
-			))}
-		</div>
-	);
-}
-
-function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
-	return (
-		<Link
-			href={sponsor.url}
-			target="_blank"
-			rel="noopener noreferrer"
-			className="size-full"
-		>
-			<Card className="h-full">
-				<CardContent className="flex h-full flex-col justify-center gap-8 p-8">
-					<Image
-						src={sponsor.logo}
-						alt={`${sponsor.name} logo`}
-						width={50}
-						height={50}
-						className={cn(
-							"object-contain",
-							sponsor.invertOnDark && "invert-0 dark:invert",
-						)}
-					/>
-					<div className="flex flex-col gap-2">
-						<div className="flex items-center gap-2">
-							<h3 className="text-xl font-semibold group-hover:underline">
-								{sponsor.name}
-							</h3>
-							<HugeiconsIcon
-								icon={LinkSquare02Icon}
-								className="text-muted-foreground size-4"
-							/>
-						</div>
-						<p className="text-muted-foreground">{sponsor.description}</p>
-					</div>
-				</CardContent>
-			</Card>
-		</Link>
-	);
-}
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { BasePage } from "@/app/base-page";
+import { Card, CardContent } from "@/components/ui/card";
+import { SPONSORS, type Sponsor } from "@/constants/site-constants";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
+
+export const metadata: Metadata = {
+	title: "Sponsors - OpenCut",
+	description:
+		"Support OpenCut and help us build the future of free and open-source video editing.",
+	openGraph: {
+		title: "Sponsors - OpenCut",
+		description:
+			"Support OpenCut and help us build the future of free and open-source video editing.",
+		type: "website",
+	},
+};
+
+export default function SponsorsPage() {
+	return (
+		<BasePage>
+			<div className="flex flex-col gap-8 text-center">
+				<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
+					Sponsors
+				</h1>
+				<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed text-pretty">
+					Support OpenCut and help us build the future of privacy-first video
+					editing.
+				</p>
+			</div>
+			<SponsorsGrid />
+		</BasePage>
+	);
+}
+
+function SponsorsGrid() {
+	return (
+		<div className="grid gap-6 sm:grid-cols-2">
+			{SPONSORS.map((sponsor) => (
+				<SponsorCard key={sponsor.name} sponsor={sponsor} />
+			))}
+		</div>
+	);
+}
+
+function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
+	return (
+		<Link
+			href={sponsor.url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="size-full"
+		>
+			<Card className="h-full">
+				<CardContent className="flex h-full flex-col justify-center gap-8 p-8">
+					<Image
+						src={sponsor.logo}
+						alt={`${sponsor.name} logo`}
+						width={50}
+						height={50}
+						className={cn(
+							"object-contain",
+							sponsor.invertOnDark && "invert-0 dark:invert",
+						)}
+					/>
+					<div className="flex flex-col gap-2">
+						<div className="flex items-center gap-2">
+							<h3 className="text-xl font-semibold group-hover:underline">
+								{sponsor.name}
+							</h3>
+							<HugeiconsIcon
+								icon={LinkSquare02Icon}
+								className="text-muted-foreground size-4"
+							/>
+						</div>
+						<p className="text-muted-foreground">{sponsor.description}</p>
+					</div>
+				</CardContent>
+			</Card>
+		</Link>
+	);
+}