From 6aa27c3e1eba3705c61a3804e8456bac21d658a0 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Fri, 21 Apr 2023 10:47:39 +0200
Subject: [PATCH] added helmet title to all views

---
 src/components/views/Board.jsx    | 1254 ++++++++++++++--------------
 src/components/views/Catalog.jsx  |  396 ++++-----
 src/components/views/Home.jsx     |  186 +++--
 src/components/views/NotFound.jsx |   50 +-
 src/components/views/Pending.jsx  |  588 +++++++-------
 src/components/views/Thread.jsx   | 1266 +++++++++++++++--------------
 6 files changed, 1891 insertions(+), 1849 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 78657676..4caaf7e5 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
@@ -226,697 +227,702 @@ const Board = () => {
 
 
   return (
-    <Container>
-      <ReplyModal 
-      selectedStyle={selectedStyle}
-      isOpen={isReplyOpen}
-      closeModal={() => setIsReplyOpen(false)} />
-      <SettingsModal
-      selectedStyle={selectedStyle}
-      isOpen={isSettingsOpen}
-      closeModal={() => setIsSettingsOpen(false)} />
-      <NavBar selectedStyle={selectedStyle}>
-        <>
-          {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList" key={`span-${subplebbit.address}`}>
+    <>
+      <Helmet>
+        <title>{((selectedTitle ? selectedTitle : selectedAddress) + " - plebchan")}</title>
+      </Helmet>
+      <Container>
+        <ReplyModal 
+        selectedStyle={selectedStyle}
+        isOpen={isReplyOpen}
+        closeModal={() => setIsReplyOpen(false)} />
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            {defaultSubplebbits.map(subplebbit => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                [
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                ]&nbsp;
+              </span>
+            ))}
+            <span className="nav">
               [
-              <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
-              >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-              ]&nbsp;
-            </span>
-          ))}
-          <span className="nav">
-            [
-            <Link to={`/p/${selectedAddress}/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={selectedAddress} onChange={handleSelectChange}>
-                {defaultSubplebbits.map(subplebbit => (
-                    <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                    >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                  ))}
-              </select>
-            </div>
-            <div className="page-jump">
               <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-              &nbsp;
+              ]
+              [
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                )}>Home</Link>
+              )}>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={selectedAddress} onChange={handleSelectChange}>
+                  {defaultSubplebbits.map(subplebbit => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                    ))}
+                </select>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>Home</Link>
+              </div>
             </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">{selectedTitle}</div>
-            <div className="board-address">p/{selectedAddress}</div>
-            </>
-        </>
-      </Header>
-      <Break selectedStyle={selectedStyle} />
-      <PostForm selectedStyle={selectedStyle}>
-      <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-        <div id="post-form-link-desktop">
+            <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">{selectedTitle}</div>
+              <div className="board-address">p/{selectedAddress}</div>
+              </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle}>
+        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+          <div id="post-form-link-desktop">
+              [
+                <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              ]
+            </div>
+            <div id="post-form-link-mobile">
+              <span className="btn-wrap">
+                <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              </span>
+            </div>
+          </PostFormLink>
+          <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+            <tbody>
+              <tr data-type="Name">
+                <td id="td-name">Name</td>
+                <td>
+                  <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                </td>
+              </tr>
+              <tr data-type="Subject">
+                <td>Subject</td>
+                <td>
+                  <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
+                </td>
+              </tr>
+              <tr data-type="Comment">
+                <td>Comment</td>
+                <td>
+                  <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+                </td>
+              </tr>
+              <tr data-type="File">
+                <td>Embed File</td>
+                <td>
+                  <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+                  <button id="t-help" type="button" onClick={
+                    () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
+                  } data-tip="Help">?</button>
+                </td>
+              </tr>
+            </tbody>
+          </PostFormTable>
+        </PostForm>
+        <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">
             [
-              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
           </div>
-          <div id="post-form-link-mobile">
+          <div id="stats" style={{float: "right", marginTop: "5px"}}>
+            {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
+          </div>
+          <div id="catalog-button-mobile">
             <span className="btn-wrap">
-              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             </span>
           </div>
-        </PostFormLink>
-        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
-          <tbody>
-            <tr data-type="Name">
-              <td id="td-name">Name</td>
-              <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
-              </td>
-            </tr>
-            <tr data-type="Subject">
-              <td>Subject</td>
-              <td>
-                <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
-                <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={handleSubmit} />
-              </td>
-            </tr>
-            <tr data-type="Comment">
-              <td>Comment</td>
-              <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
-              </td>
-            </tr>
-            <tr data-type="File">
-              <td>Embed File</td>
-              <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
-                <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
-                } data-tip="Help">?</button>
-              </td>
-            </tr>
-          </tbody>
-        </PostFormTable>
-      </PostForm>
-      <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/${selectedAddress}/catalog`}>Catalog</Link>
-          ]
-        </div>
-        <div id="stats" style={{float: "right", marginTop: "5px"}}>
-          {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
-        </div>
-        <div id="catalog-button-mobile">
-          <span className="btn-wrap">
-            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-          </span>
-        </div>
-      </TopBar>
-      <Tooltip id="tooltip" className="tooltip" />
-      <BoardForm selectedStyle={selectedStyle}>
-        <div className="board">
-          {feed.length < 1 ? (
-            <PostLoader />
-          ) : (
-            <InfiniteScroll
-              pageStart={0}
-              loadMore={tryLoadMore}
-              hasMore={hasMore}
-            >
-              {selectedFeed.map((thread) => {
-              const { replies: { pages: { topAll: { comments } = {} } = {} } = {} } = thread;
-              const { renderedComments, omittedCount } = renderComments(comments);
-              const commentMediaInfo = getCommentMediaInfo(thread);
-              const fallbackImgUrl = "/assets/filedeleted-res.gif";
-              return (
-              <Fragment key={`fr-${thread.cid}`}>
-                <div key={`t-${thread.cid}`} className="thread">
-                  <div key={`c-${thread.cid}`} className="op-container">
-                    <div key={`po-${thread.cid}`} className="post op op-desktop">
-                      <hr key={`hr-${thread.cid}`} />
-                      <div key={`pi-${thread.cid}`} className="post-info">
-                      {commentMediaInfo?.url ? (
-                        <div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}>
-                          <div key={`ft-${thread.cid}`} className="file-text">
-                            Link:&nbsp;
-                            <a key={`fa-${thread.cid}`} href={commentMediaInfo.url} target="_blank"
-                            rel="noopener noreferrer">{
-                            commentMediaInfo?.url.length > 30 ?
-                            commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                            commentMediaInfo?.url
-                            }</a>&nbsp;({commentMediaInfo?.type})
+        </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
+        <BoardForm selectedStyle={selectedStyle}>
+          <div className="board">
+            {feed.length < 1 ? (
+              <PostLoader />
+            ) : (
+              <InfiniteScroll
+                pageStart={0}
+                loadMore={tryLoadMore}
+                hasMore={hasMore}
+              >
+                {selectedFeed.map((thread) => {
+                const { replies: { pages: { topAll: { comments } = {} } = {} } = {} } = thread;
+                const { renderedComments, omittedCount } = renderComments(comments);
+                const commentMediaInfo = getCommentMediaInfo(thread);
+                const fallbackImgUrl = "/assets/filedeleted-res.gif";
+                return (
+                <Fragment key={`fr-${thread.cid}`}>
+                  <div key={`t-${thread.cid}`} className="thread">
+                    <div key={`c-${thread.cid}`} className="op-container">
+                      <div key={`po-${thread.cid}`} className="post op op-desktop">
+                        <hr key={`hr-${thread.cid}`} />
+                        <div key={`pi-${thread.cid}`} className="post-info">
+                        {commentMediaInfo?.url ? (
+                          <div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${thread.cid}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${thread.cid}`} 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" ? (
+                              <span key={`fta-${thread.cid}`} className="file-thumb">
+                                <img key={`fti-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <span key={`fta-${thread.cid}`} className="file-thumb">
+                                <img key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                              <span key={`fta-${thread.cid}`} className="file-thumb">
+                                <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${thread.cid}`} className="file-thumb">
+                                <audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
                           </div>
-                          {commentMediaInfo?.type === "webpage" ? (
-                            <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <img key={`fti-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
-                          ) : null}
-                          {commentMediaInfo?.type === "image" ? (
-                            <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <img key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
-                          ) : null}
-                          {commentMediaInfo?.type === "video" ? (
-                            <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
-                          ) : null}
-                          {commentMediaInfo?.type === "audio" ? (
-                            <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            </span>
-                          ) : null}
-                        </div>
-                      ) : null}
-                        <span key={`nb-${thread.cid}`} className="name-block">
-                          {thread.title ? (
-                            thread.title.length > 75 ?
-                            <Fragment key={`fragment2-${thread.cid}`}>
-                              <span key={`q-${thread.cid}`} 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-${thread.cid}`} className="title">
-                            {thread.title}
-                            </span>) 
-                          : null}&nbsp;
-                          {thread.author.displayName
-                          ? thread.author.displayName.length > 20
-                          ? <Fragment key={`fragment3-${thread.cid}`}>
-                              <span key={`n-${thread.cid}`} className="name"
-                              data-tooltip-id="tooltip"
-                              data-tooltip-content={thread.author.displayName}
-                              data-tooltip-place="top">
-                                {thread.author.displayName.slice(0, 20) + " (...)"}
-                              </span>
-                            </Fragment> 
+                        ) : null}
+                          <span key={`nb-${thread.cid}`} className="name-block">
+                            {thread.title ? (
+                              thread.title.length > 75 ?
+                              <Fragment key={`fragment2-${thread.cid}`}>
+                                <span key={`q-${thread.cid}`} 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-${thread.cid}`} className="title">
+                              {thread.title}
+                              </span>) 
+                            : null}&nbsp;
+                            {thread.author.displayName
+                            ? thread.author.displayName.length > 20
+                            ? <Fragment key={`fragment3-${thread.cid}`}>
+                                <span key={`n-${thread.cid}`} 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-${thread.cid}`} className="name">
+                                {thread.author.displayName}</span>
                             : <span key={`n-${thread.cid}`} className="name">
-                              {thread.author.displayName}</span>
-                          : <span key={`n-${thread.cid}`} className="name">
-                            Anonymous</span>}
-                          &nbsp;
-                          (u/
-                          <span key={`pa-${thread.cid}`} className="poster-address address-desktop"
-                          id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(thread.author.shortAddress)}
-                          >
-                            {thread.author.shortAddress}
-                          </span>)
-                          &nbsp;
-                          <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
-                          &nbsp;
-                          <span key={`pn-${thread.cid}`} className="post-number post-number-desktop">
-                            <Link to={() => {}} key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                            <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${thread.cid}`} 
-                            onClick={(e) => {
-                              if (e.button === 2) return;
-                              e.preventDefault();
-                              setIsReplyOpen(true); 
-                              setSelectedShortCid(thread.shortCid); 
-                              setSelectedParentCid(thread.cid);
-                              }} title="Reply to this post">{thread.shortCid}</Link>
+                              Anonymous</span>}
                             &nbsp;
-                            <span key={`rl1-${thread.cid}`}>&nbsp;
-                              [
-                              <Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
-                              ]
-                            </span>
-                          </span>&nbsp;
-                          <button key={`pmb-${thread.cid}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
-                          <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
-                            {thread.replies?.pages?.topAll.comments
-                              .sort((a, b) => a.timestamp - b.timestamp)
-                              .map((reply) => (
-                                <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
-                                <Link key={`ql-${reply.cid}`}
-                                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-${thread.cid}`}>
-                            <blockquote key={`bq-${thread.cid}`}>
-                            <Post content={thread.content.slice(0, 1000)} key={`post-${thread.cid}`} />
-                              <span key={`ttl-s-${thread.cid}`} className="ttl"> (...) 
-                              <br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
-                              Post too long.&nbsp;
-                                <Link key={`ttl-l-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                &nbsp;to view. </span>
-                            </blockquote>
-                          </Fragment>
-                        : <blockquote key={`bq-${thread.cid}`}>
-                            <Post content={thread.content} key={`post-${thread.cid}`} />
-                          </blockquote>)
-                        : null}
-                      </div>
-                    </div>
-                  </div>
-                  <span key={`summary-${thread.cid}`} className="summary">
-                    {omittedCount > 0 ? (
-                    <span key={`oc-${thread.cid}`} className="ttl">
-                      <span key={`oc1-${thread.cid}`}>
-                        {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
-                        <Link key={`oc2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
-                        &nbsp;to view.
-                      </span>
-                    </span>) : null}
-                  </span>
-                  {renderedComments?.map((reply) => {
-                    const replyMediaInfo = getCommentMediaInfo(reply);
-                    const fallbackImgUrl = "/assets/filedeleted-res.gif";
-                    const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
-                    return (
-                      <div key={`rc-${reply.cid}`} className="reply-container">
-                        <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
-                        <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
-                          <div key={`pi-${reply.cid}`} className="post-info">
-                            <span key={`nb-${reply.cid}`} className="nameblock">
-                              {reply.author.displayName
-                                ? reply.author.displayName.length > 12
-                                ? <Fragment key={`fragment6-${reply.cid}`}>
-                                    <span key={`mob-n-${reply.cid}`} className="name"
-                                    data-tooltip-id="tooltip"
-                                    data-tooltip-content={reply.author.displayName}
-                                    data-tooltip-place="top">
-                                      {reply.author.displayName.slice(0, 12) + " (...)"}
-                                    </span>
-                                  </Fragment>
-                                  : <span key={`mob-n-${reply.cid}`} className="name">
-                                    {reply.author.displayName}</span>
-                                : <span key={`mob-n-${reply.cid}`} className="name">
-                                  Anonymous</span>}
-                              &nbsp;
-                              <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
-                                id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(reply.author.shortAddress)}
-                              >
-                                (u/
-                                  <span key={`mob-ha-${reply.cid}`}>
-                                    {reply.author.shortAddress}
-                                  </span>
-                                )
-                              </span>
-                            </span>
+                            (u/
+                            <span key={`pa-${thread.cid}`} className="poster-address address-desktop"
+                            id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(thread.author.shortAddress)}
+                            >
+                              {thread.author.shortAddress}
+                            </span>)
                             &nbsp;
-                            <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
+                            <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
                             &nbsp;
-                            <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
-                              <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                              <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${reply.cid}`} 
+                            <span key={`pn-${thread.cid}`} className="post-number post-number-desktop">
+                              <Link to={() => {}} key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                              <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${thread.cid}`} 
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
                                 setIsReplyOpen(true); 
-                                setSelectedShortCid(reply.shortCid); 
-                                setSelectedParentCid(reply.cid);
-                              }} title="Reply to this post">{reply.shortCid}</Link>
+                                setSelectedShortCid(thread.shortCid); 
+                                setSelectedParentCid(thread.cid);
+                                }} title="Reply to this post">{thread.shortCid}</Link>
+                              &nbsp;
+                              <span key={`rl1-${thread.cid}`}>&nbsp;
+                                [
+                                <Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
+                                ]
+                              </span>
                             </span>&nbsp;
-                            <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
-                            <div id="backlink-id" className="backlink">
-                              {reply.replies?.pages?.topAll.comments
+                            <button key={`pmb-${thread.cid}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
+                            <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
+                              {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply) => (
                                   <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
-                                  <Link to={() => {}} key={`ql-${reply.cid}`}
-                                    className="quote-link" 
-                                    onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                  <Link key={`ql-${reply.cid}`}
+                                  to={() => {}} className="quote-link" 
+                                  onClick={(event) => handleQuoteClick(reply, null, event)}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
                                 ))
                               }
                             </div>
-                          </div>
-                          {replyMediaInfo?.url ? (
-                            <div key={`f-${reply.cid}`} className="file" 
-                            style={{marginBottom: "5px"}}>
-                              <div key={`ft-${reply.cid}`} className="reply-file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${reply.cid}`} 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" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <img key={`fti-${reply.cid}`}
-                                  src={reply.thumbnailUrl} 
-                                  alt="thumbnail" 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "image" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <img key={`fti-${reply.cid}`}
-                                  src={replyMediaInfo.url} 
-                                  alt={replyMediaInfo.type} 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "video" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <video controls
-                                  key={`fti-${reply.cid}`} 
-                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "audio" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <audio controls 
-                                  key={`fti-${reply.cid}`}
-                                  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-${reply.cid}`}>
-                              <blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message">
-                                <Link to={() => {}} key={`r-pm-${reply.cid}`} 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-${reply.cid}`} />
-                                <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
-                                <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
-                                Comment too long.&nbsp;
-                                  <Link key={`ttl-l-${reply.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                &nbsp;to view. </span>
+                          </span>
+                          {thread.content ? (
+                            thread.content.length > 1000 ?
+                            <Fragment key={`fragment5-${thread.cid}`}>
+                              <blockquote key={`bq-${thread.cid}`}>
+                              <Post content={thread.content.slice(0, 1000)} key={`post-${thread.cid}`} />
+                                <span key={`ttl-s-${thread.cid}`} className="ttl"> (...) 
+                                <br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
+                                Post too long.&nbsp;
+                                  <Link key={`ttl-l-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                  &nbsp;to view. </span>
                               </blockquote>
                             </Fragment>
-                          : <blockquote key={`pm-${reply.cid}`} className="post-message">
-                              <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
-                                  {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                              </Link>
-                              <Post content={reply.content} key={`post-${reply.cid}`} comment={reply} />
+                          : <blockquote key={`bq-${thread.cid}`}>
+                              <Post content={thread.content} key={`post-${thread.cid}`} />
                             </blockquote>)
                           : null}
                         </div>
                       </div>
-                      )
-                  })}
-                </div>
-                <div key={`mob-t-${thread.cid}`} className="thread-mobile">
-                  <hr key={`mob-hr-${thread.cid}`} />
-                  <div key={`mob-c-${thread.cid}`} className="op-container">
-                    <div key={`mob-po-${thread.cid}`} className="post op op-mobile">
-                      <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
-                        <button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={() => {}} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                        <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
-                          {thread.author.displayName
-                          ? thread.author.displayName.length > 15
-                          ? <Fragment key={`fragment9-${thread.cid}`}>
-                              <span key={`mob-n-${thread.cid}`} className="name-mobile"
-                              data-tooltip-id="tooltip"
-                              data-tooltip-content={thread.author.displayName}
-                              data-tooltip-place="top">
-                                {thread.author.displayName.slice(0, 15) + " (...)"}
-                              </span>
-                            </Fragment> 
-                            : <span key={`mob-n-${thread.cid}`} className="name-mobile">
-                              {thread.author.displayName}</span>
-                          : <span key={`mob-n-${thread.cid}`} className="name-mobile">
-                            Anonymous</span>}
-                          &nbsp;
-                          <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile address-mobile"
-                            id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(thread.author.shortAddress)}
-                          >
-                            (u/
-                            <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
-                              {thread.author.shortAddress}
-                            </span>
-                            )&nbsp;
-                          </span>
-                          <br key={`mob-br1-${thread.cid}`} />
-                          {thread.title ? (
-                            thread.title.length > 30 ?
-                            <Fragment key={`fragment11-${thread.cid}`}>
-                              <span key={`mob-t-${thread.cid}`} 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-${thread.cid}`} className="subject-mobile">
-                            {thread.title}
-                            </span>) 
-                          : null}
-                        </span>
-                        <span key={`mob-dt-${thread.cid}`} className="date-time-mobile post-number-mobile">
-                          {getDate(thread.timestamp)}
-                          &nbsp;
-                          <Link to={() => {}} key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                          <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${thread.cid}`} 
-                            onClick={(e) => {
-                              if (e.button === 2) return;
-                              e.preventDefault();
-                              setIsReplyOpen(true); 
-                              setSelectedShortCid(thread.shortCid); 
-                              setSelectedParentCid(thread.cid);
-                            }} title="Reply to this post">{thread.shortCid}
-                          </Link>
-                        </span>
-                      </div>
-                      {thread.link ? (
-                        <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                          <a key={`link-a-${thread.cid}`} href={commentMediaInfo?.url} target="_blank"
-                          rel="noopener noreferrer">
-                            {commentMediaInfo?.url ? (
-                              commentMediaInfo.type === "webpage" ? (
-                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                    <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                  </span>
-                              ) : commentMediaInfo.type === "image" ? (
-                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                    <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                  </span>
-                              ) : commentMediaInfo.type === "video" ? (
-                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                                    <video key={`fti-${thread.cid}`} 
-                                    src={commentMediaInfo.url} 
-                                    alt={commentMediaInfo.type}
-                                    style={{ pointerEvents: "none" }} 
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${thread.cid}`} 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-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                  </span>
-                              ) : null
-                            ) : null}
-                          </a>
-                        </div>
-                      ) : null}
-                      {thread.content ? (
-                        thread.content.length > 500 ?
-                        <Fragment key={`fragment12-${thread.cid}`}>
-                          <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
-                            <Post content={thread.content.slice(0, 500)} key={`post-mobile-${thread.cid}`} />
-                            <span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
-                            <br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
-                            Post too long.&nbsp;
-                              <Link key={`mob-ttl-l-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                              &nbsp;to view. </span>
-                          </blockquote>
-                        </Fragment>
-                      : <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
-                          <Post content={thread.content} key={`post-mobile-${thread.cid}`} />
-                        </blockquote>)
-                      : null}
                     </div>
-                    <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
-                      <span key={`mob-info-${thread.cid}`} className="info-mobile">{
-                      thread.replyCount === 0 ?
-                      ("No replies")
-                      : thread.replyCount === 1 ?
-                      ("1 reply")
-                      : thread.replyCount > 1 ?
-                      (thread.replyCount + " replies")
-                      : null
-                      }</span>
-                      <Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
-                    </div>
-                  </div>
-                  {renderedComments?.map((reply) => {
-                    const replyMediaInfo = getCommentMediaInfo(reply);
-                    const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
-                    return (
-                    <div key={`mob-rc-${reply.cid}`} className="reply-container">
-                      <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
-                        <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
-                          <button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                          <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
-                            {reply.author.displayName
-                            ? reply.author.displayName.length > 12
-                            ? <Fragment key={`fragment13-${reply.cid}`}>
-                                <span key={`mob-n-${reply.cid}`} className="name-mobile"
-                                data-tooltip-id="tooltip"
-                                data-tooltip-content={reply.author.displayName}
-                                data-tooltip-place="top">
-                                  {reply.author.displayName.slice(0, 12) + " (...)"}
+                    <span key={`summary-${thread.cid}`} className="summary">
+                      {omittedCount > 0 ? (
+                      <span key={`oc-${thread.cid}`} className="ttl">
+                        <span key={`oc1-${thread.cid}`}>
+                          {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
+                          <Link key={`oc2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
+                          &nbsp;to view.
+                        </span>
+                      </span>) : null}
+                    </span>
+                    {renderedComments?.map((reply) => {
+                      const replyMediaInfo = getCommentMediaInfo(reply);
+                      const fallbackImgUrl = "/assets/filedeleted-res.gif";
+                      const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                      return (
+                        <div key={`rc-${reply.cid}`} className="reply-container">
+                          <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
+                          <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
+                            <div key={`pi-${reply.cid}`} className="post-info">
+                              <span key={`nb-${reply.cid}`} className="nameblock">
+                                {reply.author.displayName
+                                  ? reply.author.displayName.length > 12
+                                  ? <Fragment key={`fragment6-${reply.cid}`}>
+                                      <span key={`mob-n-${reply.cid}`} className="name"
+                                      data-tooltip-id="tooltip"
+                                      data-tooltip-content={reply.author.displayName}
+                                      data-tooltip-place="top">
+                                        {reply.author.displayName.slice(0, 12) + " (...)"}
+                                      </span>
+                                    </Fragment>
+                                    : <span key={`mob-n-${reply.cid}`} className="name">
+                                      {reply.author.displayName}</span>
+                                  : <span key={`mob-n-${reply.cid}`} className="name">
+                                    Anonymous</span>}
+                                &nbsp;
+                                <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
+                                  id="reply-button" style={{cursor: "pointer"}}
+                                  onClick={() => handleAddressClick(reply.author.shortAddress)}
+                                >
+                                  (u/
+                                    <span key={`mob-ha-${reply.cid}`}>
+                                      {reply.author.shortAddress}
+                                    </span>
+                                  )
                                 </span>
+                              </span>
+                              &nbsp;
+                              <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
+                              &nbsp;
+                              <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
+                                <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                                <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${reply.cid}`} 
+                                onClick={(e) => {
+                                  if (e.button === 2) return;
+                                  e.preventDefault();
+                                  setIsReplyOpen(true); 
+                                  setSelectedShortCid(reply.shortCid); 
+                                  setSelectedParentCid(reply.cid);
+                                }} title="Reply to this post">{reply.shortCid}</Link>
+                              </span>&nbsp;
+                              <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} 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) => (
+                                    <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
+                                    <Link to={() => {}} key={`ql-${reply.cid}`}
+                                      className="quote-link" 
+                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                      c/{reply.shortCid}</Link>
+                                      &nbsp;
+                                    </div>
+                                  ))
+                                }
+                              </div>
+                            </div>
+                            {replyMediaInfo?.url ? (
+                              <div key={`f-${reply.cid}`} className="file" 
+                              style={{marginBottom: "5px"}}>
+                                <div key={`ft-${reply.cid}`} className="reply-file-text">
+                                  Link:&nbsp;
+                                  <a key={`fa-${reply.cid}`} 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" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <img key={`fti-${reply.cid}`}
+                                    src={reply.thumbnailUrl} 
+                                    alt="thumbnail" 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "image" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <img key={`fti-${reply.cid}`}
+                                    src={replyMediaInfo.url} 
+                                    alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "video" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <video controls
+                                    key={`fti-${reply.cid}`} 
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "audio" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <audio controls 
+                                    key={`fti-${reply.cid}`}
+                                    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-${reply.cid}`}>
+                                <blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message">
+                                  <Link to={() => {}} key={`r-pm-${reply.cid}`} 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-${reply.cid}`} />
+                                  <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
+                                  <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
+                                  Comment too long.&nbsp;
+                                    <Link key={`ttl-l-${reply.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                  &nbsp;to view. </span>
+                                </blockquote>
                               </Fragment>
-                              : <span key={`mob-n-${reply.cid}`} className="name-mobile">
-                                {reply.author.displayName}</span>
-                            : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                            : <blockquote key={`pm-${reply.cid}`} className="post-message">
+                                <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                    {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                                </Link>
+                                <Post content={reply.content} key={`post-${reply.cid}`} comment={reply} />
+                              </blockquote>)
+                            : null}
+                          </div>
+                        </div>
+                        )
+                    })}
+                  </div>
+                  <div key={`mob-t-${thread.cid}`} className="thread-mobile">
+                    <hr key={`mob-hr-${thread.cid}`} />
+                    <div key={`mob-c-${thread.cid}`} className="op-container">
+                      <div key={`mob-po-${thread.cid}`} className="post op op-mobile">
+                        <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
+                          <button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={() => {}} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                          <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
+                            {thread.author.displayName
+                            ? thread.author.displayName.length > 15
+                            ? <Fragment key={`fragment9-${thread.cid}`}>
+                                <span key={`mob-n-${thread.cid}`} className="name-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={thread.author.displayName}
+                                data-tooltip-place="top">
+                                  {thread.author.displayName.slice(0, 15) + " (...)"}
+                                </span>
+                              </Fragment> 
+                              : <span key={`mob-n-${thread.cid}`} className="name-mobile">
+                                {thread.author.displayName}</span>
+                            : <span key={`mob-n-${thread.cid}`} className="name-mobile">
                               Anonymous</span>}
                             &nbsp;
-                            <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                            <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(reply.author.shortAddress)}
+                              onClick={() => handleAddressClick(thread.author.shortAddress)}
                             >
                               (u/
-                              <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
-                                {reply.author.shortAddress}
+                              <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
+                                {thread.author.shortAddress}
                               </span>
                               )&nbsp;
                             </span>
-                            <br key={`mob-br-${reply.cid}`} />
+                            <br key={`mob-br1-${thread.cid}`} />
+                            {thread.title ? (
+                              thread.title.length > 30 ?
+                              <Fragment key={`fragment11-${thread.cid}`}>
+                                <span key={`mob-t-${thread.cid}`} 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-${thread.cid}`} className="subject-mobile">
+                              {thread.title}
+                              </span>) 
+                            : null}
                           </span>
-                          <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
-                          {getDate(reply.timestamp)}&nbsp;
-                            <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                            <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${reply.cid}`} 
+                          <span key={`mob-dt-${thread.cid}`} className="date-time-mobile post-number-mobile">
+                            {getDate(thread.timestamp)}
+                            &nbsp;
+                            <Link to={() => {}} key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                            <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${thread.cid}`} 
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
                                 setIsReplyOpen(true); 
-                                setSelectedShortCid(reply.shortCid); 
-                                setSelectedParentCid(reply.cid);
-                              }} title="Reply to this post">{reply.shortCid}
+                                setSelectedShortCid(thread.shortCid); 
+                                setSelectedParentCid(thread.cid);
+                              }} title="Reply to this post">{thread.shortCid}
                             </Link>
                           </span>
                         </div>
-                        {reply.link ? (
-                          <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                            <a key={`link-a-${reply.cid}`} href={replyMediaInfo?.url} target="_blank" rel="noopener noreferrer">
-                              {replyMediaInfo?.url ? (
-                                replyMediaInfo.type === "webpage" ? (
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                      <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                        {thread.link ? (
+                          <div key={`mob-f-${thread.cid}`} className="file-mobile">
+                            <a key={`link-a-${thread.cid}`} href={commentMediaInfo?.url} target="_blank"
+                            rel="noopener noreferrer">
+                              {commentMediaInfo?.url ? (
+                                commentMediaInfo.type === "webpage" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
                                     </span>
-                                ) : replyMediaInfo.type === "image" ? (
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                      <img key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
                                     </span>
-                                ) : replyMediaInfo.type === "video" ? (
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                        <video key={`fti-${reply.cid}`} 
-                                        src={replyMediaInfo.url} 
-                                        alt={replyMediaInfo.type} 
-                                        style={{ pointerEvents: "none" }}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <video key={`fti-${thread.cid}`} 
+                                      src={commentMediaInfo.url} 
+                                      alt={commentMediaInfo.type}
+                                      style={{ pointerEvents: "none" }} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
                                     </span>
-                                ) : replyMediaInfo.type === "audio" ? (
-                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                      <audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                      <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
                                     </span>
                                 ) : null
                               ) : null}
                             </a>
                           </div>
                         ) : null}
-                        {reply.content ? (
-                          reply.content.length > 500 ?
-                          <Fragment key={`fragment15-${reply.cid}`}>
-                            <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
+                        {thread.content ? (
+                          thread.content.length > 500 ?
+                          <Fragment key={`fragment12-${thread.cid}`}>
+                            <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
+                              <Post content={thread.content.slice(0, 500)} key={`post-mobile-${thread.cid}`} />
+                              <span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
+                              <br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
+                              Post too long.&nbsp;
+                                <Link key={`mob-ttl-l-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                &nbsp;to view. </span>
+                            </blockquote>
+                          </Fragment>
+                        : <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
+                            <Post content={thread.content} key={`post-mobile-${thread.cid}`} />
+                          </blockquote>)
+                        : null}
+                      </div>
+                      <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
+                        <span key={`mob-info-${thread.cid}`} className="info-mobile">{
+                        thread.replyCount === 0 ?
+                        ("No replies")
+                        : thread.replyCount === 1 ?
+                        ("1 reply")
+                        : thread.replyCount > 1 ?
+                        (thread.replyCount + " replies")
+                        : null
+                        }</span>
+                        <Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
+                      </div>
+                    </div>
+                    {renderedComments?.map((reply) => {
+                      const replyMediaInfo = getCommentMediaInfo(reply);
+                      const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                      return (
+                      <div key={`mob-rc-${reply.cid}`} className="reply-container">
+                        <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
+                          <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
+                            <button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                            <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
+                              {reply.author.displayName
+                              ? reply.author.displayName.length > 12
+                              ? <Fragment key={`fragment13-${reply.cid}`}>
+                                  <span key={`mob-n-${reply.cid}`} className="name-mobile"
+                                  data-tooltip-id="tooltip"
+                                  data-tooltip-content={reply.author.displayName}
+                                  data-tooltip-place="top">
+                                    {reply.author.displayName.slice(0, 12) + " (...)"}
+                                  </span>
+                                </Fragment>
+                                : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                                  {reply.author.displayName}</span>
+                              : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                                Anonymous</span>}
+                              &nbsp;
+                              <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                                id="reply-button" style={{cursor: "pointer"}}
+                                onClick={() => handleAddressClick(reply.author.shortAddress)}
+                              >
+                                (u/
+                                <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
+                                  {reply.author.shortAddress}
+                                </span>
+                                )&nbsp;
+                              </span>
+                              <br key={`mob-br-${reply.cid}`} />
+                            </span>
+                            <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
+                            {getDate(reply.timestamp)}&nbsp;
+                              <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                              <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${reply.cid}`} 
+                                onClick={(e) => {
+                                  if (e.button === 2) return;
+                                  e.preventDefault();
+                                  setIsReplyOpen(true); 
+                                  setSelectedShortCid(reply.shortCid); 
+                                  setSelectedParentCid(reply.cid);
+                                }} title="Reply to this post">{reply.shortCid}
+                              </Link>
+                            </span>
+                          </div>
+                          {reply.link ? (
+                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
+                              <a key={`link-a-${reply.cid}`} href={replyMediaInfo?.url} target="_blank" rel="noopener noreferrer">
+                                {replyMediaInfo?.url ? (
+                                  replyMediaInfo.type === "webpage" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : replyMediaInfo.type === "image" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <img key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : replyMediaInfo.type === "video" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                          <video key={`fti-${reply.cid}`} 
+                                          src={replyMediaInfo.url} 
+                                          alt={replyMediaInfo.type} 
+                                          style={{ pointerEvents: "none" }}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : replyMediaInfo.type === "audio" ? (
+                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                      </span>
+                                  ) : null
+                                ) : null}
+                              </a>
+                            </div>
+                          ) : null}
+                          {reply.content ? (
+                            reply.content.length > 500 ?
+                            <Fragment key={`fragment15-${reply.cid}`}>
+                              <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
+                                <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} 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-${reply.cid}`} comment={reply} />
+                                <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
+                                <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
+                                Comment too long.&nbsp;
+                                  <Link key={`mob-ttl-l-${reply.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
+                                &nbsp;to view. </span>
+                              </blockquote>
+                            </Fragment>
+                          : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
                               <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} 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-${reply.cid}`} comment={reply} />
-                              <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
-                              <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
-                              Comment too long.&nbsp;
-                                <Link key={`mob-ttl-l-${reply.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                              &nbsp;to view. </span>
-                            </blockquote>
-                          </Fragment>
-                        : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                            <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} 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-${reply.cid}`} comment={reply} />
-                          </blockquote>)
-                        : null}
-                          {reply.replyCount > 0 ? (
-                            <div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'>
-                            {reply.replies?.pages?.topAll.comments
-                            .sort((a, b) => a.timestamp - b.timestamp)
-                            .map((reply) => (
-                              <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
-                              <Link key={`ql-${reply.cid}`} to={() => {}}
-                              onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
-                                c/{reply.shortCid}</Link>
-                                &nbsp;
+                              <Post content={reply.content} key={`post-mobile-${reply.cid}`} comment={reply} />
+                            </blockquote>)
+                          : null}
+                            {reply.replyCount > 0 ? (
+                              <div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'>
+                              {reply.replies?.pages?.topAll.comments
+                              .sort((a, b) => a.timestamp - b.timestamp)
+                              .map((reply) => (
+                                <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
+                                <Link key={`ql-${reply.cid}`} to={() => {}}
+                                onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
+                                  c/{reply.shortCid}</Link>
+                                  &nbsp;
+                                </div>
+                              ))}
                               </div>
-                            ))}
-                            </div>
-                          ) : null}
+                            ) : null}
+                        </div>
                       </div>
-                    </div>
-                  )})}
-                </div>
-              </Fragment>
-              )})}
-            </InfiniteScroll>
-          )}
-        </div>
-      </BoardForm>
-    </Container>
+                    )})}
+                  </div>
+                </Fragment>
+                )})}
+              </InfiniteScroll>
+            )}
+          </div>
+        </BoardForm>
+      </Container>
+    </>
   );
 }
 
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index de93bd84..5abf5f8d 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -202,210 +203,215 @@ const Catalog = () => {
 
 
   return (
-    <Container>
-      <SettingsModal
-      selectedStyle={selectedStyle}
-      isOpen={isSettingsOpen}
-      closeModal={() => setIsSettingsOpen(false)} />
-      <NavBar selectedStyle={selectedStyle}>
-        <>
-          {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList" key={`span-${subplebbit.address}`}>
+    <>
+      <Helmet>
+        <title>{((selectedTitle ? selectedTitle : selectedAddress) + " - Catalog - plebchan")}</title>
+      </Helmet>
+      <Container>
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            {defaultSubplebbits.map(subplebbit => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                [
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} 
+                onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                ]&nbsp;
+              </span>
+            ))}
+            <span className="nav">
               [
-              <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} 
-              onClick={() => {
-              setSelectedTitle(subplebbit.title);
-              setSelectedAddress(subplebbit.address);
-              }}
-              >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-              ]&nbsp;
-            </span>
-          ))}
-          <span className="nav">
-            [
-            <Link to={`/p/${selectedAddress}/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={selectedAddress} onChange={handleSelectChange}>
-                {defaultSubplebbits.map(subplebbit => (
-                    <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                    >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                  ))}
-              </select>
-            </div>
-            <div className="page-jump">
               <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-              &nbsp;
+              ]
+              [
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                )}>Home</Link>
+              )}>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={selectedAddress} onChange={handleSelectChange}>
+                  {defaultSubplebbits.map(subplebbit => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                    ))}
+                </select>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>Home</Link>
+              </div>
             </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">{selectedTitle}</div>
-            <div className="board-address">p/{selectedAddress}</div>
-            </>
-        </>
-      </Header>
-      <Break selectedStyle={selectedStyle} />
-      <PostForm selectedStyle={selectedStyle}>
-        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          <div id="post-form-link-desktop">
+            <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">{selectedTitle}</div>
+              <div className="board-address">p/{selectedAddress}</div>
+              </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle}>
+          <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+            <div id="post-form-link-desktop">
+              [
+                <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              ]
+            </div>
+            <div id="post-form-link-mobile">
+              <span className="btn-wrap">
+                <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              </span>
+            </div>
+          </PostFormLink>
+          <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+            <tbody>
+              <tr data-type="Name">
+                <td id="td-name">Name</td>
+                <td>
+                  <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                </td>
+              </tr>
+              <tr data-type="Subject">
+                <td>Subject</td>
+                <td>
+                  <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
+                </td>
+              </tr>
+              <tr data-type="Comment">
+                <td>Comment</td>
+                <td>
+                  <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+                </td>
+              </tr>
+              <tr data-type="File">
+                <td>Embed File</td>
+                <td>
+                  <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+                  <button id="t-help" type="button" onClick={
+                    () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
+                  } data-tip="Help">?</button>
+                </td>
+              </tr>
+            </tbody>
+          </PostFormTable>
+        </PostForm>
+        <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">
             [
-              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            <Link to={`/p/${selectedAddress}`}>Return</Link>
             ]
           </div>
-          <div id="post-form-link-mobile">
-            <span className="btn-wrap">
-              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+          <div id="return-button-mobile">
+            <span className="btn-wrap-catalog btn-wrap">
+              <Link to={`/p/${selectedAddress}`}>Return</Link>
             </span>
           </div>
-        </PostFormLink>
-        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
-          <tbody>
-            <tr data-type="Name">
-              <td id="td-name">Name</td>
-              <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
-              </td>
-            </tr>
-            <tr data-type="Subject">
-              <td>Subject</td>
-              <td>
-                <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
-                <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={handleSubmit} />
-              </td>
-            </tr>
-            <tr data-type="Comment">
-              <td>Comment</td>
-              <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
-              </td>
-            </tr>
-            <tr data-type="File">
-              <td>Embed File</td>
-              <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
-                <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
-                } data-tip="Help">?</button>
-              </td>
-            </tr>
-          </tbody>
-        </PostFormTable>
-      </PostForm>
-      <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/${selectedAddress}`}>Return</Link>
-          ]
-        </div>
-        <div id="return-button-mobile">
-          <span className="btn-wrap-catalog btn-wrap">
-            <Link to={`/p/${selectedAddress}`}>Return</Link>
-          </span>
-        </div>
-        <div id="stats" style={{float: "right", marginTop: "5px"}}>
-          {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
-        </div>
-        <hr />
-      </TopBar>
-      <Threads selectedStyle={selectedStyle}>
-        {feed.length < 1 ? (
-          <CatalogLoader />
-        ) : (
-          <InfiniteScroll
-            pageStart={0}
-            loadMore={tryLoadMore}
-            hasMore={hasMore}
-          >
-            {feed.map((thread) => {
-              const commentMediaInfo = getCommentMediaInfo(thread);
-              const fallbackImgUrl = "/assets/filedeleted-res.gif";
-              return (
-                <Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
-                  <div key={`thread-${thread.cid}`} className="thread">
-                      {commentMediaInfo?.url ? (
-                        <Fragment key="f-catalog">
-                          {commentMediaInfo?.type === "webpage" ? (
-                            <img key={`img-${thread.cid}`} alt="thread" 
-                            src={commentMediaInfo.url} 
-                            onError={(e) => {
-                              e.target.src = fallbackImgUrl
-                              e.target.onerror = null;}}  />
-                          ) : null}
-                          {commentMediaInfo?.type === "image" ? (
-                            <img key={`img-${thread.cid}`} alt="thread" 
-                            src={commentMediaInfo.url} 
-                            onError={(e) => {
-                              e.target.src = fallbackImgUrl
-                              e.target.onerror = null;}}  />
-                          ) : null}
-                          {commentMediaInfo?.type === "video" ? (
-                            <video key={`fti-${thread.cid}`} 
-                            src={commentMediaInfo.url} 
-                            alt={commentMediaInfo.type} 
-                            style={{ pointerEvents: "none" }}
-                            onError={(e) => e.target.src = fallbackImgUrl} /> 
-                          ) : null}
-                          {commentMediaInfo?.type === "audio" ? (
-                            <audio controls 
-                            key={`fti-${thread.cid}`} 
-                            src={commentMediaInfo.url} 
-                            alt={commentMediaInfo.type} 
-                            style={{ pointerEvents: "none" }}
-                            onError={(e) => e.target.src = fallbackImgUrl} />
-                          ) : null}
-                        </Fragment>
-                      ) : null}
-                    {/* <div key={`ti-${thread.cid}`} className="thread-icons" >
-                      <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
-                    </div> */}
-                    <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
-                      R:
-                      <b key={`b-${thread.cid}`}>{thread.replyCount}</b>
+          <div id="stats" style={{float: "right", marginTop: "5px"}}>
+            {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
+          </div>
+          <hr />
+        </TopBar>
+        <Threads selectedStyle={selectedStyle}>
+          {feed.length < 1 ? (
+            <CatalogLoader />
+          ) : (
+            <InfiniteScroll
+              pageStart={0}
+              loadMore={tryLoadMore}
+              hasMore={hasMore}
+            >
+              {feed.map((thread) => {
+                const commentMediaInfo = getCommentMediaInfo(thread);
+                const fallbackImgUrl = "/assets/filedeleted-res.gif";
+                return (
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
+                    <div key={`thread-${thread.cid}`} className="thread">
+                        {commentMediaInfo?.url ? (
+                          <Fragment key="f-catalog">
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <img key={`img-${thread.cid}`} alt="thread" 
+                              src={commentMediaInfo.url} 
+                              onError={(e) => {
+                                e.target.src = fallbackImgUrl
+                                e.target.onerror = null;}}  />
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <img key={`img-${thread.cid}`} alt="thread" 
+                              src={commentMediaInfo.url} 
+                              onError={(e) => {
+                                e.target.src = fallbackImgUrl
+                                e.target.onerror = null;}}  />
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                              <video key={`fti-${thread.cid}`} 
+                              src={commentMediaInfo.url} 
+                              alt={commentMediaInfo.type} 
+                              style={{ pointerEvents: "none" }}
+                              onError={(e) => e.target.src = fallbackImgUrl} /> 
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <audio controls 
+                              key={`fti-${thread.cid}`} 
+                              src={commentMediaInfo.url} 
+                              alt={commentMediaInfo.type} 
+                              style={{ pointerEvents: "none" }}
+                              onError={(e) => e.target.src = fallbackImgUrl} />
+                            ) : null}
+                          </Fragment>
+                        ) : null}
+                      {/* <div key={`ti-${thread.cid}`} className="thread-icons" >
+                        <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
+                      </div> */}
+                      <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
+                        R:
+                        <b key={`b-${thread.cid}`}>{thread.replyCount}</b>
+                      </div>
+                      <div key={`t-${thread.cid}`} className="teaser">
+                          <b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b>
+                          {thread.content ? `: ${thread.content}` : null}
+                      </div>
                     </div>
-                    <div key={`t-${thread.cid}`} className="teaser">
-                        <b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b>
-                        {thread.content ? `: ${thread.content}` : null}
-                    </div>
-                  </div>
-                </Link>
-              )})}
-          </InfiniteScroll>
-        )}
-      </Threads>
-    </Container>
+                  </Link>
+                )})}
+            </InfiniteScroll>
+          )}
+        </Threads>
+      </Container>
+    </>
   );
 }
 
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 7455ed15..e3fe266d 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { Helmet } from 'react-helmet-async';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -28,103 +29,108 @@ const Home = () => {
 
 
   return (
-    <Container>
-      <Header>
-        <Logo>
-          <Link to="/">
-            <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
-          </Link>
-        </Logo>
-      </Header>
-      <Page>
-        <Search>
-          <input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={
-            (event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
+    <>
+      <Helmet>
+        <title>plebchan</title>
+      </Helmet>
+      <Container>
+        <Header>
+          <Logo>
+            <Link to="/">
+              <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
+            </Link>
+          </Logo>
+        </Header>
+        <Page>
+          <Search>
+            <input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={
+              (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  const address = inputRef.current.value;
+                  if (address) {
+                    setSelectedAddress(address);
+                    navigate(`/p/${address}`)
+                  }
+                }
+            }} />
+            <input type="submit" value="Search" onClick={
+              () => {
                 const address = inputRef.current.value;
                 if (address) {
                   setSelectedAddress(address);
                   navigate(`/p/${address}`)
                 }
               }
-          }} />
-          <input type="submit" value="Search" onClick={
-            () => {
-              const address = inputRef.current.value;
-              if (address) {
-                setSelectedAddress(address);
-                navigate(`/p/${address}`)
-              }
-            }
-          } />
-        </Search>
-        <About>
-          <AboutTitle>
-            <h2>What is plebchan?</h2>
-          </AboutTitle>
-          <AboutContent>
-            <div id="content">
-              <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and create a board. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
-              <br />
-              <p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
-            </div>
-          </AboutContent>
-        </About>
-        <Boards>
-            <BoardsTitle>
-              <h2>Popular boards</h2>
-            </BoardsTitle>
-            <BoardsContent>
-              {defaultSubplebbits.map(subplebbit => (
-                <div className="board" key={subplebbit.address}>
-                  <div className="board-title">
-                    {subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>}
+            } />
+          </Search>
+          <About>
+            <AboutTitle>
+              <h2>What is plebchan?</h2>
+            </AboutTitle>
+            <AboutContent>
+              <div id="content">
+                <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and create a board. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
+                <br />
+                <p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
+              </div>
+            </AboutContent>
+          </About>
+          <Boards>
+              <BoardsTitle>
+                <h2>Popular boards</h2>
+              </BoardsTitle>
+              <BoardsContent>
+                {defaultSubplebbits.map(subplebbit => (
+                  <div className="board" key={subplebbit.address}>
+                    <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);
+                    }} >
+                      <img alt="board logo" src="/assets/plebchan.png" />
+                    </Link>
+                    <div className="board-text">
+                      <b>{subplebbit.address}</b>
+                    </div>
                   </div>
-                  <Link to={`/p/${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }} >
-                    <img alt="board logo" src="/assets/plebchan.png" />
-                  </Link>
-                  <div className="board-text">
-                    <b>{subplebbit.address}</b>
-                  </div>
-                </div>
-              ))}
-            </BoardsContent>
-        </Boards>
-      </Page>
-      <Footer>
-        <ul>
-          <li className="fill"></li>
-          <li className="first">
-            <a href="https://plebbitapp.eth.limo/#/" target="_blank" rel="noopener noreferrer">Plebbit</a>
-          </li>
-          <li>
-            <a href="https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd" target="_blank" rel="noopener noreferrer">Donate</a>
-          </li>
-          <li>
-            <a href="https://plebbit.com/whitepaper" target="_blank" rel="noopener noreferrer">Whitepaper</a>
-          </li>
-          <li>
-            <a href="https://snowtrace.io/token/0x625fc9bb971bb305a2ad63252665dcfe9098bee9" target="_blank" rel="noopener noreferrer">Token</a>
-          </li>
-          <li>
-            <a href="https://matrix.to/#/#plebbit:plebbitchat.org" target="_blank" rel="noopener noreferrer">Matrix</a>
-          </li>
-          <li>
-            <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
-          </li>
-          <li>
-            <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
-          </li>
-          <li>
-            <a href="https://discord.gg/E7ejphwzGW" target="_blank" rel="noopener noreferrer">Discord</a>
-          </li>
-        </ul>
-      </Footer>
-    </Container>
+                ))}
+              </BoardsContent>
+          </Boards>
+        </Page>
+        <Footer>
+          <ul>
+            <li className="fill"></li>
+            <li className="first">
+              <a href="https://plebbitapp.eth.limo/#/" target="_blank" rel="noopener noreferrer">Plebbit</a>
+            </li>
+            <li>
+              <a href="https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd" target="_blank" rel="noopener noreferrer">Donate</a>
+            </li>
+            <li>
+              <a href="https://plebbit.com/whitepaper" target="_blank" rel="noopener noreferrer">Whitepaper</a>
+            </li>
+            <li>
+              <a href="https://snowtrace.io/token/0x625fc9bb971bb305a2ad63252665dcfe9098bee9" target="_blank" rel="noopener noreferrer">Token</a>
+            </li>
+            <li>
+              <a href="https://matrix.to/#/#plebbit:plebbitchat.org" target="_blank" rel="noopener noreferrer">Matrix</a>
+            </li>
+            <li>
+              <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            </li>
+            <li>
+              <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
+            </li>
+            <li>
+              <a href="https://discord.gg/E7ejphwzGW" target="_blank" rel="noopener noreferrer">Discord</a>
+            </li>
+          </ul>
+        </Footer>
+      </Container>
+    </>
   )
 };
 
diff --git a/src/components/views/NotFound.jsx b/src/components/views/NotFound.jsx
index fa513bdd..11d85838 100644
--- a/src/components/views/NotFound.jsx
+++ b/src/components/views/NotFound.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect }  from 'react';
+import { Helmet } from 'react-helmet-async';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Home.styled';
@@ -17,28 +18,33 @@ const NotFound = ({ setBodyStyle }) => {
   }, [setBodyStyle, setSelectedStyle]);
 
   return (
-    <Container>
-      <Header>
-        <Logo>
-          <Link to="/">
-            <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
-          </Link>
-        </Logo>
-      </Header>
-      <Page>
-        <Boards>
-          <BoardsTitle>
-            <h2 style={{textAlign: 'center'}}>404 Not Found</h2>
-          </BoardsTitle>
-          <img src="/assets/plebchan-husbando.jpg" alt="plebchan" style={{
-            display: "block",
-            margin: "auto",
-            padding: "15px", 
-            width: "50%"
-            }}></img>
-        </Boards>
-      </Page>
-    </Container>
+    <>
+      <Helmet>
+        <title>plebchan - 404 Not Found</title>
+      </Helmet>
+      <Container>
+        <Header>
+          <Logo>
+            <Link to="/">
+              <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
+            </Link>
+          </Logo>
+        </Header>
+        <Page>
+          <Boards>
+            <BoardsTitle>
+              <h2 style={{textAlign: 'center'}}>404 Not Found</h2>
+            </BoardsTitle>
+            <img src="/assets/plebchan-husbando.jpg" alt="plebchan" style={{
+              display: "block",
+              margin: "auto",
+              padding: "15px", 
+              width: "50%"
+              }}></img>
+          </Boards>
+        </Page>
+      </Container>
+    </>
   );
 }
 
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 3962a45e..dd2f38e9 100644
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
@@ -70,313 +71,318 @@ const Pending = () => {
   
 
   return (
-    <Container>
-      <SettingsModal
-      selectedStyle={selectedStyle}
-      isOpen={isSettingsOpen}
-      closeModal={() => setIsSettingsOpen(false)} />
-      <NavBar selectedStyle={selectedStyle}>
-        <>
-          {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList" key={`span-${subplebbit.address}`}>
-              [
-              <Link key={`a-${subplebbit.address}`} 
-              to={`/p/${subplebbit.address}`} 
-              onClick={() => {
-                setSelectedTitle(subplebbit.title);
-                setSelectedAddress(subplebbit.address);
-              }}
-              >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-              ]&nbsp;
-            </span>
-          ))}
-          <span className="nav">
-            [
-            <Link to={`/p/${selectedAddress}/c/${selectedThread}/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={selectedAddress} onChange={handleSelectChange}>
-                {defaultSubplebbits.map(subplebbit => (
-                    <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                    >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                  ))}
-              </select>
-            </div>
-            <div className="page-jump">
-              <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-              &nbsp;
-              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                )}>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">{selectedTitle ?? null}</div>
-            <div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div>
-            </>
-        </>
-      </Header>
-      <Break selectedStyle={selectedStyle} />
-      <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
-        <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          <div id="return-button-mobile">
-            <span className="btn-wrap">
-              <Link to={`/p/${selectedAddress}`}>Return</Link>
-            </span>
-          </div>
-          <div id="catalog-button-mobile">
-            <span className="btn-wrap">
-              <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-            </span>
-          </div>
-          <div>&nbsp;</div>
-        </ReplyFormLink>
-      </PostForm>
-      <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>
-        <span className="return-button" id="return-button-desktop">
-          [
-          <Link to={`/p/${selectedAddress}`}>Return</Link>
-          ]
-        </span>
-        <span className="return-button catalog-button" id="catalog-button-desktop">
-          [
-          <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-          ]
-        </span>
-        {comment ? (
-          <span className="reply-stat">Preview</span>
-        ) : (
-          <span className="reply-stat">Fetching IPFS...</span>
-        )}
-        <hr />
-      </TopBar>
-      <Tooltip id="tooltip" className="tooltip" />
-      <BoardForm selectedStyle={selectedStyle}>
-        {comment !== undefined ? (
+    <>
+      <Helmet>
+        <title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title>
+      </Helmet>
+      <Container>
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
           <>
-            <div className="thread">
-              <div className="op-container">
-                <div className="post op">
-                  <div className="post-info">
-                  {commentMediaInfo?.url ? (
-                      <div key={`f-${"pending"}`} className="file" style={{marginBottom: "5px"}}>
-                        <div key={`ft-${"pending"}`} className="file-text">
-                          Link:&nbsp;
-                          <a key={`fa-${"pending"}`} href={commentMediaInfo.url} target="_blank">{
-                          commentMediaInfo?.url.length > 30 ?
-                          commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                          commentMediaInfo?.url
-                          }</a>&nbsp;({commentMediaInfo?.type})
-                        </div>
-                        {commentMediaInfo?.type === "webpage" ? (
-                          <span key={`fta-${"pending"}`} className="file-thumb">
-                            <img key={`fti-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "image" ? (
-                          <span key={`fta-${"pending"}`} className="file-thumb">
-                            <img key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "video" ? (
-                          <span key={`fta-${"pending"}`} className="file-thumb">
-                            <video controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "audio" ? (
-                          <span key={`fta-${"pending"}`} className="file-thumb">
-                            <audio controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                      </div>
-                    ) : null}
-                    <span className="name-block">
-                        {comment.title ? (
-                          comment.title.length > 75 ?
-                          <>
-                            <span key={`q-${"pending"}`} className="title"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.title}
-                            data-tooltip-place="top">
-                              {comment.title.slice(0, 75) + " (...)"}
-                            </span>
-                          </>
-                        : <span key={`q-${"pending"}`} className="title">
-                          {comment.title}
-                          </span>) 
-                        : null}
-                      &nbsp;
-                      {comment.author?.displayName
-                        ? comment.author?.displayName.length > 20
-                        ? <>
-                            <span key={`n-${"pending"}`} className="name"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.author?.displayName}
-                            data-tooltip-place="top">
-                              {comment.author?.displayName.slice(0, 20) + " (...)"}
-                            </span>
-                          </> 
-                          : <span key={`n-${"pending"}`} className="name">
-                            {comment.author?.displayName}</span>
-                        : <span key={`n-${"pending"}`} className="name">
-                          Anonymous</span>}
-                        &nbsp;
-                      &nbsp;
-                      <span className="poster-address">
-                        (u/
-                          <span key={`pa-${"pending"}`} className="poster-address">
-                          {comment.author?.address}
-                        </span>)
-                      </span>
-                      &nbsp;
-                      <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
-                      &nbsp;
-                      <span className="post-number">
-                        <Link to="" onClick={() => {}} title="Link to this post">c/</Link>
-                        <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
-                      </span>&nbsp;&nbsp;
-                      <button key={`pmb-${"pending"}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
-                    </span>
-                    <blockquote key={`blockquote-${"pending"}`}>
-                      <Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
-                    </blockquote>
-                  </div>
-                </div>
+            {defaultSubplebbits.map(subplebbit => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                [
+                <Link key={`a-${subplebbit.address}`} 
+                to={`/p/${subplebbit.address}`} 
+                onClick={() => {
+                  setSelectedTitle(subplebbit.title);
+                  setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                ]&nbsp;
+              </span>
+            ))}
+            <span className="nav">
+              [
+              <Link to={`/p/${selectedAddress}/c/${selectedThread}/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={selectedAddress} onChange={handleSelectChange}>
+                  {defaultSubplebbits.map(subplebbit => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                    ))}
+                </select>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>Home</Link>
               </div>
             </div>
-            <div className="thread-mobile" key="thread-mobile">
-              <hr />
-              <div className="op-container" key="op-container">
-                  <div key={`mob-po-${"pending"}`} className="post op">
-                    <div key={`mob-pi-${"pending"}`} className="post-info-mobile">
-                      <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
-                      <span className="name-block-mobile">
-                        {comment.author?.displayName
-                        ? comment.author?.displayName.length > 15
-                        ? <>
-                            <span key={`mob-n-${"pending"}`} className="name-mobile"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.author?.displayName}
-                            data-tooltip-place="top">
-                              {comment.author?.displayName.slice(0, 15) + " (...)"}
+            <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">{selectedTitle ?? null}</div>
+              <div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div>
+              </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
+          <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+            <div id="return-button-mobile">
+              <span className="btn-wrap">
+                <Link to={`/p/${selectedAddress}`}>Return</Link>
+              </span>
+            </div>
+            <div id="catalog-button-mobile">
+              <span className="btn-wrap">
+                <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+              </span>
+            </div>
+            <div>&nbsp;</div>
+          </ReplyFormLink>
+        </PostForm>
+        <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>
+          <span className="return-button" id="return-button-desktop">
+            [
+            <Link to={`/p/${selectedAddress}`}>Return</Link>
+            ]
+          </span>
+          <span className="return-button catalog-button" id="catalog-button-desktop">
+            [
+            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+            ]
+          </span>
+          {comment ? (
+            <span className="reply-stat">Preview</span>
+          ) : (
+            <span className="reply-stat">Fetching IPFS...</span>
+          )}
+          <hr />
+        </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
+        <BoardForm selectedStyle={selectedStyle}>
+          {comment !== undefined ? (
+            <>
+              <div className="thread">
+                <div className="op-container">
+                  <div className="post op">
+                    <div className="post-info">
+                    {commentMediaInfo?.url ? (
+                        <div key={`f-${"pending"}`} className="file" style={{marginBottom: "5px"}}>
+                          <div key={`ft-${"pending"}`} className="file-text">
+                            Link:&nbsp;
+                            <a key={`fa-${"pending"}`} href={commentMediaInfo.url} target="_blank">{
+                            commentMediaInfo?.url.length > 30 ?
+                            commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                            commentMediaInfo?.url
+                            }</a>&nbsp;({commentMediaInfo?.type})
+                          </div>
+                          {commentMediaInfo?.type === "webpage" ? (
+                            <span key={`fta-${"pending"}`} className="file-thumb">
+                              <img key={`fti-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
-                          </> 
-                          : <span key={`mob-n-${"pending"}`} className="name-mobile">
-                            {comment.author?.displayName}</span>
-                        : <span key={`mob-n-${"pending"}`} className="name-mobile">
-                          Anonymous</span>}
-                        &nbsp;
-                        <span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
-                          (u/
-                          <span key={`mob-ha-${"pending"}`} className="highlight-address-mobile">
-                            {comment.author?.address}
-                          </span>
-                          )&nbsp;
-                        </span>
-                        <br key={`mob-br1-${"pending"}`} />
-                        {comment.title ? (
-                            comment.title.length > 30 ?
+                          ) : null}
+                          {commentMediaInfo?.type === "image" ? (
+                            <span key={`fta-${"pending"}`} className="file-thumb">
+                              <img key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                          {commentMediaInfo?.type === "video" ? (
+                            <span key={`fta-${"pending"}`} className="file-thumb">
+                              <video controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                          {commentMediaInfo?.type === "audio" ? (
+                            <span key={`fta-${"pending"}`} className="file-thumb">
+                              <audio controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                        </div>
+                      ) : null}
+                      <span className="name-block">
+                          {comment.title ? (
+                            comment.title.length > 75 ?
                             <>
-                              <span key={`mob-t-${"pending"}`} className="subject-mobile"
+                              <span key={`q-${"pending"}`} className="title"
                               data-tooltip-id="tooltip"
                               data-tooltip-content={comment.title}
                               data-tooltip-place="top">
-                                {comment.title.slice(0, 30) + " (...)"}
+                                {comment.title.slice(0, 75) + " (...)"}
                               </span>
                             </>
-                            : <span key={`mob-t-${"pending"}`} className="subject-mobile">
-                              {comment.title}
-                            </span>) : null}
-                      </span>
-                      <span key={`mob-dt-${"pending"}`} className="date-time-mobile">
-                        {getDate(comment?.timestamp)}
+                          : <span key={`q-${"pending"}`} className="title">
+                            {comment.title}
+                            </span>) 
+                          : null}
                         &nbsp;
-                        <button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button>
+                        {comment.author?.displayName
+                          ? comment.author?.displayName.length > 20
+                          ? <>
+                              <span key={`n-${"pending"}`} className="name"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment.author?.displayName.slice(0, 20) + " (...)"}
+                              </span>
+                            </> 
+                            : <span key={`n-${"pending"}`} className="name">
+                              {comment.author?.displayName}</span>
+                          : <span key={`n-${"pending"}`} className="name">
+                            Anonymous</span>}
+                          &nbsp;
                         &nbsp;
-                        <span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                        <span className="poster-address">
+                          (u/
+                            <span key={`pa-${"pending"}`} className="poster-address">
+                            {comment.author?.address}
+                          </span>)
+                        </span>
+                        &nbsp;
+                        <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
+                        &nbsp;
+                        <span className="post-number">
+                          <Link to="" onClick={() => {}} title="Link to this post">c/</Link>
+                          <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                        </span>&nbsp;&nbsp;
+                        <button key={`pmb-${"pending"}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
                       </span>
+                      <blockquote key={`blockquote-${"pending"}`}>
+                        <Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
+                      </blockquote>
                     </div>
-                    {commentMediaInfo?.url ? (
-                      commentMediaInfo.type === "webpage" ? (
-                        <div key={`mob-f-${"pending"}`} className="file-mobile">
-                          <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                            <img key={`mob-img-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "image" ? (
-                        <div key={`mob-f-${"pending"}`} className="file-mobile">
-                          <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                            <img key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "video" ? (
-                        <div key={`mob-f-${"pending"}`} className="file-mobile">
-                          <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                            <video controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "audio" ? (
-                        <div key={`mob-f-${"pending"}`} className="file-mobile">
-                          <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
-                            <audio controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : null
-                    ) : null}
-                    <blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
-                      {comment.content ? (
-                        <>
-                          <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} /> 
-                        </>
-                      ) : null}
-                    </blockquote>
                   </div>
                 </div>
-            </div>
-            <BottomBar selectedStyle={selectedStyle}>
-                <div id="bottombar-desktop">
-                  <hr />
-                </div>
-            </BottomBar>
-          </>
-        ) : (
-          <PostLoader />
-        )}
-      </BoardForm>
-    </Container>
+              </div>
+              <div className="thread-mobile" key="thread-mobile">
+                <hr />
+                <div className="op-container" key="op-container">
+                    <div key={`mob-po-${"pending"}`} className="post op">
+                      <div key={`mob-pi-${"pending"}`} className="post-info-mobile">
+                        <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
+                        <span className="name-block-mobile">
+                          {comment.author?.displayName
+                          ? comment.author?.displayName.length > 15
+                          ? <>
+                              <span key={`mob-n-${"pending"}`} className="name-mobile"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment.author?.displayName.slice(0, 15) + " (...)"}
+                              </span>
+                            </> 
+                            : <span key={`mob-n-${"pending"}`} className="name-mobile">
+                              {comment.author?.displayName}</span>
+                          : <span key={`mob-n-${"pending"}`} className="name-mobile">
+                            Anonymous</span>}
+                          &nbsp;
+                          <span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
+                            (u/
+                            <span key={`mob-ha-${"pending"}`} className="highlight-address-mobile">
+                              {comment.author?.address}
+                            </span>
+                            )&nbsp;
+                          </span>
+                          <br key={`mob-br1-${"pending"}`} />
+                          {comment.title ? (
+                              comment.title.length > 30 ?
+                              <>
+                                <span key={`mob-t-${"pending"}`} className="subject-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={comment.title}
+                                data-tooltip-place="top">
+                                  {comment.title.slice(0, 30) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-t-${"pending"}`} className="subject-mobile">
+                                {comment.title}
+                              </span>) : null}
+                        </span>
+                        <span key={`mob-dt-${"pending"}`} className="date-time-mobile">
+                          {getDate(comment?.timestamp)}
+                          &nbsp;
+                          <button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button>
+                          &nbsp;
+                          <span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                        </span>
+                      </div>
+                      {commentMediaInfo?.url ? (
+                        commentMediaInfo.type === "webpage" ? (
+                          <div key={`mob-f-${"pending"}`} className="file-mobile">
+                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
+                              <img key={`mob-img-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : commentMediaInfo.type === "image" ? (
+                          <div key={`mob-f-${"pending"}`} className="file-mobile">
+                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
+                              <img key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : commentMediaInfo.type === "video" ? (
+                          <div key={`mob-f-${"pending"}`} className="file-mobile">
+                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
+                              <video controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : commentMediaInfo.type === "audio" ? (
+                          <div key={`mob-f-${"pending"}`} className="file-mobile">
+                            <span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
+                              <audio controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : null
+                      ) : null}
+                      <blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
+                        {comment.content ? (
+                          <>
+                            <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} /> 
+                          </>
+                        ) : null}
+                      </blockquote>
+                    </div>
+                  </div>
+              </div>
+              <BottomBar selectedStyle={selectedStyle}>
+                  <div id="bottombar-desktop">
+                    <hr />
+                  </div>
+              </BottomBar>
+            </>
+          ) : (
+            <PostLoader />
+          )}
+        </BoardForm>
+      </Container>
+    </>
   );
 }
 
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 55c5d36d..e5877438 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
@@ -222,686 +223,697 @@ const Thread = () => {
 
 
   return (
-    <Container>
-      <ReplyModal 
-      selectedStyle={selectedStyle}
-      isOpen={isReplyOpen}
-      closeModal={() => setIsReplyOpen(false)} />
-      <SettingsModal
-      selectedStyle={selectedStyle}
-      isOpen={isSettingsOpen}
-      closeModal={() => setIsSettingsOpen(false)} />
-      <NavBar selectedStyle={selectedStyle}>
-        <>
-          {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList" key={`span-${subplebbit.address}`}>
+    <>
+      <Helmet>
+          <title>
+            {(
+              (comment.content.slice(0, 40)) + " - " 
+              + (selectedTitle ? selectedTitle : selectedAddress) 
+              + " - plebchan"
+            )}
+          </title>
+        </Helmet>
+      <Container>
+        <ReplyModal 
+        selectedStyle={selectedStyle}
+        isOpen={isReplyOpen}
+        closeModal={() => setIsReplyOpen(false)} />
+        <SettingsModal
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            {defaultSubplebbits.map(subplebbit => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                [
+                <Link key={`a-${subplebbit.address}`} 
+                to={`/p/${subplebbit.address}`} 
+                onClick={() => {
+                  setSelectedTitle(subplebbit.title);
+                  setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                ]&nbsp;
+              </span>
+            ))}
+            <span className="nav">
               [
-              <Link key={`a-${subplebbit.address}`} 
-              to={`/p/${subplebbit.address}`} 
-              onClick={() => {
-                setSelectedTitle(subplebbit.title);
-                setSelectedAddress(subplebbit.address);
-              }}
-              >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-              ]&nbsp;
+              <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              ]
+              [
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+              )}>Home</Link>
+              ]
             </span>
-          ))}
-          <span className="nav">
+            <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
+              <div className="board-select">
+                <strong>Board</strong>
+                &nbsp;
+                <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  {defaultSubplebbits.map(subplebbit => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                    ))}
+                </select>
+              </div>
+              <div className="page-jump">
+                <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                &nbsp;
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                  )}>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">{selectedTitle}</div>
+              <div className="board-address">p/{selectedAddress}</div>
+              </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
+          <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+            <div id="return-button-mobile">
+              <span className="btn-wrap">
+                <Link to={`/p/${selectedAddress}`}>Return</Link>
+              </span>
+            </div>
+            <div id="catalog-button-mobile">
+              <span className="btn-wrap">
+                <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+              </span>
+            </div>
+            <div id="bottom-button-mobile">
+              <span className="btn-wrap">
+                <a onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</a>
+              </span>
+            </div>
+            <div id="post-form-link-desktop">
+              [
+                <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+              ]
+            </div>
+            <div id="post-form-link-mobile">
+              <span className="btn-wrap">
+                <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+              </span>
+            </div>
+          </ReplyFormLink>
+          <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+            <tbody>
+              <tr data-type="Name">
+                <td id="td-name">Name</td>
+                <td>
+                  <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
+                </td>
+              </tr>
+              <tr data-type="Comment">
+                <td>Comment</td>
+                <td>
+                  <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+                </td>
+              </tr>
+              <tr data-type="File">
+                <td>Embed File</td>
+                <td>
+                  <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+                  <button id="t-help" type="button" onClick={
+                    () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")}
+                    data-tip="Help"
+                  >?</button>
+                </td>
+              </tr>
+            </tbody>
+          </PostFormTable>
+        </PostForm>
+        <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>
+          <span className="return-button" id="return-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-            ]
-            [
-            <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-            )}>Home</Link>
+            <Link to={`/p/${selectedAddress}`}>Return</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={selectedAddress} onChange={handleSelectChange}>
-                {defaultSubplebbits.map(subplebbit => (
-                    <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                    >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                  ))}
-              </select>
-            </div>
-            <div className="page-jump">
-              <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-              &nbsp;
-              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                )}>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">{selectedTitle}</div>
-            <div className="board-address">p/{selectedAddress}</div>
-            </>
-        </>
-      </Header>
-      <Break selectedStyle={selectedStyle} />
-      <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
-        <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          <div id="return-button-mobile">
-            <span className="btn-wrap">
-              <Link to={`/p/${selectedAddress}`}>Return</Link>
-            </span>
-          </div>
-          <div id="catalog-button-mobile">
-            <span className="btn-wrap">
-              <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-            </span>
-          </div>
-          <div id="bottom-button-mobile">
-            <span className="btn-wrap">
-              <a onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</a>
-            </span>
-          </div>
-          <div id="post-form-link-desktop">
+          <span className="return-button catalog-button" id="catalog-button-desktop">
             [
-              <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
-          </div>
-          <div id="post-form-link-mobile">
-            <span className="btn-wrap">
-              <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
-            </span>
-          </div>
-        </ReplyFormLink>
-        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
-          <tbody>
-            <tr data-type="Name">
-              <td id="td-name">Name</td>
-              <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
-                <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={handleSubmit} />
-              </td>
-            </tr>
-            <tr data-type="Comment">
-              <td>Comment</td>
-              <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
-              </td>
-            </tr>
-            <tr data-type="File">
-              <td>Embed File</td>
-              <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
-                <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")}
-                  data-tip="Help"
-                >?</button>
-              </td>
-            </tr>
-          </tbody>
-        </PostFormTable>
-      </PostForm>
-      <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>
-        <span className="return-button" id="return-button-desktop">
-          [
-          <Link to={`/p/${selectedAddress}`}>Return</Link>
-          ]
-        </span>
-        <span className="return-button catalog-button" id="catalog-button-desktop">
-          [
-          <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-          ]
-        </span>
-        <span className="return-button catalog-button" id="bottom-button-desktop">
-          [
-          <a onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
-          onMouseOver={(event) => event.target.style.cursor='pointer'} 
-          onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</a>
-          ]
-        </span>
-        {comment ? (
-          comment.replyCount !== undefined ? (
-            comment.replyCount > 0 ? (
-              comment.replyCount === 1 ? (
-                <span className="reply-stat">{comment.replyCount} reply</span>
+          </span>
+          <span className="return-button catalog-button" id="bottom-button-desktop">
+            [
+            <a onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
+            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+            onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</a>
+            ]
+          </span>
+          {comment ? (
+            comment.replyCount !== undefined ? (
+              comment.replyCount > 0 ? (
+                comment.replyCount === 1 ? (
+                  <span className="reply-stat">{comment.replyCount} reply</span>
+                ) : (
+                  <span className="reply-stat">{comment.replyCount} replies</span>
+                )
               ) : (
-                <span className="reply-stat">{comment.replyCount} replies</span>
+                <span className="reply-stat">No replies yet</span>
               )
             ) : (
-              <span className="reply-stat">No replies yet</span>
+              <span className="reply-stat">Fetching IPFS...</span>
             )
           ) : (
             <span className="reply-stat">Fetching IPFS...</span>
-          )
-        ) : (
-          <span className="reply-stat">Fetching IPFS...</span>
-        )}
-        <hr />
-      </TopBar>
-      <Tooltip id="tooltip" className="tooltip" />
-      <BoardForm selectedStyle={selectedStyle}>
-        {comment !== undefined ? (
-          <>
-            <div className="thread">
-              <div className="op-container">
-                <div className="post op op-desktop">
-                  <div className="post-info">
-                  {commentMediaInfo?.url ? (
-                      <div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
-                        <div key={`ft-${comment.cid}`} className="file-text">
-                          Link:&nbsp;
-                          <a key={`fa-${comment.cid}`} href={commentMediaInfo.url} target="_blank">{
-                          commentMediaInfo?.url.length > 30 ?
-                          commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                          commentMediaInfo?.url
-                          }</a>&nbsp;({commentMediaInfo?.type})
-                        </div>
-                        {commentMediaInfo?.type === "webpage" ? (
-                          <span key={`fta-${comment.cid}`} className="file-thumb">
-                            <img key={`fti-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "image" ? (
-                          <span key={`fta-${comment.cid}`} className="file-thumb">
-                            <img key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "video" ? (
-                          <span key={`fta-${comment.cid}`} className="file-thumb">
-                            <video controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                        {commentMediaInfo?.type === "audio" ? (
-                          <span key={`fta-${comment.cid}`} className="file-thumb">
-                            <audio controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          </span>
-                        ) : null}
-                      </div>
-                    ) : null}
-                    <span className="name-block">
-                        {comment.title ? (
-                          comment.title.length > 75 ?
-                          <>
-                            <span key={`q-${comment.cid}`} className="title"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.title}
-                            data-tooltip-place="top">
-                              {comment.title.slice(0, 75) + " (...)"}
-                            </span>
-                          </>
-                        : <span key={`q-${comment.cid}`} className="title">
-                          {comment.title}
-                          </span>) 
-                        : null}
-                      &nbsp;
-                      {comment.author?.displayName
-                        ? comment.author?.displayName.length > 20
-                        ? <>
-                            <span key={`n-${comment.cid}`} className="name"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.author?.displayName}
-                            data-tooltip-place="top">
-                              {comment.author?.displayName.slice(0, 20) + " (...)"}
-                            </span>
-                          </> 
-                          : <span key={`n-${comment.cid}`} className="name">
-                            {comment.author?.displayName}</span>
-                        : <span key={`n-${comment.cid}`} className="name">
-                          Anonymous</span>}
-                        &nbsp;
-                      &nbsp;
-                      <span className="poster-address address-desktop"
-                        id="reply-button" style={{cursor: "pointer"}}
-                        onClick={() => handleAddressClick(comment.author?.shortAddress)}>
-                        (u/
-                          <span key={`pa-${comment.cid}`} className="poster-address">
-                          {comment.author?.shortAddress}
-                        </span>)
-                      </span>
-                      &nbsp;
-                      <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
-                      &nbsp;
-                      <span className="post-number post-number-desktop">
-                        <Link to={() => {}} onClick={() => {}} title="Link to this post">c/</Link>
-                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
-                          setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
-                          }} title="Reply to this post">{comment.shortCid}</button>
-                      </span>&nbsp;&nbsp;
-                      <button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
-                      <div id="backlink-id" className="backlink">
-                        {comment?.replies?.pages?.topAll.comments
-                          .sort((a, b) => a.timestamp - b.timestamp)
-                          .map((reply) => (
-                            <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
-                            <Link to={() => {}} key={`ql-${reply.cid}`}
-                              className="quote-link" 
-                              onClick={(event) => handleQuoteClick(reply, null, event)}>
-                              c/{reply.shortCid}</Link>
-                              &nbsp;
-                            </div>
-                          ))
-                        }
-                      </div>
-                    </span>
-                    <blockquote key={`blockquote-${comment.cid}`}>
-                      <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
-                    </blockquote>
-                  </div>
-                </div>
-              </div>
-              {comment.replyCount === undefined ? <PostLoader /> : null}
-              {comment.replyCount > 0 && 
-              renderedComments.map((reply) => {
-                  const replyMediaInfo = getCommentMediaInfo(reply);
-                  const fallbackImgUrl = "/assets/filedeleted-res.gif";
-                  const shortParentCid = findShortParentCid(reply.parentCid, comment);
-                  return (
-                    <div key={`pc-${reply.cid}`} className="reply-container">
-                      <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
-                      <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
-                        <div key={`pi-${reply.cid}`} className="post-info">
-                        &nbsp;
-                          <span key={`nb-${reply.cid}`} className="nameblock">
-                          {reply.author?.displayName
-                          ? reply.author?.displayName.length > 20
-                          ? <>
-                              <span key={`mob-n-${reply.cid}`} className="name"
-                              data-tooltip-id="tooltip"
-                              data-tooltip-content={reply.author?.displayName}
-                              data-tooltip-place="top">
-                                {reply.author?.displayName.slice(0, 20) + " (...)"}
-                              </span>
-                            </>
-                            : <span key={`mob-n-${reply.cid}`} className="name">
-                              {reply.author?.displayName ?? reply.displayName}</span>
-                          : <span key={`mob-n-${reply.cid}`} className="name">
-                            Anonymous</span>}
-                            &nbsp;
-                            <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
-                              id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(reply.author?.shortAddress)}
-                            >
-                              (u/
-                              <span key={`mob-ha-${reply.cid}`}>
-                                {reply.author?.shortAddress ?? reply.author.address}
-                              </span>)
-                            </span>
-                          </span>
-                          &nbsp;
-                          <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
-                          &nbsp;
-                          <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
-                            <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                            <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => { 
-                              setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
-                              }} title="Reply to this post">{reply.shortCid ?? (
-                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
-                              )}</button>
-                          </span>&nbsp;
-                          <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
-                          <div id="backlink-id" className="backlink">
-                            {reply.replies?.pages?.topAll.comments
-                              .sort((a, b) => a.timestamp - b.timestamp)
-                              .map((reply) => (
-                                <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
-                                <Link to={() => {}} key={`ql-${reply.cid}`}
-                                  className="quote-link" 
-                                  onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
-                                  c/{reply.shortCid}</Link>
-                                  &nbsp;
-                                </div>
-                              ))
-                            }
+          )}
+          <hr />
+        </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
+        <BoardForm selectedStyle={selectedStyle}>
+          {comment !== undefined ? (
+            <>
+              <div className="thread">
+                <div className="op-container">
+                  <div className="post op op-desktop">
+                    <div className="post-info">
+                    {commentMediaInfo?.url ? (
+                        <div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
+                          <div key={`ft-${comment.cid}`} className="file-text">
+                            Link:&nbsp;
+                            <a key={`fa-${comment.cid}`} href={commentMediaInfo.url} target="_blank">{
+                            commentMediaInfo?.url.length > 30 ?
+                            commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                            commentMediaInfo?.url
+                            }</a>&nbsp;({commentMediaInfo?.type})
                           </div>
-                        </div>
-                        {replyMediaInfo?.url ? (
-                            <div key={`f-${reply.cid}`} className="file" 
-                            style={{marginBottom: "5px"}}>
-                              <div key={`ft-${reply.cid}`} className="reply-file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
-                                replyMediaInfo?.url.length > 30 ?
-                                replyMediaInfo?.url.slice(0, 30) + "(...)" :
-                                replyMediaInfo?.url
-                                }</a>&nbsp;({replyMediaInfo?.type})
-                              </div>
-                              {replyMediaInfo?.type === "webpage" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <img key={`fti-${reply.cid}`}
-                                  src={reply.thumbnailUrl} 
-                                  alt="thumbnail" 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "image" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <img key={`fti-${reply.cid}`}
-                                  src={replyMediaInfo.url} 
-                                  alt={replyMediaInfo.type} 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "video" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <video controls
-                                  key={`fti-${reply.cid}`} 
-                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                              {replyMediaInfo?.type === "audio" ? (
-                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
-                                  <audio controls 
-                                  key={`fti-${reply.cid}`}
-                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </span>
-                              ) : null}
-                            </div>
-                          ) : null}
-                        <blockquote key={`pm-${reply.cid}`} className="post-message">
-                          <Link to={() => {}} className="quote-link"
-                            onClick={(event) => {
-                              handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
-                            }}
-                          >
-                            {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
-                          </Link>
-                          <Post content={reply.content} comment={reply} key={`post-${reply.cid}`} />
-                        </blockquote>
-                      </div>
-                    </div>
-                  )
-                })
-              }
-            </div>
-            <div className="thread-mobile" key="thread-mobile">
-              <hr />
-              <div className="op-container" key="op-container">
-                  <div key={`mob-po-${comment.cid}`} className="post op op-mobile">
-                    <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
-                      <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
-                      <span className="name-block-mobile">
-                        {comment.author?.displayName
-                        ? comment.author?.displayName.length > 15
-                        ? <>
-                            <span key={`mob-n-${comment.cid}`} className="name-mobile"
-                            data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.author?.displayName}
-                            data-tooltip-place="top">
-                              {comment.author?.displayName.slice(0, 15) + " (...)"}
+                          {commentMediaInfo?.type === "webpage" ? (
+                            <span key={`fta-${comment.cid}`} className="file-thumb">
+                              <img key={`fti-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
-                          </> 
-                          : <span key={`mob-n-${comment.cid}`} className="name-mobile">
-                            {comment.author?.displayName}</span>
-                        : <span key={`mob-n-${comment.cid}`} className="name-mobile">
-                          Anonymous</span>}
-                        &nbsp;
-                        <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
-                          id="reply-button" style={{cursor: "pointer"}}
-                          onClick={() => handleAddressClick(comment.author?.shortAddress)}
-                        >
-                          (u/
-                          <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
-                            {comment.author?.shortAddress}
-                          </span>
-                          )&nbsp;
-                        </span>
-                        <br key={`mob-br1-${comment.cid}`} />
-                        {comment.title ? (
-                            comment.title.length > 30 ?
+                          ) : null}
+                          {commentMediaInfo?.type === "image" ? (
+                            <span key={`fta-${comment.cid}`} className="file-thumb">
+                              <img key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                          {commentMediaInfo?.type === "video" ? (
+                            <span key={`fta-${comment.cid}`} className="file-thumb">
+                              <video controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                          {commentMediaInfo?.type === "audio" ? (
+                            <span key={`fta-${comment.cid}`} className="file-thumb">
+                              <audio controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            </span>
+                          ) : null}
+                        </div>
+                      ) : null}
+                      <span className="name-block">
+                          {comment.title ? (
+                            comment.title.length > 75 ?
                             <>
-                              <span key={`mob-t-${comment.cid}`} className="subject-mobile"
+                              <span key={`q-${comment.cid}`} className="title"
                               data-tooltip-id="tooltip"
                               data-tooltip-content={comment.title}
                               data-tooltip-place="top">
-                                {comment.title.slice(0, 30) + " (...)"}
+                                {comment.title.slice(0, 75) + " (...)"}
                               </span>
                             </>
-                            : <span key={`mob-t-${comment.cid}`} className="subject-mobile">
-                              {comment.title}
-                            </span>) : null}
-                      </span>
-                      <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
-                        {getDate(comment?.timestamp)}
+                          : <span key={`q-${comment.cid}`} className="title">
+                            {comment.title}
+                            </span>) 
+                          : null}
                         &nbsp;
-                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
-                          setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
-                          }} title="Link to this post">c/</button>
-                        <Link to={() => {}} key={`mob-no2-${comment.cid}`} onClick={() => {}} title="Reply to this post">{comment.shortCid}</Link>
+                        {comment.author?.displayName
+                          ? comment.author?.displayName.length > 20
+                          ? <>
+                              <span key={`n-${comment.cid}`} className="name"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment.author?.displayName.slice(0, 20) + " (...)"}
+                              </span>
+                            </> 
+                            : <span key={`n-${comment.cid}`} className="name">
+                              {comment.author?.displayName}</span>
+                          : <span key={`n-${comment.cid}`} className="name">
+                            Anonymous</span>}
+                          &nbsp;
+                        &nbsp;
+                        <span className="poster-address address-desktop"
+                          id="reply-button" style={{cursor: "pointer"}}
+                          onClick={() => handleAddressClick(comment.author?.shortAddress)}>
+                          (u/
+                            <span key={`pa-${comment.cid}`} className="poster-address">
+                            {comment.author?.shortAddress}
+                          </span>)
+                        </span>
+                        &nbsp;
+                        <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
+                        &nbsp;
+                        <span className="post-number post-number-desktop">
+                          <Link to={() => {}} onClick={() => {}} title="Link to this post">c/</Link>
+                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
+                            setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
+                            }} title="Reply to this post">{comment.shortCid}</button>
+                        </span>&nbsp;&nbsp;
+                        <button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
+                        <div id="backlink-id" className="backlink">
+                          {comment?.replies?.pages?.topAll.comments
+                            .sort((a, b) => a.timestamp - b.timestamp)
+                            .map((reply) => (
+                              <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
+                              <Link to={() => {}} key={`ql-${reply.cid}`}
+                                className="quote-link" 
+                                onClick={(event) => handleQuoteClick(reply, null, event)}>
+                                c/{reply.shortCid}</Link>
+                                &nbsp;
+                              </div>
+                            ))
+                          }
+                        </div>
                       </span>
+                      <blockquote key={`blockquote-${comment.cid}`}>
+                        <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
+                      </blockquote>
                     </div>
-                    {commentMediaInfo?.url ? (
-                      commentMediaInfo.type === "webpage" ? (
-                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                            <img key={`mob-img-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "image" ? (
-                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                            <img key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "video" ? (
-                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                            <video controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : commentMediaInfo.type === "audio" ? (
-                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                            <audio controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                          </span>
-                        </div>
-                      ) : null
-                    ) : null}
-                    <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
-                      {comment.content ? (
-                        <>
-                          <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} /> 
-                        </>
-                      ) : null}
-                    </blockquote>
                   </div>
                 </div>
                 {comment.replyCount === undefined ? <PostLoader /> : null}
                 {comment.replyCount > 0 && 
-                  renderedComments.map((reply) => {
-                  const shortParentCid = findShortParentCid(reply.parentCid, comment);
-                  return (
-                  <div key={`mob-rc-${reply.cid}`} className="reply-container">
-                    <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
-                      <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
-                        <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
-                        <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
-                          {reply.author?.displayName
-                          ? reply.author?.displayName.length > 12
-                          ? <>
-                              <span key={`mob-n-${reply.cid}`} className="name-mobile"
-                              data-tooltip-id="tooltip"
-                              data-tooltip-content={reply.author?.displayName}
-                              data-tooltip-place="top">
-                                {reply.author?.displayName.slice(0, 12) + " (...)"}
+                renderedComments.map((reply) => {
+                    const replyMediaInfo = getCommentMediaInfo(reply);
+                    const fallbackImgUrl = "/assets/filedeleted-res.gif";
+                    const shortParentCid = findShortParentCid(reply.parentCid, comment);
+                    return (
+                      <div key={`pc-${reply.cid}`} className="reply-container">
+                        <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
+                        <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
+                          <div key={`pi-${reply.cid}`} className="post-info">
+                          &nbsp;
+                            <span key={`nb-${reply.cid}`} className="nameblock">
+                            {reply.author?.displayName
+                            ? reply.author?.displayName.length > 20
+                            ? <>
+                                <span key={`mob-n-${reply.cid}`} className="name"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={reply.author?.displayName}
+                                data-tooltip-place="top">
+                                  {reply.author?.displayName.slice(0, 20) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-n-${reply.cid}`} className="name">
+                                {reply.author?.displayName ?? reply.displayName}</span>
+                            : <span key={`mob-n-${reply.cid}`} className="name">
+                              Anonymous</span>}
+                              &nbsp;
+                              <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
+                                id="reply-button" style={{cursor: "pointer"}}
+                                onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                              >
+                                (u/
+                                <span key={`mob-ha-${reply.cid}`}>
+                                  {reply.author?.shortAddress ?? reply.author.address}
+                                </span>)
                               </span>
-                            </>
-                            : <span key={`mob-n-${reply.cid}`} className="name-mobile">
-                              {reply.author?.displayName}</span>
-                          : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                            </span>
+                            &nbsp;
+                            <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
+                            &nbsp;
+                            <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
+                              <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                              <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => { 
+                                setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
+                                }} title="Reply to this post">{reply.shortCid ?? (
+                                  <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                )}</button>
+                            </span>&nbsp;
+                            <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
+                            <div id="backlink-id" className="backlink">
+                              {reply.replies?.pages?.topAll.comments
+                                .sort((a, b) => a.timestamp - b.timestamp)
+                                .map((reply) => (
+                                  <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
+                                  <Link to={() => {}} key={`ql-${reply.cid}`}
+                                    className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                    c/{reply.shortCid}</Link>
+                                    &nbsp;
+                                  </div>
+                                ))
+                              }
+                            </div>
+                          </div>
+                          {replyMediaInfo?.url ? (
+                              <div key={`f-${reply.cid}`} className="file" 
+                              style={{marginBottom: "5px"}}>
+                                <div key={`ft-${reply.cid}`} className="reply-file-text">
+                                  Link:&nbsp;
+                                  <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
+                                  replyMediaInfo?.url.length > 30 ?
+                                  replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                                  replyMediaInfo?.url
+                                  }</a>&nbsp;({replyMediaInfo?.type})
+                                </div>
+                                {replyMediaInfo?.type === "webpage" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <img key={`fti-${reply.cid}`}
+                                    src={reply.thumbnailUrl} 
+                                    alt="thumbnail" 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "image" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <img key={`fti-${reply.cid}`}
+                                    src={replyMediaInfo.url} 
+                                    alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "video" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <video controls
+                                    key={`fti-${reply.cid}`} 
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                                {replyMediaInfo?.type === "audio" ? (
+                                  <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                    <audio controls 
+                                    key={`fti-${reply.cid}`}
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  </span>
+                                ) : null}
+                              </div>
+                            ) : null}
+                          <blockquote key={`pm-${reply.cid}`} className="post-message">
+                            <Link to={() => {}} className="quote-link"
+                              onClick={(event) => {
+                                handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
+                              }}
+                            >
+                              {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
+                            </Link>
+                            <Post content={reply.content} comment={reply} key={`post-${reply.cid}`} />
+                          </blockquote>
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+              <div className="thread-mobile" key="thread-mobile">
+                <hr />
+                <div className="op-container" key="op-container">
+                    <div key={`mob-po-${comment.cid}`} className="post op op-mobile">
+                      <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
+                        <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
+                        <span className="name-block-mobile">
+                          {comment.author?.displayName
+                          ? comment.author?.displayName.length > 15
+                          ? <>
+                              <span key={`mob-n-${comment.cid}`} className="name-mobile"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={comment.author?.displayName}
+                              data-tooltip-place="top">
+                                {comment.author?.displayName.slice(0, 15) + " (...)"}
+                              </span>
+                            </> 
+                            : <span key={`mob-n-${comment.cid}`} className="name-mobile">
+                              {comment.author?.displayName}</span>
+                          : <span key={`mob-n-${comment.cid}`} className="name-mobile">
                             Anonymous</span>}
                           &nbsp;
-                          <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                          <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
                             id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                            onClick={() => handleAddressClick(comment.author?.shortAddress)}
                           >
                             (u/
-                            <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
-                              {reply.author?.shortAddress}
+                            <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
+                              {comment.author?.shortAddress}
                             </span>
-                            )
+                            )&nbsp;
                           </span>
-                          <br key={`mob-br-${reply.cid}`} />
+                          <br key={`mob-br1-${comment.cid}`} />
+                          {comment.title ? (
+                              comment.title.length > 30 ?
+                              <>
+                                <span key={`mob-t-${comment.cid}`} className="subject-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={comment.title}
+                                data-tooltip-place="top">
+                                  {comment.title.slice(0, 30) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-t-${comment.cid}`} className="subject-mobile">
+                                {comment.title}
+                              </span>) : null}
                         </span>
-                        <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
-                          {getDate(reply?.timestamp)}&nbsp;
-                          <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
-                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => {
-                            setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
-                            }} title="Reply to this post">{reply.shortCid}</button>
+                        <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
+                          {getDate(comment?.timestamp)}
+                          &nbsp;
+                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
+                            setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
+                            }} title="Link to this post">c/</button>
+                          <Link to={() => {}} key={`mob-no2-${comment.cid}`} onClick={() => {}} title="Reply to this post">{comment.shortCid}</Link>
                         </span>
                       </div>
-                      <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
-                        <Link to={() => {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" 
-                        onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
-                          {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
-                        </Link>
-                        <Post content={reply.content} comment={reply} key={`post-mobile-${reply.cid}`} />
-                      </blockquote>
-                      {reply.replyCount > 0 ? (
-                        <div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'>
-                        {reply.replies?.pages?.topAll.comments
-                        .sort((a, b) => a.timestamp - b.timestamp)
-                        .map((reply) => (
-                          <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
-                          <Link key={`ql-${reply.cid}`}
-                          to={() => {}} className="quote-link" 
-                          onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
-                            c/{reply.shortCid}</Link>
-                            &nbsp;
+                      {commentMediaInfo?.url ? (
+                        commentMediaInfo.type === "webpage" ? (
+                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                              <img key={`mob-img-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
                           </div>
-                        ))}
-                        </div>
+                        ) : commentMediaInfo.type === "image" ? (
+                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                              <img key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : commentMediaInfo.type === "video" ? (
+                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                              <video controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : commentMediaInfo.type === "audio" ? (
+                          <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                            <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                              <audio controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : null
                       ) : null}
+                      <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
+                        {comment.content ? (
+                          <>
+                            <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} /> 
+                          </>
+                        ) : null}
+                      </blockquote>
                     </div>
                   </div>
-                  )
-                })
-              }
-            </div>
-            <BottomBar selectedStyle={selectedStyle}>
-                <div id="bottombar-desktop">
-                  <hr />
-                  <span className="bottom-bar-return">
-                    [
-                    <Link to={`/p/${selectedAddress}`}>Return</Link>
-                    ]
-                  </span>
-                  <span className="bottom-bar-catalog">
-                    [
-                    <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-                    ]
-                  </span>
-                  <span className="bottom-bar-top">
-                    [
-                    <a onClick={() => window.scrollTo(0, 0)} 
-                    onMouseOver={(event) => event.target.style.cursor='pointer'} 
-                    onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
-                    ]
-                  </span>
-                  <span className="quickreply-button">
-                  [
-                  <Link to={() => {}} onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
-                  ]
-                  </span>
-                  {comment.replyCount > 0 ? (
-                    <span className="reply-stat">{comment.replyCount} replies</span>
-                  ) : (
-                    <span className="reply-stat">No replies yet</span>
-                  )}
-                  <hr />
-                </div>
-              </BottomBar>
-            <div id="bottombar-mobile">
-              <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>
-                {comment ? (
-                  comment.replyCount !== undefined ? (
-                    comment.replyCount > 0 ? (
-                      comment.replyCount === 1 ? (
-                        <span className="reply-stat">{comment.replyCount} reply</span>
-                      ) : (
-                        <span className="reply-stat">{comment.replyCount} replies</span>
-                      )
-                    ) : (
-                      <span className="reply-stat">No replies yet</span>
+                  {comment.replyCount === undefined ? <PostLoader /> : null}
+                  {comment.replyCount > 0 && 
+                    renderedComments.map((reply) => {
+                    const shortParentCid = findShortParentCid(reply.parentCid, comment);
+                    return (
+                    <div key={`mob-rc-${reply.cid}`} className="reply-container">
+                      <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
+                        <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
+                          <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                          <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
+                            {reply.author?.displayName
+                            ? reply.author?.displayName.length > 12
+                            ? <>
+                                <span key={`mob-n-${reply.cid}`} className="name-mobile"
+                                data-tooltip-id="tooltip"
+                                data-tooltip-content={reply.author?.displayName}
+                                data-tooltip-place="top">
+                                  {reply.author?.displayName.slice(0, 12) + " (...)"}
+                                </span>
+                              </>
+                              : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                                {reply.author?.displayName}</span>
+                            : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                              Anonymous</span>}
+                            &nbsp;
+                            <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                              id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                            >
+                              (u/
+                              <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
+                                {reply.author?.shortAddress}
+                              </span>
+                              )
+                            </span>
+                            <br key={`mob-br-${reply.cid}`} />
+                          </span>
+                          <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
+                            {getDate(reply?.timestamp)}&nbsp;
+                            <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
+                            <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => {
+                              setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
+                              }} title="Reply to this post">{reply.shortCid}</button>
+                          </span>
+                        </div>
+                        <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
+                          <Link to={() => {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" 
+                          onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
+                            {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
+                          </Link>
+                          <Post content={reply.content} comment={reply} key={`post-mobile-${reply.cid}`} />
+                        </blockquote>
+                        {reply.replyCount > 0 ? (
+                          <div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'>
+                          {reply.replies?.pages?.topAll.comments
+                          .sort((a, b) => a.timestamp - b.timestamp)
+                          .map((reply) => (
+                            <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
+                            <Link key={`ql-${reply.cid}`}
+                            to={() => {}} className="quote-link" 
+                            onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                              c/{reply.shortCid}</Link>
+                              &nbsp;
+                            </div>
+                          ))}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
                     )
-                  ) : (
-                    <span className="reply-stat">Loading...</span>
-                  )
-                ) : (
-                  null
-                )}
-                <hr />
-              </TopBar>
-              <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} >
-                <div id="post-form-link-mobile" className="post-button-mobile">
-                  <span className="btn-wrap">
-                    <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
-                  </span>
-                </div>
-                <div id="btns-container">
-                  <div id="return-button-mobile">
-                    <span className="btn-wrap">
+                  })
+                }
+              </div>
+              <BottomBar selectedStyle={selectedStyle}>
+                  <div id="bottombar-desktop">
+                    <hr />
+                    <span className="bottom-bar-return">
+                      [
                       <Link to={`/p/${selectedAddress}`}>Return</Link>
+                      ]
                     </span>
-                  </div>
-                  <div id="catalog-button-mobile">
-                    <span className="btn-wrap">
+                    <span className="bottom-bar-catalog">
+                      [
                       <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+                      ]
                     </span>
-                  </div>
-                  <span className="bottom-bar-top">
-                    <span className="btn-wrap">
+                    <span className="bottom-bar-top">
+                      [
                       <a onClick={() => window.scrollTo(0, 0)} 
                       onMouseOver={(event) => event.target.style.cursor='pointer'} 
                       onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
+                      ]
                     </span>
+                    <span className="quickreply-button">
+                    [
+                    <Link to={() => {}} onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
+                    ]
+                    </span>
+                    {comment.replyCount > 0 ? (
+                      <span className="reply-stat">{comment.replyCount} replies</span>
+                    ) : (
+                      <span className="reply-stat">No replies yet</span>
+                    )}
+                    <hr />
+                  </div>
+                </BottomBar>
+              <div id="bottombar-mobile">
+                <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>
-              </ReplyFormLink>
-            </div>
-          </>
-        ) : (
-          <PostLoader />
-        )}
-      </BoardForm>
-    </Container>
+                  {comment ? (
+                    comment.replyCount !== undefined ? (
+                      comment.replyCount > 0 ? (
+                        comment.replyCount === 1 ? (
+                          <span className="reply-stat">{comment.replyCount} reply</span>
+                        ) : (
+                          <span className="reply-stat">{comment.replyCount} replies</span>
+                        )
+                      ) : (
+                        <span className="reply-stat">No replies yet</span>
+                      )
+                    ) : (
+                      <span className="reply-stat">Loading...</span>
+                    )
+                  ) : (
+                    null
+                  )}
+                  <hr />
+                </TopBar>
+                <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} >
+                  <div id="post-form-link-mobile" className="post-button-mobile">
+                    <span className="btn-wrap">
+                      <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+                    </span>
+                  </div>
+                  <div id="btns-container">
+                    <div id="return-button-mobile">
+                      <span className="btn-wrap">
+                        <Link to={`/p/${selectedAddress}`}>Return</Link>
+                      </span>
+                    </div>
+                    <div id="catalog-button-mobile">
+                      <span className="btn-wrap">
+                        <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+                      </span>
+                    </div>
+                    <span className="bottom-bar-top">
+                      <span className="btn-wrap">
+                        <a onClick={() => window.scrollTo(0, 0)} 
+                        onMouseOver={(event) => event.target.style.cursor='pointer'} 
+                        onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
+                      </span>
+                    </span>
+                  </div>
+                </ReplyFormLink>
+              </div>
+            </>
+          ) : (
+            <PostLoader />
+          )}
+        </BoardForm>
+      </Container>
+    </>
   );
 }