diff --git a/public/oauth-client-metadata.json b/public/oauth-client-metadata.json
index c1e9346..c5e5174 100644
--- a/public/oauth-client-metadata.json
+++ b/public/oauth-client-metadata.json
@@ -3,7 +3,7 @@
   "client_name": "untangled",
   "client_uri": "https://untangled.wisp.place",
   "redirect_uris": ["https://untangled.wisp.place/oauth/callback"],
-  "scope": "atproto repo:sh.tangled.actor.profile repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* repo:sh.tangled.feed.comment blob:*/*",
+  "scope": "atproto repo:sh.tangled.actor.profile repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* repo:sh.tangled.feed.comment repo:sh.tangled.string repo:sh.tangled.feed.star blob:*/*",
   "grant_types": ["authorization_code", "refresh_token"],
   "response_types": ["code"],
   "token_endpoint_auth_method": "none",
diff --git a/src/components/repo.tsx b/src/components/repo.tsx
index 44557d9..d61a6b2 100644
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -15,7 +15,11 @@ import {
 	Star,
 	CircleDot,
 	GitPullRequest,
+	LoaderCircle,
+	MessageSquarePlus,
 } from 'lucide-solid';
+import { useAuth } from '../lib/auth';
+import { resolveActor } from '../lib/api/identity';
 import { marked } from 'marked';
 import { A, useNavigate } from '@solidjs/router';
 import { For, Show, createMemo, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
@@ -1545,6 +1549,131 @@ export const LoadingFilePath: Component<{
 
 export { CodeView, DiffView, PullDiffView } from './code-view';
 
+export interface GenericComment {
+	uri: string;
+	rkey: string;
+	author: { did: string; handle: string };
+	value: {
+		body: string;
+		createdAt: string;
+		replyTo?: any;
+	};
+}
+
+export interface GenericCommentThread {
+	item: GenericComment;
+	replies: GenericComment[];
+}
+
+export const CommentThreadsSection: Component<{
+	threads: GenericCommentThread[];
+	authorDid?: string;
+	title?: string;
+}> = (props) => {
+	return (
+		<div class="mt-6 space-y-4">
+			<Show when={props.title}>
+				<h3 class="text-lg font-bold border-b border-gray-200 dark:border-gray-700 pb-2 dark:text-white mb-4">
+					{props.title}
+				</h3>
+			</Show>
+			<div class="space-y-4">
+				<For each={props.threads}>
+					{(thread) => (
+						<div class="rounded border border-gray-200 dark:border-gray-700 w-full overflow-hidden shadow-sm bg-gray-50 dark:bg-gray-800/50">
+							<ThreadCommentView
+								id={`comment-${thread.item.rkey}`}
+								author={thread.item.author}
+								createdAt={thread.item.value.createdAt}
+								markdown={thread.item.value.body}
+								isAuthor={props.authorDid ? thread.item.author.did === props.authorDid : false}
+								class="rounded px-6 py-4 bg-white dark:bg-gray-800"
+							/>
+							<Show when={thread.replies.length > 0}>
+								<div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
+									<For each={thread.replies}>
+										{(reply) => (
+											<div class="-ml-4">
+												<ThreadCommentView
+													id={`comment-${reply.rkey}`}
+													author={reply.author}
+													createdAt={reply.value.createdAt}
+													markdown={reply.value.body}
+													isAuthor={props.authorDid ? reply.author.did === props.authorDid : false}
+													isReply={true}
+													class="py-4 pr-4"
+												/>
+											</div>
+										)}
+									</For>
+								</div>
+							</Show>
+						</div>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+};
+
+export const CommentComposer: Component<{
+	value: string;
+	onValueChange: (val: string) => void;
+	onSubmit: (event: SubmitEvent) => void;
+	working?: boolean;
+	submitLabel?: string;
+	placeholder?: string;
+	error?: string | null;
+}> = (props) => {
+	const auth = useAuth();
+	const viewerQuery = createQuery(() => ({
+		queryKey: ['viewer', auth.currentDid()],
+		enabled: Boolean(auth.currentDid()),
+		queryFn: async () => resolveActor(auth.currentDid()!),
+	}));
+
+	return (
+		<form onSubmit={props.onSubmit} class="group/form w-full mt-4 flex flex-col">
+			<div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full border border-gray-200 dark:border-gray-700">
+				<div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
+					<Show when={viewerQuery.data} fallback={<div class="h-6" />}>
+						{(viewer) => (
+							<A href={`/${viewer().handle || viewer().did}`} class="flex items-center gap-1 hover:underline text-gray-500 dark:text-gray-400 w-fit">
+								<Avatar did={viewer().did} size="size-6" />
+								<span>{viewer().handle || viewer().did}</span>
+							</A>
+						)}
+					</Show>
+				</div>
+				<textarea
+					rows={5}
+					placeholder={props.placeholder ?? 'Add to the discussion. Markdown is supported.'}
+					class="w-full p-2 rounded border border-gray-200 dark:border-gray-700 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400 dark:text-white"
+					required
+					value={props.value}
+					onInput={(event) => props.onValueChange(event.currentTarget.value)}
+				/>
+				<Show when={props.error}>
+					<div id="comment-error" class="error text-sm text-red-500 mt-1">{props.error}</div>
+				</Show>
+			</div>
+			<div class="flex gap-2 mt-2">
+				<button
+					id="comment-button"
+					type="submit"
+					class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline"
+					disabled={props.working || !props.value.trim()}
+				>
+					<Show when={props.working} fallback={<MessageSquarePlus class="w-4 h-4" />}>
+						<LoaderCircle class="w-4 h-4 animate-spin" />
+					</Show>
+					<span>{props.submitLabel ?? 'Comment'}</span>
+				</button>
+			</div>
+		</form>
+	);
+};
+
 
 
 
diff --git a/src/index.css b/src/index.css
index c3a22e8..9feec65 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3784,13 +3784,15 @@ details[open] > .untangled-language-bar {
 
 /* Align solid bar with the vertical replies thread line */
 .-ml-4.untangled-comment-highlight::before,
-.-ml-4 > .untangled-comment-highlight::before {
+.-ml-4 > .untangled-comment-highlight::before,
+.untangled-thread-reply.untangled-comment-highlight::before {
 	left: calc(1rem - 2px);
 	border-radius: 0;
 }
 
 .-ml-4.untangled-comment-highlight,
-.-ml-4 > .untangled-comment-highlight {
+.-ml-4 > .untangled-comment-highlight,
+.untangled-thread-reply.untangled-comment-highlight {
 	background-color: transparent !important;
 	background-image: linear-gradient(to right, transparent calc(1rem - 2px), rgb(254 240 138 / 0.15) calc(1rem - 2px)) !important;
 }
@@ -3803,7 +3805,8 @@ details[open] > .untangled-language-bar {
 		background-color: #ca8a04;
 	}
 	.-ml-4.untangled-comment-highlight,
-	.-ml-4 > .untangled-comment-highlight {
+	.-ml-4 > .untangled-comment-highlight,
+	.untangled-thread-reply.untangled-comment-highlight {
 		background-color: transparent !important;
 		background-image: linear-gradient(to right, transparent calc(1rem - 2px), rgb(161 98 7 / 0.1) calc(1rem - 2px)) !important;
 	}
diff --git a/src/layout.tsx b/src/layout.tsx
index 4c94506..370ebad 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Bell, BookMarked, LogOut, RotateCcw, Save, Search, Settings, UserRound } from 'lucide-solid';
+import { Bell, BookMarked, LogOut, RotateCcw, Save, Search, Settings, UserRound, Plus, LineSquiggle } from 'lucide-solid';
 import { A, useLocation, useNavigate } from '@solidjs/router';
 import { createQuery, useQueryClient } from '@tanstack/solid-query';
 import { For, Show, createEffect, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
@@ -40,12 +40,14 @@ const AppSettingsMenu: Component = () => {
 	const [draftRouteKnotRequestsThroughAppview, setDraftRouteKnotRequestsThroughAppview] = createSignal(
 		settings.routeKnotRequestsThroughAppview(),
 	);
+	const [draftForcePds, setDraftForcePds] = createSignal(settings.forcePds());
 	const [error, setError] = createSignal<string | null>(null);
 	const [saved, setSaved] = createSignal(false);
 
 	createEffect(() => {
 		setDraftAppviewUrl(settings.appviewUrl());
 		setDraftRouteKnotRequestsThroughAppview(settings.routeKnotRequestsThroughAppview());
+		setDraftForcePds(settings.forcePds());
 	});
 
 	const reloadAppviewBackedQueries = () => {
@@ -58,6 +60,7 @@ const AppSettingsMenu: Component = () => {
 		try {
 			settings.setAppviewUrl(draftAppviewUrl());
 			settings.setRouteKnotRequestsThroughAppview(draftRouteKnotRequestsThroughAppview());
+			settings.setForcePds(draftForcePds());
 			setError(null);
 			setSaved(true);
 			reloadAppviewBackedQueries();
@@ -71,6 +74,7 @@ const AppSettingsMenu: Component = () => {
 		settings.resetAppviewSettings();
 		setDraftAppviewUrl(settings.defaultAppviewUrl);
 		setDraftRouteKnotRequestsThroughAppview(false);
+		setDraftForcePds(false);
 		setError(null);
 		setSaved(true);
 		reloadAppviewBackedQueries();
@@ -114,6 +118,20 @@ const AppSettingsMenu: Component = () => {
 						<span>route knot requests through appview</span>
 					</label>
 
+					<label class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-200">
+						<input
+							type="checkbox"
+							checked={draftForcePds()}
+							onChange={(event) => {
+								setDraftForcePds(event.currentTarget.checked);
+								setSaved(false);
+								setError(null);
+							}}
+							class="size-4 rounded border-gray-300 dark:border-gray-600"
+						/>
+						<span>force requests through PDS (bypass appview)</span>
+					</label>
+
 					<div class="flex items-center justify-between gap-3">
 						<button type="button" class={buttonStyles()} onClick={onReset}>
 							<RotateCcw class="size-4" />
@@ -252,6 +270,10 @@ const UserProfileMenu: Component = () => {
 									<BookMarked class="size-4" />
 									repositories
 								</A>
+								<A href={`/${handle()}?tab=strings`} class="untangled-topbar-menu-item" onClick={closeMenu}>
+									<LineSquiggle class="size-4" />
+									strings
+								</A>
 							</>
 						)}
 					</Show>
@@ -275,6 +297,30 @@ const UserProfileMenu: Component = () => {
 	);
 };
 
+const NewMenu: Component = () => {
+	const closeMenu = (e: MouseEvent) => {
+		const details = (e.currentTarget as HTMLElement).closest('details');
+		if (details) details.open = false;
+	};
+
+	return (
+		<details data-topbar-menu class="untangled-topbar-menu">
+			<summary class="untangled-topbar-menu-summary btn text-sm no-underline hover:no-underline flex items-center gap-2 group border border-gray-200 dark:border-gray-700 rounded-sm px-3 py-1.5 bg-white dark:bg-gray-800 cursor-pointer">
+				<Plus class="size-4" />
+				<span class="hidden md:inline">new</span>
+			</summary>
+			<div class="untangled-topbar-menu-dropdown">
+				<div class="untangled-topbar-menu-item-separator">
+					<A href="/strings/new" class="untangled-topbar-menu-item" onClick={closeMenu}>
+						<LineSquiggle class="size-4" />
+						new string
+					</A>
+				</div>
+			</div>
+		</details>
+	);
+};
+
 const TopbarSearch: Component = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
@@ -384,6 +430,7 @@ const Topbar: Component = () => {
 						when={auth.currentDid()}
 						fallback={<LoginMenu />}
 					>
+						<NewMenu />
 						<NotificationsMenu />
 						<UserProfileMenu />
 					</Show>
@@ -393,14 +440,21 @@ const Topbar: Component = () => {
 	);
 };
 
-export const RootShell: Component<{ children?: JSX.Element }> = (props) => (
-	<div class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white">
-		<header class="untangled-safe-header w-full shadow-sm dark:text-white bg-white dark:bg-gray-800">
-			<Topbar />
-		</header>
-
-		<div class="flex-grow">
-			<div class="untangled-shell mx-auto flex flex-col gap-4">{props.children}</div>
-		</div>
-	</div>
-);
+export const RootShell: Component<{ children?: JSX.Element }> = (props) => {
+	const location = useLocation();
+	const isRaw = () => location.pathname.endsWith('/raw');
+
+	return (
+		<Show when={!isRaw()} fallback={<>{props.children}</>}>
+			<div class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white">
+				<header class="untangled-safe-header w-full shadow-sm dark:text-white bg-white dark:bg-gray-800">
+					<Topbar />
+				</header>
+
+				<div class="flex-grow">
+					<div class="untangled-shell mx-auto flex flex-col gap-4">{props.children}</div>
+				</div>
+			</div>
+		</Show>
+	);
+};
diff --git a/src/lib/api.ts b/src/lib/api.ts
index ef7d432..f4a115a 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -67,6 +67,18 @@ export {
 export {
 	searchRecords,
 } from './api/search';
+export {
+	getString,
+	listStringRecords,
+	deleteString,
+	updateString,
+	createString,
+	listStringComments,
+	createStringComment,
+	getStringStarSummary,
+	createStringStar,
+	deleteStringStar,
+} from './api/strings';
 
 export type {
 	HydratedRecord,
@@ -74,6 +86,12 @@ export type {
 	RecordCreationResult,
 } from './api/records';
 export type {
+	StringRecord,
+	StringComment,
+	StringStarSummary,
+} from './api/strings';
+export type {
+
 	BlobResponse,
 	BranchEntry,
 	BranchResponse,
diff --git a/src/lib/api/appview.ts b/src/lib/api/appview.ts
index bae92b5..7d52f56 100644
--- a/src/lib/api/appview.ts
+++ b/src/lib/api/appview.ts
@@ -4,6 +4,7 @@ import { normalizeServiceUrl } from './client';
 import {
 	getRouteKnotRequestsThroughAppview,
 	getTangledAppviewService,
+	getForcePds,
 } from '../settings';
 
 export interface AppviewRecordView<T> {
@@ -144,6 +145,10 @@ export const appviewJsonUrl = async <T>(url: URL, signal?: AbortSignal): Promise
 };
 
 export const appviewFallback = async <T>(primary: () => Promise<T>, fallback: () => Promise<T>): Promise<T> => {
+	if (getForcePds()) {
+		return fallback();
+	}
+
 	try {
 		return await primary();
 	} catch (cause) {
diff --git a/src/lib/api/constants.ts b/src/lib/api/constants.ts
index 780318b..027310f 100644
--- a/src/lib/api/constants.ts
+++ b/src/lib/api/constants.ts
@@ -21,4 +21,5 @@ export const PULL_COLLECTION: Nsid = 'sh.tangled.repo.pull';
 export const PULL_COMMENT_COLLECTION: Nsid = 'sh.tangled.repo.pull.comment';
 export const PULL_STATUS_COLLECTION: Nsid = 'sh.tangled.repo.pull.status';
 export const FEED_COMMENT_COLLECTION: Nsid = 'sh.tangled.feed.comment';
+export const STRING_COLLECTION: Nsid = 'sh.tangled.string';
 
diff --git a/src/lib/api/strings.ts b/src/lib/api/strings.ts
new file mode 100644
index 0000000..d556ffc
--- /dev/null
+++ b/src/lib/api/strings.ts
@@ -0,0 +1,335 @@
+import { ok } from '@atcute/client';
+import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
+import type { ResolvedActor } from '@atcute/identity-resolver';
+import type { Did, Nsid, ResourceUri } from '@atcute/lexicons/syntax';
+import { ShTangledString, ShTangledFeedStar } from '@atcute/tangled';
+
+import {
+	appviewFallback,
+	listAllAppviewRecords,
+	getDistinctAppviewRecordCount,
+	type AppviewRecordView,
+} from './appview';
+import { getRpc } from './client';
+import { STRING_COLLECTION, STAR_COLLECTION, FEED_COMMENT_COLLECTION } from './constants';
+import { resolveActor, createAuthRpc } from './identity';
+import { parseAtUri, type RecordCreationResult } from './records';
+import { appviewRecordToHydrated } from './hydration';
+
+export interface StringRecord {
+	uri: ResourceUri;
+	cid: string;
+	rkey: string;
+	value: ShTangledString.Main;
+}
+
+export interface StringComment {
+	uri: ResourceUri;
+	cid?: string;
+	rkey: string;
+	author: ResolvedActor;
+	value: {
+		$type: string;
+		body: string;
+		createdAt: string;
+		subject: { uri: string; cid: string };
+		replyTo?: { uri: string; cid: string };
+	};
+}
+
+export interface StringStarSummary {
+	count: number;
+	isStarred: boolean;
+	currentUserStarRkey?: string;
+}
+
+const fetchAllStringRecords = async (
+	actor: ResolvedActor,
+	collection: Nsid,
+): Promise<Array<{ uri: ResourceUri; cid: string; value: unknown }>> => {
+	const rpc = getRpc(actor.pds);
+	const records: Array<{ uri: ResourceUri; cid: string; value: unknown }> = [];
+	let cursor: string | undefined;
+
+	do {
+		const page = await ok(
+			rpc.get('com.atproto.repo.listRecords', {
+				params: {
+					repo: actor.did,
+					collection,
+					limit: 100,
+					cursor,
+					reverse: true,
+				},
+			}),
+		);
+
+		records.push(...page.records);
+		cursor = page.cursor;
+	} while (cursor);
+
+	return records;
+};
+
+const listStringRecordsFromAppview = async (owner: string | ResolvedActor): Promise<StringRecord[]> => {
+	const actor = typeof owner === 'string' ? await resolveActor(owner) : owner;
+	const records = await listAllAppviewRecords<ShTangledString.Main>('sh.tangled.string.listStrings', actor.did);
+
+	return records.map((record) => ({
+		uri: record.uri,
+		cid: record.cid ?? '',
+		rkey: parseAtUri(record.uri).rkey,
+		value: record.value,
+	}));
+};
+
+const listStringRecordsFromPds = async (owner: string | ResolvedActor): Promise<StringRecord[]> => {
+	const actor = typeof owner === 'string' ? await resolveActor(owner) : owner;
+	const records = await fetchAllStringRecords(actor, STRING_COLLECTION);
+
+	return records.map((record) => ({
+		uri: record.uri,
+		cid: record.cid,
+		rkey: parseAtUri(record.uri).rkey,
+		value: record.value as ShTangledString.Main,
+	}));
+};
+
+export const listStringRecords = async (owner: string | ResolvedActor): Promise<StringRecord[]> =>
+	appviewFallback(
+		() => listStringRecordsFromAppview(owner),
+		() => listStringRecordsFromPds(owner),
+	);
+
+export const getString = async (
+	ownerIdentifier: string,
+	rkey: string,
+): Promise<{ owner: ResolvedActor; record: StringRecord }> => {
+	const owner = await resolveActor(ownerIdentifier);
+	const response = await ok(
+		getRpc(owner.pds).get('com.atproto.repo.getRecord', {
+			params: {
+				repo: owner.did,
+				collection: STRING_COLLECTION,
+				rkey,
+			},
+		}),
+	);
+
+	const record: StringRecord = {
+		uri: response.uri,
+		cid: response.cid ?? '',
+		rkey,
+		value: response.value as ShTangledString.Main,
+	};
+	return { owner, record };
+};
+
+export const deleteString = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	await ok(
+		rpc.post('com.atproto.repo.deleteRecord', {
+			input: {
+				repo: agent.sub,
+				collection: STRING_COLLECTION,
+				rkey,
+			},
+		}),
+	);
+};
+
+export const updateString = async (
+	agent: OAuthUserAgent,
+	rkey: string,
+	input: { filename: string; description?: string; contents: string },
+	swapRecord?: string,
+): Promise<RecordCreationResult> => {
+	const rpc = createAuthRpc(agent);
+	const record: ShTangledString.Main = {
+		$type: 'sh.tangled.string',
+		filename: input.filename.trim(),
+		description: input.description?.trim() || '',
+		contents: input.contents,
+		createdAt: new Date().toISOString(),
+	};
+
+	const result = await ok(
+		rpc.post('com.atproto.repo.putRecord', {
+			input: {
+				repo: agent.sub,
+				collection: STRING_COLLECTION,
+				rkey,
+				record,
+				swapRecord: swapRecord || undefined,
+			},
+		}),
+	);
+
+	return {
+		uri: result.uri,
+		rkey: parseAtUri(result.uri).rkey,
+	};
+};
+
+export const createString = async (
+	agent: OAuthUserAgent,
+	input: { filename: string; description?: string; contents: string },
+): Promise<RecordCreationResult> => {
+	const rpc = createAuthRpc(agent);
+	const record: ShTangledString.Main = {
+		$type: 'sh.tangled.string',
+		filename: input.filename.trim(),
+		description: input.description?.trim() || '',
+		contents: input.contents,
+		createdAt: new Date().toISOString(),
+	};
+
+	const result = await ok(
+		rpc.post('com.atproto.repo.createRecord', {
+			input: {
+				repo: agent.sub,
+				collection: STRING_COLLECTION,
+				record,
+			},
+		}),
+	);
+
+	return {
+		uri: result.uri,
+		rkey: parseAtUri(result.uri).rkey,
+	};
+};
+
+
+export const listStringComments = async (stringUri: ResourceUri): Promise<StringComment[]> => {
+	const records = await listAllAppviewRecords<any>(
+		'sh.tangled.feed.listComments',
+		stringUri,
+	);
+	const comments = await Promise.all(records.map(async (record) => {
+		const hydrated = await appviewRecordToHydrated<any>(record);
+		const val = hydrated.value;
+		const bodyText = (val && typeof val === 'object' && val.body && typeof val.body === 'object' && 'text' in val.body)
+			? val.body.text
+			: (val && typeof val === 'object' && typeof val.body === 'string' ? val.body : '');
+		return {
+			...hydrated,
+			value: {
+				$type: 'sh.tangled.feed.comment',
+				body: bodyText,
+				createdAt: (val && typeof val === 'object' && val.createdAt) || new Date().toISOString(),
+				subject: (val && typeof val === 'object' && val.subject) || { uri: stringUri, cid: '' },
+				replyTo: val && typeof val === 'object' ? val.replyTo : undefined,
+			}
+		};
+	}));
+	comments.sort((a, b) => new Date(a.value.createdAt).getTime() - new Date(b.value.createdAt).getTime());
+	return comments;
+};
+
+export const createStringComment = async (
+	agent: OAuthUserAgent,
+	stringUri: ResourceUri,
+	stringCid: string,
+	body: string,
+	replyTo?: { uri: ResourceUri; cid: string },
+): Promise<RecordCreationResult> => {
+	const rpc = createAuthRpc(agent);
+	const record = {
+		$type: 'sh.tangled.feed.comment',
+		subject: {
+			uri: stringUri,
+			cid: stringCid,
+		},
+		body: {
+			$type: 'sh.tangled.markup.markdown',
+			text: body.trim(),
+		},
+		createdAt: new Date().toISOString(),
+		...(replyTo ? {
+			replyTo: {
+				uri: replyTo.uri,
+				cid: replyTo.cid,
+			}
+		} : {}),
+	};
+
+	const result = await ok(
+		rpc.post('com.atproto.repo.createRecord', {
+			input: {
+				repo: agent.sub,
+				collection: FEED_COMMENT_COLLECTION,
+				record,
+			},
+		}),
+	);
+
+	return {
+		uri: result.uri,
+		rkey: parseAtUri(result.uri).rkey,
+	};
+};
+
+export const getStringStarSummary = async (
+	stringUri: ResourceUri,
+	viewerDid?: Did | null,
+): Promise<StringStarSummary> => {
+	const count = await getDistinctAppviewRecordCount('sh.tangled.feed.countStars', stringUri);
+	let currentUserStar: AppviewRecordView<ShTangledFeedStar.Main> | undefined;
+
+	if (viewerDid) {
+		const stars = await listAllAppviewRecords<ShTangledFeedStar.Main>('sh.tangled.feed.listStarsBy', viewerDid);
+		currentUserStar = stars.find((star) => {
+			const subject = star.value.subject as { uri?: unknown };
+			return subject?.uri === stringUri;
+		});
+	}
+
+	return {
+		count,
+		isStarred: !!currentUserStar,
+		currentUserStarRkey: currentUserStar ? parseAtUri(currentUserStar.uri).rkey : undefined,
+	};
+};
+
+export const createStringStar = async (
+	agent: OAuthUserAgent,
+	stringUri: ResourceUri,
+): Promise<RecordCreationResult> => {
+	const rpc = createAuthRpc(agent);
+	const record: ShTangledFeedStar.Main = {
+		$type: 'sh.tangled.feed.star',
+		subject: {
+			$type: 'sh.tangled.feed.star#string',
+			uri: stringUri,
+		},
+		createdAt: new Date().toISOString(),
+	};
+	const result = await ok(
+		rpc.post('com.atproto.repo.createRecord', {
+			input: {
+				repo: agent.sub,
+				collection: STAR_COLLECTION,
+				record,
+			},
+		}),
+	);
+
+	return {
+		uri: result.uri,
+		rkey: parseAtUri(result.uri).rkey,
+	};
+};
+
+export const deleteStringStar = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	await ok(
+		rpc.post('com.atproto.repo.deleteRecord', {
+			input: {
+				repo: agent.sub,
+				collection: STAR_COLLECTION,
+				rkey,
+			},
+		}),
+	);
+};
diff --git a/src/lib/settings.tsx b/src/lib/settings.tsx
index 9578ff2..8a5b7b3 100644
--- a/src/lib/settings.tsx
+++ b/src/lib/settings.tsx
@@ -2,6 +2,7 @@ import { createContext, createSignal, useContext, type Component, type JSX } fro
 
 const APPVIEW_URL_KEY = 'untangled.settings.appviewUrl';
 const ROUTE_KNOT_REQUESTS_THROUGH_APPVIEW_KEY = 'untangled.settings.routeKnotRequestsThroughAppview';
+const FORCE_PDS_KEY = 'untangled.settings.forcePds';
 
 export const DEFAULT_TANGLED_APPVIEW_SERVICE =
 	import.meta.env.VITE_TANGLED_APPVIEW_SERVICE || 'https://bobbin.klbr.net';
@@ -46,18 +47,30 @@ const readStoredRouteKnotRequestsThroughAppview = (): boolean => {
 	return localStorage.getItem(ROUTE_KNOT_REQUESTS_THROUGH_APPVIEW_KEY) === 'true';
 };
 
+const readStoredForcePds = (): boolean => {
+	if (typeof localStorage === 'undefined') {
+		return false;
+	}
+
+	return localStorage.getItem(FORCE_PDS_KEY) === 'true';
+};
+
 let currentAppviewUrl = readStoredAppviewUrl();
 let currentRouteKnotRequestsThroughAppview = readStoredRouteKnotRequestsThroughAppview();
+let currentForcePds = readStoredForcePds();
 
 export const getTangledAppviewService = (): string => currentAppviewUrl;
 export const getRouteKnotRequestsThroughAppview = (): boolean => currentRouteKnotRequestsThroughAppview;
+export const getForcePds = (): boolean => currentForcePds;
 
 interface AppSettingsContextValue {
 	appviewUrl: () => string;
 	routeKnotRequestsThroughAppview: () => boolean;
+	forcePds: () => boolean;
 	defaultAppviewUrl: string;
 	setAppviewUrl: (url: string) => void;
 	setRouteKnotRequestsThroughAppview: (enabled: boolean) => void;
+	setForcePds: (enabled: boolean) => void;
 	resetAppviewUrl: () => void;
 	resetAppviewSettings: () => void;
 }
@@ -69,6 +82,7 @@ export const AppSettingsProvider: Component<{ children: JSX.Element }> = (props)
 	const [routeKnotRequestsThroughAppview, setRouteKnotRequestsThroughAppviewSignal] = createSignal(
 		currentRouteKnotRequestsThroughAppview,
 	);
+	const [forcePds, setForcePdsSignal] = createSignal(currentForcePds);
 	const defaultAppviewUrl = normalizeAppviewUrl(DEFAULT_TANGLED_APPVIEW_SERVICE);
 
 	const setAppviewUrl = (url: string) => {
@@ -84,6 +98,12 @@ export const AppSettingsProvider: Component<{ children: JSX.Element }> = (props)
 		setRouteKnotRequestsThroughAppviewSignal(enabled);
 	};
 
+	const setForcePds = (enabled: boolean) => {
+		currentForcePds = enabled;
+		localStorage.setItem(FORCE_PDS_KEY, String(enabled));
+		setForcePdsSignal(enabled);
+	};
+
 	const resetAppviewUrl = () => {
 		currentAppviewUrl = defaultAppviewUrl;
 		localStorage.removeItem(APPVIEW_URL_KEY);
@@ -95,6 +115,9 @@ export const AppSettingsProvider: Component<{ children: JSX.Element }> = (props)
 		currentRouteKnotRequestsThroughAppview = false;
 		localStorage.removeItem(ROUTE_KNOT_REQUESTS_THROUGH_APPVIEW_KEY);
 		setRouteKnotRequestsThroughAppviewSignal(false);
+		currentForcePds = false;
+		localStorage.removeItem(FORCE_PDS_KEY);
+		setForcePdsSignal(false);
 	};
 
 	return (
@@ -102,9 +125,11 @@ export const AppSettingsProvider: Component<{ children: JSX.Element }> = (props)
 			value={{
 				appviewUrl,
 				routeKnotRequestsThroughAppview,
+				forcePds,
 				defaultAppviewUrl,
 				setAppviewUrl,
 				setRouteKnotRequestsThroughAppview,
+				setForcePds,
 				resetAppviewUrl,
 				resetAppviewSettings,
 			}}
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index d826346..8d4c359 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -17,6 +17,7 @@ import {
 	X,
 	Check,
 	Pencil,
+	LineSquiggle,
 } from 'lucide-solid';
 import { A, useParams, useSearchParams, useNavigate } from '@solidjs/router';
 import { createQuery, useQueryClient } from '@tanstack/solid-query';
@@ -39,6 +40,7 @@ import {
 } from '../lib/api/graph';
 import { resolveActor, getActorProfile, resolveAvatarUrl, putActorProfile } from '../lib/api/identity';
 import { listRepoRecords, getRepoByDid, type RepoContext } from '../lib/api/repos';
+import { listStringRecords } from '../lib/api/strings';
 import { useAuth } from '../lib/auth';
 import { listAllAppviewRecords } from '../lib/api/appview';
 import { formatRelativeTime, getErrorMessage } from '../lib/repo-utils';
@@ -48,13 +50,16 @@ const ProfileTabs: Component<{
 	activeTab: string;
 	reposCount: number;
 	starsCount: number;
+	stringsCount: number;
 	reposLoading?: boolean;
 	starsLoading?: boolean;
+	stringsLoading?: boolean;
 }> = (props) => {
 	const tabs = [
 		{ id: 'overview', label: 'overview', icon: () => <GalleryVertical class="w-4 h-4 mr-2" /> },
 		{ id: 'repos', label: 'repos', icon: () => <BookMarked class="w-4 h-4 mr-2" />, count: () => props.reposCount, loading: () => props.reposLoading },
 		{ id: 'starred', label: 'starred', icon: () => <Star class="w-4 h-4 mr-2" />, count: () => props.starsCount, loading: () => props.starsLoading },
+		{ id: 'strings', label: 'strings', icon: () => <LineSquiggle class="w-4 h-4 mr-2" />, count: () => props.stringsCount, loading: () => props.stringsLoading },
 	];
 
 	return (
@@ -1042,6 +1047,12 @@ export const ProfilePage: Component = () => {
 		queryFn: () => listRepoRecords(actorQuery.data!),
 	}));
 
+	const stringsQuery = createQuery(() => ({
+		queryKey: ['profile-strings', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: () => listStringRecords(actorQuery.data!),
+	}));
+
 	const starsQuery = createQuery(() => ({
 		queryKey: ['profile-stars', actorQuery.data?.did],
 		enabled: !!actorQuery.data,
@@ -1297,8 +1308,10 @@ export const ProfilePage: Component = () => {
 									activeTab={activeTab()}
 									reposCount={reposQuery.data?.length ?? 0}
 									starsCount={starsQuery.data?.length ?? 0}
+									stringsCount={stringsQuery.data?.length ?? 0}
 									reposLoading={reposQuery.isLoading}
 									starsLoading={starsQuery.isLoading}
+									stringsLoading={stringsQuery.isLoading}
 								/>
 
 								<section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white shadow-sm">
@@ -1508,6 +1521,59 @@ export const ProfilePage: Component = () => {
 												</div>
 											</Match>
 
+											{/* Strings Tab */}
+											<Match when={activeTab() === 'strings'}>
+												<div id="all-strings" class="md:col-span-8 order-2 md:order-2">
+													<Show
+														when={!stringsQuery.isLoading}
+														fallback={
+															<div id="strings" class="grid grid-cols-1 gap-4 mb-6">
+																<For each={Array.from({ length: 3 })}>
+																	{() => <RepoCardSkeleton />}
+																</For>
+															</div>
+														}
+													>
+														<div id="strings" class="grid grid-cols-1 gap-4 mb-6">
+															<For
+																each={stringsQuery.data ?? []}
+																fallback={
+																	<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																		<span>This user does not have any strings yet.</span>
+																	</div>
+																}
+															>
+																{(item) => {
+																	const lineCount = () => item.value.contents.split('\n').length;
+																	const timeAgo = () => formatRelativeTime(item.value.createdAt);
+																	return (
+																		<div class="border border-gray-200 dark:border-gray-700 rounded-sm">
+																			<div class="py-4 px-6 rounded bg-white dark:bg-gray-800">
+																				<div class="font-medium dark:text-white flex gap-2 items-center">
+																					<A href={`/strings/${resolvedActor().handle || resolvedActor().did}/${item.rkey}`} class="hover:underline">
+																						{item.value.filename}
+																					</A>
+																				</div>
+																				{item.value.description && (
+																					<div class="text-gray-600 dark:text-gray-300 text-sm">
+																						{item.value.description}
+																					</div>
+																				)}
+																				<div class="text-gray-400 pt-4 text-sm font-mono inline-flex gap-2 mt-auto">
+																					<span>{lineCount()} line{lineCount() !== 1 ? 's' : ''}</span>
+																					<span class="select-none [&:before]:content-['·']"></span>
+																					<span>{timeAgo()}</span>
+																				</div>
+																			</div>
+																		</div>
+																	);
+																}}
+															</For>
+														</div>
+													</Show>
+												</div>
+											</Match>
+
 											{/* Followers Tab */}
 											<Match when={activeTab() === 'followers'}>
 												<div id="all-followers" class="md:col-span-8 order-2 md:order-2">
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
index 69a77b4..315ff15 100644
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@@ -10,6 +10,7 @@ import {
 	Tag,
 	UserRound,
 	X,
+	LineSquiggle,
 } from 'lucide-solid';
 import { A, useNavigate, useSearchParams } from '@solidjs/router';
 import { createQuery } from '@tanstack/solid-query';
@@ -134,6 +135,9 @@ const SearchResultIcon: Component<{ hit: SearchHit }> = (props) => (
 		<Match when={props.hit.nsid === 'sh.tangled.actor.profile'}>
 			<UserRound class="w-4 h-4 mr-1.5 shrink-0" />
 		</Match>
+		<Match when={props.hit.nsid === 'sh.tangled.string'}>
+			<LineSquiggle class="w-4 h-4 mr-1.5 shrink-0" />
+		</Match>
 		<Match when={props.hit.nsid === 'sh.tangled.label.definition'}>
 			<Tag class="w-4 h-4 mr-1.5 shrink-0" />
 		</Match>
@@ -342,6 +346,11 @@ const ResultTitle: Component<{ hit: SearchHit }> = (props) => {
 							{props.hit.author.handle}
 						</A>
 					</Match>
+					<Match when={props.hit.nsid === 'sh.tangled.string'}>
+						<A href={`/strings/${props.hit.author.handle || props.hit.author.did}/${props.hit.rkey}`} class="truncate min-w-0">
+							{props.hit.author.handle || props.hit.author.did}/{title()}
+						</A>
+					</Match>
 				<Match when={props.hit.nsid === 'sh.tangled.repo.issue.comment' || props.hit.nsid === 'sh.tangled.repo.pull.comment' || props.hit.nsid === 'sh.tangled.feed.comment'}>
 					<CommentParentLink hit={props.hit} />
 				</Match>
diff --git a/src/pages/string.tsx b/src/pages/string.tsx
new file mode 100644
index 0000000..6488a2d
--- /dev/null
+++ b/src/pages/string.tsx
@@ -0,0 +1,639 @@
+import { A, useParams, useNavigate } from '@solidjs/router';
+import { createQuery, useQueryClient } from '@tanstack/solid-query';
+import { Show, Switch, Match, type Component, createSignal, createMemo, createEffect, onCleanup } from 'solid-js';
+import type { ResourceUri } from '@atcute/lexicons/syntax';
+import { Avatar, ErrorState, LoadingState, inputStyles, textareaStyles } from '../components/common';
+import { CodeView, CommentComposer, CommentThreadsSection } from '../components/repo';
+import {
+	getString,
+	deleteString,
+	updateString,
+	createString,
+	listStringComments,
+	createStringComment,
+	getStringStarSummary,
+	createStringStar,
+	deleteStringStar,
+	type StringComment,
+} from '../lib/api/strings';
+import { formatRelativeTime, getErrorMessage } from '../lib/repo-utils';
+import { useAuth } from '../lib/auth';
+import { Pencil, Trash2, Star, LoaderCircle, ArrowUp, X } from 'lucide-solid';
+import clsx from 'clsx';
+
+interface StringCommentThread {
+	item: StringComment;
+	replies: StringComment[];
+}
+
+const buildStringCommentThreads = (comments: StringComment[]): StringCommentThread[] => {
+	const byUri = new Map(comments.map((comment) => [comment.uri, comment]));
+	const topLevel: StringComment[] = [];
+	const repliesByRoot = new Map<string, StringComment[]>();
+
+	const findRoot = (comment: StringComment): StringComment | null => {
+		let current = comment;
+		const visited = new Set<string>([comment.uri]);
+		while (true) {
+			const replyToUri = typeof current.value.replyTo === 'string'
+				? current.value.replyTo
+				: (current.value.replyTo as { uri?: string } | undefined)?.uri;
+			if (!replyToUri) {
+				return current;
+			}
+			const parent = byUri.get(replyToUri as ResourceUri);
+			if (!parent) {
+				return current;
+			}
+			if (visited.has(parent.uri)) {
+				return current === comment ? null : current;
+			}
+			visited.add(parent.uri);
+			current = parent;
+		}
+	};
+
+	for (const comment of comments) {
+		const root = findRoot(comment);
+		if (!root || root.uri === comment.uri) {
+			topLevel.push(comment);
+		} else {
+			repliesByRoot.set(root.uri, [...(repliesByRoot.get(root.uri) ?? []), comment]);
+		}
+	}
+
+	return topLevel.map((item) => ({
+		item,
+		replies: repliesByRoot.get(item.uri) ?? [],
+	}));
+};
+
+export const StringPage: Component = () => {
+	const params = useParams<{ actor: string; rkey: string }>();
+	const auth = useAuth();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	// Deleting Signal
+	const [deleting, setDeleting] = createSignal(false);
+
+	// Star working Signal
+	const [starWorking, setStarWorking] = createSignal(false);
+
+	// Comment signals
+	const [commentBody, setCommentBody] = createSignal('');
+	const [commentWorking, setCommentWorking] = createSignal(false);
+	const [commentError, setCommentError] = createSignal<string | null>(null);
+
+	const stringQuery = createQuery(() => ({
+		queryKey: ['string-detail', params.actor, params.rkey],
+		queryFn: () => getString(params.actor, params.rkey),
+	}));
+
+	const starSummaryQuery = createQuery(() => ({
+		queryKey: ['string-star-summary', stringQuery.data?.record.uri],
+		enabled: !!stringQuery.data?.record.uri,
+		queryFn: () => getStringStarSummary(stringQuery.data!.record.uri, auth.currentDid()),
+	}));
+
+	const commentsQuery = createQuery(() => ({
+		queryKey: ['string-comments', stringQuery.data?.record.uri],
+		enabled: !!stringQuery.data?.record.uri,
+		queryFn: () => listStringComments(stringQuery.data!.record.uri),
+	}));
+
+	const commentThreads = createMemo(() => {
+		const comments = commentsQuery.data ?? [];
+		return buildStringCommentThreads(comments);
+	});
+
+	const handleDelete = async () => {
+		const agent = auth.agent();
+		const data = stringQuery.data;
+		if (!agent || !data) return;
+
+		if (!confirm(`are you sure you want to delete the string "${data.record.value.filename}"?`)) {
+			return;
+		}
+
+		setDeleting(true);
+		try {
+			await deleteString(agent, params.rkey);
+			const ownerId = data.owner.handle || data.owner.did;
+			navigate(`/${ownerId}?tab=strings`);
+		} catch (err) {
+			alert(getErrorMessage(err));
+		} finally {
+			setDeleting(false);
+		}
+	};
+
+	const handleStarToggle = async () => {
+		const agent = auth.agent();
+		const summary = starSummaryQuery.data;
+		const record = stringQuery.data?.record;
+		if (!agent || !summary || !record || starWorking()) return;
+
+		setStarWorking(true);
+		try {
+			if (summary.isStarred && summary.currentUserStarRkey) {
+				await deleteStringStar(agent, summary.currentUserStarRkey);
+			} else {
+				await createStringStar(agent, record.uri);
+			}
+			await queryClient.invalidateQueries({ queryKey: ['string-star-summary', record.uri] });
+		} catch (err) {
+			console.error('failed to toggle star', err);
+		} finally {
+			setStarWorking(false);
+		}
+	};
+
+	const handleCommentSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const agent = auth.agent();
+		const record = stringQuery.data?.record;
+		if (!agent || !record || !commentBody().trim() || commentWorking()) return;
+
+		setCommentWorking(true);
+		setCommentError(null);
+		try {
+			await createStringComment(agent, record.uri, record.cid, commentBody());
+			setCommentBody('');
+			await queryClient.invalidateQueries({ queryKey: ['string-comments', record.uri] });
+		} catch (err) {
+			setCommentError(getErrorMessage(err));
+		} finally {
+			setCommentWorking(false);
+		}
+	};
+
+	const starBusy = () => starWorking() || starSummaryQuery.isLoading;
+
+	return (
+		<Switch>
+			<Match when={stringQuery.isLoading}>
+				<LoadingState label="loading string..." />
+			</Match>
+			<Match when={stringQuery.error}>
+				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
+					<ErrorState message={getErrorMessage(stringQuery.error).toLowerCase()} />
+				</div>
+			</Match>
+			<Match when={stringQuery.data}>
+				{(data) => {
+					const { owner, record } = data();
+					const lineCount = () => record.value.contents.split('\n').length;
+					const byteCount = () => new TextEncoder().encode(record.value.contents).length;
+					const formattedSize = () => {
+						const bytes = byteCount();
+						if (bytes < 1024) return `${bytes} B`;
+						const kb = bytes / 1024;
+						if (kb < 1024) return `${kb.toFixed(1)} KB`;
+						return `${(kb / 1024).toFixed(1)} MB`;
+					};
+					const timeAgo = () => formatRelativeTime(record.value.createdAt);
+
+					const [rawUrl, setRawUrl] = createSignal<string>();
+					createEffect(() => {
+						const webBlob = new Blob([record.value.contents], { type: 'text/plain;charset=utf-8' });
+						const url = URL.createObjectURL(webBlob);
+						setRawUrl(url);
+						onCleanup(() => URL.revokeObjectURL(url));
+					});
+
+					return (
+						<div class="flex flex-col gap-4">
+							<section id="string-header" class="mb-2 py-2 px-4 dark:text-white">
+								<div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
+									<div class="flex flex-col gap-2">
+										<div class="flex items-center gap-2 flex-wrap">
+											<A href={`/${owner.handle || owner.did}`} class="flex items-center gap-1 hover:underline text-black dark:text-white font-medium">
+												<Avatar did={owner.did} size="size-6" />
+												<span>{owner.handle || owner.did}</span>
+											</A>
+											<span class="select-none text-gray-400">/</span>
+											<A href={`/strings/${owner.handle || owner.did}/${record.rkey}`} class="font-bold hover:underline text-black dark:text-white">
+												{record.value.filename}
+											</A>
+										</div>
+										<span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
+											<Show when={record.value.description} fallback={<span class="italic">this string has no description</span>}>
+												{record.value.description}
+											</Show>
+										</span>
+									</div>
+
+									<div class="w-full sm:w-fit flex items-center gap-2 z-auto">
+										<Show when={auth.currentDid() === owner.did}>
+											<A
+												class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group border border-gray-200 dark:border-gray-700 rounded-sm px-3 py-1.5 bg-white dark:bg-gray-800"
+												href={`/strings/${owner.handle || owner.did}/${record.rkey}/edit`}
+											>
+												<Pencil class="w-4 h-4" />
+												<span class="hidden md:inline">edit</span>
+											</A>
+											<button
+												class="btn text-sm text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex items-center gap-2 group border border-gray-200 dark:border-gray-700 rounded-sm px-3 py-1.5 bg-white dark:bg-gray-800"
+												onClick={handleDelete}
+												disabled={deleting()}
+											>
+												<Show when={deleting()} fallback={<Trash2 class="w-4 h-4" />}>
+													<LoaderCircle class="w-4 h-4 animate-spin" />
+												</Show>
+												<span class="hidden md:inline">delete</span>
+											</button>
+										</Show>
+										<Show when={starSummaryQuery.data}>
+											<div class="btn-group w-full sm:w-auto flex">
+												<button
+													class="btn-group-item active flex-1 gap-1 group flex items-center justify-center"
+													disabled={starBusy()}
+													onClick={handleStarToggle}
+												>
+													<Show when={starWorking()} fallback={
+														<Star class={clsx("w-4 h-4 shrink-0", starSummaryQuery.data?.isStarred ? "fill-current text-yellow-500" : "")} />
+													}>
+														<LoaderCircle class="w-4 h-4 shrink-0 animate-spin" />
+													</Show>
+													<span>{starSummaryQuery.data?.isStarred ? 'unstar' : 'star'}</span>
+												</button>
+												<span class="btn-group-item cursor-default flex items-center justify-center px-3">
+													{starSummaryQuery.data?.count ?? 0}
+												</span>
+											</div>
+										</Show>
+									</div>
+								</div>
+							</section>
+
+							<section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full dark:text-white shadow-sm">
+								<div class="flex flex-col md:flex-row md:justify-between md:items-center text-gray-500 dark:text-gray-400 text-sm md:text-base pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
+									<span>
+										{record.value.filename}
+										<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
+										<span>
+											{timeAgo()}
+										</span>
+									</span>
+									<div>
+										<span>{lineCount()} lines</span>
+										<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
+										<span>{formattedSize()}</span>
+										<Show when={rawUrl()}>
+											<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
+											<a href={rawUrl()!} target="_blank" rel="noreferrer" class="hover:underline">view raw</a>
+										</Show>
+									</div>
+								</div>
+								<div class="overflow-x-auto overflow-y-hidden relative">
+									<CodeView id="blob-contents" text={record.value.contents} wrap={false} path={record.value.filename} />
+								</div>
+							</section>
+
+							{/* Comments section */}
+							<div class="flex flex-col gap-4 mt-4">
+								<Show when={commentsQuery.data}>
+									<CommentThreadsSection
+										threads={commentThreads()}
+										authorDid={owner.did}
+									/>
+								</Show>
+
+								<Show when={auth.agent()}>
+									<CommentComposer
+										value={commentBody()}
+										onValueChange={setCommentBody}
+										onSubmit={handleCommentSubmit}
+										working={commentWorking()}
+										error={commentError()}
+										placeholder="add to the discussion. markdown is supported."
+										submitLabel="comment"
+									/>
+								</Show>
+							</div>
+						</div>
+					);
+				}}
+			</Match>
+		</Switch>
+	);
+};
+
+export const NewStringPage: Component = () => {
+	const auth = useAuth();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	const [filename, setFilename] = createSignal('');
+	const [description, setDescription] = createSignal('');
+	const [contents, setContents] = createSignal('');
+	const [saving, setSaving] = createSignal(false);
+	const [saveError, setSaveError] = createSignal<string | null>(null);
+
+	const lines = () => {
+		const val = contents();
+		return val === '' ? 0 : val.split('\n').length;
+	};
+	const bytes = () => {
+		return new TextEncoder().encode(contents()).length;
+	};
+
+	const handlePublish = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const agent = auth.agent();
+		if (!agent) return;
+
+		setSaving(true);
+		setSaveError(null);
+		try {
+			const result = await createString(agent, {
+				filename: filename(),
+				description: description(),
+				contents: contents(),
+			});
+			await queryClient.invalidateQueries({ queryKey: ['profile-strings', auth.currentDid()] });
+			const ownerId = auth.currentDid();
+			navigate(`/strings/${ownerId}/${result.rkey}`);
+		} catch (err) {
+			setSaveError(getErrorMessage(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	return (
+		<Show
+			when={auth.currentDid()}
+			fallback={
+				<div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded p-6 relative flex gap-2 items-center dark:text-white">
+					please log in to create a new string.
+				</div>
+			}
+		>
+			<div class="px-6 py-2 mb-4">
+				<p class="text-xl font-bold dark:text-white mb-1">create a new string</p>
+				<p class="text-gray-600 dark:text-gray-400 mb-1">store and share code snippets with ease.</p>
+			</div>
+
+			<form
+				onSubmit={handlePublish}
+				class="p-6 pb-4 dark:text-white flex flex-col gap-2 bg-white dark:bg-gray-800 drop-shadow-sm rounded border border-gray-200 dark:border-gray-700"
+			>
+				{saveError() && <p class="text-red-500 dark:text-red-400 text-sm mb-2">{saveError()}</p>}
+				<div class="flex flex-col md:flex-row md:items-center gap-2">
+					<input
+						type="text"
+						id="filename"
+						name="filename"
+						placeholder="filename"
+						required
+						value={filename()}
+						onInput={(e) => setFilename(e.currentTarget.value)}
+						class={clsx(inputStyles(), 'md:max-w-64')}
+					/>
+					<input
+						type="text"
+						id="description"
+						name="description"
+						value={description()}
+						onInput={(e) => setDescription(e.currentTarget.value)}
+						placeholder="description ..."
+						class={clsx(inputStyles(), 'flex-1')}
+					/>
+				</div>
+				<textarea
+					name="content"
+					id="content-textarea"
+					wrap="off"
+					class={clsx(textareaStyles(), 'font-mono text-sm')}
+					rows={20}
+					spellcheck={false}
+					placeholder="paste your string here!"
+					value={contents()}
+					onInput={(e) => setContents(e.currentTarget.value)}
+					required
+				/>
+				<div class="flex justify-between items-center">
+					<div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
+						<span id="line-count">{lines()} line{lines() !== 1 ? 's' : ''}</span>
+						<span class="select-none px-1 [&:before]:content-['·']"></span>
+						<span id="byte-count">{bytes()} byte{bytes() !== 1 ? 's' : ''}</span>
+					</div>
+					<div id="actions" class="flex gap-2 items-center">
+						<button
+							type="submit"
+							id="new-button"
+							class="w-fit btn-create group inline-flex items-center gap-2 text-white"
+							disabled={saving()}
+						>
+							<span class="inline-flex items-center gap-2">
+								<ArrowUp class="w-4 h-4" />
+								publish
+							</span>
+							<Show when={saving()}>
+								<span class="pl-2 inline-block">
+									<LoaderCircle class="w-4 h-4 animate-spin" />
+								</span>
+							</Show>
+						</button>
+					</div>
+				</div>
+			</form>
+		</Show>
+	);
+};
+
+export const EditStringPage: Component = () => {
+	const params = useParams<{ actor: string; rkey: string }>();
+	const auth = useAuth();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	const [filename, setFilename] = createSignal('');
+	const [description, setDescription] = createSignal('');
+	const [contents, setContents] = createSignal('');
+	const [saving, setSaving] = createSignal(false);
+	const [saveError, setSaveError] = createSignal<string | null>(null);
+
+	const stringQuery = createQuery(() => ({
+		queryKey: ['string-detail', params.actor, params.rkey],
+		queryFn: () => getString(params.actor, params.rkey),
+	}));
+
+	createEffect(() => {
+		const data = stringQuery.data;
+		if (data) {
+			setFilename(data.record.value.filename);
+			setDescription(data.record.value.description ?? '');
+			setContents(data.record.value.contents);
+		}
+	});
+
+	const isOwner = () => {
+		const data = stringQuery.data;
+		return data && auth.currentDid() === data.owner.did;
+	};
+
+	const lines = () => {
+		const val = contents();
+		return val === '' ? 0 : val.split('\n').length;
+	};
+	const bytes = () => {
+		return new TextEncoder().encode(contents()).length;
+	};
+
+	const handleSave = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const agent = auth.agent();
+		const data = stringQuery.data;
+		if (!agent || !data) return;
+
+		setSaving(true);
+		setSaveError(null);
+		try {
+			await updateString(
+				agent,
+				params.rkey,
+				{
+					filename: filename(),
+					description: description(),
+					contents: contents(),
+				},
+				data.record.cid,
+			);
+			await queryClient.invalidateQueries({ queryKey: ['string-detail', params.actor, params.rkey] });
+			navigate(`/strings/${params.actor}/${params.rkey}`);
+		} catch (err) {
+			setSaveError(getErrorMessage(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	return (
+		<Switch>
+			<Match when={stringQuery.isLoading}>
+				<LoadingState label="loading string..." />
+			</Match>
+			<Match when={stringQuery.error}>
+				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
+					<ErrorState message={getErrorMessage(stringQuery.error).toLowerCase()} />
+				</div>
+			</Match>
+			<Match when={stringQuery.data && !isOwner()}>
+				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
+					<ErrorState message="you are not authorized to edit this string." />
+				</div>
+			</Match>
+			<Match when={stringQuery.data && isOwner()}>
+				<div>
+					<div class="px-6 py-2 mb-4">
+						<p class="text-xl font-bold dark:text-white">edit string</p>
+					</div>
+
+					<form
+						onSubmit={handleSave}
+						class="p-6 pb-4 dark:text-white flex flex-col gap-2 bg-white dark:bg-gray-800 drop-shadow-sm rounded border border-gray-200 dark:border-gray-700"
+					>
+						{saveError() && <p class="text-red-500 dark:text-red-400 text-sm mb-2">{saveError()}</p>}
+						<div class="flex flex-col md:flex-row md:items-center gap-2">
+							<input
+								type="text"
+								id="filename"
+								name="filename"
+								placeholder="filename"
+								required
+								value={filename()}
+								onInput={(e) => setFilename(e.currentTarget.value)}
+								class={clsx(inputStyles(), 'md:max-w-64')}
+							/>
+							<input
+								type="text"
+								id="description"
+								name="description"
+								value={description()}
+								onInput={(e) => setDescription(e.currentTarget.value)}
+								placeholder="description ..."
+								class={clsx(inputStyles(), 'flex-1')}
+							/>
+						</div>
+						<textarea
+							name="content"
+							id="content-textarea"
+							wrap="off"
+							class={clsx(textareaStyles(), 'font-mono text-sm')}
+							rows={20}
+							spellcheck={false}
+							placeholder="paste your string here!"
+							value={contents()}
+							onInput={(e) => setContents(e.currentTarget.value)}
+							required
+						/>
+						<div class="flex justify-between items-center">
+							<div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
+								<span id="line-count">{lines()} line{lines() !== 1 ? 's' : ''}</span>
+								<span class="select-none px-1 [&:before]:content-['·']"></span>
+								<span id="byte-count">{bytes()} byte{bytes() !== 1 ? 's' : ''}</span>
+							</div>
+							<div id="actions" class="flex gap-2 items-center">
+								<A
+									class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+									href={`/strings/${params.actor}/${params.rkey}`}
+								>
+									<X class="size-4" />
+									<span class="hidden md:inline">cancel</span>
+								</A>
+								<button
+									type="submit"
+									id="new-button"
+									class="w-fit btn-create group inline-flex items-center gap-2 text-white"
+									disabled={saving()}
+								>
+									<span class="inline-flex items-center gap-2">
+										<ArrowUp class="w-4 h-4" />
+										publish
+									</span>
+									<Show when={saving()}>
+										<span class="pl-2 inline-block">
+											<LoaderCircle class="w-4 h-4 animate-spin" />
+										</span>
+									</Show>
+								</button>
+							</div>
+						</div>
+					</form>
+				</div>
+			</Match>
+		</Switch>
+	);
+};
+
+export const RawStringPage: Component = () => {
+	const params = useParams<{ actor: string; rkey: string }>();
+
+	const stringQuery = createQuery(() => ({
+		queryKey: ['string-detail', params.actor, params.rkey],
+		queryFn: () => getString(params.actor, params.rkey),
+	}));
+
+	return (
+		<Switch>
+			<Match when={stringQuery.isLoading}>
+				<div class="p-4 font-mono text-sm">loading raw content...</div>
+			</Match>
+			<Match when={stringQuery.error}>
+				<div class="p-4 font-mono text-sm text-red-500">
+					failed to load: {getErrorMessage(stringQuery.error).toLowerCase()}
+				</div>
+			</Match>
+			<Match when={stringQuery.data}>
+				{(data) => (
+					<pre style="white-space: pre-wrap; word-wrap: break-word; font-family: monospace;" class="p-4 bg-white dark:bg-gray-950 dark:text-white">
+						{data().record.value.contents}
+					</pre>
+				)}
+			</Match>
+		</Switch>
+	);
+};
diff --git a/src/routes.tsx b/src/routes.tsx
index b85edcc..6421e88 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -20,12 +20,17 @@ import { NotFoundPage } from './pages/not-found';
 import { OAuthCallbackPage } from './pages/oauth-callback';
 import { SearchPage } from './pages/search';
 import { ProfilePage } from './pages/profile';
+import { StringPage, RawStringPage, NewStringPage, EditStringPage } from './pages/string';
 
 export const AppRoutes: Component = () => (
 	<Router root={RootShell}>
 		<Route path="/" component={HomePage} />
 		<Route path="/search" component={SearchPage} />
 		<Route path="/oauth/callback" component={OAuthCallbackPage} />
+		<Route path="/strings/new" component={NewStringPage} />
+		<Route path="/strings/:actor/:rkey" component={StringPage} />
+		<Route path="/strings/:actor/:rkey/edit" component={EditStringPage} />
+		<Route path="/strings/:actor/:rkey/raw" component={RawStringPage} />
 		<Route path="/:owner/:repo" component={RepoLayout}>
 			<Route path="/" component={RepoCodePage} />
 			<Route path="/issues/new" component={NewIssuePage} />