diff --git a/app/components/user.tsx b/app/components/user.tsx
index 4e604f0..1680378 100644
--- a/app/components/user.tsx
+++ b/app/components/user.tsx
@@ -7,9 +7,10 @@ import {
     Separator,
     Spinner,
 } from "@heroui/react";
+import type { PropsWithChildren } from "react";
 import { useAuth } from "~/hooks/auth";
 
-export default function User() {
+export default function User({ children }: PropsWithChildren) {
     const { user, loading, login, logout } = useAuth();
 
     if (loading) {
@@ -21,12 +22,17 @@ export default function User() {
     }
 
     if (user === null) {
-        return <Button onClick={() => login()}>Login</Button>;
+        return (
+            <Button onClick={() => login()}>
+                <Typography.Paragraph>{children}Login</Typography.Paragraph>
+            </Button>
+        );
     }
 
     return (
         <Dropdown>
             <Button className="pr-0">
+                {children}
                 <Typography.Paragraph>{user.name}</Typography.Paragraph>
                 <Avatar>
                     <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>