diff --git a/components/nav/common.js b/components/nav/common.js
index a032810f..7a8dc4e5 100644
--- a/components/nav/common.js
+++ b/components/nav/common.js
@@ -160,16 +160,21 @@ export function NavWalletSummary ({ className }) {
   )
 }
 
-export const Indicator = () => {
+export const Indicator = ({ show, children }) => {
   return (
-    <span className='d-inline-block p-1'>
-      <span
-        className='position-absolute p-1 bg-secondary'
-        style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
-      >
-        <span className='invisible'>{' '}</span>
-      </span>
-    </span>
+    <div className='w-fit-content position-relative'>
+      {children}
+      {show && (
+        <span className='d-inline-block p-1'>
+          <span
+            className='position-absolute p-1 bg-secondary'
+            style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
+          >
+            <span className='invisible'>{' '}</span>
+          </span>
+        </span>
+      )}
+    </div>
   )
 }
 
@@ -186,8 +191,7 @@ export function MeDropdown ({ me, dropNavKey }) {
         <Dropdown.Toggle className='nav-link nav-item fw-normal' id='profile' variant='custom'>
           <div className='d-flex align-items-center'>
             <Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
-              {`@${me.name}`}
-              {indicator && <Indicator />}
+              <Indicator show={indicator}>@{me.name}</Indicator>
             </Nav.Link>
             <Badges user={me} />
           </div>
@@ -195,10 +199,7 @@ export function MeDropdown ({ me, dropNavKey }) {
         <Dropdown.Menu>
           <Link href={'/' + me.name} passHref legacyBehavior>
             <Dropdown.Item active={me.name === dropNavKey}>
-              <div className='w-fit-content position-relative'>
-                profile
-                {profileIndicator && <Indicator />}
-              </div>
+              <Indicator show={profileIndicator}>profile</Indicator>
             </Dropdown.Item>
           </Link>
           <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -206,10 +207,7 @@ export function MeDropdown ({ me, dropNavKey }) {
           </Link>
           <Link href='/wallets' passHref legacyBehavior>
             <Dropdown.Item eventKey='wallets'>
-              <div className='w-fit-content position-relative'>
-                wallets
-                {walletIndicator && <Indicator />}
-              </div>
+              <Indicator show={walletIndicator}>wallets</Indicator>
             </Dropdown.Item>
           </Link>
           <Link href='/credits' passHref legacyBehavior>
diff --git a/components/nav/mobile/offcanvas.js b/components/nav/mobile/offcanvas.js
index c996ef01..9804001a 100644
--- a/components/nav/mobile/offcanvas.js
+++ b/components/nav/mobile/offcanvas.js
@@ -32,11 +32,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
 
   return (
     <>
-      <div className='position-relative'>
-        <MeImage onClick={handleShow} />
-        {indicator && <Indicator />}
-      </div>
-
+      <Indicator show={indicator}><MeImage onClick={handleShow} /></Indicator>
       <Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
         <Offcanvas.Header closeButton>
           <Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
@@ -57,10 +53,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
                 <>
                   <Link href={'/' + me.name} passHref legacyBehavior>
                     <Dropdown.Item active={me.name === dropNavKey}>
-                      <div className='w-fit-content position-relative'>
-                        profile
-                        {profileIndicator && <Indicator />}
-                      </div>
+                      <Indicator show={profileIndicator}>profile</Indicator>
                     </Dropdown.Item>
                   </Link>
                   <Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@@ -68,10 +61,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   </Link>
                   <Link href='/wallets' passHref legacyBehavior>
                     <Dropdown.Item eventKey='wallets'>
-                      <div className='w-fit-content position-relative'>
-                        wallets
-                        {walletIndicator && <Indicator />}
-                      </div>
+                      <Indicator show={walletIndicator}>wallets</Indicator>
                     </Dropdown.Item>
                   </Link>
                   <Link href='/credits' passHref legacyBehavior>
@@ -101,10 +91,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
                   <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
                     <MeImage />
                     <div className='ms-2'>
-                      <div className='w-fit-content position-relative'>
-                        @{me?.name || 'anon'}
-                        {indicator && <Indicator />}
-                      </div>
+                      <Indicator show={indicator}>@{me?.name || 'anon'}</Indicator>
                     </div>
                   </Link>
                 </Nav>