diff --git a/packages/app/src/Element/Deck/Articles.tsx b/packages/app/src/Element/Deck/Articles.tsx
index 8c7eff25..7ada5d01 100644
--- a/packages/app/src/Element/Deck/Articles.tsx
+++ b/packages/app/src/Element/Deck/Articles.tsx
@@ -1,15 +1,21 @@
 import { NostrLink } from "@snort/system";
+import { useReactions } from "@snort/system-react";
+
 import { useArticles } from "Feed/ArticlesFeed";
 import { orderDescending } from "SnortUtils";
 import Note from "../Event/Note";
-import { useReactions } from "Feed/Reactions";
 import { useContext } from "react";
 import { DeckContext } from "Pages/DeckLayout";
 
 export default function Articles() {
   const data = useArticles();
   const deck = useContext(DeckContext);
-  const related = useReactions("articles:reactions", data.data?.map(v => NostrLink.fromEvent(v)) ?? []);
+  const related = useReactions(
+    "articles:reactions",
+    data.data?.map(v => NostrLink.fromEvent(v)) ?? [],
+    undefined,
+    true,
+  );
 
   return (
     <>
diff --git a/packages/app/src/Element/Event/NostrFileHeader.tsx b/packages/app/src/Element/Event/NostrFileHeader.tsx
index 94d634fe..30656d0b 100644
--- a/packages/app/src/Element/Event/NostrFileHeader.tsx
+++ b/packages/app/src/Element/Event/NostrFileHeader.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from "react-intl";
 import { NostrEvent, NostrLink } from "@snort/system";
+import { useEventFeed } from "@snort/system-react";
 
 import { findTag } from "SnortUtils";
-import { useEventFeed } from "Feed/EventFeed";
 import PageSpinner from "Element/PageSpinner";
 import Reveal from "Element/Event/Reveal";
 import { MediaElement } from "Element/Embed/MediaElement";
diff --git a/packages/app/src/Element/Event/NoteQuote.tsx b/packages/app/src/Element/Event/NoteQuote.tsx
index cba78dcb..e2d7c418 100644
--- a/packages/app/src/Element/Event/NoteQuote.tsx
+++ b/packages/app/src/Element/Event/NoteQuote.tsx
@@ -1,5 +1,6 @@
-import { useEventFeed } from "Feed/EventFeed";
 import { NostrLink } from "@snort/system";
+import { useEventFeed } from "@snort/system-react";
+
 import Note from "Element/Event/Note";
 import PageSpinner from "Element/PageSpinner";
 
diff --git a/packages/app/src/Element/Feed/Timeline.tsx b/packages/app/src/Element/Feed/Timeline.tsx
index c8c52d08..28dae201 100644
--- a/packages/app/src/Element/Feed/Timeline.tsx
+++ b/packages/app/src/Element/Feed/Timeline.tsx
@@ -1,16 +1,13 @@
 import "./Timeline.css";
 import { FormattedMessage } from "react-intl";
 import { useCallback, useMemo } from "react";
-import { useInView } from "react-intersection-observer";
-import { TaggedNostrEvent, EventKind, u256 } from "@snort/system";
+import { TaggedNostrEvent, EventKind } from "@snort/system";
 
-import Icon from "Icons/Icon";
 import { dedupeByPubkey, findTag } from "SnortUtils";
-import ProfileImage from "Element/User/ProfileImage";
 import useTimelineFeed, { TimelineFeed, TimelineSubject } from "Feed/TimelineFeed";
-import Note from "Element/Event/Note";
 import useModeration from "Hooks/useModeration";
 import { LiveStreams } from "Element/LiveStreams";
+import { TimelineRenderer } from "./TimelineFragment";
 
 export interface TimelineProps {
   postsOnly: boolean;
@@ -37,8 +34,6 @@ const Timeline = (props: TimelineProps) => {
   const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
 
   const { muted, isMuted } = useModeration();
-  const { ref, inView } = useInView();
-
   const filterPosts = useCallback(
     (nts: readonly TaggedNostrEvent[]) => {
       const a = [...nts.filter(a => a.kind !== EventKind.LiveEvent)];
@@ -56,12 +51,6 @@ const Timeline = (props: TimelineProps) => {
   const latestFeed = useMemo(() => {
     return filterPosts(feed.latest ?? []).filter(a => !mainFeed.some(b => b.id === a.id));
   }, [feed, filterPosts]);
-  const relatedFeed = useCallback(
-    (id: u256) => {
-      return (feed.related ?? []).filter(a => findTag(a, "e") === id);
-    },
-    [feed.related],
-  );
   const liveStreams = useMemo(() => {
     return (feed.main ?? []).filter(a => a.kind === EventKind.LiveEvent && findTag(a, "status") === "live");
   }, [feed]);
@@ -80,42 +69,12 @@ const Timeline = (props: TimelineProps) => {
   return (
     <>
       <LiveStreams evs={liveStreams} />
-      {latestFeed.length > 0 && (
-        <>
-          <div className="card latest-notes" onClick={() => onShowLatest()} ref={ref}>
-            {latestAuthors.slice(0, 3).map(p => {
-              return <ProfileImage pubkey={p} showUsername={false} link={""} showProfileCard={false} />;
-            })}
-            <FormattedMessage
-              defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
-              values={{ n: latestFeed.length }}
-            />
-            <Icon name="arrowUp" />
-          </div>
-          {!inView && (
-            <div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
-              {latestAuthors.slice(0, 3).map(p => {
-                return <ProfileImage pubkey={p} showUsername={false} link={""} showProfileCard={false} />;
-              })}
-              <FormattedMessage
-                defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
-                values={{ n: latestFeed.length }}
-              />
-              <Icon name="arrowUp" />
-            </div>
-          )}
-        </>
-      )}
-      {mainFeed.map(e => (
-        <Note
-          key={e.id}
-          searchedValue={props.subject.discriminator}
-          data={e}
-          related={relatedFeed(e.id)}
-          ignoreModeration={props.ignoreModeration}
-          depth={0}
-        />
-      ))}
+      <TimelineRenderer
+        frags={[{ events: mainFeed }]}
+        related={feed.related ?? []}
+        latest={latestAuthors}
+        showLatest={t => onShowLatest(t)}
+      />
       {(props.loadMore === undefined || props.loadMore === true) && (
         <div className="flex items-center">
           <button type="button" onClick={() => feed.loadMore()}>
diff --git a/packages/app/src/Element/Feed/TimelineFollows.tsx b/packages/app/src/Element/Feed/TimelineFollows.tsx
index 65800b79..f982637b 100644
--- a/packages/app/src/Element/Feed/TimelineFollows.tsx
+++ b/packages/app/src/Element/Feed/TimelineFollows.tsx
@@ -1,21 +1,17 @@
 import "./Timeline.css";
 import { ReactNode, useCallback, useContext, useMemo, useState, useSyncExternalStore } from "react";
 import { FormattedMessage } from "react-intl";
-import { TaggedNostrEvent, EventKind, u256, NostrEvent, NostrLink } from "@snort/system";
+import { EventKind, NostrEvent, NostrLink } from "@snort/system";
 import { unixNow } from "@snort/shared";
-import { SnortContext } from "@snort/system-react";
-import { useInView } from "react-intersection-observer";
+import { SnortContext, useReactions } from "@snort/system-react";
 
 import { dedupeByPubkey, findTag, orderDescending } from "SnortUtils";
-import Note from "Element/Event/Note";
 import useModeration from "Hooks/useModeration";
 import { FollowsFeed } from "Cache";
 import { LiveStreams } from "Element/LiveStreams";
-import { useReactions } from "Feed/Reactions";
 import AsyncButton from "../AsyncButton";
 import useLogin from "Hooks/useLogin";
-import ProfileImage from "Element/User/ProfileImage";
-import Icon from "Icons/Icon";
+import { TimelineRenderer } from "./TimelineFragment";
 
 export interface TimelineFollowsProps {
   postsOnly: boolean;
@@ -37,11 +33,12 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
   const reactions = useReactions(
     "follows-feed-reactions",
     feed.map(a => NostrLink.fromEvent(a)),
+    undefined,
+    true,
   );
   const system = useContext(SnortContext);
   const login = useLogin();
   const { muted, isMuted } = useModeration();
-  const { ref, inView } = useInView();
 
   const sortedFeed = useMemo(() => orderDescending(feed), [feed]);
 
@@ -63,13 +60,6 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
     return filterPosts((sortedFeed ?? []).filter(a => a.created_at > latest));
   }, [sortedFeed, latest]);
 
-  const relatedFeed = useCallback(
-    (id: u256) => {
-      return (reactions?.data ?? []).filter(a => findTag(a, "e") === id);
-    },
-    [reactions],
-  );
-
   const liveStreams = useMemo(() => {
     return (sortedFeed ?? []).filter(a => a.kind === EventKind.LiveEvent && findTag(a, "status") === "live");
   }, [sortedFeed]);
@@ -88,44 +78,18 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
   return (
     <>
       {(props.liveStreams ?? true) && <LiveStreams evs={liveStreams} />}
-      {latestFeed.length > 0 && (
-        <>
-          <div className="card latest-notes" onClick={() => onShowLatest()} ref={ref}>
-            {latestAuthors.slice(0, 3).map(p => {
-              return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
-            })}
-            <FormattedMessage
-              defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
-              values={{ n: latestFeed.length }}
-            />
-            <Icon name="arrowUp" />
-          </div>
-          {!inView && (
-            <div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
-              {latestAuthors.slice(0, 3).map(p => {
-                return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
-              })}
-              <FormattedMessage
-                defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
-                values={{ n: latestFeed.length }}
-              />
-              <Icon name="arrowUp" />
-            </div>
-          )}
-        </>
-      )}
-      {mainFeed.map(
-        a =>
-          props.noteRenderer?.(a) ?? (
-            <Note
-              data={a as TaggedNostrEvent}
-              related={relatedFeed(a.id)}
-              key={a.id}
-              depth={0}
-              onClick={props.noteOnClick}
-            />
-          ),
-      )}
+      <TimelineRenderer
+        frags={[
+          {
+            events: mainFeed,
+          },
+        ]}
+        related={reactions.data ?? []}
+        latest={latestAuthors}
+        showLatest={t => onShowLatest(t)}
+        noteOnClick={props.noteOnClick}
+        noteRenderer={props.noteRenderer}
+      />
       <div className="flex items-center p">
         <AsyncButton
           onClick={async () => {
diff --git a/packages/app/src/Element/Feed/TimelineFragment.tsx b/packages/app/src/Element/Feed/TimelineFragment.tsx
new file mode 100644
index 00000000..ac54a846
--- /dev/null
+++ b/packages/app/src/Element/Feed/TimelineFragment.tsx
@@ -0,0 +1,81 @@
+import { TaggedNostrEvent } from "@snort/system";
+import Note from "Element/Event/Note";
+import ProfileImage from "Element/User/ProfileImage";
+import Icon from "Icons/Icon";
+import { findTag } from "SnortUtils";
+import { ReactNode, useCallback } from "react";
+import { useInView } from "react-intersection-observer";
+import { FormattedMessage } from "react-intl";
+
+export interface TimelineFragment {
+  events: Array<TaggedNostrEvent>;
+  title?: ReactNode;
+}
+
+export interface TimelineFragmentProps {
+  frags: Array<TimelineFragment>;
+  related: Array<TaggedNostrEvent>;
+  /**
+   * List of pubkeys who have posted recently
+   */
+  latest: Array<string>;
+  showLatest: (toTop: boolean) => void;
+  noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
+  noteOnClick?: (ev: TaggedNostrEvent) => void;
+}
+
+export function TimelineRenderer(props: TimelineFragmentProps) {
+  const { ref, inView } = useInView();
+  const relatedFeed = useCallback(
+    (id: string) => {
+      return props.related.filter(a => findTag(a, "e") === id);
+    },
+    [props.related],
+  );
+
+  return (
+    <>
+      {props.latest.length > 0 && (
+        <>
+          <div className="card latest-notes" onClick={() => props.showLatest(false)} ref={ref}>
+            {props.latest.slice(0, 3).map(p => {
+              return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
+            })}
+            <FormattedMessage
+              defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
+              values={{ n: props.latest.length }}
+            />
+            <Icon name="arrowUp" />
+          </div>
+          {!inView && (
+            <div
+              className="card latest-notes latest-notes-fixed pointer fade-in"
+              onClick={() => props.showLatest(true)}>
+              {props.latest.slice(0, 3).map(p => {
+                return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
+              })}
+              <FormattedMessage
+                defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
+                values={{ n: props.latest.length }}
+              />
+              <Icon name="arrowUp" />
+            </div>
+          )}
+        </>
+      )}
+      {props.frags.map(f => {
+        return (
+          <>
+            {f.title}
+            {f.events.map(
+              e =>
+                props.noteRenderer?.(e) ?? (
+                  <Note data={e} related={relatedFeed(e.id)} key={e.id} depth={0} onClick={props.noteOnClick} />
+                ),
+            )}
+          </>
+        );
+      })}
+    </>
+  );
+}
diff --git a/packages/app/src/Element/TrendingPosts.tsx b/packages/app/src/Element/TrendingPosts.tsx
index 405ca67b..e6048180 100644
--- a/packages/app/src/Element/TrendingPosts.tsx
+++ b/packages/app/src/Element/TrendingPosts.tsx
@@ -1,16 +1,16 @@
 import { useEffect, useState } from "react";
 import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
+import { useReactions } from "@snort/system-react";
 
 import PageSpinner from "Element/PageSpinner";
 import Note from "Element/Event/Note";
 import NostrBandApi from "External/NostrBand";
-import { useReactions } from "Feed/Reactions";
 import { ErrorOrOffline } from "Element/ErrorOrOffline";
 
 export default function TrendingNotes() {
   const [posts, setPosts] = useState<Array<NostrEvent>>();
   const [error, setError] = useState<Error>();
-  const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? []);
+  const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
 
   async function loadTrendingNotes() {
     const api = new NostrBandApi();
diff --git a/packages/app/src/Feed/ThreadFeed.ts b/packages/app/src/Feed/ThreadFeed.ts
index 6eef9946..91c1a91d 100644
--- a/packages/app/src/Feed/ThreadFeed.ts
+++ b/packages/app/src/Feed/ThreadFeed.ts
@@ -1,8 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { EventKind, NostrLink, RequestBuilder, NoteCollection, EventExt } from "@snort/system";
-import { useRequestBuilder } from "@snort/system-react";
-
-import { useReactions } from "./Reactions";
+import { useReactions, useRequestBuilder } from "@snort/system-react";
 
 export default function useThreadFeed(link: NostrLink) {
   const [root, setRoot] = useState<NostrLink>();
diff --git a/packages/app/src/Feed/TimelineFeed.ts b/packages/app/src/Feed/TimelineFeed.ts
index d13dc9f8..a0f014ee 100644
--- a/packages/app/src/Feed/TimelineFeed.ts
+++ b/packages/app/src/Feed/TimelineFeed.ts
@@ -1,12 +1,11 @@
 import { useCallback, useMemo } from "react";
 import { EventKind, NostrLink, NoteCollection, RequestBuilder } from "@snort/system";
-import { useRequestBuilder } from "@snort/system-react";
+import { useReactions, useRequestBuilder } from "@snort/system-react";
 import { unixNow } from "@snort/shared";
 
 import useTimelineWindow from "Hooks/useTimelineWindow";
 import useLogin from "Hooks/useLogin";
 import { SearchRelays } from "Const";
-import { useReactions } from "./Reactions";
 
 export interface TimelineFeedOptions {
   method: "TIME_RANGE" | "LIMIT_UNTIL";
diff --git a/packages/app/src/Pages/ListFeedPage.tsx b/packages/app/src/Pages/ListFeedPage.tsx
index 9d2b9dfb..fe9a329e 100644
--- a/packages/app/src/Pages/ListFeedPage.tsx
+++ b/packages/app/src/Pages/ListFeedPage.tsx
@@ -1,11 +1,12 @@
 import { dedupe, unwrap } from "@snort/shared";
 import { EventKind, parseNostrLink } from "@snort/system";
+import { useEventFeed } from "@snort/system-react";
+import { FormattedMessage } from "react-intl";
+import { useParams } from "react-router-dom";
+
 import { Hour } from "Const";
 import Timeline from "Element/Feed/Timeline";
 import PageSpinner from "Element/PageSpinner";
-import { useEventFeed } from "Feed/EventFeed";
-import { FormattedMessage } from "react-intl";
-import { useParams } from "react-router-dom";
 
 export function ListFeedPage() {
   const { id } = useParams();
diff --git a/packages/app/src/Pages/MessagesPage.tsx b/packages/app/src/Pages/MessagesPage.tsx
index b9675837..b774c975 100644
--- a/packages/app/src/Pages/MessagesPage.tsx
+++ b/packages/app/src/Pages/MessagesPage.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
 import { NostrLink, TLVEntryType, UserMetadata, decodeTLV } from "@snort/system";
-import { useUserProfile, useUserSearch } from "@snort/system-react";
+import { useEventFeed, useUserProfile, useUserSearch } from "@snort/system-react";
 
 import UnreadCount from "Element/UnreadCount";
 import ProfileImage from "Element/User/ProfileImage";
@@ -21,7 +21,6 @@ import Text from "Element/Text";
 import { Chat, ChatType, createChatLink, useChatSystem } from "chat";
 import Modal from "Element/Modal";
 import ProfilePreview from "Element/User/ProfilePreview";
-import { useEventFeed } from "Feed/EventFeed";
 import { LoginSession, LoginStore } from "Login";
 import { Nip28ChatSystem } from "chat/nip28";
 import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
diff --git a/packages/app/src/Pages/Notifications.tsx b/packages/app/src/Pages/Notifications.tsx
index 1c90f8db..8cbe4659 100644
--- a/packages/app/src/Pages/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications.tsx
@@ -2,7 +2,7 @@ import "./Notifications.css";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { EventExt, EventKind, NostrEvent, NostrLink, NostrPrefix, TaggedNostrEvent, parseZap } from "@snort/system";
 import { unixNow, unwrap } from "@snort/shared";
-import { useUserProfile } from "@snort/system-react";
+import { useEventFeed, useUserProfile } from "@snort/system-react";
 import { useInView } from "react-intersection-observer";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
@@ -15,7 +15,6 @@ import { dedupe, findTag, orderAscending, orderDescending, getDisplayName } from
 import Icon from "Icons/Icon";
 import ProfileImage from "Element/User/ProfileImage";
 import useModeration from "Hooks/useModeration";
-import { useEventFeed } from "Feed/EventFeed";
 import Text from "Element/Text";
 import { formatShort } from "Number";
 import { LiveEvent } from "Element/LiveEvent";
diff --git a/packages/system-react/src/index.ts b/packages/system-react/src/index.ts
index 5054dfa4..d5556c7d 100644
--- a/packages/system-react/src/index.ts
+++ b/packages/system-react/src/index.ts
@@ -5,3 +5,5 @@ export * from "./useSystemState";
 export * from "./useUserProfile";
 export * from "./useUserSearch";
 export * from "./useEventReactions";
+export * from "./useReactions";
+export * from "./useEventFeed";
diff --git a/packages/app/src/Feed/EventFeed.ts b/packages/system-react/src/useEventFeed.ts
similarity index 92%
rename from packages/app/src/Feed/EventFeed.ts
rename to packages/system-react/src/useEventFeed.ts
index 3f8fce44..14d1b450 100644
--- a/packages/app/src/Feed/EventFeed.ts
+++ b/packages/system-react/src/useEventFeed.ts
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { RequestBuilder, ReplaceableNoteStore, NostrLink, NoteCollection } from "@snort/system";
-import { useRequestBuilder } from "@snort/system-react";
+import { useRequestBuilder } from "./useRequestBuilder";
 
 export function useEventFeed(link: NostrLink) {
   const sub = useMemo(() => {
diff --git a/packages/app/src/Feed/Reactions.ts b/packages/system-react/src/useReactions.ts
similarity index 55%
rename from packages/app/src/Feed/Reactions.ts
rename to packages/system-react/src/useReactions.ts
index db6d0a39..3de1a96b 100644
--- a/packages/app/src/Feed/Reactions.ts
+++ b/packages/system-react/src/useReactions.ts
@@ -1,13 +1,16 @@
-import { RequestBuilder, EventKind, NoteCollection, NostrLink } from "@snort/system";
-import { useRequestBuilder } from "@snort/system-react";
-import useLogin from "Hooks/useLogin";
 import { useMemo } from "react";
+import { RequestBuilder, EventKind, NoteCollection, NostrLink } from "@snort/system";
+import { useRequestBuilder } from "./useRequestBuilder";
 
-export function useReactions(subId: string, ids: Array<NostrLink>, others?: (rb: RequestBuilder) => void) {
-  const { preferences: pref } = useLogin();
-
+export function useReactions(
+  subId: string,
+  ids: Array<NostrLink>,
+  others?: (rb: RequestBuilder) => void,
+  leaveOpen?: boolean,
+) {
   const sub = useMemo(() => {
     const rb = new RequestBuilder(subId);
+    rb.withOptions({ leaveOpen });
 
     if (ids.length > 0) {
       const grouped = ids.reduce(
@@ -20,13 +23,7 @@ export function useReactions(subId: string, ids: Array<NostrLink>, others?: (rb:
       );
 
       for (const [, v] of Object.entries(grouped)) {
-        rb.withFilter()
-          .kinds(
-            pref.enableReactions
-              ? [EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]
-              : [EventKind.ZapReceipt, EventKind.Repost],
-          )
-          .replyToLink(v);
+        rb.withFilter().kinds([EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]).replyToLink(v);
       }
     }
     others?.(rb);