diff --git a/src/app/shared/Feed.svelte b/src/app/shared/Feed.svelte
index f3f63adbc..670e7c29f 100644
--- a/src/app/shared/Feed.svelte
+++ b/src/app/shared/Feed.svelte
@@ -39,7 +39,6 @@
   import Card from "src/partials/Card.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
-  import Note from "src/app/shared/Note.svelte"
   import FeedControls from "src/app/shared/FeedControls.svelte"
   import {router} from "src/app/util"
   import type {Feed} from "src/domain"
@@ -51,6 +50,7 @@
     isEventMuted,
     unwrapRepost,
   } from "src/engine"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
 
   export let feed: Feed
   export let anchor = null
@@ -241,10 +241,10 @@
   </FeedControls>
 {/if}
 
-<FlexColumn xl bind:element>
+<FlexColumn bind:element>
   {#each events as note, i (note.id)}
     <div in:fly={{y: 20}}>
-      <Note {filters} {reposts} {depth} {anchor} {note} />
+      <FeedItem {filters} {reposts} {depth} {anchor} {note} />
     </div>
     {#if i > 20 && parseInt(hash(note.id)) % 100 === 0 && $promptDismissed < ago(WEEK)}
       <Card class="group flex items-center justify-between">
diff --git a/src/app/shared/FeedCard.svelte b/src/app/shared/FeedCard.svelte
index b794b0aaa..c4447d53f 100644
--- a/src/app/shared/FeedCard.svelte
+++ b/src/app/shared/FeedCard.svelte
@@ -12,7 +12,6 @@
   import {slide} from "src/util/transition"
   import {boolCtrl} from "src/partials/utils"
   import FlexColumn from "src/partials/FlexColumn.svelte"
-  import Card from "src/partials/Card.svelte"
   import Chip from "src/partials/Chip.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import CopyValueSimple from "src/partials/CopyValueSimple.svelte"
@@ -49,7 +48,7 @@
   )
 </script>
 
-<Card class="flex gap-3">
+<div class="flex gap-3">
   <div class="mt-[6px] hidden sm:block">
     <i class="fa fa-rss fa-2xl" />
   </div>
@@ -116,4 +115,4 @@
         )}</pre>
     {/if}
   </FlexColumn>
-</Card>
+</div>
diff --git a/src/app/shared/FeedItem.svelte b/src/app/shared/FeedItem.svelte
new file mode 100644
index 000000000..0e0dfcdba
--- /dev/null
+++ b/src/app/shared/FeedItem.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import {repository} from "@welshman/app"
+  import {ctx} from "@welshman/lib"
+  import {deriveEvents} from "@welshman/store"
+  import {getIdOrAddress, getReplyFilters, isChildOf, matchFilters, NOTE} from "@welshman/util"
+  import {quantify} from "hurdak"
+  import {onMount} from "svelte"
+  import NoteMeta from "src/app/shared/NoteMeta.svelte"
+  import Note from "src/app/shared/Note.svelte"
+  import {ensureUnwrapped, getSetting, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
+  import AltColor from "src/partials/AltColor.svelte"
+  import Popover from "src/partials/Popover.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
+  import {fly, slide} from "src/util/transition"
+  import {openReplies} from "src/app/state"
+
+  export let note
+  export let relays = []
+  export let filters = null
+  export let reposts = new Map()
+  export let depth = 0
+  export let anchor = null
+  export let topLevel = false
+  export let isLastReply = false
+  export let showParent = true
+  export let showLoading = false
+  export let showMedia = getSetting("show_media")
+
+  let ready = false
+  let event = note
+  let showMutedReplies = false
+  let collapsed = depth === 0
+  let showHiddenReplies = anchor === getIdOrAddress(event)
+  let draftEventId: string
+
+  const showEntire = showHiddenReplies
+
+  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
+
+  $: children = $context.filter(e => isChildOf(e, event))
+  $: replies = sortEventsDesc(children.filter(e => e.kind == NOTE))
+  $: replyIsActive = $openReplies[event.id]
+
+  let mutedReplies, hiddenReplies, visibleReplies
+
+  $: {
+    mutedReplies = []
+    hiddenReplies = []
+    visibleReplies = []
+
+    for (const e of replies) {
+      if ($isEventMuted(e)) {
+        mutedReplies.push(e)
+      } else if (collapsed) {
+        hiddenReplies.push(e)
+      } else if (
+        !showHiddenReplies &&
+        filters &&
+        !matchFilters(filters, e) &&
+        draftEventId !== e.id
+      ) {
+        hiddenReplies.push(e)
+      } else {
+        visibleReplies.push(e)
+      }
+    }
+
+    if (depth === 0) {
+      mutedReplies.splice(0)
+      hiddenReplies.splice(0)
+    }
+
+    if (!showHiddenReplies && visibleReplies.length === 0) {
+      mutedReplies.splice(0)
+      hiddenReplies.splice(0)
+    }
+
+    if (showMutedReplies) {
+      visibleReplies = visibleReplies.concat(mutedReplies.splice(0))
+    }
+
+    if (!showHiddenReplies) {
+      hiddenReplies = hiddenReplies.concat(visibleReplies.slice(3))
+      visibleReplies = visibleReplies.slice(0, 3)
+    }
+  }
+
+  onMount(async () => {
+    if (!event.pubkey) {
+      event = await loadEvent(event.id, {
+        relays: ctx.app.router.FromRelays(relays).getUrls(),
+      })
+    }
+
+    event = await ensureUnwrapped(event)
+
+    if (event.pubkey) {
+      ready = true
+    }
+  })
+</script>
+
+{#if ready}
+  <div>
+    <NoteMeta {reposts} note={event} />
+    <div class="note relative">
+      {#if !showParent && !topLevel}
+        <AltColor let:isAlt>
+          <svg height="36" width="36" class="absolute -left-[18px] top-1">
+            <circle
+              cx="18"
+              cy="18"
+              r="14"
+              fill="transparent"
+              stroke-width="4"
+              stroke-dashoffset="54"
+              stroke-dasharray="100 100"
+              transform-origin="center"
+              class={isAlt ? "stroke-tinted-700" : "stroke-neutral-800"} />
+          </svg>
+        </AltColor>
+        {#if isLastReply}
+          <AltColor background class="absolute -left-4 h-[20px] w-1" let:isAlt />
+        {:else}
+          <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
+        {/if}
+      {/if}
+      <Note note={event} {showEntire} {showParent} {showMedia} />
+      {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
+        <div class="relative">
+          <AltColor
+            background
+            class="absolute left-0 top-0 -mr-2 -mt-6 flex h-8 w-8 cursor-pointer items-center
+                   justify-center rounded-full"
+            on:click={() => {
+              collapsed = !collapsed
+            }}>
+            <Popover triggerType="mouseenter">
+              <div slot="trigger">
+                <i
+                  class="fa fa-arrow-up transition-all"
+                  class:text-tinted-500={!collapsed}
+                  class:text-tinted-100={collapsed}
+                  class:rotate-180={collapsed} />
+              </div>
+              <div slot="tooltip">
+                {collapsed ? "Show replies" : "Hide replies"}
+              </div>
+            </Popover>
+          </AltColor>
+        </div>
+      {/if}
+
+      {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
+        <div
+          class="note-children relative ml-4 flex flex-col"
+          in:fly|local={{y: 20}}
+          out:slide|local>
+          {#if hiddenReplies.length > 0}
+            <button
+              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
+              on:click={() => {
+                showHiddenReplies = true
+              }}>
+              <i class="fa fa-up-down pr-2 text-sm" />
+              Show {quantify(hiddenReplies.length, "other reply", "more replies")}
+            </button>
+            {#if visibleReplies.length > 0}
+              <AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
+            {/if}
+          {:else if visibleReplies.length > 0}
+            <AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
+          {/if}
+          {#if visibleReplies.length}
+            {#key showHiddenReplies}
+              <div in:fly={{y: 20}}>
+                {#each visibleReplies as r, i (r.id)}
+                  <svelte:self
+                    isLastReply={i === visibleReplies.length - 1}
+                    showParent={false}
+                    showHidden
+                    note={r}
+                    depth={depth - 1}
+                    {filters}
+                    {anchor} />
+                {/each}
+              </div>
+            {/key}
+          {/if}
+          {#if showHiddenReplies && mutedReplies.length > 0}
+            <button
+              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
+              on:click={() => {
+                showMutedReplies = true
+              }}>
+              <i class="fa fa-up-down pr-2 text-sm" />
+              Show {quantify(mutedReplies.length, "hidden reply", "hidden replies")}
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else if showLoading}
+  <Spinner />
+{/if}
diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index 27dd21cac..bc3fab59d 100644
--- a/src/app/shared/Note.svelte
+++ b/src/app/shared/Note.svelte
@@ -1,89 +1,23 @@
 <script lang="ts">
-  import {ctx, nthEq} from "@welshman/lib"
-  import {
-    isChildOf,
-    getReplyFilters,
-    getIdOrAddress,
-    getLnUrl,
-    matchFilters,
-    zapFromEvent,
-    NOTE,
-    REACTION,
-    ZAP_RESPONSE,
-    getAncestorTagValues,
-  } from "@welshman/util"
-  import {repository, deriveZapperForPubkey, deriveZapper} from "@welshman/app"
-  import {deriveEvents} from "@welshman/store"
-  import {sleep} from "hurdak"
-  import {identity, uniqBy, prop} from "ramda"
-  import {onMount} from "svelte"
-  import {quantify} from "hurdak"
-  import {fly, slide} from "src/util/transition"
-  import {isLike} from "src/util/nostr"
-  import {formatTimestamp, timestamp1} from "src/util/misc"
-  import Popover from "src/partials/Popover.svelte"
-  import AltColor from "src/partials/AltColor.svelte"
-  import Spinner from "src/partials/Spinner.svelte"
+  import {ctx} from "@welshman/lib"
+  import {getIdOrAddress, type TrustedEvent} from "@welshman/util"
+  import {getSetting, isEventMuted} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import Card from "src/partials/Card.svelte"
-  import NoteMeta from "src/app/shared/NoteMeta.svelte"
-  import PersonCircle from "src/app/shared/PersonCircle.svelte"
-  import PersonName from "src/app/shared/PersonName.svelte"
-  import NoteReply from "src/app/shared/NoteReply.svelte"
+  import {router} from "src/app/util"
   import NoteActions from "src/app/shared/NoteActions.svelte"
   import NoteContent from "src/app/shared/NoteContent.svelte"
-  import NotePending from "src/app/shared/NotePending.svelte"
-  import {drafts} from "src/app/state"
-  import {router} from "src/app/util/router"
-  import {
-    env,
-    load,
-    loadEvent,
-    ensureUnwrapped,
-    isEventMuted,
-    userMutes,
-    getSetting,
-    sortEventsDesc,
-  } from "src/engine"
+  import NoteHeader from "src/app/shared/NoteHeader.svelte"
+  import NoteReply from "src/app/shared/NoteReply.svelte"
 
-  export let note
-  export let relays = []
-  export let filters = null
-  export let reposts = new Map()
+  export let note: TrustedEvent
   export let depth = 0
-  export let anchor = null
-  export let topLevel = false
-  export let isLastReply = false
-  export let isDraft = false
-  export let removeDraftCb = null
-  export let showParent = true
-  export let showLoading = false
-  export let showHidden = false
+  export let showEntire = false
   export let showMedia = getSetting("show_media")
+  export let showParent = true
+  export let interactive = true
 
-  let ready = false
-  let event = note
-  let replyCtrl = null
-  let replyIsActive = false
-  let showMutedReplies = false
-  let collapsed = depth === 0
-  let showHiddenReplies = anchor === getIdOrAddress(event)
-  let draftEventId: string
-  let removeDraft: () => void
-
-  const showEntire = showHiddenReplies
-  const interactive = !anchor || !showEntire
-
-  const addDraftToContext = (event, cb) => {
-    draftEventId = event.id
-    removeDraft = () => {
-      cb()
-      drafts.set(note.id, event.content)
-      sleep(10).then(() => {
-        replyCtrl?.start()
-      })
-    }
-  }
+  let showHidden = false
 
   const onClick = e => {
     const target = (e.detail?.target || e.target) as HTMLElement
@@ -91,315 +25,36 @@
     if (interactive && !["I"].includes(target.tagName) && !target.closest("a")) {
       router
         .at("notes")
-        .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
+        .of(getIdOrAddress(note), {relays: ctx.app.router.Event(note).getUrls()})
         .open()
     }
   }
 
-  const showPerson = () => router.at("people").of(event.pubkey).open()
-
-  const goToDetail = () =>
-    router
-      .at("notes")
-      .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
-      .push()
-
-  const goToParent = () =>
-    router
-      .at("notes")
-      .of(reply, {relays: ctx.app.router.EventParents(event).getUrls()})
-      .open()
-
-  const goToThread = () =>
-    router
-      .at("notes")
-      .of(getIdOrAddress(event), {relays: ctx.app.router.EventRoots(event).getUrls()})
-      .at("thread")
-      .open()
-
-  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
-
-  $: ancestors = getAncestorTagValues(event.tags || [])
-  $: reply = ancestors.replies[0]
-  $: root = ancestors.roots[0]
-  $: lnurl = getLnUrl(event.tags?.find(nthEq(0, "zap"))?.[1] || "")
-  $: zapper = lnurl ? deriveZapper(lnurl) : deriveZapperForPubkey(event.pubkey)
-  $: muted = $userMutes.has(event.id)
-  $: hidden = $isEventMuted(event, true)
-  $: children = $context.filter(e => isChildOf(e, event))
-  $: replies = sortEventsDesc(children.filter(e => e.kind === NOTE))
-
-  let mutedReplies, hiddenReplies, visibleReplies
-
-  $: {
-    mutedReplies = []
-    hiddenReplies = []
-    visibleReplies = []
-
-    for (const e of replies) {
-      if ($isEventMuted(e)) {
-        mutedReplies.push(e)
-      } else if (collapsed) {
-        hiddenReplies.push(e)
-      } else if (
-        !showHiddenReplies &&
-        filters &&
-        !matchFilters(filters, e) &&
-        draftEventId !== e.id
-      ) {
-        hiddenReplies.push(e)
-      } else {
-        visibleReplies.push(e)
-      }
-    }
-
-    if (depth === 0) {
-      mutedReplies.splice(0)
-      hiddenReplies.splice(0)
-    }
-
-    if (!showHiddenReplies && visibleReplies.length === 0) {
-      mutedReplies.splice(0)
-      hiddenReplies.splice(0)
-    }
-
-    if (showMutedReplies) {
-      visibleReplies = visibleReplies.concat(mutedReplies.splice(0))
-    }
-
-    if (!showHiddenReplies) {
-      hiddenReplies = hiddenReplies.concat(visibleReplies.slice(3))
-      visibleReplies = visibleReplies.slice(0, 3)
-    }
-  }
-
-  // Split out likes, uniqify by pubkey since a like can be duplicated across groups
-  $: likes = uniqBy(prop("pubkey"), children.filter(isLike))
-
-  // Split out zaps
-  $: zaps = children
-    .filter(e => e.kind === 9735)
-    .map(e => ($zapper ? zapFromEvent(e, $zapper) : null))
-    .filter(identity)
-
-  onMount(async () => {
-    if (!event.pubkey) {
-      event = await loadEvent(event.id, {
-        relays: ctx.app.router.FromRelays(relays).getUrls(),
-      })
-    }
-
-    event = await ensureUnwrapped(event)
-
-    if (event.pubkey) {
-      ready = true
-
-      const actions = getSetting("note_actions")
-      const kinds = []
-
-      if (actions.includes("replies")) {
-        kinds.push(NOTE)
-      }
-
-      if (actions.includes("reactions")) {
-        kinds.push(REACTION)
-      }
-
-      if (env.ENABLE_ZAPS && actions.includes("zaps")) {
-        kinds.push(ZAP_RESPONSE)
-      }
-
-      load({
-        relays: ctx.app.router.Replies(event).getUrls(),
-        filters: getReplyFilters([event], {kinds}),
-      })
-    }
-  })
+  $: hidden = $isEventMuted(note, true)
 </script>
 
-{#if ready}
-  {@const showReply = reply && !ancestors.replies.includes(anchor) && showParent}
-  {@const showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent}
-  <div>
-    <NoteMeta {reposts} note={event} />
-    <div class="note relative">
-      {#if !showParent && !topLevel}
-        <AltColor let:isAlt>
-          <svg height="36" width="36" class="absolute -left-[18px] top-1">
-            <circle
-              cx="18"
-              cy="18"
-              r="14"
-              fill="transparent"
-              stroke-width="4"
-              stroke-dashoffset="54"
-              stroke-dasharray="100 100"
-              transform-origin="center"
-              class={isAlt ? "stroke-tinted-700" : "stroke-neutral-800"} />
-          </svg>
-        </AltColor>
-        {#if isLastReply}
-          <AltColor background class="absolute -left-4 h-[20px] w-1" let:isAlt />
-        {:else}
-          <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
-        {/if}
-      {/if}
-      <div class="group relative" class:pt-4={!showParent && !topLevel}>
-        <Card stopPropagation class="relative flex gap-4" on:click={onClick} {interactive}>
-          <div>
-            <Anchor class="text-lg font-bold" on:click={showPerson}>
-              <PersonCircle class="h-10 w-10" pubkey={event.pubkey} />
-            </Anchor>
-          </div>
-          <div class="flex min-w-0 flex-grow flex-col gap-2">
-            <div class="flex min-w-0 flex-shrink flex-col items-start justify-between sm:flex-row">
-              <Anchor type="unstyled" class="mr-4 w-full min-w-0" on:click={showPerson}>
-                <PersonName pubkey={event.pubkey} />
-              </Anchor>
-              <div class="flex items-center gap-3 pt-1 text-xs sm:pt-0">
-                <Anchor
-                  on:click={goToDetail}
-                  class="whitespace-nowrap text-end text-neutral-100"
-                  type="unstyled">
-                  {formatTimestamp(event.created_at)}
-                </Anchor>
-              </div>
-            </div>
-            <div class="-ml-14 flex flex-col gap-2 sm:ml-0">
-              <div class="flex gap-2">
-                {#if showReply}
-                  <small class="text-neutral-100">
-                    <i class="fa fa-code-merge" />
-                    <Anchor underline on:click={goToParent}>View Parent</Anchor>
-                  </small>
-                {/if}
-                {#if showRoot}
-                  <small class="text-neutral-100">
-                    <i class="fa fa-code-pull-request" />
-                    <Anchor underline on:click={goToThread}>View Thread</Anchor>
-                  </small>
-                {/if}
-              </div>
-              {#if hidden && !showHidden}
-                <p class="border-l-2 border-solid border-neutral-600 pl-4 text-neutral-100">
-                  You have hidden this note.
-                  <Anchor
-                    underline
-                    on:click={() => {
-                      showHidden = true
-                    }}>Show</Anchor>
-                </p>
-              {:else}
-                <NoteContent note={event} {showEntire} {showMedia} />
-              {/if}
-              <div class="cy-note-click-target h-[2px]" />
-              {#if !isDraft || event.created_at < $timestamp1 - 45}
-                <NoteActions
-                  note={event}
-                  zapper={$zapper}
-                  {replyCtrl}
-                  {showHidden}
-                  {replies}
-                  {likes}
-                  {zaps}
-                  {muted} />
-              {:else}
-                <NotePending {event} removeDraft={removeDraftCb} />
-              {/if}
-            </div>
-          </div>
-        </Card>
+<div class="group relative pt-4">
+  <Card stopPropagation class="relative" on:click={onClick} {interactive}>
+    {#if note.kind !== 31890}
+      <NoteHeader event={note} {showParent} />
+    {/if}
+    {#if hidden && !showHidden}
+      <p class="border-l-2 border-solid border-neutral-600 pl-4 text-neutral-100">
+        You have hidden this note.
+        <Anchor
+          underline
+          on:click={() => {
+            showHidden = true
+          }}>Show</Anchor>
+      </p>
+    {:else}
+      <div class:!pl-0={note.kind == 31890} class="mt-2 pl-14">
+        <NoteContent {note} {depth} {showEntire} {showMedia} />
       </div>
-
-      {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
-        <div class="relative">
-          <AltColor
-            background
-            class="absolute left-0 top-0 -mr-2 -mt-6 flex h-8 w-8 cursor-pointer items-center
-                   justify-center rounded-full"
-            on:click={() => {
-              collapsed = !collapsed
-            }}>
-            <Popover triggerType="mouseenter">
-              <div slot="trigger">
-                <i
-                  class="fa fa-arrow-up transition-all"
-                  class:text-tinted-500={!collapsed}
-                  class:text-tinted-100={collapsed}
-                  class:rotate-180={collapsed} />
-              </div>
-              <div slot="tooltip">
-                {collapsed ? "Show replies" : "Hide replies"}
-              </div>
-            </Popover>
-          </AltColor>
-        </div>
-      {/if}
-
-      <NoteReply
-        {addDraftToContext}
-        parent={event}
-        showBorder={visibleReplies.length > 0}
-        bind:this={replyCtrl}
-        on:start={() => {
-          replyIsActive = true
-        }}
-        on:reset={() => {
-          replyIsActive = false
-        }} />
-
-      {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
-        <div
-          class="note-children relative ml-4 mt-1 flex flex-col"
-          in:fly|local={{y: 20}}
-          out:slide|local>
-          {#if hiddenReplies.length > 0}
-            <button
-              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
-              on:click={() => {
-                showHiddenReplies = true
-              }}>
-              <i class="fa fa-up-down pr-2 text-sm" />
-              Show {quantify(hiddenReplies.length, "other reply", "more replies")}
-            </button>
-            {#if visibleReplies.length > 0}
-              <AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
-            {/if}
-          {:else if visibleReplies.length > 0}
-            <AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
-          {/if}
-          {#if visibleReplies.length}
-            {#key showHiddenReplies}
-              <div in:fly={{y: 20}}>
-                {#each visibleReplies as r, i (r.id)}
-                  <svelte:self
-                    isLastReply={i === visibleReplies.length - 1}
-                    showParent={false}
-                    showHidden
-                    isDraft={r.id === draftEventId}
-                    removeDraftCb={removeDraft}
-                    note={r}
-                    depth={depth - 1}
-                    {filters}
-                    {anchor} />
-                {/each}
-              </div>
-            {/key}
-          {/if}
-          {#if showHiddenReplies && mutedReplies.length > 0}
-            <button
-              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
-              on:click={() => {
-                showMutedReplies = true
-              }}>
-              <i class="fa fa-up-down pr-2 text-sm" />
-              Show {quantify(mutedReplies.length, "hidden reply", "hidden replies")}
-            </button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </div>
-{:else if showLoading}
-  <Spinner />
-{/if}
+      <div class:!pl-10={note.kind == 31890} class="pl-14 pt-4">
+        <NoteActions event={note} />
+      </div>
+    {/if}
+  </Card>
+  <NoteReply parent={note} />
+</div>
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index a41f5cce1..a64914c2d 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -5,9 +5,20 @@
   import {onMount} from "svelte"
   import {tweened} from "svelte/motion"
   import {derived} from "svelte/store"
-  import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
-  import {repository, signer, tagReactionTo, tagZapSplit, mute, unmute} from "@welshman/app"
+  import {ctx, nth, nthEq, remove, last, sortBy, uniqBy, prop, identity} from "@welshman/lib"
+  import {
+    deriveZapper,
+    deriveZapperForPubkey,
+    repository,
+    signer,
+    tagReactionTo,
+    tagZapSplit,
+    mute,
+    pubkey,
+    unmute,
+  } from "@welshman/app"
   import type {TrustedEvent, SignedEvent} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
   import {
     LOCAL_RELAY_URL,
     toNostrURI,
@@ -15,9 +26,16 @@
     isSignedEvent,
     createEvent,
     getPubkeyTagValues,
+    getLnUrl,
+    zapFromEvent,
+    NOTE,
+    REACTION,
+    ZAP_RESPONSE,
+    getReplyFilters,
+    isChildOf,
   } from "@welshman/util"
   import {fly} from "src/util/transition"
-  import {formatSats} from "src/util/misc"
+  import {formatSats, timestamp1} from "src/util/misc"
   import {quantify, pluralize} from "hurdak"
   import {browser} from "src/partials/state"
   import {showInfo} from "src/partials/Toast.svelte"
@@ -35,6 +53,7 @@
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
   import HandlerCard from "src/app/shared/HandlerCard.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
+  import NotePending from "src/app/shared/NotePending.svelte"
   import {router} from "src/app/util/router"
   import {
     env,
@@ -47,35 +66,36 @@
     getClientTags,
     trackerStore,
     sessionWithMeta,
+    userMutes,
+    sortEventsDesc,
+    load,
   } from "src/engine"
   import {getHandlerKey, readHandlers, displayHandler} from "src/domain"
+  import {openReplies} from "src/app/state"
+  import {isLike} from "src/util/nostr"
 
-  export let note: TrustedEvent
-  export let muted
-  export let replyCtrl
-  export let showHidden
-  export let replies, likes, zaps
-  export let zapper
+  export let event: TrustedEvent
+  export let showHidden = false
 
-  const signedEvent = asSignedEvent(note as any)
+  const signedEvent = asSignedEvent(event as any)
   const nevent = nip19.neventEncode({
-    id: note.id,
-    kind: note.kind,
-    author: note.pubkey,
-    relays: ctx.app.router.Event(note).getUrls(),
+    id: event.id,
+    kind: event.kind,
+    author: event.pubkey,
+    relays: ctx.app.router.Event(event).getUrls(),
   })
 
   const interpolate = (a, b) => t => a + Math.round((b - a) * t)
-  const mentions = getPubkeyTagValues(note.tags)
+  const mentions = getPubkeyTagValues(event.tags)
   const likesCount = tweened(0, {interpolate})
   const zapsTotal = tweened(0, {interpolate})
   const repliesCount = tweened(0, {interpolate})
-  const kindHandlers = deriveHandlersForKind(note.kind)
-  const handlerId = String(note.tags.find(nthEq(0, "client"))?.[2] || "")
+  const kindHandlers = deriveHandlersForKind(event.kind)
+  const handlerId = String(event.tags.find(nthEq(0, "client"))?.[2] || "")
   const handlerEvent = handlerId ? repository.getEvent(handlerId) : null
   const noteActions = getSetting("note_actions")
   const seenOn = derived(trackerStore, $t =>
-    remove(LOCAL_RELAY_URL, Array.from($t.getRelays(note.id))),
+    remove(LOCAL_RELAY_URL, Array.from($t.getRelays(event.id))),
   )
 
   const setView = v => {
@@ -92,20 +112,21 @@
 
   const os = browser.os?.name?.toLowerCase()
 
-  const createLabel = () => router.at("notes").of(note.id).at("label").open()
+  const createLabel = () => router.at("notes").of(event.id).at("label").open()
 
-  const quote = () => router.at("notes/create").cx({quote: note}).open()
+  const quote = () => router.at("notes/create").cx({quote: event}).open()
 
-  const report = () => router.at("notes").of(note.id).at("report").open()
+  const report = () => router.at("notes").of(event.id).at("report").open()
 
-  const deleteNote = () => router.at("notes").of(note.id).at("delete").qp({kind: note.kind}).open()
+  const deleteNote = () =>
+    router.at("notes").of(event.id).at("delete").qp({kind: event.kind}).open()
 
   const react = async content => {
-    if (isSignedEvent(note)) {
-      publish({event: note, relays: ctx.app.router.PublishEvent(note).getUrls()})
+    if (isSignedEvent(event)) {
+      publish({event: event, relays: ctx.app.router.PublishEvent(event).getUrls()})
     }
 
-    const tags = [...tagReactionTo(note), ...getClientTags()]
+    const tags = [...tagReactionTo(event), ...getClientTags()]
     const template = createEvent(7, {content, tags})
     await signAndPublish(template)
   }
@@ -115,23 +136,23 @@
   }
 
   const startZap = () => {
-    const zapTags = note.tags.filter(nthEq(0, "zap"))
-    const defaultSplit = tagZapSplit(note.pubkey)
+    const zapTags = event.tags.filter(nthEq(0, "zap"))
+    const defaultSplit = tagZapSplit(event.pubkey)
     const splits = zapTags.length > 0 ? zapTags : [defaultSplit]
 
     router
       .at("zap")
       .qp({
         splits,
-        id: note.id,
-        anonymous: Boolean(note.wrap),
+        id: event.id,
+        anonymous: Boolean(event.wrap),
       })
       .open()
   }
 
   const broadcast = () => {
     publish({
-      event: asSignedEvent(note as SignedEvent),
+      event: asSignedEvent(event as SignedEvent),
       relays: ctx.app.router.FromUser().getUrls(),
     })
 
@@ -150,32 +171,51 @@
       return 0
     }, handler.event.tags)
 
-    const entity = last(templateTag) === "note" ? nip19.noteEncode(note.id) : nevent
+    const entity = last(templateTag) === "note" ? nip19.noteEncode(event.id) : nevent
 
     window.open(templateTag[1].replace("<bech32>", entity))
   }
 
+  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
+
+  $: children = $context.filter(e => isChildOf(e, event))
+
   let view
   let actions = []
   let handlersShown = false
 
+  $: lnurl = getLnUrl(event.tags?.find(nthEq(0, "zap"))?.[1] || "")
+  $: zapper = lnurl ? deriveZapper(lnurl) : deriveZapperForPubkey(event.pubkey)
+  $: muted = $userMutes.has(event.id)
+  // Split out likes, uniqify by pubkey since a like can be duplicated across groups
+  $: likes = uniqBy(prop("pubkey"), children.filter(isLike))
+
+  // Split out zaps
+  $: zaps = children
+    .filter(e => e.kind === 9735)
+    .map(e => ($zapper ? zapFromEvent(e, $zapper) : null))
+    .filter(identity)
+  $: replies = sortEventsDesc(children.filter(e => e.kind == NOTE))
+
   $: disableActions = !$signer || (muted && !showHidden)
-  $: like = likes.find(e => e.pubkey === $sessionWithMeta?.pubkey)
+  $: liked = likes.find(e => e.pubkey === $sessionWithMeta?.pubkey)
   $: $likesCount = likes.length
-  $: zap = zaps.find(e => e.request.pubkey === $sessionWithMeta?.pubkey)
+  $: zapped = zaps.find(e => e.request.pubkey === $sessionWithMeta?.pubkey)
   $: $zapsTotal = sum(pluck("invoiceAmount", zaps)) / 1000
-  $: canZap = zapper?.allowsNostr && note.pubkey !== $sessionWithMeta?.pubkey
-  $: reply = replies.find(e => e.pubkey === $sessionWithMeta?.pubkey)
+  $: canZap = $zapper?.allowsNostr && event.pubkey !== $sessionWithMeta?.pubkey
+  $: replied = replies.find(e => e.pubkey === $sessionWithMeta?.pubkey)
   $: $repliesCount = replies.length
-  $: handlers = $kindHandlers.filter(
-    h =>
-      h.name.toLowerCase() !== "coracle" &&
-      h.event.tags.some(
-        t =>
-          ["web", os].includes(t[0]) &&
-          (t.length === 2 || ["note", "nevent", ""].includes(last(t))),
-      ),
-  )
+  $: handlers =
+    event.kind != 1 &&
+    $kindHandlers.filter(
+      h =>
+        h.name.toLowerCase() !== "coracle" &&
+        h.event.tags.some(
+          t =>
+            ["web", os].includes(t[0]) &&
+            (t.length == 2 || ["note", "nevent", ""].includes(last(t))),
+        ),
+    )
 
   $: {
     actions = []
@@ -186,19 +226,23 @@
       actions.push({label: "Tag", icon: "tag", onClick: createLabel})
 
       if (muted) {
-        actions.push({label: "Unmute", icon: "microphone", onClick: () => unmute(note.id)})
+        actions.push({label: "Unmute", icon: "microphone", onClick: () => unmute(event.id)})
       } else {
-        actions.push({label: "Mute", icon: "microphone-slash", onClick: () => mute(["e", note.id])})
+        actions.push({
+          label: "Mute",
+          icon: "microphone-slash",
+          onClick: () => mute(["e", event.id]),
+        })
       }
 
       actions.push({label: "Report", icon: "triangle-exclamation", onClick: report})
     }
 
-    if (env.PLATFORM_RELAYS.length === 0 && isSignedEvent(note)) {
+    if (env.PLATFORM_RELAYS.length === 0 && isSignedEvent(event)) {
       actions.push({label: "Broadcast", icon: "rss", onClick: broadcast})
     }
 
-    if (note.pubkey === $sessionWithMeta?.pubkey) {
+    if (event.pubkey === $sessionWithMeta?.pubkey) {
       actions.push({
         label: "Delete",
         icon: "trash",
@@ -214,181 +258,207 @@
   }
 
   onMount(() => {
-    loadPubkeys(note.tags.filter(nthEq(0, "zap")).map(nth(1)))
+    loadPubkeys(event.tags.filter(nthEq(0, "zap")).map(nth(1)))
+
+    const actions = getSetting("note_actions")
+    const kinds = []
+
+    if (actions.includes("replies")) {
+      kinds.push(NOTE)
+    }
+
+    if (actions.includes("reactions")) {
+      kinds.push(REACTION)
+    }
+
+    if (env.ENABLE_ZAPS && actions.includes("zaps")) {
+      kinds.push(ZAP_RESPONSE)
+    }
+
+    load({
+      relays: ctx.app.router.Replies(event).getUrls(),
+      filters: getReplyFilters([event], {kinds}),
+    })
   })
 </script>
 
-<button
-  tabindex="-1"
-  type="button"
-  class="flex justify-between text-neutral-100"
-  on:click|stopPropagation>
-  <div class="flex gap-8 text-sm">
-    <button
-      class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-        "pointer-events-none opacity-50": disableActions,
-      })}
-      on:click={replyCtrl?.start}>
-      <Icon icon="message" color={reply ? "accent" : "neutral-100"} />
-      {#if $repliesCount > 0 && noteActions.includes("replies")}
-        <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
-      {/if}
-    </button>
-    {#if env.ENABLE_ZAPS && noteActions.includes("zaps")}
+{#if event.created_at > $timestamp1 - 45 && event.pubkey === $pubkey}
+  <NotePending {event} />
+{:else}
+  <button
+    tabindex="-1"
+    type="button"
+    class="flex w-full justify-between text-neutral-100"
+    on:click|stopPropagation>
+    <div class="flex gap-8 text-sm">
       <button
         class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-          "pointer-events-none opacity-50": disableActions || !canZap,
+          "pointer-events-none opacity-50": disableActions,
         })}
-        on:click={startZap}>
-        <Icon icon="bolt" color={zap ? "accent" : "neutral-100"} />
-        {#if $zapsTotal > 0}
-          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px"
-            >{formatSats($zapsTotal)}</span>
+        on:click={_ => {
+          $openReplies[event.id] = true
+        }}>
+        <Icon icon="message" color={replied ? "accent" : "neutral-100"} />
+        {#if $repliesCount > 0 && noteActions.includes("replies")}
+          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
         {/if}
       </button>
-    {/if}
-    {#if noteActions.includes("reactions")}
-      <button
-        class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-          "pointer-events-none opacity-50":
-            disableActions || note.pubkey === $sessionWithMeta?.pubkey,
-        })}
-        on:click={() => (like ? deleteReaction(like) : react("+"))}>
-        <Icon
-          icon="heart"
-          color={like ? "accent" : "neutral-100"}
-          class={cx("cursor-pointer", {
-            "fa-beat fa-beat-custom": like,
-          })} />
-        {#if $likesCount > 0}
-          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$likesCount}</span>
-        {/if}
-      </button>
-    {/if}
-    {#if handlers.length > 0 && noteActions.includes("recommended_apps")}
-      <Popover theme="transparent" opts={{hideOnClick: true}}>
+      {#if env.ENABLE_ZAPS && noteActions.includes("zaps")}
         <button
-          slot="trigger"
-          class="relative flex hidden h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
-          <i class="fa fa-up-right-from-square fa-sm" />
+          class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
+            "pointer-events-none opacity-50": disableActions || !canZap,
+          })}
+          on:click={startZap}>
+          <Icon icon="bolt" color={zapped ? "accent" : "neutral-100"} />
+          {#if $zapsTotal > 0}
+            <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px"
+              >{formatSats($zapsTotal)}</span>
+          {/if}
         </button>
-        <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
-          <Menu>
-            <MenuItem inert class="bg-neutral-900">Open with:</MenuItem>
-            {#each handlers as handler}
-              <MenuItem
-                class="flex h-12 items-center justify-between gap-2"
-                on:click={() => openWithHandler(handler)}>
-                <div class="flex gap-2">
-                  <ImageCircle class="h-5 w-5" src={handler.image} />
-                  {handler.name}
-                </div>
-                {#if handler.recommendations.length > 0}
-                  <WotScore accent score={handler.recommendations.length} />
-                {/if}
-              </MenuItem>
-            {/each}
-          </Menu>
-        </div>
-      </Popover>
-    {/if}
-  </div>
-  <div class="flex scale-90 items-center gap-2">
-    {#if note.wrap}
-      <div
-        class="staatliches flex h-6 items-center gap-1 rounded bg-neutral-800 px-2 text-neutral-100 transition-colors dark:bg-neutral-600 dark:hover:bg-neutral-500">
-        <i class="fa fa-lock text-xs sm:text-accent" />
-        <span class="hidden sm:inline">Encrypted</span>
-      </div>
-    {/if}
-    {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
-      <div
-        class="staatliches hidden cursor-pointer rounded bg-neutral-800 px-2 text-neutral-100 transition-colors hover:bg-neutral-700 dark:bg-neutral-600 dark:hover:bg-neutral-500 sm:block"
-        on:click={() => setView("info")}>
-        <span class="text-accent">{$seenOn.length}</span>
-        {pluralize($seenOn.length, "relay")}
-      </div>
-    {/if}
-    <OverflowMenu {actions} />
-  </div>
-</button>
-
-{#if view}
-  <Modal onEscape={() => setView(null)}>
-    {#if view === "info"}
-      {#if zaps.length > 0}
-        <h1 class="staatliches text-2xl">Zapped By</h1>
-        <div class="grid grid-cols-2 gap-2">
-          {#each zaps as zap}
-            <div class="flex flex-col gap-1">
-              <PersonBadge pubkey={zap.request.pubkey} />
-              <span class="ml-16 text-sm text-neutral-600"
-                >{formatSats(zap.invoiceAmount / 1000)} sats</span>
-            </div>
-          {/each}
-        </div>
       {/if}
-      {#if likes.length > 0}
-        <h1 class="staatliches text-2xl">Liked By</h1>
-        <div class="grid grid-cols-2 gap-2">
-          {#each likes as like}
-            <PersonBadge pubkey={like.pubkey} />
-          {/each}
-        </div>
+      {#if noteActions.includes("reactions")}
+        <button
+          class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
+            "pointer-events-none opacity-50":
+              disableActions || event.pubkey === $sessionWithMeta?.pubkey,
+          })}
+          on:click={() => (liked ? deleteReaction(liked) : react("+"))}>
+          <Icon
+            icon="heart"
+            color={liked ? "accent" : "neutral-100"}
+            class={cx("cursor-pointer", {
+              "fa-beat fa-beat-custom": liked,
+            })} />
+          {#if $likesCount > 0}
+            <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$likesCount}</span>
+          {/if}
+        </button>
       {/if}
-      {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
-        <h1 class="staatliches text-2xl">Relays</h1>
-        <p>This note was found on {quantify($seenOn.length, "relay")} below.</p>
-        <div class="flex flex-col gap-2">
-          {#each $seenOn as url}
-            <RelayCard {url} />
-          {/each}
+      {#if handlers.length > 0 && noteActions.includes("recommended_apps")}
+        <Popover theme="transparent" opts={{hideOnClick: true}}>
+          <button
+            slot="trigger"
+            class="relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
+            <Icon icon="openwith" color="neutral-100" class="cursor-pointer" />
+          </button>
+          <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
+            <Menu>
+              <MenuItem inert class="bg-neutral-900">Open with:</MenuItem>
+              {#each handlers as handler}
+                <MenuItem
+                  class="flex h-12 items-center justify-between gap-2"
+                  on:click={() => openWithHandler(handler)}>
+                  <div class="flex gap-2">
+                    <ImageCircle class="h-5 w-5" src={handler.image} />
+                    {handler.name}
+                  </div>
+                  {#if handler.recommendations.length > 0}
+                    <WotScore accent score={handler.recommendations.length} />
+                  {/if}
+                </MenuItem>
+              {/each}
+            </Menu>
+          </div>
+        </Popover>
+      {/if}
+    </div>
+    <div class="flex scale-90 items-center gap-2">
+      {#if event.wrap}
+        <div
+          class="staatliches flex h-6 items-center gap-1 rounded bg-neutral-800 px-2 text-neutral-100 transition-colors dark:bg-neutral-600 dark:hover:bg-neutral-500">
+          <i class="fa fa-lock text-xs sm:text-accent" />
+          <span class="hidden sm:inline">Encrypted</span>
         </div>
       {/if}
-      {#if mentions.length > 0}
-        <h1 class="staatliches text-2xl">In this conversation</h1>
-        <p>{quantify(mentions.length, "person is", "people are")} tagged in this note.</p>
-        <div class="grid grid-cols-2 gap-2">
-          {#each mentions as pubkey}
-            <PersonBadge {pubkey} />
-          {/each}
+      {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
+        <div
+          class="staatliches hidden cursor-pointer rounded bg-neutral-800 px-2 text-neutral-100 transition-colors hover:bg-neutral-700 dark:bg-neutral-600 dark:hover:bg-neutral-500 sm:block"
+          on:click={() => setView("info")}>
+          <span class="text-accent">{$seenOn.length}</span>
+          {pluralize($seenOn.length, "relay")}
         </div>
       {/if}
-      {#if handlers.length > 0 || handlerEvent}
-        <h1 class="staatliches text-2xl">Apps</h1>
-        {#if handlerEvent}
-          {@const [handler] = readHandlers(handlerEvent)}
-          {#if handler}
-            <p>This note was published using {displayHandler(handler)}.</p>
-            <HandlerCard {handler} />
-          {/if}
+      <OverflowMenu {actions} />
+    </div>
+  </button>
+
+  {#if view}
+    <Modal onEscape={() => setView(null)}>
+      {#if view === "info"}
+        {#if zaps.length > 0}
+          <h1 class="staatliches text-2xl">Zapped By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each zaps as zap}
+              <div class="flex flex-col gap-1">
+                <PersonBadge pubkey={zap.request.pubkey} />
+                <span class="ml-16 text-sm text-neutral-600"
+                  >{formatSats(zap.invoiceAmount / 1000)} sats</span>
+              </div>
+            {/each}
+          </div>
         {/if}
-        {#if handlers.length > 0}
-          <div class="flex justify-between">
-            <p>
-              This note can also be viewed using {quantify(handlers.length, "other nostr app")}.
-            </p>
-            {#if handlersShown}
-              <Anchor underline on:click={hideHandlers}>Hide apps</Anchor>
-            {:else}
-              <Anchor underline on:click={showHandlers}>Show apps</Anchor>
-            {/if}
+        {#if likes.length > 0}
+          <h1 class="staatliches text-2xl">Liked By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each likes as like}
+              <PersonBadge pubkey={like.pubkey} />
+            {/each}
+          </div>
+        {/if}
+        {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
+          <h1 class="staatliches text-2xl">Relays</h1>
+          <p>This note was found on {quantify($seenOn.length, "relay")} below.</p>
+          <div class="flex flex-col gap-2">
+            {#each $seenOn as url}
+              <RelayCard {url} />
+            {/each}
+          </div>
+        {/if}
+        {#if mentions.length > 0}
+          <h1 class="staatliches text-2xl">In this conversation</h1>
+          <p>{quantify(mentions.length, "person is", "people are")} tagged in this note.</p>
+          <div class="grid grid-cols-2 gap-2">
+            {#each mentions as pubkey}
+              <PersonBadge {pubkey} />
+            {/each}
           </div>
-          {#if handlersShown}
-            <div in:fly={{y: 20}}>
-              <FlexColumn>
-                {#each handlers as handler (getHandlerKey(handler))}
-                  <HandlerCard {handler} />
-                {/each}
-              </FlexColumn>
+        {/if}
+        {#if handlers.length > 0 || handlerEvent}
+          <h1 class="staatliches text-2xl">Apps</h1>
+          {#if handlerEvent}
+            {@const [handler] = readHandlers(handlerEvent)}
+            {#if handler}
+              <p>This note was published using {displayHandler(handler)}.</p>
+              <HandlerCard {handler} />
+            {/if}
+          {/if}
+          {#if handlers.length > 0}
+            <div class="flex justify-between">
+              <p>
+                This note can also be viewed using {quantify(handlers.length, "other nostr app")}.
+              </p>
+              {#if handlersShown}
+                <Anchor underline on:click={hideHandlers}>Hide apps</Anchor>
+              {:else}
+                <Anchor underline on:click={showHandlers}>Show apps</Anchor>
+              {/if}
             </div>
+            {#if handlersShown}
+              <div in:fly={{y: 20}}>
+                <FlexColumn>
+                  {#each handlers as handler (getHandlerKey(handler))}
+                    <HandlerCard {handler} />
+                  {/each}
+                </FlexColumn>
+              </div>
+            {/if}
           {/if}
         {/if}
+        <h1 class="staatliches text-2xl">Details</h1>
+        <CopyValue label="Link" value={toNostrURI(nevent)} />
+        <CopyValue label="Event ID" encode={nip19.noteEncode} value={event.id} />
+        <CopyValue label="Event JSON" value={JSON.stringify(signedEvent)} />
       {/if}
-      <h1 class="staatliches text-2xl">Details</h1>
-      <CopyValue label="Link" value={toNostrURI(nevent)} />
-      <CopyValue label="Event ID" encode={nip19.noteEncode} value={note.id} />
-      <CopyValue label="Event JSON" value={JSON.stringify(signedEvent)} />
-    {/if}
-  </Modal>
+    </Modal>
+  {/if}
 {/if}
diff --git a/src/app/shared/NoteContent.svelte b/src/app/shared/NoteContent.svelte
index eea2a77e6..4899aeb01 100644
--- a/src/app/shared/NoteContent.svelte
+++ b/src/app/shared/NoteContent.svelte
@@ -27,7 +27,6 @@
   export let note
   export let depth = 0
   export let showEntire = false
-  export let expandable = true
   export let showMedia = getSetting("show_media")
 
   let warning = getSetting("hide_sensitive") ? getContentWarning(note) : null
@@ -85,7 +84,7 @@
   {:else if CUSTOM_LIST_KINDS.includes(note.kind)}
     <NoteContentKindList {note} />
   {:else}
-    <NoteContentKind1 {note} {showEntire} {showMedia} {expandable} {depth}>
+    <NoteContentKind1 {note} {showEntire} {showMedia} {depth} expandable>
       <div slot="note-content" let:quote>
         <svelte:self depth={depth + 1} note={quote} />
       </div>
diff --git a/src/app/shared/NoteHeader.svelte b/src/app/shared/NoteHeader.svelte
new file mode 100644
index 000000000..909502d33
--- /dev/null
+++ b/src/app/shared/NoteHeader.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import {ctx} from "@welshman/lib"
+  import {getAncestorTagValues, getIdOrAddress, type TrustedEvent} from "@welshman/util"
+  import Anchor from "src/partials/Anchor.svelte"
+  import {formatTimestamp} from "src/util/misc"
+  import PersonCircle from "src/app/shared/PersonCircle.svelte"
+  import PersonName from "src/app/shared/PersonName.svelte"
+  import {router} from "src/app/util"
+
+  export let event: TrustedEvent
+  export let showParent = true
+  export let anchor = null
+
+  $: ancestors = getAncestorTagValues(event.tags || [])
+  $: reply = ancestors.replies[0]
+  $: root = ancestors.roots[0]
+
+  $: showReply = reply && !ancestors.replies.includes(anchor) && showParent
+  $: showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent
+
+  const showPerson = () => router.at("people").of(event.pubkey).open()
+
+  const goToDetail = () =>
+    router
+      .at("notes")
+      .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
+      .push()
+
+  const goToParent = () =>
+    router
+      .at("notes")
+      .of(reply, {relays: ctx.app.router.EventParents(event).getUrls()})
+      .open()
+
+  const goToThread = () =>
+    router
+      .at("notes")
+      .of(getIdOrAddress(event), {relays: ctx.app.router.EventRoots(event).getUrls()})
+      .at("thread")
+      .open()
+</script>
+
+<div class="flex gap-4">
+  <div>
+    <Anchor class="text-lg font-bold" on:click={showPerson}>
+      <PersonCircle class="h-10 w-10" pubkey={event.pubkey} />
+    </Anchor>
+  </div>
+  <div class="flex min-w-0 flex-grow flex-col gap-2">
+    <div class="flex min-w-0 flex-shrink flex-col items-start justify-between sm:flex-row">
+      <Anchor type="unstyled" class="mr-4 w-full min-w-0" on:click={showPerson}>
+        <PersonName pubkey={event.pubkey} />
+      </Anchor>
+      <div class="flex items-center gap-3 pt-1 text-xs sm:pt-0">
+        <Anchor
+          on:click={goToDetail}
+          class="whitespace-nowrap text-end text-neutral-100"
+          type="unstyled">
+          {formatTimestamp(event.created_at)}
+        </Anchor>
+      </div>
+    </div>
+    <div class="-ml-14 flex flex-col gap-2 sm:ml-0">
+      <div class="flex gap-2">
+        {#if showReply}
+          <small class="text-neutral-100">
+            <i class="fa fa-code-merge" />
+            <Anchor underline on:click={goToParent}>View Parent</Anchor>
+          </small>
+        {/if}
+        {#if showRoot}
+          <small class="text-neutral-100">
+            <i class="fa fa-code-pull-request" />
+            <Anchor underline on:click={goToThread}>View Thread</Anchor>
+          </small>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 8b74a7ee6..b154cfeb9 100644
--- a/src/app/shared/NotePending.svelte
+++ b/src/app/shared/NotePending.svelte
@@ -18,17 +18,19 @@
   import {thunks, type Thunk} from "@welshman/app"
   import {PublishStatus} from "@welshman/net"
   import {now} from "@welshman/signer"
-  import {LOCAL_RELAY_URL, type SignedEvent} from "@welshman/util"
+  import {getAncestorTagValues, LOCAL_RELAY_URL, type TrustedEvent} from "@welshman/util"
   import {tweened} from "svelte/motion"
   import {userSettings} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import {timestamp1} from "src/util/misc"
+  import {openReplies} from "../state"
 
   const rendered = now()
 
-  export let event: SignedEvent
-  export let removeDraft: () => void
+  export let event: TrustedEvent
 
+  $: ancestors = getAncestorTagValues(event.tags || [])
+  $: parent = ancestors.replies[0]
   $: thunk = $thunks[event.id] as Thunk
 
   $: status = thunk?.status
@@ -42,7 +44,7 @@
   ).length
   $: timeout = statuses.filter(s => s.status === PublishStatus.Timeout).length
   $: success = statuses.filter(s => s.status === PublishStatus.Success).length
-  $: total = relays.length || 0
+  $: total = relays?.length || 0
 
   const completed = tweened(0)
 
@@ -88,6 +90,9 @@
       >Sending reply in {rendered + Math.ceil($userSettings.send_delay / 1000) - $timestamp1} seconds</span>
     <button
       class="ml-2 cursor-pointer rounded-md bg-neutral-100-d px-4 py-1 text-tinted-700-d"
-      on:click={removeDraft}>Cancel</button>
+      on:click={() => {
+        thunk.controller.abort()
+        $openReplies[parent] = true
+      }}>Cancel</button>
   {/if}
 </div>
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index f28a514e6..f153ea5fd 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -1,45 +1,39 @@
 <script lang="ts">
-  import {session, displayProfileByPubkey, tagReplyTo, tagPubkey} from "@welshman/app"
+  import {displayProfileByPubkey, session, tagPubkey, tagReplyTo} from "@welshman/app"
   import {ctx} from "@welshman/lib"
   import {getPubkeyTagValues, createEvent, uniqTags} from "@welshman/util"
-  import {writable, type Writable} from "svelte/store"
-  import {createEventDispatcher} from "svelte"
+  import {uniq, without} from "ramda"
   import {Editor} from "svelte-tiptap"
-  import {without, uniq} from "ramda"
-  import {slide} from "src/util/transition"
-  import AltColor from "src/partials/AltColor.svelte"
-  import Chip from "src/partials/Chip.svelte"
+  import {writable, type Writable} from "svelte/store"
   import {getEditorOptions} from "src/app/editor"
   import Compose from "src/app/shared/Compose.svelte"
-  import NsecWarning from "src/app/shared/NsecWarning.svelte"
   import NoteOptions from "src/app/shared/NoteOptions.svelte"
-  import {drafts} from "src/app/state"
-  import {publish, tagsFromContent, getClientTags, sign, userSettings} from "src/engine"
+  import NsecWarning from "src/app/shared/NsecWarning.svelte"
+  import {drafts, openReplies} from "src/app/state"
+  import {getClientTags, publish, sign, tagsFromContent, userSettings} from "src/engine"
+  import AltColor from "src/partials/AltColor.svelte"
+  import Chip from "src/partials/Chip.svelte"
+  import {slide} from "src/util/transition"
 
   export let parent
-  export let addDraftToContext
   export let showBorder = false
   export let forceOpen = false
 
-  const dispatch = createEventDispatcher()
+  let showOptions = false
+
   const nsecWarning = writable(null)
 
-  let container, loading
-  let isOpen = false
-  let showOptions = false
-  let mentions = []
+  $: mentions = without(
+    [$session?.pubkey],
+    uniq([parent.pubkey, ...getPubkeyTagValues(parent.tags)]),
+  )
+
+  let loading
   let options = {warning: "", anonymous: false}
   let editorElement: HTMLElement
   let editor: Editor
   let editorLoading: Writable<boolean>
 
-  export const start = () => {
-    dispatch("start")
-
-    isOpen = true
-    mentions = without([$session.pubkey], uniq([parent.pubkey, ...getPubkeyTagValues(parent.tags)]))
-  }
-
   const bypassNsecWarning = () => {
     nsecWarning.set(null)
     send({skipNsecWarning: true})
@@ -68,20 +62,13 @@
     drafts.delete(parent.id)
   }
 
-  const reset = () => {
-    dispatch("reset")
-
-    isOpen = false
-    mentions = []
-  }
-
   const removeMention = pubkey => {
     mentions = without([pubkey], mentions)
   }
 
   const send = async ({skipNsecWarning = false} = {}) => {
     if ($editorLoading) return
-
+    saveDraft()
     const content = editor.getText({blockSeparator: "\n"}).trim()
 
     if (!content) return
@@ -115,23 +102,18 @@
       delay: $userSettings.send_delay,
     })
 
-    addDraftToContext(event, () => thunk.controller.abort())
-    isOpen = false
+    $openReplies[parent.id] = false
     loading = false
 
     thunk.result.then(() => {
       clearDraft()
-      reset()
     })
   }
 
   const onBodyClick = e => {
-    const target = e.target as HTMLElement
+    saveDraft()
 
-    if (isOpen && container && !container.contains(target)) {
-      saveDraft()
-      reset()
-    }
+    $openReplies = {}
   }
 
   const createEditor = () => {
@@ -154,6 +136,8 @@
       createEditor()
     }
   }
+
+  $: isOpen = $openReplies[parent?.id]
 </script>
 
 <svelte:body on:click={onBodyClick} />
@@ -166,11 +150,7 @@
     {#if showBorder}
       <AltColor background class="absolute -top-4 z-none h-5 w-1" />
     {/if}
-    <div
-      transition:slide|local
-      class="note-reply relative my-2 gap-1"
-      bind:this={container}
-      on:click|stopPropagation>
+    <div transition:slide|local class="note-reply relative my-2 gap-1" on:click|stopPropagation>
       <AltColor background class="overflow-hidden rounded">
         <div class="p-3 text-neutral-100" class:rounded-b={mentions.length === 0}>
           <Compose bind:element={editorElement} {editor}>
diff --git a/src/app/shared/PersonCollections.svelte b/src/app/shared/PersonCollections.svelte
index 77fd76b8f..17b0ac9b6 100644
--- a/src/app/shared/PersonCollections.svelte
+++ b/src/app/shared/PersonCollections.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Chip from "src/partials/Chip.svelte"
   import Subheading from "src/partials/Subheading.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {loadLabels, deriveCollections} from "src/engine"
 
   export let pubkey
@@ -30,6 +30,6 @@
 {#if selection}
   <Subheading>#{selection.name}</Subheading>
   {#each selection.ids as id (id)}
-    <Note note={{id}} />
+    <FeedItem note={{id}} />
   {/each}
 {/if}
diff --git a/src/app/state.ts b/src/app/state.ts
index 21dad6943..25f5dcc9d 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -32,6 +32,8 @@ import {
 
 export const drafts = new Map<string, string>()
 
+export const openReplies = writable<{[key: string]: boolean}>({})
+
 export const menuIsOpen = writable(false)
 
 export const searchTerm = writable("")
diff --git a/src/app/views/NoteDetail.svelte b/src/app/views/NoteDetail.svelte
index 044935d57..628ce0c28 100644
--- a/src/app/views/NoteDetail.svelte
+++ b/src/app/views/NoteDetail.svelte
@@ -3,7 +3,7 @@
   import {fly} from "src/util/transition"
   import {getIdOrAddress} from "@welshman/util"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import Thread from "src/app/shared/FeedItem.svelte"
   import {deriveEvent} from "src/engine"
 
   export let id = null
@@ -16,7 +16,7 @@
 
 {#if $event}
   <div in:fly={{y: 20}}>
-    <Note showLoading anchor={getIdOrAddress($event)} note={$event} {depth} {relays} />
+    <Thread showLoading anchor={getIdOrAddress($event)} note={$event} {depth} {relays} />
   </div>
 {:else}
   <Spinner />
diff --git a/src/app/views/NotificationMention.svelte b/src/app/views/NotificationMention.svelte
index fc616b0d3..007f953a7 100644
--- a/src/app/views/NotificationMention.svelte
+++ b/src/app/views/NotificationMention.svelte
@@ -4,7 +4,7 @@
   import {getAncestorTagValues} from "@welshman/util"
   import {formatTimestamp} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import PeopleAction from "src/app/shared/PeopleAction.svelte"
   import type {Notification} from "src/engine"
   import {deriveEvent} from "src/engine"
@@ -22,7 +22,7 @@
     <small>{formatTimestamp(timestamp)}</small>
   </div>
   {#if $event}
-    <Note
+    <FeedItem
       topLevel
       showLoading
       depth={1}
diff --git a/src/app/views/NotificationReplies.svelte b/src/app/views/NotificationReplies.svelte
index 6528ecd77..1e160b7c5 100644
--- a/src/app/views/NotificationReplies.svelte
+++ b/src/app/views/NotificationReplies.svelte
@@ -6,7 +6,7 @@
   import {formatTimestamp} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
   import PeopleAction from "src/app/shared/PeopleAction.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import type {Notification} from "src/engine"
   import {deriveEvent} from "src/engine"
 
@@ -27,7 +27,7 @@
     <small>{formatTimestamp(timestamp)}</small>
   </div>
   {#if $event}
-    <Note topLevel depth={1} note={$event} filters={[{ids: pluck("id", interactions)}]} />
+    <FeedItem topLevel depth={1} note={$event} filters={[{ids: pluck("id", interactions)}]} />
   {:else}
     <Spinner />
   {/if}
diff --git a/src/app/views/RelayList.svelte b/src/app/views/RelayList.svelte
index 9e6588fd6..42960f76b 100644
--- a/src/app/views/RelayList.svelte
+++ b/src/app/views/RelayList.svelte
@@ -25,7 +25,7 @@
   import Subheading from "src/partials/Subheading.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {load, userFollows, sortEventsDesc, joinRelay} from "src/engine"
 
   const tabs = ["search", "reviews"]
@@ -172,7 +172,7 @@
   <Tabs {tabs} {activeTab} {setActiveTab} />
   {#if activeTab === "reviews"}
     {#each reviews.slice(0, limit) as review (review.id)}
-      <Note note={review} />
+      <FeedItem note={review} />
     {/each}
   {:else}
     <Input
diff --git a/src/app/views/ReportCreate.svelte b/src/app/views/ReportCreate.svelte
index 26d6b0373..eb080e3b0 100644
--- a/src/app/views/ReportCreate.svelte
+++ b/src/app/views/ReportCreate.svelte
@@ -11,7 +11,7 @@
   import Field from "src/partials/Field.svelte"
   import Textarea from "src/partials/Textarea.svelte"
   import PersonLink from "src/app/shared/PersonLink.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {router} from "src/app/util/router"
   import {publish} from "src/engine"
 
@@ -62,7 +62,7 @@
         with the report.
       </div>
     </Field>
-    <Note note={event} showMedia={false} />
+    <FeedItem note={event} showMedia={false} />
     <Anchor button tag="button" type="submit">Save</Anchor>
   </FlexColumn>
 </form>
diff --git a/src/app/views/ThreadDetail.svelte b/src/app/views/ThreadDetail.svelte
index 6100f9d76..e1acd43d0 100644
--- a/src/app/views/ThreadDetail.svelte
+++ b/src/app/views/ThreadDetail.svelte
@@ -4,7 +4,7 @@
   import {ThreadLoader} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {deriveEvent} from "src/engine"
 
   export let id = null
@@ -34,10 +34,10 @@
 {#if loading}
   <Spinner />
 {:else}
-  <Note note={$root} />
+  <FeedItem note={$root} />
   {#if showAncestors}
     {#each $ancestors as ancestor (ancestor.id)}
-      <Note topLevel showParent={false} note={ancestor} />
+      <FeedItem topLevel showParent={false} note={ancestor} />
     {/each}
   {:else if $ancestors.length > 0}
     <Anchor
@@ -49,6 +49,6 @@
       Show {quantify($ancestors.length, "other note")}
     </Anchor>
   {/if}
-  <Note topLevel showParent={false} note={$parent} />
-  <Note topLevel showParent={false} note={$event} depth={2} />
+  <FeedItem topLevel showParent={false} note={$parent} />
+  <FeedItem topLevel showParent={false} note={$event} depth={2} />
 {/if}
diff --git a/src/partials/Icon.svelte b/src/partials/Icon.svelte
index 1dd98bf43..cd3f5d97d 100644
--- a/src/partials/Icon.svelte
+++ b/src/partials/Icon.svelte
@@ -8,7 +8,12 @@
   $: colorValue = $themeColors[color]
 </script>
 
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" class={cx("inline", $$props.class)}>
+<svg
+  width="17"
+  height="16"
+  viewBox={icon == "openwith" ? "0 0 25 27" : "0 0 17 16"}
+  fill="none"
+  class={cx("inline", $$props.class)}>
   {#if icon === "bolt"}
     <path
       stroke={colorValue}
@@ -109,5 +114,12 @@
     <path stroke={colorValue} stroke-width="0.777214" d="M5.73535 6.00244L8.27943 7.44029" />
     <path stroke={colorValue} stroke-width="0.777214" d="M10.5801 8.13977L12.8055 8.30817" />
     <path stroke={colorValue} stroke-width="0.777214" d="M9.36035 9.22266L9.36294 12.0103" />
+  {:else if icon == "openwith"}
+    <path
+      d="M13.3433 9.125L21 1.60668M21 1.60668V7.25M21 1.60668H14.75M2.77778 1H7C7.62228 1 7.93342 1 8.1711 1.1211C8.38017 1.22763 8.55015 1.39761 8.65667 1.60668C8.77778 1.84436 8.77778 2.1555 8.77778 2.77778V7C8.77778 7.62228 8.77778 7.93342 8.65667 8.1711C8.55015 8.38017 8.38017 8.55015 8.1711 8.65667C7.93342 8.77778 7.62228 8.77778 7 8.77778H2.77778C2.1555 8.77778 1.84436 8.77778 1.60668 8.65667C1.39761 8.55015 1.22763 8.38017 1.1211 8.1711C1 7.93342 1 7.62228 1 7V2.77778C1 2.1555 1 1.84436 1.1211 1.60668C1.22763 1.39761 1.39761 1.22763 1.60668 1.1211C1.84436 1 2.1555 1 2.77778 1ZM15 13.2222H19.2222C19.8445 13.2222 20.1556 13.2222 20.3933 13.3433C20.6024 13.4499 20.7724 13.6198 20.8789 13.8289C21 14.0666 21 14.3777 21 15V19.2222C21 19.8445 21 20.1556 20.8789 20.3933C20.7724 20.6024 20.6024 20.7724 20.3933 20.8789C20.1556 21 19.8445 21 19.2222 21H15C14.3777 21 14.0666 21 13.8289 20.8789C13.6198 20.7724 13.4499 20.6024 13.3433 20.3933C13.2222 20.1556 13.2222 19.8445 13.2222 19.2222V15C13.2222 14.3777 13.2222 14.0666 13.3433 13.8289C13.4499 13.6198 13.6198 13.4499 13.8289 13.3433C14.0666 13.2222 14.3777 13.2222 15 13.2222ZM2.77778 13.2222H7C7.62228 13.2222 7.93342 13.2222 8.1711 13.3433C8.38017 13.4499 8.55015 13.6198 8.65667 13.8289C8.77778 14.0666 8.77778 14.3777 8.77778 15V19.2222C8.77778 19.8445 8.77778 20.1556 8.65667 20.3933C8.55015 20.6024 8.38017 20.7724 8.1711 20.8789C7.93342 21 7.62228 21 7 21H2.77778C2.1555 21 1.84436 21 1.60668 20.8789C1.39761 20.7724 1.22763 20.6024 1.1211 20.3933C1 20.1556 1 19.8445 1 19.2222V15C1 14.3777 1 14.0666 1.1211 13.8289C1.22763 13.6198 1.39761 13.4499 1.60668 13.3433C1.84436 13.2222 2.1555 13.2222 2.77778 13.2222Z"
+      stroke={colorValue}
+      stroke-width="2.2"
+      stroke-linecap="round"
+      stroke-linejoin="round" />
   {/if}
 </svg>
diff --git a/src/partials/Modal.svelte b/src/partials/Modal.svelte
index cf8ce3c40..aa4d586d2 100644
--- a/src/partials/Modal.svelte
+++ b/src/partials/Modal.svelte
@@ -100,7 +100,7 @@
               <div
                 class="pointer-events-auto flex h-10 w-10 cursor-pointer items-center justify-center rounded-full
                      border border-solid border-accent bg-accent text-white transition-colors hover:bg-accent"
-                on:click={tryClose}>
+                on:click|stopPropagation={tryClose}>
                 <i class="fa fa-times fa-lg cy-modal-close" />
               </div>
               <div