diff --git a/package.json b/package.json
index 8ce5473..30bc9c2 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		"@sveltejs/adapter-cloudflare": "^7.2.6",
 		"@types/dompurify": "^3.2.0",
 		"dompurify": "^3.3.1",
+		"highlight.js": "^11.11.1",
 		"marked": "^17.0.1",
 		"wrangler": "^4.61.1"
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 19c7684..747ba0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       dompurify:
         specifier: ^3.3.1
         version: 3.3.1
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       marked:
         specifier: ^17.0.1
         version: 17.0.1
@@ -1534,6 +1537,10 @@ packages:
     resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==, tarball: https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz}
     engines: {node: '>=6'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==, tarball: https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz}
+    engines: {node: '>=12.0.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==, tarball: https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz}
     engines: {node: '>= 4'}
@@ -3423,6 +3430,8 @@ snapshots:
 
   hex-rgb@4.3.0: {}
 
+  highlight.js@11.11.1: {}
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
diff --git a/src/lib/atproto/settings.ts b/src/lib/atproto/settings.ts
index 034fb34..bcf2220 100644
--- a/src/lib/atproto/settings.ts
+++ b/src/lib/atproto/settings.ts
@@ -13,7 +13,7 @@ export const permissions = {
 
 	// example: only allow create and delete
 	// collections: ['xyz.statusphere.status?action=create&action=update'],
-	collections: ['pics.atmo.image', 'pics.atmo.video', 'pics.atmo.markdown'],
+	collections: ['pics.atmo.image', 'pics.atmo.video', 'pics.atmo.markdown', 'pics.atmo.code'],
 
 	// what types of authenticated proxied requests you can make to services
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 9781983..6ca7373 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -17,6 +17,10 @@ export function getShareLinkFromUri(uri: string, handle?: string): string {
 		return getMarkdownShareLink(repo, parts.rkey);
 	}
 
+	if (parts.collection === 'pics.atmo.code') {
+		return getCodeShareLink(repo, parts.rkey);
+	}
+
 	return getShareLink(repo, parts.rkey);
 }
 
@@ -40,3 +44,10 @@ export function getMarkdownShareLink(repo: string, rkey: string): string {
 		rkey: rkey
 	})}`;
 }
+
+export function getCodeShareLink(repo: string, rkey: string): string {
+	return `${window.location.origin}${resolve('/c/[repo]/[rkey]', {
+		repo: repo,
+		rkey: rkey
+	})}`;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f71af9f..509ff5d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,12 +16,13 @@
 	import Button from '$lib/atproto/UI/Button.svelte';
 	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
 	import { resolve } from '$app/paths';
+	import { tick } from 'svelte';
 	import { getShareLinkFromUri } from '$lib';
 
 	type MediaRecord = {
 		uri: string;
 		value: Record<string, unknown>;
-		type: 'image' | 'video' | 'markdown';
+		type: 'image' | 'video' | 'markdown' | 'code';
 	};
 
 	let fileInput: HTMLInputElement | undefined = $state();
@@ -32,19 +33,140 @@
 	let loadingImages = $state(false);
 	let isDragging = $state(false);
 	let dragCounter = 0;
-	let showMarkdownEditor = $state(false);
+	let showCreateModal = $state(false);
+	let createMode = $state<'pick' | 'pick-text' | 'markdown' | 'code'>('pick');
 	let markdownTitle = $state('');
 	let markdownContent = $state('');
 	let isPublishingMarkdown = $state(false);
+	let codeTitle = $state('');
+	let codeContent = $state('');
+	let isPublishingCode = $state(false);
+
+	let pastedText = $state('');
+	let modalEl = $state<HTMLDivElement | undefined>();
+
+	$effect(() => {
+		if ((createMode === 'markdown' || createMode === 'code') && modalEl) {
+			tick().then(() => {
+				const input = modalEl?.querySelector<HTMLElement>('input, textarea');
+				input?.focus();
+			});
+		}
+	});
+
+	function detectTextType(text: string): 'code' | 'markdown' | null {
+		const lines = text.split('\n');
+		let codeScore = 0;
+		let markdownScore = 0;
+
+		for (const line of lines) {
+			const trimmed = line.trimEnd();
+			// Code signals
+			if (/[;{}]\s*$/.test(trimmed)) codeScore += 2;
+			if (/^\s*(import|export|const|let|var|function|class|def|return|if|for|while|switch|try|catch)\b/.test(trimmed)) codeScore += 2;
+			if (/[=!<>]=|=>|->|\|\||&&/.test(trimmed)) codeScore++;
+			if (/^\s{2,}\S/.test(line) || /^\t+\S/.test(line)) codeScore++;
+
+			// Markdown signals
+			if (/^#{1,6}\s/.test(trimmed)) markdownScore += 3;
+			if (/\[.+\]\(.+\)/.test(trimmed)) markdownScore += 2;
+			if (/^(\*\*|__).+(\*\*|__)/.test(trimmed) || /(\*|_)\S.*\1/.test(trimmed)) markdownScore++;
+			if (/^[-*+]\s/.test(trimmed) || /^\d+\.\s/.test(trimmed)) markdownScore += 2;
+			if (/^>\s/.test(trimmed)) markdownScore += 2;
+		}
+
+		// Code fences count as markdown (it's markdown containing code)
+		if (/^```/m.test(text)) markdownScore += 5;
+
+		const threshold = 3;
+		if (codeScore >= threshold && codeScore > markdownScore * 1.5) return 'code';
+		if (markdownScore >= threshold && markdownScore > codeScore * 1.5) return 'markdown';
+		return null;
+	}
+
+	function handleTextPaste(text: string) {
+		const detected = detectTextType(text);
+		if (detected === 'code') {
+			publishCodeDirect(text);
+		} else if (detected === 'markdown') {
+			publishMarkdownDirect(text);
+		} else {
+			pastedText = text;
+			createMode = 'pick-text';
+			showCreateModal = true;
+		}
+	}
+
+	function openCreateModal() {
+		createMode = 'pick';
+		showCreateModal = true;
+	}
+
+	function closeCreateModal() {
+		showCreateModal = false;
+	}
+
+	function isInputFocused(): boolean {
+		const el = document.activeElement;
+		return !!el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!user.isLoggedIn) return;
+
+		// When modal is open in pick mode, handle type shortcuts
+		if (showCreateModal && (createMode === 'pick' || createMode === 'pick-text')) {
+			switch (event.key.toLowerCase()) {
+				case 'i':
+					event.preventDefault();
+					closeCreateModal();
+					fileInput?.click();
+					return;
+				case 'v':
+					event.preventDefault();
+					closeCreateModal();
+					fileInput?.click();
+					return;
+				case 'm':
+					event.preventDefault();
+					if (createMode === 'pick-text') {
+						markdownContent = pastedText;
+						pastedText = '';
+					}
+					createMode = 'markdown';
+					return;
+				case 'c':
+					event.preventDefault();
+					if (createMode === 'pick-text') {
+						codeContent = pastedText;
+						pastedText = '';
+					}
+					createMode = 'code';
+					return;
+				case 'escape':
+					closeCreateModal();
+					return;
+			}
+			return;
+		}
+
+		if (isInputFocused()) return;
+		if (showCreateModal) return;
+
+		if (event.key === '+' || event.key === '=') {
+			openCreateModal();
+		}
+	}
 
 	async function loadItems() {
 		if (!user.did) return;
 		loadingImages = true;
 		try {
-			const [imageRecords, videoRecords, markdownRecords] = await Promise.all([
+			const [imageRecords, videoRecords, markdownRecords, codeRecords] = await Promise.all([
 				listRecords({ collection: 'pics.atmo.image', limit: 0 }),
 				listRecords({ collection: 'pics.atmo.video', limit: 0 }),
-				listRecords({ collection: 'pics.atmo.markdown', limit: 0 })
+				listRecords({ collection: 'pics.atmo.markdown', limit: 0 }),
+				listRecords({ collection: 'pics.atmo.code', limit: 0 })
 			]);
 			const imageItems: MediaRecord[] = (imageRecords as any[]).map((r) => ({
 				...r,
@@ -58,7 +180,11 @@
 				...r,
 				type: 'markdown' as const
 			}));
-			const all = [...imageItems, ...videoItems, ...markdownItems];
+			const codeItems: MediaRecord[] = (codeRecords as any[]).map((r) => ({
+				...r,
+				type: 'code' as const
+			}));
+			const all = [...imageItems, ...videoItems, ...markdownItems, ...codeItems];
 			all.sort((a, b) => {
 				const dateA = (a.value as any).createdAt || '';
 				const dateB = (b.value as any).createdAt || '';
@@ -142,7 +268,8 @@
 			return uploadVideo(file);
 		}
 		if (!file.type.startsWith('image/')) {
-			feedbackMessage = 'Please drop an image or video file';
+			const handled = await uploadFile(file);
+			if (!handled) feedbackMessage = 'Unsupported file type';
 			return;
 		}
 
@@ -235,23 +362,28 @@
 	}
 
 	function handlePaste(event: ClipboardEvent) {
+		if (!user.isLoggedIn) return;
 		const pasteItems = event.clipboardData?.items;
 		if (!pasteItems) return;
 
+		// Check for files first (images/videos)
 		for (const item of pasteItems) {
 			if (item.type.startsWith('image/') || item.type.startsWith('video/')) {
 				const file = item.getAsFile();
 				if (!file) return;
-
-				if (!user.isLoggedIn) {
-					feedbackMessage = 'Please log in to upload';
-					return;
-				}
-
 				uploadImage(file);
 				return;
 			}
 		}
+
+		// Check for text — only if no input/textarea is focused
+		const active = document.activeElement;
+		if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return;
+
+		const text = event.clipboardData?.getData('text/plain');
+		if (text && text.trim().length > 0) {
+			handleTextPaste(text);
+		}
 	}
 
 	async function publishMarkdown() {
@@ -289,7 +421,7 @@
 			}
 			markdownTitle = '';
 			markdownContent = '';
-			showMarkdownEditor = false;
+			showCreateModal = false;
 		} catch (error) {
 			console.error('Publish failed:', error);
 			feedbackMessage = 'Publish failed. Please try again.';
@@ -298,6 +430,165 @@
 		}
 	}
 
+	async function publishCode() {
+		if (!codeContent.trim()) {
+			feedbackMessage = 'Please write some code';
+			return;
+		}
+		isPublishingCode = true;
+		feedbackMessage = '';
+		try {
+			const rkey = createTID();
+			const record = {
+				$type: 'pics.atmo.code',
+				title: codeTitle.trim() || undefined,
+				content: codeContent,
+				createdAt: new Date().toISOString()
+			};
+			await putRecord({
+				collection: 'pics.atmo.code',
+				rkey,
+				record
+			});
+			const newItem: MediaRecord = {
+				uri: `at://${user.did}/pics.atmo.code/${rkey}`,
+				value: record,
+				type: 'code'
+			};
+			items = [newItem, ...items];
+			const shareLink = getShareLinkFromUri(newItem.uri, user.profile?.handle);
+			try {
+				await navigator.clipboard.writeText(shareLink);
+				feedbackMessage = 'Link copied to clipboard!';
+			} catch {
+				feedbackMessage = 'Code published!';
+			}
+			codeTitle = '';
+			codeContent = '';
+			showCreateModal = false;
+		} catch (error) {
+			console.error('Publish failed:', error);
+			feedbackMessage = 'Publish failed. Please try again.';
+		} finally {
+			isPublishingCode = false;
+		}
+	}
+
+	async function publishMarkdownDirect(content: string, title?: string) {
+		feedbackMessage = '';
+		try {
+			const rkey = createTID();
+			const record = {
+				$type: 'pics.atmo.markdown',
+				title: title || undefined,
+				content,
+				createdAt: new Date().toISOString()
+			};
+			await putRecord({ collection: 'pics.atmo.markdown', rkey, record });
+			const newItem: MediaRecord = {
+				uri: `at://${user.did}/pics.atmo.markdown/${rkey}`,
+				value: record,
+				type: 'markdown'
+			};
+			items = [newItem, ...items];
+			const shareLink = getShareLinkFromUri(newItem.uri, user.profile?.handle);
+			try {
+				await navigator.clipboard.writeText(shareLink);
+				feedbackMessage = 'Link copied to clipboard!';
+			} catch {
+				feedbackMessage = 'Markdown published!';
+			}
+		} catch (error) {
+			console.error('Publish failed:', error);
+			feedbackMessage = 'Publish failed. Please try again.';
+		}
+	}
+
+	async function publishCodeDirect(content: string, title?: string) {
+		feedbackMessage = '';
+		try {
+			const rkey = createTID();
+			const record = {
+				$type: 'pics.atmo.code',
+				title: title || undefined,
+				content,
+				createdAt: new Date().toISOString()
+			};
+			await putRecord({ collection: 'pics.atmo.code', rkey, record });
+			const newItem: MediaRecord = {
+				uri: `at://${user.did}/pics.atmo.code/${rkey}`,
+				value: record,
+				type: 'code'
+			};
+			items = [newItem, ...items];
+			const shareLink = getShareLinkFromUri(newItem.uri, user.profile?.handle);
+			try {
+				await navigator.clipboard.writeText(shareLink);
+				feedbackMessage = 'Link copied to clipboard!';
+			} catch {
+				feedbackMessage = 'Code published!';
+			}
+		} catch (error) {
+			console.error('Publish failed:', error);
+			feedbackMessage = 'Publish failed. Please try again.';
+		}
+	}
+
+	const CODE_EXTENSIONS = new Set([
+		'js', 'ts', 'jsx', 'tsx', 'mjs', 'mts', 'cjs', 'cts',
+		'py', 'rb', 'go', 'rs', 'c', 'cpp', 'h', 'hpp', 'cc',
+		'java', 'kt', 'kts', 'swift', 'cs', 'fs',
+		'sh', 'bash', 'zsh', 'fish',
+		'css', 'scss', 'sass', 'less',
+		'html', 'xml', 'svg',
+		'json', 'yaml', 'yml', 'toml', 'ini', 'cfg',
+		'sql', 'lua', 'php', 'pl', 'r', 'scala',
+		'zig', 'hs', 'elm', 'ex', 'exs', 'clj', 'cljs',
+		'dart', 'vue', 'svelte', 'astro',
+		'dockerfile', 'makefile', 'cmake',
+		'tf', 'hcl', 'nix', 'dhall',
+		'graphql', 'gql', 'proto', 'wasm', 'wat'
+	]);
+
+	const MARKDOWN_EXTENSIONS = new Set(['md', 'mdx', 'markdown', 'mdown', 'mkd']);
+
+	function getFileExtension(name: string): string {
+		const lower = name.toLowerCase();
+		// Handle extensionless known filenames
+		if (['dockerfile', 'makefile', 'rakefile', 'gemfile', 'cmakelists.txt'].includes(lower)) {
+			return 'dockerfile';
+		}
+		const dot = lower.lastIndexOf('.');
+		return dot >= 0 ? lower.slice(dot + 1) : '';
+	}
+
+	async function uploadFile(file: File) {
+		const ext = getFileExtension(file.name);
+
+		if (MARKDOWN_EXTENSIONS.has(ext)) {
+			const text = await file.text();
+			await publishMarkdownDirect(text, file.name);
+			return true;
+		}
+
+		if (CODE_EXTENSIONS.has(ext)) {
+			const text = await file.text();
+			await publishCodeDirect(text, file.name);
+			return true;
+		}
+
+		return false;
+	}
+
+	function getBadgeColor(type: MediaRecord['type']): string {
+		switch (type) {
+			case 'image': return 'bg-cyan-600';
+			case 'video': return 'bg-rose-600';
+			case 'markdown': return 'bg-amber-600';
+			case 'code': return 'bg-purple-600';
+		}
+	}
+
 	function getThumbnailUrl(record: MediaRecord): string | undefined {
 		if (!user.did) return;
 		if (record.type === 'video') {
@@ -315,6 +606,9 @@
 		if (item.type === 'markdown') {
 			return resolve('/m/[repo]/[rkey]', { repo: handle, rkey });
 		}
+		if (item.type === 'code') {
+			return resolve('/c/[repo]/[rkey]', { repo: handle, rkey });
+		}
 		return resolve('/i/[repo]/[rkey]', { repo: handle, rkey });
 	}
 
@@ -335,12 +629,14 @@
 	function getItemLabel(item: MediaRecord): string {
 		if (item.type === 'video') return 'video';
 		if (item.type === 'markdown') return 'post';
+		if (item.type === 'code') return 'snippet';
 		return 'image';
 	}
 
 	function getItemCollection(item: MediaRecord): AllowedCollection {
 		if (item.type === 'video') return 'pics.atmo.video';
 		if (item.type === 'markdown') return 'pics.atmo.markdown';
+		if (item.type === 'code') return 'pics.atmo.code';
 		return 'pics.atmo.image';
 	}
 
@@ -374,7 +670,7 @@
 	}
 </script>
 
-<svelte:window onpaste={handlePaste} />
+<svelte:window onpaste={handlePaste} onkeydown={handleKeydown} />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
@@ -430,6 +726,148 @@
 		</div>
 	{/if}
 
+	<!-- Create modal -->
+	{#if showCreateModal}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+			onclick={(e) => { if (e.target === e.currentTarget) closeCreateModal(); }}
+			onkeydown={(e) => { if (e.key === 'Escape') closeCreateModal(); }}
+		>
+			<div bind:this={modalEl} class="bg-base-50 dark:bg-base-900 border-base-200 dark:border-base-800 mx-4 w-full max-w-lg rounded-2xl border p-6 shadow-xl">
+				{#if createMode === 'pick'}
+					<h2 class="mb-4 text-lg font-semibold">What do you want to share?</h2>
+					<div class="grid grid-cols-2 gap-3">
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => { closeCreateModal(); fileInput?.click(); }}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.41a2.25 2.25 0 013.182 0l2.909 2.91m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+							</svg>
+							<span class="text-sm font-medium">Image</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">I</kbd>
+						</button>
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => { closeCreateModal(); fileInput?.click(); }}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
+							</svg>
+							<span class="text-sm font-medium">Video</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">V</kbd>
+						</button>
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => (createMode = 'markdown')}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+							</svg>
+							<span class="text-sm font-medium">Markdown</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">M</kbd>
+						</button>
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => (createMode = 'code')}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+							</svg>
+							<span class="text-sm font-medium">Code</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">C</kbd>
+						</button>
+					</div>
+				{:else if createMode === 'pick-text'}
+					<h2 class="mb-2 text-lg font-semibold">What type of text is this?</h2>
+					<p class="text-base-500 mb-4 text-sm">We couldn't auto-detect the format. Please choose:</p>
+					<pre class="bg-base-100 dark:bg-base-800 text-base-500 mb-4 max-h-32 overflow-hidden rounded-lg p-3 text-xs font-mono">{pastedText.slice(0, 300)}{pastedText.length > 300 ? '...' : ''}</pre>
+					<div class="grid grid-cols-2 gap-3">
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => { markdownContent = pastedText; pastedText = ''; createMode = 'markdown'; }}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+							</svg>
+							<span class="text-sm font-medium">Markdown</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">M</kbd>
+						</button>
+						<button
+							type="button"
+							class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 relative flex flex-col items-center gap-2 rounded-xl p-4 transition-colors"
+							onclick={() => { codeContent = pastedText; pastedText = ''; createMode = 'code'; }}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+							</svg>
+							<span class="text-sm font-medium">Code</span>
+							<kbd class="text-base-400 absolute top-2 right-2 text-[10px] font-mono">C</kbd>
+						</button>
+					</div>
+				{:else if createMode === 'markdown'}
+					<div class="mb-4 flex items-center gap-2">
+						<button type="button" aria-label="Back" class="text-base-500 hover:text-base-700 dark:hover:text-base-300" onclick={() => (createMode = 'pick')}>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+							</svg>
+						</button>
+						<h2 class="text-lg font-semibold">Write markdown</h2>
+					</div>
+					<div class="flex flex-col gap-3">
+						<input
+							type="text"
+							placeholder="Title (optional)"
+							bind:value={markdownTitle}
+							class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm"
+						/>
+						<textarea
+							placeholder="Write your markdown here..."
+							bind:value={markdownContent}
+							rows="8"
+							class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm font-mono"
+						></textarea>
+						<Button disabled={isPublishingMarkdown} onclick={publishMarkdown}>
+							{isPublishingMarkdown ? 'Publishing...' : 'Publish'}
+						</Button>
+					</div>
+				{:else if createMode === 'code'}
+					<div class="mb-4 flex items-center gap-2">
+						<button type="button" aria-label="Back" class="text-base-500 hover:text-base-700 dark:hover:text-base-300" onclick={() => (createMode = 'pick')}>
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+							</svg>
+						</button>
+						<h2 class="text-lg font-semibold">Share code</h2>
+					</div>
+					<div class="flex flex-col gap-3">
+						<input
+							type="text"
+							placeholder="Title / filename (optional)"
+							bind:value={codeTitle}
+							class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm font-mono"
+						/>
+						<textarea
+							placeholder="Paste your code here..."
+							bind:value={codeContent}
+							rows="10"
+							class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm font-mono"
+						></textarea>
+						<Button disabled={isPublishingCode} onclick={publishCode}>
+							{isPublishingCode ? 'Publishing...' : 'Publish'}
+						</Button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	<div class="mx-auto my-4 max-w-3xl px-4 md:my-32">
 		<h1 class="text-3xl font-bold">atmo.pics</h1>
 		<h1 class="my-2">quick atproto image, video and markdown sharing</h1>
@@ -467,33 +905,7 @@
 				onchange={handleFileInput}
 			/>
 
-			<Button class="mt-8" disabled={isUploading} onclick={() => fileInput?.click()}>
-				{isUploading ? 'Uploading...' : 'Upload image or video'}
-			</Button>
-
-			<Button class="mt-2" onclick={() => (showMarkdownEditor = !showMarkdownEditor)}>
-				{showMarkdownEditor ? 'Cancel writing' : 'Write markdown'}
-			</Button>
-
-			{#if showMarkdownEditor}
-				<div class="mt-4 flex flex-col gap-3">
-					<input
-						type="text"
-						placeholder="Title (optional)"
-						bind:value={markdownTitle}
-						class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm"
-					/>
-					<textarea
-						placeholder="Write your markdown here..."
-						bind:value={markdownContent}
-						rows="8"
-						class="dark:bg-base-800 bg-base-100 border-base-300 dark:border-base-700 rounded-lg border px-3 py-2 text-sm font-mono"
-					></textarea>
-					<Button disabled={isPublishingMarkdown} onclick={publishMarkdown}>
-						{isPublishingMarkdown ? 'Publishing...' : 'Publish'}
-					</Button>
-				</div>
-			{/if}
+			<Button class="mt-8" onclick={openCreateModal}>Create new</Button>
 
 			<div
 				class="mt-4 h-5 text-sm"
@@ -511,17 +923,18 @@
 			{:else if items.length > 0}
 				<div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3">
 					{#each items as item (item.uri)}
-						{#if item.type === 'markdown'}
+						{#if item.type === 'markdown' || item.type === 'code'}
 							<a
 								href={getItemLink(item)}
 								class="group bg-base-200 dark:bg-base-800 relative aspect-square overflow-hidden rounded-xl p-4 flex flex-col"
 							>
 								{#if (item.value as any).title}
-									<div class="font-semibold text-sm mb-1 truncate">{(item.value as any).title}</div>
+									<div class="font-semibold text-sm mb-1 truncate {item.type === 'code' ? 'font-mono' : ''}">{(item.value as any).title}</div>
 								{/if}
-								<div class="text-xs text-base-500 line-clamp-[8] flex-1 overflow-hidden whitespace-pre-wrap break-words">
+								<div class="text-xs text-base-500 line-clamp-[8] flex-1 overflow-hidden whitespace-pre-wrap break-words {item.type === 'code' ? 'font-mono' : ''}">
 									{((item.value as any).content ?? '').slice(0, 200)}
 								</div>
+								<span class="absolute bottom-2 left-2 rounded-full {getBadgeColor(item.type)} px-2 py-0.5 text-[10px] font-medium text-white">{item.type}</span>
 								<div
 									class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 pointer-coarse:opacity-100"
 								>
@@ -597,6 +1010,7 @@
 											</div>
 										</div>
 									{/if}
+									<span class="absolute bottom-2 left-2 rounded-full {getBadgeColor(item.type)} px-2 py-0.5 text-[10px] font-medium text-white">{item.type}</span>
 									<div
 										class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 pointer-coarse:opacity-100"
 									>
@@ -653,4 +1067,17 @@
 			{/if}
 		{/if}
 	</div>
+
+	{#if user.isLoggedIn}
+		<button
+			type="button"
+			class="bg-accent-600 hover:bg-accent-700 fixed right-6 bottom-6 z-40 flex h-14 w-14 items-center justify-center rounded-full text-white shadow-lg transition-colors"
+			onclick={openCreateModal}
+			title="Create new (+)"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+			</svg>
+		</button>
+	{/if}
 </div>
diff --git a/src/routes/c/[repo]/[rkey]/+page.server.ts b/src/routes/c/[repo]/[rkey]/+page.server.ts
new file mode 100644
index 0000000..5acea2b
--- /dev/null
+++ b/src/routes/c/[repo]/[rkey]/+page.server.ts
@@ -0,0 +1,23 @@
+import { getRecord, resolveHandle } from '$lib/atproto';
+import { isDid, isHandle } from '@atcute/lexicons/syntax';
+import { error } from '@sveltejs/kit';
+
+export async function load({ params }) {
+	const repo = params.repo;
+
+	const did = isDid(repo)
+		? repo
+		: isHandle(repo)
+			? await resolveHandle({ handle: repo })
+			: undefined;
+
+	if (!did) throw error(404, 'User not found');
+
+	const record = await getRecord({ did, collection: 'pics.atmo.code', rkey: params.rkey });
+
+	if (!record.value.content) {
+		throw error(404, 'Code not found');
+	}
+
+	return { record, did };
+}
diff --git a/src/routes/c/[repo]/[rkey]/+page.svelte b/src/routes/c/[repo]/[rkey]/+page.svelte
new file mode 100644
index 0000000..06abd5d
--- /dev/null
+++ b/src/routes/c/[repo]/[rkey]/+page.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { getDetailedProfile } from '$lib/atproto';
+	import { getCodeShareLink } from '$lib';
+	import { resolve } from '$app/paths';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/github-dark.min.css';
+	import { onMount } from 'svelte';
+
+	let createdAt = $state<string | undefined>(undefined);
+	let uploader = $state<{ displayName?: string; handle?: string; avatar?: string } | undefined>(
+		undefined
+	);
+	let copied = $state(false);
+
+	function formatDate(isoString: string): string {
+		const date = new Date(isoString);
+		return date.toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	async function copyLink() {
+		try {
+			if (!page.params.repo || !page.params.rkey) return;
+			await navigator.clipboard.writeText(getCodeShareLink(page.params.repo, page.params.rkey));
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			// Ignore errors
+		}
+	}
+
+	async function copyCode() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			// Ignore errors
+		}
+	}
+
+	$effect(() => {
+		getDetailedProfile({ did: data.did }).then((profile) => {
+			if (profile) {
+				uploader = {
+					displayName: profile.displayName,
+					handle: profile.handle,
+					avatar: profile.avatar
+				};
+			}
+		});
+		if (data.record?.value?.createdAt) {
+			createdAt = data.record.value.createdAt as string;
+		}
+	});
+
+	let { data } = $props();
+
+	const title = $derived((data.record?.value?.title as string) || '');
+	const code = $derived((data.record?.value?.content as string) || '');
+
+	let mounted = $state(false);
+	onMount(() => (mounted = true));
+
+	const highlighted = $derived.by(() => {
+		if (!mounted || !code) return { html: '', language: '' };
+		const result = hljs.highlightAuto(code);
+		return { html: result.value, language: result.language || '' };
+	});
+	const highlightedHtml = $derived(highlighted.html);
+	const detectedLanguage = $derived(highlighted.language);
+</script>
+
+<svelte:head>
+	<meta
+		property="og:image"
+		content={resolve('/c/[repo]/[rkey]/og.png', {
+			repo: page.params.repo ?? '',
+			rkey: page.params.rkey ?? ''
+		})}
+	/>
+	<meta
+		name="twitter:image"
+		content={resolve('/c/[repo]/[rkey]/og.png', {
+			repo: page.params.repo ?? '',
+			rkey: page.params.rkey ?? ''
+		})}
+	/>
+	<meta name="twitter:card" content="summary_large_image" />
+
+	<title>{title || 'Code snippet'}</title>
+	<meta property="og:title" content={title || 'Code snippet'} />
+	<meta name="twitter:title" content={title || 'Code snippet'} />
+</svelte:head>
+
+<div class="dark:bg-base-900 min-h-screen bg-white">
+	<div class="mx-auto max-w-4xl px-4 py-8 md:py-16">
+		{#if title}
+			<h1 class="mb-4 text-2xl font-bold font-mono">{title}</h1>
+		{/if}
+
+		<!-- Uploader info + actions -->
+		<div class="mb-6 flex items-center gap-3">
+			{#if uploader?.avatar}
+				<img src={uploader.avatar} alt="" class="h-10 w-10 rounded-full" />
+			{/if}
+			<div>
+				{#if uploader?.displayName || uploader?.handle}
+					<div class="font-medium">{uploader.displayName || uploader.handle}</div>
+				{/if}
+				{#if createdAt}
+					<div class="text-base-500 text-sm">{formatDate(createdAt)}</div>
+				{/if}
+			</div>
+			<div class="ml-auto flex items-center gap-2">
+				{#if detectedLanguage}
+					<span class="text-base-500 text-xs font-mono">{detectedLanguage}</span>
+				{/if}
+				<button
+					type="button"
+					class="bg-base-200 dark:bg-base-800 hover:bg-base-300 dark:hover:bg-base-700 flex cursor-pointer items-center gap-2 rounded-full px-4 py-2 text-sm transition-colors"
+					onclick={copyCode}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+						/>
+					</svg>
+					{copied ? 'Copied!' : 'Copy code'}
+				</button>
+				<button
+					type="button"
+					class="bg-base-200 dark:bg-base-800 hover:bg-base-300 dark:hover:bg-base-700 flex cursor-pointer items-center gap-2 rounded-full px-4 py-2 text-sm transition-colors"
+					onclick={copyLink}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101"
+						/>
+					</svg>
+					Copy link
+				</button>
+			</div>
+		</div>
+
+		<!-- Code block -->
+		<div class="overflow-hidden rounded-xl">
+			<pre
+				class="hljs overflow-x-auto p-6 text-sm leading-relaxed"><code>{#if mounted}{@html highlightedHtml}{:else}{code}{/if}</code></pre>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/c/[repo]/[rkey]/og.png/+server.ts b/src/routes/c/[repo]/[rkey]/og.png/+server.ts
new file mode 100644
index 0000000..4ad8279
--- /dev/null
+++ b/src/routes/c/[repo]/[rkey]/og.png/+server.ts
@@ -0,0 +1,41 @@
+import { getRecord, resolveHandle } from '$lib/atproto';
+import { isDid, isHandle } from '@atcute/lexicons/syntax';
+import { error } from '@sveltejs/kit';
+import { ImageResponse } from '@ethercorps/sveltekit-og';
+
+export async function GET({ params }) {
+	const repo = params.repo;
+
+	const did = isDid(repo)
+		? repo
+		: isHandle(repo)
+			? await resolveHandle({ handle: repo })
+			: undefined;
+
+	if (!did) throw error(404, 'User not found');
+
+	const record = await getRecord({ did, collection: 'pics.atmo.code', rkey: params.rkey });
+
+	const title = (record.value.title as string) || 'Code snippet';
+	const content = (record.value.content as string) || '';
+	const preview = content.length > 400 ? content.slice(0, 400) + '...' : content;
+
+	const ogWidth = 1200;
+	const ogHeight = 630;
+
+	const escapedTitle = title.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	const escapedPreview = preview
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;');
+
+	const htmlString = `<div style="display:flex;flex-direction:column;justify-content:center;padding:48px;width:${ogWidth}px;height:${ogHeight}px;background:#1e1e2e;color:#cdd6f4;font-family:monospace;">
+  <div style="font-size:36px;font-weight:bold;margin-bottom:24px;color:#89b4fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapedTitle}</div>
+  <div style="font-size:20px;color:#a6adc8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;white-space:pre-wrap;">${escapedPreview}</div>
+</div>`;
+
+	return new ImageResponse(htmlString, {
+		width: ogWidth,
+		height: ogHeight
+	});
+}