refactor: switch from go to bun

2025-12-10 12:10:51 +01:00 · 2025-08-31 17:32:00 +02:00
parent a0be690eb9
commit a16fc37b44
76 changed files with 4283 additions and 4173 deletions
--- a/apps/client/app/api-client.ts
+++ b/apps/client/app/api-client.ts
@@ -0,0 +1,4 @@
+import type { AppType } from "@ironmount/server";
+import { hc } from "hono/client";
+
+export const client = hc<AppType>("/api");
--- a/apps/client/app/api-client/@tanstack/react-query.gen.ts
+++ b/apps/client/app/api-client/@tanstack/react-query.gen.ts
@@ -0,0 +1,71 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { type Options, getApiV1Volumes } from "../sdk.gen";
+import { queryOptions } from "@tanstack/react-query";
+import type { GetApiV1VolumesData } from "../types.gen";
+import { client as _heyApiClient } from "../client.gen";
+
+export type QueryKey<TOptions extends Options> = [
+	Pick<TOptions, "baseUrl" | "body" | "headers" | "path" | "query"> & {
+		_id: string;
+		_infinite?: boolean;
+		tags?: ReadonlyArray<string>;
+	},
+];
+
+const createQueryKey = <TOptions extends Options>(
+	id: string,
+	options?: TOptions,
+	infinite?: boolean,
+	tags?: ReadonlyArray<string>,
+): [QueryKey<TOptions>[0]] => {
+	const params: QueryKey<TOptions>[0] = {
+		_id: id,
+		baseUrl:
+			options?.baseUrl ||
+			(options?.client ?? _heyApiClient).getConfig().baseUrl,
+	} as QueryKey<TOptions>[0];
+	if (infinite) {
+		params._infinite = infinite;
+	}
+	if (tags) {
+		params.tags = tags;
+	}
+	if (options?.body) {
+		params.body = options.body;
+	}
+	if (options?.headers) {
+		params.headers = options.headers;
+	}
+	if (options?.path) {
+		params.path = options.path;
+	}
+	if (options?.query) {
+		params.query = options.query;
+	}
+	return [params];
+};
+
+export const getApiV1VolumesQueryKey = (
+	options?: Options<GetApiV1VolumesData>,
+) => createQueryKey("getApiV1Volumes", options);
+
+/**
+ * List all volumes
+ */
+export const getApiV1VolumesOptions = (
+	options?: Options<GetApiV1VolumesData>,
+) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getApiV1Volumes({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getApiV1VolumesQueryKey(options),
+	});
+};
--- a/apps/client/app/api-client/client.gen.ts
+++ b/apps/client/app/api-client/client.gen.ts
@@ -0,0 +1,28 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { ClientOptions } from "./types.gen";
+import {
+	type Config,
+	type ClientOptions as DefaultClientOptions,
+	createClient,
+	createConfig,
+} from "./client";
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends DefaultClientOptions = ClientOptions> =
+	(
+		override?: Config<DefaultClientOptions & T>,
+	) => Config<Required<DefaultClientOptions> & T>;
+
+export const client = createClient(
+	createConfig<ClientOptions>({
+		baseUrl: "http://localhost:3000",
+	}),
+);
--- a/apps/client/app/api-client/client/client.gen.ts
+++ b/apps/client/app/api-client/client/client.gen.ts
@@ -0,0 +1,199 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Client, Config, ResolvedRequestOptions } from "./types.gen";
+import {
+	buildUrl,
+	createConfig,
+	createInterceptors,
+	getParseAs,
+	mergeConfigs,
+	mergeHeaders,
+	setAuthParams,
+} from "./utils.gen";
+
+type ReqInit = Omit<RequestInit, "body" | "headers"> & {
+	body?: any;
+	headers: ReturnType<typeof mergeHeaders>;
+};
+
+export const createClient = (config: Config = {}): Client => {
+	let _config = mergeConfigs(createConfig(), config);
+
+	const getConfig = (): Config => ({ ..._config });
+
+	const setConfig = (config: Config): Config => {
+		_config = mergeConfigs(_config, config);
+		return getConfig();
+	};
+
+	const interceptors = createInterceptors<
+		Request,
+		Response,
+		unknown,
+		ResolvedRequestOptions
+	>();
+
+	const request: Client["request"] = async (options) => {
+		const opts = {
+			..._config,
+			...options,
+			fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+			headers: mergeHeaders(_config.headers, options.headers),
+			serializedBody: undefined,
+		};
+
+		if (opts.security) {
+			await setAuthParams({
+				...opts,
+				security: opts.security,
+			});
+		}
+
+		if (opts.requestValidator) {
+			await opts.requestValidator(opts);
+		}
+
+		if (opts.body && opts.bodySerializer) {
+			opts.serializedBody = opts.bodySerializer(opts.body);
+		}
+
+		// remove Content-Type header if body is empty to avoid sending invalid requests
+		if (opts.serializedBody === undefined || opts.serializedBody === "") {
+			opts.headers.delete("Content-Type");
+		}
+
+		const url = buildUrl(opts);
+		const requestInit: ReqInit = {
+			redirect: "follow",
+			...opts,
+			body: opts.serializedBody,
+		};
+
+		let request = new Request(url, requestInit);
+
+		for (const fn of interceptors.request._fns) {
+			if (fn) {
+				request = await fn(request, opts);
+			}
+		}
+
+		// fetch must be assigned here, otherwise it would throw the error:
+		// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+		const _fetch = opts.fetch!;
+		let response = await _fetch(request);
+
+		for (const fn of interceptors.response._fns) {
+			if (fn) {
+				response = await fn(response, request, opts);
+			}
+		}
+
+		const result = {
+			request,
+			response,
+		};
+
+		if (response.ok) {
+			if (
+				response.status === 204 ||
+				response.headers.get("Content-Length") === "0"
+			) {
+				return opts.responseStyle === "data"
+					? {}
+					: {
+							data: {},
+							...result,
+						};
+			}
+
+			const parseAs =
+				(opts.parseAs === "auto"
+					? getParseAs(response.headers.get("Content-Type"))
+					: opts.parseAs) ?? "json";
+
+			let data: any;
+			switch (parseAs) {
+				case "arrayBuffer":
+				case "blob":
+				case "formData":
+				case "json":
+				case "text":
+					data = await response[parseAs]();
+					break;
+				case "stream":
+					return opts.responseStyle === "data"
+						? response.body
+						: {
+								data: response.body,
+								...result,
+							};
+			}
+
+			if (parseAs === "json") {
+				if (opts.responseValidator) {
+					await opts.responseValidator(data);
+				}
+
+				if (opts.responseTransformer) {
+					data = await opts.responseTransformer(data);
+				}
+			}
+
+			return opts.responseStyle === "data"
+				? data
+				: {
+						data,
+						...result,
+					};
+		}
+
+		const textError = await response.text();
+		let jsonError: unknown;
+
+		try {
+			jsonError = JSON.parse(textError);
+		} catch {
+			// noop
+		}
+
+		const error = jsonError ?? textError;
+		let finalError = error;
+
+		for (const fn of interceptors.error._fns) {
+			if (fn) {
+				finalError = (await fn(error, response, request, opts)) as string;
+			}
+		}
+
+		finalError = finalError || ({} as string);
+
+		if (opts.throwOnError) {
+			throw finalError;
+		}
+
+		// TODO: we probably want to return error and improve types
+		return opts.responseStyle === "data"
+			? undefined
+			: {
+					error: finalError,
+					...result,
+				};
+	};
+
+	return {
+		buildUrl,
+		connect: (options) => request({ ...options, method: "CONNECT" }),
+		delete: (options) => request({ ...options, method: "DELETE" }),
+		get: (options) => request({ ...options, method: "GET" }),
+		getConfig,
+		head: (options) => request({ ...options, method: "HEAD" }),
+		interceptors,
+		options: (options) => request({ ...options, method: "OPTIONS" }),
+		patch: (options) => request({ ...options, method: "PATCH" }),
+		post: (options) => request({ ...options, method: "POST" }),
+		put: (options) => request({ ...options, method: "PUT" }),
+		request,
+		setConfig,
+		trace: (options) => request({ ...options, method: "TRACE" }),
+	};
+};
--- a/apps/client/app/api-client/client/index.ts
+++ b/apps/client/app/api-client/client/index.ts
@@ -0,0 +1,25 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type { Auth } from "../core/auth.gen";
+export type { QuerySerializerOptions } from "../core/bodySerializer.gen";
+export {
+	formDataBodySerializer,
+	jsonBodySerializer,
+	urlSearchParamsBodySerializer,
+} from "../core/bodySerializer.gen";
+export { buildClientParams } from "../core/params.gen";
+export { createClient } from "./client.gen";
+export type {
+	Client,
+	ClientOptions,
+	Config,
+	CreateClientConfig,
+	Options,
+	OptionsLegacyParser,
+	RequestOptions,
+	RequestResult,
+	ResolvedRequestOptions,
+	ResponseStyle,
+	TDataShape,
+} from "./types.gen";
+export { createConfig, mergeHeaders } from "./utils.gen";
--- a/apps/client/app/api-client/client/types.gen.ts
+++ b/apps/client/app/api-client/client/types.gen.ts
@@ -0,0 +1,232 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth } from "../core/auth.gen";
+import type {
+	Client as CoreClient,
+	Config as CoreConfig,
+} from "../core/types.gen";
+import type { Middleware } from "./utils.gen";
+
+export type ResponseStyle = "data" | "fields";
+
+export interface Config<T extends ClientOptions = ClientOptions>
+	extends Omit<RequestInit, "body" | "headers" | "method">,
+		CoreConfig {
+	/**
+	 * Base URL for all requests made by this client.
+	 */
+	baseUrl?: T["baseUrl"];
+	/**
+	 * Fetch API implementation. You can use this option to provide a custom
+	 * fetch instance.
+	 *
+	 * @default globalThis.fetch
+	 */
+	fetch?: (request: Request) => ReturnType<typeof fetch>;
+	/**
+	 * Please don't use the Fetch client for Next.js applications. The `next`
+	 * options won't have any effect.
+	 *
+	 * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
+	 */
+	next?: never;
+	/**
+	 * Return the response data parsed in a specified format. By default, `auto`
+	 * will infer the appropriate method from the `Content-Type` response header.
+	 * You can override this behavior with any of the {@link Body} methods.
+	 * Select `stream` if you don't want to parse response data at all.
+	 *
+	 * @default 'auto'
+	 */
+	parseAs?:
+		| "arrayBuffer"
+		| "auto"
+		| "blob"
+		| "formData"
+		| "json"
+		| "stream"
+		| "text";
+	/**
+	 * Should we return only data or multiple fields (data, error, response, etc.)?
+	 *
+	 * @default 'fields'
+	 */
+	responseStyle?: ResponseStyle;
+	/**
+	 * Throw an error instead of returning it in the response?
+	 *
+	 * @default false
+	 */
+	throwOnError?: T["throwOnError"];
+}
+
+export interface RequestOptions<
+	TResponseStyle extends ResponseStyle = "fields",
+	ThrowOnError extends boolean = boolean,
+	Url extends string = string,
+> extends Config<{
+		responseStyle: TResponseStyle;
+		throwOnError: ThrowOnError;
+	}> {
+	/**
+	 * Any body that you want to add to your request.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
+	 */
+	body?: unknown;
+	path?: Record<string, unknown>;
+	query?: Record<string, unknown>;
+	/**
+	 * Security mechanism(s) to use for the request.
+	 */
+	security?: ReadonlyArray<Auth>;
+	url: Url;
+}
+
+export interface ResolvedRequestOptions<
+	TResponseStyle extends ResponseStyle = "fields",
+	ThrowOnError extends boolean = boolean,
+	Url extends string = string,
+> extends RequestOptions<TResponseStyle, ThrowOnError, Url> {
+	serializedBody?: string;
+}
+
+export type RequestResult<
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = boolean,
+	TResponseStyle extends ResponseStyle = "fields",
+> = ThrowOnError extends true
+	? Promise<
+			TResponseStyle extends "data"
+				? TData extends Record<string, unknown>
+					? TData[keyof TData]
+					: TData
+				: {
+						data: TData extends Record<string, unknown>
+							? TData[keyof TData]
+							: TData;
+						request: Request;
+						response: Response;
+					}
+		>
+	: Promise<
+			TResponseStyle extends "data"
+				?
+						| (TData extends Record<string, unknown>
+								? TData[keyof TData]
+								: TData)
+						| undefined
+				: (
+						| {
+								data: TData extends Record<string, unknown>
+									? TData[keyof TData]
+									: TData;
+								error: undefined;
+						  }
+						| {
+								data: undefined;
+								error: TError extends Record<string, unknown>
+									? TError[keyof TError]
+									: TError;
+						  }
+					) & {
+						request: Request;
+						response: Response;
+					}
+		>;
+
+export interface ClientOptions {
+	baseUrl?: string;
+	responseStyle?: ResponseStyle;
+	throwOnError?: boolean;
+}
+
+type MethodFn = <
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = false,
+	TResponseStyle extends ResponseStyle = "fields",
+>(
+	options: Omit<RequestOptions<TResponseStyle, ThrowOnError>, "method">,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type RequestFn = <
+	TData = unknown,
+	TError = unknown,
+	ThrowOnError extends boolean = false,
+	TResponseStyle extends ResponseStyle = "fields",
+>(
+	options: Omit<RequestOptions<TResponseStyle, ThrowOnError>, "method"> &
+		Pick<Required<RequestOptions<TResponseStyle, ThrowOnError>>, "method">,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type BuildUrlFn = <
+	TData extends {
+		body?: unknown;
+		path?: Record<string, unknown>;
+		query?: Record<string, unknown>;
+		url: string;
+	},
+>(
+	options: Pick<TData, "url"> & Options<TData>,
+) => string;
+
+export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn> & {
+	interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
+};
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
+	override?: Config<ClientOptions & T>,
+) => Config<Required<ClientOptions> & T>;
+
+export interface TDataShape {
+	body?: unknown;
+	headers?: unknown;
+	path?: unknown;
+	query?: unknown;
+	url: string;
+}
+
+type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type Options<
+	TData extends TDataShape = TDataShape,
+	ThrowOnError extends boolean = boolean,
+	TResponseStyle extends ResponseStyle = "fields",
+> = OmitKeys<
+	RequestOptions<TResponseStyle, ThrowOnError>,
+	"body" | "path" | "query" | "url"
+> &
+	Omit<TData, "url">;
+
+export type OptionsLegacyParser<
+	TData = unknown,
+	ThrowOnError extends boolean = boolean,
+	TResponseStyle extends ResponseStyle = "fields",
+> = TData extends { body?: any }
+	? TData extends { headers?: any }
+		? OmitKeys<
+				RequestOptions<TResponseStyle, ThrowOnError>,
+				"body" | "headers" | "url"
+			> &
+				TData
+		: OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "body" | "url"> &
+				TData &
+				Pick<RequestOptions<TResponseStyle, ThrowOnError>, "headers">
+	: TData extends { headers?: any }
+		? OmitKeys<
+				RequestOptions<TResponseStyle, ThrowOnError>,
+				"headers" | "url"
+			> &
+				TData &
+				Pick<RequestOptions<TResponseStyle, ThrowOnError>, "body">
+		: OmitKeys<RequestOptions<TResponseStyle, ThrowOnError>, "url"> & TData;
--- a/apps/client/app/api-client/client/utils.gen.ts
+++ b/apps/client/app/api-client/client/utils.gen.ts
@@ -0,0 +1,445 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { getAuthToken } from "../core/auth.gen";
+import type {
+	QuerySerializer,
+	QuerySerializerOptions,
+} from "../core/bodySerializer.gen";
+import { jsonBodySerializer } from "../core/bodySerializer.gen";
+import {
+	serializeArrayParam,
+	serializeObjectParam,
+	serializePrimitiveParam,
+} from "../core/pathSerializer.gen";
+import type {
+	Client,
+	ClientOptions,
+	Config,
+	RequestOptions,
+} from "./types.gen";
+
+interface PathSerializer {
+	path: Record<string, unknown>;
+	url: string;
+}
+
+const PATH_PARAM_RE = /\{[^{}]+\}/g;
+
+type ArrayStyle = "form" | "spaceDelimited" | "pipeDelimited";
+type MatrixStyle = "label" | "matrix" | "simple";
+type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
+
+const defaultPathSerializer = ({ path, url: _url }: PathSerializer) => {
+	let url = _url;
+	const matches = _url.match(PATH_PARAM_RE);
+	if (matches) {
+		for (const match of matches) {
+			let explode = false;
+			let name = match.substring(1, match.length - 1);
+			let style: ArraySeparatorStyle = "simple";
+
+			if (name.endsWith("*")) {
+				explode = true;
+				name = name.substring(0, name.length - 1);
+			}
+
+			if (name.startsWith(".")) {
+				name = name.substring(1);
+				style = "label";
+			} else if (name.startsWith(";")) {
+				name = name.substring(1);
+				style = "matrix";
+			}
+
+			const value = path[name];
+
+			if (value === undefined || value === null) {
+				continue;
+			}
+
+			if (Array.isArray(value)) {
+				url = url.replace(
+					match,
+					serializeArrayParam({ explode, name, style, value }),
+				);
+				continue;
+			}
+
+			if (typeof value === "object") {
+				url = url.replace(
+					match,
+					serializeObjectParam({
+						explode,
+						name,
+						style,
+						value: value as Record<string, unknown>,
+						valueOnly: true,
+					}),
+				);
+				continue;
+			}
+
+			if (style === "matrix") {
+				url = url.replace(
+					match,
+					`;${serializePrimitiveParam({
+						name,
+						value: value as string,
+					})}`,
+				);
+				continue;
+			}
+
+			const replaceValue = encodeURIComponent(
+				style === "label" ? `.${value as string}` : (value as string),
+			);
+			url = url.replace(match, replaceValue);
+		}
+	}
+	return url;
+};
+
+export const createQuerySerializer = <T = unknown>({
+	allowReserved,
+	array,
+	object,
+}: QuerySerializerOptions = {}) => {
+	const querySerializer = (queryParams: T) => {
+		const search: string[] = [];
+		if (queryParams && typeof queryParams === "object") {
+			for (const name in queryParams) {
+				const value = queryParams[name];
+
+				if (value === undefined || value === null) {
+					continue;
+				}
+
+				if (Array.isArray(value)) {
+					const serializedArray = serializeArrayParam({
+						allowReserved,
+						explode: true,
+						name,
+						style: "form",
+						value,
+						...array,
+					});
+					if (serializedArray) search.push(serializedArray);
+				} else if (typeof value === "object") {
+					const serializedObject = serializeObjectParam({
+						allowReserved,
+						explode: true,
+						name,
+						style: "deepObject",
+						value: value as Record<string, unknown>,
+						...object,
+					});
+					if (serializedObject) search.push(serializedObject);
+				} else {
+					const serializedPrimitive = serializePrimitiveParam({
+						allowReserved,
+						name,
+						value: value as string,
+					});
+					if (serializedPrimitive) search.push(serializedPrimitive);
+				}
+			}
+		}
+		return search.join("&");
+	};
+	return querySerializer;
+};
+
+/**
+ * Infers parseAs value from provided Content-Type header.
+ */
+export const getParseAs = (
+	contentType: string | null,
+): Exclude<Config["parseAs"], "auto"> => {
+	if (!contentType) {
+		// If no Content-Type header is provided, the best we can do is return the raw response body,
+		// which is effectively the same as the 'stream' option.
+		return "stream";
+	}
+
+	const cleanContent = contentType.split(";")[0]?.trim();
+
+	if (!cleanContent) {
+		return;
+	}
+
+	if (
+		cleanContent.startsWith("application/json") ||
+		cleanContent.endsWith("+json")
+	) {
+		return "json";
+	}
+
+	if (cleanContent === "multipart/form-data") {
+		return "formData";
+	}
+
+	if (
+		["application/", "audio/", "image/", "video/"].some((type) =>
+			cleanContent.startsWith(type),
+		)
+	) {
+		return "blob";
+	}
+
+	if (cleanContent.startsWith("text/")) {
+		return "text";
+	}
+
+	return;
+};
+
+const checkForExistence = (
+	options: Pick<RequestOptions, "auth" | "query"> & {
+		headers: Headers;
+	},
+	name?: string,
+): boolean => {
+	if (!name) {
+		return false;
+	}
+	if (
+		options.headers.has(name) ||
+		options.query?.[name] ||
+		options.headers.get("Cookie")?.includes(`${name}=`)
+	) {
+		return true;
+	}
+	return false;
+};
+
+export const setAuthParams = async ({
+	security,
+	...options
+}: Pick<Required<RequestOptions>, "security"> &
+	Pick<RequestOptions, "auth" | "query"> & {
+		headers: Headers;
+	}) => {
+	for (const auth of security) {
+		if (checkForExistence(options, auth.name)) {
+			continue;
+		}
+
+		const token = await getAuthToken(auth, options.auth);
+
+		if (!token) {
+			continue;
+		}
+
+		const name = auth.name ?? "Authorization";
+
+		switch (auth.in) {
+			case "query":
+				if (!options.query) {
+					options.query = {};
+				}
+				options.query[name] = token;
+				break;
+			case "cookie":
+				options.headers.append("Cookie", `${name}=${token}`);
+				break;
+			case "header":
+			default:
+				options.headers.set(name, token);
+				break;
+		}
+	}
+};
+
+export const buildUrl: Client["buildUrl"] = (options) => {
+	const url = getUrl({
+		baseUrl: options.baseUrl as string,
+		path: options.path,
+		query: options.query,
+		querySerializer:
+			typeof options.querySerializer === "function"
+				? options.querySerializer
+				: createQuerySerializer(options.querySerializer),
+		url: options.url,
+	});
+	return url;
+};
+
+export const getUrl = ({
+	baseUrl,
+	path,
+	query,
+	querySerializer,
+	url: _url,
+}: {
+	baseUrl?: string;
+	path?: Record<string, unknown>;
+	query?: Record<string, unknown>;
+	querySerializer: QuerySerializer;
+	url: string;
+}) => {
+	const pathUrl = _url.startsWith("/") ? _url : `/${_url}`;
+	let url = (baseUrl ?? "") + pathUrl;
+	if (path) {
+		url = defaultPathSerializer({ path, url });
+	}
+	let search = query ? querySerializer(query) : "";
+	if (search.startsWith("?")) {
+		search = search.substring(1);
+	}
+	if (search) {
+		url += `?${search}`;
+	}
+	return url;
+};
+
+export const mergeConfigs = (a: Config, b: Config): Config => {
+	const config = { ...a, ...b };
+	if (config.baseUrl?.endsWith("/")) {
+		config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
+	}
+	config.headers = mergeHeaders(a.headers, b.headers);
+	return config;
+};
+
+export const mergeHeaders = (
+	...headers: Array<Required<Config>["headers"] | undefined>
+): Headers => {
+	const mergedHeaders = new Headers();
+	for (const header of headers) {
+		if (!header || typeof header !== "object") {
+			continue;
+		}
+
+		const iterator =
+			header instanceof Headers ? header.entries() : Object.entries(header);
+
+		for (const [key, value] of iterator) {
+			if (value === null) {
+				mergedHeaders.delete(key);
+			} else if (Array.isArray(value)) {
+				for (const v of value) {
+					mergedHeaders.append(key, v as string);
+				}
+			} else if (value !== undefined) {
+				// assume object headers are meant to be JSON stringified, i.e. their
+				// content value in OpenAPI specification is 'application/json'
+				mergedHeaders.set(
+					key,
+					typeof value === "object" ? JSON.stringify(value) : (value as string),
+				);
+			}
+		}
+	}
+	return mergedHeaders;
+};
+
+type ErrInterceptor<Err, Res, Req, Options> = (
+	error: Err,
+	response: Res,
+	request: Req,
+	options: Options,
+) => Err | Promise<Err>;
+
+type ReqInterceptor<Req, Options> = (
+	request: Req,
+	options: Options,
+) => Req | Promise<Req>;
+
+type ResInterceptor<Res, Req, Options> = (
+	response: Res,
+	request: Req,
+	options: Options,
+) => Res | Promise<Res>;
+
+class Interceptors<Interceptor> {
+	_fns: (Interceptor | null)[];
+
+	constructor() {
+		this._fns = [];
+	}
+
+	clear() {
+		this._fns = [];
+	}
+
+	getInterceptorIndex(id: number | Interceptor): number {
+		if (typeof id === "number") {
+			return this._fns[id] ? id : -1;
+		} else {
+			return this._fns.indexOf(id);
+		}
+	}
+	exists(id: number | Interceptor) {
+		const index = this.getInterceptorIndex(id);
+		return !!this._fns[index];
+	}
+
+	eject(id: number | Interceptor) {
+		const index = this.getInterceptorIndex(id);
+		if (this._fns[index]) {
+			this._fns[index] = null;
+		}
+	}
+
+	update(id: number | Interceptor, fn: Interceptor) {
+		const index = this.getInterceptorIndex(id);
+		if (this._fns[index]) {
+			this._fns[index] = fn;
+			return id;
+		} else {
+			return false;
+		}
+	}
+
+	use(fn: Interceptor) {
+		this._fns = [...this._fns, fn];
+		return this._fns.length - 1;
+	}
+}
+
+// `createInterceptors()` response, meant for external use as it does not
+// expose internals
+export interface Middleware<Req, Res, Err, Options> {
+	error: Pick<
+		Interceptors<ErrInterceptor<Err, Res, Req, Options>>,
+		"eject" | "use"
+	>;
+	request: Pick<Interceptors<ReqInterceptor<Req, Options>>, "eject" | "use">;
+	response: Pick<
+		Interceptors<ResInterceptor<Res, Req, Options>>,
+		"eject" | "use"
+	>;
+}
+
+// do not add `Middleware` as return type so we can use _fns internally
+export const createInterceptors = <Req, Res, Err, Options>() => ({
+	error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
+	request: new Interceptors<ReqInterceptor<Req, Options>>(),
+	response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
+});
+
+const defaultQuerySerializer = createQuerySerializer({
+	allowReserved: false,
+	array: {
+		explode: true,
+		style: "form",
+	},
+	object: {
+		explode: true,
+		style: "deepObject",
+	},
+});
+
+const defaultHeaders = {
+	"Content-Type": "application/json",
+};
+
+export const createConfig = <T extends ClientOptions = ClientOptions>(
+	override: Config<Omit<ClientOptions, keyof T> & T> = {},
+): Config<Omit<ClientOptions, keyof T> & T> => ({
+	...jsonBodySerializer,
+	headers: defaultHeaders,
+	parseAs: "auto",
+	querySerializer: defaultQuerySerializer,
+	...override,
+});
--- a/apps/client/app/api-client/core/auth.gen.ts
+++ b/apps/client/app/api-client/core/auth.gen.ts
@@ -0,0 +1,42 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type AuthToken = string | undefined;
+
+export interface Auth {
+	/**
+	 * Which part of the request do we use to send the auth?
+	 *
+	 * @default 'header'
+	 */
+	in?: "header" | "query" | "cookie";
+	/**
+	 * Header or query parameter name.
+	 *
+	 * @default 'Authorization'
+	 */
+	name?: string;
+	scheme?: "basic" | "bearer";
+	type: "apiKey" | "http";
+}
+
+export const getAuthToken = async (
+	auth: Auth,
+	callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
+): Promise<string | undefined> => {
+	const token =
+		typeof callback === "function" ? await callback(auth) : callback;
+
+	if (!token) {
+		return;
+	}
+
+	if (auth.scheme === "bearer") {
+		return `Bearer ${token}`;
+	}
+
+	if (auth.scheme === "basic") {
+		return `Basic ${btoa(token)}`;
+	}
+
+	return token;
+};
--- a/apps/client/app/api-client/core/bodySerializer.gen.ts
+++ b/apps/client/app/api-client/core/bodySerializer.gen.ts
@@ -0,0 +1,92 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type {
+	ArrayStyle,
+	ObjectStyle,
+	SerializerOptions,
+} from "./pathSerializer.gen";
+
+export type QuerySerializer = (query: Record<string, unknown>) => string;
+
+export type BodySerializer = (body: any) => any;
+
+export interface QuerySerializerOptions {
+	allowReserved?: boolean;
+	array?: SerializerOptions<ArrayStyle>;
+	object?: SerializerOptions<ObjectStyle>;
+}
+
+const serializeFormDataPair = (
+	data: FormData,
+	key: string,
+	value: unknown,
+): void => {
+	if (typeof value === "string" || value instanceof Blob) {
+		data.append(key, value);
+	} else if (value instanceof Date) {
+		data.append(key, value.toISOString());
+	} else {
+		data.append(key, JSON.stringify(value));
+	}
+};
+
+const serializeUrlSearchParamsPair = (
+	data: URLSearchParams,
+	key: string,
+	value: unknown,
+): void => {
+	if (typeof value === "string") {
+		data.append(key, value);
+	} else {
+		data.append(key, JSON.stringify(value));
+	}
+};
+
+export const formDataBodySerializer = {
+	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(
+		body: T,
+	): FormData => {
+		const data = new FormData();
+
+		Object.entries(body).forEach(([key, value]) => {
+			if (value === undefined || value === null) {
+				return;
+			}
+			if (Array.isArray(value)) {
+				value.forEach((v) => serializeFormDataPair(data, key, v));
+			} else {
+				serializeFormDataPair(data, key, value);
+			}
+		});
+
+		return data;
+	},
+};
+
+export const jsonBodySerializer = {
+	bodySerializer: <T>(body: T): string =>
+		JSON.stringify(body, (_key, value) =>
+			typeof value === "bigint" ? value.toString() : value,
+		),
+};
+
+export const urlSearchParamsBodySerializer = {
+	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(
+		body: T,
+	): string => {
+		const data = new URLSearchParams();
+
+		Object.entries(body).forEach(([key, value]) => {
+			if (value === undefined || value === null) {
+				return;
+			}
+			if (Array.isArray(value)) {
+				value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
+			} else {
+				serializeUrlSearchParamsPair(data, key, value);
+			}
+		});
+
+		return data.toString();
+	},
+};
--- a/apps/client/app/api-client/core/params.gen.ts
+++ b/apps/client/app/api-client/core/params.gen.ts
@@ -0,0 +1,153 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+type Slot = "body" | "headers" | "path" | "query";
+
+export type Field =
+	| {
+			in: Exclude<Slot, "body">;
+			/**
+			 * Field name. This is the name we want the user to see and use.
+			 */
+			key: string;
+			/**
+			 * Field mapped name. This is the name we want to use in the request.
+			 * If omitted, we use the same value as `key`.
+			 */
+			map?: string;
+	  }
+	| {
+			in: Extract<Slot, "body">;
+			/**
+			 * Key isn't required for bodies.
+			 */
+			key?: string;
+			map?: string;
+	  };
+
+export interface Fields {
+	allowExtra?: Partial<Record<Slot, boolean>>;
+	args?: ReadonlyArray<Field>;
+}
+
+export type FieldsConfig = ReadonlyArray<Field | Fields>;
+
+const extraPrefixesMap: Record<string, Slot> = {
+	$body_: "body",
+	$headers_: "headers",
+	$path_: "path",
+	$query_: "query",
+};
+const extraPrefixes = Object.entries(extraPrefixesMap);
+
+type KeyMap = Map<
+	string,
+	{
+		in: Slot;
+		map?: string;
+	}
+>;
+
+const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
+	if (!map) {
+		map = new Map();
+	}
+
+	for (const config of fields) {
+		if ("in" in config) {
+			if (config.key) {
+				map.set(config.key, {
+					in: config.in,
+					map: config.map,
+				});
+			}
+		} else if (config.args) {
+			buildKeyMap(config.args, map);
+		}
+	}
+
+	return map;
+};
+
+interface Params {
+	body: unknown;
+	headers: Record<string, unknown>;
+	path: Record<string, unknown>;
+	query: Record<string, unknown>;
+}
+
+const stripEmptySlots = (params: Params) => {
+	for (const [slot, value] of Object.entries(params)) {
+		if (value && typeof value === "object" && !Object.keys(value).length) {
+			delete params[slot as Slot];
+		}
+	}
+};
+
+export const buildClientParams = (
+	args: ReadonlyArray<unknown>,
+	fields: FieldsConfig,
+) => {
+	const params: Params = {
+		body: {},
+		headers: {},
+		path: {},
+		query: {},
+	};
+
+	const map = buildKeyMap(fields);
+
+	let config: FieldsConfig[number] | undefined;
+
+	for (const [index, arg] of args.entries()) {
+		if (fields[index]) {
+			config = fields[index];
+		}
+
+		if (!config) {
+			continue;
+		}
+
+		if ("in" in config) {
+			if (config.key) {
+				const field = map.get(config.key)!;
+				const name = field.map || config.key;
+				(params[field.in] as Record<string, unknown>)[name] = arg;
+			} else {
+				params.body = arg;
+			}
+		} else {
+			for (const [key, value] of Object.entries(arg ?? {})) {
+				const field = map.get(key);
+
+				if (field) {
+					const name = field.map || key;
+					(params[field.in] as Record<string, unknown>)[name] = value;
+				} else {
+					const extra = extraPrefixes.find(([prefix]) =>
+						key.startsWith(prefix),
+					);
+
+					if (extra) {
+						const [prefix, slot] = extra;
+						(params[slot] as Record<string, unknown>)[
+							key.slice(prefix.length)
+						] = value;
+					} else {
+						for (const [slot, allowed] of Object.entries(
+							config.allowExtra ?? {},
+						)) {
+							if (allowed) {
+								(params[slot as Slot] as Record<string, unknown>)[key] = value;
+								break;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	stripEmptySlots(params);
+
+	return params;
+};
--- a/apps/client/app/api-client/core/pathSerializer.gen.ts
+++ b/apps/client/app/api-client/core/pathSerializer.gen.ts
@@ -0,0 +1,181 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+interface SerializeOptions<T>
+	extends SerializePrimitiveOptions,
+		SerializerOptions<T> {}
+
+interface SerializePrimitiveOptions {
+	allowReserved?: boolean;
+	name: string;
+}
+
+export interface SerializerOptions<T> {
+	/**
+	 * @default true
+	 */
+	explode: boolean;
+	style: T;
+}
+
+export type ArrayStyle = "form" | "spaceDelimited" | "pipeDelimited";
+export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
+type MatrixStyle = "label" | "matrix" | "simple";
+export type ObjectStyle = "form" | "deepObject";
+type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
+
+interface SerializePrimitiveParam extends SerializePrimitiveOptions {
+	value: string;
+}
+
+export const separatorArrayExplode = (style: ArraySeparatorStyle) => {
+	switch (style) {
+		case "label":
+			return ".";
+		case "matrix":
+			return ";";
+		case "simple":
+			return ",";
+		default:
+			return "&";
+	}
+};
+
+export const separatorArrayNoExplode = (style: ArraySeparatorStyle) => {
+	switch (style) {
+		case "form":
+			return ",";
+		case "pipeDelimited":
+			return "|";
+		case "spaceDelimited":
+			return "%20";
+		default:
+			return ",";
+	}
+};
+
+export const separatorObjectExplode = (style: ObjectSeparatorStyle) => {
+	switch (style) {
+		case "label":
+			return ".";
+		case "matrix":
+			return ";";
+		case "simple":
+			return ",";
+		default:
+			return "&";
+	}
+};
+
+export const serializeArrayParam = ({
+	allowReserved,
+	explode,
+	name,
+	style,
+	value,
+}: SerializeOptions<ArraySeparatorStyle> & {
+	value: unknown[];
+}) => {
+	if (!explode) {
+		const joinedValues = (
+			allowReserved ? value : value.map((v) => encodeURIComponent(v as string))
+		).join(separatorArrayNoExplode(style));
+		switch (style) {
+			case "label":
+				return `.${joinedValues}`;
+			case "matrix":
+				return `;${name}=${joinedValues}`;
+			case "simple":
+				return joinedValues;
+			default:
+				return `${name}=${joinedValues}`;
+		}
+	}
+
+	const separator = separatorArrayExplode(style);
+	const joinedValues = value
+		.map((v) => {
+			if (style === "label" || style === "simple") {
+				return allowReserved ? v : encodeURIComponent(v as string);
+			}
+
+			return serializePrimitiveParam({
+				allowReserved,
+				name,
+				value: v as string,
+			});
+		})
+		.join(separator);
+	return style === "label" || style === "matrix"
+		? separator + joinedValues
+		: joinedValues;
+};
+
+export const serializePrimitiveParam = ({
+	allowReserved,
+	name,
+	value,
+}: SerializePrimitiveParam) => {
+	if (value === undefined || value === null) {
+		return "";
+	}
+
+	if (typeof value === "object") {
+		throw new Error(
+			"Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.",
+		);
+	}
+
+	return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
+};
+
+export const serializeObjectParam = ({
+	allowReserved,
+	explode,
+	name,
+	style,
+	value,
+	valueOnly,
+}: SerializeOptions<ObjectSeparatorStyle> & {
+	value: Record<string, unknown> | Date;
+	valueOnly?: boolean;
+}) => {
+	if (value instanceof Date) {
+		return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
+	}
+
+	if (style !== "deepObject" && !explode) {
+		let values: string[] = [];
+		Object.entries(value).forEach(([key, v]) => {
+			values = [
+				...values,
+				key,
+				allowReserved ? (v as string) : encodeURIComponent(v as string),
+			];
+		});
+		const joinedValues = values.join(",");
+		switch (style) {
+			case "form":
+				return `${name}=${joinedValues}`;
+			case "label":
+				return `.${joinedValues}`;
+			case "matrix":
+				return `;${name}=${joinedValues}`;
+			default:
+				return joinedValues;
+		}
+	}
+
+	const separator = separatorObjectExplode(style);
+	const joinedValues = Object.entries(value)
+		.map(([key, v]) =>
+			serializePrimitiveParam({
+				allowReserved,
+				name: style === "deepObject" ? `${name}[${key}]` : key,
+				value: v as string,
+			}),
+		)
+		.join(separator);
+	return style === "label" || style === "matrix"
+		? separator + joinedValues
+		: joinedValues;
+};
--- a/apps/client/app/api-client/core/types.gen.ts
+++ b/apps/client/app/api-client/core/types.gen.ts
@@ -0,0 +1,120 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth, AuthToken } from "./auth.gen";
+import type {
+	BodySerializer,
+	QuerySerializer,
+	QuerySerializerOptions,
+} from "./bodySerializer.gen";
+
+export interface Client<
+	RequestFn = never,
+	Config = unknown,
+	MethodFn = never,
+	BuildUrlFn = never,
+> {
+	/**
+	 * Returns the final request URL.
+	 */
+	buildUrl: BuildUrlFn;
+	connect: MethodFn;
+	delete: MethodFn;
+	get: MethodFn;
+	getConfig: () => Config;
+	head: MethodFn;
+	options: MethodFn;
+	patch: MethodFn;
+	post: MethodFn;
+	put: MethodFn;
+	request: RequestFn;
+	setConfig: (config: Config) => Config;
+	trace: MethodFn;
+}
+
+export interface Config {
+	/**
+	 * Auth token or a function returning auth token. The resolved value will be
+	 * added to the request payload as defined by its `security` array.
+	 */
+	auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
+	/**
+	 * A function for serializing request body parameter. By default,
+	 * {@link JSON.stringify()} will be used.
+	 */
+	bodySerializer?: BodySerializer | null;
+	/**
+	 * An object containing any HTTP headers that you want to pre-populate your
+	 * `Headers` object with.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
+	 */
+	headers?:
+		| RequestInit["headers"]
+		| Record<
+				string,
+				| string
+				| number
+				| boolean
+				| (string | number | boolean)[]
+				| null
+				| undefined
+				| unknown
+		  >;
+	/**
+	 * The request method.
+	 *
+	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
+	 */
+	method?:
+		| "CONNECT"
+		| "DELETE"
+		| "GET"
+		| "HEAD"
+		| "OPTIONS"
+		| "PATCH"
+		| "POST"
+		| "PUT"
+		| "TRACE";
+	/**
+	 * A function for serializing request query parameters. By default, arrays
+	 * will be exploded in form style, objects will be exploded in deepObject
+	 * style, and reserved characters are percent-encoded.
+	 *
+	 * This method will have no effect if the native `paramsSerializer()` Axios
+	 * API function is used.
+	 *
+	 * {@link https://swagger.io/docs/specification/serialization/#query View examples}
+	 */
+	querySerializer?: QuerySerializer | QuerySerializerOptions;
+	/**
+	 * A function validating request data. This is useful if you want to ensure
+	 * the request conforms to the desired shape, so it can be safely sent to
+	 * the server.
+	 */
+	requestValidator?: (data: unknown) => Promise<unknown>;
+	/**
+	 * A function transforming response data before it's returned. This is useful
+	 * for post-processing data, e.g. converting ISO strings into Date objects.
+	 */
+	responseTransformer?: (data: unknown) => Promise<unknown>;
+	/**
+	 * A function validating response data. This is useful if you want to ensure
+	 * the response conforms to the desired shape, so it can be safely passed to
+	 * the transformers and returned to the user.
+	 */
+	responseValidator?: (data: unknown) => Promise<unknown>;
+}
+
+type IsExactlyNeverOrNeverUndefined<T> = [T] extends [never]
+	? true
+	: [T] extends [never | undefined]
+		? [undefined] extends [T]
+			? false
+			: true
+		: false;
+
+export type OmitNever<T extends Record<string, unknown>> = {
+	[K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true
+		? never
+		: K]: T[K];
+};
--- a/apps/client/app/api-client/index.ts
+++ b/apps/client/app/api-client/index.ts
@@ -0,0 +1,3 @@
+// This file is auto-generated by @hey-api/openapi-ts
+export * from "./types.gen";
+export * from "./sdk.gen";
--- a/apps/client/app/api-client/sdk.gen.ts
+++ b/apps/client/app/api-client/sdk.gen.ts
@@ -0,0 +1,41 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Options as ClientOptions, TDataShape, Client } from "./client";
+import type {
+	GetApiV1VolumesData,
+	GetApiV1VolumesResponses,
+} from "./types.gen";
+import { client as _heyApiClient } from "./client.gen";
+
+export type Options<
+	TData extends TDataShape = TDataShape,
+	ThrowOnError extends boolean = boolean,
+> = ClientOptions<TData, ThrowOnError> & {
+	/**
+	 * You can provide a client instance returned by `createClient()` instead of
+	 * individual options. This might be also useful if you want to implement a
+	 * custom client.
+	 */
+	client?: Client;
+	/**
+	 * You can pass arbitrary values through the `meta` object. This can be
+	 * used to access values that aren't defined as part of the SDK function.
+	 */
+	meta?: Record<string, unknown>;
+};
+
+/**
+ * List all volumes
+ */
+export const getApiV1Volumes = <ThrowOnError extends boolean = false>(
+	options?: Options<GetApiV1VolumesData, ThrowOnError>,
+) => {
+	return (options?.client ?? _heyApiClient).get<
+		GetApiV1VolumesResponses,
+		unknown,
+		ThrowOnError
+	>({
+		url: "/api/v1/volumes",
+		...options,
+	});
+};
--- a/apps/client/app/api-client/types.gen.ts
+++ b/apps/client/app/api-client/types.gen.ts
@@ -0,0 +1,28 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type GetApiV1VolumesData = {
+	body?: never;
+	path?: never;
+	query?: never;
+	url: "/api/v1/volumes";
+};
+
+export type GetApiV1VolumesResponses = {
+	/**
+	 * A list of volumes
+	 */
+	200: {
+		volumes: Array<{
+			createdAt: string;
+			mountpoint: string;
+			name: string;
+		}>;
+	};
+};
+
+export type GetApiV1VolumesResponse =
+	GetApiV1VolumesResponses[keyof GetApiV1VolumesResponses];
+
+export type ClientOptions = {
+	baseUrl: "http://localhost:3000" | (string & {});
+};
--- a/apps/client/app/app.css
+++ b/apps/client/app/app.css
@@ -0,0 +1,137 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+	--font-sans:
+		"Google Sans Code", ui-sans-serif, system-ui, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+	@apply bg-white dark:bg-[#0D0D0D];
+
+	@media (prefers-color-scheme: dark) {
+		color-scheme: dark;
+	}
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--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-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--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);
+	--color-sidebar: var(--sidebar);
+	--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);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.1448 0 0);
+	/* --card: oklch(0.205 0 0); ORIGINAL */
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.1448 0 0);
+	/* --secondary: oklch(0.269 0 0); ORIGINAL */
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
--- a/apps/client/app/components/create-volume-dialog.tsx
+++ b/apps/client/app/components/create-volume-dialog.tsx
@@ -0,0 +1,123 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useCreateVolume } from "~/hooks/useCreateVolume";
+import { slugify } from "~/lib/utils";
+import { Button } from "./ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "./ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "./ui/form";
+import { Input } from "./ui/input";
+
+type Props = {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+};
+
+const formSchema = z.object({
+	name: z
+		.string()
+		.min(2, {
+			message: "Volume name must be at least 2 characters long",
+		})
+		.max(32, {
+			message: "Volume name must be at most 32 characters long",
+		}),
+});
+
+export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: "",
+		},
+	});
+
+	const nameValue = form.watch("name");
+	const createVolume = useCreateVolume();
+
+	const onSubmit = (values: { name: string }) => {
+		createVolume.mutate(values, {
+			onSuccess: () => {
+				form.reset();
+				setOpen(false);
+			},
+		});
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button className="bg-blue-900 hover:bg-blue-800">
+					<Plus size={16} />
+					Create volume
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Create volume</DialogTitle>
+					<DialogDescription>
+						Enter a name for the new volume.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="Volume name"
+											value={field.value ?? ""}
+											onChange={(e) => field.onChange(slugify(e.target.value))}
+											max={32}
+											min={1}
+										/>
+									</FormControl>
+									<FormDescription>
+										Unique identifier for the volume.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{createVolume.error && (
+							<div className="text-red-500 text-sm">
+								{createVolume.error.message}
+							</div>
+						)}
+						<DialogFooter>
+							<Button variant="secondary" onClick={() => setOpen(false)}>
+								Cancel
+							</Button>
+							<Button
+								type="submit"
+								disabled={createVolume.status === "pending" || !nameValue}
+							>
+								Create
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/client/app/components/ui/alert-dialog.tsx
+++ b/apps/client/app/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "~/lib/utils"
+import { buttonVariants } from "~/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/apps/client/app/components/ui/button.tsx
+++ b/apps/client/app/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex cursor-pointer uppercase border items-center justify-center dark:border-white dark:bg-secondary dark:text-white gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "rounded-xs h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };
--- a/apps/client/app/components/ui/card.tsx
+++ b/apps/client/app/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 border-2 py-6 shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardAction,
+	CardDescription,
+	CardContent,
+};
--- a/apps/client/app/components/ui/dialog.tsx
+++ b/apps/client/app/components/ui/dialog.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/apps/client/app/components/ui/form.tsx
+++ b/apps/client/app/components/ui/form.tsx
@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "~/lib/utils"
+import { Label } from "~/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/apps/client/app/components/ui/input.tsx
+++ b/apps/client/app/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };
--- a/apps/client/app/components/ui/label.tsx
+++ b/apps/client/app/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "~/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/apps/client/app/components/ui/select.tsx
+++ b/apps/client/app/components/ui/select.tsx
@@ -0,0 +1,183 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+
+function Select({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+	className,
+	size = "default",
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({
+	className,
+	children,
+	position = "popper",
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto border shadow-md",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};
--- a/apps/client/app/components/ui/table.tsx
+++ b/apps/client/app/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/apps/client/app/hooks/useCreateVolume.ts
+++ b/apps/client/app/hooks/useCreateVolume.ts
@@ -0,0 +1,57 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { type } from "arktype";
+import { slugify } from "~/lib/utils";
+
+const createVolume = async (variables: { name: string }) => {
+	const cleanName = slugify(variables.name);
+	if (!cleanName) {
+		throw new Error("Invalid volume name");
+	}
+	const response = await fetch("/api/volumes", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ name: cleanName }),
+	});
+
+	if (!response.ok) {
+		let errorText = "Network response was not ok";
+
+		try {
+			const errorData = await response.json();
+			if (errorData.error && typeof errorData.error === "string") {
+				errorText = errorData.error;
+			} else {
+				errorText = JSON.stringify(errorData);
+			}
+		} catch (_) {}
+
+		throw new Error(errorText);
+	}
+
+	return response.json();
+};
+
+const createVolumeSchema = type({
+	name: "string",
+});
+
+export const useCreateVolume = () => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: createVolume,
+		onSuccess: (data) => {
+			const result = createVolumeSchema(data);
+
+			if (result instanceof type.errors) {
+				console.error("Create volume response validation failed:", result);
+				return { message: "Invalid data format" };
+			}
+
+			queryClient.invalidateQueries({ queryKey: ["volumes"] });
+			return result;
+		},
+	});
+};
--- a/apps/client/app/hooks/useDeleteVolume.ts
+++ b/apps/client/app/hooks/useDeleteVolume.ts
@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { type } from "arktype";
+
+const volumesSchema = type({
+	message: "string",
+});
+
+const deleteVolume = async (variables: { name: string }) => {
+	const response = await fetch(`/api/volumes/${variables.name}`, {
+		method: "DELETE",
+	});
+
+	if (!response.ok) {
+		throw new Error("Network response was not ok");
+	}
+
+	return response.json();
+};
+
+export const useDeleteVolume = () => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: deleteVolume,
+		onSuccess: (data) => {
+			const result = volumesSchema(data);
+
+			if (result instanceof type.errors) {
+				console.error("Volumes data validation failed:", result);
+				return { message: "Invalid data format" };
+			}
+
+			queryClient.invalidateQueries({ queryKey: ["volumes"] });
+
+			return result;
+		},
+	});
+};
--- a/apps/client/app/lib/utils.ts
+++ b/apps/client/app/lib/utils.ts
@@ -0,0 +1,30 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Conditional merge of class names */
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+/**
+ * Converts an arbitrary string into a URL-safe slug:
+ * - lowercase
+ * - trims whitespace
+ * - replaces non-alphanumeric runs with "-"
+ * - collapses multiple hyphens
+ * - trims leading/trailing hyphens
+ */
+/**
+ * Live slugify for UI: lowercases, normalizes dashes, replaces invalid runs with "-",
+ * collapses repeats, but DOES NOT trim leading/trailing hyphens so the user can type
+ * spaces/dashes progressively while editing.
+ */
+export function slugify(input: string): string {
+	return input
+		.toLowerCase()
+		.replace(/[ ]/g, "-")
+		.replace(/[^a-z0-9_-]+/g, "")
+		.replace(/[-]{2,}/g, "-")
+		.replace(/[_]{2,}/g, "_")
+		.trim();
+}
--- a/apps/client/app/root.tsx
+++ b/apps/client/app/root.tsx
@@ -0,0 +1,80 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+	isRouteErrorResponse,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous",
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap",
+	},
+];
+
+const queryClient = new QueryClient();
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en" style={{ colorScheme: "dark" }} className="dark">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<QueryClientProvider client={queryClient}>
+				<body className="h-screen">
+					{children}
+					<ScrollRestoration />
+					<Scripts />
+				</body>
+			</QueryClientProvider>
+		</html>
+	);
+}
+
+export default function App() {
+	return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	let message = "Oops!";
+	let details = "An unexpected error occurred.";
+	let stack: string | undefined;
+
+	if (isRouteErrorResponse(error)) {
+		message = error.status === 404 ? "404" : "Error";
+		details =
+			error.status === 404
+				? "The requested page could not be found."
+				: error.statusText || details;
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message;
+		stack = error.stack;
+	}
+
+	return (
+		<main className="pt-16 p-4 container mx-auto">
+			<h1>{message}</h1>
+			<p>{details}</p>
+			{stack && (
+				<pre className="w-full p-4 overflow-x-auto">
+					<code>{stack}</code>
+				</pre>
+			)}
+		</main>
+	);
+}
--- a/apps/client/app/routes.ts
+++ b/apps/client/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export default [index("routes/home.tsx")] satisfies RouteConfig;
--- a/apps/client/app/routes/home.tsx
+++ b/apps/client/app/routes/home.tsx
@@ -0,0 +1,13 @@
+import type { Route } from "./+types/home";
+import { Welcome } from "../welcome/welcome";
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "Ironmount" },
+		{ name: "description", content: "Welcome to React Router!" },
+	];
+}
+
+export default function Home() {
+	return <Welcome />;
+}
--- a/apps/client/app/welcome/logo-dark.svg
+++ b/apps/client/app/welcome/logo-dark.svg
@@ -0,0 +1,23 @@
+<svg width="1080" height="174" viewBox="0 0 1080 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M231.527 86.9999C231.527 94.9642 228.297 102.173 223.067 107.387C217.837 112.606 210.614 115.835 202.634 115.835C194.654 115.835 187.43 119.059 182.206 124.278C176.977 129.498 173.741 136.707 173.741 144.671C173.741 152.635 170.51 159.844 165.281 165.058C160.051 170.277 152.828 173.507 144.847 173.507C136.867 173.507 129.644 170.277 124.42 165.058C119.19 159.844 115.954 152.635 115.954 144.671C115.954 136.707 119.19 129.498 124.42 124.278C129.644 119.059 136.867 115.835 144.847 115.835C152.828 115.835 160.051 112.606 165.281 107.387C170.51 102.173 173.741 94.9642 173.741 86.9999C173.741 71.0711 160.808 58.1643 144.847 58.1643C136.867 58.1643 129.644 54.9347 124.42 49.7155C119.19 44.502 115.954 37.2931 115.954 29.3287C115.954 21.3643 119.19 14.1555 124.42 8.93622C129.644 3.71698 136.867 0.493164 144.847 0.493164C160.808 0.493164 173.741 13.4 173.741 29.3287C173.741 37.2931 176.977 44.502 182.206 49.7155C187.43 54.9347 194.654 58.1643 202.634 58.1643C218.594 58.1643 231.527 71.0711 231.527 86.9999Z" fill="#F44250"/>
+<path d="M115.954 86.9996C115.954 71.0742 103.018 58.1641 87.061 58.1641C71.1037 58.1641 58.1677 71.0742 58.1677 86.9996C58.1677 102.925 71.1037 115.835 87.061 115.835C103.018 115.835 115.954 102.925 115.954 86.9996Z" fill="white"/>
+<path d="M58.1676 144.671C58.1676 128.745 45.2316 115.835 29.2743 115.835C13.317 115.835 0.381104 128.745 0.381104 144.671C0.381104 160.596 13.317 173.506 29.2743 173.506C45.2316 173.506 58.1676 160.596 58.1676 144.671Z" fill="white"/>
+<path d="M289.314 144.671C289.314 128.745 276.378 115.835 260.42 115.835C244.463 115.835 231.527 128.745 231.527 144.671C231.527 160.596 244.463 173.506 260.42 173.506C276.378 173.506 289.314 160.596 289.314 144.671Z" fill="white"/>
+<g clip-path="url(#clip0_202_2131)">
+<path d="M562.482 173.247C524.388 173.247 498.363 147.49 498.363 110.468C498.363 73.4455 524.388 47.6885 562.482 47.6885C600.576 47.6885 626.869 73.7135 626.869 110.468C626.869 147.222 600.576 173.247 562.482 173.247ZM562.482 144.007C579.385 144.007 587.703 130.319 587.703 110.468C587.703 90.6168 579.385 76.9289 562.482 76.9289C545.579 76.9289 537.529 90.6168 537.529 110.468C537.529 130.319 545.311 144.007 562.482 144.007Z" fill="white"/>
+<path d="M833.64 141.116C824.217 141.116 819.237 136.684 819.237 126.156V74.8983H851.928V47.7792H819.237V1.15527H791.75L786.1 26.1978C783.343 36.4805 780.82 42.822 773.897 46.0821C773.105 46.4506 771.129 46.9976 769.409 47.3884C768.014 47.701 766.596 47.8573 765.167 47.8573H752.338V47.9243H734.832C723.578 47.9243 714.445 57.0459 714.445 68.3111V111.552C714.445 130.599 707.199 142.668 692.719 142.668C678.238 142.668 672.868 133.279 672.868 116.375V47.9243H634.249V125.765C634.249 151.254 644.442 173.248 676.63 173.248C691.915 173.248 703.895 167.231 711.096 157.182C712.145 155.72 714.445 156.49 714.445 158.276V170.022H753.332V83.8412C753.332 78.8953 757.34 74.8871 762.286 74.8871H779.882V136.952C779.882 164.663 797.89 173.248 817.842 173.248C833.908 173.248 844.436 169.374 853.58 162.441V136.126C846.1 139.453 839.725 141.116 833.629 141.116H833.64Z" fill="white"/>
+<path d="M981.561 130.865C975.387 157.962 954.197 173.258 923.07 173.258C885.243 173.258 858.415 150.18 858.415 112.354C858.415 74.5281 885.779 47.6992 922.266 47.6992C961.699 47.6992 982.365 74.796 982.365 107.263V113.884H896.509C894.555 135.711 909.382 144.017 924.409 144.017C937.829 144.017 946.136 138.915 950.434 127.918L981.561 130.865ZM945.075 94.9372C944.271 83.1361 936.757 75.8567 921.998 75.8567C906.434 75.8567 899.188 82.321 897.045 94.9372H945.064H945.075Z" fill="white"/>
+<path d="M1076.24 85.7486C1070.06 82.2652 1064.17 80.9142 1055.85 80.9142C1039.75 80.9142 1029.02 90.0358 1029.02 110.691V170.02H990.393V47.9225H1029.02V64.3235C1029.02 65.4623 1030.54 65.8195 1031.05 64.8035C1036.68 53.5718 1047.91 44.707 1062.03 44.707C1069.27 44.707 1075.45 46.8507 1078.66 49.5414L1076.25 85.7597L1076.24 85.7486Z" fill="white"/>
+<path d="M547.32 31.5345V23.9983H522.457V31.5345H515.378V2.23828H542.14C553.562 2.23828 554.365 2.95282 554.365 13.1239C554.365 17.4111 553.472 18.5611 551.329 19.6553L549.408 20.6378L551.317 21.6426C553.595 22.8372 554.365 23.2391 554.365 30.0273V31.5345H547.332H547.32ZM522.457 18.3601H547.32V7.88763H522.457V18.349V18.3601Z" fill="white"/>
+<path d="M578.493 2.23828H610.826V7.90996H580.067V14.5083H610.011V19.2868H580.067V25.8963H610.837V31.501L578.504 31.5345C575.344 31.5345 572.787 28.9778 572.787 25.8293V7.95462C572.787 4.80617 575.344 2.24945 578.493 2.24945V2.23828Z" fill="white"/>
+<path d="M655.562 31.5345L653.151 26.3429H633.746L631.335 31.5345H624.58L637.006 4.75034C637.71 3.22078 639.262 2.23828 640.936 2.23828H645.927C647.613 2.23828 649.154 3.22078 649.857 4.75034L662.283 31.5345H655.529H655.562ZM643.46 8.06627C642.712 8.06627 642.053 8.49053 641.729 9.17158L635.968 21.5756H650.94L645.19 9.17158C644.878 8.49053 644.208 8.06627 643.46 8.06627Z" fill="white"/>
+<path d="M694.862 32.4153C676.05 32.4153 675.313 32.4153 675.313 16.8852C675.313 1.35505 676.05 1.36621 694.862 1.36621C711.721 1.36621 713.764 2.06959 714.244 10.5325H707.333V7.01556H682.168V26.766H707.333V23.2714H714.244C713.775 31.7119 711.721 32.4153 694.862 32.4153Z" fill="white"/>
+<path d="M745.282 31.5345V7.02795H729.16V2.23828H768.147V7.02795H752.025V31.5345H745.282Z" fill="white"/>
+<path d="M454.419 169.819C450.935 165.264 448.792 154.814 447.452 137.397C446.112 118.104 437.806 113.817 422.532 113.817H392.254V169.83H347.494V0.986328H432.715C476.391 0.986328 498.106 21.6187 498.106 54.5882C498.106 79.2399 482.833 95.3171 462.201 98.0078C479.618 101.491 489.8 111.405 491.675 130.966C494.087 156.154 494.891 163.656 500.518 169.819H454.419ZM424.676 78.704C443.969 78.704 453.615 73.8808 453.615 58.3395C453.615 44.6739 443.969 37.4392 424.676 37.4392H392.254V78.7152H424.676V78.704Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_202_2131">
+<rect width="731.156" height="172.261" fill="white" transform="translate(347.494 0.986328)"/>
+</clipPath>
+</defs>
+</svg>
--- a/apps/client/app/welcome/logo-light.svg
+++ b/apps/client/app/welcome/logo-light.svg
@@ -0,0 +1,23 @@
+<svg width="1080" height="174" viewBox="0 0 1080 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M231.527 86.9999C231.527 94.9642 228.297 102.173 223.067 107.387C217.837 112.606 210.614 115.835 202.634 115.835C194.654 115.835 187.43 119.059 182.206 124.278C176.977 129.498 173.741 136.707 173.741 144.671C173.741 152.635 170.51 159.844 165.281 165.058C160.051 170.277 152.828 173.507 144.847 173.507C136.867 173.507 129.644 170.277 124.42 165.058C119.19 159.844 115.954 152.635 115.954 144.671C115.954 136.707 119.19 129.498 124.42 124.278C129.644 119.059 136.867 115.835 144.847 115.835C152.828 115.835 160.051 112.606 165.281 107.387C170.51 102.173 173.741 94.9642 173.741 86.9999C173.741 71.0711 160.808 58.1643 144.847 58.1643C136.867 58.1643 129.644 54.9347 124.42 49.7155C119.19 44.502 115.954 37.2931 115.954 29.3287C115.954 21.3643 119.19 14.1555 124.42 8.93622C129.644 3.71698 136.867 0.493164 144.847 0.493164C160.808 0.493164 173.741 13.4 173.741 29.3287C173.741 37.2931 176.977 44.502 182.206 49.7155C187.43 54.9347 194.654 58.1643 202.634 58.1643C218.594 58.1643 231.527 71.0711 231.527 86.9999Z" fill="#F44250"/>
+<path d="M115.954 86.9996C115.954 71.0742 103.018 58.1641 87.0608 58.1641C71.1035 58.1641 58.1676 71.0742 58.1676 86.9996C58.1676 102.925 71.1035 115.835 87.0608 115.835C103.018 115.835 115.954 102.925 115.954 86.9996Z" fill="#121212"/>
+<path d="M58.1676 144.671C58.1676 128.745 45.2316 115.835 29.2743 115.835C13.317 115.835 0.381104 128.745 0.381104 144.671C0.381104 160.596 13.317 173.506 29.2743 173.506C45.2316 173.506 58.1676 160.596 58.1676 144.671Z" fill="#121212"/>
+<path d="M289.313 144.671C289.313 128.745 276.378 115.835 260.42 115.835C244.463 115.835 231.527 128.745 231.527 144.671C231.527 160.596 244.463 173.506 260.42 173.506C276.378 173.506 289.313 160.596 289.313 144.671Z" fill="#121212"/>
+<g clip-path="url(#clip0_171_1761)">
+<path d="M562.482 173.247C524.388 173.247 498.363 147.49 498.363 110.468C498.363 73.4455 524.388 47.6885 562.482 47.6885C600.576 47.6885 626.869 73.7135 626.869 110.468C626.869 147.222 600.576 173.247 562.482 173.247ZM562.482 144.007C579.386 144.007 587.703 130.319 587.703 110.468C587.703 90.6168 579.386 76.9289 562.482 76.9289C545.579 76.9289 537.529 90.6168 537.529 110.468C537.529 130.319 545.311 144.007 562.482 144.007Z" fill="#121212"/>
+<path d="M833.64 141.116C824.217 141.116 819.237 136.684 819.237 126.156V74.8983H851.928V47.7792H819.237V1.15527H791.75L786.1 26.1978C783.343 36.4805 780.82 42.822 773.897 46.0821C773.105 46.4506 771.129 46.9976 769.409 47.3884C768.014 47.701 766.596 47.8573 765.167 47.8573H752.338V47.9243H734.832C723.578 47.9243 714.445 57.0459 714.445 68.3111V111.552C714.445 130.599 707.199 142.668 692.719 142.668C678.238 142.668 672.868 133.279 672.868 116.375V47.9243H634.249V125.765C634.249 151.254 644.442 173.248 676.63 173.248C691.915 173.248 703.895 167.231 711.096 157.182C712.145 155.72 714.445 156.49 714.445 158.276V170.022H753.332V83.8412C753.332 78.8953 757.34 74.8871 762.286 74.8871H779.882V136.952C779.882 164.663 797.89 173.248 817.842 173.248C833.908 173.248 844.436 169.374 853.58 162.441V136.126C846.1 139.453 839.725 141.116 833.629 141.116H833.64Z" fill="#121212"/>
+<path d="M981.561 130.865C975.387 157.962 954.197 173.258 923.07 173.258C885.243 173.258 858.415 150.18 858.415 112.354C858.415 74.5281 885.779 47.6992 922.266 47.6992C961.699 47.6992 982.365 74.796 982.365 107.263V113.884H896.509C894.555 135.711 909.382 144.017 924.409 144.017C937.829 144.017 946.136 138.915 950.434 127.918L981.561 130.865ZM945.075 94.9372C944.271 83.1361 936.757 75.8567 921.998 75.8567C906.434 75.8567 899.188 82.321 897.045 94.9372H945.064H945.075Z" fill="#121212"/>
+<path d="M1076.24 85.7486C1070.06 82.2652 1064.17 80.9142 1055.85 80.9142C1039.75 80.9142 1029.02 90.0358 1029.02 110.691V170.02H990.393V47.9225H1029.02V64.3235C1029.02 65.4623 1030.54 65.8195 1031.05 64.8035C1036.68 53.5718 1047.91 44.707 1062.03 44.707C1069.27 44.707 1075.45 46.8507 1078.66 49.5414L1076.25 85.7597L1076.24 85.7486Z" fill="#121212"/>
+<path d="M547.321 31.5345V23.9983H522.457V31.5345H515.378V2.23828H542.14C553.562 2.23828 554.366 2.95282 554.366 13.1239C554.366 17.4111 553.472 18.5611 551.329 19.6553L549.408 20.6378L551.318 21.6426C553.595 22.8372 554.366 23.2391 554.366 30.0273V31.5345H547.332H547.321ZM522.457 18.3601H547.321V7.88763H522.457V18.349V18.3601Z" fill="#121212"/>
+<path d="M578.493 2.23828H610.826V7.90996H580.067V14.5083H610.011V19.2868H580.067V25.8963H610.837V31.501L578.504 31.5345C575.344 31.5345 572.787 28.9778 572.787 25.8293V7.95462C572.787 4.80617 575.344 2.24945 578.493 2.24945V2.23828Z" fill="#121212"/>
+<path d="M655.562 31.5345L653.151 26.3429H633.747L631.335 31.5345H624.58L637.007 4.75034C637.71 3.22078 639.262 2.23828 640.937 2.23828H645.927C647.613 2.23828 649.154 3.22078 649.857 4.75034L662.284 31.5345H655.529H655.562ZM643.46 8.06627C642.712 8.06627 642.053 8.49053 641.729 9.17158L635.968 21.5756H650.94L645.19 9.17158C644.878 8.49053 644.208 8.06627 643.46 8.06627Z" fill="#121212"/>
+<path d="M694.862 32.4153C676.05 32.4153 675.313 32.4153 675.313 16.8852C675.313 1.35505 676.05 1.36621 694.862 1.36621C711.721 1.36621 713.764 2.06959 714.244 10.5325H707.333V7.01556H682.168V26.766H707.333V23.2714H714.244C713.775 31.7119 711.721 32.4153 694.862 32.4153Z" fill="#121212"/>
+<path d="M745.282 31.5345V7.02795H729.16V2.23828H768.148V7.02795H752.026V31.5345H745.282Z" fill="#121212"/>
+<path d="M454.419 169.819C450.935 165.264 448.792 154.814 447.452 137.397C446.112 118.104 437.806 113.817 422.532 113.817H392.254V169.83H347.494V0.986328H432.715C476.391 0.986328 498.106 21.6187 498.106 54.5882C498.106 79.2399 482.833 95.3171 462.201 98.0078C479.618 101.491 489.8 111.405 491.676 130.966C494.087 156.154 494.891 163.656 500.518 169.819H454.419ZM424.676 78.704C443.969 78.704 453.615 73.8808 453.615 58.3395C453.615 44.6739 443.969 37.4392 424.676 37.4392H392.254V78.7152H424.676V78.704Z" fill="#121212"/>
+</g>
+<defs>
+<clipPath id="clip0_171_1761">
+<rect width="731.156" height="172.261" fill="white" transform="translate(347.494 0.986328)"/>
+</clipPath>
+</defs>
+</svg>
--- a/apps/client/app/welcome/welcome.tsx
+++ b/apps/client/app/welcome/welcome.tsx
@@ -0,0 +1,126 @@
+import { useQuery } from "@tanstack/react-query";
+import { Copy, Folder } from "lucide-react";
+import { useState } from "react";
+import { getApiV1VolumesOptions } from "~/api-client/@tanstack/react-query.gen";
+import { CreateVolumeDialog } from "~/components/create-volume-dialog";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "~/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "~/components/ui/table";
+import { useDeleteVolume } from "~/hooks/useDeleteVolume";
+import { cn } from "~/lib/utils";
+
+export function Welcome() {
+	const { data } = useQuery({
+		...getApiV1VolumesOptions(),
+	});
+
+	const deleteVolume = useDeleteVolume();
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div
+			className={cn(
+				"absolute inset-0",
+				"[background-size:40px_40px]",
+				"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+				"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+			)}
+		>
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
+			<main className="relative flex flex-col pt-16 p-4 container mx-auto">
+				<h1 className="text-3xl font-bold mb-0 uppercase">Ironmount</h1>
+				<h2 className="text-sm font-semibold mb-2 text-muted-foreground">
+					Create, manage, monitor, and automate your Docker volumes with ease.
+				</h2>
+				<div className="flex items-center gap-2 mt-4 justify-between">
+					<span className="flex items-center gap-2">
+						<Input className="w-[180px]" placeholder="Search volumes…" />
+						<Select>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="All status" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="mounted">Mounted</SelectItem>
+								<SelectItem value="unmounted">Unmounted</SelectItem>
+								<SelectItem value="error">Error</SelectItem>
+							</SelectContent>
+						</Select>
+						<Select>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="All backends" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="directory">Directory</SelectItem>
+								<SelectItem value="nfs">NFS</SelectItem>
+								<SelectItem value="smb">SMB</SelectItem>
+							</SelectContent>
+						</Select>
+					</span>
+					<CreateVolumeDialog open={open} setOpen={setOpen} />
+				</div>
+				<Table className="mt-4 border bg-white dark:bg-secondary">
+					<TableCaption>A list of your managed Docker volumes.</TableCaption>
+					<TableHeader>
+						<TableRow>
+							<TableHead className="w-[100px] uppercase">Name</TableHead>
+							<TableHead className="uppercase text-left">Backend</TableHead>
+							<TableHead className="uppercase">Mountpoint</TableHead>
+							<TableHead className="uppercase text-center">Status</TableHead>
+							<TableHead className="uppercase text-right">Actions</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{data?.volumes.map((volume) => (
+							<TableRow key={volume.name}>
+								<TableCell className="font-medium">{volume.name}</TableCell>
+								<TableCell>
+									<span className="mx-auto flex items-center gap-2 text-purple-800 dark:text-purple-300 rounded-md px-2 py-1">
+										<Folder size={10} />
+										Dir
+									</span>
+								</TableCell>
+								<TableCell>
+									<span className="flex items-center gap-2">
+										<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
+											{volume.mountpoint}
+										</span>
+										<Copy size={10} />
+									</span>
+								</TableCell>
+								<TableCell className="text-center">
+									<span className="relative flex size-3 mx-auto">
+										<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+										<span className="relative inline-flex size-3 rounded-full bg-green-500" />
+									</span>
+								</TableCell>
+								<TableCell className="text-right">
+									<Button
+										variant="destructive"
+										onClick={() => deleteVolume.mutate({ name: volume.name })}
+									>
+										Delete
+									</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</main>
+		</div>
+	);
+}