diff --git a/web/src/lib/api/reaction.ts b/web/src/lib/api/reaction.ts
new file mode 100644
index 00000000..d30d5ada
--- /dev/null
+++ b/web/src/lib/api/reaction.ts
@@ -0,0 +1,37 @@
+import { ok } from "@atcute/client";
+import { mainSchema as putRecordSchema } from "@atcute/atproto/types/repo/putRecord";
+import { mainSchema as deleteRecordSchema } from "@atcute/atproto/types/repo/deleteRecord";
+import type { Nsid, RecordKey } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { createClient } from "$lib/auth/agent";
+import type { ReactionRecord, RecordView } from "./records";
+
+const REACTION_COLLECTION = "sh.tangled.feed.reaction" as Nsid;
+
+export const putReaction = async (
+	agent: OAuthUserAgent,
+	rkey: string,
+	record: ReactionRecord
+): Promise<RecordView<ReactionRecord>> => {
+	const rpc = createClient(agent);
+	const { uri, cid } = await ok(
+		rpc.call(putRecordSchema, {
+			input: {
+				repo: agent.sub,
+				collection: REACTION_COLLECTION,
+				rkey: rkey as RecordKey,
+				record
+			}
+		})
+	);
+	return { uri, cid, value: record };
+};
+
+export const deleteReaction = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
+	const rpc = createClient(agent);
+	await ok(
+		rpc.call(deleteRecordSchema, {
+			input: { repo: agent.sub, collection: REACTION_COLLECTION, rkey: rkey as RecordKey }
+		})
+	);
+};
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 3699b20c..7bc99133 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -32,7 +32,7 @@
 
 <div
 	class={isAuthShell
-		? "flex min-h-screen flex-col bg-background-default text-foreground-default"
+		? "flex min-h-screen flex-col bg-background-default dark:bg-background-canvas text-foreground-default"
 		: isMarketingShell
 			? "flex min-h-screen flex-col bg-gradient-to-b from-background-default to-background-canvas text-foreground-default"
 			: "flex min-h-screen flex-col bg-background-canvas text-foreground-default"}
@@ -41,7 +41,7 @@
 		<header
 			class={isMarketingShell
 				? "z-20 w-full bg-transparent pt-[env(safe-area-inset-top)]"
-				: "sticky top-0 z-20 w-full bg-background-default pt-[env(safe-area-inset-top)]"}
+				: "top-0 z-20 w-full bg-background-default pt-[env(safe-area-inset-top)]"}
 		>
 			<Topbar
 				user={auth.currentUser}