diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index 06864f170..a6bafd52f 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -68,6 +68,8 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
   const authorProfileUrl =
     "authorProfileUrl" in chats?.[0] ? chats?.[0].authorProfileUrl : "";
   const authorName = "authorName" in chats?.[0] ? chats?.[0].authorName : "";
+  const authorIsWithdrew =
+    "authorIsWithdrew" in chats?.[0] ? chats?.[0].authorIsWithdrew : false;
 
   const isBot = authorId === "bot";
   const isAlone = roomInfo.part.length === 1;
@@ -158,17 +160,26 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
               {isBot ? (
                 <TaxiIcon css={{ width: "100%", height: "100%" }} />
               ) : (
-                <ProfileImage url={authorProfileUrl} />
+                <ProfileImage
+                  url={authorProfileUrl}
+                  withdraw={authorIsWithdrew}
+                />
               )}
             </div>
           )}
         </div>
         <div css={styleMessageSection}>
-          {authorId !== userOid && (
-            <div css={styleName} className="selectable">
-              {authorName}
-            </div>
-          )}
+          {authorId !== userOid &&
+            (authorIsWithdrew ? (
+              <div css={{ ...styleName, color: theme.gray_text }}>
+                <del>{authorName}</del>
+                {" (탈퇴)"}
+              </div>
+            ) : (
+              <div css={styleName} className="selectable">
+                {authorName}
+              </div>
+            ))}
           {chats.map((chat, index) => (
             <div key={getChatUniquewKey(chat)} css={styleMessageWrap}>
               <div css={styleChat(chat.type)}>
diff --git a/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess.tsx b/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess.tsx
index e9a3a3be3..f54bcdb10 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess.tsx
@@ -1,6 +1,15 @@
 import theme from "@/tools/theme";
 
-const BodyAccountCancelProcess = () => {
+type BodyAccountCancelProcessProps = {
+  roomCompleted: boolean;
+};
+
+const BodyAccountCancelProcess = ({
+  roomCompleted,
+}: BodyAccountCancelProcessProps) => {
+  const isCancelAvailable = roomCompleted;
+  // TODO : 탈퇴 불가 조건이 추가되면 props 부분 손보고, 최종 조건을 여기에 반영해 주세요
+
   const styleBox = {
     padding: "0 24px 0 16px",
     borderRadius: "10px",
@@ -23,33 +32,28 @@ const BodyAccountCancelProcess = () => {
     <div style={styleBox}>
       <div style={styleSection} />
       <div style={styleContent}>
-        Taxi 서비스의 회원 탈퇴 절차는 다음과 같습니다.
-      </div>
-      <div style={styleSection}>1. 탈퇴 방법</div>
-      <div style={styleContent}>
-        현재 Taxi 서비스는 자동화된 회원 탈퇴 기능을 제공하고 있지 않습니다.
-        대신, '회원 탈퇴하기'를 통해 회원 탈퇴 의사를 밝혀주시면, Taxi팀이
-        확인한 뒤 탈퇴를 처리해 드립니다. 정산이 완료되지 않은 방이 존재하는
-        경우, 정산이 완료될 때까지 탈퇴가 불가능합니다.
-      </div>
-      <div style={styleSection}>2. 탈퇴 처리 절차</div>
-      <div style={styleContent}>
-        유효한 회원 탈퇴 요청이 접수되면, Taxi팀이 해당 요청을 확인한 날을
-        시점으로 14일간 유예 기간이 부여됩니다. 유예 기간이 지난 후에는 이름,
-        학번, 이메일 주소, 계좌번호 등 개인정보가 즉시 삭제됩니다. 유예 기간을
-        부여하는 이유는, 실제로 정산이 완료되지 않았음에도 Taxi 서비스 내의 정산
-        관련 기능을 사용한 상황에서의 탈퇴를 방지하기 위함입니다.
-      </div>
-      <div style={styleSection}>3. 삭제되지 않는 데이터</div>
-      <div style={styleContent}>
-        1. 채팅, 생성한 방, 참여한 방에 대한 데이터는 삭제되지 않습니다. 단,
-        이름 등의 개인정보는 모두 삭제되기 때문에 해당 데이터와 탈퇴한 사용자를
-        연결 짓는 것은 불가능합니다.
+        지금까지 Taxi 서비스를 이용해 주셔서 감사합니다. <br />
+        탈퇴 후에는 복구가 어려우며, 재가입 시 새로운 아이디가 생성됩니다. 탈퇴
+        전에 해야 하는 일이 있다면 반드시 확인해 주시기를 바랍니다. 참여했던
+        방의 채팅 내역 등에서 탈퇴 후에도 현재의 닉네임이 표시됩니다. 변경이
+        필요하실 경우 탈퇴 전에 변경해 주세요.
         <br />
-        2. Taxi 서비스를 탈퇴하더라도 SPARCS SSO 계정은 그대로 유지됩니다.
-        SPARCS SSO 계정 탈퇴가 필요하신 경우, SPARCS SSO를 통해 탈퇴를 진행해
-        주십시오.
+        개인정보 처리 방침에 따라, 개인정보 처리 방침 동의 후 10년까지
+        개인정보를 보존합니다.
       </div>
+      {!isCancelAvailable && (
+        <>
+          <div style={styleSection}>
+            아래의 사항을 확인하신 후에 탈퇴가 가능합니다.
+          </div>
+          {!roomCompleted && (
+            <div style={styleContent}>
+              - 참여 중인 모든 방에 대하여 정산 또는 송금을 완료해 주세요. 아직
+              출발하지 않은 방의 경우, 탑승을 취소해 주세요.
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 };
diff --git a/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess2nd.tsx b/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess2nd.tsx
new file mode 100644
index 000000000..cbf1f67e1
--- /dev/null
+++ b/packages/web/src/components/ModalPopup/Body/BodyAccountCancelProcess2nd.tsx
@@ -0,0 +1,30 @@
+import theme from "@/tools/theme";
+
+const BodyAccountCancelProcess2nd = () => {
+  const styleBox = {
+    padding: "0 24px 0 16px",
+    borderRadius: "10px",
+    overflow: "auto",
+    minHeight: "270px",
+    height: "calc(100vh - 360px)",
+    background: theme.gray_background,
+    boxShadow: theme.shadow_gray_button_inset,
+  };
+  const styleSection = {
+    ...theme.font14_bold,
+    margin: "16px 0",
+  };
+  const styleContent = {
+    ...theme.font14,
+    lineHeight: "20px",
+    marginLeft: "8px",
+  };
+  return (
+    <div style={styleBox}>
+      <div style={styleSection}>정말 탈퇴하시겠습니까?</div>
+      <div style={styleContent}>탈퇴 후에는 복구가 어렵습니다.</div>
+    </div>
+  );
+};
+
+export default BodyAccountCancelProcess2nd;
diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
index c8b6bb9d1..fae3ef816 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
@@ -179,42 +179,52 @@ const BodyChatReportSelectType = ({
           <User value={reportedUser} isDeparted={isDeparted} />
         </div>
       )}
-      <div css={styleText}>
-        를 어떤 사유로 신고할까요? 만약 선택지에 원하시는 사유가 없다면
-        &quot;기타 사유&quot; 선택 후 자세히 설명해주세요.
-      </div>
-      <DottedLine />
-      <div css={styleSelectWrap}>
-        사유
-        <Select
-          options={selectOptions}
-          value={type}
-          onChangeValue={setType as (v: string) => void}
-          css={styleSelect}
-        />
-      </div>
-      {type === "etc-reason" && (
-        <div ref={wrapRef} css={styleTextareaWrap}>
-          <EditRoundedIcon style={styleIcon} />
-          <textarea
-            ref={textareaRef}
-            value={etcDetail}
-            onChange={(e) => setEtcDetail(e.target.value)}
-            css={styleTextarea}
-          />
-        </div>
-      )}
-      {inValidMessage && (
-        <div css={{ ...styleText, color: theme.red_text }}>
-          {inValidMessage}
+      {!reportedUser?.withdraw ? (
+        <div css={styleText}>
+          를 어떤 사유로 신고할까요? 만약 선택지에 원하시는 사유가 없다면
+          &quot;기타 사유&quot; 선택 후 자세히 설명해주세요.
         </div>
-      )}
-      {!inValidMessage && type === "no-settlement" && (
+      ) : (
         <div css={styleText}>
-          신고하기 시 해당 사용자게에게 방 정보와 함께 송금을 재촉하는 메일이
-          자동으로 보내집니다.
+          탈퇴한 사용자에 대한 신고는 채널톡 문의하기를 이용해 주세요.
         </div>
       )}
+      {!reportedUser?.withdraw && (
+        <>
+          <DottedLine />
+          <div css={styleSelectWrap}>
+            사유
+            <Select
+              options={selectOptions}
+              value={type}
+              onChangeValue={setType as (v: string) => void}
+              css={styleSelect}
+            />
+          </div>
+          {type === "etc-reason" && (
+            <div ref={wrapRef} css={styleTextareaWrap}>
+              <EditRoundedIcon style={styleIcon} />
+              <textarea
+                ref={textareaRef}
+                value={etcDetail}
+                onChange={(e) => setEtcDetail(e.target.value)}
+                css={styleTextarea}
+              />
+            </div>
+          )}
+          {inValidMessage && (
+            <div css={{ ...styleText, color: theme.red_text }}>
+              {inValidMessage}
+            </div>
+          )}
+          {!inValidMessage && type === "no-settlement" && (
+            <div css={styleText}>
+              신고하기 시 해당 사용자에게 방 정보와 함께 송금을 재촉하는 메일이
+              자동으로 보내집니다.
+            </div>
+          )}
+        </>
+      )}
       <div css={styleButtons}>
         <Button
           type="gray"
diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
index ef684168f..482a8ba34 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
@@ -13,6 +13,7 @@ import { dayServerToClient } from "@/tools/day";
 import theme from "@/tools/theme";
 
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
 
 type BodyChatReportSelectUserProps = {
   roomInfo: Room;
@@ -76,12 +77,14 @@ const BodyChatReportSelectUser = ({
   return (
     <>
       <div css={styleText}>
-        택시 동승 후 송금을 하지 않았거나, 부적절한 언어 또는 상업적 광고의
-        채팅, 기타 규정 위반 등의 행위를 목격하셨다면 해당 사용자를
-        신고해주세요. SPARCS Taxi팀은 안전하고 청결한 택시 동승을 위해 최선을
-        다할 것 입니다.
+        택시 동승 후 송금을 하지 않았거나, 부적절한 언어 또는 상업적 광고, 기타
+        규정 위반 등의 행위를 목격하셨다면 해당 사용자를 신고해주세요. SPARCS
+        Taxi팀은 안전하고 쾌적한 택시 동승을 위해 최선을 다할 것 입니다.
+      </div>
+      <div css={styleText}>
+        신고할 사용자를 선택해주세요. 단, 탈퇴한 사용자에 대한 신고는 채널톡
+        문의하기를 이용해 주세요.
       </div>
-      <div css={styleText}>신고할 사용자를 선택해주세요.</div>
       <DottedLine />
       <div css={styleUsers}>
         {roomInfo.part.map(
@@ -90,7 +93,9 @@ const BodyChatReportSelectUser = ({
               <div
                 key={user._id}
                 css={styleUser}
-                onClick={() => setReportedId(user._id)}
+                onClick={
+                  user.withdraw ? () => {} : () => setReportedId(user._id)
+                }
               >
                 <div
                   css={{
@@ -101,8 +106,17 @@ const BodyChatReportSelectUser = ({
                         : theme.purple_light,
                   }}
                 >
-                  {reportedId === user._id && (
-                    <CheckRoundedIcon style={styleCheckBoxIcon} />
+                  {user.withdraw ? (
+                    <ClearRoundedIcon
+                      style={{
+                        ...styleCheckBoxIcon,
+                        fill: theme.gray_line,
+                      }}
+                    />
+                  ) : (
+                    reportedId === user._id && (
+                      <CheckRoundedIcon style={styleCheckBoxIcon} />
+                    )
                   )}
                 </div>
                 <User value={user} isDeparted={isDeparted} />
diff --git a/packages/web/src/components/ModalPopup/ModalAccountCancelProcess.tsx b/packages/web/src/components/ModalPopup/ModalAccountCancelProcess.tsx
index eb5e04ff0..438e29a93 100644
--- a/packages/web/src/components/ModalPopup/ModalAccountCancelProcess.tsx
+++ b/packages/web/src/components/ModalPopup/ModalAccountCancelProcess.tsx
@@ -1,6 +1,18 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useIsLogin, useValueRecoilState } from "@/hooks/useFetchRecoilState";
+import { useAxios } from "@/hooks/useTaxiAPI";
+
 import Modal from "@/components/Modal";
 
+import Button from "../Button";
+import { useOnClickLogout } from "../Link/LinkLogout";
 import BodyAccountCancelProcess from "./Body/BodyAccountCancelProcess";
+import BodyAccountCancelProcess2nd from "./Body/BodyAccountCancelProcess2nd";
+
+import alertAtom from "@/atoms/alert";
+import { useSetRecoilState } from "recoil";
 
 import theme from "@/tools/theme";
 
@@ -13,8 +25,23 @@ type PopupAccountCancelProcessProps = {
 
 const ModalAccountCancelProcess = ({
   isOpen,
-  onChangeIsOpen,
+  onChangeIsOpen = () => {},
 }: PopupAccountCancelProcessProps) => {
+  const axios = useAxios();
+  const { t } = useTranslation("mypage");
+  const setAlert = useSetRecoilState(alertAtom);
+  const onClickLogout = useOnClickLogout();
+
+  const { id: userId } = useValueRecoilState("loginInfo") || {};
+  const myRooms = useValueRecoilState("myRooms");
+  const myOngoingRoom = myRooms?.ongoing.slice() ?? [];
+  const roomCompleted = myOngoingRoom.length === 0;
+
+  const isEligible = roomCompleted; // TODO : 탈퇴 불가 조건이 추가될 경우, 수정 필요
+
+  const isLogin = useIsLogin();
+  const [page, setPage] = useState<1 | 2>(1);
+
   const styleTop: CSS = {
     display: "flex",
     alignItems: "center",
@@ -23,18 +50,164 @@ const ModalAccountCancelProcess = ({
     columnGap: "8px",
   };
 
+  useEffect(() => {
+    if (isOpen) setPage(1);
+  }, [isOpen]);
+
+  const onClose = () => {
+    onChangeIsOpen(false);
+  };
+
+  const onCancel = async () => {
+    const response = await axios({
+      url: "/users/withdraw",
+      method: "post",
+      data: { userId },
+      onSuccess: () => {
+        setAlert("회원 탈퇴가 완료되었습니다.");
+        onClickLogout();
+      },
+      onError: () => setAlert("회원 탈퇴에 실패하였습니다."),
+    });
+    if (response.status === 200) onClickLogout();
+  };
+
   return (
     <Modal
       isOpen={isOpen}
       onChangeIsOpen={onChangeIsOpen}
       width={theme.modal_width_large}
       padding="16px"
+      css={{
+        // alert modal의 2배 이하로.
+        maxWidth:
+          String(Number(theme.modal_width_alert.split("px")[0]) * 2) + "px",
+        margin: "auto",
+      }}
     >
       <div style={styleTop}>
         <TaxiLogo style={{ height: "27px" }} />
-        회원 탈퇴 절차
+        {t("cancel_account")}
+      </div>
+      {page === 1 ? (
+        <BodyAccountCancelProcess roomCompleted={roomCompleted} />
+      ) : (
+        <BodyAccountCancelProcess2nd />
+      )}
+      <div
+        css={{
+          display: "flex",
+          justifyContent: "flex-end",
+          columnGap: "8px",
+          marginTop: "16px",
+        }}
+      >
+        {isLogin ? (
+          page === 1 ? (
+            <>
+              <Button
+                type="gray"
+                css={{
+                  padding: "9px 24px 10px",
+                  borderRadius: "8px",
+                  ...theme.font14,
+                }}
+                onClick={onClose}
+              >
+                취소
+              </Button>
+              <Button
+                type={isEligible ? "purple_inset" : "purple"}
+                css={{
+                  padding: "9px 24px 10px",
+                  borderRadius: "8px",
+                  backgroundColor: theme.purple_disabled,
+                  ...theme.font14_bold,
+                }}
+                onClick={() => (isEligible ? setPage(2) : {})}
+              >
+                다음
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                type="gray"
+                css={{
+                  padding: "9px 24px 10px",
+                  borderRadius: "8px",
+                  ...theme.font14,
+                }}
+                onClick={() => setPage(1)}
+              >
+                이전
+              </Button>
+              <Button
+                type="purple_inset"
+                css={{
+                  padding: "9px 24px 10px",
+                  borderRadius: "8px",
+                  backgroundColor: "hsl(0, 80%, 60%)",
+                  ...theme.font14_bold,
+                }}
+                onClick={onCancel}
+              >
+                탈퇴
+              </Button>
+            </>
+          )
+        ) : page === 1 ? (
+          <>
+            <Button
+              type="gray"
+              css={{
+                padding: "9px 24px 10px",
+                borderRadius: "8px",
+                ...theme.font14,
+              }}
+              onClick={onClose}
+            >
+              취소
+            </Button>
+            <Button
+              type="purple_inset"
+              css={{
+                padding: "9px 24px 10px",
+                borderRadius: "8px",
+                ...theme.font14_bold,
+              }}
+              onClick={() => setPage(2)}
+            >
+              다음
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button
+              type="gray"
+              css={{
+                padding: "9px 24px 10px",
+                borderRadius: "8px",
+                ...theme.font14,
+              }}
+              onClick={() => setPage(1)}
+            >
+              이전
+            </Button>
+            <Button
+              type="purple_inset"
+              css={{
+                padding: "9px 24px 10px",
+                borderRadius: "8px",
+                ...theme.font14_bold,
+              }}
+              onClick={onClose}
+            >
+              완료
+            </Button>
+          </>
+        )}
       </div>
-      <BodyAccountCancelProcess />
     </Modal>
   );
 };
diff --git a/packages/web/src/components/User/ProfileImage.tsx b/packages/web/src/components/User/ProfileImage.tsx
index 657f4e2e8..986e441d9 100644
--- a/packages/web/src/components/User/ProfileImage.tsx
+++ b/packages/web/src/components/User/ProfileImage.tsx
@@ -3,17 +3,19 @@ import { useEffect, useState } from "react";
 import theme from "@/tools/theme";
 
 import defaultImg from "@/static/assets/profileImgOnError.png";
+import withdrawImg from "@/static/assets/profileImgWithdraw.png";
 
 type ProfileImageProps = {
   url: string;
+  withdraw?: boolean; // 탈퇴한 회원 -> 유령 이미지
 };
 
-const ProfileImage = ({ url }: ProfileImageProps) => {
-  const [src, setSrc] = useState(url);
+const ProfileImage = ({ url, withdraw = false }: ProfileImageProps) => {
+  const [src, setSrc] = useState(withdraw ? withdrawImg : url);
 
   useEffect(() => {
-    setSrc(url);
-  }, [url]);
+    setSrc(withdraw ? withdrawImg : url);
+  }, [url, withdraw]);
 
   return (
     <div
@@ -34,7 +36,7 @@ const ProfileImage = ({ url }: ProfileImageProps) => {
           height: "100%",
           objectFit: "cover",
         }}
-        alt={`/profile-img/${url}`}
+        alt="profile-img"
         onError={() => setSrc(defaultImg)}
       />
     </div>
diff --git a/packages/web/src/components/User/index.tsx b/packages/web/src/components/User/index.tsx
index 3601dbe3d..24343a33d 100644
--- a/packages/web/src/components/User/index.tsx
+++ b/packages/web/src/components/User/index.tsx
@@ -7,6 +7,8 @@ type UserProps = { value: User; isDeparted?: boolean };
 const User = ({ value, isDeparted }: UserProps) => {
   const isSettlement =
     value?.isSettlement === "paid" || value?.isSettlement === "sent";
+  const isWithdrew = value?.withdraw;
+
   return (
     <div
       css={{
@@ -25,7 +27,7 @@ const User = ({ value, isDeparted }: UserProps) => {
           background: theme.gray_line,
         }}
       >
-        <ProfileImage url={value.profileImageUrl} />
+        <ProfileImage url={value.profileImageUrl} withdraw={isWithdrew} />
       </div>
       <div
         css={{
@@ -39,10 +41,13 @@ const User = ({ value, isDeparted }: UserProps) => {
           ...theme.ellipsis,
         }}
       >
-        {value.nickname}
+        <span css={{ textDecoration: isWithdrew ? "line-through" : undefined }}>
+          {value.nickname}
+        </span>
         {isDeparted && !isSettlement && (
-          <span style={theme.font8}>(미정산)</span>
+          <span style={theme.font8}>{" (미정산)"}</span>
         )}
+        {isWithdrew && <span style={theme.font8}>{" (탈퇴)"}</span>}
       </div>
     </div>
   );
diff --git a/packages/web/src/pages/Mypage/Menu.tsx b/packages/web/src/pages/Mypage/Menu.tsx
index 4c809a4ca..f149fe475 100644
--- a/packages/web/src/pages/Mypage/Menu.tsx
+++ b/packages/web/src/pages/Mypage/Menu.tsx
@@ -7,12 +7,12 @@ import theme from "@/tools/theme";
 import AlarmOffRoundedIcon from "@mui/icons-material/AlarmOffRounded";
 import AlarmOnRoundedIcon from "@mui/icons-material/AlarmOnRounded";
 import AssignmentOutlinedIcon from "@mui/icons-material/AssignmentOutlined";
+import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
 import ErrorOutlineRoundedIcon from "@mui/icons-material/ErrorOutlineRounded";
 import ExitToAppRoundedIcon from "@mui/icons-material/ExitToAppRounded";
 import HelpOutlineRoundedIcon from "@mui/icons-material/HelpOutlineRounded";
 import KeyboardArrowLeftRoundedIcon from "@mui/icons-material/KeyboardArrowLeftRounded";
 import LanguageRoundedIcon from "@mui/icons-material/LanguageRounded";
-import PersonRemoveRoundedIcon from "@mui/icons-material/PersonRemoveRounded";
 import PortraitRoundedIcon from "@mui/icons-material/PortraitRounded";
 import StarRoundedIcon from "@mui/icons-material/StarRounded";
 
@@ -48,7 +48,7 @@ const getIcon = (icon: string) => {
     case "logout":
       return <ExitToAppRoundedIcon style={styleIcon} />;
     case "cancel_account":
-      return <PersonRemoveRoundedIcon style={styleIcon} />;
+      return <DirectionsRunIcon style={styleIcon} />;
     case "beta":
       return <StarRoundedIcon style={styleIcon} />;
   }
diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx
index 59f73545b..c07d4e945 100644
--- a/packages/web/src/pages/Mypage/index.tsx
+++ b/packages/web/src/pages/Mypage/index.tsx
@@ -27,7 +27,7 @@ import WhiteContainerSuggestLogin from "@/components/WhiteContainer/WhiteContain
 
 import Menu from "./Menu";
 
-import { deviceType, eventMode, isDev } from "@/tools/loadenv";
+import { eventMode, isDev } from "@/tools/loadenv";
 import theme from "@/tools/theme";
 import { isNotificationOn } from "@/tools/trans";
 
@@ -84,11 +84,10 @@ const Mypage = () => {
   );
   const onClickEventPolicy = useCallback(() => setIsOpenEventPolicy(true), []);
   const onClickMembers = useCallback(() => setOpenIsMembers(true), []);
-  const onClickCancelAccount = useCallback(() => {
-    channelService.openChat(
-      "SPARCS Taxi 서비스의 계정 탈퇴를 신청하고 싶습니다.\n신청 사유는 다음과 같습니다:\n"
-    );
-  }, []);
+  const onClickWithdrawAccount = useCallback(
+    () => setIsOpenAccountCancelProcess(true),
+    []
+  );
 
   const styleProfImg = {
     width: "50px",
@@ -228,13 +227,19 @@ const Mypage = () => {
               <Menu icon="logout">{t("logout")}</Menu>
             </LinkLogout>
           )}
-          {userId && deviceType === "app/android" && (
-            <Menu icon="cancel_account" onClick={onClickCancelAccount}>
-              {t("cancel_account")}
-            </Menu>
-          )}
         </div>
       </WhiteContainer>
+      {userId && (
+        <WhiteContainer>
+          <div css={{ display: "grid", rowGap: "16px" }}>
+            <div css={{ color: theme.red_text }}>
+              <Menu icon="cancel_account" onClick={onClickWithdrawAccount}>
+                {t("cancel_account")}
+              </Menu>
+            </div>
+          </div>
+        </WhiteContainer>
+      )}
       <Footer type="only-logo" />
       <ModalPrivacyPolicy
         isOpen={isOpenPrivacyPolicy}
diff --git a/packages/web/src/static/assets/profileImgWithdraw.png b/packages/web/src/static/assets/profileImgWithdraw.png
new file mode 100644
index 000000000..cd1c05db3
Binary files /dev/null and b/packages/web/src/static/assets/profileImgWithdraw.png differ
diff --git a/packages/web/src/types/chat.d.ts b/packages/web/src/types/chat.d.ts
index 26eb28c50..fa36f8d13 100644
--- a/packages/web/src/types/chat.d.ts
+++ b/packages/web/src/types/chat.d.ts
@@ -14,6 +14,7 @@ export type UserChat = {
   authorId: string;
   authorName: string;
   authorProfileUrl: string;
+  authorIsWithdrew: boolean;
 } & CommonChat;
 export type GeneralChat = {
   type: "in" | "out";
diff --git a/packages/web/src/types/global.d.ts b/packages/web/src/types/global.d.ts
index f293636e6..dc2af775e 100644
--- a/packages/web/src/types/global.d.ts
+++ b/packages/web/src/types/global.d.ts
@@ -25,6 +25,7 @@ declare global {
     nickname: string;
     profileImageUrl: string;
     isSettlement?: "not-departed" | "paid" | "send-required" | "sent";
+    withdraw: boolean;
   };
   type Room = {
     _id: string;