diff --git a/src/components/AISummary.tsx b/src/components/AISummary.tsx
index e544ea3..346efb8 100644
--- a/src/components/AISummary.tsx
+++ b/src/components/AISummary.tsx
@@ -1,19 +1,32 @@
-import type { FC, PropsWithChildren } from "hono/jsx";
-import type { ReadablePage } from "../types";
+import type { FC } from "hono/jsx";
+
+const AISummary: FC<{ url: string; summary?: string }> = ({ url, summary }) => {
+	const proseClasses =
+		"prose dark:prose-invert font-humanist mt-2 prose-p:mt-0 prose-headings:font-transitional prose-headings:my-0 prose-h2:text-lg";
+	if (summary) {
+		return (
+			<aside className={proseClasses}>
+				<h2>AI-generated summary</h2>
+				{/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
+				<div dangerouslySetInnerHTML={{ __html: summary }} />
+			</aside>
+		);
+	}
 
-const AISummary: FC<{ url: string }> = ({ url }) => {
 	return (
 		<aside
 			hx-trigger="load"
 			hx-get="/api/summary"
 			hx-vals={JSON.stringify({ url })}
-			className="prose dark:prose-invert font-humanist mt-2"
+			hx-swap="outerHTML"
+			className={proseClasses}
 		>
-			<div class="flex flex-col gap-1">
-				<div className="w-[30ch] bg-slate-200 dark:bg-gray-600 rounded px-4 py-2 h-4 animate-pulse" />
-				<div className="w-[33ch] lg:w-[45ch] bg-slate-200 dark:bg-gray-600 rounded px-4 py-2 h-4 animate-pulse" />
-				<div className="w-[33ch] lg:w-[40ch] bg-slate-200 dark:bg-gray-600 rounded px-4 py-2 h-4 animate-pulse" />
-				<div className="w-[39ch] lg:w-[42ch] bg-slate-200 dark:bg-gray-600 rounded px-4 py-2 h-4 animate-pulse" />
+			<div class="flex flex-col gap-1 @container htmx-indicator">
+				<div className="w-[40cqi] bg-base-50 dark:bg-base-950 px-4 py-2 h-4 animate-pulse" />
+				<div className="w-[87cqi] bg-base-50 dark:bg-base-950 px-4 py-2 h-4 animate-pulse" />
+				<div className="w-[93cqi] bg-base-50 dark:bg-base-950 px-4 py-2 h-4 animate-pulse" />
+				<div className="w-[74cqi] bg-base-50 dark:bg-base-950 px-4 py-2 h-4 animate-pulse" />
+				<div className="w-[90cqi] bg-base-50 dark:bg-base-950 px-4 py-2 h-4 animate-pulse" />
 			</div>
 		</aside>
 	);
diff --git a/src/components/AISummaryError.tsx b/src/components/AISummaryError.tsx
index 5980d82..26d80b0 100644
--- a/src/components/AISummaryError.tsx
+++ b/src/components/AISummaryError.tsx
@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
 
 const AISummaryError: FC<PropsWithChildren> = ({ children }) => (
-	<div className="bg-slate-200 dark:bg-gray-600 rounded px-4 py-2">
+	<div className="bg-base-50 dark:bg-base-950 rounded px-4 py-2">
 		<h3 className="font-bold mt-0">Failed to retrieve AI summary</h3>
 		<p>{children}</p>
 	</div>
diff --git a/src/components/ArticleHeader.tsx b/src/components/ArticleHeader.tsx
index e77033e..c9ea463 100644
--- a/src/components/ArticleHeader.tsx
+++ b/src/components/ArticleHeader.tsx
@@ -19,14 +19,22 @@ const ArticleHeader: FC<{ article: ReadablePage; classes?: string }> = ({
 }) => {
 	const metadata = generateMetadataNuggets(article);
 	return (
-		<header className={[classes, "space-y-2"].join(" ")}>
-			<h2 class="text-3xl font-transitional">
+		<header
+			className={[
+				"space-y-2",
+				"mb-4",
+				"pb-4",
+				"border-b border-base-100 dark:border-base-900",
+				classes,
+			].join(" ")}
+		>
+			<h2 class="text-2xl font-transitional">
 				<a href={article.url} class="hover:underline">
 					{article.title}
 				</a>
 			</h2>
 			<p class="text-sm">{metadata.join(" ・ ")}</p>
-			<AISummary url={article.url} />
+			<AISummary url={article.url} summary={article.summary} />
 		</header>
 	);
 };
diff --git a/src/components/ArticleMinimap.tsx b/src/components/ArticleMinimap.tsx
index b37ea1a..9dd1955 100644
--- a/src/components/ArticleMinimap.tsx
+++ b/src/components/ArticleMinimap.tsx
@@ -4,7 +4,7 @@ const ArticleMinimap: FC<{ classes?: string; selector: string }> = ({
 	classes = "",
 	selector,
 }) => {
-	return <wc-minimap class={classes} data-article-selector={selector} />;
+	return <wc-minimap className={classes} data-article-selector={selector} />;
 };
 
 export default ArticleMinimap;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9da0fa9..5246dc9 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -18,17 +18,15 @@ function isLink(props: Props): props is LinkProps & CommonProps {
 }
 
 const classes = [
-	"border",
-	"py-1",
-	"px-2",
+	"px-2 py-1",
 	"rounded",
 	"transition",
 	"text-center",
-	"bg-canvas",
-	"hover:brightness-95",
-	"dark:hover:brightness-125",
-	"active:brightness-105",
-	"dark:active:brightness-90",
+	"border",
+	"drop-shadow",
+	"cursor-pointer",
+	"bg-paper hover:bg-base-150 active:bg-base-100 border-base-100",
+	"dark:bg-base-900 hover:dark:bg-base-800 active:dark:bg-base-850 dark:border-base-900",
 ] as const;
 
 const Button: FC<PropsWithChildren<Props>> = (props) => {
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..3fc8168
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,14 @@
+import type { FC } from "hono/jsx";
+
+const Input: FC<{
+	classes?: string;
+	[k: string]: string | boolean | undefined;
+}> = ({ classes = "", ...props }) => {
+	const className = [
+		"border border-base-100 dark:border-base-900 rounded block w-full py-1 px-4 transition",
+		classes,
+	].join(" ");
+	return <input className={className} {...props} />;
+};
+
+export default Input;
diff --git a/src/components/RecentArticles.tsx b/src/components/RecentArticles.tsx
index 5f4e802..3e2feca 100644
--- a/src/components/RecentArticles.tsx
+++ b/src/components/RecentArticles.tsx
@@ -9,15 +9,13 @@ const RecentArticle: FC<{ article: ReadablePage }> = ({ article }) => {
 				"md:w-60",
 				"flex-auto",
 				"p-2",
-				"bg-canvas",
 				"overflow-hidden",
 				"transition",
 				"rounded",
 				"border",
-				"hover:brightness-95",
-				"dark:hover:brightness-125",
-				"active:brightness-105",
-				"dark:active:brightness-90",
+				"border-base-100 dark:border-base-900",
+				"bg-paper hover:bg-base-50 ",
+				"dark:bg-black hover:dark:bg-base-950 ",
 			].join(" ")}
 		>
 			<a href={`/${article.url}`}>
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 8d0da09..7c15b91 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,38 +1,35 @@
-import type { FC, PropsWithChildren } from "hono/jsx";
+import type { FC } from "hono/jsx";
 import Button from "../components/Button";
+import Input from "./Input";
 
 const Settings: FC = () => (
-	<form className="flex flex-col gap-4 items-start" id="settings-form">
+	<form
+		className="flex flex-col gap-4 items-start text-black dark:text-base-200"
+		id="settings-form"
+	>
 		<label className="flex flex-col items-start">
 			<span>AI model</span>
-			<select name="model" className="border rounded-md py-1 px-4">
+			<select
+				name="model"
+				className="border border-base-100 rounded dark:border-base-900 p-1 bg-paper hover:bg-base-150 active:bg-base-100 dark:bg-base-900 hover:dark:bg-base-800 active:dark:bg-base-850"
+			>
 				<option value="gpt-4o-mini">GPT-4o mini</option>
 			</select>
 		</label>
+		{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
 		<label className="flex flex-col items-start">
 			<span>API key</span>
-			<input
-				type="text"
-				name="apiKey"
-				className="border focus:border-transparent block w-full rounded-md focus:ring-0 py-1 px-4 transition"
-			/>
+			<Input type="text" name="apiKey" />
 		</label>
 		<div
 			id="status"
-			className="h-4 -mt-3 transition-opacity opacity-0 dark:text-green-400 text-green-700"
+			className="h-4 -mt-3 transition-opacity opacity-0 text-green-600 dark:text-green-400"
 		>
 			✔︎ Saved!
 		</div>
 		<div className="flex items-center gap-2">
-			<Button type="submit" classes="py-1 px-6">
-				Save
-			</Button>
-			<Button
-				type="reset"
-				classes="py-1 px-6 text-red-700 border-red-700 dark:text-red-400 dark:border-red-400"
-			>
-				Reset
-			</Button>
+			<Button type="submit">Save</Button>
+			<Button type="reset">Reset</Button>
 		</div>
 	</form>
 );
diff --git a/src/layouts/BasePage.tsx b/src/layouts/BasePage.tsx
index 800af17..4b6cc39 100644
--- a/src/layouts/BasePage.tsx
+++ b/src/layouts/BasePage.tsx
@@ -1,11 +1,11 @@
-import type { FC, PropsWithChildren } from "hono/jsx";
+import type { Child, FC, PropsWithChildren } from "hono/jsx";
 import Button from "../components/Button";
 import Settings from "../components/Settings";
 
 interface BasePageProps {
 	title?: string;
 	className?: string;
-	head?: FC;
+	head?: Child;
 }
 
 const BasePage: FC<PropsWithChildren<BasePageProps>> = ({
@@ -22,7 +22,7 @@ const BasePage: FC<PropsWithChildren<BasePageProps>> = ({
 			<title>{title}</title>
 			<link rel="manifest" href="/manifest.webmanifest" />
 			<link rel="icon" href="/scissors.svg" type="image/svg+xml" />
-			{Head && <Head />}
+			{Head}
 			<link rel="stylesheet" href="/styles.css" />
 			<script
 				src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"
@@ -45,7 +45,7 @@ const BasePage: FC<PropsWithChildren<BasePageProps>> = ({
 			/>
 		</head>
 
-		<body className="text-base px-4 lg:px-0">
+		<body className="text-base bg-paper font-humanist dark:bg-black text-black dark:text-base-200 px-4 lg:px-0">
 			<div className="m-auto max-w-prose space-y-2">
 				<header
 					className="flex items-center mb-4 gap-4 print:hidden"
@@ -63,13 +63,13 @@ const BasePage: FC<PropsWithChildren<BasePageProps>> = ({
 					<div
 						popover="auto"
 						id="settings-dialog"
-						className="border p-2 rounded m-auto"
+						className="p-4 rounded m-auto bg-paper dark:bg-black drop-shadow-lg border border-base-100 dark:border-base-900"
 					>
 						<Settings />
 					</div>
 				</header>
 				<div className={className}>{children}</div>
-				<footer className="border-t-2 py-2 border-neutral-400 flex justify-between items-start">
+				<footer className="flex justify-between py-4 my-4 items-start border-t border-base-100 dark:border-base-900">
 					<ul>
 						<li>
 							<a
diff --git a/src/middleware/logger.ts b/src/middleware/logger.ts
index 962283a..8ba42bb 100644
--- a/src/middleware/logger.ts
+++ b/src/middleware/logger.ts
@@ -35,7 +35,10 @@ import type { MiddlewareHandler } from "hono";
  */
 export function getColorEnabled(): boolean {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const { process, Deno } = globalThis as { process?: { env: { NO_COLOR?: unknown } }; Deno?: { noColor?: boolean } };
+	const { process, Deno } = globalThis as {
+		process?: { env: { NO_COLOR?: unknown } };
+		Deno?: { noColor?: boolean };
+	};
 
 	const isNoColor =
 		typeof Deno?.noColor === "boolean"
diff --git a/src/pages/ClippedUrl.tsx b/src/pages/ClippedUrl.tsx
index ba595e0..246eb27 100644
--- a/src/pages/ClippedUrl.tsx
+++ b/src/pages/ClippedUrl.tsx
@@ -1,4 +1,4 @@
-import type { FC } from "hono/jsx";
+import type { FC, PropsWithChildren } from "hono/jsx";
 import ArticleHeader from "../components/ArticleHeader";
 import ArticleMinimap from "../components/ArticleMinimap";
 import Button from "../components/Button";
@@ -69,19 +69,48 @@ function generateObsidianUri(
 	return `obsidian://new?file=${encodeURIComponent(folder + fileName)}&content=${encodeURIComponent(fileContent)}${vaultName}`;
 }
 
-const ClippedPageHead: FC<{ article: ReadablePage }> = ({ article }) => <></>;
+const ClippedPageHead: FC<{ article: ReadablePage }> = ({ article }) => {
+	const plainTextSummary = article.summary
+		? article.summary.replace(/<[^>]*>/g, "")
+		: `${article.textContent.trim().substring(0, 300)}…`;
+
+	const articleHostname = new URL(article.url).hostname;
+	return (
+		<>
+			<meta name="description" content={plainTextSummary} />
+			<meta
+				property="og:title"
+				content={`${article.title} | ${articleHostname} | yazzy`}
+			/>
+			<meta property="og:description" content={plainTextSummary} />
+			<meta property="og:url" content={article.url} />
+			<meta property="og:type" content="article" />
+			{article.published && (
+				<meta
+					property="og:article:published_time"
+					content={formatDate(article.published)}
+				/>
+			)}
+			{article.author && (
+				<meta property="og:article:author" content={article.author} />
+			)}
+		</>
+	);
+};
 
 const ClippedUrlPage: FC<{ article: ReadablePage }> = ({ article }) => {
 	const plainTextSummary = article.summary
 		? article.summary.replace(/<[^>]*>/g, "")
 		: `${article.textContent.substring(0, 300)}…`;
-	const articleHostname = new URL(article.url).hostname;
 	const markdownContent = generateObsidianContents(article);
 	const obsidianUri = generateObsidianUri(markdownContent, article.title);
 	const plainTextContent = `${article.title}\n---\nSummary\n\n${plainTextSummary}\n---\n${article.textContent}`;
 
 	return (
-		<BasePage className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-2 lg:gap-4">
+		<BasePage
+			className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-2 lg:gap-4"
+			head={<ClippedPageHead article={article} />}
+		>
 			<aside className="flex lg:flex-col gap-3 items-center lg:col-start-1 lg:row-span-2 print:hidden">
 				<Button href={obsidianUri} title="Save to Obsidian" type="link">
 					<Obsidian className="h-4" />
@@ -102,18 +131,26 @@ const ClippedUrlPage: FC<{ article: ReadablePage }> = ({ article }) => {
 				</DownloadAs>
 				<ArticleMinimap
 					selector="article"
-					classes="border fixed bottom-3 mx-auto px-2 rounded lg:m-0 lg:top-2 lg:sticky bg-white dark:bg-neutral-800"
+					classes="fixed bottom-3 mx-auto px-2 rounded lg:m-0 lg:top-2 lg:sticky bg-paper dark:bg-black"
 				/>
 			</aside>
 			<div className="lg:col-start-2 max-w-prose space-x-2">
 				<main>
 					<article>
-						<ArticleHeader
-							classes="border-b-2 border-neutral-400 pb-2"
-							article={article}
-						/>
+						<ArticleHeader article={article} />
 						<div
-							className="prose dark:prose-invert lg:prose-xl font-humanist prose-headings:font-transitional prose-a:break-words prose-hr:my-4 prose-headings:mt-10 prose-headings:mb-0 !prose-img:max-w-lg prose-img:mx-auto prose-img:rounded"
+							className={[
+								"prose dark:prose-invert",
+								"font-humanist",
+								"prose-headings:font-transitional",
+								"prose-a:break-words",
+								"prose-hr:my-4",
+								"prose-headings:mt-6",
+								"prose-headings:mb-0",
+								"!prose-img:max-w-lg",
+								"prose-img:mx-auto",
+								"prose-img:rounded",
+							].join(" ")}
 							hx-disable
 							// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
 							dangerouslySetInnerHTML={{ __html: article.htmlContent }}
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..43ac4e8
--- /dev/null
+++ b/src/pages/ErrorPage.tsx
@@ -0,0 +1,13 @@
+import type { FC } from "hono/jsx";
+import BasePage from "../layouts/BasePage";
+
+const ErrorPage: FC<{ message: string }> = ({ message }) => {
+	return (
+		<BasePage title="Failure to clip">
+			<h1 className="text-2xl font-transitional">Failure to clip</h1>
+			<p>{message}</p>
+		</BasePage>
+	);
+};
+
+export default ErrorPage;
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 638e5dd..b6614b4 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,6 +1,9 @@
 import { type FC, Fragment } from "hono/jsx";
 import Button from "../components/Button";
+import Input from "../components/Input";
+import RecentArticles from "../components/RecentArticles";
 import BasePage from "../layouts/BasePage";
+import type { ReadablePage } from "../types";
 
 const Head: FC = () => (
 	<Fragment>
@@ -18,8 +21,10 @@ const Head: FC = () => (
 	</Fragment>
 );
 
-const IndexPage: FC = () => (
-	<BasePage title="yazzy" head={Head}>
+const IndexPage: FC<{ recentArticles: ReadablePage[] }> = ({
+	recentArticles,
+}) => (
+	<BasePage title="yazzy" head={<Head />}>
 		<header className="mb-4">
 			<p className="">
 				Tired of popups, ads, and other distractions on your page? Just put the
@@ -32,8 +37,7 @@ const IndexPage: FC = () => (
 			method="get"
 			className="flex gap-1 items-center mb-4"
 		>
-			<input
-				className="border focus:border-transparent block w-full rounded-md focus:ring-0 py-1 px-4 transition"
+			<Input
 				type="url"
 				id="url"
 				name="url"
@@ -45,7 +49,7 @@ const IndexPage: FC = () => (
 				Clip{" "}
 			</Button>
 		</form>
-		<div hx-trigger="load" hx-get="/api/recent-articles" hx-swap="outerHTML" />
+		<RecentArticles articles={recentArticles} />
 	</BasePage>
 );
 export default IndexPage;
diff --git a/src/server.tsx b/src/server.tsx
index 7ed1102..6a5187c 100644
--- a/src/server.tsx
+++ b/src/server.tsx
@@ -3,11 +3,13 @@ import { Hono } from "hono";
 import { getCookie } from "hono/cookie";
 import { etag } from "hono/etag";
 import { requestId } from "hono/request-id";
+import type { StatusCode } from "hono/utils/http-status";
 import { z } from "zod";
 import AISummaryError from "./components/AISummaryError";
 import RecentArticles from "./components/RecentArticles";
 import { logger } from "./middleware/logger";
 import ClippedUrlPage from "./pages/ClippedUrl";
+import ErrorPage from "./pages/ErrorPage";
 import IndexPage from "./pages/Index";
 import { cache } from "./services/cache";
 import { clip } from "./services/clipper";
@@ -30,7 +32,8 @@ app.use(logger(log));
 app.use("*", etag());
 app.route("/", staticFiles);
 app.get("/", (c) => {
-	return c.html(<IndexPage />);
+	const recentArticles = cache.getRecentArticles();
+	return c.html(<IndexPage recentArticles={recentArticles} />);
 });
 app.get("/api/clip", (c) => {
 	const url = c.req.query("url");
@@ -86,7 +89,11 @@ app.get(
 				return c;
 			}
 			cache.addSummary(url, article.summary);
-			return c.html(article.summary);
+			const proseClasses =
+				"prose dark:prose-invert font-humanist mt-2 prose-p:mt-0 prose-headings:font-transitional prose-headings:my-0 prose-h2:text-lg";
+			return c.html(
+				`<aside class="${proseClasses}"><h2>AI-generated summary</h2>${article.summary}</aside>`,
+			);
 		} catch (err) {
 			c.status(500);
 			let apiErrorMsg: string;
@@ -111,22 +118,38 @@ app.get(
 	),
 	async (c) => {
 		const url = c.req.param("url");
-		let article: ReadablePage | undefined = cache.getArticle(url);
-		if (!article) {
-			article = await clip(new URL(url));
-			cache.insertArticle(article);
+		try {
+			let article: ReadablePage | undefined = cache.getArticle(url);
+			if (!article) {
+				article = await clip(new URL(url));
+				cache.insertArticle(article);
+			}
+			return c.html(<ClippedUrlPage article={article} />);
+		} catch (err) {
+			let message: string;
+			if (err instanceof Error) {
+				message = err.message;
+			} else if (typeof err === "string") {
+				message = err;
+			} else {
+				message = `Unknown error: ${err}`;
+			}
+			log.error(message);
+			// extract error code — space digit digit digit space
+			const errorCode = message.match(/ \d{3} /);
+			c.status(
+				errorCode
+					? (Number.parseInt(errorCode[0].trim(), 10) as StatusCode)
+					: 500,
+			);
+			return c.html(<ErrorPage message={message} />);
 		}
-		return c.html(<ClippedUrlPage article={article} />);
 	},
 );
 app.get("/api/article-count", (c) => {
 	const count = cache.getArticleCount();
 	return c.text(count.toString());
 });
-app.get("/api/recent-articles", (c) => {
-	const recentArticles = cache.getRecentArticles();
-	return c.html(<RecentArticles articles={recentArticles} />);
-});
 app.get("/api/db-dump", (c) => {
 	const dump = db.serialize();
 	c.res.headers.set("Content-Type", "application/vnd.sqlite3");
diff --git a/src/services/clipper.ts b/src/services/clipper.ts
index c47fd60..70b2ffd 100644
--- a/src/services/clipper.ts
+++ b/src/services/clipper.ts
@@ -13,7 +13,9 @@ async function fetchPage(url: URL): Promise<JSDOM> {
 		},
 	});
 	if (!response.ok) {
-		throw new Error(`Failed to fetch ${url.toString()}`);
+		throw new Error(
+			`Failed to fetch ${url.toString()}: ${response.status} ${response.statusText}`,
+		);
 	}
 	const contentType = response.headers.get("content-type");
 	if (!contentType || !contentType.includes("text/html")) {
diff --git a/src/services/log.ts b/src/services/log.ts
index 8f8c5bd..323e172 100644
--- a/src/services/log.ts
+++ b/src/services/log.ts
@@ -1,3 +1,13 @@
+function formatMessage(message: string) {
+	return `[${new Date().toISOString()}] ${message}`;
+}
+
 export default function log(message: string, ...rest: string[]) {
-	console.log(`[${new Date().toISOString()}]`, message, ...rest);
+	console.log(formatMessage(message), ...rest);
+}
+
+function error(message: string, ...rest: string[]) {
+	console.error(formatMessage(message), ...rest);
 }
+
+log.error = error;
diff --git a/src/static/scripts.mjs b/src/static/scripts.mjs
index 946cffc..b139650 100644
--- a/src/static/scripts.mjs
+++ b/src/static/scripts.mjs
@@ -23,6 +23,12 @@ function initSettingsForm() {
 		event.preventDefault();
 		event.stopPropagation();
 		const apiKeyValue = apiKey.value;
+
+		statusText?.classList.toggle("opacity-100");
+		setTimeout(() => {
+			statusText?.classList.toggle("opacity-100");
+		}, 3000);
+
 		if (!apiKeyValue) {
 			// delete the cookie
 			document.cookie = `Authorization=; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Strict; Secure; Path=/; Domain=${window.location.hostname};`;
@@ -31,10 +37,6 @@ function initSettingsForm() {
 		}
 		const value = btoa(`${model.value}=${apiKey.value}`);
 		document.cookie = `Authorization=${value}; max-age=31536000; SameSite=Strict; Secure; Path=/; Domain=${window.location.hostname};`;
-		statusText?.classList.toggle("opacity-100");
-		setTimeout(() => {
-			statusText?.classList.toggle("opacity-100");
-		}, 3000);
 	});
 }
 initSettingsForm();
diff --git a/src/static/staticFiles.ts b/src/static/staticFiles.ts
index bf25109..ac6d0b7 100644
--- a/src/static/staticFiles.ts
+++ b/src/static/staticFiles.ts
@@ -1,3 +1,4 @@
+import { $ } from "bun";
 import { Hono } from "hono";
 import { serveStatic } from "hono/bun";
 import webManifest from "./manifest.webmanifest" with { type: "file" };
@@ -7,6 +8,10 @@ import CSS_OUTPUT_PATH from "./styles.min.css" with { type: "file" };
 
 const staticFiles = new Hono();
 
+if (import.meta.env.NODE_ENV === "development") {
+	await $`bun run css`;
+}
+
 staticFiles.use(
 	"/styles.css",
 	serveStatic({ path: CSS_OUTPUT_PATH, root: "/" }),
diff --git a/src/static/styles.css b/src/static/styles.css
index c83d6d9..16a0abc 100644
--- a/src/static/styles.css
+++ b/src/static/styles.css
@@ -7,7 +7,7 @@
 	--color-canvas: Canvas;
 	--color-canvas-text: CanvasText;
 
-	/* from https://github.com/system-fonts/modern-font-stacks */
+	/* System Font Stack—https://github.com/system-fonts/modern-font-stacks */
 	--font-system: "system-ui", "sans-serif";
 	--font-transitional: "Charter", "'Bitstream Charter'", "'Sitka Text'",
 		"Cambria", "serif";
@@ -40,17 +40,233 @@
 		"TSCu_Comic", "casual", "cursive";
 	--font-emoji: "'Apple Color Emoji'", "'Segoe UI Emoji'", "'Segoe UI Symbol'",
 		"'Noto Color Emoji'";
+
+	/* Flexoki—https://stephango.com/flexoki */
+	/* Base */
+	--color-base-0: #fffcf0;
+	--color-paper: var(--color-base-0);
+	--color-base-50: #f2f0e5;
+	--color-base-100: #e6e4d9;
+	--color-base-150: #dad8ce;
+	--color-base-200: #cecdc3;
+	--color-base-300: #b7b5ac;
+	--color-base-400: #9f9d96;
+	--color-base-500: #878580;
+	--color-base-600: #6f6e69;
+	--color-base-700: #575653;
+	--color-base-800: #403e3c;
+	--color-base-850: #343331;
+	--color-base-900: #282726;
+	--color-base-950: #1c1b1a;
+	--color-base-1000: #100f0f;
+	--color-black: var(--color-base-1000);
+
+	/* Red */
+	--color-red-50: #ffe1d5;
+	--color-red-100: #ffcabb;
+	--color-red-150: #fdb2a2;
+	--color-red-200: #f89a8a;
+	--color-red-300: #e8705f;
+	--color-red-400: #d14d41;
+	--color-red-500: #c03e35;
+	--color-red-600: #af3029;
+	--color-red-700: #942822;
+	--color-red-800: #6c201c;
+	--color-red-850: #551b18;
+	--color-red-900: #3e1715;
+	--color-red-950: #261312;
+
+	/* Orange */
+	--color-orange-50: #ffe1d5;
+	--color-orange-100: #ffcabb;
+	--color-orange-150: #fdb2a2;
+	--color-orange-200: #f89a8a;
+	--color-orange-300: #e8705f;
+	--color-orange-400: #d14d41;
+	--color-orange-500: #c03e35;
+	--color-orange-600: #af3029;
+	--color-orange-700: #942822;
+	--color-orange-800: #6c201c;
+	--color-orange-850: #551b18;
+	--color-orange-900: #3e1715;
+	--color-orange-950: #261312;
+
+	/* Yellow */
+	--color-yellow-50: #faeec6;
+	--color-yellow-100: #f6e2a0;
+	--color-yellow-150: #f1d67e;
+	--color-yellow-200: #eccb60;
+	--color-yellow-300: #dfb431;
+	--color-yellow-400: #d0a215;
+	--color-yellow-500: #be9207;
+	--color-yellow-600: #ad8301;
+	--color-yellow-700: #8e6b01;
+	--color-yellow-800: #664d01;
+	--color-yellow-850: #503d02;
+	--color-yellow-900: #3a2d04;
+	--color-yellow-950: #241e08;
+
+	/* Green */
+	--color-green-50: #edeecf;
+	--color-green-100: #dde2b2;
+	--color-green-150: #cdd597;
+	--color-green-200: #bec97e;
+	--color-green-300: #a0af54;
+	--color-green-400: #879a39;
+	--color-green-500: #768d21;
+	--color-green-600: #66800b;
+	--color-green-700: #536907;
+	--color-green-800: #3d4c07;
+	--color-green-850: #313d07;
+	--color-green-900: #252d09;
+	--color-green-950: #1a1e0c;
+
+	/* Cyan */
+	--color-cyan-50: #ddf1e4;
+	--color-cyan-100: #bfe8d9;
+	--color-cyan-150: #a2dece;
+	--color-cyan-200: #87d3c3;
+	--color-cyan-300: #5abdac;
+	--color-cyan-400: #3aa99f;
+	--color-cyan-500: #2f968d;
+	--color-cyan-600: #24837b;
+	--color-cyan-700: #1c6c66;
+	--color-cyan-800: #164f4a;
+	--color-cyan-850: #143f3c;
+	--color-cyan-900: #122f2c;
+	--color-cyan-950: #101f1d;
+
+	/* Blue */
+	--color-blue-50: #e1eceb;
+	--color-blue-100: #c6dde8;
+	--color-blue-150: #abcfe2;
+	--color-blue-200: #92bfdb;
+	--color-blue-300: #66a0c8;
+	--color-blue-400: #4385be;
+	--color-blue-500: #3171b2;
+	--color-blue-600: #205ea6;
+	--color-blue-700: #1a4f8c;
+	--color-blue-800: #163b66;
+	--color-blue-850: #133051;
+	--color-blue-900: #12253b;
+	--color-blue-950: #101a24;
+
+	/* Purple */
+	--color-purple-50: #f0eaec;
+	--color-purple-100: #e2d9e9;
+	--color-purple-150: #d3cae6;
+	--color-purple-200: #c4b9e0;
+	--color-purple-300: #a699d0;
+	--color-purple-400: #8b7ec8;
+	--color-purple-500: #735eb5;
+	--color-purple-600: #5e409d;
+	--color-purple-700: #4f3685;
+	--color-purple-800: #3c2a62;
+	--color-purple-850: #31234e;
+	--color-purple-900: #261c39;
+	--color-purple-950: #1a1623;
+
+	/* Magenta */
+	--color-magenta-50: #fee4e5;
+	--color-magenta-100: #fccfda;
+	--color-magenta-150: #f9b9cf;
+	--color-magenta-200: #f4a4c2;
+	--color-magenta-300: #e47da8;
+	--color-magenta-400: #ce5d97;
+	--color-magenta-500: #b74583;
+	--color-magenta-600: #a02f6f;
+	--color-magenta-700: #87285e;
+	--color-magenta-800: #641f46;
+	--color-magenta-850: #4f1b39;
+	--color-magenta-900: #39172b;
+	--color-magenta-950: #24131d;
+
+	/* 
+ * Base color
+ * Flexoki uses warm monochromatic base values that blend the black value with 
+ * the paper value. 8 values are used in light and dark mode:
+ * 
+ * - 3 text values: normal, muted, faint
+ * - 3 interface values: normal, hover, active
+ * - 2 background values: primary, secondary
+ */
+	/* --color-tx: light-dark(var(--color-black), var(--color-base-200));
+ --color-tx-2: light-dark(var(--color-base-600), var(--color-base-500));
+ --color-tx-3: light-dark(var(--color-base-300), var(--color-base-700));
+ --color-ui-3: light-dark(var(--color-base-200), var(--color-base-800));
+ --color-ui-2: light-dark(var(--color-base-150), var(--color-base-850));
+ --color-ui: light-dark(var(--color-base-100), var(--color-base-900));
+ --color-bg-2: light-dark(var(--color-base-50), var(--color-base-950));
+ --color-bg: light-dark(var(--color-paper), var(--color-black)); */
+
+	/*
+ * Accent colors
+ * 8 accent colors are available for accents and syntax highlighting. Unlike the
+ * base values, accent values cannot be derived using opacity because this
+ * desaturates the pigment effect. Use the extended palette for the full range
+ * of values.
+ *
+ * The following 16 values are the main accent values used for syntax
+ * highlighting and interface elements like buttons and links. Light themes
+ * should use 600 for syntax highlighted text, dark themes should use 400.
+ */
+	/* --color-re: light-dark(var(--color-red-600), var(--color-red-400));
+ --color-re-2: light-dark(var(--color-red-400), var(--color-red-600));
+ --color-or: light-dark(var(--color-orange-600), var(--color-orange-400));
+ --color-or-2: light-dark(var(--color-orange-400), var(--color-orange-600));
+ --color-ye: light-dark(var(--color-yellow-600), var(--color-yellow-400));
+ --color-ye-2: light-dark(var(--color-yellow-400), var(--color-yellow-600));
+ --color-gr: light-dark(var(--color-green-600), var(--color-green-400));
+ --color-gr-2: light-dark(var(--color-green-400), var(--color-green-600));
+ --color-cy: light-dark(var(--color-cyan-600), var(--color-cyan-400));
+ --color-cy-2: light-dark(var(--color-cyan-400), var(--color-cyan-600));
+ --color-bl: light-dark(var(--color-blue-600), var(--color-blue-400));
+ --color-bl-2: light-dark(var(--color-blue-400), var(--color-blue-600));
+ --color-pu: light-dark(var(--color-purple-600), var(--color-purple-400));
+ --color-pu-2: light-dark(var(--color-purple-400), var(--color-purple-600));
+ --color-ma: light-dark(var(--color-magenta-600), var(--color-magenta-400));
+ --color-ma-2: light-dark(var(--color-magenta-400), var(--color-magenta-600)); */
+}
+/* Apply Flexoki to Tailwind Typography theme */
+.prose {
+	--tw-prose-body: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-headings: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-lead: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-links: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-bold: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-counters: light-dark(var(--color-base-300), var(--color-base-700));
+	--tw-prose-bullets: light-dark(var(--color-base-300), var(--color-base-700));
+	--tw-prose-hr: light-dark(var(--color-base-200), var(--color-base-800));
+	--tw-prose-quotes: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-quote-borders: light-dark(
+		var(--color-base-200),
+		var(--color-base-800)
+	);
+	--tw-prose-captions: light-dark(var(--color-base-600), var(--color-base-500));
+	--tw-prose-kbd: light-dark(var(--color-base-100), var(--color-base-850));
+	--tw-prose-kbd-shadows: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-code: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-pre-code: light-dark(var(--color-black), var(--color-base-200));
+	--tw-prose-pre-bg: light-dark(var(--color-base-50), var(--color-base-950));
+	--tw-prose-th-borders: light-dark(
+		var(--color-base-200),
+		var(--color-base-800)
+	);
+	--tw-prose-td-borders: light-dark(
+		var(--color-base-200),
+		var(--color-base-800)
+	);
 }
 
 :root {
-	@apply scroll-smooth;
+	@apply scroll-smooth scheme-light-dark;
 }
 .primary {
-	@apply fill-neutral-400 dark:fill-neutral-100;
+	fill: light-dark(var(--color-black), var(--color-base-200));
 }
 .secondary {
-	@apply fill-neutral-900 dark:fill-neutral-500;
+	fill: light-dark(var(--color-base-600), var(--color-base-500));
 }
 ::backdrop {
-	@apply backdrop-blur-sm;
+	@apply backdrop-brightness-75 dark:backdrop-brightness-50;
 }