diff --git a/src/routes/(main)/menu/+page.svelte b/src/routes/(main)/menu/+page.svelte
index efb7a9e..deade3d 100644
--- a/src/routes/(main)/menu/+page.svelte
+++ b/src/routes/(main)/menu/+page.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { EntryButton } from "$lib/components/buttons";
+  import { requestLogout } from "./service.js";
 
   import IconPassword from "~icons/material-symbols/password";
+  import IconLogout from "~icons/material-symbols/logout";
 
   let { data } = $props();
+
+  const logout = async () => {
+    if (await requestLogout()) {
+      await goto("/auth/login");
+    }
+  };
 </script>
 
 <svelte:head>
@@ -25,5 +33,13 @@
         <p class="font-medium">비밀번호 바꾸기</p>
       </div>
     </EntryButton>
+    <EntryButton onclick={logout}>
+      <div class="flex items-center gap-x-4">
+        <div class="rounded-lg bg-gray-200 p-1 text-red-500">
+          <IconLogout />
+        </div>
+        <p class="font-medium">로그아웃</p>
+      </div>
+    </EntryButton>
   </div>
 </div>
diff --git a/src/routes/(main)/menu/service.ts b/src/routes/(main)/menu/service.ts
new file mode 100644
index 0000000..32dd4fd
--- /dev/null
+++ b/src/routes/(main)/menu/service.ts
@@ -0,0 +1,6 @@
+import { callPostApi } from "$lib/hooks";
+
+export const requestLogout = async () => {
+  const res = await callPostApi("/api/auth/logout");
+  return res.ok;
+};