diff --git a/src/App.js b/src/App.js
index 8f6a090a..79756c9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { useAccount, useBufferedFeeds } from '@plebbit/plebbit-react-hooks';
@@ -7,6 +7,8 @@ import 'react-toastify/dist/ReactToastify.css';
 import useGeneralStore from './hooks/stores/useGeneralStore';
 import { GlobalStyle } from './components/styled/GlobalStyle.styled';
 import { Toast } from './components/styled/Toast.styled';
+import All from './components/views/All';
+import AllCatalog from './components/views/AllCatalog';
 import Board from './components/views/Board';
 import Catalog from './components/views/Catalog';
 import Home from './components/views/Home';
@@ -18,6 +20,8 @@ import Thread from './components/views/Thread';
 import CaptchaModal from './components/CaptchaModal';
 import { importAll } from './components/ImageBanner';
 import preloadImages from './utils/preloadImages';
+import useError from "./hooks/useError";
+import useSuccess from "./hooks/useSuccess";
 
 
 export default function App() {
@@ -36,6 +40,26 @@ export default function App() {
 
   const account = useAccount();
 
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+  useSuccess(successMessage, [successMessage]);
+
+
+  useEffect(() => {
+    const successToast = localStorage.getItem("successToast");
+    const errorToast = localStorage.getItem("errorToast");
+    if (successToast) {
+      setSuccessMessage(successToast);
+      localStorage.removeItem("successToast");
+    } else if (errorToast) {
+      setErrorMessage(errorToast);
+      localStorage.removeItem("errorToast");
+    } else {
+      return;
+    }
+  }, [setErrorMessage, setSuccessMessage]);
+
   // preload default subs and subscriptions
   useBufferedFeeds({
     feedsOptions: [
@@ -169,6 +193,12 @@ export default function App() {
         <Route path={`p/subscriptions/catalog`} element={<SubscriptionsCatalog setBodyStyle={setBodyStyle} /> }>
           <Route path='settings' element={<SubscriptionsCatalog />} />
         </Route>
+        <Route path={`p/all`} element={<All setBodyStyle={setBodyStyle} /> }>
+          <Route path='settings' element={<All />} />
+        </Route>
+        <Route path={`p/all/catalog`} element={<AllCatalog setBodyStyle={setBodyStyle} /> }>
+          <Route path='settings' element={<AllCatalog />} />
+        </Route>
         <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
       </Routes>
       <Toast />
diff --git a/src/components/BoardAvatar.jsx b/src/components/BoardAvatar.jsx
index 8d5a040b..beb393ec 100644
--- a/src/components/BoardAvatar.jsx
+++ b/src/components/BoardAvatar.jsx
@@ -6,8 +6,6 @@ const BoardAvatar = ({ address }) => {
   const [avatarUrl, setAvatarUrl] = useState("assets/plebchan.png");
   const subplebbit = useSubplebbit({ subplebbitAddress: address });
 
-  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
-
   useEffect(() => {
     if (subplebbit.suggested?.avatarUrl) {
       setAvatarUrl(subplebbit.suggested.avatarUrl);
@@ -15,21 +13,11 @@ const BoardAvatar = ({ address }) => {
   }, [subplebbit.suggested?.avatarUrl, subplebbit]);
 
   return (
-    <>
-      <div className="board-avatar-container">
-        <img
-          className="board-avatar"
-          alt="board logo"
-          src={avatarUrl}
-        />
-        {!isOnline && (
-          <img className="offline-indicator" alt="offline" src="assets/offline.png"
-          data-tooltip-id="tooltip"
-          data-tooltip-content="Offline"
-          data-tooltip-place="top" />
-        )}
-      </div>
-    </>
+    <img
+      className="board-avatar"
+      alt="board logo"
+      src={avatarUrl}
+    />
   );
 };
 
diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index 4c893c3c..43cea717 100644
--- a/src/components/SettingsModal.jsx
+++ b/src/components/SettingsModal.jsx
@@ -64,7 +64,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
     try {
       await setAccount({ ...account, plebbitOptions });
-      localStorage.setItem("toastMessage", "Settings Saved");
+      localStorage.setItem("successToast", "Settings Saved");
       window.location.reload();
     } catch (error) {
       setErrorMessage(error.message);
@@ -97,7 +97,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           pubsubHttpClientsOptions: defaultPubsubHttpClientsOptions,
         },
       });
-      localStorage.setItem("toastMessage", "Settings Reset");
+      localStorage.setItem("successToast", "Settings Reset");
       window.location.reload();
     } catch (error) {
       setErrorMessage(error.message);
@@ -158,9 +158,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     const accountJson = importRef.current.value;
 
     try {
+      const parsedJson = JSON.parse(accountJson);
       await importAccount(accountJson);
-      localStorage.setItem("toastMessage", "Account Imported");
-      window.location.reload();
+      setActiveAccount(parsedJson.account?.name);
+      setSuccessMessage("Account Imported");
       
     } catch (error) {
       setErrorMessage(error.message);
diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx
index c3981457..8ba5e343 100644
--- a/src/components/styled/Board.styled.jsx
+++ b/src/components/styled/Board.styled.jsx
@@ -427,7 +427,7 @@ export const Header = styled.div`
   .offline {
     width: 16px; 
     position: relative;
-    margin: 2px 2px -4px 2px;
+    margin: 2px 2px -2px 2px;
   }
 `;
 
@@ -1402,6 +1402,31 @@ export const TopBar = styled.div`
       }
   }}
 
+  .ellipsis {
+    margin-right: 14px;
+  }
+
+  .ellipsis:after {
+    content: "\\2026";
+    position: absolute;
+    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+    animation: ellipsis steps(4,end) 1500ms infinite;
+    width: 0px;
+    overflow: hidden;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
   @media (min-width: 480px) {
     #catalog-button-mobile {
       display: none;
@@ -1631,14 +1656,14 @@ export const BoardForm = styled.div`
     .offline-sub {
       width: 13px;
       margin-right: -5px;
-      margin-bottom: -3px;
+      margin-bottom: -1px;
       position: relative;
     }
 
     .offline-reply {
       width: 13px;
       margin-right: 2px;
-      margin-bottom: -3px;
+      margin-bottom: -1px;
       position: relative;
     }
 
@@ -2994,13 +3019,13 @@ export const BoardForm = styled.div`
 
     .offline-mobile-sub {
       width: 13px;
-      margin-top: 3px;
+      margin-top: 4px;
       margin-right: 5px;
     }
 
     .offline-mobile-sub-reply {
       width: 13px;
-      margin-top: 3px;
+      margin-top: 4px;
     }
 
     .thread {
diff --git a/src/components/styled/Catalog.styled.jsx b/src/components/styled/Catalog.styled.jsx
index de5f20d0..0c09d11f 100644
--- a/src/components/styled/Catalog.styled.jsx
+++ b/src/components/styled/Catalog.styled.jsx
@@ -23,7 +23,7 @@ export const Threads = styled.div`
     max-height: 150px;
   }
 
-  img {
+  .card {
     display: inline;
     margin: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
@@ -45,7 +45,7 @@ export const Threads = styled.div`
   }
 
   .offline-icon-no-link {
-    height: 13px;
+    height: 11px;
     position: absolute;
     margin-left: 13px;
     margin-top: -2px;
diff --git a/src/components/styled/Thread.styled.jsx b/src/components/styled/Thread.styled.jsx
index 6c682581..203d5440 100644
--- a/src/components/styled/Thread.styled.jsx
+++ b/src/components/styled/Thread.styled.jsx
@@ -227,6 +227,31 @@ export const TopBar = styled.div`
     }
   }
 
+  .ellipsis {
+    margin-right: 18px !important;
+  }
+
+  .ellipsis:after {
+    content: "\\2026";
+    position: absolute;
+    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+    animation: ellipsis steps(4,end) 1500ms infinite;
+    width: 0px;
+    overflow: hidden;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
   .return-button {
     display: inline-block;
   }
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
new file mode 100644
index 00000000..336d5825
--- /dev/null
+++ b/src/components/views/All.jsx
@@ -0,0 +1,1105 @@
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Link, useNavigate } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
+import { Virtuoso } from 'react-virtuoso';
+import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
+import { debounce } from 'lodash';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
+import { Footer } from '../styled/Thread.styled';
+import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
+import Post from '../Post';
+import PostLoader from '../PostLoader';
+import ReplyModal from '../ReplyModal';
+import SettingsModal from '../SettingsModal';
+import findShortParentCid from '../../utils/findShortParentCid';
+import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import getDate from '../../utils/getDate';
+import handleAddressClick from '../../utils/handleAddressClick';
+import handleImageClick from '../../utils/handleImageClick';
+import handleQuoteClick from '../../utils/handleQuoteClick';
+import handleStyleChange from '../../utils/handleStyleChange';
+import useError from '../../hooks/useError';
+import useFeedStateString from '../../hooks/useFeedStateString';
+import packageJson from '../../../package.json'
+const {version} = packageJson
+
+
+const All = () => {
+  const {
+    defaultSubplebbits,
+    isSettingsOpen, setIsSettingsOpen,
+    setSelectedAddress,
+    setSelectedParentCid,
+    setSelectedShortCid,
+    selectedStyle,
+    setSelectedThread,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const account = useAccount();
+
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
+  const navigate = useNavigate();
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  const [errorMessage, setErrorMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+
+  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'new'});
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'new'});
+  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+
+  const stateString = useFeedStateString(subplebbits);
+  
+  const errorString = useMemo(() => {
+    for (const subplebbit of subplebbits) {
+      if (subplebbit?.updatingState !== 'failed') {
+        return
+      }
+    }
+    for (const subplebbit of subplebbits) {
+      if (subplebbit?.error) {
+        return `Failed fetching subplebbit: ${subplebbit?.error.toString().slice(0, 300)}`
+      }
+    }
+  }, [subplebbits])
+
+  useEffect(() => {
+    if (errorString) {
+      setErrorMessage(errorString)
+    }
+  }, [errorString])
+
+
+  useEffect(() => {
+    setSelectedFeed(feed.sort((a, b) => b.timestamp - a.timestamp));
+  }, [feed]);
+
+
+  const flattenedRepliesByThread = useMemo(() => {
+    return selectedFeed.reduce((acc, thread) => {
+      const replies = flattenCommentsPages(thread.replies);
+      acc[thread.cid] = replies;
+      return acc;
+    }, {});
+  }, [selectedFeed]);
+  
+
+  const allParentCids = useMemo(() => {
+    const allRepliesCids = Object.values(flattenedRepliesByThread).flatMap(replies => replies.map(reply => reply.cid));
+    const allThreadCids = selectedFeed.map(thread => thread.cid);
+    return [...allThreadCids, ...allRepliesCids];
+  }, [flattenedRepliesByThread, selectedFeed]);  
+  
+
+  const filter = useMemo(() => ({
+    parentCids: allParentCids
+  }), [allParentCids]);
+  
+
+  const { accountComments } = useAccountComments({ filter });
+  
+
+  const filteredRepliesByThread = useMemo(() => {
+    const maxRepliesPerThread = 5;
+
+    const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => {
+      const replyCids = new Set(flattenedRepliesByThread[thread.cid].map(reply => reply.cid));
+      acc[thread.cid] = accountComments.filter(accountReply => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid);
+      return acc;
+    }, {});
+
+    return selectedFeed.reduce((acc, thread) => {
+      const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp);
+      acc[thread.cid] = {
+        displayedReplies: combinedReplies.slice(0, maxRepliesPerThread),
+        omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0),
+      };
+      return acc;
+    }, {});
+  }, [flattenedRepliesByThread, accountComments, selectedFeed]);
+
+
+  const pendingReplyCounts = useMemo(() => {
+    return selectedFeed.reduce((acc, thread) => {
+      const replyCids = new Set(flattenedRepliesByThread[thread.cid].map(reply => reply.cid));
+      acc[thread.cid] = accountComments.filter(accountReply => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid).length;
+      return acc;
+    }, {});
+  }, [flattenedRepliesByThread, accountComments, selectedFeed]);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+  
+
+  const tryLoadMore = async () => {
+    try {
+      await loadMore();
+    } catch (e) {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+  };
+
+  // desktop navbar board select functionality
+  const handleClickTitle = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+    setSelectedFeed(feed.filter(feed => feed.title === title));
+  };
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+    
+    const selectedTitle = defaultSubplebbits?.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+
+  return (
+    <>
+      <Helmet>
+        <title>p/All - plebchan</title>
+      </Helmet>
+      <Container>
+        <ReplyModal 
+        selectedStyle={selectedStyle}
+        isOpen={isReplyOpen}
+        closeModal={() => setIsReplyOpen(false)} />
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+        <>
+            <span className="boardList">
+              [
+                <Link to={`/p/all`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>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 className="nav">
+              [
+              <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                () => alert(
+                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                  )
+              }>Create Board</button>
+              ]
+              [
+              <Link to={`/p/all/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              ]
+              [
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+              )}>Home</Link>
+              ]
+            </span>
+            <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
+              <div className="board-select">
+                <strong>Board</strong>
+                &nbsp;
+                <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
+                  <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> 
+                <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    )
+                }>Create Board</button>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/all/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>Home</Link>
+              </div>
+            </div>
+            <div id="separator-mobile">&nbsp;</div>
+            <div id="separator-mobile">&nbsp;</div>
+          </>
+        </NavBar>
+        <Header selectedStyle={selectedStyle}>
+          <>
+            <div className="banner">
+              <ImageBanner />
+            </div>
+              <>
+              <div className="board-title">p/All</div>
+              <div className="board-address">Default boards, currently curated by devs.</div>
+              </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <TopBar selectedStyle={selectedStyle}>
+          <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>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <div id="catalog-button-desktop">
+            [
+            <Link to={`/p/all/catalog`}>Catalog</Link>
+            ]
+          </div>
+          {feed.length > 0 ? (
+            null
+          ) : (
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
+            </div>
+          )}
+          <div id="catalog-button-mobile">
+            <span className="btn-wrap">
+              <Link to={`/p/all/catalog`}>Catalog</Link>
+            </span>
+          </div>
+        </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
+        <BoardForm selectedStyle={selectedStyle}>
+          <div className="board">
+            { feed.length < 1 ? (
+              null
+            ) : (
+              <Virtuoso
+                increaseViewportBy={2000}
+                data={selectedFeed}
+                itemContent={(index, thread) => {
+                  const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
+                  const commentMediaInfo = getCommentMediaInfo(thread);
+                  const fallbackImgUrl = "assets/filedeleted-res.gif";
+                  return (
+                <Fragment key={`fr-${index}`}>
+                  <div key={`t-${index}`} className="thread">
+                    <div key={`c-${index}`} className="op-container">
+                      <div key={`po-${index}`} className="post op op-desktop">
+                        <hr key={`hr-${index}`} />
+                        <div key={`pi-${index}`} className="post-info">
+                        {commentMediaInfo?.url ? (
+                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${index}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                              rel="noopener noreferrer">{
+                              commentMediaInfo?.url.length > 30 ?
+                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                              commentMediaInfo?.url
+                              }</a>&nbsp;({commentMediaInfo?.type})
+                            </div>
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb">
+                                  {thread.thumbnailUrl ? (
+                                    <img key={`fti-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    onClick={handleImageClick}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb">
+                                  <img key={`fti-${index}`} 
+                                  src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                  onClick={handleImageClick}
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <video controls width="" key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <audio controls key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                          </div>
+                        ) : null}
+                          <span key={`nb-${index}`} className="name-block">
+                            {thread.title ? (
+                              thread.title.length > 75 ?
+                              <Fragment key={`fragment2-${index}`}>
+                                <span key={`q-${index}`} className="title"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={thread.title}
+                                data-tooltip-place="top">
+                                  {thread.title.slice(0, 75) + " (...)"}
+                                </span>
+                              </Fragment>
+                            : <span key={`q-${index}`} className="title">
+                              {thread.title}
+                              </span>) 
+                            : null}&nbsp;
+                            {thread.author.displayName
+                            ? thread.author.displayName.length > 20
+                            ? <Fragment key={`fragment3-${index}`}>
+                                <span key={`n-${index}`} className="name"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={thread.author.displayName}
+                                data-tooltip-place="top">
+                                  {thread.author.displayName.slice(0, 20) + " (...)"}
+                                </span>
+                              </Fragment> 
+                              : <span key={`n-${index}`} className="name">
+                                {thread.author.displayName}</span>
+                            : <span key={`n-${index}`} className="name">
+                              Anonymous</span>}
+                            &nbsp;
+                            (u/
+                            <span key={`pa-${index}`} className="poster-address address-desktop"
+                            id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                            >
+                              {thread.author.shortAddress}
+                            </span>)
+                            &nbsp;
+                            <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
+                            &nbsp;
+                            <span key={`pn-${index}`} className="post-number post-number-desktop">
+                              <span key={`pl1-${index}`}>c/</span>
+                              <Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
+                              onClick={(e) => {
+                                if (e.button === 2) return;
+                                e.preventDefault();
+                                setIsReplyOpen(true); 
+                                setSelectedShortCid(thread.shortCid); 
+                                setSelectedParentCid(thread.cid);
+                                setSelectedAddress(thread.subplebbitAddress);
+                                }} title="Reply to this post">{thread.shortCid}
+                              </Link>
+                              &nbsp;p/
+                              <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
+                                {thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
+                                  <span key={`short-add${index}`}
+                                  data-tooltip-id="tooltip"
+                                  data-tooltip-content={thread.subplebbitAddress}
+                                  data-tooltip-place="top"
+                                  >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
+                                )}
+                              </Link>
+                              <OfflineIndicator key={`oi-${index}`}
+                              address={thread.subplebbitAddress} 
+                              className="offline-sub"
+                              tooltipPlace="top" />
+                              <span key={`rl1-${index}`}>&nbsp;&nbsp;
+                                [
+                                <Link key={`rl2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
+                                ]
+                              </span>
+                            </span>&nbsp;
+                            <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                            <div key={`bi-${index}`} id="backlink-id" className="backlink">
+                              {thread.replies?.pages?.topAll.comments
+                                .sort((a, b) => a.timestamp - b.timestamp)
+                                .map((reply, index) => (
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <Link key={`ql-${index}`}
+                                  to={() => {}} className="quote-link" 
+                                  onClick={(event) => handleQuoteClick(reply, null, event)}>
+                                    c/{reply.shortCid}</Link>
+                                    &nbsp;
+                                  </div>
+                                ))
+                              }
+                            </div>
+                          </span>
+                          {thread.content ? (
+                            thread.content?.length > 1000 ?
+                            <Fragment key={`fragment5-${index}`}>
+                              <blockquote key={`bq-${index}`}>
+                              <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                <span key={`ttl-s-${index}`} className="ttl"> (...) 
+                                <br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${thread.cid}`} />
+                                Post too long.&nbsp;
+                                  <Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                  &nbsp;to view. </span>
+                              </blockquote>
+                            </Fragment>
+                          : <blockquote key={`bq-${index}`}>
+                              <Post content={thread.content} key={`post-${index}`} />
+                            </blockquote>)
+                          : null}
+                        </div>
+                      </div>
+                    </div>
+                    <span key={`summary-${index}`} className="summary">
+                      {omittedCount > 0 ? (
+                      <span key={`oc-${index}`} className="ttl">
+                        <span key={`oc1-${index}`}>
+                          {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
+                          <Link key={`oc2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
+                          &nbsp;to view.
+                        </span>
+                      </span>) : null}
+                    </span>
+                    {displayedReplies?.map((reply, index) => {
+                      const replyMediaInfo = getCommentMediaInfo(reply);
+                      const fallbackImgUrl = "assets/filedeleted-res.gif";
+                      const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                      return (
+                        <div key={`rc-${index}`} className="reply-container">
+                          <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">
+                              <span key={`nb-${index}`} className="nameblock">
+                                {reply.author.displayName
+                                  ? reply.author.displayName.length > 20
+                                  ? <Fragment key={`fragment6-${index}`}>
+                                      <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>
+                                    </Fragment>
+                                    : <span key={`mob-n-${index}`} className="name">
+                                      {reply.author.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"}}
+                                  onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                >
+                                  (u/
+                                    {reply.author?.shortAddress ?
+                                      (
+                                        <span key={`mob-ha-${index}`}>
+                                          {reply.author?.shortAddress}
+                                        </span>
+                                      ) : (
+                                        <span key={`mob-ha-${index}`}
+                                          data-tooltip-id="tooltip"
+                                          data-tooltip-content={account?.author?.address}
+                                          data-tooltip-place="top"
+                                        >
+                                          {account?.author?.address.slice(0, 10) + "(...)"}
+                                        </span>
+                                      )
+                                    }
+                                  )
+                                </span>
+                              </span>
+                              &nbsp;
+                              <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
+                              &nbsp;
+                              <span key={`pn-${index}`} className="post-number post-number-desktop">
+                                <span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
+                                {reply.shortCid ? (
+                                  <Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
+                                  onClick={(e) => {
+                                    if (e.button === 2) return;
+                                    e.preventDefault();
+                                    setIsReplyOpen(true); 
+                                    setSelectedShortCid(reply.shortCid); 
+                                    setSelectedParentCid(reply.cid);
+                                    setSelectedAddress(thread.subplebbitAddress);
+                                  }} title="Reply to this post">{reply.shortCid}</Link>
+                                ) : (
+                                  <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                )}
+                                &nbsp;p/
+                                <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
+                                {thread.subplebbitAddress.includes(".eth") ? 
+                                (thread.subplebbitAddress) : 
+                                (
+                                  <span key={`short-add${index}`}
+                                    data-tooltip-id="tooltip"
+                                    data-tooltip-content={thread.subplebbitAddress}
+                                    data-tooltip-place="top"
+                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                  </span>
+                                )}
+                              </Link>
+                              <OfflineIndicator key={`offline-reply-${index}`} 
+                              address={thread.subplebbitAddress}
+                              tooltipPlace="top"
+                              className="offline-reply" />
+                              </span>&nbsp;
+                              <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                              <div 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'}}>
+                                    <Link to={() => {}} key={`ql-${index}`}
+                                      className="quote-link" 
+                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                      c/{reply.shortCid}</Link>
+                                      &nbsp;
+                                    </div>
+                                  ))
+                                }
+                              </div>
+                            </div>
+                            {replyMediaInfo?.url ? (
+                              <div key={`f-${index}`} className="file" 
+                              style={{marginBottom: "5px"}}>
+                                <div key={`ft-${index}`} className="reply-file-text">
+                                  Link:&nbsp;
+                                  <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
+                                  rel="noopener noreferrer">{
+                                  replyMediaInfo?.url.length > 30 ?
+                                  replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                                  replyMediaInfo?.url
+                                  }</a>&nbsp;({replyMediaInfo?.type})
+                                </div>
+                                {replyMediaInfo?.type === "webpage" ? (
+                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                    <span key={`fta-${index}`} className="file-thumb-reply">
+                                      {reply.thumbnailUrl ? (
+                                        <img key={`fti-${index}`}
+                                        src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
+                                        onClick={handleImageClick}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : null}
+                                    </span>
+                                  </div>
+                                ) : null}
+                                {replyMediaInfo?.type === "image" ? (
+                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                    <span key={`fta-${index}`} className="file-thumb-reply">
+                                      <img key={`fti-${index}`}
+                                      src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                      onClick={handleImageClick}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                    </span>
+                                  </div>
+                                ) : null}
+                                {replyMediaInfo?.type === "video" ? (
+                                  <span key={`fta-${index}`} className="file-thumb-reply">
+                                    <video controls
+                                    key={`fti-${index}`} 
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "audio" ? (
+                                  <span key={`fta-${index}`} className="file-thumb-reply">
+                                    <audio controls 
+                                    key={`fti-${index}`}
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                              </div>
+                            ) : null}
+                            {reply.content ? (
+                              reply.content?.length > 500 ?
+                              <Fragment key={`fragment8-${index}`}>
+                                <blockquote key={`pm-${index}`} comment={reply} className="post-message">
+                                  <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                      {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                  </Link>
+                                  <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
+                                  <span key={`ttl-s-${index}`} className="ttl"> (...)
+                                  <br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${reply.cid}`} />
+                                  Comment too long.&nbsp;
+                                    <Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                  &nbsp;to view. </span>
+                                </blockquote>
+                              </Fragment>
+                            : <blockquote key={`pm-${index}`} className="post-message">
+                                <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                    {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                </Link>
+                                <Post content={reply.content} key={`post-${index}`} comment={reply} />
+                              </blockquote>)
+                            : null}
+                          </div>
+                        </div>
+                        )
+                    })}
+                  </div>
+                  <div key={`mob-t-${index}`} className="thread-mobile">
+                    {index === 0 ? (
+                      <hr key={`mob-hr-${index}`} style={{marginTop: '10px'}} />
+                    ) : (
+                      <hr key={`mob-hr-${index}`} />
+                    )}
+                    <div key={`mob-c-${index}`} className="op-container">
+                      <div key={`mob-po-${index}`} className="post op op-mobile">
+                        <div key={`mob-pi-${index}`} className="post-info-mobile">
+                          <button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                          <span key={`mob-nbm-${index}`} className="name-block-mobile">
+                            {thread.author.displayName
+                            ? thread.author.displayName.length > 20
+                            ? <Fragment key={`fragment9-${index}`}>
+                                <span key={`mob-n-${index}`} className="name-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={thread.author.displayName}
+                                data-tooltip-place="top">
+                                  {thread.author.displayName.slice(0, 20) + " (...)"}
+                                </span>
+                              </Fragment> 
+                              : <span key={`mob-n-${index}`} className="name-mobile">
+                                {thread.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(thread.author.shortAddress)}
+                            >
+                              (u/
+                              <span key={`mob-ha-${index}`} className="highlight-address-mobile">
+                                {thread.author.shortAddress}
+                              </span>
+                              )&nbsp;
+                            </span>
+                            <br key={`mob-br1-${index}`} />
+                            {thread.title ? (
+                              thread.title.length > 30 ?
+                              <Fragment key={`fragment11-${index}`}>
+                                <span key={`mob-t-${index}`} className="subject-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={thread.title}
+                                data-tooltip-place="top">
+                                  {thread.title.slice(0, 30) + " (...)"}
+                                </span>
+                              </Fragment>
+                            : <span key={`mob-t-${index}`} className="subject-mobile">
+                              {thread.title}
+                              </span>) 
+                            : null}
+                          </span>
+                            <span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
+                            p/
+                            <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
+                              {thread.subplebbitAddress.includes(".eth") ? 
+                              (thread.subplebbitAddress) : 
+                              (
+                                <span key={`short-add${index}`}
+                                  data-tooltip-id="tooltip"
+                                  data-tooltip-content={thread.subplebbitAddress}
+                                  data-tooltip-place="top"
+                                  >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                </span>
+                              )}
+                            </Link>
+                            <OfflineIndicator key={`offline-indicator-${index}`}
+                            address={thread.subplebbitAddress}
+                            tooltipPlace="top"
+                            className="offline-mobile-sub"  />
+                          </span>
+                          <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
+                            {getDate(thread.timestamp)}
+                            &nbsp;
+                            <span key={`mob-no-${index}`}>c/</span>
+                            <Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`} 
+                              onClick={(e) => {
+                                if (e.button === 2) return;
+                                e.preventDefault();
+                                setIsReplyOpen(true); 
+                                setSelectedShortCid(thread.shortCid); 
+                                setSelectedParentCid(thread.cid);
+                                setSelectedAddress(thread.subplebbitAddress);
+                              }} title="Reply to this post">{thread.shortCid}
+                            </Link>
+                          </span>
+                        </div>
+                        {thread.link ? (
+                          <div key={`mob-f-${index}`} className="file-mobile">
+                              {commentMediaInfo?.url ? (
+                                commentMediaInfo.type === "webpage" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      {thread.thumbnailUrl ? (
+                                        <img key={`mob-img-${index}`} 
+                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
+                                        onClick={handleImageClick}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : null}
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onClick={handleImageClick}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <video key={`fti-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                      style={{ pointerEvents: "none" }} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.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>
+                                ) : null
+                              ) : null}
+                          </div>
+                        ) : null}
+                        {thread.content ? (
+                          thread.content?.length > 500 ?
+                          <Fragment key={`fragment12-${index}`}>
+                            <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
+                              <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
+                              <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
+                              <br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
+                              Post too long.&nbsp;
+                                <Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                &nbsp;to view. </span>
+                            </blockquote>
+                          </Fragment>
+                        : <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
+                            <Post content={thread.content} key={`post-mobile-${index}`} />
+                          </blockquote>)
+                        : null}
+                      </div>
+                      <div key={`mob-pl-${index}`} className="post-link-mobile">
+                        <span key={`mob-info-${index}`} className="info-mobile">{
+                        (thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ?
+                        ("No replies")
+                        : (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ?
+                        ("1 reply")
+                        : (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ?
+                        ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
+                        : null
+                        }</span>
+                        <Link key={`rl2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
+                      </div>
+                    </div>
+                    {displayedReplies?.map((reply, index) => {
+                      const replyMediaInfo = getCommentMediaInfo(reply);
+                      const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                      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 key={`pmbm-${index}`} 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 > 20
+                              ? <Fragment key={`fragment13-${index}`}>
+                                  <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, 20) + " (...)"}
+                                  </span>
+                                </Fragment>
+                                : <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">
+                                      {reply.author?.shortAddress}
+                                    </span>
+                                    ) : (
+                                      <span key={`mob-ha-${index}`} 
+                                        data-tooltip-id="tooltip"
+                                        data-tooltip-content={account?.author?.address}
+                                        data-tooltip-place="top"
+                                          >
+                                        {account?.author?.address.slice(0, 8) + "(...)"}
+                                      </span>
+                                    )
+                                  }
+                                )&nbsp;
+                              </span>
+                              <br key={`mob-br-${index}`} />
+                            </span>
+                            <span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
+                            &nbsp;p/
+                              <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
+                                {thread.subplebbitAddress.includes(".eth") ? 
+                                (thread.subplebbitAddress) : 
+                                (
+                                  <span key={`short-add${index}`}
+                                    data-tooltip-id="tooltip"
+                                    data-tooltip-content={thread.subplebbitAddress}
+                                    data-tooltip-place="top"
+                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                  </span>
+                                )}
+                              </Link>
+                              <OfflineIndicator key={`offline-indicator-${index}`}
+                              address={thread.subplebbitAddress}
+                              tooltipPlace="top"
+                              className="offline-mobile-sub-reply"  />
+                            </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 to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} 
+                                  onClick={(e) => {
+                                    if (e.button === 2) return;
+                                    e.preventDefault();
+                                    setIsReplyOpen(true); 
+                                    setSelectedShortCid(reply.shortCid); 
+                                    setSelectedParentCid(reply.cid);
+                                    setSelectedAddress(thread.subplebbitAddress);
+                                  }} title="Reply to this post">{reply.shortCid}
+                                </Link>
+                              ) : (
+                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> 
+                              )}
+                            </span>
+                          </div>
+                          {reply.link ? (
+                            <div key={`mob-f-${index}`} className="file-mobile">
+                                {replyMediaInfo?.url ? (
+                                  replyMediaInfo.type === "webpage" ? (
+                                    <div key={`enlarge-mob-reply-${index}`} className="img-container">
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        {reply.thumbnailUrl ? (
+                                          <img key={`mob-img-${index}`} 
+                                          src={replyMediaInfo.thumbnail} alt="thumbnail" 
+                                          onClick={handleImageClick}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : null}
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                    </div>
+                                  ) : replyMediaInfo.type === "image" ? (
+                                    <div key={`enlarge-mob-reply-${index}`} className="img-container">
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <img key={`mob-img-${index}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        onClick={handleImageClick}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${index}`} 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-${index}`} 
+                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                          style={{ pointerEvents: "none" }}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${index}`} 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-${index}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : null
+                                ) : null}
+                            </div>
+                          ) : null}
+                          {reply.content ? (
+                            reply.content?.length > 500 ?
+                            <Fragment key={`fragment15-${index}`}>
+                              <blockquote key={`mob-pm-${index}`} className="post-message">
+                                <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                  {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                </Link>
+                                <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
+                                <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
+                                <br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
+                                Comment too long.&nbsp;
+                                  <Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                &nbsp;to view. </span>
+                              </blockquote>
+                            </Fragment>
+                          : <blockquote key={`mob-pm-${index}`} className="post-message">
+                              <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                              </Link>
+                              <Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
+                            </blockquote>)
+                          : null}
+                            {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'}}>
+                                <Link key={`ql-${index}`} to={() => {}}
+                                onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
+                                  c/{reply.shortCid}</Link>
+                                  &nbsp;
+                                </div>
+                              ))}
+                              </div>
+                            ) : null}
+                        </div>
+                      </div>
+                    )})}
+                  </div>
+                </Fragment>
+                  );
+                }}
+                endReached={tryLoadMore}
+                useWindowScroll={true}
+                components={{ Footer: hasMore ? () => <PostLoader /> : null }}
+              />
+            )}
+          </div>
+        </BoardForm>
+        <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`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+              ]&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={() => handleClickTitle(subplebbit.title, subplebbit.address)}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+              <span className="nav">
+                [
+                <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    )
+                }>Create Board</button>
+                ]
+                [
+                <Link to={`/p/all/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                ]
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id="version">
+            plebchan v{version}. GPL-2.0
+          </div>
+          <div className="footer-links"
+            style={{
+              textAlign: "center",
+              fontSize: "x-small",
+              fontFamily: "arial",
+              marginTop: "5px",
+              marginBottom: "15px",
+            }}>
+            <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://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>
+    </>
+  );
+}
+
+export default All;
\ No newline at end of file
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
new file mode 100644
index 00000000..22cff527
--- /dev/null
+++ b/src/components/views/AllCatalog.jsx
@@ -0,0 +1,385 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
+import InfiniteScroll from 'react-infinite-scroller';
+import { Link, useNavigate } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
+import { useAccount, useFeed, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { debounce } from 'lodash';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import { Container, NavBar, Header, Break} from '../styled/Board.styled';
+import { Threads } from '../styled/Catalog.styled';
+import { TopBar, Footer } from '../styled/Thread.styled';
+import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
+import SettingsModal from '../SettingsModal';
+import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import handleStyleChange from '../../utils/handleStyleChange';
+import useError from '../../hooks/useError';
+import useFeedStateString from '../../hooks/useFeedStateString';
+import packageJson from '../../../package.json'
+const {version} = packageJson
+
+
+const AllCatalog = () => {
+  const {
+    defaultSubplebbits,
+    isSettingsOpen, setIsSettingsOpen,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    setSelectedThread,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const account = useAccount();
+
+  const navigate = useNavigate();
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'new'});
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'new'});
+  const [setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+
+  const stateString = useFeedStateString(subplebbits);
+
+  const [errorMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      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))}
+  };
+
+    // desktop navbar board select functionality
+    const handleClickTitle = (title, address) => {
+      setSelectedTitle(title);
+      setSelectedAddress(address);
+      setSelectedFeed(feed.filter(feed => feed.title === title));
+    };
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+
+  return (
+    <>
+      <Helmet>
+      <title>p/All - Catalog - plebchan</title>
+      </Helmet>
+      <Container>
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+          <span className="boardList">
+            [
+              <Link to={`/p/all`}>All</Link>
+                 / 
+              <Link to={`/p/subscriptions`}>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>
+            <span className="nav">
+            [
+              <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                () => alert(
+                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                  )
+              }>Create Board</button>
+              ]
+              [
+              <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              ]
+              [
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+              )}>Home</Link>
+              ]
+            </span>
+            <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
+              <div className="board-select">
+                <strong>Board</strong>
+                &nbsp;
+                <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
+                  <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> 
+                <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    )
+                  }>Create Board</button>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>Home</Link>
+              </div>
+            </div>
+            <div id="separator-mobile">&nbsp;</div>
+            <div id="separator-mobile">&nbsp;</div>
+          </>
+        </NavBar>
+        <Header selectedStyle={selectedStyle}>
+          <>
+            <div className="banner">
+              <ImageBanner />
+            </div>
+            <div className="board-title">p/All</div>
+            <div className="board-address">Default boards, currently curated by devs.</div>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <TopBar selectedStyle={selectedStyle}>
+          <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>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <div className="return-button" id="return-button-desktop">
+            [
+            <Link to={`/p/all`}>Return</Link>
+            ]
+          </div>
+          <div id="return-button-mobile">
+            <span className="btn-wrap-catalog btn-wrap">
+              <Link to={`/p/all`}>Return</Link>
+            </span>
+          </div>
+          {feed.length > 0 ? (
+            null
+          ) : (
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
+            </div>
+          )}
+          <hr />
+        </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
+        <Threads selectedStyle={selectedStyle}>
+          { feed.length < 1 ? (
+            null
+          ) : (
+            <InfiniteScroll
+              pageStart={0}
+              loadMore={tryLoadMore}
+              hasMore={hasMore}
+            >
+              {feed.map((thread, index) => {
+                const commentMediaInfo = getCommentMediaInfo(thread);
+                const fallbackImgUrl = "assets/filedeleted-res.gif";
+                return (
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                  onClick={() => setSelectedThread(thread.cid)}>
+                    <div key={`thread-${index}`} className="thread">
+                        {commentMediaInfo?.url ? (
+                          <Fragment key="f-catalog">
+                            {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} 
+                              style={{ pointerEvents: "none" }}
+                              onError={(e) => e.target.src = fallbackImgUrl} /> 
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <audio className="card" controls 
+                              key={`fti-${index}`} 
+                              src={commentMediaInfo.url} 
+                              alt={commentMediaInfo.type} 
+                              style={{ pointerEvents: "none" }}
+                              onError={(e) => e.target.src = fallbackImgUrl} />
+                            ) : null}
+                          </Fragment>
+                        ) : null}
+                      <div key={`ti-${index}`} className="thread-icons" >
+                      {(commentMediaInfo && (
+                        commentMediaInfo.type === 'image' || 
+                        commentMediaInfo.type === 'video' || 
+                        (commentMediaInfo.type === 'webpage' && 
+                        commentMediaInfo.thumbnail))) ? (                          
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" /> */
+                          <OfflineIndicator 
+                          address={thread.subplebbitAddress} 
+                          className="thread-icon offline-icon"
+                          tooltipPlace="top" />
+                        ) : (
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky" /> */
+                          <OfflineIndicator 
+                          address={thread.subplebbitAddress} 
+                          className="thread-icon offline-icon-no-link"
+                          tooltipPlace="top" />
+                        ) }
+                      </div>
+                      <div key={`meta-${index}`} className="meta" title="(R)eplies / (I)mage Replies" >
+                        R:
+                        <b key={`b-${index}`}>{thread.replyCount}</b>
+                      </div>
+                      <div key={`t-${index}`} className="teaser">
+                          <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
+                          {thread.content ? `: ${thread.content}` : null}
+                      </div>
+                    </div>
+                  </Link>
+                )})}
+            </InfiniteScroll>
+          )}
+        </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`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>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 className="nav">
+              [
+              <button style={{all: 'unset', cursor: 'pointer'}} onClick={
+                () => alert(
+                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                  )
+              }>Create Board</button>
+              ]
+                [
+                <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                ]
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id="version">
+            plebchan v{version}. GPL-2.0
+          </div>
+          <div className="footer-links"
+            style={{
+              textAlign: "center",
+              fontSize: "x-small",
+              fontFamily: "arial",
+              marginTop: "5px",
+              marginBottom: "15px",
+            }}>
+            <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://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>
+    </>
+  );
+}
+
+export default AllCatalog;
\ No newline at end of file
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 382db702..7ec4b02c 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -339,6 +339,9 @@ const Board = () => {
     if (selected === 'subscriptions') {
       navigate(`/p/subscriptions`);
       return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
     }
 
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
@@ -379,6 +382,8 @@ const Board = () => {
           <>
             <span className="boardList">
               [
+                <Link to={`/p/all`}>All</Link>
+                 / 
                 <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
               {defaultSubplebbits.map((subplebbit, index) => (
@@ -412,6 +417,7 @@ const Board = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <option value="all">All</option>
                   <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
@@ -530,7 +536,7 @@ const Board = () => {
             </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>{stateString}</span>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="catalog-button-mobile">
@@ -1213,7 +1219,9 @@ const Board = () => {
             <>
             <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/p/all`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 248f9ee8..84657a19 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -253,6 +253,9 @@ const Catalog = () => {
     if (selected === 'subscriptions') {
       navigate(`/p/subscriptions`);
       return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
     }
 
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
@@ -288,6 +291,8 @@ const Catalog = () => {
           <>
           <span className="boardList">
             [
+              <Link to={`/p/all`}>All</Link>
+                 / 
               <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -324,6 +329,7 @@ const Catalog = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <option value="all">All</option>
                   <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
@@ -445,7 +451,7 @@ const Catalog = () => {
           </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>{stateString}</span>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="return-button-mobile">
@@ -471,13 +477,13 @@ const Catalog = () => {
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 return (
                   <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
-                  onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
-                    <div key={`thread-${index}`} className="thread">
+                      onClick={() => setSelectedThread(thread.cid)}>
+                  <div key={`thread-${index}`} className="thread">
                         {commentMediaInfo?.url ? (
                           <Fragment key="f-catalog">
                             {commentMediaInfo?.type === "webpage" ? (
                               thread.thumbnailUrl ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
@@ -486,21 +492,21 @@ const Catalog = () => {
                               ) : null
                             ) : null}
                             {commentMediaInfo?.type === "image" ? (
-                              <img key={`img-${index}`}
+                              <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 key={`fti-${index}`} 
+                              <video className="card" key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
                               style={{ pointerEvents: "none" }}
                               onError={(e) => e.target.src = fallbackImgUrl} /> 
                             ) : null}
                             {commentMediaInfo?.type === "audio" ? (
-                              <audio controls 
+                              <audio className="card" controls 
                               key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
@@ -556,7 +562,9 @@ const Catalog = () => {
             <>
             <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/p/all`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index df154d16..f09a9355 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -107,11 +107,11 @@ const Home = () => {
                       to={`/p/${subscription}`}>
                         <br id="mobile-br" />
                         {subscription}&nbsp;
-                        <OfflineIndicator 
+                      </Link>
+                      <OfflineIndicator 
                         address={subscription} 
                         className="disconnected"
                         tooltipPlace="top" />
-                      </Link>
                       <br />
                     </>
                   ))}
@@ -129,13 +129,19 @@ const Home = () => {
                     <div className="board-title">
                       {subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>}
                     </div>
-                    <Link to={`/p/${subplebbit.address}`} onClick={() => {
-                      setSelectedTitle(subplebbit.title);
-                      setSelectedAddress(subplebbit.address);
-                      window.scrollTo(0, 0);
-                    }} >
-                      <BoardAvatar address={subplebbit.address} />
-                    </Link>
+                    <div className="board-avatar-container">
+                      <Link to={`/p/${subplebbit.address}`} onClick={() => {
+                        setSelectedTitle(subplebbit.title);
+                        setSelectedAddress(subplebbit.address);
+                        window.scrollTo(0, 0);
+                      }} >
+                        <BoardAvatar address={subplebbit.address} />
+                      </Link>
+                      <OfflineIndicator 
+                      address={subplebbit.address} 
+                      className="offline-indicator"
+                      tooltipPlace="top" />
+                    </div>
                     <div className="board-text">
                       <b>{subplebbit.address}</b>
                     </div>
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 1bf32654..c407382c 100644
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -69,6 +69,15 @@ const Pending = () => {
   // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
     setSelectedTitle(selectedTitle);
     setSelectedAddress(selected);
@@ -98,6 +107,8 @@ const Pending = () => {
           <>
           <span className="boardList">
             [
+              <Link to={`/p/all`}>All</Link>
+                 / 
               <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -127,6 +138,8 @@ const Pending = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <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>
@@ -195,7 +208,7 @@ const Pending = () => {
             <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             ]
           </span>
-            <span className="reply-stat">{stateString}</span>
+            <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 787afe75..375b2d8a 100644
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -165,6 +165,15 @@ const Subscriptions = () => {
   // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
     const selectedTitle = defaultSubplebbits?.find((subplebbit) => subplebbit.address === selected).title;
     setSelectedTitle(selectedTitle);
     setSelectedAddress(selected);
@@ -190,6 +199,8 @@ const Subscriptions = () => {
         <>
             <span className="boardList">
               [
+                <Link to={`/p/all`}>All</Link>
+                 / 
                 <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -223,7 +234,8 @@ const Subscriptions = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value="subscriptions" onChange={handleSelectChange}>
-                  <option value="">Subscriptions</option>
+                  <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>
@@ -287,7 +299,7 @@ const Subscriptions = () => {
             null
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>{stateString}</span>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="catalog-button-mobile">
@@ -300,7 +312,6 @@ const Subscriptions = () => {
         <BoardForm selectedStyle={selectedStyle}>
           <div className="board">
             { feed.length < 1 ? (
-              // <PostLoader />
               null
             ) : (
               <Virtuoso
@@ -417,6 +428,7 @@ const Subscriptions = () => {
                                 setIsReplyOpen(true); 
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
+                                setSelectedAddress(thread.subplebbitAddress);
                                 }} title="Reply to this post">{thread.shortCid}
                               </Link>
                               &nbsp;p/
@@ -427,7 +439,7 @@ const Subscriptions = () => {
                                   data-tooltip-content={thread.subplebbitAddress}
                                   data-tooltip-place="top"
                                   >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
-                                  )}
+                                )}
                               </Link>
                               <OfflineIndicator key={`oi-${index}`}
                               address={thread.subplebbitAddress} 
@@ -545,6 +557,7 @@ const Subscriptions = () => {
                                     setIsReplyOpen(true); 
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);
+                                    setSelectedAddress(thread.subplebbitAddress);
                                   }} title="Reply to this post">{reply.shortCid}</Link>
                                 ) : (
                                   <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
@@ -552,28 +565,20 @@ const Subscriptions = () => {
                                 &nbsp;p/
                                 <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
                                 {thread.subplebbitAddress.includes(".eth") ? 
+                                (thread.subplebbitAddress) : 
                                 (
-                                  <>
-                                    {thread.subplebbitAddress}
-                                    <OfflineIndicator key={`offline-reply-${index}`} 
-                                    address={thread.subplebbitAddress}
-                                    tooltipPlace="top"
-                                    className="offline-reply" />
-                                  </>
-                                ) : (
-                                  <>
-                                    <span key={`short-add${index}`}
+                                  <span key={`short-add${index}`}
                                     data-tooltip-id="tooltip"
                                     data-tooltip-content={thread.subplebbitAddress}
                                     data-tooltip-place="top"
-                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
-                                    <OfflineIndicator key={`offline-reply-${index}`}
-                                    address={thread.subplebbitAddress}
-                                    tooltipPlace="top"
-                                    className="offline-reply" />
-                                  </>
-                                  )}
+                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                  </span>
+                                )}
                               </Link>
+                              <OfflineIndicator key={`offline-reply-${index}`} 
+                              address={thread.subplebbitAddress}
+                              tooltipPlace="top"
+                              className="offline-reply" />
                               </span>&nbsp;
                               <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
                               <div id="backlink-id" className="backlink">
@@ -728,28 +733,20 @@ const Subscriptions = () => {
                             p/
                             <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
                               {thread.subplebbitAddress.includes(".eth") ? 
+                              (thread.subplebbitAddress) : 
                               (
-                                <>
-                                  {thread.subplebbitAddress}
-                                  <OfflineIndicator key={`offline-indicator-${index}`}
-                                    address={thread.subplebbitAddress}
-                                    tooltipPlace="top"
-                                    className="offline-mobile-sub" />
-                                </>
-                                ) : (
-                                <>
-                                  <span key={`short-add${index}`}
+                                <span key={`short-add${index}`}
                                   data-tooltip-id="tooltip"
                                   data-tooltip-content={thread.subplebbitAddress}
                                   data-tooltip-place="top"
-                                  >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
-                                  <OfflineIndicator key={`offline-indicator-${index}`}
-                                   address={thread.subplebbitAddress}
-                                   tooltipPlace="top"
-                                   className="offline-mobile-sub"  />
-                                </>
-                                )}
+                                  >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                </span>
+                              )}
                             </Link>
+                            <OfflineIndicator key={`offline-indicator-${index}`}
+                            address={thread.subplebbitAddress}
+                            tooltipPlace="top"
+                            className="offline-mobile-sub"  />
                           </span>
                           <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
                             {getDate(thread.timestamp)}
@@ -762,6 +759,7 @@ const Subscriptions = () => {
                                 setIsReplyOpen(true); 
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
+                                setSelectedAddress(thread.subplebbitAddress);
                               }} title="Reply to this post">{thread.shortCid}
                             </Link>
                           </span>
@@ -892,30 +890,22 @@ const Subscriptions = () => {
                             </span>
                             <span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
                             &nbsp;p/
-                            <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
+                              <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
                                 {thread.subplebbitAddress.includes(".eth") ? 
+                                (thread.subplebbitAddress) : 
                                 (
-                                  <>
-                                  {thread.subplebbitAddress}
-                                  <OfflineIndicator key={`offline-indicator-${index}`}
-                                  address={thread.subplebbitAddress}
-                                  tooltipPlace="top"
-                                  className="offline-mobile-sub-reply" />
-                                  </>
-                                  ) : (
-                                  <>
-                                    <span key={`short-add${index}`}
+                                  <span key={`short-add${index}`}
                                     data-tooltip-id="tooltip"
                                     data-tooltip-content={thread.subplebbitAddress}
                                     data-tooltip-place="top"
-                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
-                                    <OfflineIndicator key={`offline-indicator-${index}`}
-                                    address={thread.subplebbitAddress}
-                                    tooltipPlace="top"
-                                    className="offline-mobile-sub-reply"  />
-                                  </>
-                                  )}
+                                    >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
+                                  </span>
+                                )}
                               </Link>
+                              <OfflineIndicator key={`offline-indicator-${index}`}
+                              address={thread.subplebbitAddress}
+                              tooltipPlace="top"
+                              className="offline-mobile-sub-reply"  />
                             </span>
                             <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
                             {getDate(reply.timestamp)}&nbsp;
@@ -928,6 +918,7 @@ const Subscriptions = () => {
                                     setIsReplyOpen(true); 
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);
+                                    setSelectedAddress(thread.subplebbitAddress);
                                   }} title="Reply to this post">{reply.shortCid}
                                 </Link>
                               ) : (
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 80e1d2b2..0af8df1a 100644
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -3,19 +3,19 @@ import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
-import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break} from '../styled/Board.styled';
 import { Threads } from '../styled/Catalog.styled';
 import { TopBar, Footer } from '../styled/Thread.styled';
-import CatalogLoader from '../CatalogLoader';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
+import useFeedStateString from '../../hooks/useFeedStateString';
 import packageJson from '../../../package.json'
 const {version} = packageJson
 
@@ -36,7 +36,10 @@ const SubscriptionsCatalog = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
-  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+  const [setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
+
+  const stateString = useFeedStateString(subplebbits);
 
   const [errorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
@@ -73,6 +76,10 @@ const SubscriptionsCatalog = () => {
     const selected = event.target.value;
 
     if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
       return;
     }
 
@@ -97,6 +104,8 @@ const SubscriptionsCatalog = () => {
           <>
           <span className="boardList">
             [
+              <Link to={`/p/all`}>All</Link>
+               / 
               <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -121,7 +130,7 @@ const SubscriptionsCatalog = () => {
               }>Create Board</button>
               ]
               [
-              <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
               ]
               [
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -132,7 +141,8 @@ const SubscriptionsCatalog = () => {
               <div className="board-select">
                 <strong>Board</strong>
                 &nbsp;
-                <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                <select id="board-select-mobile" value="subscriptions" onChange={handleSelectChange}>
+                  <option value="all">All</option>
                   <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
@@ -146,7 +156,7 @@ const SubscriptionsCatalog = () => {
                   }>Create Board</button>
               </div>
               <div className="page-jump">
-                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 &nbsp;
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                   )}>Home</Link>
@@ -198,12 +208,19 @@ const SubscriptionsCatalog = () => {
               <Link to={`/p/subscriptions`}>Return</Link>
             </span>
           </div>
+          {feed.length > 0 ? (
+            null
+          ) : (
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
+            </div>
+          )}
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {selectedFeed.length < 1 ? (
-            <CatalogLoader />
+          { feed.length < 1 ? (
+            null
           ) : (
             <InfiniteScroll
               pageStart={0}
@@ -214,14 +231,14 @@ const SubscriptionsCatalog = () => {
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 return (
-                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
-                  onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
+                  onClick={() => setSelectedThread(thread.cid)}>
                     <div key={`thread-${index}`} className="thread">
                         {commentMediaInfo?.url ? (
                           <Fragment key="f-catalog">
                             {commentMediaInfo?.type === "webpage" ? (
                               thread.thumbnailUrl ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
@@ -230,21 +247,21 @@ const SubscriptionsCatalog = () => {
                               ) : null
                             ) : null}
                             {commentMediaInfo?.type === "image" ? (
-                              <img key={`img-${index}`}
+                              <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 key={`fti-${index}`} 
+                              <video className="card" key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
                               style={{ pointerEvents: "none" }}
                               onError={(e) => e.target.src = fallbackImgUrl} /> 
                             ) : null}
                             {commentMediaInfo?.type === "audio" ? (
-                              <audio controls 
+                              <audio className="card" controls 
                               key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
@@ -254,14 +271,18 @@ const SubscriptionsCatalog = () => {
                           </Fragment>
                         ) : null}
                       <div key={`ti-${index}`} className="thread-icons" >
-                        {thread.link ? (
-                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span> */
+                      {(commentMediaInfo && (
+                        commentMediaInfo.type === 'image' || 
+                        commentMediaInfo.type === 'video' || 
+                        (commentMediaInfo.type === 'webpage' && 
+                        commentMediaInfo.thumbnail))) ? (                          
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" /> */
                           <OfflineIndicator 
                           address={thread.subplebbitAddress} 
                           className="thread-icon offline-icon"
                           tooltipPlace="top" />
                         ) : (
-                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky"></span> */
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky" /> */
                           <OfflineIndicator 
                           address={thread.subplebbitAddress} 
                           className="thread-icon offline-icon-no-link"
@@ -318,10 +339,6 @@ const SubscriptionsCatalog = () => {
                 {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>
-                <OfflineIndicator 
-                address={subplebbit.address} 
-                className="offline-nav"
-                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
                 </span>
               ))}
@@ -336,7 +353,7 @@ const SubscriptionsCatalog = () => {
               }>Create Board</button>
               ]
                 [
-                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index b66f766b..79533f19 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
-import { useAccount, useAccountComments, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useAccountComments, useComment, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -38,7 +38,7 @@ const Thread = () => {
     setResolveCaptchaPromise,
     setPendingComment,
     setPendingCommentIndex,
-    selectedAddress, setSelectedAddress,
+    setSelectedAddress,
     setSelectedParentCid,
     setSelectedShortCid,
     selectedStyle,
@@ -65,12 +65,26 @@ const Thread = () => {
   const comment = useComment({commentCid: selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
   const handleClickForm = useClickForm();
+  const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
+  const selectedAddress = subplebbit.address;
 
   const stateString = useStateString(comment);
 
   const commentMediaInfo = getCommentMediaInfo(comment);
   const fallbackImgUrl = "assets/filedeleted-res.gif";
 
+  
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+
+  useEffect(() => {
+    if ( comment.state === "failed" && selectedAddress === undefined) {
+      navigate('/404');
+    }
+  }, [selectedAddress, navigate, comment.state]);
+
 
   const errorString = useMemo(() => {
     if (comment?.state === 'failed') {
@@ -285,6 +299,9 @@ const Thread = () => {
     if (selected === 'subscriptions') {
       navigate(`/p/subscriptions`);
       return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
     }
 
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
@@ -318,6 +335,8 @@ const Thread = () => {
           <>
           <span className="boardList">
             [
+              <Link to={`/p/all`}>All</Link>
+                 / 
               <Link to={`/p/subscriptions`}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -354,6 +373,7 @@ const Thread = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <option value="all">All</option>
                   <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
@@ -493,10 +513,10 @@ const Thread = () => {
                 <span className="reply-stat">No replies yet</span>
               )
             ) : (
-              <span className="reply-stat">{stateString}</span>
+              <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
             )
           ) : (
-            <span className="reply-stat">{stateString}</span>
+            <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
           )}
           <hr />
         </TopBar>
@@ -1066,10 +1086,10 @@ const Thread = () => {
                           <span className="reply-stat">No replies yet</span>
                         )
                       ) : (
-                        <span className="reply-stat">{stateString}</span>
+                        <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
                       )
                     ) : (
-                      <span className="reply-stat">{stateString}</span>
+                      <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
                     )}
                     <hr />
                   </div>
@@ -1171,7 +1191,9 @@ const Thread = () => {
             <>
             <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/p/all`}>All</Link>
+                 / 
+                <Link to={`/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (