diff --git a/web/src/lib/EventHelper.ts b/web/src/lib/EventHelper.ts
index a077243c3..f8fcd400c 100644
--- a/web/src/lib/EventHelper.ts
+++ b/web/src/lib/EventHelper.ts
@@ -178,3 +178,7 @@ export function getZapperPubkey(event: Event): string | undefined {
 export function isNostrHex(hex: string): boolean {
 	return /[0-9a-f]{64}/.test(hex);
 }
+
+export function getTitle(tags: string[][]): string | undefined {
+	return filterTags('title', tags).at(0);
+}
diff --git a/web/src/lib/List.ts b/web/src/lib/List.ts
index 6c4f346bc..89d3ebdb7 100644
--- a/web/src/lib/List.ts
+++ b/web/src/lib/List.ts
@@ -3,7 +3,7 @@ import { createRxOneshotReq, latest } from 'rx-nostr';
 import { lastValueFrom } from 'rxjs';
 import type { Event } from 'nostr-typedef';
 import { rxNostr } from './timelines/MainTimeline';
-import { filterTags, findIdentifier } from './EventHelper';
+import { filterTags, findIdentifier, getTitle } from './EventHelper';
 import { parsePrivateTags } from './Encryption';
 import { pubkey } from './stores/Author';
 import { Signer } from './Signer';
@@ -26,7 +26,7 @@ export async function fetchListEvent(
 }
 
 export function getListTitle(tags: string[][]): string {
-	return filterTags('title', tags).at(0) ?? findIdentifier(tags) ?? '-';
+	return getTitle(tags) ?? findIdentifier(tags) ?? '-';
 }
 
 export async function getListPubkeys(event: Event): Promise<string[]> {
diff --git a/web/src/lib/components/actions/ActionMenu.svelte b/web/src/lib/components/actions/ActionMenu.svelte
new file mode 100644
index 000000000..4e2e26f99
--- /dev/null
+++ b/web/src/lib/components/actions/ActionMenu.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { EventItem, Item } from '$lib/Items';
+	import { nip19 } from 'nostr-tools';
+	import MenuButton from '../MenuButton.svelte';
+	import { metadataStore } from '$lib/cache/Events';
+	import { getCodePoints } from '$lib/String';
+	import IconMessageCircle from '@tabler/icons-svelte/icons/message-circle';
+	import IconBolt from '@tabler/icons-svelte/icons/bolt';
+	import RepostButton from '../RepostButton.svelte';
+	import ReactionButton from '../ReactionButton.svelte';
+	import EmojiPicker from '../EmojiPicker.svelte';
+	import ZapDialog from '../ZapDialog.svelte';
+	import { sendReaction } from '$lib/author/Reaction';
+	import type { Event } from 'nostr-typedef';
+	import { notesKinds } from '$lib/Constants';
+	import { openNoteDialog, replyTo } from '$lib/stores/NoteDialog';
+	import { rom } from '$lib/stores/Author';
+
+	export let item: EventItem;
+
+	let zapped = false;
+	let jsonDisplay = false;
+	let zapDialogComponent: ZapDialog;
+
+	const iconSize = 20;
+
+	$: metadata = $metadataStore.get(item.event.pubkey);
+
+	function reply(item: Item) {
+		$replyTo = item as EventItem;
+		$openNoteDialog = true;
+	}
+
+	async function emojiReaction(note: Event, emoji: any) {
+		console.log('[reaction with emoji]', note, emoji);
+
+		if ($rom) {
+			console.error('Readonly');
+			return;
+		}
+
+		const content =
+			emoji.native ??
+			(emoji.shortcodes ? emoji.shortcodes : `:${emoji.id.replaceAll('+', '_')}:`);
+		const emojiUrl =
+			emoji.native === undefined && emoji.src !== undefined ? emoji.src : undefined;
+		sendReaction(note, content, emojiUrl);
+	}
+
+	function onZapped() {
+		zapped = true;
+	}
+</script>
+
+<div class="action-menu">
+	<button class:hidden={!notesKinds.includes(item.event.kind)} on:click={() => reply(item)}>
+		<IconMessageCircle size={iconSize} />
+	</button>
+	<RepostButton event={item.event} {iconSize} />
+	<ReactionButton event={item.event} {iconSize} />
+	<span>
+		<EmojiPicker on:pick={({ detail }) => emojiReaction(item.event, detail)} />
+	</span>
+	<button
+		class="zap"
+		class:hidden={!metadata?.canZap}
+		disabled={zapped}
+		on:click={() => zapDialogComponent.openZapDialog()}
+	>
+		<IconBolt size={iconSize} />
+	</button>
+	<ZapDialog
+		pubkey={item.event.pubkey}
+		event={item.event}
+		bind:this={zapDialogComponent}
+		on:zapped={onZapped}
+	/>
+	<MenuButton event={item.event} {iconSize} bind:showDetails={jsonDisplay} />
+</div>
+{#if jsonDisplay}
+	<div class="develop">
+		<h5>Event ID</h5>
+		<div>{nip19.noteEncode(item.event.id)}</div>
+		<br />
+		<div>{nip19.neventEncode({ id: item.event.id })}</div>
+		<h5>Event JSON</h5>
+		<code>{JSON.stringify(item.event, null, 2)}</code>
+		<h5>User ID</h5>
+		<div>{nip19.npubEncode(item.event.pubkey)}</div>
+		<h5>User JSON</h5>
+		<code>{JSON.stringify(metadata?.content, null, 2)}</code>
+		<h5>Code Points</h5>
+		<h6>display name</h6>
+		<p>
+			{getCodePoints(metadata?.content?.display_name ?? '')
+				.map((codePoint) => `0x${codePoint.toString(16)}`)
+				.join(' ')}
+		</p>
+		<h6>@name</h6>
+		<p>
+			{getCodePoints(metadata?.content?.name ?? '')
+				.map((codePoint) => `0x${codePoint.toString(16)}`)
+				.join(' ')}
+		</p>
+		<h6>content</h6>
+		<p>
+			{getCodePoints(item.event.content)
+				.map((codePoint) => `0x${codePoint.toString(16)}`)
+				.join(' ')}
+		</p>
+		<div>
+			Open in <a
+				href="https://koteitan.github.io/nostr-post-checker/?hideform&eid={nip19.neventEncode(
+					{ id: item.event.id }
+				)}&kind={item.event.kind}"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				nostr-post-checker
+			</a>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.develop {
+		cursor: default;
+		background-color: var(--surface);
+	}
+
+	.action-menu {
+		display: flex;
+		justify-content: space-between;
+
+		margin-top: 8px;
+	}
+
+	.action-menu button {
+		border: none;
+		background-color: inherit;
+		cursor: pointer;
+		outline: none;
+		padding: 0;
+		height: 20px;
+		color: var(--accent-gray);
+	}
+
+	.action-menu button.hidden {
+		visibility: hidden;
+	}
+
+	.zap:disabled {
+		color: #f59f00;
+	}
+</style>
diff --git a/web/src/lib/components/content/Imeta.svelte b/web/src/lib/components/content/Imeta.svelte
new file mode 100644
index 000000000..6a3be40ee
--- /dev/null
+++ b/web/src/lib/components/content/Imeta.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Img from './Img.svelte';
+
+	export let tag: string[];
+
+	$: url = tag.at(1)?.split(' ').at(1) ?? '';
+</script>
+
+{#if URL.canParse(url)}
+	<Img url={new URL(url)} />
+{/if}
diff --git a/web/src/lib/components/items/EventComponent.svelte b/web/src/lib/components/items/EventComponent.svelte
index 824af1111..823662f50 100644
--- a/web/src/lib/components/items/EventComponent.svelte
+++ b/web/src/lib/components/items/EventComponent.svelte
@@ -15,6 +15,7 @@
 	import BadgeDefinition from './BadgeDefinition.svelte';
 	import List from './List.svelte';
 	import LegacyDirectMessage from './LegacyDirectMessage.svelte';
+	import Picture from './Picture.svelte';
 
 	export let item: Item;
 	export let readonly: boolean;
@@ -32,6 +33,8 @@
 	<Reaction {item} {readonly} {createdAtFormat} />
 {:else if item.event.kind === Kind.BadgeAward}
 	<BadgeAward {item} {readonly} {createdAtFormat} />
+{:else if Number(item.event.kind) === 20}
+	<Picture {item} {readonly} {createdAtFormat} />
 {:else if item.event.kind === Kind.ChannelCreation || item.event.kind === Kind.ChannelMetadata}
 	<Channel {item} />
 {:else if item.event.kind === Kind.Article}
diff --git a/web/src/lib/components/items/Note.svelte b/web/src/lib/components/items/Note.svelte
index 5a40edbbf..71d07adf5 100644
--- a/web/src/lib/components/items/Note.svelte
+++ b/web/src/lib/components/items/Note.svelte
@@ -1,32 +1,22 @@
 <script lang="ts">
-	import { Kind, nip19, type Event } from 'nostr-tools';
+	import { Kind, nip19 } from 'nostr-tools';
 	import type { EventItem, Item } from '$lib/Items';
-	import { sendReaction } from '$lib/author/Reaction';
 	import { metadataStore } from '$lib/cache/Events';
-	import IconMessageCircle from '@tabler/icons-svelte/icons/message-circle';
-	import IconBolt from '@tabler/icons-svelte/icons/bolt';
 	import IconMessages from '@tabler/icons-svelte/icons/messages';
-	import { openNoteDialog, replyTo } from '$lib/stores/NoteDialog';
 	import { readRelays } from '$lib/stores/Author';
 	import { pool } from '$lib/stores/Pool';
 	import { rom } from '$lib/stores/Author';
 	import { Api } from '$lib/Api';
 	import { onMount } from 'svelte';
-	import ZapDialog from '../ZapDialog.svelte';
 	import Content from '$lib/components/Content.svelte';
-	import { getCodePoints } from '$lib/String';
 	import { isReply } from '$lib/EventHelper';
 	import { Channel, channelIdStore } from '$lib/Channel';
 	import EventMetadata from '$lib/components/EventMetadata.svelte';
-	import EmojiPicker from '$lib/components/EmojiPicker.svelte';
-	import MenuButton from '$lib/components/MenuButton.svelte';
-	import ReactionButton from '$lib/components/ReactionButton.svelte';
-	import RepostButton from '$lib/components/RepostButton.svelte';
 	import ProxyLink from '../ProxyLink.svelte';
 	import Nip94 from '$lib/components/Nip94.svelte';
 	import Via from '../Via.svelte';
 	import CreatedAt from '../CreatedAt.svelte';
-	import { notesKinds } from '$lib/Constants';
+	import ActionMenu from '../actions/ActionMenu.svelte';
 
 	export let item: Item;
 	export let readonly: boolean;
@@ -34,19 +24,13 @@
 	export let full = false;
 
 	$: eventItem = item as EventItem;
-	$: metadata = $metadataStore.get(eventItem.event.pubkey);
 
 	if ($rom) {
 		readonly = true;
 	}
 
-	const iconSize = 20;
-
-	let zapped = false;
-	let jsonDisplay = false;
 	let channelId: string | undefined;
 	let channelName: string | undefined;
-	let zapDialogComponent: ZapDialog;
 
 	let contentWarningTag = item.event.tags.find(([tagName]) => tagName === 'content-warning');
 	let showContent = contentWarningTag === undefined;
@@ -54,31 +38,6 @@
 		showContent = true;
 	};
 
-	function reply(item: Item) {
-		$replyTo = item as EventItem;
-		$openNoteDialog = true;
-	}
-
-	async function emojiReaction(note: Event, emoji: any) {
-		console.log('[reaction with emoji]', note, emoji);
-
-		if ($rom) {
-			console.error('Readonly');
-			return;
-		}
-
-		const content =
-			emoji.native ??
-			(emoji.shortcodes ? emoji.shortcodes : `:${emoji.id.replaceAll('+', '_')}:`);
-		const emojiUrl =
-			emoji.native === undefined && emoji.src !== undefined ? emoji.src : undefined;
-		sendReaction(note, content, emojiUrl);
-	}
-
-	function onZapped() {
-		zapped = true;
-	}
-
 	onMount(async () => {
 		if (item.event.kind === Kind.ChannelMessage) {
 			channelId = item.event.tags
@@ -158,78 +117,7 @@
 			<div class="proxy"><ProxyLink {tag} /></div>
 		{/each}
 		{#if !readonly}
-			<div class="action-menu">
-				<button
-					class:hidden={!notesKinds.includes(item.event.kind)}
-					on:click={() => reply(item)}
-				>
-					<IconMessageCircle size={iconSize} />
-				</button>
-				<RepostButton event={item.event} {iconSize} />
-				<ReactionButton event={item.event} {iconSize} />
-				<span>
-					<EmojiPicker on:pick={({ detail }) => emojiReaction(item.event, detail)} />
-				</span>
-				<button
-					class="zap"
-					class:hidden={!metadata?.canZap}
-					disabled={zapped}
-					on:click={() => zapDialogComponent.openZapDialog()}
-				>
-					<IconBolt size={iconSize} />
-				</button>
-				<ZapDialog
-					pubkey={eventItem.event.pubkey}
-					event={eventItem.event}
-					bind:this={zapDialogComponent}
-					on:zapped={onZapped}
-				/>
-				<MenuButton event={item.event} {iconSize} bind:showDetails={jsonDisplay} />
-			</div>
-			{#if jsonDisplay}
-				<div class="develop">
-					<h5>Event ID</h5>
-					<div>{nip19.noteEncode(item.event.id)}</div>
-					<br />
-					<div>{nip19.neventEncode({ id: item.event.id })}</div>
-					<h5>Event JSON</h5>
-					<code>{JSON.stringify(item.event, null, 2)}</code>
-					<h5>User ID</h5>
-					<div>{nip19.npubEncode(item.event.pubkey)}</div>
-					<h5>User JSON</h5>
-					<code>{JSON.stringify(metadata?.content, null, 2)}</code>
-					<h5>Code Points</h5>
-					<h6>display name</h6>
-					<p>
-						{getCodePoints(metadata?.content?.display_name ?? '')
-							.map((codePoint) => `0x${codePoint.toString(16)}`)
-							.join(' ')}
-					</p>
-					<h6>@name</h6>
-					<p>
-						{getCodePoints(metadata?.content?.name ?? '')
-							.map((codePoint) => `0x${codePoint.toString(16)}`)
-							.join(' ')}
-					</p>
-					<h6>content</h6>
-					<p>
-						{getCodePoints(item.event.content)
-							.map((codePoint) => `0x${codePoint.toString(16)}`)
-							.join(' ')}
-					</p>
-					<div>
-						Open in <a
-							href="https://koteitan.github.io/nostr-post-checker/?hideform&eid={nip19.neventEncode(
-								{ id: item.event.id }
-							)}&kind={item.event.kind}"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							nostr-post-checker
-						</a>
-					</div>
-				</div>
-			{/if}
+			<ActionMenu item={eventItem} />
 		{/if}
 		{#if full}
 			<footer>
@@ -255,41 +143,11 @@
 		max-height: 30em;
 	}
 
-	.develop {
-		cursor: default;
-		background-color: var(--surface);
-	}
-
 	.channel,
 	.proxy {
 		margin-top: 0.4rem;
 	}
 
-	.action-menu {
-		display: flex;
-		justify-content: space-between;
-
-		margin-top: 8px;
-	}
-
-	.action-menu button {
-		border: none;
-		background-color: inherit;
-		cursor: pointer;
-		outline: none;
-		padding: 0;
-		height: 20px;
-		color: var(--accent-gray);
-	}
-
-	.action-menu button.hidden {
-		visibility: hidden;
-	}
-
-	.zap:disabled {
-		color: #f59f00;
-	}
-
 	.content-warning {
 		padding: 0.5em;
 		width: 100%;
diff --git a/web/src/lib/components/items/Picture.svelte b/web/src/lib/components/items/Picture.svelte
new file mode 100644
index 000000000..889fe9d24
--- /dev/null
+++ b/web/src/lib/components/items/Picture.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getTitle } from '$lib/EventHelper';
+	import type { EventItem, Item } from '$lib/Items';
+	import ActionMenu from '../actions/ActionMenu.svelte';
+	import Content from '../Content.svelte';
+	import Imeta from '../content/Imeta.svelte';
+	import EventMetadata from '../EventMetadata.svelte';
+
+	export let item: Item;
+	export let readonly: boolean;
+	export let createdAtFormat: 'auto' | 'time' = 'auto';
+
+	$: eventItem = item as EventItem;
+	$: title = getTitle(item.event.tags);
+	$: pictures = item.event.tags.filter(([tagName]) => tagName === 'imeta');
+</script>
+
+<EventMetadata {item} {createdAtFormat}>
+	<section slot="content">
+		{#if title}
+			<h3>{title}</h3>
+		{/if}
+		<Content content={item.event.content} tags={item.event.tags} />
+		{#each pictures as picture}
+			<Imeta tag={picture} />
+		{/each}
+		{#if !readonly}
+			<ActionMenu item={eventItem} />
+		{/if}
+	</section>
+</EventMetadata>