diff --git a/frontend/app/components/users/UserDeleteButton.tsx b/frontend/app/components/users/UserDeleteButton.tsx
index 7a914385..308ee602 100644
--- a/frontend/app/components/users/UserDeleteButton.tsx
+++ b/frontend/app/components/users/UserDeleteButton.tsx
@@ -1,4 +1,7 @@
-import { Button } from '@mantine/core';
+import { Button, Center, Modal, rem } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { MdDeleteForever } from 'react-icons/md';
+import { RiArrowGoBackLine } from 'react-icons/ri';
 
 interface UserDeleteButtonProps {
 	id: number;
@@ -9,15 +12,38 @@ const UserDeleteButton = ({
 	id,
 	handleDeleteUserButtonClick,
 }: UserDeleteButtonProps) => {
+	const [opened, { open, close }] = useDisclosure();
+
 	return (
-		<Button
-			color="red"
-			variant="light"
-			bd="solid 2px"
-			onClick={() => handleDeleteUserButtonClick(id)}
-		>
-			削除
-		</Button>
+		<>
+			<Modal
+				opened={opened}
+				onClose={close}
+				title="本当に削除しますか？"
+				centered
+			>
+				<Center>
+					<Button
+						leftSection={<RiArrowGoBackLine />}
+						color="gray"
+						mr={rem(10)}
+						onClick={close}
+					>
+						キャンセル
+					</Button>
+					<Button
+						leftSection={<MdDeleteForever />}
+						color="red"
+						onClick={() => handleDeleteUserButtonClick(id)}
+					>
+						削除
+					</Button>
+				</Center>
+			</Modal>
+			<Button color="red" variant="light" bd="solid 2px" onClick={() => open()}>
+				削除
+			</Button>
+		</>
 	);
 };