diff --git a/typing-app/src/components/molecules/LogoutButton.tsx b/typing-app/src/components/molecules/LogoutButton.tsx
index 336ba3e..730b9da 100644
--- a/typing-app/src/components/molecules/LogoutButton.tsx
+++ b/typing-app/src/components/molecules/LogoutButton.tsx
@@ -3,24 +3,31 @@
 import React from "react";
 import { useRouter } from "next/navigation";
 import { Button, useDisclosure } from "@chakra-ui/react";
-import LogoutModal from "./LogoutModal"; // 正しいパスに変更してください
+import LogoutModal from "./LogoutModal";
+import { logout } from "@/app/actions";
 
 const LogoutButton: React.FC = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const router = useRouter();
 
   const handleLogout = async () => {
-    // TODO:ログアウト処理を実装
+    await logout();
     onOpen();
   };
 
+  //Note: ログアウト時にページをリレンダリングするためにリダイレクトする
+  const reLoad = () => {
+    onClose();
+    router.push("/");
+  };
+
   return (
     <>
       <Button colorScheme="blue" size="lg" onClick={handleLogout}>
         Logout
       </Button>
 
-      <LogoutModal isOpen={isOpen} onClose={onClose} />
+      <LogoutModal isOpen={isOpen} onClose={reLoad} />
     </>
   );
 };