diff --git a/src/components/modals/AdminListModal.jsx b/src/components/modals/AdminListModal.jsx
index 1b598878..cf5518f4 100644
--- a/src/components/modals/AdminListModal.jsx
+++ b/src/components/modals/AdminListModal.jsx
@@ -3,23 +3,15 @@ import Modal from 'react-modal';
 import Draggable from 'react-draggable';
 import { StyledModal } from '../styled/modals/ReplyModal.styled';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { BoardForm } from '../styled/views/Board.styled'
+import { BoardForm } from '../styled/views/Board.styled';
 import { Link } from 'react-router-dom';
 
-
-
 const AdminListModal = ({ isOpen, closeModal, roles }) => {
-  const {
-    selectedAddress,
-    selectedStyle,
-    selectedTitle,
-  } = useGeneralStore(state => state);
+  const { selectedStyle } = useGeneralStore((state) => state);
 
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
   const nodeRef = useRef(null);
-  const rolesList = roles 
-    ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) 
-    : [];
+  const rolesList = roles ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) : [];
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);
@@ -30,45 +22,53 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
       window.removeEventListener('resize', handleResize);
     };
   }, [setIsMobile]);
-  
 
   return (
     <StyledModal
-    isOpen={isOpen}
-    onRequestClose={closeModal}
-    contentLabel="Reply Modal"
-    shouldCloseOnEsc={true}
-    shouldCloseOnOverlayClick={isMobile}
-    selectedStyle={selectedStyle}
-    overlayClassName="overlay"
-    style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})
-    }
-  >
-      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
-        <div className="modal-content" ref={nodeRef} 
-        style={{
-          maxWidth: '300px',
-          maxHeight: '250px',
-        }}>
-          <div className="modal-header">
-            Admins for {selectedTitle ?? selectedAddress}
-            <button className="icon" onClick={() => closeModal()} title="close" />
-          </div>
-          <div className='list' style={{
-            padding: '10px',
-            maxHeight: '200px',
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      contentLabel='Reply Modal'
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={isMobile}
+      selectedStyle={selectedStyle}
+      overlayClassName='overlay'
+      style={isMobile ? { overlay: { backgroundColor: 'rgba(0,0,0,.25)' } } : { overlay: { backgroundColor: 'rgba(0,0,0,0)' } }}
+    >
+      <Draggable handle='.modal-header' nodeRef={nodeRef} disabled={isMobile}>
+        <div
+          className='modal-content'
+          ref={nodeRef}
+          style={{
             maxWidth: '300px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            wordWrap: 'break-word',
-            wordBreak: 'break-all',
-          }}>
-            <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
-            {rolesList.map(({ address, role }, index) => (
-              <p key={index}>
-                  • <Link to={() => {}} className="quote-link">u/{address}</Link>: {role}
-              </p>
-            ))}
+            maxHeight: '250px',
+          }}
+        >
+          <button className='icon' onClick={() => closeModal()} title='close' />
+          <div className='modal-header' style={{ margin: '10px 10px 0px 10px' }}>
+            Moderators
+          </div>
+          <div
+            className='list'
+            style={{
+              padding: '10px',
+              maxHeight: '200px',
+              maxWidth: '300px',
+              overflowY: 'auto',
+              overflowX: 'hidden',
+              wordWrap: 'break-word',
+              wordBreak: 'break-all',
+            }}
+          >
+            <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
+              {rolesList.map(({ address, role }, index) => (
+                <p key={index}>
+                  •{' '}
+                  <Link to={() => {}} className='quote-link'>
+                    u/{address}
+                  </Link>
+                  : {role}
+                </p>
+              ))}
             </BoardForm>
           </div>
         </div>
@@ -79,4 +79,4 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
 
 Modal.setAppElement('#root');
 
-export default AdminListModal;
\ No newline at end of file
+export default AdminListModal;
diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 74c1a05e..c6006627 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -15,7 +15,8 @@ export const Container = styled.div`
 
 export const NavBar = styled.div`
   @media (min-width: 480px) {
-    .board-select, .page-jump {
+    .board-select,
+    .page-jump {
       display: none;
     }
 
@@ -33,7 +34,8 @@ export const NavBar = styled.div`
   }
 
   @media (max-width: 480px) {
-    .boardList, .nav {
+    .boardList,
+    .nav {
       display: none;
     }
 
@@ -81,9 +83,9 @@ export const NavBar = styled.div`
   }
 
   ${({ selectedStyle }) => {
-  switch (selectedStyle) {
-    case 'Yotsuba':
-      return `font-size: 9pt;
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `font-size: 9pt;
       color: #b86;
       
       a, #button-span {
@@ -110,8 +112,8 @@ export const NavBar = styled.div`
         color: navy;
       }`;
 
-    case 'Yotsuba-B':
-      return `font-size: 9pt;
+      case 'Yotsuba-B':
+        return `font-size: 9pt;
       color: #89a;
       
       a, #button-span {
@@ -220,11 +222,12 @@ export const NavBar = styled.div`
           background-color: #ddd;
           border-bottom: 2px solid #ccc;
         }`;
-        
-        default:
-          return '';
-      }
-  }}`;
+
+      default:
+        return '';
+    }
+  }}
+`;
 
 export const Header = styled.div`
   ${({ selectedStyle }) => {
@@ -418,10 +421,10 @@ export const Header = styled.div`
           margin-top: 5px;
           font-size: 9pt;
         }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 
   .offline {
@@ -463,16 +466,16 @@ export const Break = styled.hr`
         border: none;
         border-top: 1px solid #ddd;
         height: 0;`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 `;
 
 export const PostFormLink = styled.div`
   @media (min-width: 480px) {
-    display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+    display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
 
     #post-form-link-mobile {
       display: none;
@@ -480,7 +483,7 @@ export const PostFormLink = styled.div`
   }
 
   @media (max-width: 480px) {
-    display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+    display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
     line-height: 30px;
 
     #post-form-link-desktop {
@@ -488,11 +491,11 @@ export const PostFormLink = styled.div`
     }
 
     #post-form-link-mobile {
-        margin: 11px 0;
-        font-size: 10pt;
-        text-align: center;
-        font-weight: 700;
-        display: block !important;
+      margin: 11px 0;
+      font-size: 10pt;
+      text-align: center;
+      font-weight: 700;
+      display: block !important;
     }
   }
 
@@ -620,15 +623,15 @@ export const PostFormLink = styled.div`
           color: #333 !important;
           white-space: nowrap;
         }`;
-        
-        default:
-          return '';
-      }
-    }}
+
+      default:
+        return '';
+    }
+  }}
 `;
 
 export const PostFormTable = styled.table`
-  display: ${props => (props.showPostForm ? 'table' : 'none')};
+  display: ${(props) => (props.showPostForm ? 'table' : 'none')};
   width: 418px;
   border-spacing: 1px;
   margin-left: auto;
@@ -1145,15 +1148,15 @@ export const PostFormTable = styled.table`
           width: 100%
         }
       }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 
   #t-help {
     margin: 0;
-    margin-top: -5px
+    margin-top: -5px;
   }
 `;
 
@@ -1249,10 +1252,10 @@ export const PostForm = styled.div`
       a:hover {
         color: #ff3300;
       }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 `;
 
@@ -1396,10 +1399,10 @@ export const TopBar = styled.div`
         a:hover, #subscribe:hover {
           color: #ff3300 !important;
         }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 
   .ellipsis {
@@ -1407,10 +1410,10 @@ export const TopBar = styled.div`
   }
 
   .ellipsis:after {
-    content: "\\2026";
+    content: '\\2026';
     position: absolute;
-    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-    animation: ellipsis steps(4,end) 1500ms infinite;
+    -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+    animation: ellipsis steps(4, end) 1500ms infinite;
     width: 0px;
     overflow: hidden;
   }
@@ -1441,7 +1444,7 @@ export const TopBar = styled.div`
       max-width: calc(100vw - 50vw);
       word-wrap: break-word;
       white-space: nowrap;
-      text-overflow: "";
+      text-overflow: '';
       overflow: hidden;
     }
 
@@ -1450,10 +1453,10 @@ export const TopBar = styled.div`
     }
 
     .ellipsis-all:after {
-      content: "\\2026";
+      content: '\\2026';
       position: absolute;
-      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-      animation: ellipsis steps(4,end) 1500ms infinite;
+      -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+      animation: ellipsis steps(4, end) 1500ms infinite;
       width: 0px;
       overflow: hidden;
     }
@@ -1494,7 +1497,7 @@ export const TopBar = styled.div`
       max-width: 90vw;
       word-wrap: break-word;
       white-space: nowrap;
-      text-overflow: "";
+      text-overflow: '';
       overflow: hidden;
     }
 
@@ -1503,10 +1506,10 @@ export const TopBar = styled.div`
     }
 
     .ellipsis-all:after {
-      content: "\\2026";
+      content: '\\2026';
       position: absolute;
-      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-      animation: ellipsis steps(4,end) 1500ms infinite;
+      -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+      animation: ellipsis steps(4, end) 1500ms infinite;
       width: 0px;
       overflow: hidden;
     }
@@ -1683,11 +1686,11 @@ export const TopBar = styled.div`
           color: #333 !important;
           white-space: nowrap;
         }`;
-        
-        default:
-          return '';
-      }
-    }}
+
+      default:
+        return '';
+    }
+  }}
 `;
 
 export const BoardForm = styled.div`
@@ -1695,11 +1698,15 @@ export const BoardForm = styled.div`
     margin-right: 14px;
   }
 
+  .capcode-admin {
+    color: red !important;
+  }
+
   .ellipsis:after {
-    content: "\\2026";
+    content: '\\2026';
     position: absolute;
-    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-    animation: ellipsis steps(4,end) 1500ms infinite;
+    -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+    animation: ellipsis steps(4, end) 1500ms infinite;
     width: 0px;
     overflow: hidden;
   }
@@ -1793,9 +1800,9 @@ export const BoardForm = styled.div`
     }
 
     ${({ selectedStyle }) => {
-    switch (selectedStyle) {
-      case 'Yotsuba':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+      switch (selectedStyle) {
+        case 'Yotsuba':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
         border: 1px solid #d99f91 !important;
         border-left: none !important;
@@ -1821,8 +1828,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Yotsuba-B':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Yotsuba-B':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
@@ -1848,8 +1855,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Futaba':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Futaba':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
       }
 
@@ -1872,8 +1879,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Burichan':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Burichan':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
       }
 
@@ -1896,8 +1903,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Tomorrow':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Tomorrow':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #1d1d21 !important;
         outline: 1px solid #111 !important;
       }
@@ -1920,8 +1927,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Photon':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Photon':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #ccc !important;
         outline: 1px solid #ccc !important;
       }
@@ -1944,25 +1951,24 @@ export const BoardForm = styled.div`
         }
       }`;
 
-        
         default:
           return '';
       }
     }}
   }
-  
+
   .file {
     display: block;
-    
+
     .file-text {
       max-width: 600px;
       white-space: nowrap;
     }
-  
+
     .fileText a {
       text-decoration: underline;
     }
-  
+
     .file-thumb {
       float: left;
       margin: 3px 20px 5px 20px;
@@ -2028,7 +2034,7 @@ export const BoardForm = styled.div`
         margin: 4px 0;
         overflow: hidden;
       }
-  
+
       .post-info-mobile {
         overflow: hidden;
         padding: 5px;
@@ -2036,7 +2042,7 @@ export const BoardForm = styled.div`
         display: block;
         clear: left;
       }
-  
+
       .post-menu-button-mobile {
         line-height: 1em !important;
         width: 1em !important;
@@ -2047,14 +2053,14 @@ export const BoardForm = styled.div`
         float: left !important;
         font-weight: 700 !important;
         opacity: 1 !important;
-        height: .5em !important;
+        height: 0.5em !important;
         font-size: 16px !important;
       }
-  
+
       .name-block-mobile {
         clear: none;
         float: left;
-  
+
         .subject-mobile {
           display: block;
         }
@@ -2064,7 +2070,7 @@ export const BoardForm = styled.div`
         float: right;
         text-align: right;
       }
-  
+
       .file-mobile {
         display: block;
 
@@ -2099,7 +2105,7 @@ export const BoardForm = styled.div`
       #video-thumbnail-mobile {
         width: 100px;
       }
-  
+
       img {
         border: none;
         float: left;
@@ -2108,13 +2114,13 @@ export const BoardForm = styled.div`
         object-fit: scale-down;
         margin: 0;
       }
-  
+
       blockquote {
         padding-top: 5px;
         display: block;
         margin: 10px !important;
       }
-  
+
       .post-link-mobile {
         clear: both !important;
         padding: 5px;
@@ -2122,12 +2128,12 @@ export const BoardForm = styled.div`
         margin: -5px;
         display: block !important;
       }
-  
+
       .info-mobile {
         margin-top: 8px;
         float: left;
       }
-  
+
       .button-mobile {
         float: right;
         border-radius: 3px;
@@ -2164,7 +2170,7 @@ export const BoardForm = styled.div`
 
       .file-mobile {
         display: block;
-  
+
         .file-thumb-mobile {
           margin-left: 10px !important;
           margin-right: 10px !important;
@@ -2173,7 +2179,7 @@ export const BoardForm = styled.div`
           margin-bottom: 5px;
           margin-top: 15px;
         }
-  
+
         .file-info-mobile {
           padding-top: 5px;
           text-align: center;
@@ -2186,7 +2192,7 @@ export const BoardForm = styled.div`
       video {
         max-width: 100px;
       }
-  
+
       img {
         border: none;
         float: left;
@@ -2207,12 +2213,12 @@ export const BoardForm = styled.div`
           width: 1em !important;
           text-align: center !important;
           outline: none !important;
-          transform: rotate(90deg)!important;
+          transform: rotate(90deg) !important;
           margin: 4px -5px 0 4px !important;
           float: left !important;
           font-weight: 700 !important;
           opacity: 1 !important;
-          height: .5em !important;
+          height: 0.5em !important;
           font-size: 16px !important;
         }
 
@@ -2225,7 +2231,8 @@ export const BoardForm = styled.div`
           float: right;
           text-align: right;
 
-          a, #reply-button {
+          a,
+          #reply-button {
             text-decoration: none;
           }
         }
@@ -2236,7 +2243,6 @@ export const BoardForm = styled.div`
         margin: 10px !important;
       }
     }
-
   }
 
   ${({ selectedStyle }) => {
@@ -3283,10 +3289,10 @@ export const BoardForm = styled.div`
         border-top: 1px solid #ddd;
         height: 0;
       }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 
   @media (max-width: 480px) {
@@ -3309,7 +3315,7 @@ export const BoardForm = styled.div`
       margin-left: calc((100% - 100vw) / 2);
       margin-right: calc((100% - 100vw) / 2);
     }
-    
+
     .name-block {
       display: block;
     }
@@ -3355,7 +3361,7 @@ export const BoardForm = styled.div`
           return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #ccc !important;
         }`;
-        
+
         default:
           return '';
       }
@@ -4078,7 +4084,7 @@ export const BoardForm = styled.div`
               }
             }
           }`;
-        
+
         default:
           return '';
       }
@@ -4090,15 +4096,14 @@ export const PostMenu = styled.div`
   display: inline-block;
   cursor: pointer;
   transition: transform 0.1s;
-  transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
+  transform: ${(props) => (props.rotated ? 'rotate(90deg)' : 'none')};
 `;
 
 export const PostMenuMobile = styled.div`
-    font-size: 16px;
-    line-height: 2.5em;
-    width: 216px;
+  font-size: 16px;
+  line-height: 2.5em;
+  width: 216px;
 
-    
   ul {
     border-right-width: 2px !important;
     list-style: none;
@@ -4115,9 +4120,9 @@ export const PostMenuMobile = styled.div`
   }
 
   ${({ selectedStyle }) => {
-      switch (selectedStyle) {
-        case 'Yotsuba':
-          return `
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
           ul {
             border: 1px solid #d9bfb7;
           }
@@ -4133,8 +4138,8 @@ export const PostMenuMobile = styled.div`
           }
           `;
 
-        case 'Yotsuba-B':
-          return `
+      case 'Yotsuba-B':
+        return `
           ul {
             border: 1px solid #b7c5d9;
           }
@@ -4150,8 +4155,8 @@ export const PostMenuMobile = styled.div`
           }
           `;
 
-        case 'Futaba':
-          return `
+      case 'Futaba':
+        return `
           ul {
             border: 1px solid #d9bfb7;
           }
@@ -4167,8 +4172,8 @@ export const PostMenuMobile = styled.div`
           }
           `;
 
-        case 'Burichan':
-          return `
+      case 'Burichan':
+        return `
           ul {
             border: 1px solid #b7c5d9;
           }
@@ -4184,8 +4189,8 @@ export const PostMenuMobile = styled.div`
           }
           `;
 
-        case 'Tomorrow':
-          return `
+      case 'Tomorrow':
+        return `
           ul {
             border: 1px solid #282a2e;
           }
@@ -4200,8 +4205,8 @@ export const PostMenuMobile = styled.div`
           }
           `;
 
-        case 'Photon':
-          return `
+      case 'Photon':
+        return `
           ul {
             border: 1px solid #ccc;
           }
@@ -4215,9 +4220,9 @@ export const PostMenuMobile = styled.div`
             }
           }
           `;
-        
-        default:
-          return '';
-      }}
+
+      default:
+        return '';
     }
-`;
\ No newline at end of file
+  }}
+`;
diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx
index 7b3e54af..184533df 100644
--- a/src/components/styled/views/Thread.styled.jsx
+++ b/src/components/styled/views/Thread.styled.jsx
@@ -2,15 +2,17 @@ import styled from 'styled-components';
 
 export const ReplyFormLink = styled.div`
   @media (min-width: 480px) {
-    display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
+    display: ${(props) => (props.showReplyFormLink ? 'block' : 'none')};
 
-    #post-form-link-mobile, #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile {
+    #post-form-link-mobile,
+    #return-button-mobile,
+    #catalog-button-mobile,
+    #bottom-button-mobile {
       display: none;
     }
   }
 
   @media (max-width: 480px) {
-
     #post-form-link-desktop {
       display: none;
     }
@@ -24,7 +26,10 @@ export const ReplyFormLink = styled.div`
       padding-top: 10px;
     }
 
-    #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile, #bottom-bar-top {
+    #return-button-mobile,
+    #catalog-button-mobile,
+    #bottom-button-mobile,
+    #bottom-bar-top {
       font-size: 10pt;
       display: inline-block;
       margin: 0 2px;
@@ -164,11 +169,11 @@ export const ReplyFormLink = styled.div`
           color: #333 !important;
           white-space: nowrap;
         }`;
-      
+
       default:
         return '';
-      }
-    }}
+    }
+  }}
 `;
 
 export const TopBar = styled.div`
@@ -186,7 +191,7 @@ export const TopBar = styled.div`
       max-width: calc(100vw - 50vw);
       word-wrap: break-word;
       white-space: nowrap;
-      text-overflow: "";
+      text-overflow: '';
       overflow: hidden;
     }
 
@@ -195,10 +200,10 @@ export const TopBar = styled.div`
     }
 
     .ellipsis-all:after {
-      content: "\\2026";
+      content: '\\2026';
       position: absolute;
-      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-      animation: ellipsis steps(4,end) 1500ms infinite;
+      -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+      animation: ellipsis steps(4, end) 1500ms infinite;
       width: 0px;
       overflow: hidden;
     }
@@ -223,7 +228,7 @@ export const TopBar = styled.div`
   }
 
   @media (max-width: 480px) {
-    .stats-all-catalog-container  {
+    .stats-all-catalog-container {
       height: 25px;
       position: absolute;
       text-align: left;
@@ -237,7 +242,7 @@ export const TopBar = styled.div`
       max-width: 90vw;
       word-wrap: break-word;
       white-space: nowrap;
-      text-overflow: "";
+      text-overflow: '';
       overflow: hidden;
     }
 
@@ -246,17 +251,19 @@ export const TopBar = styled.div`
     }
 
     .ellipsis-all:after {
-      content: "\\2026";
+      content: '\\2026';
       position: absolute;
-      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-      animation: ellipsis steps(4,end) 1500ms infinite;
+      -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+      animation: ellipsis steps(4, end) 1500ms infinite;
       width: 0px;
       overflow: hidden;
     }
-    
+
     line-height: 30px;
-    
-    #return-button-desktop, #catalog-button-desktop, #bottom-button-desktop {
+
+    #return-button-desktop,
+    #catalog-button-desktop,
+    #bottom-button-desktop {
       display: none;
     }
 
@@ -293,10 +300,10 @@ export const TopBar = styled.div`
   }
 
   .ellipsis:after {
-    content: "\\2026";
+    content: '\\2026';
     position: absolute;
-    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-    animation: ellipsis steps(4,end) 1500ms infinite;
+    -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+    animation: ellipsis steps(4, end) 1500ms infinite;
     width: 0px;
     overflow: hidden;
   }
@@ -317,7 +324,7 @@ export const TopBar = styled.div`
     display: inline-block;
   }
 
-  .reply-stat { 
+  .reply-stat {
     position: relative;
     float: right;
     margin-right: 5px;
@@ -696,11 +703,11 @@ export const TopBar = styled.div`
           color: #333 !important;
           white-space: nowrap;
         }`;
-        
-        default:
-          return '';
-      }
-    }}
+
+      default:
+        return '';
+    }
+  }}
 `;
 
 export const BottomBar = styled.div`
@@ -709,10 +716,10 @@ export const BottomBar = styled.div`
   }
 
   .ellipsis:after {
-    content: "\\2026";
+    content: '\\2026';
     position: absolute;
-    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-    animation: ellipsis steps(4,end) 1500ms infinite;
+    -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+    animation: ellipsis steps(4, end) 1500ms infinite;
     width: 0px;
     overflow: hidden;
   }
@@ -729,7 +736,7 @@ export const BottomBar = styled.div`
     }
   }
 
-  .reply-stat { 
+  .reply-stat {
     position: relative;
     float: right;
     margin-right: 5px;
@@ -899,11 +906,15 @@ export const BoardForm = styled.div`
     margin-right: 14px;
   }
 
+  .capcode-admin {
+    color: red !important;
+  }
+
   .ellipsis:after {
-    content: "\\2026";
+    content: '\\2026';
     position: absolute;
-    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
-    animation: ellipsis steps(4,end) 1500ms infinite;
+    -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+    animation: ellipsis steps(4, end) 1500ms infinite;
     width: 0px;
     overflow: hidden;
   }
@@ -982,9 +993,9 @@ export const BoardForm = styled.div`
     }
 
     ${({ selectedStyle }) => {
-    switch (selectedStyle) {
-      case 'Yotsuba':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+      switch (selectedStyle) {
+        case 'Yotsuba':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
         border: 1px solid #d99f91 !important;
         border-left: none !important;
@@ -1008,8 +1019,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Yotsuba-B':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Yotsuba-B':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
@@ -1032,8 +1043,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Futaba':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Futaba':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
       }
       
@@ -1055,8 +1066,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Burichan':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Burichan':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
       }
       
@@ -1078,8 +1089,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Tomorrow':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Tomorrow':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #1d1d21 !important;
         outline: 1px solid #111 !important;
       }
@@ -1100,8 +1111,8 @@ export const BoardForm = styled.div`
         }
       }`;
 
-      case 'Photon':
-        return `.highlighted, .highlighted-click, .highlighted-address {
+        case 'Photon':
+          return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #ccc !important;
         outline: 1px solid #ccc !important;
       }
@@ -1127,19 +1138,19 @@ export const BoardForm = styled.div`
       }
     }}
   }
-  
+
   .file {
     display: block;
-    
+
     .file-text {
       max-width: 600px;
       white-space: nowrap;
     }
-  
+
     .fileText a {
       text-decoration: underline;
     }
-  
+
     .file-thumb {
       float: left;
       margin: 3px 20px 5px 20px;
@@ -1155,7 +1166,7 @@ export const BoardForm = styled.div`
       float: left;
       margin: 3px 20px 5px 20px;
     }
-    
+
     .file-thumb img,
     .file-thumb video,
     .file-thumb audio {
@@ -1170,7 +1181,6 @@ export const BoardForm = styled.div`
       max-width: 125px;
       max-height: 125px;
     }
-
   }
 
   .thread-mobile {
@@ -1194,7 +1204,7 @@ export const BoardForm = styled.div`
         margin: 4px 0;
         overflow: hidden;
       }
-  
+
       .post-info-mobile {
         overflow: hidden;
         padding: 5px;
@@ -1202,7 +1212,7 @@ export const BoardForm = styled.div`
         display: block;
         clear: left;
       }
-  
+
       .post-menu-button-mobile {
         line-height: 1em !important;
         width: 1em !important;
@@ -1213,14 +1223,14 @@ export const BoardForm = styled.div`
         float: left !important;
         font-weight: 700 !important;
         opacity: 1 !important;
-        height: .5em !important;
+        height: 0.5em !important;
         font-size: 16px !important;
       }
-  
+
       .name-block-mobile {
         clear: none;
         float: left;
-  
+
         .subject-mobile {
           display: block;
         }
@@ -1230,10 +1240,10 @@ export const BoardForm = styled.div`
         float: right;
         text-align: right;
       }
-  
+
       .file-mobile {
         display: block;
-  
+
         .file-thumb-mobile {
           margin-left: 10px !important;
           margin-right: 10px !important;
@@ -1242,7 +1252,7 @@ export const BoardForm = styled.div`
           margin-bottom: 5px;
           margin-top: 15px;
         }
-  
+
         .file-info-mobile {
           padding-top: 5px;
           text-align: center;
@@ -1250,7 +1260,6 @@ export const BoardForm = styled.div`
           display: block !important;
           clear: left !important;
         }
-
       }
 
       video {
@@ -1262,7 +1271,7 @@ export const BoardForm = styled.div`
         width: 100%;
         height: auto;
       }
-  
+
       img {
         border: none;
         float: left;
@@ -1270,13 +1279,13 @@ export const BoardForm = styled.div`
         max-height: 100px;
         object-fit: scale-down;
       }
-  
+
       blockquote {
         padding-top: 5px;
         display: block;
         margin: 10px !important;
       }
-  
+
       .post-link-mobile {
         clear: both !important;
         padding: 5px;
@@ -1284,12 +1293,12 @@ export const BoardForm = styled.div`
         margin: -5px;
         display: block !important;
       }
-  
+
       .info-mobile {
         margin-top: 8px;
         float: left;
       }
-  
+
       .button-mobile {
         float: right;
         border-radius: 3px;
@@ -1313,7 +1322,7 @@ export const BoardForm = styled.div`
 
       .file-mobile {
         display: block;
-  
+
         .file-thumb-mobile {
           margin-left: 10px !important;
           margin-right: 10px !important;
@@ -1322,7 +1331,7 @@ export const BoardForm = styled.div`
           margin-bottom: 5px;
           margin-top: 15px;
         }
-  
+
         .file-info-mobile {
           padding-top: 5px;
           text-align: center;
@@ -1335,7 +1344,7 @@ export const BoardForm = styled.div`
       video {
         max-width: 100px;
       }
-  
+
       img {
         border: none;
         float: left;
@@ -1356,12 +1365,12 @@ export const BoardForm = styled.div`
           width: 1em !important;
           text-align: center !important;
           outline: none !important;
-          transform: rotate(90deg)!important;
+          transform: rotate(90deg) !important;
           margin: 4px -5px 0 4px !important;
           float: left !important;
           font-weight: 700 !important;
           opacity: 1 !important;
-          height: .5em !important;
+          height: 0.5em !important;
           font-size: 16px !important;
         }
 
@@ -1385,7 +1394,6 @@ export const BoardForm = styled.div`
         margin: 10px !important;
       }
     }
-
   }
 
   ${({ selectedStyle }) => {
@@ -2421,7 +2429,7 @@ export const BoardForm = styled.div`
       margin-left: calc((100% - 100vw) / 2);
       margin-right: calc((100% - 100vw) / 2);
     }
-    
+
     .name-block {
       display: block;
     }
@@ -2467,10 +2475,10 @@ export const BoardForm = styled.div`
           return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #ccc !important;
         }`;
-        
-      default:
-        return '';
-    }
+
+        default:
+          return '';
+      }
     }}
 
     ${({ selectedStyle }) => {
@@ -3195,7 +3203,7 @@ export const BoardForm = styled.div`
               }
             }
           }`;
-        
+
         default:
           return '';
       }
@@ -3207,7 +3215,7 @@ export const Footer = styled.div`
   #version {
     text-align: center;
     font-size: 11px;
-    font-family: "arial";
+    font-family: 'arial';
   }
   @media (min-width: 480px) {
     #break {
@@ -3319,9 +3327,9 @@ export const Footer = styled.div`
             color: #f30;
           }
         }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index ba49d68d..b1c78214 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -915,7 +915,7 @@ const All = () => {
                                     Anonymous
                                   </span>
                                 )}
-                                &nbsp; (u/
+                                &nbsp;(u/
                                 <span
                                   key={`pa-${index}`}
                                   className='poster-address address-desktop'
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 19fee2f3..206f2a44 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -990,7 +990,7 @@ const Board = () => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span
@@ -1149,13 +1149,13 @@ const Board = () => {
                             )}
                             <span className='name-block-mobile'>
                               <span
-                                className='name-mobile capcode'
+                                className='name-mobile capcode-admin'
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1215,7 +1215,7 @@ const Board = () => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span
@@ -1374,13 +1374,13 @@ const Board = () => {
                             )}
                             <span className='name-block-mobile'>
                               <span
-                                className='name-mobile capcode'
+                                className='name-mobile capcode-admin'
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1457,7 +1457,7 @@ const Board = () => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span
@@ -1675,13 +1675,13 @@ const Board = () => {
                             )}
                             <span className='name-block-mobile'>
                               <span
-                                className='name-mobile capcode'
+                                className='name-mobile capcode-admin'
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                   setIsAdminListOpen(!isAdminListOpen);
                                 }}
                               >
-                                ## Board Admins
+                                ## Board Mods
                               </span>
                               &nbsp;
                               <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1941,7 +1941,7 @@ const Board = () => {
                                       Anonymous
                                     </span>
                                   )}
-                                  &nbsp; (u/
+                                  &nbsp;(u/
                                   <span
                                     key={`pa-${index}`}
                                     className='poster-address address-desktop'
@@ -1960,7 +1960,7 @@ const Board = () => {
                                       )}
                                     </VerifiedAuthor>
                                   </span>
-                                  ) &nbsp;
+                                  )&nbsp;
                                   <span
                                     key={`dt-${index}`}
                                     className='date-time'
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index ab99e6d8..81795391 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -40,1851 +40,1851 @@ let lastVirtuosoStates = {};
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 const CatalogPost = ({ post }) => {
-	const {
-		editedComment,
-		setDeletePost,
-		setIsAuthorDelete,
-		captchaResponse,
-		setCaptchaResponse,
-		selectedAddress,
-		setIsModerationOpen,
-		setChallengesArray,
-		setIsAuthorEdit,
-		setIsCaptchaOpen,
-		setIsEditModalOpen,
-		isModerator,
-		setModeratingCommentCid,
-		setOriginalCommentContent,
-		setPendingComment,
-		setResolveCaptchaPromise,
-		selectedStyle,
-		setSelectedThread,
-	} = useGeneralStore((state) => state);
+  const {
+    editedComment,
+    setDeletePost,
+    setIsAuthorDelete,
+    captchaResponse,
+    setCaptchaResponse,
+    selectedAddress,
+    setIsModerationOpen,
+    setChallengesArray,
+    setIsAuthorEdit,
+    setIsCaptchaOpen,
+    setIsEditModalOpen,
+    isModerator,
+    setModeratingCommentCid,
+    setOriginalCommentContent,
+    setPendingComment,
+    setResolveCaptchaPromise,
+    selectedStyle,
+    setSelectedThread,
+  } = useGeneralStore((state) => state);
 
-	const thread = post;
-	const commentMediaInfo = getCommentMediaInfo(thread);
-	const linkCount = countLinks(thread);
-	const fallbackImgUrl = 'assets/filedeleted-res.gif';
-	const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
-	const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-	const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
-	const [openMenuCid, setOpenMenuCid] = useState(null);
-	const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-	const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-	const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
-	const [commentCid, setCommentCid] = useState(null);
+  const thread = post;
+  const commentMediaInfo = getCommentMediaInfo(thread);
+  const linkCount = countLinks(thread);
+  const fallbackImgUrl = 'assets/filedeleted-res.gif';
+  const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
+  const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
 
-	const threadMenuRefs = useRef({});
-	const threadRefs = useRef({});
-	const postMenuRef = useRef(null);
-	const popupRef = useRef(null);
-	const imageRef = useRef(null);
-	const postMenuCatalogRef = useRef(null);
-	const textRef = useRef(null);
-	const { subplebbitAddress } = useParams();
+  const threadMenuRefs = useRef({});
+  const threadRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const popupRef = useRef(null);
+  const imageRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+  const textRef = useRef(null);
+  const { subplebbitAddress } = useParams();
 
-	const [, setNewErrorMessage] = useError();
-	const [, setNewSuccessMessage] = useSuccess();
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
 
-	const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
+  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
 
-	const account = useAccount();
-	const [spaceOnRight, setSpaceOnRight] = useState(null);
-	const [isCalculationDone, setIsCalculationDone] = useState(false);
-	const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
-	const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
-	const textRect = textRef.current?.getBoundingClientRect();
-	const imageRect = imageRef.current?.getBoundingClientRect();
-	const popupRect = popupRef.current?.getBoundingClientRect();
-	const isMediaShowed =
-		thread.link &&
-		commentMediaInfo &&
-		(commentMediaInfo.type === 'image' ||
-			commentMediaInfo.type === 'video' ||
-			(commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) ||
-			(commentMediaInfo.type === 'iframe' && commentMediaInfo.thumbnail))
-			? true
-			: false;
+  const account = useAccount();
+  const [spaceOnRight, setSpaceOnRight] = useState(null);
+  const [isCalculationDone, setIsCalculationDone] = useState(false);
+  const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
+  const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
+  const textRect = textRef.current?.getBoundingClientRect();
+  const imageRect = imageRef.current?.getBoundingClientRect();
+  const popupRect = popupRef.current?.getBoundingClientRect();
+  const isMediaShowed =
+    thread.link &&
+    commentMediaInfo &&
+    (commentMediaInfo.type === 'image' ||
+      commentMediaInfo.type === 'video' ||
+      (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) ||
+      (commentMediaInfo.type === 'iframe' && commentMediaInfo.thumbnail))
+      ? true
+      : false;
 
-	const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
-	const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
+  const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
+  const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
 
-	useLayoutEffect(() => {
-		const executeLayoutEffectLogic = () => {
-			let ref;
+  useLayoutEffect(() => {
+    const executeLayoutEffectLogic = () => {
+      let ref;
 
-			if (isMediaShowed) {
-				ref = imageRef.current;
-			} else {
-				ref = textRef.current;
-			}
+      if (isMediaShowed) {
+        ref = imageRef.current;
+      } else {
+        ref = textRef.current;
+      }
 
-			if (ref && popupRef.current) {
-				const rect = ref.getBoundingClientRect();
-				const viewportWidth = document.documentElement.clientWidth;
-				const spaceRight = viewportWidth - (rect.left + rect.width);
-				const spaceLeft = rect.left;
+      if (ref && popupRef.current) {
+        const rect = ref.getBoundingClientRect();
+        const viewportWidth = document.documentElement.clientWidth;
+        const spaceRight = viewportWidth - (rect.left + rect.width);
+        const spaceLeft = rect.left;
 
-				if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
-					popupRef.current.style.maxWidth = `calc(
+        if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
+          popupRef.current.style.maxWidth = `calc(
               100vw - 
               ${isMediaShowed ? imageWidth : textWidth}px
               - ${spaceRight + 40}px
               )`;
-				} else if (spaceRight < 200 && spaceLeft < spaceRight) {
-					popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
-				} else {
-					popupRef.current.style.maxWidth = `500px`;
-				}
+        } else if (spaceRight < 200 && spaceLeft < spaceRight) {
+          popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
+        } else {
+          popupRef.current.style.maxWidth = `500px`;
+        }
 
-				setSpaceOnRight(spaceRight);
-				setIsCalculationDone(true);
-			}
-		};
+        setSpaceOnRight(spaceRight);
+        setIsCalculationDone(true);
+      }
+    };
 
-		if (isHoveringOnThread) {
-			const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
-			return () => {
-				clearTimeout(timeoutId);
-				setIsCalculationDone(false);
-			};
-		}
-	}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
+    if (isHoveringOnThread) {
+      const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
+      return () => {
+        clearTimeout(timeoutId);
+        setIsCalculationDone(false);
+      };
+    }
+  }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
 
-	const handleMouseOnLeaveThread = () => {
-		if (hoverTimeoutId) {
-			clearTimeout(hoverTimeoutId);
-			setHoverTimeoutId(null);
-			setIsHoveringOnThread('');
-		} else if (isHoveringOnThread !== '') {
-			setIsHoveringOnThread('');
-			setIsCalculationDone(false);
-		}
-	};
+  const handleMouseOnLeaveThread = () => {
+    if (hoverTimeoutId) {
+      clearTimeout(hoverTimeoutId);
+      setHoverTimeoutId(null);
+      setIsHoveringOnThread('');
+    } else if (isHoveringOnThread !== '') {
+      setIsHoveringOnThread('');
+      setIsCalculationDone(false);
+    }
+  };
 
-	const handleOutsideClick = useCallback(
-		(e) => {
-			if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
-				setOpenMenuCid(null);
-			}
-		},
-		[openMenuCid],
-	);
+  const handleOutsideClick = useCallback(
+    (e) => {
+      if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
+        setOpenMenuCid(null);
+      }
+    },
+    [openMenuCid],
+  );
 
-	const handleOptionClick = () => {
-		setOpenMenuCid(null);
-	};
+  const handleOptionClick = () => {
+    setOpenMenuCid(null);
+  };
 
-	useEffect(() => {
-		if (openMenuCid !== null) {
-			document.addEventListener('click', handleOutsideClick);
-		} else {
-			document.removeEventListener('click', handleOutsideClick);
-		}
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
 
-		return () => {
-			document.removeEventListener('click', handleOutsideClick);
-		};
-	}, [openMenuCid, handleOutsideClick]);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid, handleOutsideClick]);
 
-	const handleAuthorDeleteClick = (comment) => {
-		handleOptionClick(comment.cid);
+  const handleAuthorDeleteClick = (comment) => {
+    handleOptionClick(comment.cid);
 
-		confirmAlert({
-			customUI: ({ onClose }) => {
-				return (
-					<AlertModal selectedStyle={selectedStyle}>
-						<div className='author-delete-alert'>
-							<p>Are you sure you want to delete this post?</p>
-							<div className='author-delete-buttons'>
-								<button onClick={onClose}>No</button>
-								<button
-									onClick={() => {
-										setIsAuthorDelete(true);
-										setIsAuthorEdit(false);
-										setPublishCommentEditOptions((prevOptions) => ({
-											...prevOptions,
-											commentCid: comment.cid,
-											subplebbitAddress: comment.subplebbitAddress,
-											deleted: true,
-										}));
-										setTriggerPublishCommentEdit(true);
-										onClose();
-									}}
-								>
-									Yes
-								</button>
-							</div>
-						</div>
-					</AlertModal>
-				);
-			},
-		});
-	};
+    confirmAlert({
+      customUI: ({ onClose }) => {
+        return (
+          <AlertModal selectedStyle={selectedStyle}>
+            <div className='author-delete-alert'>
+              <p>Are you sure you want to delete this post?</p>
+              <div className='author-delete-buttons'>
+                <button onClick={onClose}>No</button>
+                <button
+                  onClick={() => {
+                    setIsAuthorDelete(true);
+                    setIsAuthorEdit(false);
+                    setPublishCommentEditOptions((prevOptions) => ({
+                      ...prevOptions,
+                      commentCid: comment.cid,
+                      subplebbitAddress: comment.subplebbitAddress,
+                      deleted: true,
+                    }));
+                    setTriggerPublishCommentEdit(true);
+                    onClose();
+                  }}
+                >
+                  Yes
+                </button>
+              </div>
+            </div>
+          </AlertModal>
+        );
+      },
+    });
+  };
 
-	const handleAuthorEditClick = (comment) => {
-		handleOptionClick(comment.cid);
-		setIsAuthorEdit(true);
-		setIsAuthorDelete(false);
-		setCommentCid(comment.cid);
-		setOriginalCommentContent(comment.content);
-		setIsEditModalOpen(true);
-	};
+  const handleAuthorEditClick = (comment) => {
+    handleOptionClick(comment.cid);
+    setIsAuthorEdit(true);
+    setIsAuthorDelete(false);
+    setCommentCid(comment.cid);
+    setOriginalCommentContent(comment.content);
+    setIsEditModalOpen(true);
+  };
 
-	const onChallengeVerification = (challengeVerification) => {
-		if (challengeVerification.challengeSuccess === true) {
-			setNewSuccessMessage('Challenge Success');
-			console.log('challenge success', challengeVerification);
-		} else if (challengeVerification.challengeSuccess === false) {
-			setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-			console.log('challenge failed', challengeVerification);
-		}
-	};
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+      setNewSuccessMessage('Challenge Success');
+      console.log('challenge success', challengeVerification);
+    } else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
 
-	const onChallenge = async (challenges, comment) => {
-		setPendingComment(comment);
-		let challengeAnswers = [];
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
 
-		try {
-			challengeAnswers = await getChallengeAnswersFromUser(challenges);
-		} catch (error) {
-			setNewErrorMessage(error.message);
-			console.log(error);
-		}
-		if (challengeAnswers) {
-			await comment.publishChallengeAnswers(challengeAnswers);
-		}
-	};
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges);
+    } catch (error) {
+      setNewErrorMessage(error.message);
+      console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers);
+    }
+  };
 
-	const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-		commentCid: commentCid,
-		content: editedComment || undefined,
-		subplebbitAddress: selectedAddress || subplebbitAddress,
-		onChallenge,
-		onChallengeVerification,
-		onError: (error) => {
-			setNewErrorMessage(error.message);
-			console.log(error);
-		},
-	});
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress || subplebbitAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message);
+      console.log(error);
+    },
+  });
 
-	const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
-	useEffect(() => {
-		setPublishCommentEditOptions((prevOptions) => ({
-			...prevOptions,
-			commentCid: commentCid,
-			content: editedComment || undefined,
-		}));
-	}, [commentCid, editedComment]);
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
 
-	useEffect(() => {
-		if (editedComment !== '') {
-			setTriggerPublishCommentEdit(true);
-		}
-	}, [editedComment]);
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment]);
 
-	useEffect(() => {
-		if (publishCommentEditOptions && triggerPublishCommentEdit) {
-			(async () => {
-				await publishCommentEdit();
-				setTriggerPublishCommentEdit(false);
-			})();
-		}
-	}, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+  useEffect(() => {
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        setTriggerPublishCommentEdit(false);
+      })();
+    }
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
 
-	const getChallengeAnswersFromUser = async (challenges) => {
-		setChallengesArray(challenges);
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
 
-		return new Promise((resolve, reject) => {
-			const imageString = challenges?.challenges[0].challenge;
-			const imageSource = `data:image/png;base64,${imageString}`;
-			const challengeImg = new Image();
-			challengeImg.src = imageSource;
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
 
-			challengeImg.onload = () => {
-				setIsCaptchaOpen(true);
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
 
-				const handleKeyDown = async (event) => {
-					if (event.key === 'Enter') {
-						const currentCaptchaResponse = captchaResponse;
-						resolve(currentCaptchaResponse);
-						setIsCaptchaOpen(false);
-						document.removeEventListener('keydown', handleKeyDown);
-						event.preventDefault();
-					}
-				};
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
 
-				setCaptchaResponse('');
-				document.addEventListener('keydown', handleKeyDown);
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
 
-				setResolveCaptchaPromise(resolve);
-			};
+        setResolveCaptchaPromise(resolve);
+      };
 
-			challengeImg.onerror = () => {
-				reject(setNewErrorMessage('Could not load challenges'));
-			};
-		});
-	};
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
 
-	let displayWidth, displayHeight;
-	if (thread.linkWidth && thread.linkHeight) {
-		let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
-		displayWidth = `${thread.linkWidth * scale}px`;
-		displayHeight = `${thread.linkHeight * scale}px`;
-	} else if (thread.link) {
-		displayWidth = '150px';
-		displayHeight = '150px';
-	} else {
-		displayWidth = '0px';
-		displayHeight = '0px';
-	}
+  let displayWidth, displayHeight;
+  if (thread.linkWidth && thread.linkHeight) {
+    let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
+    displayWidth = `${thread.linkWidth * scale}px`;
+    displayHeight = `${thread.linkHeight * scale}px`;
+  } else if (thread.link) {
+    displayWidth = '150px';
+    displayHeight = '150px';
+  } else {
+    displayWidth = '0px';
+    displayHeight = '0px';
+  }
 
-	if (post.type === 'rules') {
-		return (
-			<>
-				{isHoveringOnThread === 'rules'
-					? createPortal(
-							<PostPreview selectedStyle={selectedStyle}>
-								<div
-									ref={popupRef}
-									className='post-preview'
-									onMouseOver={() => handleMouseOnLeaveThread()}
-									style={{
-										visibility: isCalculationDone ? 'visible' : 'hidden',
-										left:
-											isCalculationDone && spaceOnRight > 250
-												? textRect.right + 5
-												: isCalculationDone && spaceOnRight < 250
-												? textRect.left - popupRect.width - 5
-												: 'auto',
-										top: popupPosition.top + 5,
-									}}
-								>
-									<span className='post-subject'>Rules </span> by 
-									<span className='post-author-admin'> ## Board Admins </span>
-									<span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
-								</div>
-							</PostPreview>,
-							document.body,
-					  )
-					: null}
-				<div
-					className='thread'
-					ref={(el) => {
-						threadRefs.current['rules'] = el;
-					}}
-					onMouseLeave={() => {
-						handleMouseOnLeaveThread();
-					}}
-				>
-					<BoardForm
-						selectedStyle={selectedStyle}
-						style={{ all: 'unset' }}
-						onMouseOver={() => {
-							setIsHoveringForMenu('rules');
-							handleMouseOnLeaveThread();
-						}}
-						onMouseLeave={() => setIsHoveringForMenu(false)}
-					>
-						<div className='meta' title='(R)eplies / (L)ink Replies'>
-							R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
-							<div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
-								<span
-									className='thread-icon sticky-icon'
-									title='Sticky'
-									style={{
-										imageRendering: 'pixelated',
-									}}
-								/>
-								<span
-									className='thread-icon closed-icon'
-									title='Closed'
-									style={{
-										imageRendering: 'pixelated',
-									}}
-								/>
-							</div>
-							<PostMenu
-								style={{
-									display: isHoveringForMenu === 'rules' ? 'inline-block' : 'none',
-									position: 'absolute',
-									lineHeight: '1em',
-									marginTop: '-1px',
-									outline: 'none',
-									zIndex: '999',
-								}}
-								title='Post menu'
-								ref={(el) => {
-									threadMenuRefs.current['rules'] = el;
-									postMenuRef.current = el;
-								}}
-								className='post-menu-button'
-								id='post-menu-button-catalog'
-								rotated={openMenuCid === 'rules'}
-								onClick={(event) => {
-									event.stopPropagation();
-									const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
-									setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-									setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
-								}}
-							>
-								▶
-							</PostMenu>
-						</div>
-						{createPortal(
-							<PostMenuCatalog
-								selectedStyle={selectedStyle}
-								ref={(el) => {
-									postMenuCatalogRef.current = el;
-								}}
-								onClick={(event) => event.stopPropagation()}
-								style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-							>
-								<div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
-									<ul className='post-menu-catalog'>
-										{/* {isModerator ? (
+  if (post.type === 'rules') {
+    return (
+      <>
+        {isHoveringOnThread === 'rules'
+          ? createPortal(
+              <PostPreview selectedStyle={selectedStyle}>
+                <div
+                  ref={popupRef}
+                  className='post-preview'
+                  onMouseOver={() => handleMouseOnLeaveThread()}
+                  style={{
+                    visibility: isCalculationDone ? 'visible' : 'hidden',
+                    left:
+                      isCalculationDone && spaceOnRight > 250
+                        ? textRect.right + 5
+                        : isCalculationDone && spaceOnRight < 250
+                        ? textRect.left - popupRect.width - 5
+                        : 'auto',
+                    top: popupPosition.top + 5,
+                  }}
+                >
+                  <span className='post-subject'>Rules </span> by 
+                  <span className='post-author-admin'> ## Board Mods </span>
+                  <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
+                </div>
+              </PostPreview>,
+              document.body,
+            )
+          : null}
+        <div
+          className='thread'
+          ref={(el) => {
+            threadRefs.current['rules'] = el;
+          }}
+          onMouseLeave={() => {
+            handleMouseOnLeaveThread();
+          }}
+        >
+          <BoardForm
+            selectedStyle={selectedStyle}
+            style={{ all: 'unset' }}
+            onMouseOver={() => {
+              setIsHoveringForMenu('rules');
+              handleMouseOnLeaveThread();
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}
+          >
+            <div className='meta' title='(R)eplies / (L)ink Replies'>
+              R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
+              <div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
+                <span
+                  className='thread-icon sticky-icon'
+                  title='Sticky'
+                  style={{
+                    imageRendering: 'pixelated',
+                  }}
+                />
+                <span
+                  className='thread-icon closed-icon'
+                  title='Closed'
+                  style={{
+                    imageRendering: 'pixelated',
+                  }}
+                />
+              </div>
+              <PostMenu
+                style={{
+                  display: isHoveringForMenu === 'rules' ? 'inline-block' : 'none',
+                  position: 'absolute',
+                  lineHeight: '1em',
+                  marginTop: '-1px',
+                  outline: 'none',
+                  zIndex: '999',
+                }}
+                title='Post menu'
+                ref={(el) => {
+                  threadMenuRefs.current['rules'] = el;
+                  postMenuRef.current = el;
+                }}
+                className='post-menu-button'
+                id='post-menu-button-catalog'
+                rotated={openMenuCid === 'rules'}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
+                  setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
+                }}
+              >
+                ▶
+              </PostMenu>
+            </div>
+            {createPortal(
+              <PostMenuCatalog
+                selectedStyle={selectedStyle}
+                ref={(el) => {
+                  postMenuCatalogRef.current = el;
+                }}
+                onClick={(event) => event.stopPropagation()}
+                style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
+              >
+                <div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
+                  <ul className='post-menu-catalog'>
+                    {/* {isModerator ? (
 											<>
 												change rules
 											</>
 										) : null} */}
-										<li
-											onMouseOver={() => {
-												setIsClientRedirectMenuOpen(true);
-											}}
-											onMouseLeave={() => {
-												setIsClientRedirectMenuOpen(false);
-											}}
-										>
-											View on »
-											<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-												<li onClick={() => handleOptionClick('rules')}>
-													<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-														Plebbit
-													</a>
-												</li>
-												{/* <li onClick={() => handleOptionClick("rules")}>
+                    <li
+                      onMouseOver={() => {
+                        setIsClientRedirectMenuOpen(true);
+                      }}
+                      onMouseLeave={() => {
+                        setIsClientRedirectMenuOpen(false);
+                      }}
+                    >
+                      View on »
+                      <ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
+                        <li onClick={() => handleOptionClick('rules')}>
+                          <a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                            Plebbit
+                          </a>
+                        </li>
+                        {/* <li onClick={() => handleOptionClick("rules")}>
 													<a
 													href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
 													target="_blank" rel="noreferrer"
 													>Seedit</a>
 												</li> */}
-												<li onClick={() => handleOptionClick('rules')}>
-													<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-														Plebones
-													</a>
-												</li>
-											</ul>
-										</li>
-									</ul>
-								</div>
-							</PostMenuCatalog>,
-							document.body,
-						)}
-					</BoardForm>
-					<Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/rules`}>
-						<div className='teaser' style={{ maxHeight: '312px' }}>
-							<div style={{ cursor: 'pointer' }}>
-								<span
-									ref={textRef}
-									onMouseOver={() => {
-										setIsHoveringOnThread('rules');
-										setIsHoveringForMenu('rules');
-										const rect = threadRefs.current['rules'].getBoundingClientRect();
-										setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
-									}}
-									onMouseLeave={() => setIsHoveringForMenu(false)}
-								>
-									<b>Rules</b>
-									{': ' + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
-								</span>
-							</div>
-						</div>
-					</Link>
-				</div>
-			</>
-		);
-	} else if (post.type === 'description') {
-		return (
-			<>
-				{isHoveringOnThread === 'description'
-					? createPortal(
-							<PostPreview selectedStyle={selectedStyle}>
-								<div
-									ref={popupRef}
-									className='post-preview'
-									onMouseOver={() => handleMouseOnLeaveThread()}
-									style={{
-										visibility: isCalculationDone ? 'visible' : 'hidden',
-										left:
-											isCalculationDone && spaceOnRight > 250
-												? subplebbit.suggestedAvatarUrl
-													? imageRect.right + 5
-													: textRect.right + 5
-												: isCalculationDone && spaceOnRight < 250
-												? subplebbit.suggestedAvatarUrl
-													? imageRect.left - popupRect.width - 5
-													: textRect.left - popupRect.width - 5
-												: 'auto',
-										top: popupPosition.top + 5,
-									}}
-								>
-									<span className='post-subject'>Welcome to {subplebbit.title || subplebbit.address}</span> by 
-									<span className='post-author-admin'> ## Board Admins </span>
-									<span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
-								</div>
-							</PostPreview>,
-							document.body,
-					  )
-					: null}
-				<div
-					className='thread'
-					ref={(el) => {
-						threadRefs.current['description'] = el;
-					}}
-					onMouseLeave={() => {
-						handleMouseOnLeaveThread();
-					}}
-				>
-					<Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`}>
-						{subplebbit.suggested?.avatarUrl ? (
-							<img
-								className='card'
-								onMouseOver={() => {
-									setIsHoveringOnThread('description');
-									setIsHoveringForMenu('description');
-									const rect = threadRefs.current['description'].getBoundingClientRect();
-									setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
-								}}
-								onMouseLeave={() => setIsHoveringForMenu(false)}
-								src={subplebbit.suggested?.avatarUrl}
-								alt='board avatar'
-							/>
-						) : null}
-					</Link>
-					{subplebbit.suggested?.avatarUrl ? (
-						<div className='thread-icons'>
-							<span
-								className='thread-icon sticky-icon'
-								title='Sticky'
-								style={{
-									imageRendering: 'pixelated',
-								}}
-							/>
-							<span
-								className='thread-icon closed-icon'
-								title='Closed'
-								style={{
-									imageRendering: 'pixelated',
-								}}
-							/>
-						</div>
-					) : null}
-					<BoardForm
-						selectedStyle={selectedStyle}
-						style={{ all: 'unset' }}
-						onMouseOver={() => {
-							setIsHoveringForMenu('description');
-							handleMouseOnLeaveThread();
-						}}
-						onMouseLeave={() => setIsHoveringForMenu(false)}
-					>
-						<div className='meta' title='(R)eplies / (L)ink Replies'>
-							R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
-							{subplebbit.suggested?.avatarUrl ? null : (
-								<div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
-									<span
-										className='thread-icon sticky-icon'
-										title='Sticky'
-										style={{
-											imageRendering: 'pixelated',
-										}}
-									/>
-									<span
-										className='thread-icon closed-icon'
-										title='Closed'
-										style={{
-											imageRendering: 'pixelated',
-										}}
-									/>
-								</div>
-							)}
-							<PostMenu
-								style={{
-									display: isHoveringForMenu === 'description' ? 'inline-block' : 'none',
-									position: 'absolute',
-									lineHeight: '1em',
-									marginTop: '-1px',
-									outline: 'none',
-									zIndex: '999',
-								}}
-								title='Post menu'
-								ref={(el) => {
-									threadMenuRefs.current['description'] = el;
-									postMenuRef.current = el;
-								}}
-								className='post-menu-button'
-								id='post-menu-button-catalog'
-								rotated={openMenuCid === 'description'}
-								onClick={(event) => {
-									event.stopPropagation();
-									const rect = threadMenuRefs.current['description'].getBoundingClientRect();
-									setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-									setOpenMenuCid((prevCid) => (prevCid === 'description' ? null : 'description'));
-								}}
-							>
-								▶
-							</PostMenu>
-						</div>
-						{createPortal(
-							<PostMenuCatalog
-								selectedStyle={selectedStyle}
-								ref={(el) => {
-									postMenuCatalogRef.current = el;
-								}}
-								onClick={(event) => event.stopPropagation()}
-								style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-							>
-								<div className={`post-menu-thread post-menu-thread-${'description'}`} style={{ display: openMenuCid === 'description' ? 'block' : 'none' }}>
-									<ul className='post-menu-catalog'>
-										{/* {isModerator ? (
+                        <li onClick={() => handleOptionClick('rules')}>
+                          <a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                            Plebones
+                          </a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </PostMenuCatalog>,
+              document.body,
+            )}
+          </BoardForm>
+          <Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/rules`}>
+            <div className='teaser' style={{ maxHeight: '312px' }}>
+              <div style={{ cursor: 'pointer' }}>
+                <span
+                  ref={textRef}
+                  onMouseOver={() => {
+                    setIsHoveringOnThread('rules');
+                    setIsHoveringForMenu('rules');
+                    const rect = threadRefs.current['rules'].getBoundingClientRect();
+                    setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  }}
+                  onMouseLeave={() => setIsHoveringForMenu(false)}
+                >
+                  <b>Rules</b>
+                  {': ' + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
+                </span>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </>
+    );
+  } else if (post.type === 'description') {
+    return (
+      <>
+        {isHoveringOnThread === 'description'
+          ? createPortal(
+              <PostPreview selectedStyle={selectedStyle}>
+                <div
+                  ref={popupRef}
+                  className='post-preview'
+                  onMouseOver={() => handleMouseOnLeaveThread()}
+                  style={{
+                    visibility: isCalculationDone ? 'visible' : 'hidden',
+                    left:
+                      isCalculationDone && spaceOnRight > 250
+                        ? subplebbit.suggestedAvatarUrl
+                          ? imageRect.right + 5
+                          : textRect.right + 5
+                        : isCalculationDone && spaceOnRight < 250
+                        ? subplebbit.suggestedAvatarUrl
+                          ? imageRect.left - popupRect.width - 5
+                          : textRect.left - popupRect.width - 5
+                        : 'auto',
+                    top: popupPosition.top + 5,
+                  }}
+                >
+                  <span className='post-subject'>Welcome to {subplebbit.title || subplebbit.address}</span> by 
+                  <span className='post-author-admin'> ## Board Mods </span>
+                  <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
+                </div>
+              </PostPreview>,
+              document.body,
+            )
+          : null}
+        <div
+          className='thread'
+          ref={(el) => {
+            threadRefs.current['description'] = el;
+          }}
+          onMouseLeave={() => {
+            handleMouseOnLeaveThread();
+          }}
+        >
+          <Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`}>
+            {subplebbit.suggested?.avatarUrl ? (
+              <img
+                className='card'
+                onMouseOver={() => {
+                  setIsHoveringOnThread('description');
+                  setIsHoveringForMenu('description');
+                  const rect = threadRefs.current['description'].getBoundingClientRect();
+                  setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
+                }}
+                onMouseLeave={() => setIsHoveringForMenu(false)}
+                src={subplebbit.suggested?.avatarUrl}
+                alt='board avatar'
+              />
+            ) : null}
+          </Link>
+          {subplebbit.suggested?.avatarUrl ? (
+            <div className='thread-icons'>
+              <span
+                className='thread-icon sticky-icon'
+                title='Sticky'
+                style={{
+                  imageRendering: 'pixelated',
+                }}
+              />
+              <span
+                className='thread-icon closed-icon'
+                title='Closed'
+                style={{
+                  imageRendering: 'pixelated',
+                }}
+              />
+            </div>
+          ) : null}
+          <BoardForm
+            selectedStyle={selectedStyle}
+            style={{ all: 'unset' }}
+            onMouseOver={() => {
+              setIsHoveringForMenu('description');
+              handleMouseOnLeaveThread();
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}
+          >
+            <div className='meta' title='(R)eplies / (L)ink Replies'>
+              R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
+              {subplebbit.suggested?.avatarUrl ? null : (
+                <div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
+                  <span
+                    className='thread-icon sticky-icon'
+                    title='Sticky'
+                    style={{
+                      imageRendering: 'pixelated',
+                    }}
+                  />
+                  <span
+                    className='thread-icon closed-icon'
+                    title='Closed'
+                    style={{
+                      imageRendering: 'pixelated',
+                    }}
+                  />
+                </div>
+              )}
+              <PostMenu
+                style={{
+                  display: isHoveringForMenu === 'description' ? 'inline-block' : 'none',
+                  position: 'absolute',
+                  lineHeight: '1em',
+                  marginTop: '-1px',
+                  outline: 'none',
+                  zIndex: '999',
+                }}
+                title='Post menu'
+                ref={(el) => {
+                  threadMenuRefs.current['description'] = el;
+                  postMenuRef.current = el;
+                }}
+                className='post-menu-button'
+                id='post-menu-button-catalog'
+                rotated={openMenuCid === 'description'}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  const rect = threadMenuRefs.current['description'].getBoundingClientRect();
+                  setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  setOpenMenuCid((prevCid) => (prevCid === 'description' ? null : 'description'));
+                }}
+              >
+                ▶
+              </PostMenu>
+            </div>
+            {createPortal(
+              <PostMenuCatalog
+                selectedStyle={selectedStyle}
+                ref={(el) => {
+                  postMenuCatalogRef.current = el;
+                }}
+                onClick={(event) => event.stopPropagation()}
+                style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
+              >
+                <div className={`post-menu-thread post-menu-thread-${'description'}`} style={{ display: openMenuCid === 'description' ? 'block' : 'none' }}>
+                  <ul className='post-menu-catalog'>
+                    {/* {isModerator ? (
                       <>
                         change description
                       </>
                     ) : null} */}
-										{subplebbit.suggested?.avatarUrl ? (
-											<li
-												onMouseOver={() => {
-													setIsImageSearchOpen(true);
-												}}
-												onMouseLeave={() => {
-													setIsImageSearchOpen(false);
-												}}
-											>
-												Image search »
-												<ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
-													<li onClick={() => handleOptionClick('description')}>
-														<a href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-															Google
-														</a>
-													</li>
-													<li onClick={() => handleOptionClick('description')}>
-														<a href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-															Yandex
-														</a>
-													</li>
-													<li onClick={() => handleOptionClick('description')}>
-														<a href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-															SauceNAO
-														</a>
-													</li>
-												</ul>
-											</li>
-										) : null}
-										<li
-											onMouseOver={() => {
-												setIsClientRedirectMenuOpen(true);
-											}}
-											onMouseLeave={() => {
-												setIsClientRedirectMenuOpen(false);
-											}}
-										>
-											View on »
-											<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-												<li onClick={() => handleOptionClick('description')}>
-													<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-														Plebbit
-													</a>
-												</li>
-												{/* <li onClick={() => handleOptionClick("description")}>
+                    {subplebbit.suggested?.avatarUrl ? (
+                      <li
+                        onMouseOver={() => {
+                          setIsImageSearchOpen(true);
+                        }}
+                        onMouseLeave={() => {
+                          setIsImageSearchOpen(false);
+                        }}
+                      >
+                        Image search »
+                        <ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
+                          <li onClick={() => handleOptionClick('description')}>
+                            <a href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                              Google
+                            </a>
+                          </li>
+                          <li onClick={() => handleOptionClick('description')}>
+                            <a href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                              Yandex
+                            </a>
+                          </li>
+                          <li onClick={() => handleOptionClick('description')}>
+                            <a href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                              SauceNAO
+                            </a>
+                          </li>
+                        </ul>
+                      </li>
+                    ) : null}
+                    <li
+                      onMouseOver={() => {
+                        setIsClientRedirectMenuOpen(true);
+                      }}
+                      onMouseLeave={() => {
+                        setIsClientRedirectMenuOpen(false);
+                      }}
+                    >
+                      View on »
+                      <ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
+                        <li onClick={() => handleOptionClick('description')}>
+                          <a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                            Plebbit
+                          </a>
+                        </li>
+                        {/* <li onClick={() => handleOptionClick("description")}>
 													<a
 													href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
 													target="_blank" rel="noreferrer"
 													>Seedit</a>
 												</li> */}
-												<li onClick={() => handleOptionClick('description')}>
-													<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-														Plebones
-													</a>
-												</li>
-											</ul>
-										</li>
-									</ul>
-								</div>
-							</PostMenuCatalog>,
-							document.body,
-						)}
-					</BoardForm>
-					<Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`} onClick={() => setSelectedThread('description')}>
-						<div className='teaser' style={{ maxHeight: '170px' }}>
-							<div style={{ cursor: 'pointer' }}>
-								<span
-									ref={textRef}
-									onMouseOver={() => {
-										setIsHoveringOnThread('description');
-										setIsHoveringForMenu('description');
-										const rect = threadRefs.current['description'].getBoundingClientRect();
-										setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
-									}}
-									onMouseLeave={() => setIsHoveringForMenu(false)}
-								>
-									<b>Welcome to {subplebbit.title || subplebbit.address}!</b>
-									{': ' + subplebbit.description}
-								</span>
-							</div>
-						</div>
-					</Link>
-				</div>
-			</>
-		);
-	} else {
-		return (
-			<>
-				{isHoveringOnThread === thread.cid
-					? createPortal(
-							<PostPreview selectedStyle={selectedStyle}>
-								<div
-									ref={popupRef}
-									className='post-preview'
-									onMouseOver={() => handleMouseOnLeaveThread()}
-									style={{
-										visibility: isCalculationDone ? 'visible' : 'hidden',
-										left:
-											isCalculationDone && spaceOnRight > 250
-												? isMediaShowed
-													? imageRect.right + 5
-													: textRect.right + 5
-												: isCalculationDone && spaceOnRight < 250
-												? isMediaShowed
-													? imageRect.left - popupRect.width - 5
-													: textRect.left - popupRect.width - 5
-												: 'auto',
-										top: popupPosition.top + 5,
-									}}
-								>
-									<span className='post-subject'>{thread.title ? `${thread.title} ` : 'Posted '}</span>
-									by
-									<span className='post-author'>{thread.author.displayName ? ` ${thread.author.displayName} ` : ' Anonymous '}</span>
-									<span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
-									{thread.replyCount > 0 ? (
-										<div className='post-last'>
-											Last reply by
-											<span className='post-author'> Anonymous </span>
-											<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
-										</div>
-									) : null}
-								</div>
-							</PostPreview>,
-							document.body,
-					  )
-					: null}
-				<div
-					key={`thread-`}
-					className='thread'
-					ref={(el) => {
-						threadRefs.current[thread.cid] = el;
-					}}
-					onMouseLeave={() => {
-						handleMouseOnLeaveThread();
-					}}
-				>
-					{commentMediaInfo?.url ? (
-						<Link
-							style={{ all: 'unset', cursor: 'pointer' }}
-							key={`link-`}
-							to={`/p/${selectedAddress}/c/${thread.cid}`}
-							onClick={() => setSelectedThread(thread.cid)}
-							onMouseOver={() => {
-								setIsHoveringOnThread(thread.cid);
-								setIsHoveringForMenu(thread.cid);
-								const rect = threadRefs.current[thread.cid].getBoundingClientRect();
-								setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
-							}}
-							onMouseLeave={() => setIsHoveringForMenu(false)}
-						>
-							{commentMediaInfo?.type === 'webpage' ? (
-								thread.thumbnailUrl ? (
-									<span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
-										<img
-											className='card'
-											ref={imageRef}
-											key={`img-`}
-											src={commentMediaInfo.thumbnail}
-											alt={commentMediaInfo.type}
-											onError={(e) => {
-												e.target.src = fallbackImgUrl;
-												e.target.onerror = null;
-											}}
-										/>
-									</span>
-								) : null
-							) : null}
-							{commentMediaInfo?.type === 'iframe' && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
-								<span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
-									<img
-										className='card'
-										ref={imageRef}
-										key={`img-`}
-										src={commentMediaInfo.thumbnail}
-										alt={commentMediaInfo.type}
-										onError={(e) => {
-											e.target.src = fallbackImgUrl;
-										}}
-									/>
-								</span>
-							) : null}
-							{commentMediaInfo?.type === 'image' ? (
-								<span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
-									<img
-										className='card'
-										ref={imageRef}
-										key={`img-`}
-										src={commentMediaInfo.url}
-										alt={commentMediaInfo.type}
-										onError={(e) => {
-											e.target.src = fallbackImgUrl;
-											e.target.onerror = null;
-										}}
-									/>
-								</span>
-							) : null}
-							{commentMediaInfo?.type === 'video' ? (
-								<span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
-									<video
-										className='card'
-										ref={imageRef}
-										key={`fti-`}
-										src={commentMediaInfo.url}
-										alt={commentMediaInfo.type}
-										onError={(e) => (e.target.src = fallbackImgUrl)}
-									/>
-								</span>
-							) : null}
-							{commentMediaInfo?.type === 'audio' ? (
-								<audio
-									className='card'
-									ref={imageRef}
-									controls
-									key={`fti-`}
-									src={commentMediaInfo.url}
-									alt={commentMediaInfo.type}
-									onError={(e) => (e.target.src = fallbackImgUrl)}
-								/>
-							) : null}
-						</Link>
-					) : null}
-					{isMediaShowed ? (
-						<div key={`ti-`} className='thread-icons'>
-							{thread.pinned ? (
-								<span
-									key={`si-`}
-									className='thread-icon sticky-icon'
-									title='Sticky'
-									style={{
-										imageRendering: 'pixelated',
-									}}
-								/>
-							) : null}
-							{thread.locked ? (
-								<span
-									key={`li-`}
-									className='thread-icon closed-icon'
-									title='Closed'
-									style={{
-										imageRendering: 'pixelated',
-									}}
-								/>
-							) : null}
-						</div>
-					) : null}
-					<BoardForm
-						selectedStyle={selectedStyle}
-						onMouseOver={() => {
-							setIsHoveringForMenu(thread.cid);
-							handleMouseOnLeaveThread();
-						}}
-						onMouseLeave={() => setIsHoveringForMenu(false)}
-						style={{ all: 'unset' }}
-					>
-						<div key={`meta-`} className='meta' title='(R)eplies / (L)ink Replies'>
-							R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
-							{linkCount > 0 ? (
-								<>
-									&nbsp;/ L:&nbsp;<b key={`i-`}>{linkCount}</b>
-								</>
-							) : null}
-							{isMediaShowed ? null : (
-								<div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
-									{thread.pinned ? (
-										<span
-											key={`si-`}
-											className='thread-icon sticky-icon'
-											title='Sticky'
-											style={{
-												imageRendering: 'pixelated',
-											}}
-										/>
-									) : null}
-									{thread.locked ? (
-										<span
-											key={`li-`}
-											className='thread-icon closed-icon'
-											title='Closed'
-											style={{
-												imageRendering: 'pixelated',
-											}}
-										/>
-									) : null}
-								</div>
-							)}
-							<PostMenu
-								style={{
-									display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
-									position: 'absolute',
-									lineHeight: '1em',
-									marginTop: '-1px',
-									outline: 'none',
-									zIndex: '999',
-								}}
-								key={`pmb-`}
-								title='Post menu'
-								ref={(el) => {
-									threadMenuRefs.current[thread.cid] = el;
-									postMenuRef.current = el;
-								}}
-								className='post-menu-button'
-								id='post-menu-button-catalog'
-								rotated={openMenuCid === thread.cid}
-								onClick={(event) => {
-									event.stopPropagation();
-									const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
-									setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-									setOpenMenuCid((prevCid) => (prevCid === thread.cid ? null : thread.cid));
-								}}
-							>
-								▶
-							</PostMenu>
-						</div>
-						{createPortal(
-							<PostMenuCatalog
-								selectedStyle={selectedStyle}
-								ref={(el) => {
-									postMenuCatalogRef.current = el;
-								}}
-								onClick={(event) => event.stopPropagation()}
-								style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-							>
-								<div className={`post-menu-thread post-menu-thread-${thread.cid}`} style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}>
-									<ul className='post-menu-catalog'>
-										<a
-											target='_blank'
-											rel='noreferrer'
-											style={{ color: 'inherit', textDecoration: 'none' }}
-											href={`https://pleb.bz/p/${selectedAddress}/c/${thread.cid}?redirect=plebchan.eth.limo`}
-										>
-											<li
-												onClick={() => {
-													handleOptionClick(thread.cid);
-												}}
-											>
-												Share thread
-											</li>
-										</a>
-										<VerifiedAuthor commentCid={thread.cid}>
-											{({ authorAddress }) => (
-												<>
-													{authorAddress === account?.author.address || authorAddress === account?.signer.address ? (
-														<>
-															<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
-															<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
-														</>
-													) : null}
-													{isModerator ? (
-														<>
-															{authorAddress === account?.author.address || authorAddress === account?.signer.address ? null : (
-																<li
-																	onClick={() => {
-																		setModeratingCommentCid(thread.cid);
-																		setIsModerationOpen(true);
-																		handleOptionClick(thread.cid);
-																		setDeletePost(true);
-																	}}
-																>
-																	Delete post
-																</li>
-															)}
-															<li
-																onClick={() => {
-																	setModeratingCommentCid(thread.cid);
-																	setIsModerationOpen(true);
-																	handleOptionClick(thread.cid);
-																}}
-															>
-																Mod tools
-															</li>
-														</>
-													) : null}
-												</>
-											)}
-										</VerifiedAuthor>
-										{isMediaShowed ? (
-											<li
-												onMouseOver={() => {
-													setIsImageSearchOpen(true);
-												}}
-												onMouseLeave={() => {
-													setIsImageSearchOpen(false);
-												}}
-											>
-												Image search »
-												<ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
-													<li onClick={() => handleOptionClick(thread.cid)}>
-														<a href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
-															Google
-														</a>
-													</li>
-													<li onClick={() => handleOptionClick(thread.cid)}>
-														<a href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
-															Yandex
-														</a>
-													</li>
-													<li onClick={() => handleOptionClick(thread.cid)}>
-														<a href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
-															SauceNAO
-														</a>
-													</li>
-												</ul>
-											</li>
-										) : null}
-										<li
-											onMouseOver={() => {
-												setIsClientRedirectMenuOpen(true);
-											}}
-											onMouseLeave={() => {
-												setIsClientRedirectMenuOpen(false);
-											}}
-										>
-											View on »
-											<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-												<li onClick={() => handleOptionClick(thread.cid)}>
-													<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} target='_blank' rel='noreferrer'>
-														Plebbit
-													</a>
-												</li>
-												{/* <li onClick={() => handleOptionClick(thread.cid)}>
+                        <li onClick={() => handleOptionClick('description')}>
+                          <a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                            Plebones
+                          </a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </PostMenuCatalog>,
+              document.body,
+            )}
+          </BoardForm>
+          <Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`} onClick={() => setSelectedThread('description')}>
+            <div className='teaser' style={{ maxHeight: '170px' }}>
+              <div style={{ cursor: 'pointer' }}>
+                <span
+                  ref={textRef}
+                  onMouseOver={() => {
+                    setIsHoveringOnThread('description');
+                    setIsHoveringForMenu('description');
+                    const rect = threadRefs.current['description'].getBoundingClientRect();
+                    setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  }}
+                  onMouseLeave={() => setIsHoveringForMenu(false)}
+                >
+                  <b>Welcome to {subplebbit.title || subplebbit.address}!</b>
+                  {': ' + subplebbit.description}
+                </span>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        {isHoveringOnThread === thread.cid
+          ? createPortal(
+              <PostPreview selectedStyle={selectedStyle}>
+                <div
+                  ref={popupRef}
+                  className='post-preview'
+                  onMouseOver={() => handleMouseOnLeaveThread()}
+                  style={{
+                    visibility: isCalculationDone ? 'visible' : 'hidden',
+                    left:
+                      isCalculationDone && spaceOnRight > 250
+                        ? isMediaShowed
+                          ? imageRect.right + 5
+                          : textRect.right + 5
+                        : isCalculationDone && spaceOnRight < 250
+                        ? isMediaShowed
+                          ? imageRect.left - popupRect.width - 5
+                          : textRect.left - popupRect.width - 5
+                        : 'auto',
+                    top: popupPosition.top + 5,
+                  }}
+                >
+                  <span className='post-subject'>{thread.title ? `${thread.title} ` : 'Posted '}</span>
+                  by
+                  <span className='post-author'>{thread.author.displayName ? ` ${thread.author.displayName} ` : ' Anonymous '}</span>
+                  <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
+                  {thread.replyCount > 0 ? (
+                    <div className='post-last'>
+                      Last reply by
+                      <span className='post-author'> Anonymous </span>
+                      <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
+                    </div>
+                  ) : null}
+                </div>
+              </PostPreview>,
+              document.body,
+            )
+          : null}
+        <div
+          key={`thread-`}
+          className='thread'
+          ref={(el) => {
+            threadRefs.current[thread.cid] = el;
+          }}
+          onMouseLeave={() => {
+            handleMouseOnLeaveThread();
+          }}
+        >
+          {commentMediaInfo?.url ? (
+            <Link
+              style={{ all: 'unset', cursor: 'pointer' }}
+              key={`link-`}
+              to={`/p/${selectedAddress}/c/${thread.cid}`}
+              onClick={() => setSelectedThread(thread.cid)}
+              onMouseOver={() => {
+                setIsHoveringOnThread(thread.cid);
+                setIsHoveringForMenu(thread.cid);
+                const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+                setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
+              }}
+              onMouseLeave={() => setIsHoveringForMenu(false)}
+            >
+              {commentMediaInfo?.type === 'webpage' ? (
+                thread.thumbnailUrl ? (
+                  <span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
+                    <img
+                      className='card'
+                      ref={imageRef}
+                      key={`img-`}
+                      src={commentMediaInfo.thumbnail}
+                      alt={commentMediaInfo.type}
+                      onError={(e) => {
+                        e.target.src = fallbackImgUrl;
+                        e.target.onerror = null;
+                      }}
+                    />
+                  </span>
+                ) : null
+              ) : null}
+              {commentMediaInfo?.type === 'iframe' && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
+                <span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
+                  <img
+                    className='card'
+                    ref={imageRef}
+                    key={`img-`}
+                    src={commentMediaInfo.thumbnail}
+                    alt={commentMediaInfo.type}
+                    onError={(e) => {
+                      e.target.src = fallbackImgUrl;
+                    }}
+                  />
+                </span>
+              ) : null}
+              {commentMediaInfo?.type === 'image' ? (
+                <span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
+                  <img
+                    className='card'
+                    ref={imageRef}
+                    key={`img-`}
+                    src={commentMediaInfo.url}
+                    alt={commentMediaInfo.type}
+                    onError={(e) => {
+                      e.target.src = fallbackImgUrl;
+                      e.target.onerror = null;
+                    }}
+                  />
+                </span>
+              ) : null}
+              {commentMediaInfo?.type === 'video' ? (
+                <span className='file-thumb' style={{ width: displayWidth, height: displayHeight }}>
+                  <video
+                    className='card'
+                    ref={imageRef}
+                    key={`fti-`}
+                    src={commentMediaInfo.url}
+                    alt={commentMediaInfo.type}
+                    onError={(e) => (e.target.src = fallbackImgUrl)}
+                  />
+                </span>
+              ) : null}
+              {commentMediaInfo?.type === 'audio' ? (
+                <audio
+                  className='card'
+                  ref={imageRef}
+                  controls
+                  key={`fti-`}
+                  src={commentMediaInfo.url}
+                  alt={commentMediaInfo.type}
+                  onError={(e) => (e.target.src = fallbackImgUrl)}
+                />
+              ) : null}
+            </Link>
+          ) : null}
+          {isMediaShowed ? (
+            <div key={`ti-`} className='thread-icons'>
+              {thread.pinned ? (
+                <span
+                  key={`si-`}
+                  className='thread-icon sticky-icon'
+                  title='Sticky'
+                  style={{
+                    imageRendering: 'pixelated',
+                  }}
+                />
+              ) : null}
+              {thread.locked ? (
+                <span
+                  key={`li-`}
+                  className='thread-icon closed-icon'
+                  title='Closed'
+                  style={{
+                    imageRendering: 'pixelated',
+                  }}
+                />
+              ) : null}
+            </div>
+          ) : null}
+          <BoardForm
+            selectedStyle={selectedStyle}
+            onMouseOver={() => {
+              setIsHoveringForMenu(thread.cid);
+              handleMouseOnLeaveThread();
+            }}
+            onMouseLeave={() => setIsHoveringForMenu(false)}
+            style={{ all: 'unset' }}
+          >
+            <div key={`meta-`} className='meta' title='(R)eplies / (L)ink Replies'>
+              R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
+              {linkCount > 0 ? (
+                <>
+                  &nbsp;/ L:&nbsp;<b key={`i-`}>{linkCount}</b>
+                </>
+              ) : null}
+              {isMediaShowed ? null : (
+                <div className='thread-icons' style={{ position: 'absolute', top: '-2px', right: '15px' }}>
+                  {thread.pinned ? (
+                    <span
+                      key={`si-`}
+                      className='thread-icon sticky-icon'
+                      title='Sticky'
+                      style={{
+                        imageRendering: 'pixelated',
+                      }}
+                    />
+                  ) : null}
+                  {thread.locked ? (
+                    <span
+                      key={`li-`}
+                      className='thread-icon closed-icon'
+                      title='Closed'
+                      style={{
+                        imageRendering: 'pixelated',
+                      }}
+                    />
+                  ) : null}
+                </div>
+              )}
+              <PostMenu
+                style={{
+                  display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
+                  position: 'absolute',
+                  lineHeight: '1em',
+                  marginTop: '-1px',
+                  outline: 'none',
+                  zIndex: '999',
+                }}
+                key={`pmb-`}
+                title='Post menu'
+                ref={(el) => {
+                  threadMenuRefs.current[thread.cid] = el;
+                  postMenuRef.current = el;
+                }}
+                className='post-menu-button'
+                id='post-menu-button-catalog'
+                rotated={openMenuCid === thread.cid}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
+                  setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  setOpenMenuCid((prevCid) => (prevCid === thread.cid ? null : thread.cid));
+                }}
+              >
+                ▶
+              </PostMenu>
+            </div>
+            {createPortal(
+              <PostMenuCatalog
+                selectedStyle={selectedStyle}
+                ref={(el) => {
+                  postMenuCatalogRef.current = el;
+                }}
+                onClick={(event) => event.stopPropagation()}
+                style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
+              >
+                <div className={`post-menu-thread post-menu-thread-${thread.cid}`} style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}>
+                  <ul className='post-menu-catalog'>
+                    <a
+                      target='_blank'
+                      rel='noreferrer'
+                      style={{ color: 'inherit', textDecoration: 'none' }}
+                      href={`https://pleb.bz/p/${selectedAddress}/c/${thread.cid}?redirect=plebchan.eth.limo`}
+                    >
+                      <li
+                        onClick={() => {
+                          handleOptionClick(thread.cid);
+                        }}
+                      >
+                        Share thread
+                      </li>
+                    </a>
+                    <VerifiedAuthor commentCid={thread.cid}>
+                      {({ authorAddress }) => (
+                        <>
+                          {authorAddress === account?.author.address || authorAddress === account?.signer.address ? (
+                            <>
+                              <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
+                              <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
+                            </>
+                          ) : null}
+                          {isModerator ? (
+                            <>
+                              {authorAddress === account?.author.address || authorAddress === account?.signer.address ? null : (
+                                <li
+                                  onClick={() => {
+                                    setModeratingCommentCid(thread.cid);
+                                    setIsModerationOpen(true);
+                                    handleOptionClick(thread.cid);
+                                    setDeletePost(true);
+                                  }}
+                                >
+                                  Delete post
+                                </li>
+                              )}
+                              <li
+                                onClick={() => {
+                                  setModeratingCommentCid(thread.cid);
+                                  setIsModerationOpen(true);
+                                  handleOptionClick(thread.cid);
+                                }}
+                              >
+                                Mod tools
+                              </li>
+                            </>
+                          ) : null}
+                        </>
+                      )}
+                    </VerifiedAuthor>
+                    {isMediaShowed ? (
+                      <li
+                        onMouseOver={() => {
+                          setIsImageSearchOpen(true);
+                        }}
+                        onMouseLeave={() => {
+                          setIsImageSearchOpen(false);
+                        }}
+                      >
+                        Image search »
+                        <ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
+                              Google
+                            </a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
+                              Yandex
+                            </a>
+                          </li>
+                          <li onClick={() => handleOptionClick(thread.cid)}>
+                            <a href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} target='_blank' rel='noreferrer'>
+                              SauceNAO
+                            </a>
+                          </li>
+                        </ul>
+                      </li>
+                    ) : null}
+                    <li
+                      onMouseOver={() => {
+                        setIsClientRedirectMenuOpen(true);
+                      }}
+                      onMouseLeave={() => {
+                        setIsClientRedirectMenuOpen(false);
+                      }}
+                    >
+                      View on »
+                      <ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
+                        <li onClick={() => handleOptionClick(thread.cid)}>
+                          <a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} target='_blank' rel='noreferrer'>
+                            Plebbit
+                          </a>
+                        </li>
+                        {/* <li onClick={() => handleOptionClick(thread.cid)}>
                           <a
                           href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
                           target="_blank" rel="noreferrer"
                           >Seedit</a>
                         </li> */}
-												<li onClick={() => handleOptionClick(thread.cid)}>
-													<a href={`https://plebones.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} target='_blank' rel='noreferrer'>
-														Plebones
-													</a>
-												</li>
-											</ul>
-										</li>
-									</ul>
-								</div>
-							</PostMenuCatalog>,
-							document.body,
-						)}
-					</BoardForm>
-					<Link style={{ all: 'unset', cursor: 'pointer' }} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
-						<div key={`t-`} className='teaser' style={{ maxHeight: `calc(320px - ${displayHeight})` }}>
-							<div style={{ cursor: 'pointer' }}>
-								<span
-									key={`teaser-width${thread.cid}`}
-									ref={textRef}
-									onMouseOver={() => {
-										setIsHoveringOnThread(thread.cid);
-										setIsHoveringForMenu(thread.cid);
-										const rect = threadRefs.current[thread.cid].getBoundingClientRect();
-										setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
-									}}
-									onMouseLeave={() => setIsHoveringForMenu(false)}
-								>
-									<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
-									{thread.content ? `: ${thread.content}` : null}
-								</span>
-							</div>
-						</div>
-					</Link>
-				</div>
-			</>
-		);
-	}
+                        <li onClick={() => handleOptionClick(thread.cid)}>
+                          <a href={`https://plebones.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} target='_blank' rel='noreferrer'>
+                            Plebones
+                          </a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </PostMenuCatalog>,
+              document.body,
+            )}
+          </BoardForm>
+          <Link style={{ all: 'unset', cursor: 'pointer' }} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
+            <div key={`t-`} className='teaser' style={{ maxHeight: `calc(320px - ${displayHeight})` }}>
+              <div style={{ cursor: 'pointer' }}>
+                <span
+                  key={`teaser-width${thread.cid}`}
+                  ref={textRef}
+                  onMouseOver={() => {
+                    setIsHoveringOnThread(thread.cid);
+                    setIsHoveringForMenu(thread.cid);
+                    const rect = threadRefs.current[thread.cid].getBoundingClientRect();
+                    setPopupPosition({ top: rect.top + window.scrollY, left: rect.left });
+                  }}
+                  onMouseLeave={() => setIsHoveringForMenu(false)}
+                >
+                  <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+                  {thread.content ? `: ${thread.content}` : null}
+                </span>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </>
+    );
+  }
 };
 
 const CatalogRow = ({ row }) => {
-	const posts = [];
-	for (const post of row) {
-		posts.push(<CatalogPost key={post?.cid} post={post} />);
-	}
-	return <div>{posts}</div>;
+  const posts = [];
+  for (const post of row) {
+    posts.push(<CatalogPost key={post?.cid} post={post} />);
+  }
+  return <div>{posts}</div>;
 };
 
 const Catalog = () => {
-	const {
-		captchaResponse,
-		setCaptchaResponse,
-		setChallengesArray,
-		defaultSubplebbits,
-		setIsCaptchaOpen,
-		isModerationOpen,
-		setIsModerationOpen,
-		setIsModerator,
-		isSettingsOpen,
-		setIsSettingsOpen,
-		originalCommentContent,
-		setPendingComment,
-		setPendingCommentIndex,
-		setResolveCaptchaPromise,
-		selectedAddress,
-		setSelectedAddress,
-		selectedStyle,
-		selectedTitle,
-		setSelectedTitle,
-		showPostForm,
-		showPostFormLink,
-	} = useGeneralStore((state) => state);
+  const {
+    captchaResponse,
+    setCaptchaResponse,
+    setChallengesArray,
+    defaultSubplebbits,
+    setIsCaptchaOpen,
+    isModerationOpen,
+    setIsModerationOpen,
+    setIsModerator,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    originalCommentContent,
+    setPendingComment,
+    setPendingCommentIndex,
+    setResolveCaptchaPromise,
+    selectedAddress,
+    setSelectedAddress,
+    selectedStyle,
+    selectedTitle,
+    setSelectedTitle,
+    showPostForm,
+    showPostFormLink,
+  } = useGeneralStore((state) => state);
 
-	const { anonymousMode } = useAnonModeStore();
+  const { anonymousMode } = useAnonModeStore();
 
-	const nameRef = useRef();
-	const subjectRef = useRef();
-	const commentRef = useRef();
-	const linkRef = useRef();
-	const selectedThreadCidRef = useRef(null);
-	const virtuosoRef = useRef();
+  const nameRef = useRef();
+  const subjectRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+  const selectedThreadCidRef = useRef(null);
+  const virtuosoRef = useRef();
 
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	const [, setNewErrorMessage] = useError();
-	const [, setNewSuccessMessage] = useSuccess();
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
 
-	const [triggerPublishComment, setTriggerPublishComment] = useState(false);
-	const [prevScrollPos, setPrevScrollPos] = useState(0);
-	const [visible, setVisible] = useState(true);
-	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-	const [deletePost, setDeletePost] = useState(false);
-	const [executeAnonMode, setExecuteAnonMode] = useState(false);
-	const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-	useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
-	const account = useAccount();
-	const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: [`${selectedAddress}`], sortType: 'active' });
-	const { subplebbitAddress } = useParams();
-	const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
-	const stateString = useStateString(subplebbit);
-	let feedWithDescriptionAndRules = [...feed];
+  const account = useAccount();
+  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: [`${selectedAddress}`], sortType: 'active' });
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
+  const stateString = useStateString(subplebbit);
+  let feedWithDescriptionAndRules = [...feed];
 
-	if (subplebbit.rules) {
-		feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
-	}
+  if (subplebbit.rules) {
+    feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
+  }
 
-	if (subplebbit.description) {
-		feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
-	}
+  if (subplebbit.description) {
+    feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
+  }
 
-	const columnWidth = 180;
-	const windowWidth = useWindowWidth();
-	const columnCount = Math.floor(windowWidth / columnWidth);
-	const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
 
-	useEffect(() => {
-		if (subplebbit.roles !== undefined) {
-			const role = subplebbit.roles[account?.author.address]?.role;
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) {
+      const role = subplebbit.roles[account?.author.address]?.role;
 
-			if (role === 'moderator' || role === 'admin' || role === 'owner') {
-				setIsModerator(true);
-			} else {
-				setIsModerator(false);
-			}
-		}
-	}, [account?.author.address, subplebbit.roles, setIsModerator]);
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles, setIsModerator]);
 
-	useEffect(() => {
-		setSelectedAddress(subplebbitAddress);
-	}, [subplebbitAddress, setSelectedAddress]);
+  useEffect(() => {
+    setSelectedAddress(subplebbitAddress);
+  }, [subplebbitAddress, setSelectedAddress]);
 
-	const errorString = useMemo(() => {
-		if (subplebbit?.state === 'failed') {
-			let errorString = 'Failed fetching board "' + selectedAddress + '".';
-			if (subplebbit.error) {
-				errorString += `: ${subplebbit.error.toString().slice(0, 300)}`;
-			}
-			return errorString;
-		}
-	}, [subplebbit?.state, subplebbit?.error, selectedAddress]);
+  const errorString = useMemo(() => {
+    if (subplebbit?.state === 'failed') {
+      let errorString = 'Failed fetching board "' + selectedAddress + '".';
+      if (subplebbit.error) {
+        errorString += `: ${subplebbit.error.toString().slice(0, 300)}`;
+      }
+      return errorString;
+    }
+  }, [subplebbit?.state, subplebbit?.error, selectedAddress]);
 
-	useEffect(() => {
-		if (errorString) {
-			setNewErrorMessage(errorString);
-		}
-	}, [errorString, setNewErrorMessage]);
+  useEffect(() => {
+    if (errorString) {
+      setNewErrorMessage(errorString);
+    }
+  }, [errorString, setNewErrorMessage]);
 
-	const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: selectedAddress });
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: selectedAddress });
 
-	useEffect(() => {
-		const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
-		if (subplebbitAddress) {
-			setSelectedAddress(subplebbitAddress);
-		} else if (subplebbit?.address) {
-			setSelectedAddress(subplebbit.address);
-		}
-		if (selectedSubplebbit) {
-			setSelectedTitle(selectedSubplebbit.title);
-		} else if (subplebbit?.title) {
-			setSelectedTitle(subplebbit.title);
-		}
-	}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
+  useEffect(() => {
+    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
+    if (subplebbitAddress) {
+      setSelectedAddress(subplebbitAddress);
+    } else if (subplebbit?.address) {
+      setSelectedAddress(subplebbit.address);
+    }
+    if (selectedSubplebbit) {
+      setSelectedTitle(selectedSubplebbit.title);
+    } else if (subplebbit?.title) {
+      setSelectedTitle(subplebbit.title);
+    }
+  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
 
-	// mobile navbar scroll effect
-	useEffect(() => {
-		const debouncedHandleScroll = debounce(() => {
-			const currentScrollPos = window.pageYOffset;
-			setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-			setPrevScrollPos(currentScrollPos);
-		}, 50);
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
 
-		window.addEventListener('scroll', debouncedHandleScroll);
+    window.addEventListener('scroll', debouncedHandleScroll);
 
-		return () => window.removeEventListener('scroll', debouncedHandleScroll);
-	}, [prevScrollPos, visible]);
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
 
-	const onChallengeVerification = (challengeVerification) => {
-		if (challengeVerification.challengeSuccess === true) {
-			if (challengeVerification.publication?.cid !== undefined) {
-				navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
-				console.log('challenge success');
-			} else {
-				setNewSuccessMessage('Challenge Success');
-				console.log('challenge success', challengeVerification);
-			}
-		} else if (challengeVerification.challengeSuccess === false) {
-			setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-			console.log('challenge failed', challengeVerification);
-		}
-	};
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+      if (challengeVerification.publication?.cid !== undefined) {
+        navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
+        console.log('challenge success');
+      } else {
+        setNewSuccessMessage('Challenge Success');
+        console.log('challenge success', challengeVerification);
+      }
+    } else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
 
-	const onChallenge = async (challenges, comment) => {
-		setPendingComment(comment);
-		let challengeAnswers = [];
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
 
-		try {
-			challengeAnswers = await getChallengeAnswersFromUser(challenges);
-		} catch (error) {
-			setNewErrorMessage(error.message);
-			console.log(error);
-		}
-		if (challengeAnswers) {
-			await comment.publishChallengeAnswers(challengeAnswers);
-		}
-	};
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges);
+    } catch (error) {
+      setNewErrorMessage(error.message);
+      console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers);
+    }
+  };
 
-	useEffect(() => {
-		setPublishCommentOptions((prevPublishCommentOptions) => ({
-			...prevPublishCommentOptions,
-			subplebbitAddress: selectedAddress,
-		}));
-	}, [selectedAddress]);
+  useEffect(() => {
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      subplebbitAddress: selectedAddress,
+    }));
+  }, [selectedAddress]);
 
-	const [publishCommentOptions, setPublishCommentOptions] = useState({
-		subplebbitAddress: selectedAddress,
-		onChallenge,
-		onChallengeVerification,
-		onError: (error) => {
-			setNewErrorMessage(error.message);
-			console.log(error);
-		},
-	});
+  const [publishCommentOptions, setPublishCommentOptions] = useState({
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message);
+      console.log(error);
+    },
+  });
 
-	const { publishComment, index } = usePublishComment(publishCommentOptions);
+  const { publishComment, index } = usePublishComment(publishCommentOptions);
 
-	useEffect(() => {
-		if (index !== undefined) {
-			setPendingCommentIndex(index);
-			navigate(`/profile/c/${index}`);
-		}
-	}, [index, navigate, setPendingCommentIndex]);
+  useEffect(() => {
+    if (index !== undefined) {
+      setPendingCommentIndex(index);
+      navigate(`/profile/c/${index}`);
+    }
+  }, [index, navigate, setPendingCommentIndex]);
 
-	const resetFields = useCallback(() => {
-		if (nameRef.current) {
-			nameRef.current.value = '';
-		}
-		if (subjectRef.current) {
-			subjectRef.current.value = '';
-		}
-		if (commentRef.current) {
-			commentRef.current.value = '';
-		}
-		if (linkRef.current) {
-			linkRef.current.value = '';
-		}
-	}, []);
+  const resetFields = useCallback(() => {
+    if (nameRef.current) {
+      nameRef.current.value = '';
+    }
+    if (subjectRef.current) {
+      subjectRef.current.value = '';
+    }
+    if (commentRef.current) {
+      commentRef.current.value = '';
+    }
+    if (linkRef.current) {
+      linkRef.current.value = '';
+    }
+  }, []);
 
-	const handleSubmit = async (event) => {
-		event.preventDefault();
+  const handleSubmit = async (event) => {
+    event.preventDefault();
 
-		if (subjectRef.current.value === '') {
-			setNewErrorMessage('Subject field is mandatory');
-			return;
-		}
+    if (subjectRef.current.value === '') {
+      setNewErrorMessage('Subject field is mandatory');
+      return;
+    }
 
-		setPublishCommentOptions((prevPublishCommentOptions) => ({
-			...prevPublishCommentOptions,
-			author: {
-				displayName: nameRef.current.value || undefined,
-				...(anonymousMode ? {} : { address: account?.author.address }),
-			},
-			title: subjectRef.current.value || undefined,
-			content: commentRef.current.value || undefined,
-			link: linkRef.current.value || undefined,
-		}));
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      author: {
+        displayName: nameRef.current.value || undefined,
+        ...(anonymousMode ? {} : { address: account?.author.address }),
+      },
+      title: subjectRef.current.value || undefined,
+      content: commentRef.current.value || undefined,
+      link: linkRef.current.value || undefined,
+    }));
 
-		setTriggerPublishComment(true);
-	};
+    setTriggerPublishComment(true);
+  };
 
-	const updateSigner = useCallback(async () => {
-		if (anonymousMode) {
-			setExecuteAnonMode(true);
+  const updateSigner = useCallback(async () => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
 
-			let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
-			let signer;
+      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+      let signer;
 
-			if (!storedSigners[selectedThreadCidRef]) {
-				signer = await account?.plebbit.createSigner();
-				storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
-				localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
-			} else {
-				const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
+      if (!storedSigners[selectedThreadCidRef]) {
+        signer = await account?.plebbit.createSigner();
+        storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
+        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+      } else {
+        const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
 
-				try {
-					signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
-				} catch (error) {
-					console.log(error);
-				}
-			}
+        try {
+          signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
+        } catch (error) {
+          console.log(error);
+        }
+      }
 
-			setPublishCommentOptions((prevPublishCommentOptions) => {
-				const newPublishCommentOptions = {
-					...prevPublishCommentOptions,
-					signer,
-					author: {
-						...prevPublishCommentOptions.author,
-						address: signer?.address,
-					},
-				};
+      setPublishCommentOptions((prevPublishCommentOptions) => {
+        const newPublishCommentOptions = {
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer?.address,
+          },
+        };
 
-				if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
-					return newPublishCommentOptions;
-				}
+        if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
+          return newPublishCommentOptions;
+        }
 
-				return prevPublishCommentOptions;
-			});
-		}
-	}, [selectedThreadCidRef, anonymousMode, account]);
+        return prevPublishCommentOptions;
+      });
+    }
+  }, [selectedThreadCidRef, anonymousMode, account]);
 
-	useEffect(() => {
-		updateSigner();
-	}, [updateSigner]);
+  useEffect(() => {
+    updateSigner();
+  }, [updateSigner]);
 
-	useEffect(() => {
-		if (publishCommentOptions && triggerPublishComment) {
-			(async () => {
-				await publishComment();
-				resetFields();
-			})();
-			setTriggerPublishComment(false);
-			setExecuteAnonMode(false);
-		}
-	}, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+  useEffect(() => {
+    if (publishCommentOptions && triggerPublishComment) {
+      (async () => {
+        await publishComment();
+        resetFields();
+      })();
+      setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
+    }
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
 
-	const getChallengeAnswersFromUser = async (challenges) => {
-		setChallengesArray(challenges);
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
 
-		return new Promise((resolve, reject) => {
-			const imageString = challenges?.challenges[0].challenge;
-			const imageSource = `data:image/png;base64,${imageString}`;
-			const challengeImg = new Image();
-			challengeImg.src = imageSource;
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
 
-			challengeImg.onload = () => {
-				setIsCaptchaOpen(true);
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
 
-				const handleKeyDown = async (event) => {
-					if (event.key === 'Enter') {
-						const currentCaptchaResponse = captchaResponse;
-						resolve(currentCaptchaResponse);
-						setIsCaptchaOpen(false);
-						document.removeEventListener('keydown', handleKeyDown);
-						event.preventDefault();
-					}
-				};
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
 
-				setCaptchaResponse('');
-				document.addEventListener('keydown', handleKeyDown);
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
 
-				setResolveCaptchaPromise(resolve);
-			};
+        setResolveCaptchaPromise(resolve);
+      };
 
-			challengeImg.onerror = () => {
-				reject(setNewErrorMessage('Could not load challenges'));
-			};
-		});
-	};
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
 
-	// mobile navbar board select functionality
-	const handleSelectChange = (event) => {
-		const selected = event.target.value;
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
 
-		if (selected === 'subscriptions') {
-			navigate(`/p/subscriptions`);
-			return;
-		} else if (selected === 'all') {
-			navigate(`/p/all`);
-			return;
-		}
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
 
-		const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-		setSelectedTitle(selectedTitle);
-		setSelectedAddress(selected);
-		navigate(`/p/${selected}`);
-	};
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
 
-	const handleSubscribe = async () => {
-		try {
-			if (subscribed === false) {
-				await subscribe(selectedAddress);
-			} else if (subscribed === true) {
-				await unsubscribe(selectedAddress);
-			}
-		} catch (error) {
-			setNewErrorMessage(error.message);
-			console.log(error);
-		}
-	};
+  const handleSubscribe = async () => {
+    try {
+      if (subscribed === false) {
+        await subscribe(selectedAddress);
+      } else if (subscribed === true) {
+        await unsubscribe(selectedAddress);
+      }
+    } catch (error) {
+      setNewErrorMessage(error.message);
+      console.log(error);
+    }
+  };
 
-	useEffect(() => {
-		const setLastVirtuosoState = () => {
-			virtuosoRef.current?.getState((snapshot) => {
-				if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
-					lastVirtuosoStates[`${selectedAddress}-catalog`] = snapshot;
-				}
-			});
-		};
-		window.addEventListener('scroll', setLastVirtuosoState);
+  useEffect(() => {
+    const setLastVirtuosoState = () => {
+      virtuosoRef.current?.getState((snapshot) => {
+        if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
+          lastVirtuosoStates[`${selectedAddress}-catalog`] = snapshot;
+        }
+      });
+    };
+    window.addEventListener('scroll', setLastVirtuosoState);
 
-		return () => window.removeEventListener('scroll', setLastVirtuosoState);
-	}, [selectedAddress]);
+    return () => window.removeEventListener('scroll', setLastVirtuosoState);
+  }, [selectedAddress]);
 
-	const lastVirtuosoState = lastVirtuosoStates[`${selectedAddress}-catalog`];
+  const lastVirtuosoState = lastVirtuosoStates[`${selectedAddress}-catalog`];
 
-	return (
-		<>
-			<Helmet>
-				<title>{(selectedTitle ? selectedTitle : selectedAddress) + ' - Catalog - plebchan'}</title>
-			</Helmet>
-			<Container>
-				<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
-				<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
-				<ModerationModal
-					selectedStyle={selectedStyle}
-					isOpen={isModerationOpen}
-					closeModal={() => {
-						setIsModerationOpen(false);
-						setDeletePost(false);
-					}}
-					deletePost={deletePost}
-				/>
-				<EditModal selectedStyle={selectedStyle} isOpen={isEditModalOpen} closeModal={() => setIsEditModalOpen(false)} originalCommentContent={originalCommentContent} />
-				<NavBar selectedStyle={selectedStyle}>
-					<>
-						<span className='boardList'>
-							[
-							<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-								All
-							</Link>
-							 / 
-							<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-								Subscriptions
-							</Link>
-							]&nbsp;[
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							]
-						</span>
-						<span className='nav'>
-							[
-							<span
-								id='button-span'
-								style={{ cursor: 'pointer' }}
-								onClick={() => {
-									window.electron && window.electron.isElectron
-										? setIsCreateBoardOpen(true)
-										: alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-										  );
-								}}
-							>
-								Create Board
-							</span>
-							] [
-							<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
-								Settings
-							</Link>
-							] [<Link to='/'>Home</Link>]
-						</span>
-						<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
-							<div className='nav-container'>
-								<div className='board-select'>
-									<strong>Board</strong>
-									&nbsp;
-									<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
-										<option value='all'>All</option>
-										<option value='subscriptions'>Subscriptions</option>
-										{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
-										{defaultSubplebbits.map((subplebbit) => (
-											<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
-												{subplebbit.title ? subplebbit.title : subplebbit.address}
-											</option>
-										))}
-									</select>
-									 
-									<span
-										id='button-span'
-										style={{ cursor: 'pointer' }}
-										onClick={() =>
-											alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											)
-										}
-									>
-										Create Board
-									</span>
-								</div>
-								<div className='page-jump'>
-									<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
-										Settings
-									</Link>
-									&nbsp;
-									<Link
-										to='/'
-										onClick={() => {
-											handleStyleChange({ target: { value: 'Yotsuba' } });
-											window.scrollTo(0, 0);
-										}}
-									>
-										Home
-									</Link>
-								</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'>{subplebbit.title ?? null}</div>
-							<div className='board-address'>
-								p/{subplebbit.address}
-								<OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
-							</div>
-						</>
-					</>
-				</Header>
-				<Break selectedStyle={selectedStyle} />
-				<PostForm selectedStyle={selectedStyle}>
-					<PostFormLink id='post-form-link' showPostFormLink={showPostFormLink} selectedStyle={selectedStyle}>
-						<div id='post-form-link-desktop'>
-							[
-							<Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => (event.target.style.cursor = 'pointer')}>
-								Start a New Thread
-							</Link>
-							]
-						</div>
-						<div id='post-form-link-mobile'>
-							<span className='btn-wrap'>
-								<Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => (event.target.style.cursor = 'pointer')}>
-									Start a New Thread
-								</Link>
-							</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>
-									{account?.author.displayName ? (
-										<input name='name' type='text' tabIndex={1} defaultValue={account?.author?.displayName} ref={nameRef} />
-									) : (
-										<input name='name' type='text' placeholder='Anonymous' tabIndex={1} 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>
-				<BoardStats subplebbitAddress={subplebbitAddress} />
-				<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}`}
-							onClick={() => {
-								window.scrollTo(0, 0);
-							}}
-						>
-							Return
-						</Link>
-						]{subplebbit.roles && subplebbit?.roles[account?.author?.address]?.role === 'admin' ? <BoardSettings subplebbit={subplebbit} /> : null}
-					</div>
-					{subplebbit.state === 'succeeded' ? (
-						<>
-							<span className='subscribe-button-desktop'>
-								[
-								<span id='subscribe' style={{ cursor: 'pointer' }}>
-									<span onClick={() => handleSubscribe()}>{subscribed ? 'Unsubscribe' : 'Subscribe'}</span>
-								</span>
-								]
-							</span>
-							<span className='subscribe-button-mobile'>
-								<span className='btn-wrap' onClick={() => handleSubscribe()}>
-									{subscribed ? 'Unsubscribe' : 'Subscribe'}
-								</span>
-							</span>
-						</>
-					) : (
-						<div id='stats' style={{ float: 'right', marginTop: '5px' }}>
-							<span className={stateString ? 'ellipsis' : ''}>{stateString}</span>
-						</div>
-					)}
-					<div id='return-button-mobile'>
-						<span className='btn-wrap-catalog btn-wrap'>
-							<Link
-								to={`/p/${selectedAddress}`}
-								onClick={() => {
-									window.scrollTo(0, 0);
-								}}
-							>
-								Return
-							</Link>
-						</span>
-					</div>
-					<hr />
-				</TopBar>
-				<Tooltip id='tooltip' className='tooltip' />
-				<Threads selectedStyle={selectedStyle}>
-					{subplebbit?.state !== 'failed' && subplebbit.state === 'succeeded' ? (
-						<Virtuoso
-							increaseViewportBy={{ bottom: 600, top: 600 }}
-							totalCount={rows?.length || 0}
-							data={rows}
-							style={{ maxWidth: '100%' }}
-							itemContent={(index, row) => <CatalogRow index={index} row={row} />}
-							useWindowScroll={true}
-							components={{ Footer: () => (hasMore ? <CatalogLoader /> : null) }}
-							endReached={loadMore}
-							ref={virtuosoRef}
-							restoreStateFrom={lastVirtuosoState}
-							initialScrollTop={lastVirtuosoState?.scrollTop}
-						/>
-					) : (
-						<CatalogLoader />
-					)}
-				</Threads>
-				<Footer selectedStyle={selectedStyle}>
-					<Break
-						id='break'
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '-36px',
-							width: '100%',
-						}}
-					/>
-					<Break
-						selectedStyle={selectedStyle}
-						style={{
-							width: '100%',
-						}}
-					/>
-					<span
-						className='style-changer'
-						style={{
-							float: 'right',
-							marginTop: '2px',
-						}}
-					>
-						Style:  
-						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-							<option value='Yotsuba'>Yotsuba</option>
-							<option value='Yotsuba-B'>Yotsuba B</option>
-							<option value='Futaba'>Futaba</option>
-							<option value='Burichan'>Burichan</option>
-							<option value='Tomorrow'>Tomorrow</option>
-							<option value='Photon'>Photon</option>
-						</select>
-					</span>
-					<NavBar
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '42px',
-						}}
-					>
-						<>
-							<span className='boardList'>
-								[
-								<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-									All
-								</Link>
-								 / 
-								<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-									Subscriptions
-								</Link>
-								]&nbsp;
-							</span>
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							<span className='nav'>
-								[
-								<span
-									id='button-span'
-									style={{ cursor: 'pointer' }}
-									onClick={() => {
-										window.electron && window.electron.isElectron
-											? setIsCreateBoardOpen(true)
-											: alert(
-													'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											  );
-									}}
-								>
-									Create Board
-								</span>
-								] [
-								<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
-									Settings
-								</Link>
-								] [
-								<Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
-									Home
-								</Link>
-								]
-							</span>
-						</>
-					</NavBar>
-					<div id='version'>
-						plebchan v{version}
-						{commitRef}. GPL-2.0
-					</div>
-					<div
-						className='footer-links'
-						style={{
-							textAlign: 'center',
-							fontSize: 'x-small',
-							fontFamily: 'arial',
-							marginTop: '5px',
-							marginBottom: '15px',
-						}}
-					>
-						<a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
-							About
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
-							App
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
-							Twitter
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
-							Telegram
-						</a>
-					</div>
-				</Footer>
-			</Container>
-		</>
-	);
+  return (
+    <>
+      <Helmet>
+        <title>{(selectedTitle ? selectedTitle : selectedAddress) + ' - Catalog - plebchan'}</title>
+      </Helmet>
+      <Container>
+        <CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
+        <SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
+        <ModerationModal
+          selectedStyle={selectedStyle}
+          isOpen={isModerationOpen}
+          closeModal={() => {
+            setIsModerationOpen(false);
+            setDeletePost(false);
+          }}
+          deletePost={deletePost}
+        />
+        <EditModal selectedStyle={selectedStyle} isOpen={isEditModalOpen} closeModal={() => setIsEditModalOpen(false)} originalCommentContent={originalCommentContent} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            <span className='boardList'>
+              [
+              <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                All
+              </Link>
+               / 
+              <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                Subscriptions
+              </Link>
+              ]&nbsp;[
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              ]
+            </span>
+            <span className='nav'>
+              [
+              <span
+                id='button-span'
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  window.electron && window.electron.isElectron
+                    ? setIsCreateBoardOpen(true)
+                    : alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      );
+                }}
+              >
+                Create Board
+              </span>
+              ] [
+              <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
+                Settings
+              </Link>
+              ] [<Link to='/'>Home</Link>]
+            </span>
+            <div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
+              <div className='nav-container'>
+                <div className='board-select'>
+                  <strong>Board</strong>
+                  &nbsp;
+                  <select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
+                    <option value='all'>All</option>
+                    <option value='subscriptions'>Subscriptions</option>
+                    {!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
+                    {defaultSubplebbits.map((subplebbit) => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}>
+                        {subplebbit.title ? subplebbit.title : subplebbit.address}
+                      </option>
+                    ))}
+                  </select>
+                   
+                  <span
+                    id='button-span'
+                    style={{ cursor: 'pointer' }}
+                    onClick={() =>
+                      alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      )
+                    }
+                  >
+                    Create Board
+                  </span>
+                </div>
+                <div className='page-jump'>
+                  <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
+                    Settings
+                  </Link>
+                  &nbsp;
+                  <Link
+                    to='/'
+                    onClick={() => {
+                      handleStyleChange({ target: { value: 'Yotsuba' } });
+                      window.scrollTo(0, 0);
+                    }}
+                  >
+                    Home
+                  </Link>
+                </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'>{subplebbit.title ?? null}</div>
+              <div className='board-address'>
+                p/{subplebbit.address}
+                <OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
+              </div>
+            </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle}>
+          <PostFormLink id='post-form-link' showPostFormLink={showPostFormLink} selectedStyle={selectedStyle}>
+            <div id='post-form-link-desktop'>
+              [
+              <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => (event.target.style.cursor = 'pointer')}>
+                Start a New Thread
+              </Link>
+              ]
+            </div>
+            <div id='post-form-link-mobile'>
+              <span className='btn-wrap'>
+                <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => (event.target.style.cursor = 'pointer')}>
+                  Start a New Thread
+                </Link>
+              </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>
+                  {account?.author.displayName ? (
+                    <input name='name' type='text' tabIndex={1} defaultValue={account?.author?.displayName} ref={nameRef} />
+                  ) : (
+                    <input name='name' type='text' placeholder='Anonymous' tabIndex={1} 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>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
+        <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}`}
+              onClick={() => {
+                window.scrollTo(0, 0);
+              }}
+            >
+              Return
+            </Link>
+            ]{subplebbit.roles && subplebbit?.roles[account?.author?.address]?.role === 'admin' ? <BoardSettings subplebbit={subplebbit} /> : null}
+          </div>
+          {subplebbit.state === 'succeeded' ? (
+            <>
+              <span className='subscribe-button-desktop'>
+                [
+                <span id='subscribe' style={{ cursor: 'pointer' }}>
+                  <span onClick={() => handleSubscribe()}>{subscribed ? 'Unsubscribe' : 'Subscribe'}</span>
+                </span>
+                ]
+              </span>
+              <span className='subscribe-button-mobile'>
+                <span className='btn-wrap' onClick={() => handleSubscribe()}>
+                  {subscribed ? 'Unsubscribe' : 'Subscribe'}
+                </span>
+              </span>
+            </>
+          ) : (
+            <div id='stats' style={{ float: 'right', marginTop: '5px' }}>
+              <span className={stateString ? 'ellipsis' : ''}>{stateString}</span>
+            </div>
+          )}
+          <div id='return-button-mobile'>
+            <span className='btn-wrap-catalog btn-wrap'>
+              <Link
+                to={`/p/${selectedAddress}`}
+                onClick={() => {
+                  window.scrollTo(0, 0);
+                }}
+              >
+                Return
+              </Link>
+            </span>
+          </div>
+          <hr />
+        </TopBar>
+        <Tooltip id='tooltip' className='tooltip' />
+        <Threads selectedStyle={selectedStyle}>
+          {subplebbit?.state !== 'failed' && subplebbit.state === 'succeeded' ? (
+            <Virtuoso
+              increaseViewportBy={{ bottom: 600, top: 600 }}
+              totalCount={rows?.length || 0}
+              data={rows}
+              style={{ maxWidth: '100%' }}
+              itemContent={(index, row) => <CatalogRow index={index} row={row} />}
+              useWindowScroll={true}
+              components={{ Footer: () => (hasMore ? <CatalogLoader /> : null) }}
+              endReached={loadMore}
+              ref={virtuosoRef}
+              restoreStateFrom={lastVirtuosoState}
+              initialScrollTop={lastVirtuosoState?.scrollTop}
+            />
+          ) : (
+            <CatalogLoader />
+          )}
+        </Threads>
+        <Footer selectedStyle={selectedStyle}>
+          <Break
+            id='break'
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '-36px',
+              width: '100%',
+            }}
+          />
+          <Break
+            selectedStyle={selectedStyle}
+            style={{
+              width: '100%',
+            }}
+          />
+          <span
+            className='style-changer'
+            style={{
+              float: 'right',
+              marginTop: '2px',
+            }}
+          >
+            Style:  
+            <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+              <option value='Yotsuba'>Yotsuba</option>
+              <option value='Yotsuba-B'>Yotsuba B</option>
+              <option value='Futaba'>Futaba</option>
+              <option value='Burichan'>Burichan</option>
+              <option value='Tomorrow'>Tomorrow</option>
+              <option value='Photon'>Photon</option>
+            </select>
+          </span>
+          <NavBar
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '42px',
+            }}
+          >
+            <>
+              <span className='boardList'>
+                [
+                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                  All
+                </Link>
+                 / 
+                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                  Subscriptions
+                </Link>
+                ]&nbsp;
+              </span>
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              <span className='nav'>
+                [
+                <span
+                  id='button-span'
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    window.electron && window.electron.isElectron
+                      ? setIsCreateBoardOpen(true)
+                      : alert(
+                          'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                        );
+                  }}
+                >
+                  Create Board
+                </span>
+                ] [
+                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>
+                  Settings
+                </Link>
+                ] [
+                <Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
+                  Home
+                </Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id='version'>
+            plebchan v{version}
+            {commitRef}. GPL-2.0
+          </div>
+          <div
+            className='footer-links'
+            style={{
+              textAlign: 'center',
+              fontSize: 'x-small',
+              fontFamily: 'arial',
+              marginTop: '5px',
+              marginBottom: '15px',
+            }}
+          >
+            <a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+              About
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
+              App
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
+              Twitter
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
+              Telegram
+            </a>
+          </div>
+        </Footer>
+      </Container>
+    </>
+  );
 };
 
 export default Catalog;
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index b9b49427..b6467822 100644
--- a/src/components/views/Description.jsx
+++ b/src/components/views/Description.jsx
@@ -24,753 +24,753 @@ const { version } = packageJson;
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 const Description = () => {
-	const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
-		(state) => state,
-	);
+  const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
+    (state) => state,
+  );
 
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	const threadMenuRefs = useRef({});
-	const threadMenuRefsMobile = useRef({});
-	const postMenuMobileRef = useRef(null);
-	const postMenuCatalogRef = useRef(null);
+  const threadMenuRefs = useRef({});
+  const threadMenuRefsMobile = useRef({});
+  const postMenuMobileRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
 
-	const [isAdminListOpen, setIsAdminListOpen] = useState(false);
-	const [prevScrollPos, setPrevScrollPos] = useState(0);
-	const [visible, setVisible] = useState(true);
-	const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-	const [mobileMenuPosition, setMobileMenuPosition] = useState({ top: 0, left: 0 });
-	const [openMenuCid, setOpenMenuCid] = useState(null);
-	const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
-	const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-	const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-	const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [mobileMenuPosition, setMobileMenuPosition] = useState({ top: 0, left: 0 });
+  const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
 
-	const { subplebbitAddress } = useParams();
-	const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
 
-	const handleOptionClick = () => {
-		setOpenMenuCid(null);
-	};
+  const handleOptionClick = () => {
+    setOpenMenuCid(null);
+  };
 
-	const handleMobileOptionClick = () => {
-		setOpenMobileMenuCid(null);
-	};
+  const handleMobileOptionClick = () => {
+    setOpenMobileMenuCid(null);
+  };
 
-	const handleOutsideClick = useCallback(
-		(e) => {
-			if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
-				setOpenMenuCid(null);
-			}
-		},
-		[openMenuCid, postMenuCatalogRef],
-	);
+  const handleOutsideClick = useCallback(
+    (e) => {
+      if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
+        setOpenMenuCid(null);
+      }
+    },
+    [openMenuCid, postMenuCatalogRef],
+  );
 
-	const handleMobileOutsideClick = useCallback(
-		(e) => {
-			if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
-				setOpenMobileMenuCid(null);
-			}
-		},
-		[openMobileMenuCid, postMenuMobileRef],
-	);
+  const handleMobileOutsideClick = useCallback(
+    (e) => {
+      if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
+        setOpenMobileMenuCid(null);
+      }
+    },
+    [openMobileMenuCid, postMenuMobileRef],
+  );
 
-	useEffect(() => {
-		if (openMenuCid !== null) {
-			document.addEventListener('click', handleOutsideClick);
-		} else {
-			document.removeEventListener('click', handleOutsideClick);
-		}
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
 
-		return () => {
-			document.removeEventListener('click', handleOutsideClick);
-		};
-	}, [openMenuCid, handleOutsideClick]);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid, handleOutsideClick]);
 
-	useEffect(() => {
-		if (openMobileMenuCid !== null) {
-			document.addEventListener('click', handleMobileOutsideClick);
-		} else {
-			document.removeEventListener('click', handleMobileOutsideClick);
-		}
+  useEffect(() => {
+    if (openMobileMenuCid !== null) {
+      document.addEventListener('click', handleMobileOutsideClick);
+    } else {
+      document.removeEventListener('click', handleMobileOutsideClick);
+    }
 
-		return () => {
-			document.removeEventListener('click', handleMobileOutsideClick);
-		};
-	}, [openMobileMenuCid, handleMobileOutsideClick]);
+    return () => {
+      document.removeEventListener('click', handleMobileOutsideClick);
+    };
+  }, [openMobileMenuCid, handleMobileOutsideClick]);
 
-	useEffect(() => {
-		window.scrollTo(0, 0);
-	}, []);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
-	useEffect(() => {
-		const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
-		if (subplebbitAddress) {
-			setSelectedAddress(subplebbitAddress);
-		} else if (subplebbit?.address) {
-			setSelectedAddress(subplebbit.address);
-		}
-		if (selectedSubplebbit) {
-			setSelectedTitle(selectedSubplebbit.title);
-		} else if (subplebbit?.title) {
-			setSelectedTitle(subplebbit.title);
-		}
-	}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
+  useEffect(() => {
+    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
+    if (subplebbitAddress) {
+      setSelectedAddress(subplebbitAddress);
+    } else if (subplebbit?.address) {
+      setSelectedAddress(subplebbit.address);
+    }
+    if (selectedSubplebbit) {
+      setSelectedTitle(selectedSubplebbit.title);
+    } else if (subplebbit?.title) {
+      setSelectedTitle(subplebbit.title);
+    }
+  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
 
-	// mobile navbar scroll effect
-	useEffect(() => {
-		const debouncedHandleScroll = debounce(() => {
-			const currentScrollPos = window.scrollY;
-			setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-			setPrevScrollPos(currentScrollPos);
-		}, 50);
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.scrollY;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
 
-		window.addEventListener('scroll', debouncedHandleScroll);
+    window.addEventListener('scroll', debouncedHandleScroll);
 
-		return () => window.removeEventListener('scroll', debouncedHandleScroll);
-	}, [prevScrollPos, visible]);
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
 
-	// mobile navbar board select functionality
-	const handleSelectChange = (event) => {
-		const selected = event.target.value;
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
 
-		if (selected === 'subscriptions') {
-			navigate(`/p/subscriptions`);
-			return;
-		} else if (selected === 'all') {
-			navigate(`/p/all`);
-			return;
-		}
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
 
-		const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-		setSelectedTitle(selectedTitle);
-		setSelectedAddress(selected);
-		navigate(`/p/${selected}`);
-	};
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
 
-	return (
-		<>
-			<Helmet>
-				<title>{'Board Description - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
-			</Helmet>
-			<Container>
-				<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
-				<AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
-				<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
-				<NavBar selectedStyle={selectedStyle}>
-					<>
-						<span className='boardList'>
-							[
-							<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-								All
-							</Link>
-							 / 
-							<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-								Subscriptions
-							</Link>
-							]&nbsp;[
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							]
-						</span>
-						<span className='nav'>
-							[
-							<span
-								id='button-span'
-								style={{ cursor: 'pointer' }}
-								onClick={() => {
-									window.electron && window.electron.isElectron
-										? setIsCreateBoardOpen(true)
-										: alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-										  );
-								}}
-							>
-								Create Board
-							</span>
-							] [
-							<Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
-								Settings
-							</Link>
-							] [<Link to='/'>Home</Link>]
-						</span>
-						<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
-							<div className='nav-container'>
-								<div className='board-select'>
-									<strong>Board</strong>
-									&nbsp;
-									<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
-										<option value='all'>All</option>
-										<option value='subscriptions'>Subscriptions</option>
-										{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
-										{defaultSubplebbits.map((subplebbit) => (
-											<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
-												{subplebbit.title ? subplebbit.title : subplebbit.address}
-											</option>
-										))}
-									</select>
-									 
-									<span
-										id='button-span'
-										style={{ cursor: 'pointer' }}
-										onClick={() =>
-											alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											)
-										}
-									>
-										Create Board
-									</span>
-								</div>
-								<div className='page-jump'>
-									<Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
-										Settings
-									</Link>
-									&nbsp;
-									<Link
-										to='/'
-										onClick={() => {
-											handleStyleChange({ target: { value: 'Yotsuba' } });
-											window.scrollTo(0, 0);
-										}}
-									>
-										Home
-									</Link>
-								</div>
-							</div>
-						</div>
-						<div id='separator-mobile'>&nbsp;</div>
-						<div id='separator-mobile'>&nbsp;</div>
-					</>
-				</NavBar>
-				<Header selectedStyle={selectedStyle}>
-					<>
-						<div className='banner'>
-							<ImageBanner />
-						</div>
-						<>
-							<div className='board-title'>{subplebbit.title ?? null}</div>
-							<div className='board-address'>
-								p/{subplebbit.address}
-								<OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
-							</div>
-						</>
-					</>
-				</Header>
-				<Break selectedStyle={selectedStyle} />
-				<PostForm selectedStyle={selectedStyle}>
-					<ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
-						<div id='return-button-mobile'>
-							<span
-								className='btn-wrap'
-								onClick={() => {
-									window.scrollTo(0, 0);
-								}}
-							>
-								<Link to={`/p/${selectedAddress}`}>Return</Link>
-							</span>
-						</div>
-						<div id='catalog-button-mobile'>
-							<span className='btn-wrap'>
-								<Link
-									to={`/p/${selectedAddress}/catalog`}
-									onClick={() => {
-										window.scrollTo(0, 0);
-									}}
-								>
-									Catalog
-								</Link>
-							</span>
-						</div>
-						<div id='bottom-button-mobile'>
-							<span className='btn-wrap'>
-								<span
-									style={{ cursor: 'pointer' }}
-									onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-									onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
-								>
-									Bottom
-								</span>
-							</span>
-						</div>
-					</ReplyFormLink>
-				</PostForm>
-				<BoardStats subplebbitAddress={selectedAddress} />
-				<TopBar selectedStyle={selectedStyle}>
-					<span className='style-changer'>
-						Style:  
-						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-							<option value='Yotsuba'>Yotsuba</option>
-							<option value='Yotsuba-B'>Yotsuba B</option>
-							<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'>
-						[
-						<span
-							id='button'
-							style={{ cursor: 'pointer' }}
-							onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-							onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
-							onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
-						>
-							Bottom
-						</span>
-						]
-					</span>
-				</TopBar>
-				<Tooltip id='tooltip' className='tooltip' />
-				<BoardForm selectedStyle={selectedStyle}>
-					<>
-						<div className='thread'>
-							<div
-								className='op-container'
-								style={{
-									display: subplebbit.rules ? 'grid' : 'block',
-									marginBottom: '10px',
-								}}
-							>
-								<div className='post op op-desktop'>
-									<hr />
-									<div className='post-info'>
-										{subplebbit.suggested?.avatarUrl ? (
-											<div className='file' style={{ marginBottom: '5px' }}>
-												<div className='file-text'>
-													Link:&nbsp;
-													<a href={subplebbit.suggested?.avatarUrl} target='_blank' rel='noopener noreferrer'>
-														{subplebbit.suggested?.avatarUrl.length > 30 ? subplebbit.suggested?.avatarUrl.slice(0, 30) + '...' : subplebbit.suggested?.avatarUrl}
-													</a>
-													&nbsp;(image)
-												</div>
-												<div className='img-container'>
-													<span className='file-thumb'>
-														<img src={subplebbit.suggested?.avatarUrl} alt='board avatar' onClick={handleImageClick} style={{ cursor: 'pointer' }} />
-													</span>
-												</div>
-											</div>
-										) : null}
-										<span className='name-block'>
-											<span className='title'>Welcome to {subplebbit.title || subplebbit.address}</span>
-											&nbsp;
-											<span
-												className='name capcode'
-												style={{ cursor: 'pointer' }}
-												onClick={() => {
-													setIsAdminListOpen(!isAdminListOpen);
-												}}
-											>
-												## Board Admins
-											</span>
-											&nbsp;
-											<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
-											&nbsp;
-											<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
-											&nbsp;
-											<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
-											<span>
-												&nbsp; [
-												<Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
-													Reply
-												</Link>
-												]
-											</span>
-											<PostMenu
-												title='Post menu'
-												ref={(el) => {
-													threadMenuRefs.current[subplebbit.pubsubTopic] = el;
-												}}
-												className='post-menu-button'
-												rotated={openMenuCid === subplebbit.pubsubTopic}
-												onClick={(event) => {
-													event.stopPropagation();
-													const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
-													setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-													setOpenMenuCid((prevCid) => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
-												}}
-											>
-												▶
-											</PostMenu>
-											{createPortal(
-												<PostMenuCatalog
-													selectedStyle={selectedStyle}
-													ref={(el) => {
-														postMenuCatalogRef.current = el;
-													}}
-													onClick={(event) => event.stopPropagation()}
-													style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-												>
-													<div
-														className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
-														style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
-													>
-														<ul className='post-menu-catalog'>
-															{/* {isModerator ? (
+  return (
+    <>
+      <Helmet>
+        <title>{'Board Description - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
+      </Helmet>
+      <Container>
+        <CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
+        <AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
+        <SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            <span className='boardList'>
+              [
+              <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                All
+              </Link>
+               / 
+              <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                Subscriptions
+              </Link>
+              ]&nbsp;[
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              ]
+            </span>
+            <span className='nav'>
+              [
+              <span
+                id='button-span'
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  window.electron && window.electron.isElectron
+                    ? setIsCreateBoardOpen(true)
+                    : alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      );
+                }}
+              >
+                Create Board
+              </span>
+              ] [
+              <Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
+                Settings
+              </Link>
+              ] [<Link to='/'>Home</Link>]
+            </span>
+            <div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
+              <div className='nav-container'>
+                <div className='board-select'>
+                  <strong>Board</strong>
+                  &nbsp;
+                  <select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
+                    <option value='all'>All</option>
+                    <option value='subscriptions'>Subscriptions</option>
+                    {!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
+                    {defaultSubplebbits.map((subplebbit) => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}>
+                        {subplebbit.title ? subplebbit.title : subplebbit.address}
+                      </option>
+                    ))}
+                  </select>
+                   
+                  <span
+                    id='button-span'
+                    style={{ cursor: 'pointer' }}
+                    onClick={() =>
+                      alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      )
+                    }
+                  >
+                    Create Board
+                  </span>
+                </div>
+                <div className='page-jump'>
+                  <Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
+                    Settings
+                  </Link>
+                  &nbsp;
+                  <Link
+                    to='/'
+                    onClick={() => {
+                      handleStyleChange({ target: { value: 'Yotsuba' } });
+                      window.scrollTo(0, 0);
+                    }}
+                  >
+                    Home
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div id='separator-mobile'>&nbsp;</div>
+            <div id='separator-mobile'>&nbsp;</div>
+          </>
+        </NavBar>
+        <Header selectedStyle={selectedStyle}>
+          <>
+            <div className='banner'>
+              <ImageBanner />
+            </div>
+            <>
+              <div className='board-title'>{subplebbit.title ?? null}</div>
+              <div className='board-address'>
+                p/{subplebbit.address}
+                <OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
+              </div>
+            </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle}>
+          <ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
+            <div id='return-button-mobile'>
+              <span
+                className='btn-wrap'
+                onClick={() => {
+                  window.scrollTo(0, 0);
+                }}
+              >
+                <Link to={`/p/${selectedAddress}`}>Return</Link>
+              </span>
+            </div>
+            <div id='catalog-button-mobile'>
+              <span className='btn-wrap'>
+                <Link
+                  to={`/p/${selectedAddress}/catalog`}
+                  onClick={() => {
+                    window.scrollTo(0, 0);
+                  }}
+                >
+                  Catalog
+                </Link>
+              </span>
+            </div>
+            <div id='bottom-button-mobile'>
+              <span className='btn-wrap'>
+                <span
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+                  onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+                >
+                  Bottom
+                </span>
+              </span>
+            </div>
+          </ReplyFormLink>
+        </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
+        <TopBar selectedStyle={selectedStyle}>
+          <span className='style-changer'>
+            Style:  
+            <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+              <option value='Yotsuba'>Yotsuba</option>
+              <option value='Yotsuba-B'>Yotsuba B</option>
+              <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'>
+            [
+            <span
+              id='button'
+              style={{ cursor: 'pointer' }}
+              onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+              onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+              onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
+            >
+              Bottom
+            </span>
+            ]
+          </span>
+        </TopBar>
+        <Tooltip id='tooltip' className='tooltip' />
+        <BoardForm selectedStyle={selectedStyle}>
+          <>
+            <div className='thread'>
+              <div
+                className='op-container'
+                style={{
+                  display: subplebbit.rules ? 'grid' : 'block',
+                  marginBottom: '10px',
+                }}
+              >
+                <div className='post op op-desktop'>
+                  <hr />
+                  <div className='post-info'>
+                    {subplebbit.suggested?.avatarUrl ? (
+                      <div className='file' style={{ marginBottom: '5px' }}>
+                        <div className='file-text'>
+                          Link:&nbsp;
+                          <a href={subplebbit.suggested?.avatarUrl} target='_blank' rel='noopener noreferrer'>
+                            {subplebbit.suggested?.avatarUrl.length > 30 ? subplebbit.suggested?.avatarUrl.slice(0, 30) + '...' : subplebbit.suggested?.avatarUrl}
+                          </a>
+                          &nbsp;(image)
+                        </div>
+                        <div className='img-container'>
+                          <span className='file-thumb'>
+                            <img src={subplebbit.suggested?.avatarUrl} alt='board avatar' onClick={handleImageClick} style={{ cursor: 'pointer' }} />
+                          </span>
+                        </div>
+                      </div>
+                    ) : null}
+                    <span className='name-block'>
+                      <span className='title'>Welcome to {subplebbit.title || subplebbit.address}</span>
+                      &nbsp;
+                      <span
+                        className='name capcode'
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setIsAdminListOpen(!isAdminListOpen);
+                        }}
+                      >
+                        ## Board Mods
+                      </span>
+                      &nbsp;
+                      <span className='date-time'>{getDate(subplebbit.createdAt)}</span>
+                      &nbsp;
+                      <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
+                      &nbsp;
+                      <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
+                      <span>
+                        &nbsp; [
+                        <Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
+                          Reply
+                        </Link>
+                        ]
+                      </span>
+                      <PostMenu
+                        title='Post menu'
+                        ref={(el) => {
+                          threadMenuRefs.current[subplebbit.pubsubTopic] = el;
+                        }}
+                        className='post-menu-button'
+                        rotated={openMenuCid === subplebbit.pubsubTopic}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
+                          setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                          setOpenMenuCid((prevCid) => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
+                        }}
+                      >
+                        ▶
+                      </PostMenu>
+                      {createPortal(
+                        <PostMenuCatalog
+                          selectedStyle={selectedStyle}
+                          ref={(el) => {
+                            postMenuCatalogRef.current = el;
+                          }}
+                          onClick={(event) => event.stopPropagation()}
+                          style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
+                        >
+                          <div
+                            className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
+                            style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
+                          >
+                            <ul className='post-menu-catalog'>
+                              {/* {isModerator ? (
                               <>
                                 change description
                               </>
                             ) : null} */}
-															{subplebbit.suggested?.avatarUrl ? (
-																<li
-																	onMouseOver={() => {
-																		setIsImageSearchOpen(true);
-																	}}
-																	onMouseLeave={() => {
-																		setIsImageSearchOpen(false);
-																	}}
-																>
-																	Image search »
-																	<ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
-																		<li onClick={() => handleOptionClick('description')}>
-																			<a href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-																				Google
-																			</a>
-																		</li>
-																		<li onClick={() => handleOptionClick('description')}>
-																			<a href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-																				Yandex
-																			</a>
-																		</li>
-																		<li onClick={() => handleOptionClick('description')}>
-																			<a href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
-																				SauceNAO
-																			</a>
-																		</li>
-																	</ul>
-																</li>
-															) : null}
-															<li
-																onMouseOver={() => {
-																	setIsClientRedirectMenuOpen(true);
-																}}
-																onMouseLeave={() => {
-																	setIsClientRedirectMenuOpen(false);
-																}}
-															>
-																View on »
-																<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-																	<li onClick={() => handleOptionClick('description')}>
-																		<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-																			Plebbit
-																		</a>
-																	</li>
-																	{/* <li onClick={() => handleOptionClick("description")}>
+                              {subplebbit.suggested?.avatarUrl ? (
+                                <li
+                                  onMouseOver={() => {
+                                    setIsImageSearchOpen(true);
+                                  }}
+                                  onMouseLeave={() => {
+                                    setIsImageSearchOpen(false);
+                                  }}
+                                >
+                                  Image search »
+                                  <ul className='dropdown-menu post-menu-catalog' style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
+                                    <li onClick={() => handleOptionClick('description')}>
+                                      <a href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                                        Google
+                                      </a>
+                                    </li>
+                                    <li onClick={() => handleOptionClick('description')}>
+                                      <a href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                                        Yandex
+                                      </a>
+                                    </li>
+                                    <li onClick={() => handleOptionClick('description')}>
+                                      <a href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`} target='_blank' rel='noreferrer'>
+                                        SauceNAO
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </li>
+                              ) : null}
+                              <li
+                                onMouseOver={() => {
+                                  setIsClientRedirectMenuOpen(true);
+                                }}
+                                onMouseLeave={() => {
+                                  setIsClientRedirectMenuOpen(false);
+                                }}
+                              >
+                                View on »
+                                <ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
+                                  <li onClick={() => handleOptionClick('description')}>
+                                    <a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                                      Plebbit
+                                    </a>
+                                  </li>
+                                  {/* <li onClick={() => handleOptionClick("description")}>
                                   <a
                                   href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
                                   target="_blank" rel="noreferrer"
                                   >Seedit</a>
                                 </li> */}
-																	<li onClick={() => handleOptionClick('description')}>
-																		<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-																			Plebones
-																		</a>
-																	</li>
-																</ul>
-															</li>
-														</ul>
-													</div>
-												</PostMenuCatalog>,
-												document.body,
-											)}
-										</span>
-										<blockquote>
-											<div className='custom-paragraph'>
-												<Post content={subplebbit.description} />
-											</div>
-										</blockquote>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div className='thread-mobile'>
-							<hr />
-							<div className='op-container'>
-								<div className='post op op-mobile'>
-									<div className='post-info-mobile'>
-										<button
-											key={`mob-pb-`}
-											className='post-menu-button-mobile'
-											ref={(el) => {
-												threadMenuRefsMobile.current['description'] = el;
-											}}
-											onClick={(event) => {
-												event.stopPropagation();
-												const rect = threadMenuRefsMobile.current['description'].getBoundingClientRect();
-												setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-												setOpenMobileMenuCid((prevCid) => (prevCid === 'description' ? null : 'description'));
-											}}
-											style={{ all: 'unset', cursor: 'pointer' }}
-										>
-											...
-										</button>
-										{createPortal(
-											<PostMenuMobile
-												selectedStyle={selectedStyle}
-												ref={(el) => {
-													postMenuMobileRef.current = el;
-												}}
-												onClick={(event) => event.stopPropagation()}
-												style={{
-													position: 'absolute',
-													display: openMobileMenuCid === 'description' ? 'block' : 'none',
-													top: mobileMenuPosition.top + 20,
-													left: mobileMenuPosition.left,
-												}}
-											>
-												<ul className={`post-menu-mobile-thread-description`}>
-													{subplebbit.suggested?.avatarUrl ? (
-														<>
-															<li onClick={() => handleMobileOptionClick('description')}>
-																<a
-																	style={{ color: 'inherit', textDecoration: 'none' }}
-																	href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
-																	target='_blank'
-																	rel='noreferrer'
-																>
-																	Search image on Google
-																</a>
-															</li>
-															<li onClick={() => handleMobileOptionClick('description')}>
-																<a
-																	style={{ color: 'inherit', textDecoration: 'none' }}
-																	href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
-																	target='_blank'
-																	rel='noreferrer'
-																>
-																	Search image on Yandex
-																</a>
-															</li>
-															<li onClick={() => handleMobileOptionClick('description')}>
-																<a
-																	style={{ color: 'inherit', textDecoration: 'none' }}
-																	href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
-																	target='_blank'
-																	rel='noreferrer'
-																>
-																	Search image on SauceNAO
-																</a>
-															</li>
-														</>
-													) : null}
-													<a
-														style={{ color: 'inherit', textDecoration: 'none' }}
-														href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
-														target='_blank'
-														rel='noreferrer'
-													>
-														<li onClick={() => handleMobileOptionClick('description')}>View on plebbit</li>
-													</a>
-													<a
-														style={{ color: 'inherit', textDecoration: 'none' }}
-														href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
-														target='_blank'
-														rel='noreferrer'
-													>
-														<li onClick={() => handleMobileOptionClick('description')}>View on plebones</li>
-													</a>
-												</ul>
-											</PostMenuMobile>,
-											document.body,
-										)}
-										<span className='name-block-mobile'>
-											<span
-												className='name-mobile capcode'
-												style={{ cursor: 'pointer' }}
-												onClick={() => {
-													setIsAdminListOpen(!isAdminListOpen);
-												}}
-											>
-												## Board Admins
-											</span>
-											&nbsp;
-											<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-												<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
-												&nbsp;
-												<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
-											</span>
-											<br />
-											<span className='subject-mobile' style={{ marginBottom: '-15px' }}>
-												Welcome to {subplebbit.title || subplebbit.address}
-											</span>
-											&nbsp;
-										</span>
-										<span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
-										&nbsp;
-									</div>
-									{subplebbit.suggested?.avatarUrl ? (
-										<div className='file-mobile'>
-											<div className='img-container'>
-												<span className='file-thumb-mobile'>
-													<img src={subplebbit.suggested?.avatarUrl} alt='board avatar' onClick={handleImageClick} style={{ cursor: 'pointer' }} />
-													<div className='file-info-mobile'>image</div>
-												</span>
-											</div>
-										</div>
-									) : null}
-									<blockquote className='post-message-mobile'>
-										<div className='custom-paragraph'>
-											<Post content={subplebbit.description} />
-										</div>
-									</blockquote>
-								</div>
-								<div className='post-link-mobile'>
-									<Link to={() => {}} className='button-mobile'>
-										View Thread
-									</Link>
-								</div>
-							</div>
-						</div>
-					</>
-				</BoardForm>
-				<Footer selectedStyle={selectedStyle}>
-					<Break
-						id='break'
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '-36px',
-							width: '100%',
-						}}
-					/>
-					<Break
-						selectedStyle={selectedStyle}
-						style={{
-							width: '100%',
-						}}
-					/>
-					<span
-						className='style-changer'
-						style={{
-							float: 'right',
-							marginTop: '2px',
-						}}
-					>
-						Style:  
-						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-							<option value='Yotsuba'>Yotsuba</option>
-							<option value='Yotsuba-B'>Yotsuba B</option>
-							<option value='Futaba'>Futaba</option>
-							<option value='Burichan'>Burichan</option>
-							<option value='Tomorrow'>Tomorrow</option>
-							<option value='Photon'>Photon</option>
-						</select>
-					</span>
-					<NavBar
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '42px',
-						}}
-					>
-						<>
-							<span className='boardList'>
-								[
-								<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-									All
-								</Link>
-								 / 
-								<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-									Subscriptions
-								</Link>
-								]&nbsp;
-							</span>
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							<span className='nav'>
-								[
-								<span
-									id='button-span'
-									style={{ cursor: 'pointer' }}
-									onClick={() => {
-										window.electron && window.electron.isElectron
-											? setIsCreateBoardOpen(true)
-											: alert(
-													'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											  );
-									}}
-								>
-									Create Board
-								</span>
-								] [
-								<Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
-									Settings
-								</Link>
-								] [
-								<Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
-									Home
-								</Link>
-								]
-							</span>
-						</>
-					</NavBar>
-					<div id='version'>
-						plebchan v{version}
-						{commitRef}. GPL-2.0
-					</div>
-					<div
-						className='footer-links'
-						style={{
-							textAlign: 'center',
-							fontSize: 'x-small',
-							fontFamily: 'arial',
-							marginTop: '5px',
-							marginBottom: '15px',
-						}}
-					>
-						<a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
-							About
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
-							App
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
-							Twitter
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
-							Telegram
-						</a>
-					</div>
-				</Footer>
-			</Container>
-		</>
-	);
+                                  <li onClick={() => handleOptionClick('description')}>
+                                    <a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                                      Plebones
+                                    </a>
+                                  </li>
+                                </ul>
+                              </li>
+                            </ul>
+                          </div>
+                        </PostMenuCatalog>,
+                        document.body,
+                      )}
+                    </span>
+                    <blockquote>
+                      <div className='custom-paragraph'>
+                        <Post content={subplebbit.description} />
+                      </div>
+                    </blockquote>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className='thread-mobile'>
+              <hr />
+              <div className='op-container'>
+                <div className='post op op-mobile'>
+                  <div className='post-info-mobile'>
+                    <button
+                      key={`mob-pb-`}
+                      className='post-menu-button-mobile'
+                      ref={(el) => {
+                        threadMenuRefsMobile.current['description'] = el;
+                      }}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        const rect = threadMenuRefsMobile.current['description'].getBoundingClientRect();
+                        setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                        setOpenMobileMenuCid((prevCid) => (prevCid === 'description' ? null : 'description'));
+                      }}
+                      style={{ all: 'unset', cursor: 'pointer' }}
+                    >
+                      ...
+                    </button>
+                    {createPortal(
+                      <PostMenuMobile
+                        selectedStyle={selectedStyle}
+                        ref={(el) => {
+                          postMenuMobileRef.current = el;
+                        }}
+                        onClick={(event) => event.stopPropagation()}
+                        style={{
+                          position: 'absolute',
+                          display: openMobileMenuCid === 'description' ? 'block' : 'none',
+                          top: mobileMenuPosition.top + 20,
+                          left: mobileMenuPosition.left,
+                        }}
+                      >
+                        <ul className={`post-menu-mobile-thread-description`}>
+                          {subplebbit.suggested?.avatarUrl ? (
+                            <>
+                              <li onClick={() => handleMobileOptionClick('description')}>
+                                <a
+                                  style={{ color: 'inherit', textDecoration: 'none' }}
+                                  href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
+                                  target='_blank'
+                                  rel='noreferrer'
+                                >
+                                  Search image on Google
+                                </a>
+                              </li>
+                              <li onClick={() => handleMobileOptionClick('description')}>
+                                <a
+                                  style={{ color: 'inherit', textDecoration: 'none' }}
+                                  href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
+                                  target='_blank'
+                                  rel='noreferrer'
+                                >
+                                  Search image on Yandex
+                                </a>
+                              </li>
+                              <li onClick={() => handleMobileOptionClick('description')}>
+                                <a
+                                  style={{ color: 'inherit', textDecoration: 'none' }}
+                                  href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
+                                  target='_blank'
+                                  rel='noreferrer'
+                                >
+                                  Search image on SauceNAO
+                                </a>
+                              </li>
+                            </>
+                          ) : null}
+                          <a
+                            style={{ color: 'inherit', textDecoration: 'none' }}
+                            href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
+                            target='_blank'
+                            rel='noreferrer'
+                          >
+                            <li onClick={() => handleMobileOptionClick('description')}>View on plebbit</li>
+                          </a>
+                          <a
+                            style={{ color: 'inherit', textDecoration: 'none' }}
+                            href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
+                            target='_blank'
+                            rel='noreferrer'
+                          >
+                            <li onClick={() => handleMobileOptionClick('description')}>View on plebones</li>
+                          </a>
+                        </ul>
+                      </PostMenuMobile>,
+                      document.body,
+                    )}
+                    <span className='name-block-mobile'>
+                      <span
+                        className='name-mobile capcode-admin'
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setIsAdminListOpen(!isAdminListOpen);
+                        }}
+                      >
+                        ## Board Mods
+                      </span>
+                      &nbsp;
+                      <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
+                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                        &nbsp;
+                        <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                      </span>
+                      <br />
+                      <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
+                        Welcome to {subplebbit.title || subplebbit.address}
+                      </span>
+                      &nbsp;
+                    </span>
+                    <span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
+                    &nbsp;
+                  </div>
+                  {subplebbit.suggested?.avatarUrl ? (
+                    <div className='file-mobile'>
+                      <div className='img-container'>
+                        <span className='file-thumb-mobile'>
+                          <img src={subplebbit.suggested?.avatarUrl} alt='board avatar' onClick={handleImageClick} style={{ cursor: 'pointer' }} />
+                          <div className='file-info-mobile'>image</div>
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+                  <blockquote className='post-message-mobile'>
+                    <div className='custom-paragraph'>
+                      <Post content={subplebbit.description} />
+                    </div>
+                  </blockquote>
+                </div>
+                <div className='post-link-mobile'>
+                  <Link to={() => {}} className='button-mobile'>
+                    View Thread
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </>
+        </BoardForm>
+        <Footer selectedStyle={selectedStyle}>
+          <Break
+            id='break'
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '-36px',
+              width: '100%',
+            }}
+          />
+          <Break
+            selectedStyle={selectedStyle}
+            style={{
+              width: '100%',
+            }}
+          />
+          <span
+            className='style-changer'
+            style={{
+              float: 'right',
+              marginTop: '2px',
+            }}
+          >
+            Style:  
+            <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+              <option value='Yotsuba'>Yotsuba</option>
+              <option value='Yotsuba-B'>Yotsuba B</option>
+              <option value='Futaba'>Futaba</option>
+              <option value='Burichan'>Burichan</option>
+              <option value='Tomorrow'>Tomorrow</option>
+              <option value='Photon'>Photon</option>
+            </select>
+          </span>
+          <NavBar
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '42px',
+            }}
+          >
+            <>
+              <span className='boardList'>
+                [
+                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                  All
+                </Link>
+                 / 
+                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                  Subscriptions
+                </Link>
+                ]&nbsp;
+              </span>
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              <span className='nav'>
+                [
+                <span
+                  id='button-span'
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    window.electron && window.electron.isElectron
+                      ? setIsCreateBoardOpen(true)
+                      : alert(
+                          'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                        );
+                  }}
+                >
+                  Create Board
+                </span>
+                ] [
+                <Link to={`/p/${selectedAddress}/description/settings`} onClick={() => setIsSettingsOpen(true)}>
+                  Settings
+                </Link>
+                ] [
+                <Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
+                  Home
+                </Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id='version'>
+            plebchan v{version}
+            {commitRef}. GPL-2.0
+          </div>
+          <div
+            className='footer-links'
+            style={{
+              textAlign: 'center',
+              fontSize: 'x-small',
+              fontFamily: 'arial',
+              marginTop: '5px',
+              marginBottom: '15px',
+            }}
+          >
+            <a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+              About
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
+              App
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
+              Twitter
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
+              Telegram
+            </a>
+          </div>
+        </Footer>
+      </Container>
+    </>
+  );
 };
 
 export default Description;
diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx
index af8ad026..e63535c3 100644
--- a/src/components/views/Rules.jsx
+++ b/src/components/views/Rules.jsx
@@ -22,691 +22,691 @@ const { version } = packageJson;
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 const Rules = () => {
-	const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
-		(state) => state,
-	);
+  const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
+    (state) => state,
+  );
 
-	// temporary hardcode
-	const plebtokenRules = [
-		'This community is strictly SFW. Any NSFW language or content will be removed.',
-		<span>
-			Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to{' '}
-			<Link className='quotelink' to='/p/business-and-finance.eth'>
-				p/business-and-finance.eth
-			</Link>
-			.
-		</span>,
-		'FUD is allowed unless blatantly meaningless and spammy.',
-	];
+  // temporary hardcode
+  const plebtokenRules = [
+    'This community is strictly SFW. Any NSFW language or content will be removed.',
+    <span>
+      Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to{' '}
+      <Link className='quotelink' to='/p/business-and-finance.eth'>
+        p/business-and-finance.eth
+      </Link>
+      .
+    </span>,
+    'FUD is allowed unless blatantly meaningless and spammy.',
+  ];
 
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	const threadMenuRefs = useRef({});
-	const threadMenuRefsMobile = useRef({});
-	const postMenuMobileRef = useRef(null);
-	const postMenuCatalogRef = useRef(null);
+  const threadMenuRefs = useRef({});
+  const threadMenuRefsMobile = useRef({});
+  const postMenuMobileRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
 
-	const [isAdminListOpen, setIsAdminListOpen] = useState(false);
-	const [prevScrollPos, setPrevScrollPos] = useState(0);
-	const [visible, setVisible] = useState(true);
-	const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-	const [mobileMenuPosition, setMobileMenuPosition] = useState({ top: 0, left: 0 });
-	const [openMenuCid, setOpenMenuCid] = useState(null);
-	const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
-	const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-	const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [mobileMenuPosition, setMobileMenuPosition] = useState({ top: 0, left: 0 });
+  const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
 
-	const { subplebbitAddress } = useParams();
-	const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
 
-	const handleOptionClick = () => {
-		setOpenMenuCid(null);
-	};
+  const handleOptionClick = () => {
+    setOpenMenuCid(null);
+  };
 
-	const handleMobileOptionClick = () => {
-		setOpenMobileMenuCid(null);
-	};
+  const handleMobileOptionClick = () => {
+    setOpenMobileMenuCid(null);
+  };
 
-	const handleOutsideClick = useCallback(
-		(e) => {
-			if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
-				setOpenMenuCid(null);
-			}
-		},
-		[openMenuCid, postMenuCatalogRef],
-	);
+  const handleOutsideClick = useCallback(
+    (e) => {
+      if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
+        setOpenMenuCid(null);
+      }
+    },
+    [openMenuCid, postMenuCatalogRef],
+  );
 
-	const handleMobileOutsideClick = useCallback(
-		(e) => {
-			if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
-				setOpenMobileMenuCid(null);
-			}
-		},
-		[openMobileMenuCid, postMenuMobileRef],
-	);
+  const handleMobileOutsideClick = useCallback(
+    (e) => {
+      if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
+        setOpenMobileMenuCid(null);
+      }
+    },
+    [openMobileMenuCid, postMenuMobileRef],
+  );
 
-	useEffect(() => {
-		if (openMenuCid !== null) {
-			document.addEventListener('click', handleOutsideClick);
-		} else {
-			document.removeEventListener('click', handleOutsideClick);
-		}
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
 
-		return () => {
-			document.removeEventListener('click', handleOutsideClick);
-		};
-	}, [openMenuCid, handleOutsideClick]);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid, handleOutsideClick]);
 
-	useEffect(() => {
-		if (openMobileMenuCid !== null) {
-			document.addEventListener('click', handleMobileOutsideClick);
-		} else {
-			document.removeEventListener('click', handleMobileOutsideClick);
-		}
+  useEffect(() => {
+    if (openMobileMenuCid !== null) {
+      document.addEventListener('click', handleMobileOutsideClick);
+    } else {
+      document.removeEventListener('click', handleMobileOutsideClick);
+    }
 
-		return () => {
-			document.removeEventListener('click', handleMobileOutsideClick);
-		};
-	}, [openMobileMenuCid, handleMobileOutsideClick]);
+    return () => {
+      document.removeEventListener('click', handleMobileOutsideClick);
+    };
+  }, [openMobileMenuCid, handleMobileOutsideClick]);
 
-	useEffect(() => {
-		window.scrollTo(0, 0);
-	}, []);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
-	useEffect(() => {
-		const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
-		if (subplebbitAddress) {
-			setSelectedAddress(subplebbitAddress);
-		} else if (subplebbit?.address) {
-			setSelectedAddress(subplebbit.address);
-		}
-		if (selectedSubplebbit) {
-			setSelectedTitle(selectedSubplebbit.title);
-		} else if (subplebbit?.title) {
-			setSelectedTitle(subplebbit.title);
-		}
-	}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
+  useEffect(() => {
+    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
+    if (subplebbitAddress) {
+      setSelectedAddress(subplebbitAddress);
+    } else if (subplebbit?.address) {
+      setSelectedAddress(subplebbit.address);
+    }
+    if (selectedSubplebbit) {
+      setSelectedTitle(selectedSubplebbit.title);
+    } else if (subplebbit?.title) {
+      setSelectedTitle(subplebbit.title);
+    }
+  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
 
-	// mobile navbar scroll effect
-	useEffect(() => {
-		const debouncedHandleScroll = debounce(() => {
-			const currentScrollPos = window.scrollY;
-			setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-			setPrevScrollPos(currentScrollPos);
-		}, 50);
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.scrollY;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
 
-		window.addEventListener('scroll', debouncedHandleScroll);
+    window.addEventListener('scroll', debouncedHandleScroll);
 
-		return () => window.removeEventListener('scroll', debouncedHandleScroll);
-	}, [prevScrollPos, visible]);
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
 
-	// mobile navbar board select functionality
-	const handleSelectChange = (event) => {
-		const selected = event.target.value;
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
 
-		if (selected === 'subscriptions') {
-			navigate(`/p/subscriptions`);
-			return;
-		} else if (selected === 'all') {
-			navigate(`/p/all`);
-			return;
-		}
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
 
-		const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-		setSelectedTitle(selectedTitle);
-		setSelectedAddress(selected);
-		navigate(`/p/${selected}`);
-	};
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
 
-	return (
-		<>
-			<Helmet>
-				<title>{'Board Rules - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
-			</Helmet>
-			<Container>
-				<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
-				<AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
-				<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
-				<NavBar selectedStyle={selectedStyle}>
-					<>
-						<span className='boardList'>
-							[
-							<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-								All
-							</Link>
-							 / 
-							<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-								Subscriptions
-							</Link>
-							]&nbsp;[
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							]
-						</span>
-						<span className='nav'>
-							[
-							<span
-								id='button-span'
-								style={{ cursor: 'pointer' }}
-								onClick={() => {
-									window.electron && window.electron.isElectron
-										? setIsCreateBoardOpen(true)
-										: alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-										  );
-								}}
-							>
-								Create Board
-							</span>
-							] [
-							<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
-								Settings
-							</Link>
-							] [<Link to='/'>Home</Link>]
-						</span>
-						<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
-							<div className='nav-container'>
-								<div className='board-select'>
-									<strong>Board</strong>
-									&nbsp;
-									<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
-										<option value='all'>All</option>
-										<option value='subscriptions'>Subscriptions</option>
-										{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
-										{defaultSubplebbits.map((subplebbit) => (
-											<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
-												{subplebbit.title ? subplebbit.title : subplebbit.address}
-											</option>
-										))}
-									</select>
-									 
-									<span
-										id='button-span'
-										style={{ cursor: 'pointer' }}
-										onClick={() =>
-											alert(
-												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											)
-										}
-									>
-										Create Board
-									</span>
-								</div>
-								<div className='page-jump'>
-									<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
-										Settings
-									</Link>
-									&nbsp;
-									<Link
-										to='/'
-										onClick={() => {
-											handleStyleChange({ target: { value: 'Yotsuba' } });
-											window.scrollTo(0, 0);
-										}}
-									>
-										Home
-									</Link>
-								</div>
-							</div>
-						</div>
-						<div id='separator-mobile'>&nbsp;</div>
-						<div id='separator-mobile'>&nbsp;</div>
-					</>
-				</NavBar>
-				<Header selectedStyle={selectedStyle}>
-					<>
-						<div className='banner'>
-							<ImageBanner />
-						</div>
-						<>
-							<div className='board-title'>{subplebbit.title ?? null}</div>
-							<div className='board-address'>
-								p/{subplebbit.address}
-								<OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
-							</div>
-						</>
-					</>
-				</Header>
-				<Break selectedStyle={selectedStyle} />
-				<PostForm selectedStyle={selectedStyle}>
-					<ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
-						<div id='return-button-mobile'>
-							<span
-								className='btn-wrap'
-								onClick={() => {
-									window.scrollTo(0, 0);
-								}}
-							>
-								<Link to={`/p/${selectedAddress}`}>Return</Link>
-							</span>
-						</div>
-						<div id='catalog-button-mobile'>
-							<span className='btn-wrap'>
-								<Link
-									to={`/p/${selectedAddress}/catalog`}
-									onClick={() => {
-										window.scrollTo(0, 0);
-									}}
-								>
-									Catalog
-								</Link>
-							</span>
-						</div>
-						<div id='bottom-button-mobile'>
-							<span className='btn-wrap'>
-								<span
-									style={{ cursor: 'pointer' }}
-									onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-									onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
-								>
-									Bottom
-								</span>
-							</span>
-						</div>
-					</ReplyFormLink>
-				</PostForm>
-				<BoardStats subplebbitAddress={selectedAddress} />
-				<TopBar selectedStyle={selectedStyle}>
-					<span className='style-changer'>
-						Style:  
-						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-							<option value='Yotsuba'>Yotsuba</option>
-							<option value='Yotsuba-B'>Yotsuba B</option>
-							<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'>
-						[
-						<span
-							id='button'
-							style={{ cursor: 'pointer' }}
-							onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-							onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
-							onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
-						>
-							Bottom
-						</span>
-						]
-					</span>
-				</TopBar>
-				<Tooltip id='tooltip' className='tooltip' />
-				<BoardForm selectedStyle={selectedStyle}>
-					<>
-						<div className='thread'>
-							<div className='op-container'>
-								<div className='post op op-desktop'>
-									<hr />
-									<div className='post-info'>
-										<span className='name-block'>
-											<span className='title'>Rules</span>
-											&nbsp;
-											<span
-												className='name capcode'
-												style={{ cursor: 'pointer' }}
-												onClick={() => {
-													setIsAdminListOpen(!isAdminListOpen);
-												}}
-											>
-												## Board Admins
-											</span>
-											&nbsp;
-											<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
-											&nbsp;
-											<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
-											&nbsp;
-											<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
-											<span>
-												&nbsp; [
-												<Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
-													Reply
-												</Link>
-												]
-											</span>
-											<PostMenu
-												title='Post menu'
-												ref={(el) => {
-													threadMenuRefs.current['rules'] = el;
-												}}
-												className='post-menu-button'
-												rotated={openMenuCid === 'rules'}
-												onClick={(event) => {
-													event.stopPropagation();
-													const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
-													setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-													setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
-												}}
-											>
-												▶
-											</PostMenu>
-											{createPortal(
-												<PostMenuCatalog
-													selectedStyle={selectedStyle}
-													ref={(el) => {
-														postMenuCatalogRef.current = el;
-													}}
-													onClick={(event) => event.stopPropagation()}
-													style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-												>
-													<div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
-														<ul className='post-menu-catalog'>
-															{/* {isModerator ? (
+  return (
+    <>
+      <Helmet>
+        <title>{'Board Rules - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
+      </Helmet>
+      <Container>
+        <CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
+        <AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
+        <SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
+        <NavBar selectedStyle={selectedStyle}>
+          <>
+            <span className='boardList'>
+              [
+              <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                All
+              </Link>
+               / 
+              <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                Subscriptions
+              </Link>
+              ]&nbsp;[
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              ]
+            </span>
+            <span className='nav'>
+              [
+              <span
+                id='button-span'
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  window.electron && window.electron.isElectron
+                    ? setIsCreateBoardOpen(true)
+                    : alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      );
+                }}
+              >
+                Create Board
+              </span>
+              ] [
+              <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
+                Settings
+              </Link>
+              ] [<Link to='/'>Home</Link>]
+            </span>
+            <div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
+              <div className='nav-container'>
+                <div className='board-select'>
+                  <strong>Board</strong>
+                  &nbsp;
+                  <select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
+                    <option value='all'>All</option>
+                    <option value='subscriptions'>Subscriptions</option>
+                    {!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
+                    {defaultSubplebbits.map((subplebbit) => (
+                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}>
+                        {subplebbit.title ? subplebbit.title : subplebbit.address}
+                      </option>
+                    ))}
+                  </select>
+                   
+                  <span
+                    id='button-span'
+                    style={{ cursor: 'pointer' }}
+                    onClick={() =>
+                      alert(
+                        'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                      )
+                    }
+                  >
+                    Create Board
+                  </span>
+                </div>
+                <div className='page-jump'>
+                  <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
+                    Settings
+                  </Link>
+                  &nbsp;
+                  <Link
+                    to='/'
+                    onClick={() => {
+                      handleStyleChange({ target: { value: 'Yotsuba' } });
+                      window.scrollTo(0, 0);
+                    }}
+                  >
+                    Home
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div id='separator-mobile'>&nbsp;</div>
+            <div id='separator-mobile'>&nbsp;</div>
+          </>
+        </NavBar>
+        <Header selectedStyle={selectedStyle}>
+          <>
+            <div className='banner'>
+              <ImageBanner />
+            </div>
+            <>
+              <div className='board-title'>{subplebbit.title ?? null}</div>
+              <div className='board-address'>
+                p/{subplebbit.address}
+                <OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
+              </div>
+            </>
+          </>
+        </Header>
+        <Break selectedStyle={selectedStyle} />
+        <PostForm selectedStyle={selectedStyle}>
+          <ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
+            <div id='return-button-mobile'>
+              <span
+                className='btn-wrap'
+                onClick={() => {
+                  window.scrollTo(0, 0);
+                }}
+              >
+                <Link to={`/p/${selectedAddress}`}>Return</Link>
+              </span>
+            </div>
+            <div id='catalog-button-mobile'>
+              <span className='btn-wrap'>
+                <Link
+                  to={`/p/${selectedAddress}/catalog`}
+                  onClick={() => {
+                    window.scrollTo(0, 0);
+                  }}
+                >
+                  Catalog
+                </Link>
+              </span>
+            </div>
+            <div id='bottom-button-mobile'>
+              <span className='btn-wrap'>
+                <span
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+                  onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+                >
+                  Bottom
+                </span>
+              </span>
+            </div>
+          </ReplyFormLink>
+        </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
+        <TopBar selectedStyle={selectedStyle}>
+          <span className='style-changer'>
+            Style:  
+            <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+              <option value='Yotsuba'>Yotsuba</option>
+              <option value='Yotsuba-B'>Yotsuba B</option>
+              <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'>
+            [
+            <span
+              id='button'
+              style={{ cursor: 'pointer' }}
+              onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+              onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+              onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
+            >
+              Bottom
+            </span>
+            ]
+          </span>
+        </TopBar>
+        <Tooltip id='tooltip' className='tooltip' />
+        <BoardForm selectedStyle={selectedStyle}>
+          <>
+            <div className='thread'>
+              <div className='op-container'>
+                <div className='post op op-desktop'>
+                  <hr />
+                  <div className='post-info'>
+                    <span className='name-block'>
+                      <span className='title'>Rules</span>
+                      &nbsp;
+                      <span
+                        className='name capcode'
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setIsAdminListOpen(!isAdminListOpen);
+                        }}
+                      >
+                        ## Board Mods
+                      </span>
+                      &nbsp;
+                      <span className='date-time'>{getDate(subplebbit.createdAt)}</span>
+                      &nbsp;
+                      <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
+                      &nbsp;
+                      <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
+                      <span>
+                        &nbsp; [
+                        <Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
+                          Reply
+                        </Link>
+                        ]
+                      </span>
+                      <PostMenu
+                        title='Post menu'
+                        ref={(el) => {
+                          threadMenuRefs.current['rules'] = el;
+                        }}
+                        className='post-menu-button'
+                        rotated={openMenuCid === 'rules'}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
+                          setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                          setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
+                        }}
+                      >
+                        ▶
+                      </PostMenu>
+                      {createPortal(
+                        <PostMenuCatalog
+                          selectedStyle={selectedStyle}
+                          ref={(el) => {
+                            postMenuCatalogRef.current = el;
+                          }}
+                          onClick={(event) => event.stopPropagation()}
+                          style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
+                        >
+                          <div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
+                            <ul className='post-menu-catalog'>
+                              {/* {isModerator ? (
                               <>
                                 change rules
                               </>
                             ) : null} */}
-															<li
-																onMouseOver={() => {
-																	setIsClientRedirectMenuOpen(true);
-																}}
-																onMouseLeave={() => {
-																	setIsClientRedirectMenuOpen(false);
-																}}
-															>
-																View on »
-																<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-																	<li onClick={() => handleOptionClick('rules')}>
-																		<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-																			Plebbit
-																		</a>
-																	</li>
-																	{/* <li onClick={() => handleOptionClick("rules")}>
+                              <li
+                                onMouseOver={() => {
+                                  setIsClientRedirectMenuOpen(true);
+                                }}
+                                onMouseLeave={() => {
+                                  setIsClientRedirectMenuOpen(false);
+                                }}
+                              >
+                                View on »
+                                <ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
+                                  <li onClick={() => handleOptionClick('rules')}>
+                                    <a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                                      Plebbit
+                                    </a>
+                                  </li>
+                                  {/* <li onClick={() => handleOptionClick("rules")}>
                                   <a
                                   href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
                                   target="_blank" rel="noreferrer"
                                   >Seedit</a>
                                 </li> */}
-																	<li onClick={() => handleOptionClick('rules')}>
-																		<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-																			Plebones
-																		</a>
-																	</li>
-																</ul>
-															</li>
-														</ul>
-													</div>
-												</PostMenuCatalog>,
-												document.body,
-											)}
-										</span>
-										<blockquote>
-											<div className='custom-paragraph' style={{ paddingBottom: '17px' }}>
-												{subplebbit.address === 'plebtoken.eth'
-													? plebtokenRules.map((rule, index) => (
-															<React.Fragment key={index}>
-																{index + 1}. {rule}
-																<br />
-															</React.Fragment>
-													  ))
-													: subplebbit.rules?.map((rule, index) => (
-															<React.Fragment key={index}>
-																{index + 1}. {rule}
-																<br />
-															</React.Fragment>
-													  ))}
-											</div>
-										</blockquote>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div className='thread-mobile'>
-							<hr />
-							<div className='op-container'>
-								<div className='post op op-mobile'>
-									<div className='post-info-mobile'>
-										<button
-											key={`mob-pb-`}
-											className='post-menu-button-mobile'
-											ref={(el) => {
-												threadMenuRefsMobile.current['rules'] = el;
-											}}
-											onClick={(event) => {
-												event.stopPropagation();
-												const rect = threadMenuRefsMobile.current['rules'].getBoundingClientRect();
-												setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-												setOpenMobileMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
-											}}
-											style={{ all: 'unset', cursor: 'pointer' }}
-										>
-											...
-										</button>
-										{createPortal(
-											<PostMenuMobile
-												selectedStyle={selectedStyle}
-												ref={(el) => {
-													postMenuMobileRef.current = el;
-												}}
-												onClick={(event) => event.stopPropagation()}
-												style={{
-													position: 'absolute',
-													display: openMobileMenuCid === 'rules' ? 'block' : 'none',
-													top: mobileMenuPosition.top + 20,
-													left: mobileMenuPosition.left,
-												}}
-											>
-												<ul className={`post-menu-mobile-thread-description`}>
-													<a
-														style={{ color: 'inherit', textDecoration: 'none' }}
-														href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
-														target='_blank'
-														rel='noreferrer'
-													>
-														<li onClick={() => handleMobileOptionClick('rules')}>View on plebbit</li>
-													</a>
-													<a
-														style={{ color: 'inherit', textDecoration: 'none' }}
-														href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
-														target='_blank'
-														rel='noreferrer'
-													>
-														<li onClick={() => handleMobileOptionClick('rules')}>View on plebones</li>
-													</a>
-												</ul>
-											</PostMenuMobile>,
-											document.body,
-										)}
-										<span className='name-block-mobile'>
-											<span
-												className='name-mobile capcode'
-												style={{ cursor: 'pointer' }}
-												onClick={() => {
-													setIsAdminListOpen(!isAdminListOpen);
-												}}
-											>
-												## Board Admins
-											</span>
-											&nbsp;
-											<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-												<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
-												&nbsp;
-												<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
-											</span>
-											<br />
-											<span className='subject-mobile' style={{ marginBottom: '-15px' }}>
-												Rules
-											</span>
-											&nbsp;
-										</span>
-										<span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
-										&nbsp;
-									</div>
-									<blockquote className='post-message-mobile'>
-										<div className='custom-paragraph'>
-											{subplebbit.address === 'plebtoken.eth'
-												? plebtokenRules.map((rule, index) => (
-														<React.Fragment key={index}>
-															{index + 1}. {rule}
-															<br />
-														</React.Fragment>
-												  ))
-												: subplebbit.rules?.map((rule, index) => (
-														<React.Fragment key={index}>
-															{index + 1}. {rule}
-															<br />
-														</React.Fragment>
-												  ))}
-										</div>
-									</blockquote>
-								</div>
-								<div className='post-link-mobile'>
-									<Link to={() => {}} className='button-mobile'>
-										View Thread
-									</Link>
-								</div>
-							</div>
-						</div>
-					</>
-				</BoardForm>
-				<Footer selectedStyle={selectedStyle}>
-					<Break
-						id='break'
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '-36px',
-							width: '100%',
-						}}
-					/>
-					<Break
-						selectedStyle={selectedStyle}
-						style={{
-							width: '100%',
-						}}
-					/>
-					<span
-						className='style-changer'
-						style={{
-							float: 'right',
-							marginTop: '2px',
-						}}
-					>
-						Style:  
-						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-							<option value='Yotsuba'>Yotsuba</option>
-							<option value='Yotsuba-B'>Yotsuba B</option>
-							<option value='Futaba'>Futaba</option>
-							<option value='Burichan'>Burichan</option>
-							<option value='Tomorrow'>Tomorrow</option>
-							<option value='Photon'>Photon</option>
-						</select>
-					</span>
-					<NavBar
-						selectedStyle={selectedStyle}
-						style={{
-							marginTop: '42px',
-						}}
-					>
-						<>
-							<span className='boardList'>
-								[
-								<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
-									All
-								</Link>
-								 / 
-								<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
-									Subscriptions
-								</Link>
-								]&nbsp;
-							</span>
-							{defaultSubplebbits.map((subplebbit, index) => (
-								<span className='boardList' key={`span-${subplebbit.address}`}>
-									{index === 0 ? null : '\u00a0'}
-									<Link
-										to={`/p/${subplebbit.address}`}
-										key={`a-${subplebbit.address}`}
-										onClick={() => {
-											setSelectedTitle(subplebbit.title);
-											setSelectedAddress(subplebbit.address);
-										}}
-									>
-										{subplebbit.title ? subplebbit.title : subplebbit.address}
-									</Link>
-									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
-								</span>
-							))}
-							<span className='nav'>
-								[
-								<span
-									id='button-span'
-									style={{ cursor: 'pointer' }}
-									onClick={() => {
-										window.electron && window.electron.isElectron
-											? setIsCreateBoardOpen(true)
-											: alert(
-													'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-											  );
-									}}
-								>
-									Create Board
-								</span>
-								] [
-								<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
-									Settings
-								</Link>
-								] [
-								<Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
-									Home
-								</Link>
-								]
-							</span>
-						</>
-					</NavBar>
-					<div id='version'>
-						plebchan v{version}
-						{commitRef}. GPL-2.0
-					</div>
-					<div
-						className='footer-links'
-						style={{
-							textAlign: 'center',
-							fontSize: 'x-small',
-							fontFamily: 'arial',
-							marginTop: '5px',
-							marginBottom: '15px',
-						}}
-					>
-						<a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
-							About
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
-							App
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
-							Twitter
-						</a>
-						&nbsp;•&nbsp;
-						<a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
-							Telegram
-						</a>
-					</div>
-				</Footer>
-			</Container>
-		</>
-	);
+                                  <li onClick={() => handleOptionClick('rules')}>
+                                    <a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
+                                      Plebones
+                                    </a>
+                                  </li>
+                                </ul>
+                              </li>
+                            </ul>
+                          </div>
+                        </PostMenuCatalog>,
+                        document.body,
+                      )}
+                    </span>
+                    <blockquote>
+                      <div className='custom-paragraph' style={{ paddingBottom: '17px' }}>
+                        {subplebbit.address === 'plebtoken.eth'
+                          ? plebtokenRules.map((rule, index) => (
+                              <React.Fragment key={index}>
+                                {index + 1}. {rule}
+                                <br />
+                              </React.Fragment>
+                            ))
+                          : subplebbit.rules?.map((rule, index) => (
+                              <React.Fragment key={index}>
+                                {index + 1}. {rule}
+                                <br />
+                              </React.Fragment>
+                            ))}
+                      </div>
+                    </blockquote>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className='thread-mobile'>
+              <hr />
+              <div className='op-container'>
+                <div className='post op op-mobile'>
+                  <div className='post-info-mobile'>
+                    <button
+                      key={`mob-pb-`}
+                      className='post-menu-button-mobile'
+                      ref={(el) => {
+                        threadMenuRefsMobile.current['rules'] = el;
+                      }}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        const rect = threadMenuRefsMobile.current['rules'].getBoundingClientRect();
+                        setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                        setOpenMobileMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
+                      }}
+                      style={{ all: 'unset', cursor: 'pointer' }}
+                    >
+                      ...
+                    </button>
+                    {createPortal(
+                      <PostMenuMobile
+                        selectedStyle={selectedStyle}
+                        ref={(el) => {
+                          postMenuMobileRef.current = el;
+                        }}
+                        onClick={(event) => event.stopPropagation()}
+                        style={{
+                          position: 'absolute',
+                          display: openMobileMenuCid === 'rules' ? 'block' : 'none',
+                          top: mobileMenuPosition.top + 20,
+                          left: mobileMenuPosition.left,
+                        }}
+                      >
+                        <ul className={`post-menu-mobile-thread-description`}>
+                          <a
+                            style={{ color: 'inherit', textDecoration: 'none' }}
+                            href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
+                            target='_blank'
+                            rel='noreferrer'
+                          >
+                            <li onClick={() => handleMobileOptionClick('rules')}>View on plebbit</li>
+                          </a>
+                          <a
+                            style={{ color: 'inherit', textDecoration: 'none' }}
+                            href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
+                            target='_blank'
+                            rel='noreferrer'
+                          >
+                            <li onClick={() => handleMobileOptionClick('rules')}>View on plebones</li>
+                          </a>
+                        </ul>
+                      </PostMenuMobile>,
+                      document.body,
+                    )}
+                    <span className='name-block-mobile'>
+                      <span
+                        className='name-mobile capcode-admin'
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setIsAdminListOpen(!isAdminListOpen);
+                        }}
+                      >
+                        ## Board Mods
+                      </span>
+                      &nbsp;
+                      <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
+                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                        &nbsp;
+                        <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                      </span>
+                      <br />
+                      <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
+                        Rules
+                      </span>
+                      &nbsp;
+                    </span>
+                    <span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
+                    &nbsp;
+                  </div>
+                  <blockquote className='post-message-mobile'>
+                    <div className='custom-paragraph'>
+                      {subplebbit.address === 'plebtoken.eth'
+                        ? plebtokenRules.map((rule, index) => (
+                            <React.Fragment key={index}>
+                              {index + 1}. {rule}
+                              <br />
+                            </React.Fragment>
+                          ))
+                        : subplebbit.rules?.map((rule, index) => (
+                            <React.Fragment key={index}>
+                              {index + 1}. {rule}
+                              <br />
+                            </React.Fragment>
+                          ))}
+                    </div>
+                  </blockquote>
+                </div>
+                <div className='post-link-mobile'>
+                  <Link to={() => {}} className='button-mobile'>
+                    View Thread
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </>
+        </BoardForm>
+        <Footer selectedStyle={selectedStyle}>
+          <Break
+            id='break'
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '-36px',
+              width: '100%',
+            }}
+          />
+          <Break
+            selectedStyle={selectedStyle}
+            style={{
+              width: '100%',
+            }}
+          />
+          <span
+            className='style-changer'
+            style={{
+              float: 'right',
+              marginTop: '2px',
+            }}
+          >
+            Style:  
+            <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+              <option value='Yotsuba'>Yotsuba</option>
+              <option value='Yotsuba-B'>Yotsuba B</option>
+              <option value='Futaba'>Futaba</option>
+              <option value='Burichan'>Burichan</option>
+              <option value='Tomorrow'>Tomorrow</option>
+              <option value='Photon'>Photon</option>
+            </select>
+          </span>
+          <NavBar
+            selectedStyle={selectedStyle}
+            style={{
+              marginTop: '42px',
+            }}
+          >
+            <>
+              <span className='boardList'>
+                [
+                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+                  All
+                </Link>
+                 / 
+                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+                  Subscriptions
+                </Link>
+                ]&nbsp;
+              </span>
+              {defaultSubplebbits.map((subplebbit, index) => (
+                <span className='boardList' key={`span-${subplebbit.address}`}>
+                  {index === 0 ? null : '\u00a0'}
+                  <Link
+                    to={`/p/${subplebbit.address}`}
+                    key={`a-${subplebbit.address}`}
+                    onClick={() => {
+                      setSelectedTitle(subplebbit.title);
+                      setSelectedAddress(subplebbit.address);
+                    }}
+                  >
+                    {subplebbit.title ? subplebbit.title : subplebbit.address}
+                  </Link>
+                  {index !== defaultSubplebbits.length - 1 ? ' /' : null}
+                </span>
+              ))}
+              <span className='nav'>
+                [
+                <span
+                  id='button-span'
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    window.electron && window.electron.isElectron
+                      ? setIsCreateBoardOpen(true)
+                      : alert(
+                          'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
+                        );
+                  }}
+                >
+                  Create Board
+                </span>
+                ] [
+                <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
+                  Settings
+                </Link>
+                ] [
+                <Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
+                  Home
+                </Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id='version'>
+            plebchan v{version}
+            {commitRef}. GPL-2.0
+          </div>
+          <div
+            className='footer-links'
+            style={{
+              textAlign: 'center',
+              fontSize: 'x-small',
+              fontFamily: 'arial',
+              marginTop: '5px',
+              marginBottom: '15px',
+            }}
+          >
+            <a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+              About
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
+              App
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
+              Twitter
+            </a>
+            &nbsp;•&nbsp;
+            <a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
+              Telegram
+            </a>
+          </div>
+        </Footer>
+      </Container>
+    </>
+  );
 };
 
 export default Rules;
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 7c13ac19..9f6570c6 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -919,7 +919,7 @@ const Subscriptions = () => {
                                     Anonymous
                                   </span>
                                 )}
-                                &nbsp; (u/
+                                &nbsp;(u/
                                 <span
                                   key={`pa-${index}`}
                                   className='poster-address address-desktop'
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 7f00ee8c..cd3a3524 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1096,7 +1096,7 @@ const Thread = () => {
                               Anonymous
                             </span>
                           )}
-                          &nbsp; &nbsp;
+                          &nbsp;
                           <span
                             className='poster-address address-desktop'
                             id='reply-button'