diff --git a/src/compornents/TopBar.tsx b/src/compornents/TopBar.tsx
index 891d9d3..5c3519c 100644
--- a/src/compornents/TopBar.tsx
+++ b/src/compornents/TopBar.tsx
@@ -2,6 +2,7 @@ import { AccountCircle, ExitToAppSharp } from "@mui/icons-material";
 import { AppBar, Button, Toolbar, Typography } from "@mui/material";
 import { signOut } from "next-auth/react";
 import React from "react";
+import UserMenu from "./UserMenu";
 
 interface QuestionProps {
   page_name: string;
@@ -16,11 +17,7 @@ export default function TopBar({ page_name = "", user_name = "Unknown User" }: Q
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             {page_name}
           </Typography>
-          <AccountCircle />
-          <Typography marginLeft={1} marginRight={4}>
-            {user_name}
-          </Typography>
-          <Button color="inherit" startIcon={<ExitToAppSharp />} onClick={() => signOut()}>SignOut</Button>
+          <UserMenu user_name={user_name} />
         </Toolbar >
       </AppBar >
     </>
diff --git a/src/compornents/UserMenu.tsx b/src/compornents/UserMenu.tsx
new file mode 100644
index 0000000..5f42bb0
--- /dev/null
+++ b/src/compornents/UserMenu.tsx
@@ -0,0 +1,42 @@
+// トップバーに表示するための、ユーザーメニューを表示するコンポーネント
+// アイコンとユーザー名を表示し、クリックするとメニューが表示される
+
+import React from 'react';
+import { AccountCircle, ExitToAppSharp } from "@mui/icons-material";
+import { Button, Menu, MenuItem } from "@mui/material";
+import { signOut } from "next-auth/react";
+import { ArrowDropDownIcon } from '@mui/x-date-pickers';
+
+interface UserMenuProps {
+  user_name: string;
+}
+
+export default function UserMenu({ user_name }: UserMenuProps) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <>
+      <Button
+        color="inherit"
+        size='large'
+        startIcon={<AccountCircle />}
+        endIcon={<ArrowDropDownIcon />}
+        onClick={handleClick}
+        style={{ textTransform: 'none' }}
+      >
+        {user_name}
+      </Button >
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+      >
+        <MenuItem onClick={() => signOut()}><ExitToAppSharp />SignOut</MenuItem>
+      </Menu>
+    </>
+  );
+}
\ No newline at end of file