diff --git a/src/assets/voteIcons/checkbox_checked.svg b/src/assets/voteIcons/checkbox_checked.svg
new file mode 100644
index 00000000..50cbe8ba
--- /dev/null
+++ b/src/assets/voteIcons/checkbox_checked.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C4.477 20 -1.60838e-09 15.523 -1.03613e-09 10C-4.63875e-10 4.477 4.477 4.63875e-10 10 1.03613e-09C15.523 1.60838e-09 20 4.477 20 10C20 15.523 15.523 20 10 20ZM9.003 14L16.073 6.929L14.659 5.515L9.003 11.172L6.174 8.343L4.76 9.757L9.003 14Z" fill="#2388FF"/>
+</svg>
diff --git a/src/chakra/buttonCustom.ts b/src/chakra/buttonCustom.ts
new file mode 100644
index 00000000..aef344f6
--- /dev/null
+++ b/src/chakra/buttonCustom.ts
@@ -0,0 +1,79 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react";
+
+const baseStyle = defineStyle({
+  _hover: {
+    _disabled: {
+      backgroundColor: "neutral.200",
+      color: "neutral.400",
+    },
+  },
+  _disabled: {
+    backgroundColor: "neutral.200",
+    color: "neutral.400",
+  },
+});
+
+const CTAButton = defineStyle({
+  position: "fixed",
+  bottom: "2.4rem",
+  left: "50%",
+  transform: "translateX(-50%)",
+  width: "32.7rem",
+  height: "4.6rem",
+
+  backgroundColor: "primary.300",
+  borderRadius: "16px",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  zIndex: "2",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+const blueButton = defineStyle({
+  backgroundColor: "primary.300",
+  borderRadius: "16px",
+  boxShadow: "shadow.200",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+const voteButton = defineStyle({
+  w: "18.4rem",
+  h: "5.4rem",
+  backgroundColor: "primary.300",
+  borderRadius: "48px",
+  boxShadow: "shadow.200",
+
+  position: "fixed",
+  left: "50%",
+  transform: "translateX(-50%)",
+  bottom: "8rem",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+export const buttonTheme = defineStyleConfig({
+  baseStyle,
+  variants: { CTAButton, blueButton, voteButton },
+});
diff --git a/src/chakra/chakraCustomTheme.ts b/src/chakra/chakraCustomTheme.ts
index 73cb7225..7bcd4dd2 100644
--- a/src/chakra/chakraCustomTheme.ts
+++ b/src/chakra/chakraCustomTheme.ts
@@ -1,10 +1,11 @@
 import { extendTheme } from "@chakra-ui/react";
 
 import { avatarTheme } from "./avatarCustom";
+import { buttonTheme } from "./buttonCustom";
+import { checkboxTheme } from "./checkboxCustom";
 import { modalTheme } from "./modalCustom";
 import { tabsTheme } from "./tabsCustom";
 import { tagTheme } from "./tagCustom";
-
 export const customTheme = extendTheme({
   styles: {
     global: {
@@ -216,75 +217,8 @@ export const customTheme = extendTheme({
     Tabs: tabsTheme,
     Tag: tagTheme,
     Modal: modalTheme,
-    Button: {
-      baseStyle: {
-        _disabled: {
-          backgroundColor: "neutral.200",
-          color: "neutral.400",
-          PointerEvent: "none",
-        },
-      },
-      //ex) Button 컴포넌트 내부에 variant="CTAButton"
-      variants: {
-        blueButton: {
-          backgroundColor: "primary.300",
-          borderRadius: "16px",
-          boxShadow: "shadow.200",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-        CTAButton: {
-          position: "fixed",
-          bottom: "2.4rem",
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: "32.7rem",
-          height: "4.6rem",
-
-          backgroundColor: "primary.300",
-          borderRadius: "16px",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          zIndex: "2",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-        voteButton: {
-          w: "18.4rem",
-          h: "5.4rem",
-          backgroundColor: "primary.300",
-          borderRadius: "48px",
-          boxShadow: "shadow.200",
-
-          position: "fixed",
-          left: "50%",
-          transform: "translateX(-50%)",
-          bottom: "8rem",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-      },
-    },
+    Checkbox: checkboxTheme,
+    Button: buttonTheme,
   },
 
   fonts: {
diff --git a/src/chakra/checkboxCustom.ts b/src/chakra/checkboxCustom.ts
new file mode 100644
index 00000000..955261cf
--- /dev/null
+++ b/src/chakra/checkboxCustom.ts
@@ -0,0 +1,32 @@
+import { checkboxAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+
+// import CheckedIcon from "@/assets/voteIcons/Checkbox_checked.svg?react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const candidateCheckbox = definePartsStyle({
+  control: defineStyle({
+    rounded: "full",
+    boxSize: "2rem",
+    mr: "12px",
+    mb: "35px",
+    _checked: {
+      background: "#2388FF",
+      borderColor: "#2388FF",
+      _hover: {
+        background: "#2388FF",
+        borderColor: "#2388FF",
+      },
+    },
+    _active: {
+      background: "#2388FF",
+      borderColor: "#2388FF",
+    },
+  }),
+});
+
+export const checkboxTheme = defineMultiStyleConfig({
+  variants: { candidateCheckbox },
+});
diff --git a/src/chakra/modalCustom.ts b/src/chakra/modalCustom.ts
index 6bb3c83d..a3314e1e 100644
--- a/src/chakra/modalCustom.ts
+++ b/src/chakra/modalCustom.ts
@@ -1,28 +1,49 @@
 import { modalAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(modalAnatomy.keys);
 
 const baseStyle = definePartsStyle({
+  //dialog 부모 박스, 가로 사이즈 정하고 가운데 정렬
+  dialogContainer: {
+    width: "100%",
+    maxWidth: "45rem",
+    minWidth: "36rem",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+  closeButton: {
+    fontSize: "1.5rem",
+    top: "16px",
+    right: "16px",
+  },
   overlay: {
-    bg: "rgba(20, 20, 20, 0.8)",
+    bg: "rgba(0, 0, 0, 0.6)",
   },
 });
 
+const alertSizeForDialog = defineStyle({
+  mx: "20px",
+});
+
 const alertModal = definePartsStyle({
   dialogContainer: {
-    width: "45rem",
+    width: "100%",
+    maxWidth: "45rem",
     minWidth: "36rem",
     left: "50%",
     transform: "translateX(-50%)",
-    px: "0",
   },
   dialog: {
-    w: "31.1rem",
+    w: "100%",
+    maxWidth: "45rem",
     mt: "264px",
-    mx: "0",
-    p: "32px 20px",
+    mx: "32px",
+    p: "32px 24px",
 
     borderRadius: "16px",
     gap: "24px",
@@ -40,7 +61,12 @@ const alertModal = definePartsStyle({
   },
 });
 
+const sizes = {
+  xl: definePartsStyle({ dialog: alertSizeForDialog }),
+};
+
 export const modalTheme = defineMultiStyleConfig({
+  sizes,
   baseStyle,
   variants: { alertModal },
 });
diff --git a/src/components/AlertModal/AlertModal.tsx b/src/components/AlertModal/AlertModal.tsx
index 5c27aabc..7bded659 100644
--- a/src/components/AlertModal/AlertModal.tsx
+++ b/src/components/AlertModal/AlertModal.tsx
@@ -29,6 +29,7 @@ import { AlertModalProps } from "@/types/vote";
 const AlertModal = ({
   title,
   subText,
+  cancelText,
   actionButton,
   isSmallSize,
   onClickAction,
@@ -57,7 +58,7 @@ const AlertModal = ({
             onClick={() => setIsModalOpen(false)}
             className={styles.buttons__cancel}
           >
-            취소
+            {cancelText ? cancelText : "취소"}
           </button>
           <button onClick={onClickAction} className={styles.buttons__action}>
             {actionButton}
diff --git a/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx
index 66c30d87..ca039919 100644
--- a/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx
+++ b/src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx
@@ -32,30 +32,31 @@ const CreatVoteTitleModal = () => {
 
       <Modal isOpen={isOpen} onClose={onClose} size={"lg"}>
         <ModalOverlay
-          maxWidth="45rem"
-          left="50%"
-          transform="translateX(-50%)"
+        // maxWidth="45rem"
+        // left="50%"
+        // transform="translateX(-50%)"
         />
         <ModalContent
-          px="10px"
-          py="20px"
-          borderRadius="20px"
+          px="20px"
+          py="40px"
+          mx="24px"
+          maxWidth="100%"
+          borderRadius="16px"
           alignSelf="center"
-          w="32.7rem"
-          h="23.6rem"
           boxSizing="border-box"
         >
           <ModalHeader
             fontWeight="titleSmall"
             fontSize="titleSmall"
             textAlign="center"
-            mt="5px"
+            p="0"
+            mb="32px"
           >
             투표 제목을 정해주세요
           </ModalHeader>
           <ModalCloseButton />
 
-          <ModalBody>
+          <ModalBody p="0">
             <FormControl justifyContent={"center"}>
               <Input
                 onChange={(e) => setInputCount(e.target.value.length)}
@@ -65,7 +66,6 @@ const CreatVoteTitleModal = () => {
                 variant="flushed"
                 placeholder=" 숙소 정하자, 카페 정하자"
                 fontSize="subTitle"
-                mt="5%"
               />
               <FormLabel
                 display="flex"
@@ -80,7 +80,7 @@ const CreatVoteTitleModal = () => {
             </FormControl>
           </ModalBody>
 
-          <ModalFooter>
+          <ModalFooter p="0" mt="24px">
             <Button
               type="submit"
               onClick={onClose}
diff --git a/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.module.scss b/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.module.scss
new file mode 100644
index 00000000..f5b2e9ac
--- /dev/null
+++ b/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.module.scss
@@ -0,0 +1,43 @@
+@use "@/sass" as *;
+
+.container {
+  width: 100%;
+  max-width: 45rem;
+  min-width: 36rem;
+  height: 7rem;
+
+  background: $primary300;
+
+  display: flex;
+
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+
+  z-index: 3;
+
+  color: $neutral0;
+
+  .cancelButton,
+  .deleteButton {
+    @include typography(button);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+
+    gap: 4px;
+
+    & > svg {
+      width: 2.2rem;
+      height: 2.2rem;
+      color: $neutral0;
+    }
+
+    &:disabled {
+      background: $neutral200;
+    }
+  }
+}
diff --git a/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.tsx b/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.tsx
new file mode 100644
index 00000000..09debb31
--- /dev/null
+++ b/src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.tsx
@@ -0,0 +1,63 @@
+import { HiOutlineTrash } from "react-icons/hi";
+import { IoMdClose } from "react-icons/io";
+import { useRecoilState, useSetRecoilState } from "recoil";
+
+import styles from "./DeleteCandidatesButton.module.scss";
+
+import AlertModal from "@/components/AlertModal/AlertModal";
+
+// import useSetAlertModalContent from "@/hooks/useSetAlertModalContent";
+import {
+  isCandidateSelectingState,
+  isModalOpenState,
+  modalContentState,
+} from "@/recoil/vote/alertModal";
+import { selectedCandidatesState } from "@/recoil/vote/candidateList";
+
+import { deleteCandidateContent } from "../VoteBottomSlideContent/VoteMeatball/modalContent";
+
+const DeleteCandidatesButton = () => {
+  const [selectedCandidates, setSelectedCandidates] = useRecoilState(
+    selectedCandidatesState,
+  );
+  const setIsCandidateSelecting = useSetRecoilState(isCandidateSelectingState);
+  const setIsModalOpen = useSetRecoilState(isModalOpenState);
+  const [modalContent, setModalContent] = useRecoilState(modalContentState);
+
+  const showDeleteCandidateModal = () => {
+    //삭제api
+    console.log("삭제하기모달오픈");
+    setIsModalOpen(true);
+    setModalContent({
+      ...deleteCandidateContent,
+      onClickAction: () => console.log("삭제됨~~~", selectedCandidates),
+    });
+  };
+
+  const cancelSelectingCandidate = () => {
+    setIsCandidateSelecting(false);
+    setSelectedCandidates(new Set());
+  };
+
+  return (
+    <div className={styles.container}>
+      <button
+        className={styles.cancelButton}
+        onClick={cancelSelectingCandidate}
+      >
+        <IoMdClose /> 취소
+      </button>
+      <button
+        className={styles.deleteButton}
+        disabled={selectedCandidates.size === 0}
+        onClick={showDeleteCandidateModal}
+      >
+        <HiOutlineTrash />
+        삭제하기
+      </button>
+      <AlertModal {...modalContent} />
+    </div>
+  );
+};
+
+export default DeleteCandidatesButton;
diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss
index cf5da3a1..5a12608a 100644
--- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss
+++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.module.scss
@@ -13,5 +13,9 @@
 
     display: flex;
     gap: 10px;
+
+    &:disabled {
+      color: $neutral400;
+    }
   }
 }
diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx
index 505a66fc..2293b4a6 100644
--- a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx
+++ b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { useSetRecoilState } from "recoil";
+// import { useState } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 import styles from "./VoteMeatball.module.scss";
 
@@ -9,25 +9,26 @@ import CheckIcon from "@/assets/voteIcons/vote_check.svg?react";
 import EditIcon from "@/assets/voteIcons/vote_edit.svg?react";
 import RepeatIcon from "@/assets/voteIcons/vote_repeat.svg?react";
 import TrashIcon from "@/assets/voteIcons/vote_trash.svg?react";
-import { isModalOpenState } from "@/recoil/vote/alertModal";
+import {
+  isCandidateSelectingState,
+  isModalOpenState,
+  modalContentState,
+} from "@/recoil/vote/alertModal";
 import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide";
 
 import {
   confirmVoteContent,
-  deleteCandidateContent,
   deleteVoteContent,
   retryVoteContent,
 } from "./modalContent";
 
 import { AlertModalProps, VoteMeatballProps } from "@/types/vote";
 
-const VoteMeatball = ({ state }: VoteMeatballProps) => {
+const VoteMeatball = ({ state, isZeroCandidates }: VoteMeatballProps) => {
   const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState);
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
-
-  const [modalProps, setModalProps] = useState<AlertModalProps | null>(
-    retryVoteContent,
-  );
+  const [modalContent, setModalContent] = useRecoilState(modalContentState);
+  const setIsCandidateSelecting = useSetRecoilState(isCandidateSelectingState);
 
   const modalConsole = () => {
     console.log("변경");
@@ -35,7 +36,13 @@ const VoteMeatball = ({ state }: VoteMeatballProps) => {
 
   const showAlertModal = ({ ...content }: AlertModalProps) => {
     setIsModalOpen(true);
-    setModalProps({ ...content });
+    setModalContent({ ...content });
+    setIsBTOpen(false);
+  };
+
+  const changeToCandidateSelecting = () => {
+    setIsCandidateSelecting(true);
+    console.log("체체체체인지");
     setIsBTOpen(false);
   };
 
@@ -52,6 +59,7 @@ const VoteMeatball = ({ state }: VoteMeatballProps) => {
         </button>
       ) : (
         <button
+          disabled={isZeroCandidates}
           onClick={() =>
             showAlertModal({
               onClickAction: modalConsole,
@@ -68,17 +76,12 @@ const VoteMeatball = ({ state }: VoteMeatballProps) => {
         <EditIcon />
         <p>투표 제목 수정</p>
       </button>
-      <button
-        onClick={() =>
-          showAlertModal({
-            onClickAction: modalConsole,
-            ...deleteCandidateContent,
-          })
-        }
-      >
+
+      <button disabled={isZeroCandidates} onClick={changeToCandidateSelecting}>
         <TrashIcon />
         <p>후보 삭제</p>
       </button>
+
       <button
         onClick={() =>
           showAlertModal({ onClickAction: modalConsole, ...deleteVoteContent })
@@ -88,7 +91,7 @@ const VoteMeatball = ({ state }: VoteMeatballProps) => {
         <p>투표 전체 삭제</p>
       </button>
 
-      {modalProps && <AlertModal {...modalProps} />}
+      <AlertModal {...modalContent} />
     </div>
   );
 };
diff --git a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx
index cef3f90d..e9ee6a03 100644
--- a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx
+++ b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { FaRegStar, FaStar } from "react-icons/fa";
 import { Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
 
 import styles from "./CandidateCard.module.scss";
 
@@ -8,6 +9,7 @@ import FirstIcon from "@/assets/voteIcons/rank_1.svg?react";
 import SecondIcon from "@/assets/voteIcons/rank_2.svg?react";
 import ThirdIcon from "@/assets/voteIcons/rank_3.svg?react";
 import AddDayIcon from "@/assets/voteIcons/vote_addDay.svg?react";
+import { isCandidateSelectingState } from "@/recoil/vote/alertModal";
 
 import VotedUserList from "../../VoteBottomSlideContent/VotedUserList/VotedUserList";
 
@@ -20,6 +22,7 @@ const CandidateCard = ({
   index,
 }: CandidateCardProps) => {
   const [isVoted, setIsVoted] = useState(false);
+  const isCandidateSelecting = useRecoilValue(isCandidateSelectingState);
   const voteCounts = candidate.voteCounts;
 
   const getRankClassName = (index: number) => {
@@ -92,7 +95,11 @@ const CandidateCard = ({
             </button>
           )}
         </div>
-        <button className={styles.main__voteBox} onClick={onVoteBoxClick}>
+        <button
+          className={styles.main__voteBox}
+          onClick={onVoteBoxClick}
+          disabled={isCandidateSelecting}
+        >
           <div className={styles.main__voteBox__star}>
             {isVoted ? <FaStar style={{ color: "#fee500" }} /> : <FaRegStar />}
           </div>
diff --git a/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss b/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss
new file mode 100644
index 00000000..c5ff580d
--- /dev/null
+++ b/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss
@@ -0,0 +1,35 @@
+@use "@/sass" as *;
+
+.container {
+  margin-bottom: 50px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.candidateContainer {
+  display: flex;
+  align-items: center;
+
+  .candidateBox {
+    flex: 1;
+
+    &__memo {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      margin-top: 16px;
+      &__text {
+        height: 2.2rem;
+        @include typography(bodySmall);
+        color: $neutral900;
+        background-color: $neutral100;
+
+        padding: 0 16px;
+        border-radius: 8px;
+      }
+    }
+  }
+}
diff --git a/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx b/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx
new file mode 100644
index 00000000..2cdaf581
--- /dev/null
+++ b/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx
@@ -0,0 +1,72 @@
+import { Avatar, Checkbox } from "@chakra-ui/react";
+import { useSetRecoilState } from "recoil";
+
+import styles from "./CandidateList.module.scss";
+
+import { selectedCandidatesState } from "@/recoil/vote/candidateList";
+
+import CandidateCard from "../CandidateCard/CandidateCard";
+import VoteContentEmpty from "../VoteContentEmpty/VoteContentEmpty";
+
+import { CandidateListProps } from "@/types/vote";
+
+const CandidateList = ({
+  candidates,
+  onBottomSlideOpen,
+  showResults,
+  isCandidateSelecting,
+}: CandidateListProps) => {
+  const setSelectedCandidates = useSetRecoilState(selectedCandidatesState);
+
+  const addCandidateInSelectedList = (id: number) => {
+    setSelectedCandidates((currentCandidatesSet) => {
+      const newSet = new Set(currentCandidatesSet);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      console.log("newSet", newSet);
+      return newSet;
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      {candidates ? (
+        candidates.map((candidate, i) => (
+          <div key={i} className={styles.candidateContainer}>
+            {isCandidateSelecting && (
+              <Checkbox
+                fontSize="2rem"
+                id={`${i}checkbox`}
+                variant="candidateCheckbox"
+                onChange={() => addCandidateInSelectedList(candidate.id)}
+              />
+            )}
+            <div className={styles.candidateBox}>
+              <label htmlFor={`${i}checkbox`}>
+                <CandidateCard
+                  onBottomSlideOpen={onBottomSlideOpen}
+                  candidate={candidate}
+                  showResults={showResults}
+                  index={i + 1}
+                />
+              </label>
+              <div className={styles.candidateBox__memo}>
+                <Avatar boxSize="24px" />
+                <div className={styles.candidateBox__memo__text}>
+                  {candidate.memo}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))
+      ) : (
+        <VoteContentEmpty />
+      )}
+    </div>
+  );
+};
+
+export default CandidateList;
diff --git a/src/components/Vote/VoteContent/VoteContent.module.scss b/src/components/Vote/VoteContent/VoteContent.module.scss
index da46117f..64459e1d 100644
--- a/src/components/Vote/VoteContent/VoteContent.module.scss
+++ b/src/components/Vote/VoteContent/VoteContent.module.scss
@@ -30,30 +30,4 @@
       color: $neutral900;
     }
   }
-  &__candidateList {
-    margin-bottom: 50px;
-
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-  }
-}
-
-.candidateBox {
-  &__memo {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    margin-top: 16px;
-    &__text {
-      height: 2.2rem;
-      @include typography(bodySmall);
-      color: $neutral900;
-      background-color: $neutral100;
-
-      padding: 0 16px;
-      border-radius: 8px;
-    }
-  }
 }
diff --git a/src/components/Vote/VoteContent/VoteContent.tsx b/src/components/Vote/VoteContent/VoteContent.tsx
index 08c9962c..e0be7e81 100644
--- a/src/components/Vote/VoteContent/VoteContent.tsx
+++ b/src/components/Vote/VoteContent/VoteContent.tsx
@@ -1,12 +1,15 @@
-import { Avatar, Icon } from "@chakra-ui/react";
+import { Icon } from "@chakra-ui/react";
 import { GoDotFill } from "react-icons/go";
 import { IoMdCheckmark } from "react-icons/io";
+import { useRecoilValue } from "recoil";
 
 import styles from "./VoteContent.module.scss";
 
-import CandidateCard from "./CandidateCard/CandidateCard";
-import VoteContentEmpty from "./VoteContentEmpty/VoteContentEmpty";
+import { isCandidateSelectingState } from "@/recoil/vote/alertModal";
+
+import CandidateList from "./CandidateList/CandidateList";
 import VoteRecommendList from "./VoteRecommendList/VoteRecommendList";
+import DeleteCandidatesButton from "../DeleteCandidatesButton/DeleteCandidatesButton";
 import AddCandidate from "../VoteBottomSlideContent/AddCandidate/AddCandidate";
 
 import { VoteContentProps } from "@/types/vote";
@@ -17,9 +20,7 @@ const VoteContent = ({
   showResults,
 }: VoteContentProps) => {
   const candidates = data.candidates;
-
-  //결과보기 클릭(showResults) 이후
-  // 득표 순으로 재정렬
+  const isCandidateSelecting = useRecoilValue(isCandidateSelectingState);
 
   // 결정완료 상태 -> stateBar 결정완료 / CTA버튼 삭제 / 추천슬라이드 후보추가->일정에담기
   // 결정완료는... voteData에서
@@ -46,30 +47,16 @@ const VoteContent = ({
           + 후보 추가({candidates.length}/15)
         </button>
       </div>
-      <div className={styles.container__candidateList}>
-        {candidates ? (
-          candidates.map((candidate, i) => (
-            <div key={i} className={styles.candidateBox}>
-              <CandidateCard
-                onBottomSlideOpen={onBottomSlideOpen}
-                candidate={candidate}
-                showResults={showResults}
-                index={i + 1}
-              />
-              <div className={styles.candidateBox__memo}>
-                <Avatar boxSize="24px" />
-                <div className={styles.candidateBox__memo__text}>
-                  {candidate.memo}
-                </div>
-              </div>
-            </div>
-          ))
-        ) : (
-          <VoteContentEmpty />
-        )}
-      </div>
+
+      <CandidateList
+        candidates={candidates}
+        onBottomSlideOpen={onBottomSlideOpen}
+        showResults={showResults}
+        isCandidateSelecting={isCandidateSelecting}
+      />
       {/* 후보지&여행지 X -> 상품 추천 없음 */}
       <VoteRecommendList state={data.state} />
+      {isCandidateSelecting && <DeleteCandidatesButton />}
     </div>
   );
 };
diff --git a/src/mocks/handlers/vote.ts b/src/mocks/handlers/vote.ts
index e2842bf1..3780a480 100644
--- a/src/mocks/handlers/vote.ts
+++ b/src/mocks/handlers/vote.ts
@@ -12,7 +12,7 @@ const candidateData = [
     voteUserId: ["Id123", "Id234", "Id345"],
     voteCounts: 3,
     memo: "예쁨~~~~~~~~~",
-    id: 1,
+    id: 111,
   },
   {
     name: "니은펜션",
@@ -23,7 +23,7 @@ const candidateData = [
     voteUserId: ["Id123", "Id345"],
     voteCounts: 2,
     memo: "여기 개쩔드라",
-    id: 2,
+    id: 222,
   },
   {
     name: "기역호텔",
@@ -34,7 +34,7 @@ const candidateData = [
     voteUserId: ["Id123", "Id234", "Id345"],
     voteCounts: 3,
     memo: "예쁨~~~~~~~~~",
-    id: 4,
+    id: 333,
   },
   {
     name: "니은펜션",
@@ -45,7 +45,7 @@ const candidateData = [
     voteUserId: ["Id123", "Id345"],
     voteCounts: 2,
     memo: "여기 개쩔드라",
-    id: 3,
+    id: 444,
   },
 ];
 
diff --git a/src/pages/Vote/Vote.tsx b/src/pages/Vote/Vote.tsx
index c809a85b..7388c27d 100644
--- a/src/pages/Vote/Vote.tsx
+++ b/src/pages/Vote/Vote.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@chakra-ui/react";
 import { ReactNode, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 import styles from "./Vote.module.scss";
 
@@ -12,12 +12,18 @@ import VoteContentEmpty from "@/components/Vote/VoteContent/VoteContentEmpty/Vot
 import VoteHeader from "@/components/Vote/VoteHeader/VoteHeader";
 
 import { getVoteData } from "@/mocks/handlers/vote";
+import { isCandidateSelectingState } from "@/recoil/vote/alertModal";
 import { isBottomSlideOpenState } from "@/recoil/vote/bottomSlide";
+import { selectedCandidatesState } from "@/recoil/vote/candidateList";
 
 import { VoteListData } from "@/types/vote";
 
 const Vote = () => {
   const [isBTOpen, setIsBTOpen] = useRecoilState(isBottomSlideOpenState);
+  const [isCandidateSelecting, setIsCandidateSelecting] = useRecoilState(
+    isCandidateSelectingState,
+  );
+  const setSelectedCandidates = useSetRecoilState(selectedCandidatesState);
   const [showResults, setShowResults] = useState(false);
   const [bottomSlideContent, setBottomSlideContent] =
     useState<ReactNode | null>(null);
@@ -26,33 +32,22 @@ const Vote = () => {
 
   useEffect(() => {
     getVoteData(param, setData);
+    setIsCandidateSelecting(false);
+    setShowResults(false);
+    setSelectedCandidates(new Set());
   }, []);
 
   const BottomSlideOpen = (content: ReactNode) => {
     setBottomSlideContent(content);
     setIsBTOpen(true);
+    setSelectedCandidates(new Set());
+    setIsCandidateSelecting(false);
   };
 
   const handleShowResultsClick = () => {
     setShowResults(!showResults);
   };
 
-  // const showBottomButton = () => {
-  //   if(data?.state === "진행 중") {
-  //     <Button
-  //     variant="CTAButton"
-  //     onClick={handleShowResultsClick}
-  //     isDisabled={data.candidates.length === 0}
-  //   >
-  //     {showResults ? "다시 투표하기" : "결과보기"}
-  //   </Button>
-  //   } else if ("리코일 후보삭제") {
-  //     //새로운 버튼 컴포넌트 <DeleteCandidateBottomButton/>
-  //   } else {
-  //     null
-  //   }
-  // }
-
   return (
     <>
       {data && (
@@ -61,7 +56,12 @@ const Vote = () => {
           <VoteHeader
             title={data.title as string}
             onBottomSlideOpen={() =>
-              BottomSlideOpen(<VoteMeatball state={data.state} />)
+              BottomSlideOpen(
+                <VoteMeatball
+                  state={data.state}
+                  isZeroCandidates={data.candidates.length === 0}
+                />,
+              )
             }
           />
 
@@ -74,8 +74,7 @@ const Vote = () => {
           ) : (
             <VoteContentEmpty />
           )}
-
-          {data.state === "진행 중" && (
+          {!isCandidateSelecting && data.state === "진행 중" && (
             <Button
               variant="CTAButton"
               onClick={handleShowResultsClick}
@@ -84,7 +83,6 @@ const Vote = () => {
               {showResults ? "다시 투표하기" : "결과보기"}
             </Button>
           )}
-
           <BottomSlide
             isOpen={isBTOpen}
             onClose={() => setIsBTOpen(false)}
diff --git a/src/recoil/vote/alertModal.ts b/src/recoil/vote/alertModal.ts
index c8e1875b..904911bf 100644
--- a/src/recoil/vote/alertModal.ts
+++ b/src/recoil/vote/alertModal.ts
@@ -1,6 +1,24 @@
 import { atom } from "recoil";
 
+import { AlertModalProps } from "@/types/vote";
+
 export const isModalOpenState = atom<boolean>({
   key: "isModalOpenState",
   default: false,
 });
+
+export const isCandidateSelectingState = atom<boolean>({
+  key: "isCandidateSelectingState",
+  default: false,
+});
+
+export const modalContentState = atom<AlertModalProps>({
+  key: "modalContentState",
+  default: {
+    title: "",
+    subText: "",
+    actionButton: "",
+    isSmallSize: false,
+    onClickAction: () => {},
+  },
+});
diff --git a/src/recoil/vote/candidateList.ts b/src/recoil/vote/candidateList.ts
new file mode 100644
index 00000000..6f936349
--- /dev/null
+++ b/src/recoil/vote/candidateList.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const selectedCandidatesState = atom<Set<number>>({
+  key: "selectedCandidatesState",
+  default: new Set(),
+});
diff --git a/src/types/vote.ts b/src/types/vote.ts
index a2b88949..5ba52a85 100644
--- a/src/types/vote.ts
+++ b/src/types/vote.ts
@@ -1,21 +1,5 @@
 import { ReactNode } from "react";
 
-export interface VoteBottomButtonProps {
-  onClick: () => void;
-  title: string;
-}
-
-export interface VoteContentProps {
-  onBottomSlideOpen: (content: ReactNode) => void;
-  data: VoteListData;
-  showResults: boolean;
-}
-
-export interface VoteHeaderProps {
-  onBottomSlideOpen: () => void;
-  title: string;
-}
-
 export interface CandidateData {
   name: string;
   imageURL: string;
@@ -37,6 +21,68 @@ export interface VoteListData {
   id: string;
 }
 
+////////////////스웨거//////////////////
+export interface SSCandidateData {
+  id: number;
+  placeId: number; //
+  placeName: string;
+  category: string;
+  tagline: string; //메모?
+  amIVoted: boolean; //
+  //imageURL: string;
+  //location: string;
+  //voteUserId: string[];   //이거 필요
+  //voteCounts: number;
+  //memo: string;
+}
+[];
+export interface SSVoteData {
+  id: string;
+  title: string;
+  ownerProfile: {
+    id: number;
+    nickName: string;
+    profile: string;
+  };
+  candidates: CandidateData[];
+  // state: string;
+  // voteUserId: string[];
+}
+
+export interface SSVoteCardData {
+  voteId: string;
+  title: string;
+  ownerProfile: {
+    id: number;
+    nickName: string;
+    profile: string;
+  };
+  votedMemberProfiles: [
+    {
+      id: 0; //props으로 내려줄게 아니라면 사진만 있어도 됨, 배열로
+      nickName: string;
+      profile: string;
+    },
+  ];
+}
+////////////////스웨거//////////////////
+
+export interface VoteBottomButtonProps {
+  onClick: () => void;
+  title: string;
+}
+
+export interface VoteContentProps {
+  onBottomSlideOpen: (content: ReactNode) => void;
+  data: VoteListData;
+  showResults: boolean;
+}
+
+export interface VoteHeaderProps {
+  onBottomSlideOpen: () => void;
+  title: string;
+}
+
 export interface CandidateCardProps {
   onBottomSlideOpen: (content: ReactNode) => void;
   candidate: CandidateData;
@@ -46,12 +92,21 @@ export interface CandidateCardProps {
 
 export interface VoteMeatballProps {
   state: string;
+  isZeroCandidates: boolean;
 }
 
 export interface AlertModalProps {
   title: string;
   subText?: string;
+  cancelText?: string;
   actionButton: string;
   isSmallSize: boolean;
   onClickAction?: () => void;
 }
+
+export interface CandidateListProps {
+  candidates: CandidateData[];
+  onBottomSlideOpen: (content: ReactNode) => void;
+  showResults: boolean;
+  isCandidateSelecting: boolean;
+}