diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
index a0178390..8b7d54f6 100644
--- a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
@@ -20,9 +20,10 @@ type PostView = AppBskyFeedDefs.PostView;
 export function BskyPostContent(props: {
   post: PostView;
   parent: OpenPage;
-  avatarSize?: "tiny" | "medium" | "large" | "giant";
+  avatarSize?: "tiny" | "small" | "medium" | "large" | "giant";
   className?: string;
   showEmbed?: boolean;
+  compactEmbed?: boolean;
   showBlueskyLink?: boolean;
   onEmbedClick?: (e: React.MouseEvent) => void;
   quoteEnabled?: boolean;
@@ -35,8 +36,9 @@ export function BskyPostContent(props: {
   const {
     post,
     parent,
-    avatarSize = "md",
+    avatarSize = "medium",
     showEmbed = true,
+    compactEmbed = false,
     showBlueskyLink = true,
     onEmbedClick,
     quoteEnabled,
@@ -67,7 +69,7 @@ export function BskyPostContent(props: {
           <Avatar
             src={post.author.avatar}
             displayName={post.author.displayName}
-            size={props.avatarSize ? props.avatarSize : "medium"}
+            size={avatarSize ? avatarSize : "medium"}
           />
           {replyLine && (
             <button
@@ -82,10 +84,10 @@ export function BskyPostContent(props: {
           )}
         </div>
         <div
-          className={`flex flex-col w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
+          className={`flex flex-col min-w-0 w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
         >
           <button
-            className={`bskyPostTextContent flex flex-col grow min-w-0 mt-1 text-left`}
+            className="bskyPostTextContent flex flex-col grow mt-1 text-left"
             onClick={() => {
               openPage(parent, { type: "thread", uri: post.uri });
             }}
@@ -93,7 +95,7 @@ export function BskyPostContent(props: {
             <div
               className={`postInfo flex justify-between items-center gap-2 leading-tight `}
             >
-              <div className="flex gap-2 items-center">
+              <div className={`flex gap-2 items-center `}>
                 <div className="font-bold text-secondary">
                   {post.author.displayName}
                 </div>
@@ -112,13 +114,14 @@ export function BskyPostContent(props: {
             </div>
 
             <div className={`postContent flex flex-col gap-2 mt-0.5`}>
-              <div className="text-sm text-secondary">
+              <div className="text-secondary text-sm">
                 <BlueskyRichText record={record} />
               </div>
               {showEmbed && post.embed && (
                 <div onClick={onEmbedClick}>
                   <BlueskyEmbed
                     embed={post.embed}
+                    compact={compactEmbed}
                     postUrl={url}
                     className="text-sm"
                   />
@@ -159,6 +162,99 @@ export function BskyPostContent(props: {
   );
 }
 
+export function CompactBskyPostContent(props: {
+  post: PostView;
+  parent: OpenPage;
+  className?: string;
+  quoteEnabled?: boolean;
+  replyEnabled?: boolean;
+  replyOnClick?: (e: React.MouseEvent) => void;
+  replyLine?: {
+    onToggle: (e: React.MouseEvent) => void;
+  };
+}) {
+  const { post, parent, quoteEnabled, replyEnabled, replyOnClick, replyLine } =
+    props;
+
+  const record = post.record as AppBskyFeedPost.Record;
+  const postId = post.uri.split("/")[4];
+  const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
+
+  return (
+    <div className="bskyPost relative flex flex-col w-full">
+      <div className={`flex gap-2 text-left w-full ${props.className}`}>
+        <div className="flex flex-col items-start shrink-0 w-fit">
+          <Avatar
+            src={post.author.avatar}
+            displayName={post.author.displayName}
+            size="small"
+          />
+          {replyLine && (
+            <button
+              onClick={(e) => {
+                replyLine.onToggle(e);
+              }}
+              className="relative w-full grow flex"
+              aria-label="Toggle replies"
+            >
+              <div className="w-0.5 h-full bg-border-light mx-auto" />
+            </button>
+          )}
+        </div>
+        <div
+          className={`flex flex-col min-w-0 w-full z-0 ${replyLine ? "mb-2" : ""}`}
+        >
+          <button
+            className="bskyPostTextContent flex flex-col grow mt-0.5 text-left text-xs text-tertiary"
+            onClick={() => {
+              openPage(parent, { type: "thread", uri: post.uri });
+            }}
+          >
+            <div className="postInfo flex justify-between items-center gap-2 leading-tight">
+              <div className="flex gap-2 items-center">
+                <div className="font-bold text-secondary">
+                  {post.author.displayName}
+                </div>
+                <ProfilePopover
+                  trigger={
+                    <div className="text-xs text-tertiary hover:underline">
+                      @{post.author.handle}
+                    </div>
+                  }
+                  didOrHandle={post.author.handle}
+                />
+              </div>
+              <div className="text-xs text-tertiary">
+                {timeAgo(record.createdAt, { compact: true })}
+              </div>
+            </div>
+
+            <div className="postContent flex flex-col gap-2 mt-0.5">
+              <div className="line-clamp-3 text-tertiary text-xs">
+                <BlueskyRichText record={record} />
+              </div>
+            </div>
+          </button>
+          {(post.quoteCount && post.quoteCount > 0) ||
+          (post.replyCount && post.replyCount > 0) ? (
+            <div className="postCountsAndLink flex gap-2 items-center justify-between mt-2">
+              <PostCounts
+                post={post}
+                parent={parent}
+                replyEnabled={replyEnabled}
+                replyOnClick={replyOnClick}
+                quoteEnabled={quoteEnabled}
+                showBlueskyLink={false}
+                url={url}
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function PostCounts(props: {
   post: PostView;
   parent?: OpenPage;
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index 55774899..8805cce4 100644
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -6,9 +6,12 @@ import { PageWrapper } from "components/Pages/Page";
 import { useDrawerOpen } from "./Interactions/InteractionDrawer";
 import { DotLoader } from "components/utils/DotLoader";
 import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
-import { openPage } from "./PostPages";
 import { useThreadState } from "src/useThreadState";
-import { BskyPostContent, ClientDate } from "./BskyPostContent";
+import {
+  BskyPostContent,
+  CompactBskyPostContent,
+  ClientDate,
+} from "./BskyPostContent";
 import {
   ThreadLink,
   getThreadKey,
@@ -30,7 +33,7 @@ export function ThreadPage(props: {
   pageOptions?: React.ReactNode;
   hasPageBackground: boolean;
 }) {
-  const { parentUri: parentUri, pageId, pageOptions } = props;
+  const { parentUri, pageId, pageOptions } = props;
   const drawer = useDrawerOpen(parentUri);
 
   const {
@@ -49,7 +52,7 @@ export function ThreadPage(props: {
       drawerOpen={!!drawer}
       pageOptions={pageOptions}
     >
-      <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4">
+      <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4 w-full">
         {isLoading ? (
           <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8">
             <span>loading thread</span>
@@ -106,35 +109,31 @@ function ThreadContent(props: { post: ThreadType; parentUri: string }) {
   }
 
   return (
-    <div className="threadContent flex flex-col gap-0">
+    <div
+      className={`threadContent flex flex-col gap-0 w-full ${parents.length !== 0 && "pt-1"}`}
+    >
       {/* grandparent posts, if any */}
-      {parents.map((parent, index) => (
-        <div key={parent.post.uri} className="flex flex-col">
-          <ThreadPost
-            post={parent}
-            isMainPost={false}
-            showReplyLine={index < parents.length - 1 || true}
-            parentUri={parentUri}
-          />
-        </div>
+      {parents.map((parentPost, index) => (
+        <ThreadPost
+          key={parentPost.post.uri}
+          post={parentPost}
+          isMainPost={false}
+          pageUri={parentUri}
+        />
       ))}
 
       {/* Main post */}
       <div ref={mainPostRef}>
-        <ThreadPost
-          post={post}
-          isMainPost={true}
-          showReplyLine={false}
-          parentUri={parentUri}
-        />
+        <ThreadPost post={post} isMainPost={true} pageUri={parentUri} />
       </div>
 
       {/* Replies */}
       {post.replies && post.replies.length > 0 && (
-        <div className="threadReplies flex flex-col mt-2 pt-2 border-t border-border-light">
+        <div className="threadReplies flex flex-col mt-4 pt-3  border-t border-border-light w-full">
           <Replies
             replies={post.replies as any[]}
-            parentUri={post.post.uri}
+            pageUri={post.post.uri}
+            parentPostUri={post.post.uri}
             depth={0}
             parentAuthorDid={post.post.author.did}
           />
@@ -147,26 +146,38 @@ function ThreadContent(props: { post: ThreadType; parentUri: string }) {
 function ThreadPost(props: {
   post: ThreadViewPost;
   isMainPost: boolean;
-  showReplyLine: boolean;
-  parentUri: string;
+  pageUri: string;
 }) {
-  const { post, isMainPost, showReplyLine, parentUri } = props;
+  const { post, isMainPost, pageUri } = props;
   const postView = post.post;
-  const parent = { type: "thread" as const, uri: parentUri };
+  const page = { type: "thread" as const, uri: pageUri };
+
+  if (isMainPost) {
+    return (
+      <div className="threadPost flex gap-2 relative w-full">
+        <BskyPostContent
+          post={postView}
+          parent={page}
+          avatarSize="large"
+          showBlueskyLink={true}
+          showEmbed={true}
+          compactEmbed
+          quoteEnabled
+        />
+      </div>
+    );
+  }
 
   return (
-    <div className="threadPost flex gap-2 relative">
-      {/* Reply line connector */}
-      {showReplyLine && (
-        <div className="absolute left-[19px] top-10 bottom-0 w-0.5 bg-border-light" />
-      )}
-      <BskyPostContent
+    <div className="threadPost flex gap-2 relative w-full pl-1">
+      <CompactBskyPostContent
         post={postView}
-        parent={parent}
-        showBlueskyLink={true}
-        showEmbed={true}
+        parent={page}
         quoteEnabled
-        replyEnabled={!isMainPost}
+        replyEnabled
+        replyLine={{
+          onToggle: () => {},
+        }}
       />
     </div>
   );
@@ -176,9 +187,10 @@ function Replies(props: {
   replies: (ThreadViewPost | NotFoundPost | BlockedPost)[];
   depth: number;
   parentAuthorDid?: string;
-  parentUri: string;
+  pageUri: string;
+  parentPostUri: string;
 }) {
-  const { replies, depth, parentAuthorDid, parentUri } = props;
+  const { replies, depth, parentAuthorDid, pageUri, parentPostUri } = props;
   const collapsedThreads = useThreadState((s) => s.collapsedThreads);
   const toggleCollapsed = useThreadState((s) => s.toggleCollapsed);
 
@@ -198,7 +210,7 @@ function Replies(props: {
     : replies;
 
   return (
-    <div className="threadPageReplies flex flex-col gap-0">
+    <div className="threadPageReplies flex flex-col gap-0 pt-1 pb-2">
       {sortedReplies.map((reply, index) => {
         if (AppBskyFeedDefs.isNotFoundPost(reply)) {
           return (
@@ -231,19 +243,21 @@ function Replies(props: {
 
         return (
           <ReplyPost
+            key={reply.post.uri}
             post={reply}
             isLast={index === replies.length - 1 && !hasReplies}
-            parentUri={parentUri}
+            pageUri={pageUri}
+            parentPostUri={parentPostUri}
             toggleCollapsed={(uri) => toggleCollapsed(uri)}
             isCollapsed={isCollapsed}
             depth={props.depth}
           />
         );
       })}
-      {parentUri && depth > 0 && replies.length > 3 && (
+      {pageUri && depth > 0 && replies.length > 3 && (
         <ThreadLink
-          postUri={parentUri}
-          parent={{ type: "thread", uri: parentUri }}
+          postUri={pageUri}
+          parent={{ type: "thread", uri: pageUri }}
           className="flex justify-start text-sm text-accent-contrast h-fit hover:underline"
         >
           <div className="mx-[19px] w-0.5 h-[24px] bg-border-light" />
@@ -258,12 +272,13 @@ function Replies(props: {
 const ReplyPost = (props: {
   post: ThreadViewPost;
   isLast: boolean;
-  parentUri: string;
+  pageUri: string;
+  parentPostUri: string;
   toggleCollapsed: (uri: string) => void;
   isCollapsed: boolean;
   depth: number;
 }) => {
-  const { post, parentUri } = props;
+  const { post, pageUri, parentPostUri } = props;
   const postView = post.post;
 
   const hasReplies = props.post.replies && props.post.replies.length > 0;
@@ -274,14 +289,14 @@ const ReplyPost = (props: {
     >
       <BskyPostContent
         post={postView}
-        parent={{ type: "thread", uri: parentUri }}
+        parent={{ type: "thread", uri: pageUri }}
         showEmbed={false}
         showBlueskyLink={false}
         replyLine={
           props.depth > 0
             ? {
                 onToggle: () => {
-                  props.toggleCollapsed(props.parentUri);
+                  props.toggleCollapsed(parentPostUri);
                 },
               }
             : undefined
@@ -291,6 +306,7 @@ const ReplyPost = (props: {
         replyOnClick={(e) => {
           e.preventDefault();
           props.toggleCollapsed(post.post.uri);
+          console.log(post.post.uri);
         }}
         onEmbedClick={(e) => e.stopPropagation()}
         className="text-sm z-10"
@@ -300,7 +316,8 @@ const ReplyPost = (props: {
           {!props.isCollapsed && (
             <div className="grow">
               <Replies
-                parentUri={parentUri}
+                pageUri={pageUri}
+                parentPostUri={post.post.uri}
                 replies={props.post.replies as any[]}
                 depth={props.depth + 1}
                 parentAuthorDid={props.post.post.author.did}
@@ -313,7 +330,7 @@ const ReplyPost = (props: {
       {hasReplies && props.depth >= 3 && (
         <ThreadLink
           postUri={props.post.post.uri}
-          parent={{ type: "thread", uri: parentUri }}
+          parent={{ type: "thread", uri: pageUri }}
           className="text-left ml-10 text-sm text-accent-contrast hover:underline"
         >
           View more replies
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
index 5d8eaefb..192306cc 100644
--- a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
+++ b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
@@ -15,6 +15,7 @@ export const BlueskyEmbed = (props: {
   embed: Exclude<AppBskyFeedDefs.PostView["embed"], undefined>;
   postUrl?: string;
   className?: string;
+  compact?: boolean;
 }) => {
   // check this file from bluesky for ref
   // https://github.com/bluesky-social/social-app/blob/main/bskyembed/src/components/embed.tsx
@@ -22,7 +23,7 @@ export const BlueskyEmbed = (props: {
     case AppBskyEmbedImages.isView(props.embed):
       let imageEmbed = props.embed;
       return (
-        <div className="flex flex-wrap rounded-md w-full overflow-hidden">
+        <div className="imageEmbed flex flex-wrap rounded-md w-full overflow-hidden">
           {imageEmbed.images.map(
             (
               image: {
@@ -69,7 +70,7 @@ export const BlueskyEmbed = (props: {
       let isGif = externalEmbed.external.uri.includes(".gif");
       if (isGif) {
         return (
-          <div className="flex flex-col border border-border-light rounded-md overflow-hidden aspect-video">
+          <div className="flex flex-col border border-border-light rounded-md overflow-hidden aspect-video w-full ">
             <img
               src={externalEmbed.external.uri}
               alt={externalEmbed.external.title}
@@ -82,29 +83,34 @@ export const BlueskyEmbed = (props: {
         <a
           href={externalEmbed.external.uri}
           target="_blank"
-          className={`blueskyPostEmbed group flex flex-col border border-border-light rounded-md overflow-hidden hover:no-underline sm:hover:border-accent-contrast selected-border ${props.className}`}
+          className={`externalLinkEmbed group  border border-border-light rounded-md overflow-hidden hover:no-underline sm:hover:border-accent-contrast selected-border w-full ${props.compact ? "flex" : "flex flex-col"}
+            ${props.className}`}
         >
           {externalEmbed.external.thumb === undefined ? null : (
             <>
-              <div className="w-full aspect-[1.91/1] overflow-hidden">
+              <div
+                className={` overflow-hidden shrink-0 ${props.compact ? "aspect-square h-[113px] hidden sm:block" : "aspect-[1.91/1] w-full "}`}
+              >
                 <img
                   src={externalEmbed.external.thumb}
                   alt={externalEmbed.external.title}
-                  className="w-full h-full object-cover"
+                  className={`object-cover ${props.compact ? "h-full" : "w-full h-full"}`}
                 />
               </div>
-              <hr className="border-border-light" />
+              {!props.compact && <hr className="border-border-light" />}
             </>
           )}
-          <div className="p-2 flex flex-col gap-1">
-            <div className="flex flex-col">
-              <h4>{externalEmbed.external.title}</h4>
-              <p className="text-secondary">
+          <div
+            className={`p-2 flex flex-col gap-1 w-full min-w-0 ${props.compact && "sm:pl-3 py-1"}`}
+          >
+            <div className="flex flex-col shrink-0">
+              <h4 className="truncate">{externalEmbed.external.title} </h4>
+              <p className="text-secondary line-clamp-2 grow">
                 {externalEmbed.external.description}
               </p>
             </div>
             <hr className="border-border-light mt-1" />
-            <div className="text-tertiary text-xs sm:group-hover:text-accent-contrast">
+            <div className="text-tertiary text-xs shrink-0 sm:group-hover:text-accent-contrast truncate">
               {externalEmbed.external.uri}
             </div>
           </div>
@@ -117,7 +123,7 @@ export const BlueskyEmbed = (props: {
         : 16 / 9;
       return (
         <div
-          className={`rounded-md overflow-hidden relative w-full ${props.className}`}
+          className={`videoEmbed rounded-md overflow-hidden relative w-full ${props.className}`}
           style={{ aspectRatio: String(videoAspectRatio) }}
         >
           <img
@@ -149,7 +155,7 @@ export const BlueskyEmbed = (props: {
         }
         return (
           <div
-            className={`flex flex-col gap-0.5 relative w-full overflow-hidden p-2! text-xs  block-border`}
+            className={`bskyPostEmbed flex flex-col gap-0.5 relative w-full overflow-hidden p-2! text-xs  block-border`}
           >
             <div className="bskyAuthor w-full flex items-center ">
               {record.author.avatar && (