diff --git a/components/Layouts/AppLayout.tsx b/components/Layouts/AppLayout.tsx
index 62ea9666..7708a845 100644
--- a/components/Layouts/AppLayout.tsx
+++ b/components/Layouts/AppLayout.tsx
@@ -13,6 +13,7 @@ type Props = {
 }
 
 const AppLayout = ({ children, username }: Props) => {
+  const router = useRouter()
   const { memo } = useRouter().query
   const [openSideBar, setOpenSideBar] = React.useState<boolean>(false)
   const [copied, setCopied] = React.useState<boolean>(false)
@@ -35,12 +36,27 @@ const AppLayout = ({ children, username }: Props) => {
     setOpenSideBar(false)
   }
 
+  const navigateHome = () => {
+    let pathname = "/"
+    if (username) pathname = `/${username}`
+    router.push(
+      {
+        pathname,
+      },
+      undefined,
+      { shallow: true },
+    )
+    setTimeout(function () {
+      router.reload() // Force a reload after a short delay to allow location href to update
+    }, 200)
+  }
+
   return (
     <div className={`${openSideBar && styles.container_bg} ${styles.container}`}>
       <nav className={styles.nav_bar}>
-        <a href={`/${username}`} style={{ cursor: "pointer" }}>
+        <button className={styles.nav_home} onClick={navigateHome}>
           <Image src="/icons/blink-logo-icon.svg" alt="logo" width="50" height="50" />
-        </a>
+        </button>
         <div onClick={() => setOpenSideBar(!openSideBar)} className={styles.hamburger}>
           <span className={`${openSideBar && styles.toggle}`}></span>
           <span className={`${openSideBar && styles.toggle}`}></span>
diff --git a/components/Layouts/app-layout.module.css b/components/Layouts/app-layout.module.css
index 1548cb0d..3b0b7477 100644
--- a/components/Layouts/app-layout.module.css
+++ b/components/Layouts/app-layout.module.css
@@ -61,6 +61,12 @@
   text-transform: uppercase;
 }
 
+.nav_home {
+  cursor: "pointer";
+  border: 0;
+  background-color: rgba(255, 0, 0, 0);
+}
+
 .lightning_addr {
   padding-left: 1rem;
 }