diff --git a/CHANGELOG.md b/CHANGELOG.md
index 319b8b18..57251e42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to
 - ⚡️(frontend) add trailing slash on the /me endpoint call
 - ⚡️(backend) refactor lobby storage to bound key lookups per room
 - ⚡️(backend) refactor presence cache to bound key lookups per room
+- 💄(frontend) position the login hint dynamically next to the button
 
 ## [1.30.0] - 2026-09-01
 
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 362d4a1a..76fe4e3e 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -35,30 +35,21 @@ const LoginHint = () => {
     <div
       className={css({
         position: 'absolute',
-        top: '103px',
-        right: '110px',
+        top: 'calc(100% + 12px)',
+        right: 0,
         zIndex: '100',
         outline: 'none',
         padding: '1.25rem',
-        maxWidth: '350px',
+        width: 'max-content',
+        maxWidth: 'min(350px, calc(100vw - 2rem))',
         boxShadow: '0 2px 5px rgba(0 0 0 / 0.1)',
         borderRadius: '1rem',
         backgroundColor: 'primary.200',
-        display: 'none',
-        xsm: {
-          display: 'block',
-        },
-        sm: {
-          top: '131px',
-          right: '100px',
-          zIndex: '100',
-        },
         _after: {
           content: '""',
           position: 'absolute',
           top: '-10px',
-          right: '20%',
-          marginLeft: '-10px',
+          right: '1.5rem',
           borderWidth: '0 10px 10px 10px',
           borderStyle: 'solid',
           borderColor: 'transparent transparent #E3E3FB transparent',
@@ -171,12 +162,13 @@ export const Header = () => {
                   <>
                     <div
                       className={css({
+                        position: 'relative',
                         display: { base: 'none', xsm: 'block' },
                       })}
                     >
                       <LoginButton proConnectHint={false} />
+                      <LoginHint />
                     </div>
-                    <LoginHint />
                   </>
                 )}
               {!!user && (