diff --git a/packages/app/src/Element/Feed/ImageGridItem.tsx b/packages/app/src/Element/Feed/ImageGridItem.tsx
index 68e01e74..23c4b416 100644
--- a/packages/app/src/Element/Feed/ImageGridItem.tsx
+++ b/packages/app/src/Element/Feed/ImageGridItem.tsx
@@ -21,7 +21,7 @@ const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent
   const noteId = NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix);
 
   const myOnClick = (clickEvent: MouseEvent) => {
-    if (onClick) {
+    if (onClick && window.innerWidth >= 768) {
       onClick(clickEvent);
       clickEvent.preventDefault();
     }
diff --git a/packages/app/src/Element/Trending/TrendingPosts.tsx b/packages/app/src/Element/Trending/TrendingPosts.tsx
index 24468bbf..24a3960e 100644
--- a/packages/app/src/Element/Trending/TrendingPosts.tsx
+++ b/packages/app/src/Element/Trending/TrendingPosts.tsx
@@ -12,15 +12,20 @@ import ShortNote from "@/Element/Trending/ShortNote";
 import classNames from "classnames";
 import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
 import ImageGridItem from "@/Element/Feed/ImageGridItem";
+import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
+import useLogin from "@/Hooks/useLogin";
 
 export default function TrendingNotes({ count = Infinity, small = false }) {
+  const login = useLogin();
+  const displayAsInitial = small ? "list" : login.feedDisplayAs ?? "list";
   // Added count prop with a default value
   const [posts, setPosts] = useState<Array<NostrEvent>>();
   const [error, setError] = useState<Error>();
   const { lang } = useLocale();
   const { isEventMuted } = useModeration();
-  const [displayAs, setDisplayAs] = useState<DisplayAs>("list");
+  const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
   const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
+  const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
 
   async function loadTrendingNotes() {
     const api = new NostrBandApi();
@@ -57,7 +62,7 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
     return (
       <div className="grid grid-cols-3 gap-px md:gap-1">
         {filteredAndLimitedPosts().map(e => (
-          <ImageGridItem event={e as TaggedNostrEvent} onClick={() => {}} />
+          <ImageGridItem event={e as TaggedNostrEvent} onClick={() => setModalThread(NostrLink.fromEvent(e))} />
         ))}
       </div>
     );
@@ -77,6 +82,13 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
     <div className={classNames("flex flex-col", { "gap-6": small, "py-4": small })}>
       {!small && <DisplayAsSelector activeSelection={displayAs} onSelect={a => setDisplayAs(a)} />}
       {displayAs === "grid" ? renderGrid() : renderList()}
+      {modalThread && (
+        <SpotlightThreadModal
+          thread={modalThread}
+          onClose={() => setModalThread(undefined)}
+          onBack={() => setModalThread(undefined)}
+        />
+      )}
     </div>
   );
 }