diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index fa43eaad..76fc0cff 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -1,32 +1,32 @@
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
-import InfiniteScroll from 'react-infinite-scroller';
-import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate} from 'react-router-dom';
+import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
-import packageJson from '../../../package.json';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import useError from '../../hooks/useError';
-import useFeedStateString from '../../hooks/useFeedStateString';
-import useSuccess from '../../hooks/useSuccess';
+import { VirtuosoGrid } from 'react-virtuoso';
+import { useAccount, useFeed, usePublishCommentEdit, 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, GridContainer } from '../styled/views/Catalog.styled';
+import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
+import CatalogLoader from '../CatalogLoader';
+import EditModal from '../modals/EditModal';
+import ImageBanner from '../ImageBanner';
+import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
+import ModerationModal from '../modals/ModerationModal';
+import OfflineIndicator from '../OfflineIndicator';
+import SettingsModal from '../modals/SettingsModal';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
-import CatalogLoader from '../CatalogLoader';
-import ImageBanner from '../ImageBanner';
-import OfflineIndicator from '../OfflineIndicator';
-import VerifiedAuthor from '../VerifiedAuthor';
-import CreateBoardModal from '../modals/CreateBoardModal';
-import EditModal from '../modals/EditModal';
-import ModerationModal from '../modals/ModerationModal';
-import SettingsModal from '../modals/SettingsModal';
-import { BoardForm, Break, Container, Header, NavBar, PostMenu } from '../styled/views/Board.styled';
-import { PostMenuCatalog, Threads } from '../styled/views/Catalog.styled';
-import { AuthorDeleteAlert, Footer, TopBar } from '../styled/views/Thread.styled';
-const { version } = packageJson
+import useError from '../../hooks/useError';
+import useFeedStateString from '../../hooks/useFeedStateString';
+import useSuccess from '../../hooks/useSuccess';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import packageJson from '../../../package.json'
+const {version} = packageJson
 
 
 const AllCatalog = () => {
@@ -47,7 +47,7 @@ const AllCatalog = () => {
     setSelectedThread,
     setSelectedTitle,
   } = useGeneralStore(state => state);
-
+  
 
   const threadMenuRefs = useRef({});
   const postMenuRef = useRef(null);
@@ -57,7 +57,7 @@ const AllCatalog = () => {
   const navigate = useNavigate();
   const [, setNewErrorMessage] = useError();
   const [, setNewSuccessMessage] = useSuccess();
-
+  
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
@@ -68,14 +68,14 @@ const AllCatalog = () => {
   const [deletePost, setDeletePost] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
-  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' });
-  const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
+  const { feed, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 
   const stateString = useFeedStateString(subplebbits);
@@ -83,13 +83,13 @@ const AllCatalog = () => {
 
   useEffect(() => {
     let permissions = {};
-
+  
     selectedFeed.forEach(thread => {
       const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-
-      if (subplebbit && subplebbit.roles) {
+  
+      if (subplebbit && subplebbit.roles) { 
         const role = subplebbit.roles[account?.author.address]?.role;
-
+    
         if (role === 'moderator' || role === 'admin' || role === 'owner') {
           permissions[thread.subplebbitAddress] = true;
         } else {
@@ -97,9 +97,9 @@ const AllCatalog = () => {
         }
       }
     });
-
+  
     setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);
+  }, [account?.author.address, selectedFeed, subplebbits]);  
 
 
   const handleOptionClick = () => {
@@ -120,7 +120,7 @@ const AllCatalog = () => {
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
+    
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
@@ -134,23 +134,24 @@ const AllCatalog = () => {
       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
       setPrevScrollPos(currentScrollPos);
     }, 50);
-
+  
     window.addEventListener('scroll', debouncedHandleScroll);
-
+  
     return () => window.removeEventListener('scroll', debouncedHandleScroll);
   }, [prevScrollPos, visible]);
 
 
   const tryLoadMore = async () => {
-    try { loadMore() }
-    catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
+    try {loadMore()} 
+    catch (e)
+    {await new Promise(resolve => setTimeout(resolve, 1000))}
   };
 
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      setNewSuccessMessage('Challenge Success');
-    }
+        setNewSuccessMessage('Challenge Success');
+    } 
     else if (challengeVerification.challengeSuccess === false) {
       setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
       console.log('challenge failed', challengeVerification);
@@ -174,16 +175,16 @@ const AllCatalog = () => {
 
   const getChallengeAnswersFromUser = async (challenges) => {
     setChallengesArray(challenges);
-
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
       const challengeImg = new Image();
       challengeImg.src = imageSource;
-
+  
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-
+  
         const handleKeyDown = async (event) => {
           if (event.key === 'Enter') {
             const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
@@ -199,7 +200,7 @@ const AllCatalog = () => {
 
         setResolveCaptchaPromise(resolve);
       };
-
+  
       challengeImg.onerror = () => {
         reject(setNewErrorMessage('Could not load challenges'));
       };
@@ -216,8 +217,8 @@ const AllCatalog = () => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
-
-
+  
+  
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -264,8 +265,8 @@ const AllCatalog = () => {
     setOriginalCommentContent(comment.content);
     setIsEditModalOpen(true);
   }
-
-
+  
+  
   useEffect(() => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
@@ -281,7 +282,7 @@ const AllCatalog = () => {
     }
   }, [editedComment, setIsAuthorEdit]);
 
-
+  
   useEffect(() => {
     let isActive = true;
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
@@ -328,69 +329,69 @@ const AllCatalog = () => {
   return (
     <>
       <Helmet>
-        <title>p/All - Catalog - plebchan</title>
+      <title>p/All - Catalog - plebchan</title>
       </Helmet>
       <Container>
         <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
-        <ModerationModal
-          selectedStyle={selectedStyle}
-          isOpen={isModerationOpen}
-          closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
-          deletePost={deletePost} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <ModerationModal 
+        selectedStyle={selectedStyle}
+        isOpen={isModerationOpen}
+        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
+        deletePost={deletePost} />
         <EditModal
-          selectedStyle={selectedStyle}
-          isOpen={isEditModalOpen}
-          closeModal={() => setIsEditModalOpen(false)}
-          originalCommentContent={originalCommentContent} />
+        selectedStyle={selectedStyle}
+        isOpen={isEditModalOpen}
+        closeModal={() => setIsEditModalOpen(false)}
+        originalCommentContent={originalCommentContent} />
         <NavBar selectedStyle={selectedStyle}>
           <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
             <span className="nav">
               [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
-        )
-                }
-  }>Create Board</span>
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
               ]
-[
-  <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-]
-[
-  <Link to="/">Home</Link>
-]
-            </span >
+              [
+              <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              ]
+              [
+              <Link to="/">Home</Link>
+              ]
+            </span>
             <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
               <div className="nav-container">
                 <div className="board-select">
@@ -400,27 +401,27 @@ const AllCatalog = () => {
                     <option value="all">All</option>
                     <option value="subscriptions">Subscriptions</option>
                     {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                     )
                   }>Create Board</span>
                 </div>
                 <div className="page-jump">
                   <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                   &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                 </div>
               </div>
             </div>
             <div id="separator-mobile">&nbsp;</div>
             <div id="separator-mobile">&nbsp;</div>
           </>
-        </NavBar >
+        </NavBar>
         <Header selectedStyle={selectedStyle}>
           <>
             <div className="banner">
@@ -435,7 +436,7 @@ const AllCatalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -450,27 +451,15 @@ const AllCatalog = () => {
             <Link to={`/p/all`}>Return</Link>
             ]
           </div>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
           <div id="return-button-mobile">
             <span className="btn-wrap-catalog btn-wrap">
               <Link to={`/p/all`}>Return</Link>
             </span>
           </div>
-          <div id="refresh-button-mobile">
-            <span className="btn-wrap-catalog btn-wrap">
-              <Link to={`/p/all/catalog`}>Refresh</Link>
-            </span>
-          </div>
           {subplebbits.state === "succeeded" ? (
             null
           ) : (
-            <div id="stats" style={{ float: "right", marginTop: "5px" }}>
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
               <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
@@ -478,280 +467,276 @@ const AllCatalog = () => {
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {feed ? (
-            <InfiniteScroll
-              pageStart={0}
-              loadMore={tryLoadMore}
-              hasMore={hasMore}
-            >
-              {feed.map((thread, index) => {
-        const commentMediaInfo = getCommentMediaInfo(thread);
-        const fallbackImgUrl = "assets/filedeleted-res.gif";
-        const isModerator = moderatorPermissions[thread.subplebbitAddress];
-        const linkCount = countLinks(thread);
-        return (
-                  <div key={`thread-${index}`} className="thread"
-              onMouseOver={() => { setIsHoveringOnThread(thread.cid) }}
-              onMouseLeave={() => { setIsHoveringOnThread('') }}>
-              {commentMediaInfo?.url ? (
-                <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
-                  onClick={() => setSelectedThread(thread.cid)}>
-                  {commentMediaInfo?.type === "webpage" ? (
-                    thread.thumbnailUrl ? (
-                      <img className="card" key={`img-${index}`}
-                        src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                        onError={(e) => {
-                          e.target.src = fallbackImgUrl
-                          e.target.onerror = null;
-                        }} />
-                    ) : null
-                  ) : null}
-                  {commentMediaInfo?.type === "image" ? (
-                    <img className="card" key={`img-${index}`}
-                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                      onError={(e) => {
-                        e.target.src = fallbackImgUrl
-                        e.target.onerror = null;
-                      }} />
-                  ) : null}
-                  {commentMediaInfo?.type === "video" ? (
-                    <video className="card" key={`fti-${index}`}
-                      src={commentMediaInfo.url}
-                      alt={commentMediaInfo.type}
-                      onError={(e) => e.target.src = fallbackImgUrl} />
-                  ) : null}
-                  {commentMediaInfo?.type === "audio" ? (
-                    <audio className="card" controls
-                      key={`fti-${index}`}
-                      src={commentMediaInfo.url}
-                      alt={commentMediaInfo.type}
-                      onError={(e) => e.target.src = fallbackImgUrl} />
-                  ) : null}
-                </Link>
-              ) : null}
-              <div key={`ti-${index}`} className="thread-icons" >
-                {(commentMediaInfo && (
-                  commentMediaInfo.type === 'image' ||
-                  commentMediaInfo.type === 'video' ||
-                  (commentMediaInfo.type === 'webpage' &&
-                    commentMediaInfo.thumbnail))) ? (
-                  <OfflineIndicator
-                    address={thread.subplebbitAddress}
-                    className="thread-icon offline-icon"
-                    tooltipPlace="top" />
-                ) : (
-                  <OfflineIndicator
-                    address={thread.subplebbitAddress}
-                    className="thread-icon offline-icon-no-link"
-                    tooltipPlace="top" />
-                )}
-              </div>
-              <BoardForm selectedStyle={selectedStyle}
-                style={{ all: "unset" }}>
-                <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
-                  R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
-                  {linkCount > 0 ? (
-                    <>
-                      &nbsp;/
-                      L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
-                    </>
-                  ) : null}
-                  <PostMenu
-                    style={{
-                      display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
-                      position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                      zIndex: '999'
-                    }}
-                    key={`pmb-${index}`}
-                    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)}>Hide 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);
-                                  }}>
-                                  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
-                        }
-                      </ul>
+          {feed.length > 1 ? (
+            <VirtuosoGrid
+              style={{width: '100%', height: '100%'}}
+              data={feed}
+              increaseViewportBy={{bottom: 600, top: 600}}
+              itemContent={(index) => {
+                const thread = feed[index];
+                const commentMediaInfo = getCommentMediaInfo(thread);
+                const fallbackImgUrl = "assets/filedeleted-res.gif";
+                const isModerator = moderatorPermissions[thread.subplebbitAddress];
+                const linkCount = countLinks(thread);
+                return (
+                  <div key={`thread-${index}`} className="thread" 
+                  onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
+                  onMouseLeave={() => {setIsHoveringOnThread('')}}>
+                    {commentMediaInfo?.url ? (
+                      <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                      onClick={() => setSelectedThread(thread.cid)}>
+                        {commentMediaInfo?.type === "webpage" ? (
+                          thread.thumbnailUrl ? (
+                          <img className="card" key={`img-${index}`}
+                          src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                          onError={(e) => {
+                            e.target.src = fallbackImgUrl
+                            e.target.onerror = null;
+                          }}  />
+                          ) : null
+                        ) : null}
+                        {commentMediaInfo?.type === "image" ? (
+                          <img className="card" key={`img-${index}`}
+                          src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                          onError={(e) => {
+                            e.target.src = fallbackImgUrl
+                            e.target.onerror = null;}}  />
+                        ) : null}
+                        {commentMediaInfo?.type === "video" ? (
+                            <video className="card" key={`fti-${index}`} 
+                            src={commentMediaInfo.url} 
+                            alt={commentMediaInfo.type} 
+                            onError={(e) => e.target.src = fallbackImgUrl} /> 
+                        ) : null}
+                        {commentMediaInfo?.type === "audio" ? (
+                            <audio className="card" controls 
+                            key={`fti-${index}`} 
+                            src={commentMediaInfo.url} 
+                            alt={commentMediaInfo.type} 
+                            onError={(e) => e.target.src = fallbackImgUrl} />
+                        ) : null}
+                      </Link>
+                    ) : null}
+                    <div key={`ti-${index}`} className="thread-icons" >
+                    {(commentMediaInfo && (
+                      commentMediaInfo.type === 'image' || 
+                      commentMediaInfo.type === 'video' || 
+                      (commentMediaInfo.type === 'webpage' && 
+                      commentMediaInfo.thumbnail))) ? (                          
+                        <OfflineIndicator 
+                        address={thread.subplebbitAddress} 
+                        className="thread-icon offline-icon"
+                        tooltipPlace="top" />
+                      ) : (
+                        <OfflineIndicator 
+                        address={thread.subplebbitAddress} 
+                        className="thread-icon offline-icon-no-link"
+                        tooltipPlace="top" />
+                    )}
                     </div>
-                  </PostMenuCatalog>, document.body
-                )}
-              </BoardForm>
-              <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
-                onClick={() => setSelectedThread(thread.cid)}>
-                <div key={`t-${index}`} className="teaser">
-                  <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
-                  {thread.content ? `: ${thread.content}` : null}
-                </div>
-              </Link>
-            </div>
+                    <BoardForm selectedStyle={selectedStyle} 
+                    style={{ all: "unset"}}>
+                      <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
+                        R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
+                        {linkCount > 0 ? (
+                          <>
+                            &nbsp;/
+                            L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
+                          </>
+                        ) : null}
+                      <PostMenu 
+                        style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
+                        position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+                        zIndex: '999'}}
+                        key={`pmb-${index}`} 
+                        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)}>Hide 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);
+                                      }}>
+                                        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
+                              }
+                            </ul>
+                          </div>
+                        </PostMenuCatalog>, document.body
+                      )}
+                    </BoardForm>
+                    <Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                    onClick={() => setSelectedThread(thread.cid)}>
+                      <div key={`t-${index}`} className="teaser">
+                        <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
+                        {thread.content ? `: ${thread.content}` : null}
+                      </div>
+                    </Link>
+                  </div>
                 )
-              })}
-            </InfiniteScroll>
-          ) : (
-            <CatalogLoader />
-          )}
-        </Threads >
-  <Footer selectedStyle={selectedStyle}>
-    <Break id="break" selectedStyle={selectedStyle} style={{
-      marginTop: "-36px",
-      width: "100%",
-    }} />
-    <Break selectedStyle={selectedStyle} style={{
-      width: "100%",
-    }} />
-    <span className="style-changer" style={{
-      float: "right",
-      marginTop: "2px",
-    }}>
-      Style:
-
-      <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
-        <option value="Yotsuba">Yotsuba</option>
-        <option value="Yotsuba-B">Yotsuba B</option>
-        <option value="Futaba">Futaba</option>
-        <option value="Burichan">Burichan</option>
-        <option value="Tomorrow">Tomorrow</option>
-        <option value="Photon">Photon</option>
-      </select>
-    </span>
-    <NavBar selectedStyle={selectedStyle} style={{
-      marginTop: "42px",
-    }}>
-      <>
-        <span className="boardList">
-          [
-          <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-          /
-          <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-          ]&nbsp;[
-          {defaultSubplebbits.map((subplebbit, index) => (
-            <span className="boardList" key={`span-${subplebbit.address}`}>
-              {index === 0 ? null : "\u00a0"}
-              <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
-              >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-              {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              }}
+              endReached={tryLoadMore}
+              useWindowScroll={true}
+              components={{List: GridContainer}}
+            />
+          ) : (<CatalogLoader />)}
+        </Threads>
+        <Footer selectedStyle={selectedStyle}>
+          <Break id="break" selectedStyle={selectedStyle} style={{
+            marginTop: "-36px",
+            width: "100%",
+          }} />
+          <Break selectedStyle={selectedStyle} style={{
+            width: "100%",
+          }} />
+          <span className="style-changer" style={{
+            float: "right",
+            marginTop: "2px",
+          }}>
+            Style:
+             
+            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+              <option value="Yotsuba">Yotsuba</option>
+              <option value="Yotsuba-B">Yotsuba B</option>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <NavBar selectedStyle={selectedStyle} style={{
+            marginTop: "42px",
+          }}>
+          <>
+            <span className="boardList">
+              [
+                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
+              ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+                </span>
+              ))}
+              ]
             </span>
-          ))}
-          ]
-        </span>
-        <span className="nav">
+              <span className="nav">
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                 [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
+                <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
-[
-  <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-]
-[
-  <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
-  )}>Home</Link>
-]
-              </span >
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
             </>
-          </NavBar >
+          </NavBar>
           <div id="version">
             plebchan v{version}. GPL-2.0
           </div>
@@ -763,16 +748,16 @@ const AllCatalog = () => {
               marginTop: "5px",
               marginBottom: "15px",
             }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
             &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
           </div>
-        </Footer >
-      </Container >
+        </Footer>
+      </Container>
     </>
   );
 }
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 1f585d69..029a9dc3 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import InfiniteScroll from 'react-infinite-scroller';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -30,7 +29,7 @@ import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
-const { version } = packageJson
+const {version} = packageJson
 
 
 const Catalog = () => {
@@ -57,7 +56,7 @@ const Catalog = () => {
   } = useGeneralStore(state => state);
 
   const { anonymousMode } = useAnonModeStore();
-
+  
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
@@ -68,10 +67,10 @@ const Catalog = () => {
   const selectedThreadCidRef = useRef(null);
 
   const navigate = useNavigate();
-
+  
   const [, setNewErrorMessage] = useError();
   const [, setNewSuccessMessage] = useSuccess();
-
+  
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -83,16 +82,15 @@ const Catalog = () => {
   const [deletePost, setDeletePost] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: [`${selectedAddress}`], sortType: 'active' });
-  const { subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
   const account = useAccount();
-
+  const { feed, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
   const stateString = useStateString(subplebbit);
   let feedWithDescriptionAndRules = [];
 
@@ -100,18 +98,18 @@ const Catalog = () => {
 
 
   if (subplebbit.rules) {
-    feedWithDescriptionAndRules.push({ type: 'rules', content: subplebbit.rules });
+      feedWithDescriptionAndRules.push({type: 'rules', content: subplebbit.rules});
   }
 
   if (subplebbit.description) {
-    feedWithDescriptionAndRules.push({ type: 'description', content: subplebbit.description });
-  }
+    feedWithDescriptionAndRules.push({type: 'description', content: subplebbit.description});
+}
 
 
   useEffect(() => {
-    if (subplebbit.roles !== undefined) {
+    if (subplebbit.roles !== undefined) { 
       const role = subplebbit.roles[account?.author.address]?.role;
-
+  
       if (role === 'moderator' || role === 'admin' || role === 'owner') {
         setIsModerator(true);
       } else {
@@ -137,12 +135,12 @@ const Catalog = () => {
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
+    
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [openMenuCid, handleOutsideClick]);
-
+  
 
 
   useEffect(() => {
@@ -167,8 +165,8 @@ const Catalog = () => {
     }
   }, [errorString, setNewErrorMessage]);
 
-
-  const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: selectedAddress });
+  
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
 
 
   useEffect(() => {
@@ -192,16 +190,17 @@ const Catalog = () => {
       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
       setPrevScrollPos(currentScrollPos);
     }, 50);
-
+  
     window.addEventListener('scroll', debouncedHandleScroll);
-
+  
     return () => window.removeEventListener('scroll', debouncedHandleScroll);
   }, [prevScrollPos, visible]);
 
 
   const tryLoadMore = async () => {
-    try { loadMore() }
-    catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
+    try {loadMore()} 
+    catch (e)
+    {await new Promise(resolve => setTimeout(resolve, 1000))}
   };
 
 
@@ -224,7 +223,7 @@ const Catalog = () => {
   const onChallenge = async (challenges, comment) => {
     setPendingComment(comment);
     let challengeAnswers = [];
-
+    
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
@@ -235,7 +234,7 @@ const Catalog = () => {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
   };
-
+  
 
   useEffect(() => {
     setPublishCommentOptions((prevPublishCommentOptions) => ({
@@ -243,7 +242,7 @@ const Catalog = () => {
       subplebbitAddress: selectedAddress,
     }));
   }, [selectedAddress]);
-
+  
 
   const [publishCommentOptions, setPublishCommentOptions] = useState({
     subplebbitAddress: selectedAddress,
@@ -253,7 +252,7 @@ const Catalog = () => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
-
+  
 
   const { publishComment, index } = usePublishComment(publishCommentOptions);
 
@@ -264,7 +263,7 @@ const Catalog = () => {
     }
   }, [index, navigate, setPendingCommentIndex]);
 
-
+  
   const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
@@ -283,7 +282,7 @@ const Catalog = () => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-
+    
     if (subjectRef.current.value === "") {
       setNewErrorMessage('Subject field is mandatory');
       return;
@@ -306,24 +305,24 @@ const Catalog = () => {
   const updateSigner = useCallback(async () => {
     if (anonymousMode) {
       setExecuteAnonMode(true);
-
+  
       let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
       let signer;
-
+  
       if (!storedSigners[selectedThreadCidRef]) {
         signer = await account?.plebbit.createSigner();
         storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
         localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
       } else {
         const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
-
+          
         try {
-          signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
+          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
         } catch (error) {
           console.log(error);
         }
       }
-
+        
       setPublishCommentOptions(prevPublishCommentOptions => {
         const newPublishCommentOptions = {
           ...prevPublishCommentOptions,
@@ -333,16 +332,16 @@ const Catalog = () => {
             address: signer?.address
           },
         };
-
+  
         if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
           return newPublishCommentOptions;
         }
-
+  
         return prevPublishCommentOptions;
       });
     }
   }, [selectedThreadCidRef, anonymousMode, account]);
-
+  
   useEffect(() => {
     updateSigner();
   }, [updateSigner]);
@@ -358,20 +357,20 @@ const Catalog = () => {
       setExecuteAnonMode(false);
     }
   }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
-
-
+  
+  
   const getChallengeAnswersFromUser = async (challenges) => {
     setChallengesArray(challenges);
-
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
       const challengeImg = new Image();
       challengeImg.src = imageSource;
-
+  
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-
+  
         const handleKeyDown = async (event) => {
           if (event.key === 'Enter') {
             const currentCaptchaResponse = captchaResponse;
@@ -384,10 +383,10 @@ const Catalog = () => {
 
         setCaptchaResponse('');
         document.addEventListener('keydown', handleKeyDown);
-
+        
         setResolveCaptchaPromise(resolve);
       };
-
+  
       challengeImg.onerror = () => {
         reject(setNewErrorMessage('Could not load challenges'));
       };
@@ -405,8 +404,8 @@ const Catalog = () => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
-
-
+  
+  
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -454,8 +453,8 @@ const Catalog = () => {
     setOriginalCommentContent(comment.content);
     setIsEditModalOpen(true);
   }
-
-
+  
+  
   useEffect(() => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
@@ -471,7 +470,7 @@ const Catalog = () => {
     }
   }, [editedComment]);
 
-
+  
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
@@ -519,56 +518,56 @@ const Catalog = () => {
       </Helmet>
       <Container>
         <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
-        <ModerationModal
-          selectedStyle={selectedStyle}
-          isOpen={isModerationOpen}
-          closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
-          deletePost={deletePost} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <ModerationModal 
+        selectedStyle={selectedStyle}
+        isOpen={isModerationOpen}
+        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
+        deletePost={deletePost} />
         <EditModal
-          selectedStyle={selectedStyle}
-          isOpen={isEditModalOpen}
-          closeModal={() => setIsEditModalOpen(false)}
-          originalCommentContent={originalCommentContent} />
+        selectedStyle={selectedStyle}
+        isOpen={isEditModalOpen}
+        closeModal={() => setIsEditModalOpen(false)}
+        originalCommentContent={originalCommentContent} />
         <NavBar selectedStyle={selectedStyle}>
           <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
             <span className="nav">
               [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                   )
-                }
+                )
+              }
               }>Create Board</span>
               ]
               [
@@ -587,20 +586,20 @@ const Catalog = () => {
                     <option value="all">All</option>
                     <option value="subscriptions">Subscriptions</option>
                     {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                     )
                   }>Create Board</span>
                 </div>
                 <div className="page-jump">
                   <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                   &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                 </div>
               </div>
             </div>
@@ -613,15 +612,15 @@ const Catalog = () => {
             <div className="banner">
               <ImageBanner />
             </div>
-            <>
+              <>
               <div className="board-title">{subplebbit.title ?? null}</div>
               <div className="board-address">p/{subplebbit.address}
-                <OfflineIndicator
-                  address={subplebbit.address}
-                  className="offline"
-                  tooltipPlace="top" />
+                <OfflineIndicator 
+                address={subplebbit.address} 
+                className="offline"
+                tooltipPlace="top" />
               </div>
-            </>
+              </>
           </>
         </Header>
         <Break selectedStyle={selectedStyle} />
@@ -629,12 +628,12 @@ const Catalog = () => {
           <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
             <div id="post-form-link-desktop">
               [
-              <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Start a New Thread</Link>
+                <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
               ]
             </div>
             <div id="post-form-link-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Start a New Thread</Link>
+                <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
               </span>
             </div>
           </PostFormLink>
@@ -653,9 +652,9 @@ const Catalog = () => {
               <tr data-type="Subject">
                 <td>Subject</td>
                 <td>
-                  <input name="sub" type="text" tabIndex={3} ref={subjectRef} />
-                  <input id="post-button" type="submit" value="Post" tabIndex={6}
-                    onClick={handleSubmit} />
+                  <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
                 </td>
               </tr>
               <tr data-type="Comment">
@@ -680,7 +679,7 @@ const Catalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -692,21 +691,14 @@ const Catalog = () => {
           </span>
           <div className="return-button" id="return-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}`} onClick={() => { window.scrollTo(0, 0) }}>Return</Link>
+            <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             ]
           </div>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
           {subplebbit.state === "succeeded" ? (
             <>
               <span className="subscribe-button-desktop">
                 [
-                <span id="subscribe" style={{ cursor: 'pointer' }}>
+                <span id="subscribe" style={{cursor: 'pointer'}}>
                   <span onClick={() => handleSubscribe()}>
                     {subscribed ? "Unsubscribe" : "Subscribe"}
                   </span>
@@ -715,296 +707,283 @@ const Catalog = () => {
               </span>
               <span className="subscribe-button-mobile">
                 <span className="btn-wrap" onClick={() => handleSubscribe()}>
-                  {subscribed ? "Unsubscribe" : "Subscribe"}
+                {subscribed ? "Unsubscribe" : "Subscribe"}
                 </span>
               </span>
             </>
           ) : (
-            <div id="stats" style={{ float: "right", marginTop: "5px" }}>
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
               <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="return-button-mobile">
             <span className="btn-wrap-catalog btn-wrap">
-              <Link to={`/p/${selectedAddress}`} onClick={() => { window.scrollTo(0, 0) }}>Return</Link>
+              <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             </span>
           </div>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {subplebbit?.state === "failed" ? (
-            null
-          ) : (
-            subplebbit.state === "succeeded" ? (
-              <InfiniteScroll
-                pageStart={0}
-                loadMore={tryLoadMore}
-                hasMore={hasMore}
-              >
-                {subplebbit.rules ? (
-                  <div className='thread'
+          {subplebbit?.state !== "failed" && subplebbit.state === "succeeded" ? (
+            <VirtuosoGrid
+              style={{width: '100%', height: '100%'}}
+              data={feed}
+              increaseViewportBy={{bottom: 600, top: 600}}
+              itemContent={(index) => {
+                const thread = feed[index];
+                const commentMediaInfo = getCommentMediaInfo(thread);
+                const linkCount = countLinks(thread);
+                const fallbackImgUrl = "assets/filedeleted-res.gif";
+                const item = feedWithDescriptionAndRules[index];
+
+                if (item?.type === 'rules') {
+                  return (
+                    <div className='thread'
                     onMouseOver={() => setIsHoveringOnThread('rules')}
                     onMouseLeave={() => setIsHoveringOnThread('')}>
-                    <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
-                      <div className='meta' title="(R)eplies / (L)ink Replies">
-                        R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
-                        <div className='thread-icons'
-                          style={{ position: 'absolute', top: '-2px', right: '15px' }}>
-                          <span className="thread-icon sticky-icon" title="Sticky"
+                      <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
+                        <div className='meta' title="(R)eplies / (L)ink Replies">
+                          R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
+                          <div className='thread-icons' 
+                          style={{position: 'absolute', top: '-2px', right: '15px'}}>
+                            <span className="thread-icon sticky-icon" title="Sticky"
                             style={{
-                              imageRendering: "pixelated",
-                            }} />
-                          <span className="thread-icon closed-icon" title="Closed"
+                              imageRendering: "pixelated",}} />
+                            <span className="thread-icon closed-icon" title="Closed"
                             style={{
-                              imageRendering: "pixelated",
-                            }} />
-                        </div>
-                        <PostMenu
-                          style={{
-                            display: isHoveringOnThread === "rules" ? 'inline-block' : 'none',
+                              imageRendering: "pixelated",}} />
+                          </div>
+                          <PostMenu 
+                            style={{ display: isHoveringOnThread === "rules" ? 'inline-block' : 'none',
                             position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                            zIndex: '999'
-                          }}
-                          title="Post menu"
-                          ref={el => {
-                            threadMenuRefs.current["rules"] = el;
-                            postMenuRef.current = el;
-                          }}
-                          className='post-menu-button'
-                          id='post-menu-button-catalog'
-                          rotated={openMenuCid === "rules"}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            const rect = threadMenuRefs.current["rules"].getBoundingClientRect();
-                            setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-                            setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
-                          }}
-                        >
-                          ▶
-                        </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-${"rules"}`}
-                            style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
+                            zIndex: '999'}}
+                            title="Post menu"
+                            ref={el => { 
+                              threadMenuRefs.current["rules"] = el; 
+                              postMenuRef.current = el; 
+                            }}
+                            className='post-menu-button' 
+                            id='post-menu-button-catalog'
+                            rotated={openMenuCid === "rules"}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              const rect = threadMenuRefs.current["rules"].getBoundingClientRect();
+                              setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                              setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
+                            }}                              
                           >
-                            <ul className="post-menu-catalog">
-                              <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
-                              {/* {isModerator ? (
+                            ▶
+                          </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-${"rules"}`}
+                            style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
+                            >
+                              <ul className="post-menu-catalog">
+                                <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
+                                {/* {isModerator ? (
                                   <>
                                     change rules
                                   </>
                                 ) : null} */}
-                            </ul>
-                          </div>
-                        </PostMenuCatalog>, document.body
-                      )}
-                    </BoardForm>
-                    <Link style={{ all: "unset", cursor: "pointer" }} to={`/p/${selectedAddress}/rules`}>
-                      <div className="teaser">
-                        <b>Rules</b>
-                        {": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
-                      </div>
-                    </Link>
-                  </div>
-                ) : null}
-                {subplebbit.description ? (
-                  <div className='thread'
-                    onMouseOver={() => setIsHoveringOnThread('description')}
-                    onMouseLeave={() => setIsHoveringOnThread('')}>
-                    <Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`}>
-                      {subplebbit.suggested?.avatarUrl ? (
-                        <img className='card'
-                          src={subplebbit.suggested.avatarUrl} alt="board avatar" />
-                      ) : null}
-                    </Link>
-                    {subplebbit.suggested?.avatarUrl ? (
-                      <div className='thread-icons'>
-                        <span className="thread-icon sticky-icon" title="Sticky"
-                          style={{
-                            imageRendering: "pixelated",
-                          }} />
-                        <span className="thread-icon closed-icon" title="Closed"
-                          style={{
-                            imageRendering: "pixelated",
-                          }} />
-                      </div>
-                    ) : null}
-                    <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
-                      <div className='meta' title="(R)eplies / (L)ink Replies">
-                        R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
-                        {subplebbit.suggested?.avatarUrl ? null : (
-                          <div className='thread-icons'
-                            style={{ position: 'absolute', top: '-2px', right: '15px' }}>
-                            <span className="thread-icon sticky-icon" title="Sticky"
-                              style={{
-                                imageRendering: "pixelated",
-                              }} />
-                            <span className="thread-icon closed-icon" title="Closed"
-                              style={{
-                                imageRendering: "pixelated",
-                              }} />
-                          </div>
+                              </ul>
+                            </div>
+                          </PostMenuCatalog>, document.body
                         )}
-                        <PostMenu
-                          style={{
-                            display: isHoveringOnThread === "description" ? 'inline-block' : 'none',
-                            position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                            zIndex: '999'
-                          }}
-                          title="Post menu"
-                          ref={el => {
-                            threadMenuRefs.current["description"] = el;
-                            postMenuRef.current = el;
-                          }}
-                          className='post-menu-button'
-                          id='post-menu-button-catalog'
-                          rotated={openMenuCid === "description"}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            const rect = threadMenuRefs.current["description"].getBoundingClientRect();
-                            setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-                            setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description"));
-                          }}
-                        >
-                          ▶
-                        </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-${"description"}`}
-                            style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
-                          >
-                            <ul className="post-menu-catalog">
-                              <li onClick={() => handleOptionClick("description")}>Hide thread</li>
-                              {/* {isModerator ? (
-                                  <>
-                                    change description
-                                  </>
-                                ) : null} */}
-                              {subplebbit.suggested?.avatarUrl ? (
-                                <li
-                                  onMouseOver={() => { setIsImageSearchOpen(true) }}
-                                  onMouseLeave={() => { setIsImageSearchOpen(false) }}>
-                                  Image search »
-                                  <ul className="dropdown-menu post-menu-catalog"
-                                    style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
-                                    <li onClick={() => handleOptionClick("description")}>
-                                      <a
-                                        href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`}
-                                        target="_blank" rel="noreferrer"
-                                      >Google</a>
-                                    </li>
-                                    <li onClick={() => handleOptionClick("description")}>
-                                      <a
-                                        href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`}
-                                        target="_blank" rel="noreferrer"
-                                      >Yandex</a>
-                                    </li>
-                                    <li onClick={() => handleOptionClick("description")}>
-                                      <a
-                                        href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`}
-                                        target="_blank" rel="noreferrer"
-                                      >SauceNAO</a>
-                                    </li>
-                                  </ul>
-                                </li>
-                              ) : null}
-                            </ul>
+                      </BoardForm>
+                      <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}>
+                          <div className="teaser">
+                            <b>Rules</b>
+                            {": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
                           </div>
-                        </PostMenuCatalog>, document.body
-                      )}
-                    </BoardForm>
-                    <Link style={{ all: "unset", cursor: "pointer" }} to={`/p/${selectedAddress}/description`}
-                      onClick={() => setSelectedThread("description")}>
-                      <div className="teaser">
-                        <b>Welcome to {subplebbit.title || subplebbit.address}</b>
-                        {": " + subplebbit.description}
-                      </div>
-                    </Link>
-                  </div>
-                ) : null}
-                {feed.map((thread, index) => {
-                  const commentMediaInfo = getCommentMediaInfo(thread);
-                  const fallbackImgUrl = "assets/filedeleted-res.gif";
-                  const linkCount = countLinks(thread);
+                        </Link>
+                    </div>
+                  )
+                } else if (item?.type === 'description') {
                   return (
-                    <div key={`thread-${index}`} className="thread"
-                      onMouseOver={() => { setIsHoveringOnThread(thread.cid) }}
-                      onMouseLeave={() => { setIsHoveringOnThread('') }}>
+                    <>
+                      <div className='thread'
+                      onMouseOver={() => setIsHoveringOnThread('description')}
+                      onMouseLeave={() => setIsHoveringOnThread('')}>
+                        <Link style={{all: 'unset', cursor: 'pointer'}} to={`/p/${selectedAddress}/description`}>
+                          {subplebbit.suggested?.avatarUrl ? (
+                            <img className='card'
+                            src={subplebbit.suggested.avatarUrl} alt="board avatar" />
+                          ) : null}
+                        </Link>
+                        {subplebbit.suggested?.avatarUrl ? (
+                        <div className='thread-icons'>
+                          <span className="thread-icon sticky-icon" title="Sticky"
+                              style={{
+                                imageRendering: "pixelated",}} />
+                          <span className="thread-icon closed-icon" title="Closed"
+                              style={{
+                                imageRendering: "pixelated",}} />
+                        </div>
+                        ) : null}
+                        <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
+                          <div className='meta' title="(R)eplies / (L)ink Replies">
+                            R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
+                            {subplebbit.suggested?.avatarUrl ? null : (
+                              <div className='thread-icons' 
+                              style={{position: 'absolute', top: '-2px', right: '15px'}}>
+                                <span className="thread-icon sticky-icon" title="Sticky"
+                              style={{
+                                imageRendering: "pixelated",}} />
+                                <span className="thread-icon closed-icon" title="Closed"
+                              style={{
+                                imageRendering: "pixelated",}} />
+                              </div>
+                            )}
+                            <PostMenu 
+                              style={{ display: isHoveringOnThread === "description" ? 'inline-block' : 'none',
+                              position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+                              zIndex: '999'}}
+                              title="Post menu"
+                              ref={el => { 
+                                threadMenuRefs.current["description"] = el; 
+                                postMenuRef.current = el; 
+                              }}
+                              className='post-menu-button' 
+                              id='post-menu-button-catalog'
+                              rotated={openMenuCid === "description"}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                const rect = threadMenuRefs.current["description"].getBoundingClientRect();
+                                setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                                setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description"));
+                              }}                              
+                            >
+                              ▶
+                            </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-${"description"}`}
+                              style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
+                                  <li onClick={() => handleOptionClick("description")}>Hide thread</li>
+                                  {/* {isModerator ? (
+                                    <>
+                                      change description
+                                    </>
+                                  ) : null} */}
+                                  {subplebbit.suggested?.avatarUrl ? (
+                                    <li 
+                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      Image search »
+                                      <ul className="dropdown-menu post-menu-catalog"
+                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        <li onClick={() => handleOptionClick("description")}>
+                                          <a 
+                                          href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Google</a>
+                                        </li>
+                                        <li onClick={() => handleOptionClick("description")}>
+                                          <a
+                                          href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`}
+                                          target="_blank" rel="noreferrer"
+                                          >Yandex</a>
+                                        </li>
+                                        <li onClick={() => handleOptionClick("description")}>
+                                          <a
+                                          href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`}
+                                          target="_blank" rel="noreferrer"
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null}
+                                </ul>
+                              </div>
+                            </PostMenuCatalog>, document.body
+                          )}
+                        </BoardForm>
+                        <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`} 
+                          onClick={() => setSelectedThread("description")}>
+                            <div className="teaser">
+                              <b>Welcome to {subplebbit.title || subplebbit.address}</b>
+                              {": " + subplebbit.description}
+                            </div>
+                          </Link>
+                      </div>
+                    </>
+                  )
+                } else {
+                  return (
+                    <div key={`thread-${index}`} className="thread" 
+                    onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
+                    onMouseLeave={() => {setIsHoveringOnThread('')}}>
                       {commentMediaInfo?.url ? (
-                        <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
-                          onClick={() => setSelectedThread(thread.cid)}>
+                        <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                        onClick={() => setSelectedThread(thread.cid)}>
                           {commentMediaInfo?.type === "webpage" ? (
                             thread.thumbnailUrl ? (
-                              <img className="card" key={`img-${index}`}
-                                src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                onError={(e) => {
-                                  e.target.src = fallbackImgUrl
-                                  e.target.onerror = null;
-                                }} />
+                            <img className="card" key={`img-${index}`}
+                            src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                            onError={(e) => {
+                              e.target.src = fallbackImgUrl
+                              e.target.onerror = null;
+                            }}  />
                             ) : null
                           ) : null}
                           {commentMediaInfo?.type === "image" ? (
                             <img className="card" key={`img-${index}`}
-                              src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                              onError={(e) => {
-                                e.target.src = fallbackImgUrl
-                                e.target.onerror = null;
-                              }} />
+                            src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                            onError={(e) => {
+                              e.target.src = fallbackImgUrl
+                              e.target.onerror = null;}}  />
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
-                            <video className="card" key={`fti-${index}`}
-                              src={commentMediaInfo.url}
-                              alt={commentMediaInfo.type}
-                              onError={(e) => e.target.src = fallbackImgUrl} />
+                              <video className="card" key={`fti-${index}`} 
+                              src={commentMediaInfo.url} 
+                              alt={commentMediaInfo.type} 
+                              onError={(e) => e.target.src = fallbackImgUrl} /> 
                           ) : null}
                           {commentMediaInfo?.type === "audio" ? (
-                            <audio className="card" controls
-                              key={`fti-${index}`}
-                              src={commentMediaInfo.url}
-                              alt={commentMediaInfo.type}
+                              <audio className="card" controls 
+                              key={`fti-${index}`} 
+                              src={commentMediaInfo.url} 
+                              alt={commentMediaInfo.type} 
                               onError={(e) => e.target.src = fallbackImgUrl} />
                           ) : null}
                         </Link>
                       ) : null}
                       {(commentMediaInfo && (
-                        commentMediaInfo.type === 'image' ||
-                        commentMediaInfo.type === 'video' ||
-                        (commentMediaInfo.type === 'webpage' &&
-                          commentMediaInfo.thumbnail))) ? (
-                        <div key={`ti-${index}`} className="thread-icons" >
-                          {thread.pinned ? (
-                            <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
-                              style={{
-                                imageRendering: "pixelated",
-                              }} />
-                          ) : null}
-                          {thread.locked ? (
-                            <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
-                              style={{
-                                imageRendering: "pixelated",
-                              }} />
-                          ) : null}
-                        </div>
+                      commentMediaInfo.type === 'image' || 
+                      commentMediaInfo.type === 'video' ||
+                      (commentMediaInfo.type === 'webpage' && 
+                      commentMediaInfo.thumbnail))) ? (
+                      <div key={`ti-${index}`} className="thread-icons" >
+                        {thread.pinned ? (
+                          <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
+                          style={{
+                            imageRendering: "pixelated",}} />
+                        ) : null}
+                        {thread.locked ? (
+                          <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
+                          style={{
+                            imageRendering: "pixelated",}} />
+                        ) : null}
+                      </div>
                       ) : null}
-                      <BoardForm selectedStyle={selectedStyle}
-                        style={{ all: "unset" }}>
+                      <BoardForm selectedStyle={selectedStyle} 
+                      style={{ all: "unset"}}>
                         <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
                           R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
                           {linkCount > 0 ? (
@@ -1014,69 +993,63 @@ const Catalog = () => {
                             </>
                           ) : null}
                           {(commentMediaInfo && (
-                            commentMediaInfo.type === 'image' ||
-                            commentMediaInfo.type === 'video' ||
-                            (commentMediaInfo.type === 'webpage' &&
-                              commentMediaInfo.thumbnail))) ? null : (
-                            <div className='thread-icons'
-                              style={{ position: 'absolute', top: '-2px', right: '15px' }}>
+                            commentMediaInfo.type === 'image' || 
+                            commentMediaInfo.type === 'video' || 
+                            (commentMediaInfo.type === 'webpage' && 
+                            commentMediaInfo.thumbnail))) ? null : (
+                            <div className='thread-icons' 
+                            style={{position: 'absolute', top: '-2px', right: '15px'}}>
                               {thread.pinned ? (
                                 <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
-                                  style={{
-                                    imageRendering: "pixelated",
-                                  }} />
+                                style={{
+                                  imageRendering: "pixelated",}} />
                               ) : null}
                               {thread.locked ? (
                                 <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
-                                  style={{
-                                    imageRendering: "pixelated",
-                                  }} />
+                                style={{
+                                  imageRendering: "pixelated",}} />
                               ) : null}
                             </div>
                           )}
-                          <PostMenu
-                            style={{
-                              display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
-                              position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                              zIndex: '999'
-                            }}
-                            key={`pmb-${index}`}
-                            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>
+                        <PostMenu 
+                          style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
+                          position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+                          zIndex: '999'}}
+                          key={`pmb-${index}`} 
+                          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 }}
+                          <PostMenuCatalog selectedStyle={selectedStyle} 
+                            ref={el => {postMenuCatalogRef.current = el}}
                             onClick={(event) => event.stopPropagation()}
-                            style={{
-                              position: "absolute",
-                              top: menuPosition.top + 7,
-                              left: menuPosition.left
-                            }}>
+                            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' }}
+                            style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
                             >
                               <ul className="post-menu-catalog">
                                 <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
                                 <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                   <>
-                                    {authorAddress === account?.author.address ||
-                                      authorAddress === account?.signer.address ? (
+                                    {authorAddress === account?.author.address || 
+                                    authorAddress === account?.signer.address ? (
                                       <>
                                         <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                         <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -1085,24 +1058,24 @@ const Catalog = () => {
                                     {isModerator ? (
                                       <>
                                         {authorAddress === account?.author.address ||
-                                          authorAddress === account?.signer.address ? (
+                                        authorAddress === account?.signer.address ? (
                                           null
                                         ) : (
                                           <li onClick={() => {
                                             setModeratingCommentCid(thread.cid)
-                                            setIsModerationOpen(true);
+                                            setIsModerationOpen(true); 
                                             handleOptionClick(thread.cid);
                                             setDeletePost(true);
                                           }}>
-                                            Delete post
+                                          Delete post
                                           </li>
                                         )}
                                         <li
-                                          onClick={() => {
-                                            setModeratingCommentCid(thread.cid)
-                                            setIsModerationOpen(true);
-                                            handleOptionClick(thread.cid);
-                                          }}>
+                                        onClick={() => {
+                                          setModeratingCommentCid(thread.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(thread.cid);
+                                        }}>
                                           Mod tools
                                         </li>
                                       </>
@@ -1110,44 +1083,44 @@ const Catalog = () => {
                                   </>
                                 )}</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
+                                  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
+                                          >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
+                                          >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
+                                          >SauceNAO</a>
+                                        </li>
+                                      </ul>
+                                    </li>
+                                  ) : null
                                 }
                               </ul>
                             </div>
                           </PostMenuCatalog>, document.body
                         )}
                       </BoardForm>
-                      <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
-                        onClick={() => setSelectedThread(thread.cid)}>
+                      <Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                      onClick={() => setSelectedThread(thread.cid)}>
                         <div key={`t-${index}`} className="teaser">
                           <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
                           {thread.content ? `: ${thread.content}` : null}
@@ -1155,10 +1128,13 @@ const Catalog = () => {
                       </Link>
                     </div>
                   )
-                })}
-              </InfiniteScroll>
-            ) : (<CatalogLoader />)
-          )}
+                }
+              }}
+              endReached={tryLoadMore}
+              useWindowScroll={true}
+              components={{List: GridContainer}}
+            />
+          ) : (<CatalogLoader />)}
         </Threads>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
@@ -1173,7 +1149,7 @@ const Catalog = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -1187,43 +1163,43 @@ const Catalog = () => {
             marginTop: "42px",
           }}>
             <>
-              <span className="boardList">
-                [
+            <span className="boardList">
+              [
                 <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                /
+                 / 
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-                ]&nbsp;
+              ]&nbsp;
+            </span>
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
+            ))}
               <span className="nav">
-                [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
-                ]
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                 [
                 <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
-                <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>
                 ]
               </span>
@@ -1240,13 +1216,13 @@ const Catalog = () => {
               marginTop: "5px",
               marginBottom: "15px",
             }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
             &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
           </div>
         </Footer>
       </Container>
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index f322a0dc..322ac86c 100644
--- a/src/components/views/Description.jsx
+++ b/src/components/views/Description.jsx
@@ -1,25 +1,25 @@
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
-import packageJson from '../../../package.json';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { debounce } from 'lodash';
+import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
+import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
+import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import ImageBanner from '../ImageBanner';
+import Post from '../Post';
+import CreateBoardModal from '../modals/CreateBoardModal';
+import AdminListModal from '../modals/AdminListModal';
+import OfflineIndicator from '../OfflineIndicator';
+import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
 import handleImageClick from '../../utils/handleImageClick';
 import handleStyleChange from '../../utils/handleStyleChange';
-import ImageBanner from '../ImageBanner';
-import OfflineIndicator from '../OfflineIndicator';
-import Post from '../Post';
-import AdminListModal from '../modals/AdminListModal';
-import CreateBoardModal from '../modals/CreateBoardModal';
-import SettingsModal from '../modals/SettingsModal';
-import { Break, Container, Header, NavBar, PostForm, PostMenu } from '../styled/views/Board.styled';
-import { PostMenuCatalog } from '../styled/views/Catalog.styled';
-import { BoardForm, Footer, ReplyFormLink, TopBar } from '../styled/views/Thread.styled';
-const { version } = packageJson
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import packageJson from '../../../package.json'
+const {version} = packageJson
 
 
 const Description = () => {
@@ -31,7 +31,7 @@ const Description = () => {
     selectedThread,
     setSelectedTitle,
   } = useGeneralStore(state => state);
-
+  
   const navigate = useNavigate();
 
   const threadMenuRefs = useRef({});
@@ -41,13 +41,13 @@ const Description = () => {
   const [isAdminListOpen, setIsAdminListOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-  const { subplebbitAddress, threadCid } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
-
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+  
 
   const handleOptionClick = () => {
     setOpenMenuCid(null);
@@ -66,13 +66,13 @@ const Description = () => {
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
+    
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [openMenuCid, handleOutsideClick]);
 
-
+  
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -99,9 +99,9 @@ const Description = () => {
       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
       setPrevScrollPos(currentScrollPos);
     }, 50);
-
+  
     window.addEventListener('scroll', debouncedHandleScroll);
-
+  
     return () => window.removeEventListener('scroll', debouncedHandleScroll);
   }, [prevScrollPos, visible]);
 
@@ -127,57 +127,57 @@ const Description = () => {
   return (
     <>
       <Helmet>
-        <title>
+          <title>
           {"Board Description - " + (subplebbit.title || subplebbit.address) + " - plebchan"}
-        </title>
-      </Helmet>
+          </title>
+        </Helmet>
       <Container>
         <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <AdminListModal
-          selectedStyle={selectedStyle}
-          isOpen={isAdminListOpen}
-          closeModal={() => setIsAdminListOpen(false)}
-          roles={subplebbit.roles} />
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
         <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
         <NavBar selectedStyle={selectedStyle}>
           <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
             <span className="nav">
               [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                   )
-                }
+                )
+              }
               }>Create Board</span>
               ]
               [
@@ -196,20 +196,20 @@ const Description = () => {
                     <option value="all">All</option>
                     <option value="subscriptions">Subscriptions</option>
                     {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                     )
                   }>Create Board</span>
                 </div>
                 <div className="page-jump">
                   <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                   &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                 </div>
               </div>
             </div>
@@ -222,43 +222,33 @@ const Description = () => {
             <div className="banner">
               <ImageBanner />
             </div>
-            <>
+              <>
               <div className="board-title">{subplebbit.title ?? null}</div>
               <div className="board-address">p/{subplebbit.address}
-                <OfflineIndicator
-                  address={subplebbit.address}
-                  className="offline"
-                  tooltipPlace="top" />
+                <OfflineIndicator 
+                address={subplebbit.address} 
+                className="offline"
+                tooltipPlace="top" />
               </div>
-            </>
+              </>
           </>
         </Header>
         <Break selectedStyle={selectedStyle} />
         <PostForm selectedStyle={selectedStyle}>
-          <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
-            <div id="return-button-mobile">
-              <span className="btn-wrap" onClick={() => { window.scrollTo(0, 0) }}>
+          <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{marginBottom: '10px'}}>
+          <div id="return-button-mobile">
+              <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
                 <Link to={`/p/${selectedAddress}`}>Return</Link>
               </span>
             </div>
-            <div id="reload-button-mobile">
-
-              <span className="reload-button catalog-button" id="bottom-button-desktop-description">
-                [
-                <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-                  onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-                  onTouchStart={() => window.location.reload()}>Refresh</span>
-                ]
-              </span>
-            </div>
             <div id="catalog-button-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}/catalog`} onClick={() => { window.scrollTo(0, 0) }}>Catalog</Link>
+                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
               </span>
             </div>
             <div id="bottom-button-mobile">
               <span className="btn-wrap">
-                <span style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom</span>
+                <span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span>
               </span>
             </div>
           </ReplyFormLink>
@@ -266,7 +256,7 @@ const Description = () => {
         <TopBar selectedStyle={selectedStyle}>
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -281,13 +271,6 @@ const Description = () => {
             <Link to={`/p/${selectedAddress}`}>Return</Link>
             ]
           </span>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
           <span className="return-button catalog-button" id="catalog-button-desktop">
             [
             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
@@ -295,9 +278,9 @@ const Description = () => {
           </span>
           <span className="return-button catalog-button" id="bottom-button-desktop">
             [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
+            <span id="button" style={{cursor: 'pointer'}} onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
+            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+            onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
             ]
           </span>
         </TopBar>
@@ -306,88 +289,86 @@ const Description = () => {
           <>
             <div className="thread">
               <div className="op-container" style={{
-                display: subplebbit.rules ? "grid" : "block",
-                marginBottom: '10px',
+              display: subplebbit.rules ? "grid" : "block",
+              marginBottom: '10px',
               }}>
                 <div className="post op op-desktop">
                   <hr />
                   <div className="post-info">
                     {subplebbit.suggested?.avatarUrl ? (
-                      <div className="file" style={{ marginBottom: "5px" }}>
+                      <div className="file" style={{marginBottom: "5px"}}>
                         <div className="file-text">
                           Link:&nbsp;
-                          <a href={subplebbit.suggested?.avatarUrl}
-                            target="_blank" rel="noopener noreferrer">{
-                              subplebbit.suggested?.avatarUrl.length > 30 ?
-                                subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
-                                subplebbit.suggested?.avatarUrl
-                            }
+                          <a href={subplebbit.suggested?.avatarUrl} 
+                          target="_blank" rel="noopener noreferrer">{
+                          subplebbit.suggested?.avatarUrl.length > 30 ?
+                          subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
+                          subplebbit.suggested?.avatarUrl
+                          }
                           </a>&nbsp;(image)
                         </div>
                         <div className="img-container">
                           <span className="file-thumb">
                             <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
-                              onClick={handleImageClick}
-                              style={{ cursor: "pointer" }} />
+                            onClick={handleImageClick}
+                            style={{cursor: "pointer"}} />
                           </span>
                         </div>
                       </div>
-                    ) : null}
+                      ) : null}
                     <span className="name-block">
                       <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
                       &nbsp;
                       <span className="name capcode"
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
                       >## Board Admins</span>
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
-                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       &nbsp;
-                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
+                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       <span>&nbsp;
-                        [
-                        <Link to={() => { }} style={{ textDecoration: "none" }} className="reply-link">Reply</Link>
-                        ]
+                          [
+                          <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
+                          ]
                       </span>
-                      <PostMenu
+                      <PostMenu 
                         title="Post menu"
-                        ref={el => {
+                        ref={el => { 
                           threadMenuRefs.current[subplebbit.pubsubTopic] = el;
                         }}
-                        className='post-menu-button'
+                        className='post-menu-button' 
                         rotated={openMenuCid === subplebbit.pubsubTopic}
                         onClick={(event) => {
                           event.stopPropagation();
                           const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
-                          setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                          setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                           setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
                         }}
                       >
                         ▶
                       </PostMenu>
                       {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-${subplebbit.pubsubTopic}`}
-                            style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
-                          >
-                            <ul className="post-menu-catalog">
-                              <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
-                              {/* {isModerator ? (
+                        <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-${subplebbit.pubsubTopic}`}
+                        style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
+                        >
+                          <ul className="post-menu-catalog">
+                            <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
+                            {/* {isModerator ? (
                               <>
                                 change description
                               </>
                             ) : null} */}
-                            </ul>
-                          </div>
+                          </ul>
+                        </div>
                         </PostMenuCatalog>, document.body
                       )}
                     </span>
@@ -406,22 +387,22 @@ const Description = () => {
                 <div className="post op op-mobile">
                   <div className="post-info-mobile">
                     <button className="post-menu-button-mobile"
-                      style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                    style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                     <span className="name-block-mobile">
                       <span className="name-mobile capcode"
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
                       >## Board Admins</span>
                       &nbsp;
                       <span className="thread-icons-mobile"
-                        style={{ float: "right", marginRight: "18px" }}>
-                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
+                      style={{float: "right", marginRight: "18px"}}>
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                         &nbsp;
-                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
+                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                       </span>
                       <br />
                       <span className="subject-mobile"
-                        style={{ marginBottom: "-15px" }}>Welcome to {subplebbit.title || subplebbit.address}</span>
+                    style={{marginBottom: "-15px"}}>Welcome to {subplebbit.title || subplebbit.address}</span>
                       &nbsp;
                     </span>
                     <span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
@@ -432,8 +413,8 @@ const Description = () => {
                       <div className="img-container">
                         <span className="file-thumb-mobile">
                           <img src={subplebbit.suggested.avatarUrl} alt="board avatar"
-                            onClick={handleImageClick}
-                            style={{ cursor: "pointer" }} />
+                          onClick={handleImageClick}
+                          style={{cursor: "pointer"}} />
                           <div className="file-info-mobile">image</div>
                         </span>
                       </div>
@@ -446,7 +427,7 @@ const Description = () => {
                   </blockquote>
                 </div>
                 <div className="post-link-mobile">
-                  <Link to={() => { }} className="button-mobile">View Thread</Link>
+                  <Link to={() => {}} className="button-mobile">View Thread</Link>
                 </div>
               </div>
             </div>
@@ -465,7 +446,7 @@ const Description = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -479,43 +460,43 @@ const Description = () => {
             marginTop: "42px",
           }}>
             <>
-              <span className="boardList">
-                [
+            <span className="boardList">
+              [
                 <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                /
+                 / 
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-                ]&nbsp;
+              ]&nbsp;
+            </span>
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              <span className="nav">
-                [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
-                ]
+            ))}
+            <span className="nav">
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                 [
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
-                <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>
                 ]
               </span>
@@ -532,13 +513,13 @@ const Description = () => {
               marginTop: "5px",
               marginBottom: "15px",
             }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
             &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
           </div>
         </Footer>
       </Container>
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index f67619dc..a3d6404e 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -1,32 +1,32 @@
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
-import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
-import InfiniteScroll from 'react-infinite-scroller';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate} from 'react-router-dom';
+import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
-import packageJson from '../../../package.json';
+import { VirtuosoGrid } from 'react-virtuoso';
+import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import useError from '../../hooks/useError';
-import useFeedStateString from '../../hooks/useFeedStateString';
-import useSuccess from '../../hooks/useSuccess';
+import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
+import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled';
+import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
+import CatalogLoader from '../CatalogLoader';
+import EditModal from '../modals/EditModal';
+import ImageBanner from '../ImageBanner';
+import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
+import ModerationModal from '../modals/ModerationModal';
+import OfflineIndicator from '../OfflineIndicator';
+import SettingsModal from '../modals/SettingsModal';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
-import CatalogLoader from '../CatalogLoader';
-import ImageBanner from '../ImageBanner';
-import OfflineIndicator from '../OfflineIndicator';
-import VerifiedAuthor from '../VerifiedAuthor';
-import CreateBoardModal from '../modals/CreateBoardModal';
-import EditModal from '../modals/EditModal';
-import ModerationModal from '../modals/ModerationModal';
-import SettingsModal from '../modals/SettingsModal';
-import { BoardForm, Break, Container, Header, NavBar, PostMenu } from '../styled/views/Board.styled';
-import { PostMenuCatalog, Threads } from '../styled/views/Catalog.styled';
-import { AuthorDeleteAlert, Footer, TopBar } from '../styled/views/Thread.styled';
-const { version } = packageJson
+import useError from '../../hooks/useError';
+import useFeedStateString from '../../hooks/useFeedStateString';
+import useSuccess from '../../hooks/useSuccess';
+import packageJson from '../../../package.json'
+const {version} = packageJson
 
 
 const SubscriptionsCatalog = () => {
@@ -67,27 +67,27 @@ const SubscriptionsCatalog = () => {
   const [deletePost, setDeletePost] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
+  const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
-  const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
 
   const stateString = useFeedStateString(subplebbits);
 
 
   useEffect(() => {
     let permissions = {};
-
+  
     selectedFeed.forEach(thread => {
       const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-
-      if (subplebbit && subplebbit.roles) {
+  
+      if (subplebbit && subplebbit.roles) { 
         const role = subplebbit.roles[account?.author.address]?.role;
-
+    
         if (role === 'moderator' || role === 'admin' || role === 'owner') {
           permissions[thread.subplebbitAddress] = true;
         } else {
@@ -95,9 +95,9 @@ const SubscriptionsCatalog = () => {
         }
       }
     });
-
+  
     setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);
+  }, [account?.author.address, selectedFeed, subplebbits]);  
 
 
   const handleOptionClick = () => {
@@ -118,7 +118,7 @@ const SubscriptionsCatalog = () => {
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
+    
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
@@ -131,23 +131,24 @@ const SubscriptionsCatalog = () => {
       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
       setPrevScrollPos(currentScrollPos);
     }, 50);
-
+  
     window.addEventListener('scroll', debouncedHandleScroll);
-
+  
     return () => window.removeEventListener('scroll', debouncedHandleScroll);
   }, [prevScrollPos, visible]);
 
 
   const tryLoadMore = async () => {
-    try { loadMore() }
-    catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
+    try {loadMore()} 
+    catch (e)
+    {await new Promise(resolve => setTimeout(resolve, 1000))}
   };
 
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      setNewSuccessMessage('Challenge Success');
-    }
+        setNewSuccessMessage('Challenge Success');
+    } 
     else if (challengeVerification.challengeSuccess === false) {
       setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
       console.log('challenge failed', challengeVerification);
@@ -171,16 +172,16 @@ const SubscriptionsCatalog = () => {
 
   const getChallengeAnswersFromUser = async (challenges) => {
     setChallengesArray(challenges);
-
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
       const challengeImg = new Image();
       challengeImg.src = imageSource;
-
+  
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-
+  
         const handleKeyDown = async (event) => {
           if (event.key === 'Enter') {
             const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
@@ -196,7 +197,7 @@ const SubscriptionsCatalog = () => {
 
         setResolveCaptchaPromise(resolve);
       };
-
+  
       challengeImg.onerror = () => {
         reject(setNewErrorMessage('Could not load challenges'));
       };
@@ -213,8 +214,8 @@ const SubscriptionsCatalog = () => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
-
-
+  
+  
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -261,8 +262,8 @@ const SubscriptionsCatalog = () => {
     setOriginalCommentContent(comment.content);
     setIsEditModalOpen(true);
   }
-
-
+  
+  
   useEffect(() => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
@@ -278,7 +279,7 @@ const SubscriptionsCatalog = () => {
     }
   }, [editedComment, setIsAuthorEdit]);
 
-
+  
   useEffect(() => {
     let isActive = true;
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
@@ -324,60 +325,60 @@ const SubscriptionsCatalog = () => {
   return (
     <>
       <Helmet>
-        <title>Subscriptions - Catalog - plebchan</title>
+      <title>Subscriptions - Catalog - plebchan</title>
       </Helmet>
       <Container>
         <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
-        <ModerationModal
-          selectedStyle={selectedStyle}
-          isOpen={isModerationOpen}
-          closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
-          deletePost={deletePost} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <ModerationModal 
+        selectedStyle={selectedStyle}
+        isOpen={isModerationOpen}
+        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
+        deletePost={deletePost} />
         <EditModal
-          selectedStyle={selectedStyle}
-          isOpen={isEditModalOpen}
-          closeModal={() => setIsEditModalOpen(false)}
-          originalCommentContent={originalCommentContent} />
+        selectedStyle={selectedStyle}
+        isOpen={isEditModalOpen}
+        closeModal={() => setIsEditModalOpen(false)}
+        originalCommentContent={originalCommentContent} />
         <NavBar selectedStyle={selectedStyle}>
           <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
             <span className="nav">
               [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                   )
-                }
+                )
+              }
               }>Create Board</span>
               ]
               [
@@ -396,20 +397,20 @@ const SubscriptionsCatalog = () => {
                     <option value="all">All</option>
                     <option value="subscriptions">Subscriptions</option>
                     {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                     )
                   }>Create Board</span>
                 </div>
                 <div className="page-jump">
                   <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                   &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                 </div>
               </div>
             </div>
@@ -422,7 +423,7 @@ const SubscriptionsCatalog = () => {
             <div className="banner">
               <ImageBanner />
             </div>
-            <>
+              <>
               <div className="board-title">Subscriptions</div>
               {account?.subscriptions.length < 1 ? (
                 <div className="board-address">You haven't subscribed to any board yet.</div>
@@ -431,7 +432,7 @@ const SubscriptionsCatalog = () => {
                   You have subscribed to {account?.subscriptions.length} board{account?.subscriptions.length > 1 ? "s" : null}.
                 </div>
               )}
-            </>
+              </>
           </>
         </Header>
         <Break selectedStyle={selectedStyle} />
@@ -439,7 +440,7 @@ const SubscriptionsCatalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -454,27 +455,15 @@ const SubscriptionsCatalog = () => {
             <Link to={`/p/subscriptions`}>Return</Link>
             ]
           </div>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
           <div id="return-button-mobile">
             <span className="btn-wrap-catalog btn-wrap">
               <Link to={`/p/subscriptions`}>Return</Link>
             </span>
           </div>
-          <div id="refresh-button-mobile">
-            <span className="btn-wrap-catalog btn-wrap">
-              <Link to={`/p/subscriptions/catalog`}>Refresh</Link>
-            </span>
-          </div>
           {subplebbits.state === "succeeded" ? (
             null
           ) : (
-            <div id="stats" style={{ float: "right", marginTop: "5px" }}>
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
               <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
@@ -482,76 +471,75 @@ const SubscriptionsCatalog = () => {
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {feed ? (
-            <InfiniteScroll
-              pageStart={0}
-              loadMore={tryLoadMore}
-              hasMore={hasMore}
-            >
-              {feed.map((thread, index) => {
+          {feed.length > 1 ? (
+            <VirtuosoGrid
+              style={{width: '100%', height: '100%'}}
+              data={feed}
+              increaseViewportBy={{bottom: 600, top: 600}}
+              itemContent={(index) => {
+                const thread = feed[index];
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 const isModerator = moderatorPermissions[thread.subplebbitAddress];
                 const linkCount = countLinks(thread);
                 return (
-                  <div key={`thread-${index}`} className="thread"
-                    onMouseOver={() => { setIsHoveringOnThread(thread.cid) }}
-                    onMouseLeave={() => { setIsHoveringOnThread('') }}>
+                  <div key={`thread-${index}`} className="thread" 
+                  onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
+                  onMouseLeave={() => {setIsHoveringOnThread('')}}>
                     {commentMediaInfo?.url ? (
-                      <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
-                        onClick={() => setSelectedThread(thread.cid)}>
+                      <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                      onClick={() => setSelectedThread(thread.cid)}>
                         {commentMediaInfo?.type === "webpage" ? (
                           thread.thumbnailUrl ? (
-                            <img className="card" key={`img-${index}`}
-                              src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                              onError={(e) => {
-                                e.target.src = fallbackImgUrl
-                                e.target.onerror = null;
-                              }} />
+                          <img className="card" key={`img-${index}`}
+                          src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                          onError={(e) => {
+                            e.target.src = fallbackImgUrl
+                            e.target.onerror = null;
+                          }}  />
                           ) : null
                         ) : null}
                         {commentMediaInfo?.type === "image" ? (
                           <img className="card" key={`img-${index}`}
-                            src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                            onError={(e) => {
-                              e.target.src = fallbackImgUrl
-                              e.target.onerror = null;
-                            }} />
+                          src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                          onError={(e) => {
+                            e.target.src = fallbackImgUrl
+                            e.target.onerror = null;}}  />
                         ) : null}
                         {commentMediaInfo?.type === "video" ? (
-                          <video className="card" key={`fti-${index}`}
-                            src={commentMediaInfo.url}
-                            alt={commentMediaInfo.type}
-                            onError={(e) => e.target.src = fallbackImgUrl} />
+                            <video className="card" key={`fti-${index}`} 
+                            src={commentMediaInfo.url} 
+                            alt={commentMediaInfo.type} 
+                            onError={(e) => e.target.src = fallbackImgUrl} /> 
                         ) : null}
                         {commentMediaInfo?.type === "audio" ? (
-                          <audio className="card" controls
-                            key={`fti-${index}`}
-                            src={commentMediaInfo.url}
-                            alt={commentMediaInfo.type}
+                            <audio className="card" controls 
+                            key={`fti-${index}`} 
+                            src={commentMediaInfo.url} 
+                            alt={commentMediaInfo.type} 
                             onError={(e) => e.target.src = fallbackImgUrl} />
                         ) : null}
                       </Link>
                     ) : null}
                     <div key={`ti-${index}`} className="thread-icons" >
-                      {(commentMediaInfo && (
-                        commentMediaInfo.type === 'image' ||
-                        commentMediaInfo.type === 'video' ||
-                        (commentMediaInfo.type === 'webpage' &&
-                          commentMediaInfo.thumbnail))) ? (
-                        <OfflineIndicator
-                          address={thread.subplebbitAddress}
-                          className="thread-icon offline-icon"
-                          tooltipPlace="top" />
+                    {(commentMediaInfo && (
+                      commentMediaInfo.type === 'image' || 
+                      commentMediaInfo.type === 'video' || 
+                      (commentMediaInfo.type === 'webpage' && 
+                      commentMediaInfo.thumbnail))) ? (                          
+                        <OfflineIndicator 
+                        address={thread.subplebbitAddress} 
+                        className="thread-icon offline-icon"
+                        tooltipPlace="top" />
                       ) : (
-                        <OfflineIndicator
-                          address={thread.subplebbitAddress}
-                          className="thread-icon offline-icon-no-link"
-                          tooltipPlace="top" />
-                      )}
+                        <OfflineIndicator 
+                        address={thread.subplebbitAddress} 
+                        className="thread-icon offline-icon-no-link"
+                        tooltipPlace="top" />
+                    )}
                     </div>
-                    <BoardForm selectedStyle={selectedStyle}
-                      style={{ all: "unset" }}>
+                    <BoardForm selectedStyle={selectedStyle} 
+                    style={{ all: "unset"}}>
                       <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
                         R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
                         {linkCount > 0 ? (
@@ -560,49 +548,45 @@ const SubscriptionsCatalog = () => {
                             L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
                           </>
                         ) : null}
-                        <PostMenu
-                          style={{
-                            display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
-                            position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                            zIndex: '999'
-                          }}
-                          key={`pmb-${index}`}
-                          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>
+                      <PostMenu 
+                        style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
+                        position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
+                        zIndex: '999'}}
+                        key={`pmb-${index}`} 
+                        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 }}
+                        <PostMenuCatalog selectedStyle={selectedStyle} 
+                          ref={el => {postMenuCatalogRef.current = el}}
                           onClick={(event) => event.stopPropagation()}
-                          style={{
-                            position: "absolute",
-                            top: menuPosition.top + 7,
-                            left: menuPosition.left
-                          }}>
+                          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' }}
+                          style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
                           >
                             <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
                               <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                 <>
-                                  {authorAddress === account?.author.address ||
-                                    authorAddress === account?.signer.address ? (
+                                  {authorAddress === account?.author.address || 
+                                  authorAddress === account?.signer.address ? (
                                     <>
                                       <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
                                       <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -611,26 +595,26 @@ const SubscriptionsCatalog = () => {
                                   {isModerator ? (
                                     <>
                                       {authorAddress === account?.author.address ||
-                                        authorAddress === account?.signer.address ? (
+                                      authorAddress === account?.signer.address ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
                                           setSelectedAddress(thread.subplebbitAddress);
                                           setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true);
+                                          setIsModerationOpen(true); 
                                           handleOptionClick(thread.cid);
                                           setDeletePost(true);
                                         }}>
-                                          Delete post
+                                        Delete post
                                         </li>
                                       )}
                                       <li
-                                        onClick={() => {
-                                          setSelectedAddress(thread.subplebbitAddress);
-                                          setModeratingCommentCid(thread.cid)
-                                          setIsModerationOpen(true);
-                                          handleOptionClick(thread.cid);
-                                        }}>
+                                      onClick={() => {
+                                        setSelectedAddress(thread.subplebbitAddress);
+                                        setModeratingCommentCid(thread.cid)
+                                        setIsModerationOpen(true); 
+                                        handleOptionClick(thread.cid);
+                                      }}>
                                         Mod tools
                                       </li>
                                     </>
@@ -638,56 +622,57 @@ const SubscriptionsCatalog = () => {
                                 </>
                               )}</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
+                                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
+                                        >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
+                                        >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
+                                        >SauceNAO</a>
+                                      </li>
+                                    </ul>
+                                  </li>
+                                ) : null
                               }
                             </ul>
                           </div>
                         </PostMenuCatalog>, document.body
                       )}
                     </BoardForm>
-                    <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
-                      onClick={() => setSelectedThread(thread.cid)}>
+                    <Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                    onClick={() => setSelectedThread(thread.cid)}>
                       <div key={`t-${index}`} className="teaser">
                         <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
                         {thread.content ? `: ${thread.content}` : null}
                       </div>
                     </Link>
-                  </div>
+                    </div>
                 )
-              })}
-            </InfiniteScroll>
-          ) : (
-            <CatalogLoader />
-          )}
+              }}
+              endReached={tryLoadMore}
+              useWindowScroll={true}
+              components={{List: GridContainer}}
+            />
+          ) : (<CatalogLoader />)}
         </Threads>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
@@ -702,7 +687,7 @@ const SubscriptionsCatalog = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -715,40 +700,40 @@ const SubscriptionsCatalog = () => {
           <NavBar selectedStyle={selectedStyle} style={{
             marginTop: "42px",
           }}>
-            <>
-              <span className="boardList">
-                [
+          <>
+            <span className="boardList">
+              [
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-                ]&nbsp;[
-                {defaultSubplebbits.map((subplebbit, index) => (
-                  <span className="boardList" key={`span-${subplebbit.address}`}>
-                    {index === 0 ? null : "\u00a0"}
-                    <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
-                    >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                    {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                  </span>
-                ))}
-                ]
-              </span>
+              ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+                </span>
+              ))}
+              ]
+            </span>
               <span className="nav">
-                [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
-                ]
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                 [
                 <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
-                <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>
                 ]
               </span>
@@ -765,13 +750,13 @@ const SubscriptionsCatalog = () => {
               marginTop: "5px",
               marginBottom: "15px",
             }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
             &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
           </div>
         </Footer>
       </Container>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index c4e1d53a..a3988d30 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -41,7 +41,7 @@ import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
-const { version } = packageJson
+const {version} = packageJson
 
 
 const Thread = () => {
@@ -73,7 +73,7 @@ const Thread = () => {
   } = useGeneralStore(state => state);
 
   const { anonymousMode } = useAnonModeStore();
-
+  
   const account = useAccount();
   const navigate = useNavigate();
   const handleClickForm = useClickForm();
@@ -106,10 +106,10 @@ const Thread = () => {
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [outOfViewCid, setOutOfViewCid] = useState(null);
-  const [outOfViewPosition, setOutOfViewPosition] = useState({ top: 0, left: 0 });
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
   const [cidTracker, setCidTracker] = useState({});
@@ -121,9 +121,9 @@ const Thread = () => {
 
   useAnonMode(selectedThread, anonymousMode && executeAnonMode);
 
-  const comment = useComment({ commentCid: selectedThread });
+  const comment = useComment({commentCid: selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress: comment.subplebbitAddress });
+  const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
   const selectedAddress = subplebbit.address;
 
   const stateString = useStateString(comment);
@@ -159,17 +159,17 @@ const Thread = () => {
 
 
   useEffect(() => {
-    if (subplebbit.roles !== undefined) {
+    if (subplebbit.roles !== undefined) { 
       const role = subplebbit.roles[account?.author?.address]?.role;
-
+  
       if (role === 'moderator' || role === 'admin' || role === 'owner') {
         setIsModerator(true);
       } else {
         setIsModerator(false);
       }
     }
-  }, [account?.author.address, subplebbit.roles]);
-
+  }, [account?.author.address, subplebbit.roles]);  
+  
 
   const handleOptionClick = () => {
     setOpenMenuCid(null);
@@ -187,7 +187,7 @@ const Thread = () => {
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
+    
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
@@ -201,14 +201,14 @@ const Thread = () => {
     }
   }, [outOfViewCid]);
 
-
+  
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
 
   useEffect(() => {
-    if (comment.state === "failed" && selectedAddress === undefined) {
+    if ( comment.state === "failed" && selectedAddress === undefined) {
       navigate('/404');
     }
   }, [selectedAddress, navigate, comment.state]);
@@ -232,7 +232,7 @@ const Thread = () => {
   }, [errorString, setNewErrorMessage]);
 
 
-  const flattenedReplies = useMemo(() =>
+  const flattenedReplies = useMemo(() => 
     flattenCommentsPages(comment.replies), [comment.replies]
   );
 
@@ -244,7 +244,7 @@ const Thread = () => {
   }), [flattenedReplies, selectedThread]);
 
 
-  const { accountComments } = useAccountComments({ filter });
+  const { accountComments } = useAccountComments({filter});
 
 
   const accountRepliesNotYetInCommentReplies = useMemo(() => {
@@ -255,7 +255,7 @@ const Thread = () => {
 
   const sortedReplies = useMemo(() => [
     ...accountRepliesNotYetInCommentReplies, ...flattenedReplies
-  ].sort((a, b) => a.timestamp - b.timestamp
+    ].sort((a, b) => a.timestamp - b.timestamp
   ), [accountRepliesNotYetInCommentReplies, flattenedReplies]);
 
   // let post.jsx access full cid of user-typed short cid
@@ -292,13 +292,13 @@ const Thread = () => {
       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
       setPrevScrollPos(currentScrollPos);
     }, 50);
-
+  
     window.addEventListener('scroll', debouncedHandleScroll);
-
+  
     return () => window.removeEventListener('scroll', debouncedHandleScroll);
   }, [prevScrollPos, visible]);
 
-
+  
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
       if (challengeVerification.publication?.cid !== undefined) {
@@ -316,7 +316,7 @@ const Thread = () => {
   const onChallenge = async (challenges, comment) => {
     setPendingComment(comment);
     let challengeAnswers = [];
-
+    
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
@@ -328,7 +328,7 @@ const Thread = () => {
     }
   };
 
-
+  
   useEffect(() => {
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,
@@ -336,7 +336,7 @@ const Thread = () => {
     }));
   }, [comment.subplebbitAddress]);
 
-
+  
   const [publishCommentOptions, setPublishCommentOptions] = useState({
     subplebbitAddress: comment.subplebbitAddress,
     onChallenge,
@@ -356,7 +356,7 @@ const Thread = () => {
     }
   }, [index, setPendingCommentIndex]);
 
-
+  
   const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
@@ -380,8 +380,8 @@ const Thread = () => {
       setNewErrorMessage("Please enter a comment or link.");
       return;
     }
-
-
+  
+    
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,
       author: {
@@ -395,28 +395,28 @@ const Thread = () => {
     setTriggerPublishComment(true);
   };
 
-
+  
   const updateSigner = useCallback(async () => {
     if (anonymousMode) {
       setExecuteAnonMode(true);
-
+  
       let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
       let signer;
-
+  
       if (!storedSigners[selectedThread]) {
         signer = await account?.plebbit.createSigner();
         storedSigners[selectedThread] = { privateKey: signer?.privateKey, address: signer?.address };
         localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
       } else {
         const signerPrivateKey = storedSigners[selectedThread].privateKey;
-
+          
         try {
-          signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
+          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
         } catch (error) {
           console.log(error);
         }
       }
-
+        
       setPublishCommentOptions(prevPublishCommentOptions => {
         const newPublishCommentOptions = {
           ...prevPublishCommentOptions,
@@ -426,23 +426,23 @@ const Thread = () => {
             address: signer?.address
           },
         };
-
+  
         if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
           return newPublishCommentOptions;
         }
-
+  
         return prevPublishCommentOptions;
       });
     }
   }, [selectedThread, anonymousMode, account]);
-
+  
   useEffect(() => {
     if (anonymousMode) {
       updateSigner();
     }
   }, [updateSigner, anonymousMode]);
-
-
+  
+  
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
@@ -457,16 +457,16 @@ const Thread = () => {
 
   const getChallengeAnswersFromUser = async (challenges) => {
     setChallengesArray(challenges);
-
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
       const challengeImg = new Image();
       challengeImg.src = imageSource;
-
+  
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-
+  
         const handleKeyDown = async (event) => {
           if (event.key === 'Enter') {
             const currentCaptchaResponse = captchaResponse;
@@ -482,7 +482,7 @@ const Thread = () => {
 
         setResolveCaptchaPromise(resolve);
       };
-
+  
       challengeImg.onerror = () => {
         reject(setNewErrorMessage('Could not load challenges'));
       };
@@ -500,8 +500,8 @@ const Thread = () => {
       setNewErrorMessage(error.message); console.log(error);
     },
   });
-
-
+  
+  
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -548,8 +548,8 @@ const Thread = () => {
     setOriginalCommentContent(comment.content);
     setIsEditModalOpen(true);
   }
-
-
+  
+  
   useEffect(() => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
@@ -565,7 +565,7 @@ const Thread = () => {
     }
   }, [editedComment]);
 
-
+  
   useEffect(() => {
     let isActive = true;
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
@@ -604,70 +604,70 @@ const Thread = () => {
   return (
     <>
       <Helmet>
-        <title>
-          {(
-            (comment.content?.slice(0, 40) ?? comment.title?.slice(0, 40) ?? "Thread") + " - "
-            + (selectedTitle ? selectedTitle : selectedAddress)
-            + " - plebchan"
-          )}
-        </title>
-      </Helmet>
+          <title>
+            {(
+              (comment.content?.slice(0, 40) ?? comment.title?.slice(0, 40) ?? "Thread") + " - " 
+              + (selectedTitle ? selectedTitle : selectedAddress) 
+              + " - plebchan"
+            )}
+          </title>
+        </Helmet>
       <Container>
         <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
-        <ReplyModal
-          selectedStyle={selectedStyle}
-          isOpen={isReplyOpen}
-          closeModal={() => setIsReplyOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
+        <ReplyModal 
+        selectedStyle={selectedStyle}
+        isOpen={isReplyOpen}
+        closeModal={() => setIsReplyOpen(false)} />
         <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
-        <ModerationModal
-          selectedStyle={selectedStyle}
-          isOpen={isModerationOpen}
-          closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
-          deletePost={deletePost} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <ModerationModal 
+        selectedStyle={selectedStyle}
+        isOpen={isModerationOpen}
+        closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}}
+        deletePost={deletePost} />
         <EditModal
-          selectedStyle={selectedStyle}
-          isOpen={isEditModalOpen}
-          closeModal={() => setIsEditModalOpen(false)}
-          originalCommentContent={originalCommentContent} />
+        selectedStyle={selectedStyle}
+        isOpen={isEditModalOpen}
+        closeModal={() => setIsEditModalOpen(false)}
+        originalCommentContent={originalCommentContent} />
         <NavBar selectedStyle={selectedStyle}>
           <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
             <span className="nav">
               [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                   )
-                }
+                )
+              }
               }>Create Board</span>
               ]
               [
@@ -686,20 +686,20 @@ const Thread = () => {
                     <option value="all">All</option>
                     <option value="subscriptions">Subscriptions</option>
                     {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                     )
                   }>Create Board</span>
                 </div>
                 <div className="page-jump">
                   <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                   &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                 </div>
               </div>
             </div>
@@ -712,43 +712,43 @@ const Thread = () => {
             <div className="banner">
               <ImageBanner />
             </div>
-            <>
+              <>
               <div className="board-title">{subplebbit.title ?? null}</div>
               <div className="board-address">p/{subplebbit.address}
-                <OfflineIndicator
-                  address={subplebbit.address}
-                  className="offline"
-                  tooltipPlace="top" />
+                <OfflineIndicator 
+                address={subplebbit.address} 
+                className="offline"
+                tooltipPlace="top" />
               </div>
-            </>
+              </>
           </>
         </Header>
         <Break selectedStyle={selectedStyle} />
         <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
           <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
             <div id="return-button-mobile">
-              <span className="btn-wrap" onClick={() => { window.scrollTo(0, 0) }}>
+              <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
                 <Link to={`/p/${selectedAddress}`}>Return</Link>
               </span>
             </div>
             <div id="catalog-button-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}/catalog`} onClick={() => { window.scrollTo(0, 0) }}>Catalog</Link>
+                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
               </span>
             </div>
             <div id="bottom-button-mobile">
               <span className="btn-wrap">
-                <span style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom</span>
+                <span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span>
               </span>
             </div>
             <div id="post-form-link-desktop">
               [
-              <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</Link>
+                <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
               ]
             </div>
             <div id="post-form-link-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</Link>
+                <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
               </span>
             </div>
           </ReplyFormLink>
@@ -762,8 +762,8 @@ const Thread = () => {
                   ) : (
                     <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
                   )}
-                  <input id="post-button" type="submit" value="Post" tabIndex={6}
-                    onClick={handleSubmit} />
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
                 </td>
               </tr>
               <tr data-type="Comment">
@@ -789,7 +789,7 @@ const Thread = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -804,23 +804,16 @@ const Thread = () => {
             <Link to={`/p/${selectedAddress}`}>Return</Link>
             ]
           </span>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
           <span className="return-button catalog-button" id="catalog-button-desktop">
             [
             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
           </span>
-          <span className="return-button catalog-button" id="bottom-button-desktop-thread">
+          <span className="return-button catalog-button" id="bottom-button-desktop">
             [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
+            <span id="button" style={{cursor: 'pointer'}} onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
+            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+            onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
             ]
           </span>
           {comment ? (
@@ -961,256 +954,249 @@ const Thread = () => {
                       <span className="name-block">
                           {comment.title ? (
                             comment.title.length > 75 ?
-                              <>
-                                <span key={`q-${comment.cid}`} className="title"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={comment.title}
-                                  data-tooltip-place="top">
-                                  {comment.title.slice(0, 75) + " (...)"}
-                                </span>
-                              </>
-                              : <span key={`q-${comment.cid}`} className="title">
-                                {comment.title}
-                              </span>)
-                            : null}
-                          &nbsp;
-                          {comment?.author?.displayName
-                            ? comment?.author?.displayName.length > 20
-                              ? <>
-                                <span key={`n-${comment.cid}`} className="name"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={comment?.author?.displayName}
-                                  data-tooltip-place="top">
-                                  {comment?.author?.displayName.slice(0, 20) + " (...)"}
-                                </span>
-                              </>
-                              : <span key={`n-${comment.cid}`} className="name">
-                                {comment?.author?.displayName}</span>
+                            <>
+                              <span key={`q-${comment.cid}`} className="title"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment.title}
+                              data-tooltip-place="top">
+                                {comment.title.slice(0, 75) + " (...)"}
+                              </span>
+                            </>
+                          : <span key={`q-${comment.cid}`} className="title">
+                            {comment.title}
+                            </span>) 
+                          : null}
+                        &nbsp;
+                        {comment?.author?.displayName
+                          ? comment?.author?.displayName.length > 20
+                          ? <>
+                              <span key={`n-${comment.cid}`} className="name"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment?.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment?.author?.displayName.slice(0, 20) + " (...)"}
+                              </span>
+                            </> 
                             : <span key={`n-${comment.cid}`} className="name">
-                              Anonymous</span>}
+                              {comment?.author?.displayName}</span>
+                          : <span key={`n-${comment.cid}`} className="name">
+                            Anonymous</span>}
                           &nbsp;
-                          &nbsp;
-                          <span className="poster-address address-desktop"
-                            id="reply-button" style={{ cursor: "pointer" }}
-                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}>
-                            (u/
+                        &nbsp;
+                        <span className="poster-address address-desktop"
+                          id="reply-button" style={{cursor: "pointer"}}
+                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}>
+                          (u/
                             <span key={`pa-${comment.cid}`} className="poster-address">
-                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
-                            </span>)
-                          </span>
-                          &nbsp;
-                          <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
-                          &nbsp;
-                          <span className="post-number post-number-desktop">
-                            <span>c/</span>
-                            <Link to={() => { }} id="reply-button" style={{ cursor: 'pointer' }}
-                              onClick={() => {
-                                let text = document.getSelection().toString();
-                                text = text ? `>${text}` : text;
-                                setSelectedText(text);
-                                if (isReplyOpen) {
-                                  setReplyQuoteCid(comment.shortCid);
-                                  setTriggerInsertion(Date.now());
-                                } else {
-                                  setIsReplyOpen(true);
-                                  setSelectedShortCid(comment.shortCid);
-                                  setSelectedParentCid(comment.cid);
-                                }
-                              }} title="Reply to this post">{comment.shortCid}</Link>
-                          </span>&nbsp;
-                          {comment.pinned ? (
-                            <>
-                              &nbsp;
-                              <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                style={{
-                                  marginBottom: "-1px",
-                                  imageRendering: "pixelated",
-                                }} />
-                            </>
-                          ) : null}
-                          {comment.locked ? (
-                            <>
-                              &nbsp;
-                              <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                style={{
-                                  marginBottom: "-1px",
-                                  imageRendering: "pixelated",
-                                }} />
-                            </>
-                          ) : null}
-                          <PostMenu
-                            key={`pmb-${index}`}
-                            title="Post menu"
-                            ref={el => {
-                              threadMenuRefs.current[comment.cid] = el;
-                              postMenuRef.current = el;
-                            }}
-                            className='post-menu-button'
-                            rotated={openMenuCid === comment.cid}
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
-                              setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-                              setOpenMenuCid(prevCid => (prevCid === comment.cid ? null : comment.cid));
-                            }}
+                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                          </span>)
+                        </span>
+                        &nbsp;
+                        <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
+                        &nbsp;
+                        <span className="post-number post-number-desktop">
+                          <span>c/</span>
+                          <Link to={() => {}} id="reply-button" style={{ cursor: 'pointer' }} 
+                          onClick={() => {
+                            let text = document.getSelection().toString();
+                            text = text ? `>${text}` : text;
+                            setSelectedText(text);
+                            if (isReplyOpen) {
+                              setReplyQuoteCid(comment.shortCid);
+                              setTriggerInsertion(Date.now());
+                            } else {
+                              setIsReplyOpen(true); 
+                              setSelectedShortCid(comment.shortCid);
+                              setSelectedParentCid(comment.cid); 
+                            }}} title="Reply to this post">{comment.shortCid}</Link>
+                        </span>&nbsp;
+                        {comment.pinned ? (
+                          <>
+                            &nbsp;
+                            <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
+                            style={{marginBottom: "-1px",
+                            imageRendering: "pixelated",}} />
+                          </>
+                        ) : null}
+                        {comment.locked ? (
+                          <>
+                            &nbsp;
+                            <img src="assets/closed.gif" alt="Closed" title="Closed"
+                            style={{marginBottom: "-1px",
+                            imageRendering: "pixelated",}} />
+                          </>
+                        ) : null}
+                        <PostMenu 
+                          key={`pmb-${index}`} 
+                          title="Post menu"
+                          ref={el => { 
+                            threadMenuRefs.current[comment.cid] = el; 
+                            postMenuRef.current = el; 
+                          }}
+                          className='post-menu-button' 
+                          rotated={openMenuCid === comment.cid}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
+                            setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                            setOpenMenuCid(prevCid => (prevCid === comment.cid ? null : comment.cid));
+                          }}                              
+                        >
+                          ▶
+                        </PostMenu>
+                        {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-${comment.cid}`}
+                          style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
                           >
-                            ▶
-                          </PostMenu>
-                          {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-${comment.cid}`}
-                                style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
-                              >
-                                <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                                  <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (
+                            <ul className="post-menu-catalog">
+                              <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
+                              <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (
+                                <>
+                                  {authorAddress === account?.author.address || 
+                                  authorAddress === account?.signer.address ? (
+                                    <>
+                                      <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
+                                      <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
+                                    </>
+                                  ) : null}
+                                  {isModerator ? (
                                     <>
                                       {authorAddress === account?.author.address ||
-                                        authorAddress === account?.signer.address ? (
-                                        <>
-                                          <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                          <li onClick={() => handleAuthorDeleteClick(comment)}>Delete post</li>
-                                        </>
-                                      ) : null}
-                                      {isModerator ? (
-                                        <>
-                                          {authorAddress === account?.author.address ||
-                                            authorAddress === account?.signer.address ? (
-                                            null
-                                          ) : (
-                                            <li onClick={() => {
-                                              setModeratingCommentCid(comment.cid)
-                                              setIsModerationOpen(true);
-                                              handleOptionClick(comment.cid);
-                                              setDeletePost(true);
-                                            }}>
-                                              Delete post
-                                            </li>
-                                          )}
-                                          <li
-                                            onClick={() => {
-                                              setModeratingCommentCid(comment.cid)
-                                              setIsModerationOpen(true);
-                                              handleOptionClick(comment.cid);
-                                            }}>
-                                            Mod tools
-                                          </li>
-                                        </>
-                                      ) : null}
-                                    </>
-                                  )}</VerifiedAuthor>
-                                  {(commentMediaInfo && (
-                                    commentMediaInfo.type === 'image' ||
-                                    (commentMediaInfo.type === 'webpage' &&
-                                      commentMediaInfo.thumbnail))) ? (
+                                      authorAddress === account?.signer.address ? (
+                                        null
+                                      ) : (
+                                      <li onClick={() => {
+                                        setModeratingCommentCid(comment.cid)
+                                        setIsModerationOpen(true); 
+                                        handleOptionClick(comment.cid);
+                                        setDeletePost(true);
+                                      }}>
+                                      Delete post
+                                      </li>
+                                    )}
                                     <li
-                                      onMouseOver={() => { setIsImageSearchOpen(true) }}
-                                      onMouseLeave={() => { setIsImageSearchOpen(false) }}>
-                                      Image search »
-                                      <ul className="dropdown-menu post-menu-catalog"
-                                        style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a
-                                            href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                                            target="_blank" rel="noreferrer"
-                                          >Google</a>
-                                        </li>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a
-                                            href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                                            target="_blank" rel="noreferrer"
-                                          >Yandex</a>
-                                        </li>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a
-                                            href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                                            target="_blank" rel="noreferrer"
-                                          >SauceNAO</a>
-                                        </li>
-                                      </ul>
-                                    </li>
-                                  ) : null
-                                  }
-                                </ul>
-                              </div>
-                            </PostMenuCatalog>, document.body
-                          )}
-                          <div key={`bi-${index}`} id="backlink-id" className="backlink">
-                            {comment.replies?.pages?.topAll.comments
-                              .sort((a, b) => a.timestamp - b.timestamp)
-                              .map((reply, index) => (
-                                <div key={`div-${index}`} style={{ display: 'inline-block' }}
-                                  ref={el => {
-                                    backlinkRefs.current[reply.cid] = el;
-                                  }}>
-                                  <Link key={`ql-${index}`}
-                                    to={() => { }} className="quote-link"
-                                    onClick={(event) => handleQuoteClick(reply, null, event)}
-                                    onMouseOver={(event) => {
-                                      event.stopPropagation();
-                                      handleQuoteHover(reply, null, () => {
-                                        setOutOfViewCid(reply.cid);
-                                        const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                        const distanceToRight = window.innerWidth - rect.right;
-                                        const distanceToTop = rect.top;
-                                        const distanceToBottom = window.innerHeight - rect.bottom;
-                                        let top;
-
-                                        if (distanceToTop < postOnHoverHeight / 2) {
-                                          top = window.scrollY - 5;
-                                        } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                          top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                        } else {
-                                          top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                        }
-
-                                        if (distanceToRight < 200) {
-                                          setOutOfViewPosition({
-                                            top,
-                                            right: window.innerWidth - rect.left - 10,
-                                            maxWidth: rect.left - 5
-                                          });
-                                        } else {
-                                          setOutOfViewPosition({
-                                            top,
-                                            left: rect.left + rect.width + 5,
-                                            maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                          });
-                                        }
-                                      });
-                                    }}
-                                    onMouseLeave={() => {
-                                      removeHighlight();
-                                      setOutOfViewCid(null);
+                                    onClick={() => {
+                                      setModeratingCommentCid(comment.cid)
+                                      setIsModerationOpen(true); 
+                                      handleOptionClick(comment.cid);
                                     }}>
-                                    c/{reply.shortCid}</Link>
-                                  &nbsp;
-                                </div>
-                              ))
-                            }
+                                      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(comment.cid)}>
+                                        <a 
+                                        href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Google</a>
+                                      </li>
+                                      <li onClick={() => handleOptionClick(comment.cid)}>
+                                        <a
+                                        href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Yandex</a>
+                                      </li>
+                                      <li onClick={() => handleOptionClick(comment.cid)}>
+                                        <a
+                                        href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                        target="_blank" rel="noreferrer"
+                                        >SauceNAO</a>
+                                      </li>
+                                    </ul>
+                                  </li>
+                                ) : null
+                              }
+                            </ul>
                           </div>
-                        </span>
-                        <blockquote key={`blockquote-${comment.cid}`}>
-                          <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
-                          <EditLabel key={`edit-label-thread-${index}`}
-                            commentCid={comment.cid}
-                            className="ttl" />
-                          <StateLabel key={`state-label-thread-${index}`}
-                            commentIndex={comment.index}
-                            className="ttl ellipsis" />
-                        </blockquote>
-                      </div>
+                          </PostMenuCatalog>, document.body
+                        )}
+                        <div key={`bi-${index}`} id="backlink-id" className="backlink">
+                          {comment.replies?.pages?.topAll.comments
+                            .sort((a, b) => a.timestamp - b.timestamp)
+                            .map((reply, index) => (
+                              <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                              ref={el => {
+                                backlinkRefs.current[reply.cid] = el;
+                              }}>
+                              <Link key={`ql-${index}`}
+                              to={() => {}} className="quote-link" 
+                              onClick={(event) => handleQuoteClick(reply, null, event)}
+                              onMouseOver={(event) => {
+                                event.stopPropagation();
+                                handleQuoteHover(reply, null, () => {
+                                  setOutOfViewCid(reply.cid);
+                                  const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;
+                                  const distanceToTop = rect.top;
+                                  const distanceToBottom = window.innerHeight - rect.bottom;
+                                  let top;
+
+                                  if (distanceToTop < postOnHoverHeight / 2) {
+                                    top = window.scrollY - 5;
+                                  } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                    top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                  } else {
+                                    top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                  }
+                                
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5
+                                    });
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                    });
+                                  }
+                                });
+                              }}
+                              onMouseLeave={() => {
+                                removeHighlight();
+                                setOutOfViewCid(null);
+                              }}>
+                                c/{reply.shortCid}</Link>
+                                &nbsp;
+                              </div>
+                            ))
+                          }
+                        </div>
+                      </span>
+                      <blockquote key={`blockquote-${comment.cid}`}>
+                        <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
+                        <EditLabel key={`edit-label-thread-${index}`} 
+                        commentCid={comment.cid}
+                        className="ttl"/>
+                        <StateLabel key={`state-label-thread-${index}`}
+                        commentIndex={comment.index}
+                        className="ttl ellipsis"/>
+                      </blockquote>
                     </div>
                   </div>
-                  {comment.replyCount === undefined ? <PostLoader /> : null}
-                  {sortedReplies.map((reply, index) => {
+                </div>
+                {comment.replyCount === undefined ? <PostLoader /> : null}
+                {sortedReplies.map((reply, index) => {
                     const replyMediaInfo = getCommentMediaInfo(reply);
                     const fallbackImgUrl = "assets/filedeleted-res.gif";
                     const shortParentCid = findShortParentCid(reply.parentCid, comment);
@@ -1233,227 +1219,225 @@ const Thread = () => {
                         <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
                         <div key={`pr-${index}`} className="post-reply post-reply-desktop">
                           <div key={`pi-${index}`} className="post-info">
-                            &nbsp;
+                          &nbsp;
                             <span key={`nb-${index}`} className="nameblock">
-                              {reply.author?.displayName
-                                ? reply.author?.displayName.length > 20
-                                  ? <>
-                                    <span key={`mob-n-${index}`} className="name"
-                                      data-tooltip-id="tooltip"
-                                      data-tooltip-content={reply.author?.displayName}
-                                      data-tooltip-place="top">
-                                      {reply.author?.displayName.slice(0, 20) + " (...)"}
-                                    </span>
-                                  </>
-                                  : <span key={`mob-n-${index}`} className="name">
-                                    {reply.author?.displayName ?? reply.displayName}</span>
-                                : <span key={`mob-n-${index}`} className="name">
-                                  Anonymous</span>}
+                            {reply.author?.displayName
+                            ? reply.author?.displayName.length > 20
+                            ? <>
+                                <span key={`mob-n-${index}`} className="name"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={reply.author?.displayName}
+                                data-tooltip-place="top">
+                                  {reply.author?.displayName.slice(0, 20) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-n-${index}`} className="name">
+                                {reply.author?.displayName ?? reply.displayName}</span>
+                            : <span key={`mob-n-${index}`} className="name">
+                              Anonymous</span>}
                               &nbsp;
                               <span key={`pa-${index}`} className="poster-address address-desktop"
-                                id="reply-button" style={{ cursor: "pointer" }}
+                                id="reply-button" style={{cursor: "pointer"}}
                                 onClick={() => handleAddressClick(reply.author?.shortAddress)}
                               >
                                 (u/
-                                {reply.author?.shortAddress ?
-                                  (
-                                    <span key={`mob-ha-${index}`}>
-                                      {reply.author?.shortAddress}
-                                    </span>
-                                  ) : (
-                                    anonymousMode ? (
+                                  {reply.author?.shortAddress ?
+                                    (
                                       <span key={`mob-ha-${index}`}>
-                                        {signerAddress?.slice(8, 20)}
+                                        {reply.author?.shortAddress}
                                       </span>
                                     ) : (
-                                      <span key={`mob-ha-${index}`}
-                                      >
-                                        {account?.author?.shortAddress}
-                                      </span>
+                                      anonymousMode ? (
+                                        <span key={`mob-ha-${index}`}>
+                                          {signerAddress?.slice(8, 20)}
+                                        </span>
+                                      ) : (
+                                        <span key={`mob-ha-${index}`}
+                                        >
+                                          {account?.author?.shortAddress}
+                                        </span>
+                                      )
                                     )
-                                  )
-                                }
+                                  }
                                 )
                               </span>
                             </span>
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time">
                               {getDate(reply?.timestamp)}&nbsp;
-                              <span key={`pn-${index}`} className="post-number post-number-desktop">
-                                <span key={`pl1-${index}`}>c/</span>
-                                {reply.shortCid ? (
-                                  <Link id="reply-button" key={`pl2-${index}`}
-                                    onClick={() => {
-                                      let text = document.getSelection().toString();
-                                      text = text ? `>${text}` : text;
-                                      setSelectedText(text);
-                                      if (isReplyOpen) {
-                                        setReplyQuoteCid(reply.shortCid);
-                                        setTriggerInsertion(Date.now());
-                                      } else {
-                                        setIsReplyOpen(true);
-                                        setSelectedShortCid(reply.shortCid);
-                                        setSelectedParentCid(reply.cid);
-                                      }
-                                    }} title="Reply to this post">{reply.shortCid}</Link>
-                                ) : (
-                                  <PendingLabel key="pending" commentIndex={reply.index} />
-                                )}
+                            <span key={`pn-${index}`} className="post-number post-number-desktop">
+                              <span key={`pl1-${index}`}>c/</span>
+                              {reply.shortCid ? (
+                                <Link id="reply-button" key={`pl2-${index}`}
+                                 onClick={() => {
+                                  let text = document.getSelection().toString();
+                                  text = text ? `>${text}` : text;
+                                  setSelectedText(text);
+                                  if (isReplyOpen) {
+                                    setReplyQuoteCid(reply.shortCid);
+                                    setTriggerInsertion(Date.now());
+                                  } else {
+                                    setIsReplyOpen(true); 
+                                    setSelectedShortCid(reply.shortCid);
+                                    setSelectedParentCid(reply.cid); 
+                                  }
+                                  }} title="Reply to this post">{reply.shortCid}</Link>
+                              ) : (
+                                <PendingLabel key="pending" commentIndex={reply.index} />
+                              )}
                               </span>
                             </span>&nbsp;
-                            <PostMenu
-                              key={`pmb-${index}`}
+                            <PostMenu 
+                              key={`pmb-${index}`} 
                               title="Post menu"
-                              ref={el => {
-                                replyMenuRefs.current[reply.cid] = el;
-                                postMenuRef.current = el;
+                              ref={el => { 
+                                replyMenuRefs.current[reply.cid] = el; 
+                                postMenuRef.current = el; 
                               }}
-                              className='post-menu-button'
+                              className='post-menu-button' 
                               rotated={openMenuCid === reply.cid}
                               onClick={(event) => {
                                 event.stopPropagation();
                                 const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
-                                setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                                setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                                 setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
-                              }}
+                              }} 
                             >
                               ▶
                             </PostMenu>
                             {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-reply post-menu-reply-${reply.cid}`}
-                                  style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
-                                >
-                                  <ul className="post-menu-catalog">
-                                    <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                    <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
-                                      <>
-                                        {authorAddress === account?.author.address ||
+                              <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-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
+                                  <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                  <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
+                                    <>
+                                      {authorAddress === account?.author.address ||
+                                      authorAddress === account?.signer.address ? (
+                                        <>
+                                          <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                                          <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
+                                        </>
+                                      ) : null}
+                                      {isModerator ? (
+                                        <>
+                                          {authorAddress === account?.author.address || 
                                           authorAddress === account?.signer.address ? (
-                                          <>
-                                            <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                            <li onClick={() => handleAuthorDeleteClick(reply)}>Delete post</li>
-                                          </>
-                                        ) : null}
-                                        {isModerator ? (
-                                          <>
-                                            {authorAddress === account?.author.address ||
-                                              authorAddress === account?.signer.address ? (
-                                              null
-                                            ) : (
-                                              <li onClick={() => {
-                                                setModeratingCommentCid(reply.cid)
-                                                setIsModerationOpen(true);
-                                                handleOptionClick(reply.cid);
-                                                setDeletePost(true);
-                                              }}>
-                                                Delete post
-                                              </li>
-                                            )}
-                                            <li
-                                              onClick={() => {
-                                                setModeratingCommentCid(reply.cid)
-                                                setIsModerationOpen(true);
-                                                handleOptionClick(reply.cid);
-                                              }}>
-                                              Mod tools
+                                            null
+                                          ) : (
+                                            <li onClick={() => {
+                                              setModeratingCommentCid(reply.cid)
+                                              setIsModerationOpen(true); 
+                                              handleOptionClick(reply.cid);
+                                              setDeletePost(true);
+                                            }}>
+                                            Delete post
                                             </li>
-                                          </>
-                                        ) : null}
-                                      </>
-                                    )}</VerifiedAuthor>
-                                    {(replyMediaInfo && (
-                                      replyMediaInfo.type === 'image' ||
-                                      (replyMediaInfo.type === 'webpage' &&
-                                        replyMediaInfo.thumbnail))) ? (
-                                      <li
-                                        onMouseOver={() => { setIsImageSearchOpen(true) }}
-                                        onMouseLeave={() => { setIsImageSearchOpen(false) }}>
+                                          )}
+                                          <li
+                                          onClick={() => {
+                                            setModeratingCommentCid(reply.cid)
+                                            setIsModerationOpen(true); 
+                                            handleOptionClick(reply.cid);
+                                          }}>
+                                            Mod tools
+                                          </li>
+                                        </>
+                                      ) : null}
+                                    </>
+                                  )}</VerifiedAuthor>
+                                  {(replyMediaInfo && (
+                                    replyMediaInfo.type === 'image' || 
+                                    (replyMediaInfo.type === 'webpage' && 
+                                    replyMediaInfo.thumbnail))) ? ( 
+                                      <li 
+                                      onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                      onMouseLeave={() => {setIsImageSearchOpen(false)}}>
                                         Image search »
                                         <ul className="dropdown-menu post-menu-catalog"
-                                          style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
+                                          style={{display: isImageSearchOpen ? 'block': 'none'}}>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
-                                            <a
-                                              href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
+                                            <a 
+                                            href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
+                                            target="_blank" rel="noreferrer"
                                             >Google</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                              href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
+                                            href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
+                                            target="_blank" rel="noreferrer"
                                             >Yandex</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                              href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
-                                              target="_blank" rel="noreferrer"
+                                            href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
+                                            target="_blank" rel="noreferrer"
                                             >SauceNAO</a>
                                           </li>
                                         </ul>
                                       </li>
                                     ) : null
-                                    }
-                                  </ul>
-                                </div>
+                                  }
+                                </ul>
+                              </div>
                               </PostMenuCatalog>, document.body
                             )}
                             <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {reply.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{ display: 'inline-block' }}
-                                    ref={el => {
-                                      backlinkRefs.current[reply.cid] = el;
-                                    }}>
-                                    <Link key={`ql-${index}`}
-                                      to={() => { }} className="quote-link"
-                                      onClick={(event) => handleQuoteClick(reply, null, event)}
-                                      onMouseOver={(event) => {
-                                        event.stopPropagation();
-                                        handleQuoteHover(reply, null, () => {
-                                          setOutOfViewCid(reply.cid);
-                                          const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                          const distanceToRight = window.innerWidth - rect.right;
-                                          const distanceToTop = rect.top;
-                                          const distanceToBottom = window.innerHeight - rect.bottom;
-                                          let top;
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                  ref={el => {
+                                    backlinkRefs.current[reply.cid] = el;
+                                  }}>
+                                  <Link key={`ql-${index}`}
+                                  to={() => {}} className="quote-link" 
+                                  onClick={(event) => handleQuoteClick(reply, null, event)}
+                                  onMouseOver={(event) => {
+                                    event.stopPropagation();
+                                    handleQuoteHover(reply, null, () => {
+                                    setOutOfViewCid(reply.cid);
+                                    const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
+                                    const distanceToRight = window.innerWidth - rect.right;
+                                      const distanceToTop = rect.top;
+                                      const distanceToBottom = window.innerHeight - rect.bottom;
+                                      let top;
 
-                                          if (distanceToTop < postOnHoverHeight / 2) {
-                                            top = window.scrollY - 5;
-                                          } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                            top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                          } else {
-                                            top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                          }
-
-                                          if (distanceToRight < 200) {
-                                            setOutOfViewPosition({
-                                              top,
-                                              right: window.innerWidth - rect.left - 10,
-                                              maxWidth: rect.left - 5
-                                            });
-                                          } else {
-                                            setOutOfViewPosition({
-                                              top,
-                                              left: rect.left + rect.width + 5,
-                                              maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                            });
-                                          }
+                                      if (distanceToTop < postOnHoverHeight / 2) {
+                                        top = window.scrollY - 5;
+                                      } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                        top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                      } else {
+                                        top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                      }
+                                    
+                                      if (distanceToRight < 200) {
+                                        setOutOfViewPosition({
+                                          top,
+                                          right: window.innerWidth - rect.left - 10,
+                                          maxWidth: rect.left - 5
                                         });
-                                      }}
-                                      onMouseLeave={() => {
-                                        removeHighlight();
-                                        setOutOfViewCid(null);
-                                      }}>
-                                      c/{reply.shortCid}</Link>
+                                      } else {
+                                        setOutOfViewPosition({
+                                          top,
+                                          left: rect.left + rect.width + 5,
+                                          maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                        });
+                                      }
+                                    });
+                                  }}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
+                                    c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
                                 ))
@@ -1542,7 +1526,7 @@ const Thread = () => {
                             </div>
                           ) : null}
                           <blockquote key={`pm-${index}`} className="post-message">
-                            <Link to={() => { }} key={`r-pm-${index}`} className="quotelink"
+                            <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"  
                               ref={el => {
                                 quoteRefs.current[reply.cid] = el;
                               }}
@@ -1564,7 +1548,7 @@ const Thread = () => {
                                   } else {
                                     top = rect.top + window.scrollY - postOnHoverHeight / 2;
                                   }
-
+                                
                                   if (distanceToRight < 200) {
                                     setOutOfViewPosition({
                                       top,
@@ -1579,7 +1563,7 @@ const Thread = () => {
                                     });
                                   }
                                 });
-                              }}
+                              }}                                
                               onMouseLeave={() => {
                                 removeHighlight();
                                 setOutOfViewCid(null);
@@ -1587,7 +1571,7 @@ const Thread = () => {
                             >
                               {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                             </Link>
-                            <Post key={`post-${index}`}
+                            <Post key={`post-${index}`} 
                               content={reply.content}
                               postQuoteRef={(quoteShortParentCid, ref) => {
                                 postRefs.current[quoteShortParentCid] = ref;
@@ -1601,79 +1585,78 @@ const Thread = () => {
                                   handleQuoteHover(reply, quoteShortParentCid, () => {
                                     setOutOfViewCid(quoteParentCid);
 
-                                    const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
-                                    const distanceToRight = window.innerWidth - rect.right;
-                                    const distanceToTop = rect.top;
-                                    const distanceToBottom = window.innerHeight - rect.bottom;
-                                    let top;
+                                  const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;
+                                  const distanceToTop = rect.top;
+                                  const distanceToBottom = window.innerHeight - rect.bottom;
+                                  let top;
 
-                                    if (distanceToTop < postOnHoverHeight / 2) {
-                                      top = window.scrollY - 5;
-                                    } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                      top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                    } else {
-                                      top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                    }
-
-                                    if (distanceToRight < 200) {
-                                      setOutOfViewPosition({
-                                        top,
-                                        right: window.innerWidth - rect.left - 10,
-                                        maxWidth: rect.left - 5
-                                      });
-                                    } else {
-                                      setOutOfViewPosition({
-                                        top,
-                                        left: rect.left + rect.width + 5,
-                                        maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                      });
-                                    }
-                                  })
-                                }
-                              }
-                              }
+                                  if (distanceToTop < postOnHoverHeight / 2) {
+                                    top = window.scrollY - 5;
+                                  } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                    top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                  } else {
+                                    top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                  }
+                                
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5
+                                    });
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                    });
+                                  }
+                                })
+                              }}
+                            }
                               postQuoteOnLeave={() => {
                                 removeHighlight();
                                 setOutOfViewCid(null);
                               }}
                             />
-                            <EditLabel key={`edit-label-reply-${index}`}
-                              commentCid={reply.cid}
-                              className="ttl" />
+                            <EditLabel key={`edit-label-reply-${index}`} 
+                            commentCid={reply.cid}
+                            className="ttl"/>
                             <StateLabel key={`state-label-reply-${index}`}
-                              commentIndex={reply.index}
-                              className="ttl ellipsis" />
+                            commentIndex={reply.index}
+                            className="ttl ellipsis"/>
                           </blockquote>
                         </div>
                       </div>
                     )
                   })
-                  }
-                </div>
-                <div className="thread-mobile" key="thread-mobile">
-                  <hr />
-                  <div className="op-container" key="op-container">
+                }
+              </div>
+              <div className="thread-mobile" key="thread-mobile">
+                <hr />
+                <div className="op-container" key="op-container">
                     <div key={`mob-po-${comment.cid}`} className="post op op-mobile">
                       <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
                         <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile">...</button>
                         <span className="name-block-mobile">
                           {comment?.author?.displayName
-                            ? comment?.author?.displayName.length > 15
-                              ? <>
-                                <span key={`mob-n-${comment.cid}`} className="name-mobile"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={comment?.author?.displayName}
-                                  data-tooltip-place="top">
-                                  {comment?.author?.displayName.slice(0, 15) + " (...)"}
-                                </span>
-                              </>
-                              : <span key={`mob-n-${comment.cid}`} className="name-mobile">
-                                {comment?.author?.displayName}</span>
+                          ? comment?.author?.displayName.length > 15
+                          ? <>
+                              <span key={`mob-n-${comment.cid}`} className="name-mobile"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment?.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment?.author?.displayName.slice(0, 15) + " (...)"}
+                              </span>
+                            </> 
                             : <span key={`mob-n-${comment.cid}`} className="name-mobile">
-                              Anonymous</span>}
+                              {comment?.author?.displayName}</span>
+                          : <span key={`mob-n-${comment.cid}`} className="name-mobile">
+                            Anonymous</span>}
                           &nbsp;
                           <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
-                            id="reply-button" style={{ cursor: "pointer" }}
+                            id="reply-button" style={{cursor: "pointer"}}
                             onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
                           >
                             (u/
@@ -1682,30 +1665,26 @@ const Thread = () => {
                             </span>
                             )&nbsp;
                           </span>
-                          <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{ float: "right", marginRight: "18px" }}>
+                          <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{float: "right", marginRight: "18px"}}>
                             {comment.pinned ? (
                               <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                style={{
-                                  marginTop: "-1px", marginRight: "2px",
-                                  imageRendering: "pixelated",
-                                }} />
+                              style={{marginTop: "-1px", marginRight: "2px",
+                              imageRendering: "pixelated",}} />
                             ) : null}
                             {comment.locked ? (
                               <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                style={{
-                                  marginTop: "-1px", marginRight: "2px",
-                                  imageRendering: "pixelated",
-                                }} />
+                              style={{marginTop: "-1px", marginRight: "2px",
+                              imageRendering: "pixelated",}} />
                             ) : null}
                           </span>
                           <br key={`mob-br1-${comment.cid}`} />
                           {comment.title ? (
-                            comment.title.length > 30 ?
+                              comment.title.length > 30 ?
                               <>
                                 <span key={`mob-t-${comment.cid}`} className="subject-mobile"
-                                  data-tooltip-id="tooltip"
-                                  data-tooltip-content={comment.title}
-                                  data-tooltip-place="top">
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={comment.title}
+                                data-tooltip-place="top">
                                   {comment.title.slice(0, 30) + " (...)"}
                                 </span>
                               </>
@@ -1717,20 +1696,19 @@ const Thread = () => {
                           {getDate(comment?.timestamp)}
                           &nbsp;
                           <span key={`mob-no-${comment.cid}`}>c/</span>
-                          <Link to={() => { }} id="reply-button" key={`mob-no2-${comment.cid}`} title="Reply to this post"
-                            onClick={() => {
-                              let text = document.getSelection().toString();
-                              text = text ? `>${text}` : text;
-                              setSelectedText(text);
-                              if (isReplyOpen) {
-                                setReplyQuoteCid(comment.shortCid);
-                                setTriggerInsertion(Date.now());
-                              } else {
-                                setIsReplyOpen(true);
-                                setSelectedShortCid(comment.shortCid);
-                                setSelectedParentCid(comment.cid);
-                              }
-                            }}>{comment.shortCid}</Link>
+                          <Link to={() => {}} id="reply-button" key={`mob-no2-${comment.cid}`} title="Reply to this post"
+                          onClick={() => {
+                            let text = document.getSelection().toString();
+                            text = text ? `>${text}` : text;
+                            setSelectedText(text);
+                            if (isReplyOpen) {
+                              setReplyQuoteCid(comment.shortCid);
+                              setTriggerInsertion(Date.now());
+                            } else {
+                              setIsReplyOpen(true); 
+                              setSelectedShortCid(comment.shortCid);
+                              setSelectedParentCid(comment.cid); 
+                            }}}>{comment.shortCid}</Link>
                         </span>
                       </div>
                       {comment.link ? (
@@ -1743,15 +1721,15 @@ const Thread = () => {
                                     <iframe 
                                       key={`mob-fti-${index}`} 
                                       src={commentMediaInfo.embedUrl}
-                                      style={{ border: "none", height: "250px" }}
+                                      style={{border: "none", height: "250px"}}
                                       title="Embedded content"
-                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                       allowFullScreen />
                                   </div>
                                 ) : (
-                                  <img
+                                  <img 
                                     key={`mob-fti-${index}`}
-                                    src={commentMediaInfo.thumbnail}
+                                    src={commentMediaInfo.thumbnail} 
                                     alt="thumbnail"
                                     onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
                                     style={{cursor: "pointer"}}
@@ -1766,7 +1744,7 @@ const Thread = () => {
                                     </div>
                                   ) : (
                                     <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                  )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
                               </span>
                             </div>
                           )}
@@ -1801,26 +1779,8 @@ const Thread = () => {
                                     <video key={`fti-${index}`} 
                                     src={commentMediaInfo.url} alt={commentMediaInfo.type}
                                     controls
-                                    style={{ cursor: 'pointer' }}
+                                    style={{ cursor: 'pointer' }} 
                                     onError={(e) => e.target.src = fallbackImgUrl} />
-                                ) : (
-                                  <video
-                                    key={`fti-${index}`}
-                                    src={commentMediaInfo.url}
-                                    alt="thumbnail"
-                                    onClick={() => { handleThumbnailClick(index, true) }}
-                                    style={{ cursor: "pointer" }}
-                                    id="video-thumbnail-mobile"
-                                    onError={(e) => e.target.src = fallbackImgUrl}
-                                  />
-                                )}
-                                {commentMediaInfo?.type === "video" || "iframe" ? (
-                                  isMobileThumbnailClicked[index] ? (
-                                    <div style={{ textAlign: "center", marginTop: "15px", marginBottom: "15px" }}>
-                                      <span className='button-mobile' style={{ float: "none", cursor: "pointer" }}
-                                        onClick={() => { handleThumbnailClick(index, true) }}
-                                      >Close</span>
-                                    </div>
                                   ) : (
                                     <video 
                                       key={`fti-${index}`}
@@ -1842,14 +1802,14 @@ const Thread = () => {
                                     ) : (
                                       <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
                                   )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                              </span>
+                                </span>
                             ) : commentMediaInfo.type === "audio" ? (
-                              <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                                <audio key={`mob-img-${index}`}
-                                  src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                                  <audio key={`mob-img-${index}`} 
+                                  src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                                   onError={(e) => e.target.src = fallbackImgUrl} />
-                                <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                              </span>
+                                  <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                </span>
                             ) : null
                           ) : null}
                         </div>
@@ -1858,12 +1818,12 @@ const Thread = () => {
                         {comment.content ? (
                           <>
                             <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} />
-                            <EditLabel key={`edit-label-thread-mob-${index}`}
-                              commentCid={comment.cid}
-                              className="ttl" />
+                            <EditLabel key={`edit-label-thread-mob-${index}`} 
+                            commentCid={comment.cid}
+                            className="ttl"/>
                             <StateLabel key={`state-label-thread-mob-${index}`}
-                              commentIndex={comment.index}
-                              className="ttl ellipsis" />
+                            commentIndex={comment.index}
+                            className="ttl ellipsis"/> 
                           </>
                         ) : null}
                       </blockquote>
@@ -1879,31 +1839,31 @@ const Thread = () => {
                       signerAddress = storedSigners[selectedThread].address;
                     }
                     return (
-                      <div key={`mob-rc-${index}`} className="reply-container">
-                        <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
-                          <div key={`mob-pi-${index}`} className="post-info-mobile">
-                            <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                            <span key={`mob-nb-${index}`} className="name-block-mobile">
-                              {reply.author?.displayName
-                                ? reply.author?.displayName.length > 12
-                                  ? <>
-                                    <span key={`mob-n-${index}`} className="name-mobile"
-                                      data-tooltip-id="tooltip"
-                                      data-tooltip-content={reply.author?.displayName}
-                                      data-tooltip-place="top">
-                                      {reply.author?.displayName.slice(0, 12) + " (...)"}
-                                    </span>
-                                  </>
-                                  : <span key={`mob-n-${index}`} className="name-mobile">
-                                    {reply.author?.displayName}</span>
-                                : <span key={`mob-n-${index}`} className="name-mobile">
-                                  Anonymous</span>}
-                              &nbsp;
-                              <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
-                                id="reply-button" style={{ cursor: "pointer" }}
-                                onClick={() => handleAddressClick(reply.author?.shortAddress)}
-                              >
-                                (u/
+                    <div key={`mob-rc-${index}`} className="reply-container">
+                      <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
+                        <div key={`mob-pi-${index}`} className="post-info-mobile">
+                          <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                          <span key={`mob-nb-${index}`} className="name-block-mobile">
+                            {reply.author?.displayName
+                            ? reply.author?.displayName.length > 12
+                            ? <>
+                                <span key={`mob-n-${index}`} className="name-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={reply.author?.displayName}
+                                data-tooltip-place="top">
+                                  {reply.author?.displayName.slice(0, 12) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-n-${index}`} className="name-mobile">
+                                {reply.author?.displayName}</span>
+                            : <span key={`mob-n-${index}`} className="name-mobile">
+                              Anonymous</span>}
+                            &nbsp;
+                            <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
+                              id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                            >
+                              (u/
                                 {reply.author?.shortAddress ?
                                   (
                                     <span key={`mob-ha-${index}`} className="highlight-address-mobile">
@@ -1914,249 +1874,247 @@ const Thread = () => {
                                       <span key={`mob-ha-${index}`}>
                                         {signerAddress?.slice(8, 20)}
                                       </span>
-                                    ) : (
+                                      ) : (
                                       <span key={`mob-ha-${index}`}>
                                         {account?.author?.shortAddress}
                                       </span>
                                     )
                                   )
                                 }
-                                )
-                              </span>
-                              <br key={`mob-br-${index}`} />
+                              )
                             </span>
-                            <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
-                              {getDate(reply?.timestamp)}&nbsp;
-                              <span key={`mob-pl1-${index}`}>c/</span>
-                              {reply.shortCid ? (
-                                <Link id="reply-button" key={`mob-pl2-${index}`}
-                                  onClick={() => {
-                                    let text = document.getSelection().toString();
-                                    text = text ? `>${text}` : text;
-                                    setSelectedText(text);
-                                    if (isReplyOpen) {
-                                      setReplyQuoteCid(reply.shortCid);
-                                      setTriggerInsertion(Date.now());
-                                    } else {
-                                      setIsReplyOpen(true);
-                                      setSelectedShortCid(reply.shortCid);
-                                      setSelectedParentCid(reply.cid);
-                                    }
-                                  }} title="Reply to this post">{reply.shortCid}</Link>
-                              ) : (
-                                <PendingLabel key="pending-mob" commentIndex={reply.index} />
-                              )}
-                            </span>
-                          </div>
-                          {reply.link ? (
-                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                              {replyMediaInfo?.url ? (
-                                replyMediaInfo.type === "webpage" ? (
-                                  <div key="enlarge-reply-mob" className="img-container">
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                      {reply.thumbnailUrl ? (
-                                        <img key={`mob-img-${reply.cid}`}
-                                          src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
-                                          onClick={handleImageClick}
-                                          style={{ cursor: "pointer" }}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                      ) : null}
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                    </span>
-                                  </div>
-                                ) : replyMediaInfo.type === "image" ? (
-                                  <div key="enlarge-reply-mob" className="img-container">
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                      <img key={`mob-img-${reply.cid}`}
-                                        src={replyMediaInfo.url} alt={replyMediaInfo.type}
-                                        onClick={handleImageClick}
-                                        style={{ cursor: "pointer" }}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                    </span>
-                                  </div>
-                                ) : replyMediaInfo.type === "video" ? (
-                                  <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                    <video key={`fti-${reply.cid}`}
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type}
-                                      style={{ pointerEvents: "none" }}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                  </span>
-                                ) : replyMediaInfo.type === "audio" ? (
-                                  <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                    <audio key={`mob-img-${reply.cid}`}
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                  </span>
-                                ) : null
-                              ) : null}
-                            </div>
-                          ) : null}
-                          <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
-                            <span style={{ cursor: 'pointer' }} key={`mob-ql-${index}`} className="quotelink-mobile"
-                              ref={el => {
-                                quoteRefsMobile.current[reply.cid] = el;
-                              }}
-                              onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                              onMouseOver={(event) => {
-                                event.stopPropagation();
-                                handleQuoteHover(reply, shortParentCid, () => {
-                                  setOutOfViewCid(reply.parentCid);
-                                  const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
-                                  const distanceToRight = window.innerWidth - rect.right;
-                                  const distanceToTop = rect.top;
-                                  const distanceToBottom = window.innerHeight - rect.bottom;
-                                  let top;
-
-                                  if (distanceToTop < postOnHoverHeight / 2) {
-                                    top = window.scrollY - 5;
-                                  } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                    top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                  } else {
-                                    top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                  }
-
-                                  if (distanceToRight < 200) {
-                                    setOutOfViewPosition({
-                                      top,
-                                      right: window.innerWidth - rect.left - 10,
-                                      maxWidth: rect.left - 5
-                                    });
-                                  } else {
-                                    setOutOfViewPosition({
-                                      top,
-                                      left: rect.left + rect.width + 5,
-                                      maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                    });
-                                  }
-                                });
-                              }}
-                              onMouseLeave={() => {
-                                removeHighlight();
-                                setOutOfViewCid(null);
-                              }}>
-                              {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
-                            </span>
-                            <Post key={`post-mobile-${index}`}
-                              content={reply.content}
-                              postQuoteRef={(quoteShortParentCid, ref) => {
-                                postRefs.current[quoteShortParentCid] = ref;
-                              }}
-                              postQuoteOnClick={(quoteShortParentCid) => {
-                                handleQuoteClick(reply, quoteShortParentCid, null)
-                              }}
-                              postQuoteOnOver={(quoteShortParentCid) => {
-                                const quoteParentCid = cidTracker[quoteShortParentCid];
-                                if (outOfViewCid !== quoteParentCid) {
-                                  handleQuoteHover(reply, quoteShortParentCid, () => {
-                                    setOutOfViewCid(quoteParentCid);
-
-                                    const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
-                                    const distanceToRight = window.innerWidth - rect.right;
-                                    const distanceToTop = rect.top;
-                                    const distanceToBottom = window.innerHeight - rect.bottom;
-                                    let top;
-
-                                    if (distanceToTop < postOnHoverHeight / 2) {
-                                      top = window.scrollY - 5;
-                                    } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                      top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                    } else {
-                                      top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                    }
-
-                                    if (distanceToRight < 200) {
-                                      setOutOfViewPosition({
-                                        top,
-                                        right: window.innerWidth - rect.left - 10,
-                                        maxWidth: rect.left - 5
-                                      });
-                                    } else {
-                                      setOutOfViewPosition({
-                                        top,
-                                        left: rect.left + rect.width + 5,
-                                        maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                      });
-                                    }
-                                  })
-                                }
-                              }
-                              }
-                              postQuoteOnLeave={() => {
-                                removeHighlight();
-                                setOutOfViewCid(null);
-                              }}
-                            />
-                            <EditLabel key={`edit-label-reply-mob-${index}`}
-                              commentCid={reply.cid}
-                              className="ttl" />
-                            <StateLabel key={`state-label-reply-mob-${index}`}
-                              commentIndex={reply.index}
-                              className="ttl ellipsis" />
-                          </blockquote>
-                          {reply.replyCount > 0 ? (
-                            <div key={`back-mob-${index}`} className='backlink backlink-mobile'>
-                              {reply.replies?.pages?.topAll.comments
-                                .sort((a, b) => a.timestamp - b.timestamp)
-                                .map((reply, index) => (
-                                  <div key={`div-back${index}`} style={{ display: 'inline-block' }}
-                                    ref={el => {
-                                      backlinkRefsMobile.current[reply.cid] = el;
-                                    }}>
-                                    <span style={{ cursor: 'pointer' }} key={`ql-${index}`} className="quote-link"
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                      onMouseOver={(event) => {
-                                        event.stopPropagation();
-                                        handleQuoteHover(reply, reply.shortCid, () => {
-                                          setOutOfViewCid(reply.cid)
-                                          const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
-                                          const distanceToRight = window.innerWidth - rect.right;
-                                          const distanceToTop = rect.top;
-                                          const distanceToBottom = window.innerHeight - rect.bottom;
-                                          let top;
-
-                                          if (distanceToTop < postOnHoverHeight / 2) {
-                                            top = window.scrollY - 5;
-                                          } else if (distanceToBottom < postOnHoverHeight / 2) {
-                                            top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
-                                          } else {
-                                            top = rect.top + window.scrollY - postOnHoverHeight / 2;
-                                          }
-
-                                          if (distanceToRight < 200) {
-                                            setOutOfViewPosition({
-                                              top,
-                                              right: window.innerWidth - rect.left - 10,
-                                              maxWidth: rect.left - 5
-                                            });
-                                          } else {
-                                            setOutOfViewPosition({
-                                              top,
-                                              left: rect.left + rect.width + 5,
-                                              maxWidth: window.innerWidth - rect.left - rect.width - 5
-                                            });
-                                          }
-                                        });
-                                      }}
-                                      onMouseLeave={() => {
-                                        removeHighlight();
-                                        setOutOfViewCid(null);
-                                      }} >
-                                      c/{reply.shortCid}</span>
-                                    &nbsp;
-                                  </div>
-                                ))}
-                            </div>
-                          ) : null}
+                            <br key={`mob-br-${index}`} />
+                          </span>
+                          <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
+                            {getDate(reply?.timestamp)}&nbsp;
+                            <span key={`mob-pl1-${index}`}>c/</span>
+                            {reply.shortCid ? (
+                              <Link id="reply-button" key={`mob-pl2-${index}`} 
+                              onClick={() => {
+                                let text = document.getSelection().toString();
+                                text = text ? `>${text}` : text;
+                                setSelectedText(text);
+                                if (isReplyOpen) {
+                                  setReplyQuoteCid(reply.shortCid);
+                                  setTriggerInsertion(Date.now());
+                                } else {
+                                  setIsReplyOpen(true); 
+                                  setSelectedShortCid(reply.shortCid);
+                                  setSelectedParentCid(reply.cid); 
+                                }}} title="Reply to this post">{reply.shortCid}</Link>
+                            ) : (
+                              <PendingLabel key="pending-mob" commentIndex={reply.index} />
+                            )}
+                          </span>
                         </div>
+                        {reply.link ? (
+                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
+                                {replyMediaInfo?.url ? (
+                                  replyMediaInfo.type === "webpage" ? (
+                                    <div key="enlarge-reply-mob" className="img-container">
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        {reply.thumbnailUrl ? (
+                                          <img key={`mob-img-${reply.cid}`} 
+                                          src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} 
+                                          onClick={handleImageClick}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : null}
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : replyMediaInfo.type === "image" ? (
+                                    <div key="enlarge-reply-mob" className="img-container">
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <img key={`mob-img-${reply.cid}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        onClick={handleImageClick}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : replyMediaInfo.type === "video" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <video key={`fti-${reply.cid}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        style={{ pointerEvents: "none" }}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : replyMediaInfo.type === "audio" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <audio key={`mob-img-${reply.cid}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : null
+                                ) : null}
+                            </div>
+                          ) : null}
+                        <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
+                          <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" 
+                            ref={el => {
+                              quoteRefsMobile.current[reply.cid] = el;
+                            }}
+                            onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                            onMouseOver={(event) => {
+                              event.stopPropagation();
+                              handleQuoteHover(reply, shortParentCid, () => {
+                                setOutOfViewCid(reply.parentCid);
+                                const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect();
+                                const distanceToRight = window.innerWidth - rect.right;
+                                const distanceToTop = rect.top;
+                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                let top;
+
+                                if (distanceToTop < postOnHoverHeight / 2) {
+                                  top = window.scrollY - 5;
+                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                } else {
+                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                }
+                              
+                                if (distanceToRight < 200) {
+                                  setOutOfViewPosition({
+                                    top,
+                                    right: window.innerWidth - rect.left - 10,
+                                    maxWidth: rect.left - 5
+                                  });
+                                } else {
+                                  setOutOfViewPosition({
+                                    top,
+                                    left: rect.left + rect.width + 5,
+                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                  });
+                                }
+                              });
+                            }}
+                            onMouseLeave={() => {
+                              removeHighlight();
+                              setOutOfViewCid(null);
+                            }}>
+                            {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
+                          </span>
+                          <Post key={`post-mobile-${index}`}
+                            content={reply.content} 
+                            postQuoteRef={(quoteShortParentCid, ref) => {
+                              postRefs.current[quoteShortParentCid] = ref;
+                            }}
+                            postQuoteOnClick={(quoteShortParentCid) => {
+                              handleQuoteClick(reply, quoteShortParentCid, null)
+                            }}
+                            postQuoteOnOver={(quoteShortParentCid) => {
+                              const quoteParentCid = cidTracker[quoteShortParentCid];
+                              if (outOfViewCid !== quoteParentCid) {
+                                handleQuoteHover(reply, quoteShortParentCid, () => {
+                                  setOutOfViewCid(quoteParentCid);
+
+                                const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                const distanceToRight = window.innerWidth - rect.right;
+                                const distanceToTop = rect.top;
+                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                let top;
+
+                                if (distanceToTop < postOnHoverHeight / 2) {
+                                  top = window.scrollY - 5;
+                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                } else {
+                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                }
+                              
+                                if (distanceToRight < 200) {
+                                  setOutOfViewPosition({
+                                    top,
+                                    right: window.innerWidth - rect.left - 10,
+                                    maxWidth: rect.left - 5
+                                  });
+                                } else {
+                                  setOutOfViewPosition({
+                                    top,
+                                    left: rect.left + rect.width + 5,
+                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                  });
+                                }
+                              })
+                            }}
+                          }
+                            postQuoteOnLeave={() => {
+                              removeHighlight();
+                              setOutOfViewCid(null);
+                            }}
+                          />
+                          <EditLabel key={`edit-label-reply-mob-${index}`} 
+                          commentCid={reply.cid}
+                          className="ttl"/>
+                          <StateLabel key={`state-label-reply-mob-${index}`}
+                          commentIndex={reply.index}
+                          className="ttl ellipsis"/>
+                        </blockquote>
+                        {reply.replyCount > 0 ? (
+                          <div key={`back-mob-${index}`} className='backlink backlink-mobile'>
+                          {reply.replies?.pages?.topAll.comments
+                          .sort((a, b) => a.timestamp - b.timestamp)
+                          .map((reply, index) => (
+                            <div key={`div-back${index}`} style={{display: 'inline-block'}} 
+                            ref={el => {
+                              backlinkRefsMobile.current[reply.cid] = el;
+                            }}>
+                            <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" 
+                            onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                            onMouseOver={(event) => {
+                              event.stopPropagation();
+                              handleQuoteHover(reply, reply.shortCid, () => {
+                                setOutOfViewCid(reply.cid)
+                                const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
+                                const distanceToRight = window.innerWidth - rect.right;
+                                const distanceToTop = rect.top;
+                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                let top;
+
+                                if (distanceToTop < postOnHoverHeight / 2) {
+                                  top = window.scrollY - 5;
+                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                } else {
+                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                }
+                              
+                                if (distanceToRight < 200) {
+                                  setOutOfViewPosition({
+                                    top,
+                                    right: window.innerWidth - rect.left - 10,
+                                    maxWidth: rect.left - 5
+                                  });
+                                } else {
+                                  setOutOfViewPosition({
+                                    top,
+                                    left: rect.left + rect.width + 5,
+                                    maxWidth: window.innerWidth - rect.left - rect.width - 5
+                                  });
+                                }
+                              });
+                            }}
+                            onMouseLeave={() => {
+                              removeHighlight();
+                              setOutOfViewCid(null);
+                            }} >
+                              c/{reply.shortCid}</span>
+                              &nbsp;
+                            </div>
+                          ))}
+                          </div>
+                        ) : null}
                       </div>
+                    </div>
                     )
                   })
-                  }
-                </div>
-                <BottomBar selectedStyle={selectedStyle}>
+                }
+              </div>
+              <BottomBar selectedStyle={selectedStyle}>
                   <div id="bottombar-desktop">
                     <hr />
                     <span className="bottom-bar-return">
@@ -2171,15 +2129,15 @@ const Thread = () => {
                     </span>
                     <span className="bottom-bar-top">
                       [
-                      <span id="button" onClick={() => window.scrollTo(0, 0)}
-                        onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-                        onTouchStart={() => window.scrollTo(0, 0)}>Top</span>
+                      <span id="button" onClick={() => window.scrollTo(0, 0)} 
+                      onMouseOver={(event) => event.target.style.cursor='pointer'} 
+                      onTouchStart={() => window.scrollTo(0, 0)}>Top</span>
                       ]
                     </span>
                     <span className="quickreply-button">
-                      [
-                      <span id="button" onClick={() => { setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</span>
-                      ]
+                    [
+                      <span id="button" onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span>
+                    ]
                     </span>
                     {comment ? (
                       comment.replyCount !== undefined ? (
@@ -2203,11 +2161,11 @@ const Thread = () => {
                 </BottomBar>
                 {comment.replyCount > 2 ? (
                   <div id="bottombar-mobile">
-                    <hr style={{ marginTop: "30px" }} />
-                    <TopBar selectedStyle={selectedStyle} style={{ marginTop: "-5px" }}>
+                    <hr style={{marginTop: "30px"}} />
+                    <TopBar selectedStyle={selectedStyle} style={{marginTop: "-5px"}}>
                       <span className="style-changer">
                         Style:
-
+                         
                         <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
                           <option value="Yotsuba">Yotsuba</option>
                           <option value="Yotsuba-B">Yotsuba B</option>
@@ -2239,7 +2197,7 @@ const Thread = () => {
                     <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} >
                       <div id="post-form-link-mobile" className="post-button-mobile">
                         <span className="btn-wrap">
-                          <span style={{ cursor: 'pointer' }} onClick={() => { setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</span>
+                          <span style={{cursor: 'pointer'}} onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span>
                         </span>
                       </div>
                       <div id="btns-container">
@@ -2248,17 +2206,17 @@ const Thread = () => {
                             <Link to={`/p/${selectedAddress}`}>Return</Link>
                           </span>
                         </div>
-                        <div id="catalog-button-mobile" style={{ paddingRight: "2px" }}>
+                        <div id="catalog-button-mobile" style={{paddingRight: "2px"}}>
                           <span className="btn-wrap">
                             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
                           </span>
                         </div>
                         <span className="bottom-bar-top">
                           <span className="btn-wrap">
-                            <span onClick={() => window.scrollTo(0, 0)}
-                              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-                              onTouchStart={() => window.scrollTo(0, 0)}
-                              style={{ cursor: 'pointer', marginRight: "10px", marginLeft: "10px" }}
+                            <span onClick={() => window.scrollTo(0, 0)} 
+                            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+                            onTouchStart={() => window.scrollTo(0, 0)}
+                            style={{cursor: 'pointer', marginRight: "10px", marginLeft: "10px"}}
                             >Top</span>
                           </span>
                         </span>
@@ -2266,8 +2224,8 @@ const Thread = () => {
                     </ReplyFormLink>
                   </div>
                 ) : (null)}
-              </>
-            )) : null}
+            </>
+          )) : null}
           {outOfViewCid && outOfViewPosition && createPortal(
             <div
               ref={postOnHoverRef}
@@ -2285,7 +2243,7 @@ const Thread = () => {
                 feed={comment}
               />
             </div>
-            , document.body)}
+          , document.body)}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
@@ -2300,7 +2258,7 @@ const Thread = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -2314,43 +2272,43 @@ const Thread = () => {
             marginTop: "42px",
           }}>
             <>
-              <span className="boardList">
-                [
+            <span className="boardList">
+              [
                 <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                /
+                 / 
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-                ]&nbsp;
+              ]&nbsp;
+            </span>
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              <span className="nav">
-                [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
-                ]
+            ))}
+            <span className="nav">
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                 [
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
-                <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>
                 ]
               </span>
@@ -2367,13 +2325,13 @@ const Thread = () => {
               marginTop: "5px",
               marginBottom: "15px",
             }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
             &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
           </div>
         </Footer>
       </Container>
diff --git a/yarn.lock b/yarn.lock
index 0824e24a..4a20f76e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2658,6 +2658,52 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8":
+  version "0.0.3"
+  resolved "https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8"
+  dependencies:
+    "@adraffy/ens-normalize" "1.8.3"
+    "@keyv/sqlite" "3.6.2"
+    "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
+    "@types/node-fetch" "2.6.2"
+    "@types/proper-lockfile" "4.1.2"
+    "@types/uuid" "8.3.4"
+    assert "2.0.0"
+    async-wait-until "2.0.12"
+    buffer "6.0.3"
+    captcha-canvas "3.2.1"
+    err-code "3.0.1"
+    ethers "6.6.0"
+    file-type "16.5.4"
+    form-data "4.0.0"
+    hpagent "1.2.0"
+    ipfs-http-client "56.0.3"
+    ipfs-only-hash "4.0.0"
+    is-ipfs "6.0.2"
+    jose "4.11.0"
+    js-sha256 "0.9.0"
+    keyv "4.5.2"
+    knex "2.4.2"
+    libp2p-crypto "0.21.2"
+    limiter "2.1.0"
+    localforage "1.10.0"
+    lodash-es "4.17.21"
+    lru-cache "7.18.3"
+    open-graph-scraper "5.2.3"
+    p-limit "3.1.0"
+    peer-id "0.16.0"
+    proper-lockfile "github:plebbit/node-proper-lockfile"
+    retry "0.13.1"
+    safe-stable-stringify "2.4.1"
+    sha1-uint8array "0.10.3"
+    skia-canvas "1.0.0"
+    sqlite3 "5.1.6"
+    tiny-typed-emitter "2.1.0"
+    tinycache "1.1.2"
+    ts-custom-error "3.3.1"
+    uuid "9.0.0"
+    viem "1.0.7"
+
 "@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22":
   version "0.0.3"
   resolved "https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22"
@@ -2704,7 +2750,7 @@
     uuid "9.0.0"
     viem "1.0.7"
 
-"@plebbit/plebbit-logger@github:plebbit/plebbit-logger#9525ca9539479918931c3b334e8d490d1c87e507":
+"@plebbit/plebbit-logger@github:plebbit/plebbit-logger", "@plebbit/plebbit-logger@github:plebbit/plebbit-logger#9525ca9539479918931c3b334e8d490d1c87e507":
   version "0.0.1"
   uid "9525ca9539479918931c3b334e8d490d1c87e507"
   resolved "https://codeload.github.com/plebbit/plebbit-logger/tar.gz/9525ca9539479918931c3b334e8d490d1c87e507"
@@ -2717,6 +2763,21 @@
   dependencies:
     debug "4.3.3"
 
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#1abe9497483d01f3afcb569dfe85e7395f998cc4":
+  version "0.0.1"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#1abe9497483d01f3afcb569dfe85e7395f998cc4"
+  dependencies:
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8"
+    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
+    assert "2.0.0"
+    ethers "5.6.9"
+    localforage "1.10.0"
+    lodash.isequal "4.5.0"
+    memoizee "0.4.15"
+    quick-lru "5.1.1"
+    uuid "8.3.2"
+    zustand "4.0.0"
+
 "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5":
   version "0.0.1"
   resolved "https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5"
@@ -12051,7 +12112,7 @@ prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-"proper-lockfile@github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff":
+"proper-lockfile@github:plebbit/node-proper-lockfile", "proper-lockfile@github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff":
   version "4.1.2"
   resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/d8b63817f9ea3304d3e048976d72b3108ec076ff"
   dependencies: