diff --git a/src/app.tsx b/src/app.tsx
index 7183a6ba..8b5841d1 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,33 +1,39 @@
 import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { isHomeView } from './lib/utils/view-utils';
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import styles from './app.module.css';
+import { Subplebbit as SubplebbitType, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits';
 import useTheme from './hooks/use-theme';
+import styles from './app.module.css';
 import Home from './views/home';
 import Settings from './views/settings';
 import Subplebbit from './views/subplebbit';
 import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
+import { DesktopBoardButtons } from './components/board-buttons';
+import { MobileBoardButtons } from './components/board-buttons';
 import BoardStats from './components/board-stats';
 import PostForm from './components/post-form';
-import { MobileBoardButtons } from './components/board-buttons';
-import { DesktopBoardButtons } from './components/board-buttons';
 
-const BoardLayout = () => {
+interface BoardLayoutProps {
+  subplebbits: (SubplebbitType | undefined)[];
+}
+
+const BoardLayout = ({ subplebbits }: BoardLayoutProps) => {
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+  const { address, createdAt, title } = subplebbit || {};
 
   return (
     <>
-      {subplebbitAddress && (
+      {address && (
         <>
-          <BoardNav address={subplebbitAddress} />
-          <BoardBanner title={subplebbit.title} address={subplebbitAddress} />
-          <MobileBoardButtons address={subplebbitAddress} />
-          <PostForm address={subplebbitAddress} />
-          <BoardStats address={subplebbitAddress} createdAt={subplebbit.createdAt} />
-          <DesktopBoardButtons address={subplebbitAddress} />
+          <BoardNav address={address} subplebbits={subplebbits} />
+          <BoardBanner title={title} address={address} />
+          <MobileBoardButtons address={address} />
+          <PostForm address={address} />
+          <BoardStats address={address} createdAt={createdAt} />
+          <DesktopBoardButtons address={address} />
         </>
       )}
       <Outlet />
@@ -40,6 +46,11 @@ const App = () => {
   const location = useLocation();
   const isInHomeView = isHomeView(location.pathname);
 
+  const subplebbitAddresses = useDefaultSubplebbitAddresses();
+  const { subplebbits } = useSubplebbits({ subplebbitAddresses });
+
+  console.log(subplebbits);
+
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
     document.body.classList.add(theme);
@@ -55,9 +66,9 @@ const App = () => {
   return (
     <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
       <Routes>
-        <Route path='/' element={<Home />} />
-        <Route element={<BoardLayout />}>
-          <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
+        <Route path='/' element={<Home subplebbits={subplebbits} />} />
+        <Route element={<BoardLayout subplebbits={subplebbits} />}>
+          <Route path='/p/:subplebbitAddress' element={<Subplebbit subplebbits={subplebbits} />} />
         </Route>
         <Route path='/settings' element={<Settings />} />
       </Routes>
diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx
index 309ceb7e..459e1bc1 100644
--- a/src/components/board-nav/board-nav.tsx
+++ b/src/components/board-nav/board-nav.tsx
@@ -1,11 +1,11 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
+import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import styles from './board-nav.module.css';
 
 interface BoardNavProps {
   address?: string | undefined;
-  subplebbits?: any;
+  subplebbits: (Subplebbit | undefined)[];
   currentSubplebbit?: string | undefined;
 }
 
@@ -16,15 +16,18 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
     <div className={styles.boardNavDesktop}>
       <span className={styles.boardList}>
         [
-        {subplebbits.map((subplebbit: any, index: number) => (
-          <span key={subplebbit.address}>
-            {index === 0 ? null : ' '}
-            <Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
-              {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
-            </Link>
-            {index !== subplebbits.length - 1 ? ' /' : null}
-          </span>
-        ))}
+        {subplebbits.map((subplebbit: any, index: number) => {
+          const { address, title } = subplebbit;
+          return (
+            <span key={address}>
+              {index === 0 ? null : ' '}
+              <Link to={`/p/${address}`} title={title || ''}>
+                {address.includes('.') ? address : title || address.slice(0, 10).concat('...')}
+              </Link>
+              {index !== subplebbits.length - 1 ? ' /' : null}
+            </span>
+          );
+        })}
         ]
       </span>
       <span className={styles.navTopRight}>
@@ -72,13 +75,11 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   );
 };
 
-const BoardNav = ({ address }: BoardNavProps) => {
-  const defaultSubplebbits = useDefaultSubplebbits();
-
+const BoardNav = ({ address, subplebbits }: BoardNavProps) => {
   return (
     <>
-      <BoardNavDesktop subplebbits={defaultSubplebbits} />
-      <BoardNavMobile subplebbits={defaultSubplebbits} currentSubplebbit={address} />
+      <BoardNavDesktop subplebbits={subplebbits} />
+      <BoardNavMobile subplebbits={subplebbits} currentSubplebbit={address} />
     </>
   );
 };
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
index 05885d65..091798ea 100644
--- a/src/components/markdown/markdown.tsx
+++ b/src/components/markdown/markdown.tsx
@@ -4,7 +4,6 @@ import ReactMarkdown from 'react-markdown';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
-import { visit } from 'unist-util-visit';
 
 interface MarkdownProps {
   content: string;
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index a518f3d0..c0362a5e 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -2,11 +2,11 @@
   clear: both;
 }
 
-.hrWrapper hr {
+.postDesktop .hrWrapper hr {
   margin: 0; /* margin bugs Virtuoso scrolling */
 }
 
-.hrWrapper {
+.postDesktop .hrWrapper {
   padding-top: 0.5em; /* instead of using margin, wrap with padding */
   padding-bottom: 0.5em;
 }
@@ -89,8 +89,24 @@
   padding: 1em 40px;
 }
 
+.postMobile hr {
+  padding-bottom: 30px;
+}
+
+.postMobile .thread {
+  border-top: none;
+  margin: 0;
+  clear: both;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
   }
+}
+
+@media (min-width: 641px) {
+  .postMobile {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index c33cd6c3..fc301ceb 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -7,7 +7,7 @@ import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
 import Markdown from '../markdown';
 
-const Post = ({ post }: Comment) => {
+const PostDesktop = ({ post }: Comment) => {
   const { t } = useTranslation();
   const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
@@ -15,64 +15,85 @@ const Post = ({ post }: Comment) => {
   const linkMediaInfo = getLinkMediaInfoMemoized(link);
 
   return (
-    <div className={styles.thread}>
-      <div className={styles.postContainer}>
-        <div className={styles.postDesktop}>
-          <div className={styles.hrWrapper}>
-            <hr />
-          </div>
-          {linkMediaInfo?.url && (
-            <div className={styles.link}>
-              {t('link')}:{' '}
-              <a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
-                {linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
-              </a>{' '}
-              ({linkMediaInfo?.type})
-            </div>
-          )}
-          <div className={styles.postInfo}>
-            {title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
-            <span className={styles.nameBlock}>
-              <span className={styles.name}>{displayName || 'Anonymous'} </span>
-              <span className={styles.userAddress}>(u/{shortAddress}) </span>
+    <div className={styles.postDesktop}>
+      <div className={styles.hrWrapper}>
+        <hr />
+      </div>
+      {linkMediaInfo?.url && (
+        <div className={styles.link}>
+          {t('link')}:{' '}
+          <a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
+            {linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
+          </a>{' '}
+          ({linkMediaInfo?.type})
+        </div>
+      )}
+      <div className={styles.postInfo}>
+        {title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
+        <span className={styles.nameBlock}>
+          <span className={styles.name}>{displayName || 'Anonymous'} </span>
+          <span className={styles.userAddress}>(u/{shortAddress}) </span>
+        </span>
+        <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
+        <span className={styles.postNum}>
+          <span className={styles.postNumLink}>
+            <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
+              c/
+            </Link>
+            <span className={styles.replyToPost} title={t('reply_to_post')}>
+              {shortCid}
             </span>
-            <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
-            <span className={styles.postNum}>
-              <span className={styles.postNumLink}>
-                <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
-                  c/
-                </Link>
-                <span className={styles.replyToPost} title={t('reply_to_post')}>
-                  {shortCid}
-                </span>
-              </span>
-              {pinned && (
-                <span className={styles.stickyIconWrapper}>
-                  <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
-                </span>
-              )}
-              {locked && (
-                <span className={styles.closedIconWrapper}>
-                  <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
-                </span>
-              )}
-              <span className={styles.replyButton}>
-                [<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
-              </span>
+          </span>
+          {pinned && (
+            <span className={styles.stickyIconWrapper}>
+              <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
             </span>
-            <span className={styles.postMenuBtn}>▶</span>
-          </div>
-          {content && (
-            <div className={styles.postMessage}>
-              <blockquote>
-                <Markdown content={content} />
-              </blockquote>
-            </div>
           )}
+          {locked && (
+            <span className={styles.closedIconWrapper}>
+              <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
+            </span>
+          )}
+          <span className={styles.replyButton}>
+            [<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
+          </span>
+        </span>
+        <span className={styles.postMenuBtn}>▶</span>
+      </div>
+      {content && (
+        <div className={styles.postMessage}>
+          <blockquote>
+            <Markdown content={content} />
+          </blockquote>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const PostMobile = ({ post }: Comment) => {
+  return (
+    <div className={styles.postMobile}>
+      <hr />
+      <div className={styles.thread}>
+        <div className={styles.postContainer}>
+          <div className={styles.postOp}></div>
+          <div className={styles.postLinkMobile}></div>
         </div>
       </div>
     </div>
   );
 };
 
+const Post = ({ post }: Comment) => {
+  return (
+    <div className={styles.thread}>
+      <div className={styles.postContainer}>
+        <PostDesktop post={post} />
+        <PostMobile post={post} />
+      </div>
+    </div>
+  );
+};
+
 export default Post;
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index d344385b..69b902b1 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -2,9 +2,13 @@ import { useRef } from 'react';
 import styles from './home.module.css';
 import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
+import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import packageJson from '../../../package.json';
 
+interface HomeProps {
+  subplebbits: (Subplebbit | undefined)[];
+}
+
 const isValidAddress = (address: string): boolean => {
   if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
     return false;
@@ -65,9 +69,8 @@ const InfoBox = () => {
   );
 };
 
-const Boards = () => {
+const Boards = ({ subplebbits }: HomeProps) => {
   const { t } = useTranslation();
-  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
 
   return (
     <div className={styles.box}>
@@ -79,11 +82,16 @@ const Boards = () => {
         <div className={styles.column}>
           <h3>Default SFW</h3>
           <div className={styles.list}>
-            {defaultSubplebbitAddresses.map((address) => (
-              <div className={styles.subplebbit} key={address}>
-                <Link to={`/p/${address}`}>{address}</Link>
-              </div>
-            ))}
+            {subplebbits
+              .filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined)
+              .map((subplebbit) => {
+                const address = subplebbit.address;
+                return (
+                  <div className={styles.subplebbit} key={address}>
+                    <Link to={`/p/${address}`}>{address}</Link>
+                  </div>
+                );
+              })}
           </div>
         </div>
         <div className={styles.column}>
@@ -193,7 +201,7 @@ const Footer = () => {
   );
 };
 
-const Home = () => {
+const Home = ({ subplebbits }: HomeProps) => {
   return (
     <div className={styles.content}>
       <Link to='/'>
@@ -203,7 +211,7 @@ const Home = () => {
       </Link>
       <SearchBar />
       <InfoBox />
-      <Boards />
+      <Boards subplebbits={subplebbits} />
       <PopularThreads />
       <Stats />
       <Footer />
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index d2bff18f..eb72b819 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './subplebbit.module.css';
@@ -9,12 +9,18 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const Subplebbit = () => {
+interface SubplebbitProps {
+  subplebbits: (SubplebbitType | undefined)[];
+}
+
+const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
   const { t } = useTranslation();
+
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {};
+  const { shortAddress, state, title } = subplebbit || {};
+
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');