diff --git a/src/pages/MyAccountPage.tsx b/src/pages/MyAccountPage.tsx
index 6257577a8..5bf184bd6 100644
--- a/src/pages/MyAccountPage.tsx
+++ b/src/pages/MyAccountPage.tsx
@@ -1,18 +1,31 @@
 /* @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Navigate, useNavigate } from 'react-router-dom';
 
 import { Button } from '@/components/common/Button';
 import { Container } from '@/components/common/Layout/Container';
+import { useAuth } from '@/hooks/useAuth';
 
 export default function MyAccountPage() {
+  const { authToken, setAuthToken } = useAuth();
+  const navigate = useNavigate();
+  if (!authToken) {
+    return <Navigate to="/login" replace={true} />;
+  }
+  const HandleLogout = () => {
+    sessionStorage.clear();
+    setAuthToken(null);
+    navigate('/', { replace: true });
+  };
   return (
     <MyAccountWrapper>
       <Container flexDirection="column" justifyContent="center" alignItems="center" maxWidth="1024px">
-        <Title>userID님 안녕하세요!</Title>
+        <Title>{authToken.id}님 안녕하세요!</Title>
         <Button
           themetype="darkGray"
           size="large"
+          onClick={HandleLogout}
           css={css`
             width: 20%;
             margin-top: 30px;