diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro
index d41d52107..b374cdf38 100644
--- a/packages/website/src/components/Navbar.astro
+++ b/packages/website/src/components/Navbar.astro
@@ -21,6 +21,7 @@ import { BRANCH_NAMES } from '../constants/branches';
 import { NAVBAR_HEIGHT } from '../constants/navbar';
 import { homeTool, TOOLS } from '../constants/tools';
 import { PatreonIcon } from './PatreonIcon';
+import { NavbarAccount } from './NavbarAccount';
 
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
@@ -39,7 +40,6 @@ const isBranchNamed =
   }
 
   .expander {
-    --min-width: 768px;
     --navbar-height: 48px;
 
     transition-duration: 250ms;
@@ -48,10 +48,6 @@ const isBranchNamed =
     backdrop-filter: blur(4rem) brightness(0.75);
     -webkit-backdrop-filter: blur(4rem) brightness(0.75);
 
-    @media (min-width: var(--min-width)) {
-      max-height: var(--navbar-height);
-    }
-
     &[data-expanded='false'] {
       max-height: var(--navbar-height);
 
@@ -72,18 +68,24 @@ const isBranchNamed =
 
   .hamburger {
     display: inline-flex;
-
-    @media (min-width: var(--min-width)) {
-      display: none;
-    }
   }
 
   .tools {
     display: none;
+  }
 
-    @media (min-width: var(--min-width)) {
+  @media (min-width: 768px) {
+    .hamburger {
+      display: none;
+    }
+
+    .tools {
       display: flex;
     }
+
+    .expander {
+      max-height: var(--navbar-height);
+    }
   }
 </style>
 
@@ -195,95 +197,8 @@ const isBranchNamed =
           >
             <GearIcon />
           </Link>
-          <!-- <Popover.Root>
-            <Popover.Trigger>
-              <IconButton variant="ghost" color="gray">
-                <PersonIcon />
-              </IconButton>
-            </Popover.Trigger>
 
-            <Popover.Content
-              align="end"
-              width="320px"
-              onOpenAutoFocus={(event) => event.preventDefault()}
-            >
-              {
-                (patreonLogin.token || wargamingLogin.token) && (
-                  <Flex direction="column" gap="2">
-                    <Text align="center" color="gray">
-                      Logged in accounts
-                    </Text>
-
-                    {patreonLogin.token && (
-                      <Flex align="center" gap="2" justify="center">
-                        <PatreonIcon width={15} height={15} />
-                        <Text>Patreon</Text>
-                        <Button
-                          color="red"
-                          variant="ghost"
-                          onClick={() => {
-                            $patreonLogin.set({ token: undefined });
-                          }}
-                        >
-                          Logout
-                        </Button>
-                      </Flex>
-                    )}
-
-                    {wargamingLogin.token && (
-                      <Flex align="center" gap="2" justify="center">
-                        <WargamingIcon width={15} height={15} />
-                        <Text>
-                          <Suspense
-                            fallback={<Skeleton height="1em" width="5rem" />}
-                          >
-                            <WargamingAccountName />
-                          </Suspense>
-                        </Text>
-                        <Button
-                          color="red"
-                          variant="ghost"
-                          onClick={() => {
-                            $wargamingLogin.set({ token: undefined });
-                          }}
-                        >
-                          Logout
-                        </Button>
-                      </Flex>
-                    )}
-                  </Flex>
-                )
-              }
-
-              {
-                !patreonLogin.token !== !wargamingLogin.token && (
-                  <Inset side="x">
-                    <Separator my="4" size="4" />
-                  </Inset>
-                )
-              }
-
-              {
-                (!patreonLogin.token || !wargamingLogin.token) && (
-                  <Flex direction="column" gap="2">
-                    <Text align="center" color="gray">
-                      Log in with...
-                    </Text>
-
-                    {!patreonLogin.token && (
-                      <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
-                        <Button style={{ width: '100%' }} color="tomato">
-                          <PatreonIcon width={15} height={15} /> Patreon
-                        </Button>
-                      </Link>
-                    )}
-
-                    {!wargamingLogin.token && <WargamingLoginButton />}
-                  </Flex>
-                )
-              }
-            </Popover.Content>
-          </Popover.Root> -->
+          <NavbarAccount client:idle />
         </Flex>
       </Flex>
     </Flex>
diff --git a/packages/website/src/components/NavbarAccount.tsx b/packages/website/src/components/NavbarAccount.tsx
new file mode 100644
index 000000000..f8e67e57c
--- /dev/null
+++ b/packages/website/src/components/NavbarAccount.tsx
@@ -0,0 +1,110 @@
+import { patreonLoginUrl } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
+import { PersonIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Flex,
+  IconButton,
+  Inset,
+  Link,
+  Popover,
+  Separator,
+  Skeleton,
+  Text,
+} from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { $patreonLogin } from '../stores/patreonLogin';
+import { $wargamingLogin } from '../stores/wargamingLogin';
+import { PatreonIcon } from './PatreonIcon';
+import { WargamingAccountName } from './WargamingAccountName';
+import { WargamingIcon } from './WargamingIcon';
+import { WargamingLoginButton } from './WargamingLoginButton';
+
+export function NavbarAccount() {
+  const patreonLogin = useStore($patreonLogin);
+  const wargamingLogin = useStore($wargamingLogin);
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger>
+        <IconButton variant="ghost" color="gray">
+          <PersonIcon />
+        </IconButton>
+      </Popover.Trigger>
+
+      <Popover.Content
+        align="end"
+        width="320px"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        {(patreonLogin.token || wargamingLogin.token) && (
+          <Flex direction="column" gap="2">
+            <Text align="center" color="gray">
+              Logged in accounts
+            </Text>
+
+            {patreonLogin.token && (
+              <Flex align="center" gap="2" justify="center">
+                <PatreonIcon width={15} height={15} />
+                <Text>Patreon</Text>
+                <Button
+                  color="red"
+                  variant="ghost"
+                  onClick={() => {
+                    $patreonLogin.set({ token: undefined });
+                  }}
+                >
+                  Logout
+                </Button>
+              </Flex>
+            )}
+
+            {wargamingLogin.token && (
+              <Flex align="center" gap="2" justify="center">
+                <WargamingIcon width={15} height={15} />
+                <Text>
+                  <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
+                    <WargamingAccountName />
+                  </Suspense>
+                </Text>
+                <Button
+                  color="red"
+                  variant="ghost"
+                  onClick={() => {
+                    $wargamingLogin.set({ token: undefined });
+                  }}
+                >
+                  Logout
+                </Button>
+              </Flex>
+            )}
+          </Flex>
+        )}
+
+        {!patreonLogin.token !== !wargamingLogin.token && (
+          <Inset side="x">
+            <Separator my="4" size="4" />
+          </Inset>
+        )}
+
+        {(!patreonLogin.token || !wargamingLogin.token) && (
+          <Flex direction="column" gap="2">
+            <Text align="center" color="gray">
+              Log in with...
+            </Text>
+
+            {!patreonLogin.token && (
+              <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
+                <Button style={{ width: '100%' }} color="tomato">
+                  <PatreonIcon width={15} height={15} /> Patreon
+                </Button>
+              </Link>
+            )}
+
+            {!wargamingLogin.token && <WargamingLoginButton />}
+          </Flex>
+        )}
+      </Popover.Content>
+    </Popover.Root>
+  );
+}