diff --git a/src/components/styled/views/Catalog.styled.jsx b/src/components/styled/views/Catalog.styled.jsx
index 7c07c68a..90e0ddad 100644
--- a/src/components/styled/views/Catalog.styled.jsx
+++ b/src/components/styled/views/Catalog.styled.jsx
@@ -12,57 +12,11 @@ export const Threads = styled.div`
     max-height: 320px;
     vertical-align: top;
     display: inline-block;
-    word-wrap: break-word;
     margin-top: 5px;
     margin-bottom: 20px;
     padding: 5px 0 3px;
   }
 
-  .thread_popup {
-    display: inline-block;
-    background-color: black;
-    position: absolute;
-    margin-top: 0px;
-    text-align: left;
-    z-index: 10;
-    padding-left: 5px;
-    padding-right: 5px;
-    border-radius: 3px;
-    /* overflow-wrap: break-word; */
-  }
-
-  .thread_popup_content {
-    max-width: 500px;
-    margin: 5px 3px 2px 3px !important;
-    color: #dedede;
-    display: inline-block;
-    overflow: hidden;
-    font-size: 13px;
-    white-space: normal;
-  }
-
-  .thread_popup_lastReply {
-    margin: 0px 4px 5px 4px !important;
-    color: #bbbfbd;
-    display: block;
-    min-width: 250px;
-    font-size: 90%;
-  }
-
-  .thread_popup_title {
-    color:#a89baa
-  }
-
-  .thread_popup_author {
-    color:#519860;
-    font-weight: bold
-  }
-
-  .thread_popup_authorAdmin {
-    color: purple;
-    font-weight: 700;
-  }
-
   video, audio, img {
     max-width: 150px;
     max-height: 150px;
@@ -137,82 +91,162 @@ export const Threads = styled.div`
     display: block;
     padding: 0 15px;
     overflow: hidden;
+    word-wrap: break-word;
   }
 
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return ``;
+
+      case 'Yotsuba-B':
+        return ``;
+
+      case 'Futaba':
+        return ``;
+
+      case 'Burichan':
+        return ``;
+
+      case 'Tomorrow':
+        return `
+        .file-thumb {
+          background-color: rgba(255, 255, 255, 0.01) !important;
+        }`;
+
+      case 'Photon':
+        return ``;
+
+      default:
+        return '';
+    }
+  }}
+`;
+
+export const PostPreview = styled.div`
+  .post-preview {
+    position: absolute;
+    background-color: #000;
+    border-radius: 3px;
+    padding: 5px 8px 4px;
+    z-index: 100000;
+    word-wrap: break-word;
+    white-space: normal;
+    max-width: 500px;
+    width: fit-content;
+    color: #bbbfbd;
+    font-size: 10pt;
+    text-align: left;
+  }
+
+  .post-author {
+    font-weight: 700;
+  }
+
+  .post-last {
+    margin-top: 3px;
+    color: #bbbfbd;
+    font-size: 90%;
+  }
+
+  .post-authorAdmin {
+    color: purple;
+    font-weight: 700;
+  }
+
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
         return `
-        .thread_popup_title{
+        .post-subject{
           color:#cc1105;
           font-weight:700;
         };
-        .thread_popup_author{
+
+        .post-author{
           color:#00a550;font-weight:bold
         }`;
-        case 'Yotsuba-B':
-          return `
-          .thread_popup_title{
-            color:#dedede;
-            font-weight:700;
-          };
-          .thread_popup_author{
-            color:#00a550;font-weight:bold
-          }`;
-        case 'Futaba':
-          return `
-          .thread_popup{
-            font-family: arial,helvetica,sans-serif;
-          }
-          .thread_popup_title{
-            color:#cc1105;
-            font-weight:700;
-          };
-          .thread_popup_author{
-            color:#00a550;font-weight:700;
-          }`;
-          case 'Burichan':
-            return `
-            .thread_popup{
-              font-family: arial,helvetica,sans-serif;
-            }
-            .thread_popup_title{
-              color:#dedede;
-              font-weight:700;
-            };
-            .thread_popup_author{
-              color:#00a550;font-weight:700;
-            }`;
-            case 'Tomorrow':
-              return `
-              .thread_popup{
-                font-family: arial,helvetica,sans-serif;
-              }
-              .file-thumb {
-                background-color: rgba(255, 255, 255, 0.01) !important;
-              }
-              .thread_popup_title{
-                color:#b294bb;
-                font-weight:700;
-              };
-              .thread_popup_author{
-                color:#00a550;font-weight:700;
-              }`;
-              case 'Photon':
-                return `
-                .thread_popup{
-                  font-family: arial,helvetica,sans-serif;
-                }
-                .thread_popup_title{
-                  color:#dedede;
-                  font-weight:700;
-                };
-                .thread_popup_author{
-                  color:#dedede;font-weight:700;
-                }`;
+
+      case 'Yotsuba-B':
+        return `
+        .post-subject{
+          color:#dedede;
+          font-weight:700;
+        };
+
+        .post-author{
+          color:#00a550;font-weight:bold
+        }`;
+
+      case 'Futaba':
+        return `
+        .post-preview{
+          font-family: arial,helvetica,sans-serif;
+        }
+
+        .post-subject{
+          color:#cc1105;
+          font-weight:700;
+        };
+        
+        .post-author{
+          color:#00a550;font-weight:700;
+        }`;
+
+      case 'Burichan':
+        return `
+        .post-preview{
+          font-family: arial,helvetica,sans-serif;
+        }
+
+        .post-subject{
+          color:#dedede;
+          font-weight:700;
+        };
+
+        .post-author{
+          color:#00a550;font-weight:700;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .post-preview{
+          font-family: arial,helvetica,sans-serif;
+        }
+
+        .file-thumb {
+          background-color: rgba(255, 255, 255, 0.01) !important;
+        }
+
+        .post-subject{
+          color:#b294bb;
+          font-weight:700;
+        };
+
+        .post-author{
+          color:#00a550;font-weight:700;
+        }`;
+
+      case 'Photon':
+        return `
+        .post-preview{
+          font-family: arial,helvetica,sans-serif;
+        }
+
+        .post-subject{
+          color:#dedede;
+          font-weight:700;
+        };
+
+        .post-author{
+          color:#dedede;font-weight:700;
+        }`;
       default:
         return '';
-      }}}
+    }
+  }}
 `;
 
 export const PostMenuCatalog = styled.div`
@@ -250,7 +284,7 @@ export const PostMenuCatalog = styled.div`
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `.thread_popup_title{
+        return `.post-subject{
           color:red;
         }`;
 
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index dec549a0..4ab042a6 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
 import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
-import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
+import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
   const fallbackImgUrl = "assets/filedeleted-res.gif";
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
+  const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
   const account = useAccount();
   const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
   const threadMenuRefs = useRef({});
+  const threadRefs = useRef({});
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
   const popupRef = useRef(null);
-  const threadRefs = useRef([]);
   const textRef = useRef(null);
   const imageRef = useRef(null);
-  const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
-  const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
-  const [spaceOnLeft,setSpaceOnLeft] = useState(null);
-  const [spaceOnRight,setSpaceOnRight] = useState(null);
+  const [spaceOnRight, setSpaceOnRight] = useState(null);
   const [isCalculationDone,setIsCalculationDone] = useState(false);
   const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
   const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
     commentMediaInfo.thumbnail))) ? true : false;
 
 
+    const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
+    const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
+  
     useLayoutEffect(() => {
       const executeLayoutEffectLogic = () => {
         let ref;
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
         } else {
           ref = textRef.current;
         }
-    
+  
         if (ref && popupRef.current) {
-          const threadRect = ref.getBoundingClientRect();
+          const rect = ref.getBoundingClientRect();
           const viewportWidth = document.documentElement.clientWidth;
-          const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
-          const spaceLeft = threadRect.left;
-          setIsEnoughSpaceOnLeft(spaceLeft > 500);
-          setIsEnoughSpaceOnRight(spaceRight > 500);
+          const spaceRight = viewportWidth - (rect.left + rect.width);
+          const spaceLeft = rect.left;
+          const popupWidth = popupRef.current.getBoundingClientRect().width;
+  
+          if (spaceRight < 200 && spaceLeft > spaceRight) {
+            popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
+          } else if (spaceRight < 200 && spaceLeft < spaceRight) {
+            popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
+          } else {
+            popupRef.current.style.maxWidth = `${popupWidth}px`;
+          }
+  
           setSpaceOnRight(spaceRight);
-          setSpaceOnLeft(spaceLeft);
           setIsCalculationDone(true);
         }
       };
-    
+  
       if (isHoveringOnThread) {
         const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
         return () => {
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
           setIsCalculationDone(false);
         };
       }
-    
-    }, [isHoveringOnThread, isMediaShowed]);
+  
+    }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
     
   
   const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
         setIsHoveringOnThread("")
     } else if (isHoveringOnThread !== "") {
         setIsHoveringOnThread("");
-        setIsEnoughSpaceOnRight(null);
         setIsCalculationDone(false);
     }
   };
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
 
 
   return (
-    <div key={`thread-`} className="thread"  
-    onMouseLeave={() => {handleMouseOnLeaveThread()}}>
+    <>
       {isHoveringOnThread === thread.cid  ? 
-        <div ref={popupRef}
-        className="thread_popup"
-        onMouseOver={() => handleMouseOnLeaveThread()}
-        style={{
-        opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
-        visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
-        left: 
-          isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
-          ? isMediaShowed
-          ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-              : `calc(50% + ${textRect.width}px / 2 + 5px)`                   
-          : 'auto',
-        right:
-          isCalculationDone && isEnoughSpaceOnRight !== null && 
-            (popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
-              ? isMediaShowed
-              ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-              : `calc(50% + ${textRect.width}px / 2 + 5px)`   
-          : 'auto',
-        }}>
-          <p
-          className="thread_popup_content"
-          style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
-            spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
-            spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
-          }}>
-          <span className="thread_popup_title" >
-            {thread.title ? `${thread.title} ` : "Posted "}
-          </span>
-          by 
-          <span className="thread_popup_author"> 
-          {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
-          </span> 
-            {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
-          </p>
-          <div>
-            {thread.replyCount > 0 ?
-            <p className="thread_popup_lastReply">
-                Last reply by 
-                <span className="thread_popup_author"> Anonymous </span> 
-                {getFormattedTime(thread.lastReplyTimestamp)}
-              </p>
-            : null}
-          </div>
-        </div> 
-      : null }
-      {commentMediaInfo?.url ? (
-        <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
-        onClick={() => setSelectedThread(thread.cid)} 
-        onMouseOver={() => {
-          setIsHoveringOnThread(thread.cid);
-          setIsHoveringForMenu(thread.cid);
+        createPortal(
+          <PostPreview selectedStyle={selectedStyle}>
+            <div ref={popupRef}
+            className="post-preview"
+            onMouseOver={() => handleMouseOnLeaveThread()}
+            style={{
+            visibility: isCalculationDone ? 'visible' : 'hidden',
+            left: 
+              isCalculationDone && spaceOnRight > 250
+              ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
+              isCalculationDone && spaceOnRight < 250
+              ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
+              : 'auto',
+            top: popupPosition.top + 5,
+            }}>
+              <span className="post-subject" >
+                {thread.title ? `${thread.title} ` : "Posted "}
+              </span>
+              by 
+              <span className="post-author"> 
+              {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
+              </span>
+              <span className='post-ago'>
+                {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
+              </span>
+              {thread.replyCount > 0 ?
+                <div className='post-last'>
+                  Last reply by 
+                  <span className="post-author"> Anonymous </span>
+                  <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
+                </div>
+              : null}
+            </div>
+          </PostPreview>, document.body
+        )
+        : null }
+      <div key={`thread-`} className="thread"  
+        ref={el => { 
+          threadRefs.current[thread.cid] = el; 
         }}
-        onMouseLeave={() => setIsHoveringForMenu(false)}>
-          {commentMediaInfo?.type === "webpage" ? (
-            thread.thumbnailUrl ? (
+      onMouseLeave={() => {handleMouseOnLeaveThread()}}>
+        {commentMediaInfo?.url ? (
+          <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+          onClick={() => setSelectedThread(thread.cid)} 
+          onMouseOver={() => {
+            setIsHoveringOnThread(thread.cid);
+            setIsHoveringForMenu(thread.cid);
+            const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+            setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+          }}
+          onMouseLeave={() => setIsHoveringForMenu(false)}>
+            {commentMediaInfo?.type === "webpage" ? (
+              thread.thumbnailUrl ? (
+                <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                  <img className="card" ref={imageRef} key={`img-`}
+                  src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                  onError={(e) => {
+                    e.target.src = fallbackImgUrl
+                    e.target.onerror = null;
+                  }}  />
+                </span>
+              ) : null
+            ) : null}
+            {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
               <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <img className="card" ref={imageRef} key={`img-`}
                 src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                onError={(e) => { e.target.src = fallbackImgUrl }}  />
+              </span>
+            ) : null}
+            {commentMediaInfo?.type === "image" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                <img className="card" ref={imageRef} key={`img-`}
+                src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
-                  e.target.onerror = null;
-                }}  />
+                  e.target.onerror = null;}}  />
               </span>
-            ) : null
-          ) : null}
-          {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <img className="card" ref={imageRef} key={`img-`}
-              src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-              onError={(e) => { e.target.src = fallbackImgUrl }}  />
-            </span>
-          ) : null}
-          {commentMediaInfo?.type === "image" ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <img className="card" ref={imageRef} key={`img-`}
-              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-              onError={(e) => {
-                e.target.src = fallbackImgUrl
-                e.target.onerror = null;}}  />
-            </span>
-          ) : null}
-          {commentMediaInfo?.type === "video" ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <video className="card" ref={imageRef} key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} /> 
-            </span>
-          ) : null}
-          {commentMediaInfo?.type === "audio" ? (
-              <audio className="card" ref={imageRef} controls 
-              key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} />
-          ) : null}
-        </Link>
-      ) : null}
-      <div key={`ti-`} className="thread-icons" >
-      {isMediaShowed ? (                          
-          <OfflineIndicator 
-          address={thread.subplebbitAddress} 
-          className="thread-icon offline-icon"
-          tooltipPlace="top" />
-        ) : (
-          <OfflineIndicator 
-          address={thread.subplebbitAddress} 
-          className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
-          tooltipPlace="top" />
-      )}
-      </div>
-      <BoardForm selectedStyle={selectedStyle} 
-        onMouseOver={() => {
-          setIsHoveringForMenu(thread.cid);
-          handleMouseOnLeaveThread();
-        }}
-        onMouseLeave={() => setIsHoveringForMenu(false)}
-      style={{ all: "unset"}}>
-        <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
-          R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
-          {linkCount > 0 ? (
-            <>
-              &nbsp;/
-              L:&nbsp;<b key={`i-`}>{linkCount}</b>
-            </>
-          ) : null}
-        <PostMenu 
-          style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
-          position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-          zIndex: '999'}}
-          key={`pmb-`} 
-          title="Post menu"
-          ref={el => { 
-            threadMenuRefs.current[thread.cid] = el; 
-            postMenuRef.current = el; 
-          }}
-          className='post-menu-button' 
-          id='post-menu-button-catalog'
-          rotated={openMenuCid === thread.cid}
-          onClick={(event) => {
-            event.stopPropagation();
-            const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
-            setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-            setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
-          }}                              
-        >
-          ▶
-        </PostMenu>
+            ) : null}
+            {commentMediaInfo?.type === "video" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                <video className="card" ref={imageRef} key={`fti-`} 
+                src={commentMediaInfo.url} 
+                alt={commentMediaInfo.type} 
+                onError={(e) => e.target.src = fallbackImgUrl} /> 
+              </span>
+            ) : null}
+            {commentMediaInfo?.type === "audio" ? (
+                <audio className="card" ref={imageRef} controls 
+                key={`fti-`} 
+                src={commentMediaInfo.url} 
+                alt={commentMediaInfo.type} 
+                onError={(e) => e.target.src = fallbackImgUrl} />
+            ) : null}
+          </Link>
+        ) : null}
+        <div key={`ti-`} className="thread-icons" >
+        {isMediaShowed ? (                          
+            <OfflineIndicator 
+            address={thread.subplebbitAddress} 
+            className="thread-icon offline-icon"
+            tooltipPlace="top" />
+          ) : (
+            <OfflineIndicator 
+            address={thread.subplebbitAddress} 
+            className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
+            tooltipPlace="top" />
+        )}
         </div>
-        {createPortal(
-          <PostMenuCatalog selectedStyle={selectedStyle} 
-            ref={el => {postMenuCatalogRef.current = el}}
-            onClick={(event) => event.stopPropagation()}
-            style={{position: "absolute", 
-            top: menuPosition.top + 7, 
-            left: menuPosition.left}}>
-            <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
-            style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
-            >
-              <ul className="post-menu-catalog">
-                <li onClick={() => {
-                  handleOptionClick(thread.cid);
-                  handleShareClick(selectedAddress, thread.cid);
-                }}>Share thread</li>
-                <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
-                  <>
-                    {authorAddress === account?.author.address || 
-                    authorAddress === account?.signer.address ? (
-                      <>
-                        <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                        <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
-                      </>
-                    ) : null}
-                    {isModerator ? (
-                      <>
-                        {authorAddress === account?.author.address ||
-                        authorAddress === account?.signer.address ? (
-                          null
-                        ) : (
-                          <li onClick={() => {
+        <BoardForm selectedStyle={selectedStyle} 
+          onMouseOver={() => {
+            setIsHoveringForMenu(thread.cid);
+            handleMouseOnLeaveThread();
+          }}
+          onMouseLeave={() => setIsHoveringForMenu(false)}
+        style={{ all: "unset"}}>
+          <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
+            R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
+            {linkCount > 0 ? (
+              <>
+                &nbsp;/
+                L:&nbsp;<b key={`i-`}>{linkCount}</b>
+              </>
+            ) : null}
+          <PostMenu 
+            style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
+            position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+            zIndex: '999'}}
+            key={`pmb-`} 
+            title="Post menu"
+            ref={el => { 
+              threadMenuRefs.current[thread.cid] = el; 
+              postMenuRef.current = el; 
+            }}
+            className='post-menu-button' 
+            id='post-menu-button-catalog'
+            rotated={openMenuCid === thread.cid}
+            onClick={(event) => {
+              event.stopPropagation();
+              const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+              setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+              setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
+            }}                              
+          >
+            ▶
+          </PostMenu>
+          </div>
+          {createPortal(
+            <PostMenuCatalog selectedStyle={selectedStyle} 
+              ref={el => {postMenuCatalogRef.current = el}}
+              onClick={(event) => event.stopPropagation()}
+              style={{position: "absolute", 
+              top: menuPosition.top + 7, 
+              left: menuPosition.left}}>
+              <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
+              style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
+              >
+                <ul className="post-menu-catalog">
+                  <li onClick={() => {
+                    handleOptionClick(thread.cid);
+                    handleShareClick(selectedAddress, thread.cid);
+                  }}>Share thread</li>
+                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
+                    <>
+                      {authorAddress === account?.author.address || 
+                      authorAddress === account?.signer.address ? (
+                        <>
+                          <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                          <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                        </>
+                      ) : null}
+                      {isModerator ? (
+                        <>
+                          {authorAddress === account?.author.address ||
+                          authorAddress === account?.signer.address ? (
+                            null
+                          ) : (
+                            <li onClick={() => {
+                              setSelectedAddress(thread.subplebbitAddress);
+                              setModeratingCommentCid(thread.cid)
+                              setIsModerationOpen(true); 
+                              handleOptionClick(thread.cid);
+                              setDeletePost(true);
+                            }}>
+                            Delete post
+                            </li>
+                          )}
+                          <li
+                          onClick={() => {
                             setSelectedAddress(thread.subplebbitAddress);
                             setModeratingCommentCid(thread.cid)
                             setIsModerationOpen(true); 
                             handleOptionClick(thread.cid);
-                            setDeletePost(true);
                           }}>
-                          Delete post
+                            Mod tools
                           </li>
-                        )}
-                        <li
-                        onClick={() => {
-                          setSelectedAddress(thread.subplebbitAddress);
-                          setModeratingCommentCid(thread.cid)
-                          setIsModerationOpen(true); 
-                          handleOptionClick(thread.cid);
-                        }}>
-                          Mod tools
-                        </li>
-                      </>
-                    ) : null}
-                  </>
-                )}</VerifiedAuthor>
-                {(commentMediaInfo && (
-                  commentMediaInfo.type === 'image' || 
-                  (commentMediaInfo.type === 'webpage' && 
-                  commentMediaInfo.thumbnail))) ? ( 
-                    <li 
-                    onMouseOver={() => {setIsImageSearchOpen(true)}}
-                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                      Image search »
-                      <ul className="dropdown-menu post-menu-catalog"
-                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a 
-                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >Google</a>
-                        </li>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a
-                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >Yandex</a>
-                        </li>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a
-                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >SauceNAO</a>
-                        </li>
-                      </ul>
-                    </li>
-                  ) : null
-                }
-                <li 
-                onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
-                onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
-                  View on »
-                  <ul className="dropdown-menu post-menu-catalog"
-                    style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
-                    <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a 
-                      href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Plebbit</a>
-                    </li>
-                    {/* <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a
-                      href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Seedit</a>
-                    </li> */}
-                    <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a
-                      href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Plebones</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-          </PostMenuCatalog>, document.body
-        )}
-      </BoardForm>
-      <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
-      onClick={() => setSelectedThread(thread.cid)}>
-        <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
-        ref={(el) => (threadRefs.current[thread.cid] = el)}>
-          <span key={`teaser-width${thread.cid}`} ref={textRef} 
-          onMouseOver={() => {
-            setIsHoveringOnThread(thread.cid);
-            setIsHoveringForMenu(thread.cid);
-          }}
-          onMouseLeave={() => setIsHoveringForMenu(false)}>
-            <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
-            {thread.content ? `: ${thread.content}` : null}
-          </span>
-        </div>
-      </Link>
-    </div>
+                        </>
+                      ) : null}
+                    </>
+                  )}</VerifiedAuthor>
+                  {(commentMediaInfo && (
+                    commentMediaInfo.type === 'image' || 
+                    (commentMediaInfo.type === 'webpage' && 
+                    commentMediaInfo.thumbnail))) ? ( 
+                      <li 
+                      onMouseOver={() => {setIsImageSearchOpen(true)}}
+                      onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                        Image search »
+                        <ul className="dropdown-menu post-menu-catalog"
+                          style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a 
+                            href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >Google</a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a
+                            href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >Yandex</a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a
+                            href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >SauceNAO</a>
+                          </li>
+                        </ul>
+                      </li>
+                    ) : null
+                  }
+                  <li 
+                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                    View on »
+                    <ul className="dropdown-menu post-menu-catalog"
+                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a 
+                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebbit</a>
+                      </li>
+                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Seedit</a>
+                      </li> */}
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebones</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </PostMenuCatalog>, document.body
+          )}
+        </BoardForm>
+        <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+        onClick={() => setSelectedThread(thread.cid)}>
+          <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
+            <span key={`teaser-width${thread.cid}`} ref={textRef} 
+            onMouseOver={() => {
+              setIsHoveringOnThread(thread.cid);
+              setIsHoveringForMenu(thread.cid);
+              const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+              setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}>
+              <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+              {thread.content ? `: ${thread.content}` : null}
+            </span>
+          </div>
+        </Link>
+      </div>
+    </>
   );
 };
 
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index da1faa87..2287866b 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
 import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
-import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
+import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import EditModal from '../modals/EditModal';
@@ -67,6 +67,7 @@ const CatalogPost = ({post}) => {
   const fallbackImgUrl = "assets/filedeleted-res.gif";
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
+  const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,7 +75,10 @@ const CatalogPost = ({post}) => {
   const [commentCid, setCommentCid] = useState(null);
 
   const threadMenuRefs = useRef({});
+  const threadRefs = useRef({});
   const postMenuRef = useRef(null);
+  const popupRef = useRef(null);
+  const imageRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
   const textRef = useRef(null);
   const { subplebbitAddress } = useParams();
@@ -85,13 +89,7 @@ const CatalogPost = ({post}) => {
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
 
   const account = useAccount();
-  const popupRef = useRef(null);
-  const threadRefs = useRef([]);
-  const imageRef = useRef(null);
-  const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
-  const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
-  const [spaceOnLeft,setSpaceOnLeft] = useState(null);
-  const [spaceOnRight,setSpaceOnRight] = useState(null);
+  const [spaceOnRight, setSpaceOnRight] = useState(null);
   const [isCalculationDone,setIsCalculationDone] = useState(false);
   const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
   const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -106,6 +104,9 @@ const CatalogPost = ({post}) => {
     (commentMediaInfo.type === 'iframe' &&
     commentMediaInfo.thumbnail))) ? true : false;
 
+  const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
+  const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
+
   useLayoutEffect(() => {
     const executeLayoutEffectLogic = () => {
       let ref;
@@ -114,20 +115,27 @@ const CatalogPost = ({post}) => {
       } else {
         ref = textRef.current;
       }
-  
+
       if (ref && popupRef.current) {
-        const threadRect = ref.getBoundingClientRect();
+        const rect = ref.getBoundingClientRect();
         const viewportWidth = document.documentElement.clientWidth;
-        const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
-        const spaceLeft = threadRect.left;
-        setIsEnoughSpaceOnLeft(spaceLeft > 500);
-        setIsEnoughSpaceOnRight(spaceRight > 500);
+        const spaceRight = viewportWidth - (rect.left + rect.width);
+        const spaceLeft = rect.left;
+        const popupWidth = popupRef.current.getBoundingClientRect().width;
+
+        if (spaceRight < 200 && spaceLeft > spaceRight) {
+          popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
+        } else if (spaceRight < 200 && spaceLeft < spaceRight) {
+          popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
+        } else {
+          popupRef.current.style.maxWidth = `${popupWidth}px`;
+        }
+
         setSpaceOnRight(spaceRight);
-        setSpaceOnLeft(spaceLeft);
         setIsCalculationDone(true);
       }
     };
-  
+
     if (isHoveringOnThread) {
       const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
       return () => {
@@ -135,8 +143,9 @@ const CatalogPost = ({post}) => {
         setIsCalculationDone(false);
       };
     }
-  
-  }, [isHoveringOnThread, isMediaShowed]);
+
+  }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
+
   
   
   const handleMouseOnLeaveThread = () => {
@@ -146,7 +155,6 @@ const CatalogPost = ({post}) => {
         setIsHoveringOnThread("")
     } else if (isHoveringOnThread !== "") {
         setIsHoveringOnThread("");
-        setIsEnoughSpaceOnRight(null);
         setIsCalculationDone(false);
     }
   };
@@ -590,304 +598,302 @@ const CatalogPost = ({post}) => {
     )
   } else {
     return (
-      <div key={`thread-`} className="thread"
-      onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
+      <>
         {isHoveringOnThread === thread.cid  ? 
-          <div ref={popupRef}
-          className="thread_popup"
-          onMouseOver={() => handleMouseOnLeaveThread()}
-          style={{
-          opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
-          visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
-          left: 
-            isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
-            ? isMediaShowed
-            ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-                : `calc(50% + ${textRect.width}px / 2 + 5px)`                   
-            : 'auto',
-          right:
-            isCalculationDone && isEnoughSpaceOnRight !== null && 
-              (popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
-                ? isMediaShowed
-                ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-                : `calc(50% + ${textRect.width}px / 2 + 5px)`   
-            : 'auto',
-          }}>
-            <p
-            className="thread_popup_content"
-            style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
-              spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
-              spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
+        createPortal(
+          <PostPreview selectedStyle={selectedStyle}>
+            <div ref={popupRef}
+            className="post-preview"
+            onMouseOver={() => handleMouseOnLeaveThread()}
+            style={{
+            visibility: isCalculationDone ? 'visible' : 'hidden',
+            left: 
+              isCalculationDone && spaceOnRight > 250
+              ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
+              isCalculationDone && spaceOnRight < 250
+              ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
+              : 'auto',
+            top: popupPosition.top + 5,
             }}>
-            <span className="thread_popup_title" >
-              {thread.title ? `${thread.title} ` : "Posted "}
-            </span>
-            by 
-            <span className="thread_popup_author"> 
-            {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
-            </span> 
-              {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
-            </p>
-            <div>
+              <span className="post-subject" >
+                {thread.title ? `${thread.title} ` : "Posted "}
+              </span>
+              by 
+              <span className="post-author"> 
+              {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
+              </span>
+              <span className='post-ago'>
+                {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
+              </span>
               {thread.replyCount > 0 ?
-              <p className="thread_popup_lastReply">
+                <div className='post-last'>
                   Last reply by 
-                  <span className="thread_popup_author"> Anonymous </span> 
-                  {getFormattedTime(thread.lastReplyTimestamp)}
-                </p>
+                  <span className="post-author"> Anonymous </span>
+                  <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
+                </div>
               : null}
             </div>
-          </div> 
+          </PostPreview>, document.body
+        )
         : null }
-        {commentMediaInfo?.url ? (
-          <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
-          onClick={() => setSelectedThread(thread.cid)} 
-          onMouseOver={() => {
-            setIsHoveringOnThread(thread.cid);
-            setIsHoveringForMenu(thread.cid);
-          }}
-          onMouseLeave={() => setIsHoveringForMenu(false)}>
-            {commentMediaInfo?.type === "webpage" ? (
-              thread.thumbnailUrl ? (
+        <div key={`thread-`} className="thread"
+        ref={el => { 
+          threadRefs.current[thread.cid] = el; 
+        }}
+        onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
+          {commentMediaInfo?.url ? (
+            <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+            onClick={() => setSelectedThread(thread.cid)} 
+            onMouseOver={() => {
+              setIsHoveringOnThread(thread.cid);
+              setIsHoveringForMenu(thread.cid);
+              const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+              setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}>
+              {commentMediaInfo?.type === "webpage" ? (
+                thread.thumbnailUrl ? (
+                  <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                    <img className="card" ref={imageRef} key={`img-`}
+                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                    onError={(e) => {
+                      e.target.src = fallbackImgUrl
+                      e.target.onerror = null;
+                    }}  />
+                  </span>
+                ) : null
+              ) : null}
+              {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
                 <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                   <img className="card" ref={imageRef} key={`img-`}
                   src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                  onError={(e) => { e.target.src = fallbackImgUrl }}  />
+                </span>
+              ) : null}
+              {commentMediaInfo?.type === "image" ? (
+                <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                  <img className="card" ref={imageRef} key={`img-`}
+                  src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                   onError={(e) => {
                     e.target.src = fallbackImgUrl
-                    e.target.onerror = null;
-                  }}  />
+                    e.target.onerror = null;}}  />
                 </span>
-              ) : null
-            ) : null}
-            {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
-              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-                <img className="card" ref={imageRef} key={`img-`}
-                src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                onError={(e) => { e.target.src = fallbackImgUrl }}  />
-              </span>
-            ) : null}
-            {commentMediaInfo?.type === "image" ? (
-              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-                <img className="card" ref={imageRef} key={`img-`}
-                src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-                onError={(e) => {
-                  e.target.src = fallbackImgUrl
-                  e.target.onerror = null;}}  />
-              </span>
-            ) : null}
-            {commentMediaInfo?.type === "video" ? (
-              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-                <video className="card" ref={imageRef} key={`fti-`} 
+              ) : null}
+              {commentMediaInfo?.type === "video" ? (
+                <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                  <video className="card" ref={imageRef} key={`fti-`} 
+                  src={commentMediaInfo.url} 
+                  alt={commentMediaInfo.type} 
+                  onError={(e) => e.target.src = fallbackImgUrl} /> 
+                </span>
+              ) : null}
+              {commentMediaInfo?.type === "audio" ? (
+                <audio className="card" ref={imageRef} controls 
+                key={`fti-`} 
                 src={commentMediaInfo.url} 
                 alt={commentMediaInfo.type} 
-                onError={(e) => e.target.src = fallbackImgUrl} /> 
-              </span>
-            ) : null}
-            {commentMediaInfo?.type === "audio" ? (
-              <audio className="card" ref={imageRef} controls 
-              key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} />
-            ) : null}
-          </Link>
-        ) : null}
-        {isMediaShowed ? (
-        <div key={`ti-`} className="thread-icons" >
-          {thread.pinned ? (
-            <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
-            style={{
-              imageRendering: "pixelated",}} />
+                onError={(e) => e.target.src = fallbackImgUrl} />
+              ) : null}
+            </Link>
           ) : null}
-          {thread.locked ? (
-            <span key={`li-`} className="thread-icon closed-icon" title="Closed"
-            style={{
-              imageRendering: "pixelated",}} />
-          ) : null}
-        </div>
-        ) : null}
-        <BoardForm selectedStyle={selectedStyle} 
-        onMouseOver={() => {
-          setIsHoveringForMenu(thread.cid);
-          handleMouseOnLeaveThread();
-        }}
-        onMouseLeave={() => setIsHoveringForMenu(false)}
-        style={{ all: "unset"}}>
-          <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
-            R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
-            {linkCount > 0 ? (
-              <>
-                &nbsp;/
-                L:&nbsp;<b key={`i-`}>{linkCount}</b>
-              </>
+          {isMediaShowed ? (
+          <div key={`ti-`} className="thread-icons" >
+            {thread.pinned ? (
+              <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
+              style={{
+                imageRendering: "pixelated",}} />
+            ) : null}
+            {thread.locked ? (
+              <span key={`li-`} className="thread-icon closed-icon" title="Closed"
+              style={{
+                imageRendering: "pixelated",}} />
             ) : null}
-            {isMediaShowed ? null : (
-              <div className='thread-icons' 
-              style={{position: 'absolute', top: '-2px', right: '15px'}}>
-                {thread.pinned ? (
-                  <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
-                  style={{
-                    imageRendering: "pixelated",}} />
-                ) : null}
-                {thread.locked ? (
-                  <span key={`li-`} className="thread-icon closed-icon" title="Closed"
-                  style={{
-                    imageRendering: "pixelated",}} />
-                ) : null}
-              </div>
-            )}
-          <PostMenu 
-            style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
-            position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-            zIndex: '999'}}
-            key={`pmb-`} 
-            title="Post menu"
-            ref={el => { 
-              threadMenuRefs.current[thread.cid] = el; 
-              postMenuRef.current = el; 
-            }}
-            className='post-menu-button' 
-            id='post-menu-button-catalog'
-            rotated={openMenuCid === thread.cid}
-            onClick={(event) => {
-              event.stopPropagation();
-              const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
-              setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-              setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
-            }}                              
-          >
-            ▶
-          </PostMenu>
           </div>
-          {createPortal(
-            <PostMenuCatalog selectedStyle={selectedStyle} 
-              ref={el => {postMenuCatalogRef.current = el}}
-              onClick={(event) => event.stopPropagation()}
-              style={{position: "absolute", 
-              top: menuPosition.top + 7, 
-              left: menuPosition.left}}>
-              <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
-              style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
-              >
-                <ul className="post-menu-catalog">
-                  <li onClick={() => {
-                    handleOptionClick(thread.cid);
-                    handleShareClick(selectedAddress, thread.cid);
-                  }}>Share thread</li>
-                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
-                    <>
-                      {authorAddress === account?.author.address || 
-                      authorAddress === account?.signer.address ? (
-                        <>
-                          <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                          <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
-                        </>
-                      ) : null}
-                      {isModerator ? (
-                        <>
-                          {authorAddress === account?.author.address ||
-                          authorAddress === account?.signer.address ? (
-                            null
-                          ) : (
-                            <li onClick={() => {
+          ) : null}
+          <BoardForm selectedStyle={selectedStyle} 
+          onMouseOver={() => {
+            setIsHoveringForMenu(thread.cid);
+            handleMouseOnLeaveThread();
+          }}
+          onMouseLeave={() => setIsHoveringForMenu(false)}
+          style={{ all: "unset"}}>
+            <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
+              R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
+              {linkCount > 0 ? (
+                <>
+                  &nbsp;/
+                  L:&nbsp;<b key={`i-`}>{linkCount}</b>
+                </>
+              ) : null}
+              {isMediaShowed ? null : (
+                <div className='thread-icons' 
+                style={{position: 'absolute', top: '-2px', right: '15px'}}>
+                  {thread.pinned ? (
+                    <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
+                    style={{
+                      imageRendering: "pixelated",}} />
+                  ) : null}
+                  {thread.locked ? (
+                    <span key={`li-`} className="thread-icon closed-icon" title="Closed"
+                    style={{
+                      imageRendering: "pixelated",}} />
+                  ) : null}
+                </div>
+              )}
+            <PostMenu 
+              style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
+              position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+              zIndex: '999'}}
+              key={`pmb-`} 
+              title="Post menu"
+              ref={el => { 
+                threadMenuRefs.current[thread.cid] = el; 
+                postMenuRef.current = el; 
+              }}
+              className='post-menu-button' 
+              id='post-menu-button-catalog'
+              rotated={openMenuCid === thread.cid}
+              onClick={(event) => {
+                event.stopPropagation();
+                const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
+              }}                              
+            >
+              ▶
+            </PostMenu>
+            </div>
+            {createPortal(
+              <PostMenuCatalog selectedStyle={selectedStyle} 
+                ref={el => {postMenuCatalogRef.current = el}}
+                onClick={(event) => event.stopPropagation()}
+                style={{position: "absolute", 
+                top: menuPosition.top + 7, 
+                left: menuPosition.left}}>
+                <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
+                >
+                  <ul className="post-menu-catalog">
+                    <li onClick={() => {
+                      handleOptionClick(thread.cid);
+                      handleShareClick(selectedAddress, thread.cid);
+                    }}>Share thread</li>
+                    <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
+                      <>
+                        {authorAddress === account?.author.address || 
+                        authorAddress === account?.signer.address ? (
+                          <>
+                            <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                            <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                          </>
+                        ) : null}
+                        {isModerator ? (
+                          <>
+                            {authorAddress === account?.author.address ||
+                            authorAddress === account?.signer.address ? (
+                              null
+                            ) : (
+                              <li onClick={() => {
+                                setModeratingCommentCid(thread.cid)
+                                setIsModerationOpen(true); 
+                                handleOptionClick(thread.cid);
+                                setDeletePost(true);
+                              }}>
+                              Delete post
+                              </li>
+                            )}
+                            <li
+                            onClick={() => {
                               setModeratingCommentCid(thread.cid)
                               setIsModerationOpen(true); 
                               handleOptionClick(thread.cid);
-                              setDeletePost(true);
                             }}>
-                            Delete post
+                              Mod tools
                             </li>
-                          )}
-                          <li
-                          onClick={() => {
-                            setModeratingCommentCid(thread.cid)
-                            setIsModerationOpen(true); 
-                            handleOptionClick(thread.cid);
-                          }}>
-                            Mod tools
-                          </li>
-                        </>
-                      ) : null}
-                    </>
-                  )}</VerifiedAuthor>
-                  {isMediaShowed ? ( 
-                      <li 
-                      onMouseOver={() => {setIsImageSearchOpen(true)}}
-                      onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                        Image search »
-                        <ul className="dropdown-menu post-menu-catalog"
-                          style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                          <li onClick={() => handleOptionClick(thread.cid)}>
-                            <a 
-                            href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                            target="_blank" rel="noreferrer"
-                            >Google</a>
-                          </li>
-                          <li onClick={() => handleOptionClick(thread.cid)}>
-                            <a
-                            href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                            target="_blank" rel="noreferrer"
-                            >Yandex</a>
-                          </li>
-                          <li onClick={() => handleOptionClick(thread.cid)}>
-                            <a
-                            href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                            target="_blank" rel="noreferrer"
-                            >SauceNAO</a>
-                          </li>
-                        </ul>
-                      </li>
-                    ) : null
-                  }
-                  <li 
-                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
-                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
-                    View on »
-                    <ul className="dropdown-menu post-menu-catalog"
-                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
-                      <li onClick={() => handleOptionClick(thread.cid)}>
-                        <a 
-                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                        target="_blank" rel="noreferrer"
-                        >Plebbit</a>
-                      </li>
-                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
-                        <a
-                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                        target="_blank" rel="noreferrer"
-                        >Seedit</a>
-                      </li> */}
-                      <li onClick={() => handleOptionClick(thread.cid)}>
-                        <a
-                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
-                        target="_blank" rel="noreferrer"
-                        >Plebones</a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </PostMenuCatalog>, document.body
-          )}
-        </BoardForm>
-        <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
-        onClick={() => setSelectedThread(thread.cid)}>
-          <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
-          <div style={{cursor:"text"}}
-            ref={(el) => (threadRefs.current[thread.cid] = el)}>
-              <span key={`teaser-width${thread.cid}`} ref={textRef} 
-              onMouseOver={() => {
-                setIsHoveringOnThread(thread.cid);
-                setIsHoveringForMenu(thread.cid);
-              }}
-              onMouseLeave={() => setIsHoveringForMenu(false)}>
-                <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
-                {thread.content ? `: ${thread.content}` : null}
-              </span>
-          </div>
-          </div>
-        </Link>
-      </div>
+                          </>
+                        ) : null}
+                      </>
+                    )}</VerifiedAuthor>
+                    {isMediaShowed ? ( 
+                        <li 
+                        onMouseOver={() => {setIsImageSearchOpen(true)}}
+                        onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                          Image search »
+                          <ul className="dropdown-menu post-menu-catalog"
+                            style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                            <li onClick={() => handleOptionClick(thread.cid)}>
+                              <a 
+                              href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                              target="_blank" rel="noreferrer"
+                              >Google</a>
+                            </li>
+                            <li onClick={() => handleOptionClick(thread.cid)}>
+                              <a
+                              href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                              target="_blank" rel="noreferrer"
+                              >Yandex</a>
+                            </li>
+                            <li onClick={() => handleOptionClick(thread.cid)}>
+                              <a
+                              href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                              target="_blank" rel="noreferrer"
+                              >SauceNAO</a>
+                            </li>
+                          </ul>
+                        </li>
+                      ) : null
+                    }
+                    <li 
+                    onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                    onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                      View on »
+                      <ul className="dropdown-menu post-menu-catalog"
+                        style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                        <li onClick={() => handleOptionClick(thread.cid)}>
+                          <a 
+                          href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                          target="_blank" rel="noreferrer"
+                          >Plebbit</a>
+                        </li>
+                        {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                          <a
+                          href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                          target="_blank" rel="noreferrer"
+                          >Seedit</a>
+                        </li> */}
+                        <li onClick={() => handleOptionClick(thread.cid)}>
+                          <a
+                          href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                          target="_blank" rel="noreferrer"
+                          >Plebones</a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </PostMenuCatalog>, document.body
+            )}
+          </BoardForm>
+          <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+          onClick={() => setSelectedThread(thread.cid)}>
+            <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
+            <div style={{cursor:"text"}}>
+                <span key={`teaser-width${thread.cid}`} ref={textRef} 
+                onMouseOver={() => {
+                  setIsHoveringOnThread(thread.cid);
+                  setIsHoveringForMenu(thread.cid);
+                  const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+                  setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+                }}
+                onMouseLeave={() => setIsHoveringForMenu(false)}>
+                  <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+                  {thread.content ? `: ${thread.content}` : null}
+                </span>
+            </div>
+            </div>
+          </Link>
+        </div>
+      </>
     )
   }
 };
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 7e6333c8..d345c94f 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
 import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
-import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
+import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
   const fallbackImgUrl = "assets/filedeleted-res.gif";
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
+  const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
   const account = useAccount();
   const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
   const threadMenuRefs = useRef({});
+  const threadRefs = useRef({});
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
   const popupRef = useRef(null);
-  const threadRefs = useRef([]);
   const textRef = useRef(null);
   const imageRef = useRef(null);
-  const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
-  const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
-  const [spaceOnLeft,setSpaceOnLeft] = useState(null);
-  const [spaceOnRight,setSpaceOnRight] = useState(null);
+  const [spaceOnRight, setSpaceOnRight] = useState(null);
   const [isCalculationDone,setIsCalculationDone] = useState(false);
   const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
   const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
     commentMediaInfo.thumbnail))) ? true : false;
 
 
+    const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
+    const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
+  
     useLayoutEffect(() => {
       const executeLayoutEffectLogic = () => {
         let ref;
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
         } else {
           ref = textRef.current;
         }
-    
+  
         if (ref && popupRef.current) {
-          const threadRect = ref.getBoundingClientRect();
+          const rect = ref.getBoundingClientRect();
           const viewportWidth = document.documentElement.clientWidth;
-          const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
-          const spaceLeft = threadRect.left;
-          setIsEnoughSpaceOnLeft(spaceLeft > 500);
-          setIsEnoughSpaceOnRight(spaceRight > 500);
+          const spaceRight = viewportWidth - (rect.left + rect.width);
+          const spaceLeft = rect.left;
+          const popupWidth = popupRef.current.getBoundingClientRect().width;
+  
+          if (spaceRight < 200 && spaceLeft > spaceRight) {
+            popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
+          } else if (spaceRight < 200 && spaceLeft < spaceRight) {
+            popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
+          } else {
+            popupRef.current.style.maxWidth = `${popupWidth}px`;
+          }
+  
           setSpaceOnRight(spaceRight);
-          setSpaceOnLeft(spaceLeft);
           setIsCalculationDone(true);
         }
       };
-    
+  
       if (isHoveringOnThread) {
         const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
         return () => {
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
           setIsCalculationDone(false);
         };
       }
-    
-    }, [isHoveringOnThread, isMediaShowed]);
+  
+    }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
   
   
   const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
         setIsHoveringOnThread("")
     } else if (isHoveringOnThread !== "") {
         setIsHoveringOnThread("");
-        setIsEnoughSpaceOnRight(null);
         setIsCalculationDone(false);
     }
   };
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
 
 
   return (
-    <div key={`thread-`} className="thread" 
-    onMouseLeave={() => {handleMouseOnLeaveThread()}}>
+    <>
       {isHoveringOnThread === thread.cid  ? 
-        <div ref={popupRef}
-        className="thread_popup"
-        onMouseOver={() => handleMouseOnLeaveThread()}
-        style={{
-        opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
-        visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
-        left: 
-          isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
-          ? isMediaShowed
-          ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-              : `calc(50% + ${textRect.width}px / 2 + 5px)`                   
-          : 'auto',
-        right:
-          isCalculationDone && isEnoughSpaceOnRight !== null && 
-            (popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
-              ? isMediaShowed
-              ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
-              : `calc(50% + ${textRect.width}px / 2 + 5px)`   
-          : 'auto',
-        }}>
-          <p
-          className="thread_popup_content"
-          style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
-            spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
-            spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
-          }}>
-          <span className="thread_popup_title" >
-            {thread.title ? `${thread.title} ` : "Posted "}
-          </span>
-          by 
-          <span className="thread_popup_author"> 
-          {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
-          </span> 
-            {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
-          </p>
-          <div>
-            {thread.replyCount > 0 ?
-            <p className="thread_popup_lastReply">
-                Last reply by 
-                <span className="thread_popup_author"> Anonymous </span> 
-                {getFormattedTime(thread.lastReplyTimestamp)}
-              </p>
-            : null}
-          </div>
-        </div> 
-      : null }
-      {commentMediaInfo?.url ? (
-        <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
-        onClick={() => setSelectedThread(thread.cid)} 
-        onMouseOver={() => {
-          setIsHoveringOnThread(thread.cid);
-          setIsHoveringForMenu(thread.cid);
+        createPortal(
+          <PostPreview selectedStyle={selectedStyle}>
+            <div ref={popupRef}
+            className="post-preview"
+            onMouseOver={() => handleMouseOnLeaveThread()}
+            style={{
+            visibility: isCalculationDone ? 'visible' : 'hidden',
+            left: 
+              isCalculationDone && spaceOnRight > 250
+              ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
+              isCalculationDone && spaceOnRight < 250
+              ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
+              : 'auto',
+            top: popupPosition.top + 5,
+            }}>
+              <span className="post-subject" >
+                {thread.title ? `${thread.title} ` : "Posted "}
+              </span>
+              by 
+              <span className="post-author"> 
+              {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} 
+              </span>
+              <span className='post-ago'>
+                {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
+              </span>
+              {thread.replyCount > 0 ?
+                <div className='post-last'>
+                  Last reply by 
+                  <span className="post-author"> Anonymous </span>
+                  <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
+                </div>
+              : null}
+            </div>
+          </PostPreview>, document.body
+        )
+        : null }
+      <div key={`thread-`} className="thread" 
+        ref={el => { 
+          threadRefs.current[thread.cid] = el; 
         }}
-        onMouseLeave={() => setIsHoveringForMenu(false)}>
-          {commentMediaInfo?.type === "webpage" ? (
-            thread.thumbnailUrl ? (
+      onMouseLeave={() => {handleMouseOnLeaveThread()}}>
+        {commentMediaInfo?.url ? (
+          <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+          onClick={() => setSelectedThread(thread.cid)} 
+          onMouseOver={() => {
+            setIsHoveringOnThread(thread.cid);
+            setIsHoveringForMenu(thread.cid);
+            const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+            setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+          }}
+          onMouseLeave={() => setIsHoveringForMenu(false)}>
+            {commentMediaInfo?.type === "webpage" ? (
+              thread.thumbnailUrl ? (
+                <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                  <img className="card" ref={imageRef} key={`img-`}
+                  src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                  onError={(e) => {
+                    e.target.src = fallbackImgUrl
+                    e.target.onerror = null;
+                  }}  />
+                </span>
+              ) : null
+            ) : null}
+            {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
               <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <img className="card" ref={imageRef} key={`img-`}
                 src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                onError={(e) => { e.target.src = fallbackImgUrl }}  />
+              </span>
+            ) : null}
+            {commentMediaInfo?.type === "image" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                <img className="card" ref={imageRef} key={`img-`}
+                src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
-                  e.target.onerror = null;
-                }}  />
+                  e.target.onerror = null;}}  />
               </span>
-            ) : null
-          ) : null}
-          {commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <img className="card" ref={imageRef} key={`img-`}
-              src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-              onError={(e) => { e.target.src = fallbackImgUrl }}  />
-            </span>
-          ) : null}
-          {commentMediaInfo?.type === "image" ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <img className="card" ref={imageRef} key={`img-`}
-              src={commentMediaInfo.url} alt={commentMediaInfo.type} 
-              onError={(e) => {
-                e.target.src = fallbackImgUrl
-                e.target.onerror = null;}}  />
-            </span>
-          ) : null}              
-          {commentMediaInfo?.type === "video" ? (
-            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
-              <video className="card" ref={imageRef} key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} /> 
-            </span>
-          ) : null}
-          {commentMediaInfo?.type === "audio" ? (
-              <audio className="card" ref={imageRef} controls 
-              key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} />
-          ) : null}
-        </Link>
-      ) : null}
-      <div key={`ti-`} className="thread-icons" >
-      {isMediaShowed ? (                          
-          <OfflineIndicator 
-          address={thread.subplebbitAddress} 
-          className="thread-icon offline-icon"
-          tooltipPlace="top" />
-        ) : (
-          <OfflineIndicator 
-          address={thread.subplebbitAddress} 
-          className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
-          tooltipPlace="top" />
-      )}
-      </div>
-      <BoardForm selectedStyle={selectedStyle} 
-        onMouseOver={() => {
-          setIsHoveringForMenu(thread.cid);
-          handleMouseOnLeaveThread();
-        }}
-        onMouseLeave={() => setIsHoveringForMenu(false)}
-      style={{ all: "unset"}}>
-        <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
-          R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
-          {linkCount > 0 ? (
-            <>
-              &nbsp;/
-              L:&nbsp;<b key={`i-`}>{linkCount}</b>
-            </>
-          ) : null}
-        <PostMenu 
-          style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
-          position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-          zIndex: '999'}}
-          key={`pmb-`} 
-          title="Post menu"
-          ref={el => { 
-            threadMenuRefs.current[thread.cid] = el; 
-            postMenuRef.current = el; 
-          }}
-          className='post-menu-button' 
-          id='post-menu-button-catalog'
-          rotated={openMenuCid === thread.cid}
-          onClick={(event) => {
-            event.stopPropagation();
-            const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
-            setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-            setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
-          }}                              
-        >
-          ▶
-        </PostMenu>
+            ) : null}              
+            {commentMediaInfo?.type === "video" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
+                <video className="card" ref={imageRef} key={`fti-`} 
+                src={commentMediaInfo.url} 
+                alt={commentMediaInfo.type} 
+                onError={(e) => e.target.src = fallbackImgUrl} /> 
+              </span>
+            ) : null}
+            {commentMediaInfo?.type === "audio" ? (
+                <audio className="card" ref={imageRef} controls 
+                key={`fti-`} 
+                src={commentMediaInfo.url} 
+                alt={commentMediaInfo.type} 
+                onError={(e) => e.target.src = fallbackImgUrl} />
+            ) : null}
+          </Link>
+        ) : null}
+        <div key={`ti-`} className="thread-icons" >
+        {isMediaShowed ? (                          
+            <OfflineIndicator 
+            address={thread.subplebbitAddress} 
+            className="thread-icon offline-icon"
+            tooltipPlace="top" />
+          ) : (
+            <OfflineIndicator 
+            address={thread.subplebbitAddress} 
+            className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
+            tooltipPlace="top" />
+        )}
         </div>
-        {createPortal(
-          <PostMenuCatalog selectedStyle={selectedStyle} 
-            ref={el => {postMenuCatalogRef.current = el}}
-            onClick={(event) => event.stopPropagation()}
-            style={{position: "absolute", 
-            top: menuPosition.top + 7, 
-            left: menuPosition.left}}>
-            <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
-            style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
-            >
-              <ul className="post-menu-catalog">
-                <li onClick={() => {
-                  handleOptionClick(thread.cid);
-                  handleShareClick(selectedAddress, thread.cid);
-                }}>Share thread</li>
-                <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
-                  <>
-                    {authorAddress === account?.author.address || 
-                    authorAddress === account?.signer.address ? (
-                      <>
-                        <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-                        <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
-                      </>
-                    ) : null}
-                    {isModerator ? (
-                      <>
-                        {authorAddress === account?.author.address ||
-                        authorAddress === account?.signer.address ? (
-                          null
-                        ) : (
-                          <li onClick={() => {
+        <BoardForm selectedStyle={selectedStyle} 
+          onMouseOver={() => {
+            setIsHoveringForMenu(thread.cid);
+            handleMouseOnLeaveThread();
+          }}
+          onMouseLeave={() => setIsHoveringForMenu(false)}
+        style={{ all: "unset"}}>
+          <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
+            R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
+            {linkCount > 0 ? (
+              <>
+                &nbsp;/
+                L:&nbsp;<b key={`i-`}>{linkCount}</b>
+              </>
+            ) : null}
+          <PostMenu 
+            style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
+            position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+            zIndex: '999'}}
+            key={`pmb-`} 
+            title="Post menu"
+            ref={el => { 
+              threadMenuRefs.current[thread.cid] = el; 
+              postMenuRef.current = el; 
+            }}
+            className='post-menu-button' 
+            id='post-menu-button-catalog'
+            rotated={openMenuCid === thread.cid}
+            onClick={(event) => {
+              event.stopPropagation();
+              const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+              setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+              setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
+            }}                              
+          >
+            ▶
+          </PostMenu>
+          </div>
+          {createPortal(
+            <PostMenuCatalog selectedStyle={selectedStyle} 
+              ref={el => {postMenuCatalogRef.current = el}}
+              onClick={(event) => event.stopPropagation()}
+              style={{position: "absolute", 
+              top: menuPosition.top + 7, 
+              left: menuPosition.left}}>
+              <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
+              style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
+              >
+                <ul className="post-menu-catalog">
+                  <li onClick={() => {
+                    handleOptionClick(thread.cid);
+                    handleShareClick(selectedAddress, thread.cid);
+                  }}>Share thread</li>
+                  <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
+                    <>
+                      {authorAddress === account?.author.address || 
+                      authorAddress === account?.signer.address ? (
+                        <>
+                          <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                          <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                        </>
+                      ) : null}
+                      {isModerator ? (
+                        <>
+                          {authorAddress === account?.author.address ||
+                          authorAddress === account?.signer.address ? (
+                            null
+                          ) : (
+                            <li onClick={() => {
+                              setSelectedAddress(thread.subplebbitAddress);
+                              setModeratingCommentCid(thread.cid)
+                              setIsModerationOpen(true); 
+                              handleOptionClick(thread.cid);
+                              setDeletePost(true);
+                            }}>
+                            Delete post
+                            </li>
+                          )}
+                          <li
+                          onClick={() => {
                             setSelectedAddress(thread.subplebbitAddress);
                             setModeratingCommentCid(thread.cid)
                             setIsModerationOpen(true); 
                             handleOptionClick(thread.cid);
-                            setDeletePost(true);
                           }}>
-                          Delete post
+                            Mod tools
                           </li>
-                        )}
-                        <li
-                        onClick={() => {
-                          setSelectedAddress(thread.subplebbitAddress);
-                          setModeratingCommentCid(thread.cid)
-                          setIsModerationOpen(true); 
-                          handleOptionClick(thread.cid);
-                        }}>
-                          Mod tools
-                        </li>
-                      </>
-                    ) : null}
-                  </>
-                )}</VerifiedAuthor>
-                {(commentMediaInfo && (
-                  commentMediaInfo.type === 'image' || 
-                  (commentMediaInfo.type === 'webpage' && 
-                  commentMediaInfo.thumbnail))) ? ( 
-                    <li 
-                    onMouseOver={() => {setIsImageSearchOpen(true)}}
-                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                      Image search »
-                      <ul className="dropdown-menu post-menu-catalog"
-                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a 
-                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >Google</a>
-                        </li>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a
-                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >Yandex</a>
-                        </li>
-                        <li onClick={() => handleOptionClick(thread.cid)}>
-                          <a
-                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                          target="_blank" rel="noreferrer"
-                          >SauceNAO</a>
-                        </li>
-                      </ul>
-                    </li>
-                  ) : null
-                }
-                <li 
-                onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
-                onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
-                  View on »
-                  <ul className="dropdown-menu post-menu-catalog"
-                    style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
-                    <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a 
-                      href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Plebbit</a>
-                    </li>
-                    {/* <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a
-                      href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Seedit</a>
-                    </li> */}
-                    <li onClick={() => handleOptionClick(thread.cid)}>
-                      <a
-                      href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
-                      target="_blank" rel="noreferrer"
-                      >Plebones</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-          </PostMenuCatalog>, document.body
-        )}
-      </BoardForm>
-      <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
-      onClick={() => setSelectedThread(thread.cid)}>
-        <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
-        ref={(el) => (threadRefs.current[thread.cid] = el)}>
-        <span key={`teaser-width${thread.cid}`} ref={textRef} 
-          onMouseOver={() => {
-            setIsHoveringOnThread(thread.cid);
-            setIsHoveringForMenu(thread.cid);
-          }}
-          onMouseLeave={() => setIsHoveringForMenu(false)}>
-          <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
-          {thread.content ? `: ${thread.content}` : null}
-        </span>
-        </div>
-      </Link>
-    </div>
+                        </>
+                      ) : null}
+                    </>
+                  )}</VerifiedAuthor>
+                  {(commentMediaInfo && (
+                    commentMediaInfo.type === 'image' || 
+                    (commentMediaInfo.type === 'webpage' && 
+                    commentMediaInfo.thumbnail))) ? ( 
+                      <li 
+                      onMouseOver={() => {setIsImageSearchOpen(true)}}
+                      onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                        Image search »
+                        <ul className="dropdown-menu post-menu-catalog"
+                          style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a 
+                            href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >Google</a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a
+                            href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >Yandex</a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a
+                            href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                            target="_blank" rel="noreferrer"
+                            >SauceNAO</a>
+                          </li>
+                        </ul>
+                      </li>
+                    ) : null
+                  }
+                  <li 
+                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                    View on »
+                    <ul className="dropdown-menu post-menu-catalog"
+                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a 
+                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebbit</a>
+                      </li>
+                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Seedit</a>
+                      </li> */}
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebones</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </PostMenuCatalog>, document.body
+          )}
+        </BoardForm>
+        <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+        onClick={() => setSelectedThread(thread.cid)}>
+          <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
+          <span key={`teaser-width${thread.cid}`} ref={textRef} 
+            onMouseOver={() => {
+              setIsHoveringOnThread(thread.cid);
+              setIsHoveringForMenu(thread.cid);
+              const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+              setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}>
+            <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+            {thread.content ? `: ${thread.content}` : null}
+          </span>
+          </div>
+        </Link>
+      </div>
+    </>
   );
 };