diff --git a/src/app/(sidebar)/(my-info)/containers/Onboarding/LogoLeaf.tsx b/src/app/(sidebar)/(my-info)/containers/Onboarding/LogoLeaf.tsx
new file mode 100644
index 00000000..500d93d7
--- /dev/null
+++ b/src/app/(sidebar)/(my-info)/containers/Onboarding/LogoLeaf.tsx
@@ -0,0 +1,36 @@
+export function LogoLeaf() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <path
+        d="M6.95076 4.69616L6.71222 2.62413L9.28129 0.449716L13.1015 2.08511L14.6898 3.99471L13.5597 6.1562L15.6505 6.15803L17.1724 9.00283L16.3246 12.9441L13.8177 13.886L11.5652 13.0542L10.7603 15.5643L8.61926 16.8785L4.56281 15.0992L4.73665 12.0278L1.91604 11.2028L0.936531 8.86515L1.91181 4.33131L4.72747 3.538L6.95076 4.69616Z"
+        fill="#20E79D"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.5042 11.0016L10.3408 9.86802L10.6884 9.0166L12.9852 9.72614L12.5042 11.0016Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        d="M9.25348 7.4811L9.80066 5.25152L11.0796 5.67017L10.1247 7.7757L9.25348 7.4811Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.47524 8.91236L5.06404 8.3716L5.38759 7.28785L7.67825 8.09248L7.47524 8.91236Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.32851 10.2445L8.89211 12.4077L7.67188 12.2134L8.4429 9.99665L9.32851 10.2445Z"
+        fill="#007D4F"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx b/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx
index 1c065ec1..4202ee44 100644
--- a/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx
+++ b/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx
@@ -1,13 +1,15 @@
-import { Dialog, DialogContent, DialogTrigger } from '@/system/components/Dialog/Dialog';
+import { Dialog, DialogContent } from '@/system/components/Dialog/Dialog';
 import { Logo } from './Logo';
 import { Spacing } from '@/system/utils/Spacing';
 import { AnimateSlide } from '@/system/utils/AnimateSlide/AnimateSlide';
 import { TouchButton } from '@/components/TouchButton';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { If } from '@/system/utils/If';
 import { cn } from '@/utils';
-import { motion } from 'framer-motion';
+import { motion, useAnimationControls } from 'framer-motion';
 import { color } from '@/system/token/color';
+import { LogoLeaf } from './LogoLeaf';
+import { Icon } from '@/system/components';
 
 const MAX_INDEX = 3;
 
@@ -18,6 +20,7 @@ interface OnboardingDialogProps {
 export function OnboardingDialog({}: OnboardingDialogProps) {
   const [step, setStep] = useState<'text' | 'card' | 'finish'>('text');
   const [currentIndex, setCurrentIndex] = useState(0);
+  const controls = useAnimationControls();
 
   const onNextClick = () => {
     if (currentIndex < MAX_INDEX) {
@@ -27,11 +30,29 @@ export function OnboardingDialog({}: OnboardingDialogProps) {
     setStep('card');
   };
 
+  useEffect(() => {
+    if (step === 'card') {
+      const interval = setInterval(() => controls.start('wiggle'), 100);
+
+      const timeout = setTimeout(() => {
+        clearInterval(interval);
+        setStep('finish');
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [step]);
+
   return (
     <Dialog open>
       <DialogContent className="p-0 w-auto max-w-[auto]">
         <motion.div
-          animate={step !== 'text' ? { width: 260, height: 440, transition: { delay: 0.2 } } : {}}
+          variants={{
+            text: {},
+            // wiggle: { x: [-2, 2, -2, 2] },
+            card: { width: 260, height: 440, transition: { delay: 0.2 } },
+            finish: { width: 260, height: 440, transition: { delay: 0.2 } },
+          }}
+          animate={step}
           className="relative flex flex-col items-center p-[24px]">
           <Spacing size={8} />
           <button
@@ -112,16 +133,23 @@ export function OnboardingDialog({}: OnboardingDialogProps) {
             className="absolute bg-white top-0 left-0 w-full h-full rounded-[24px]"
           />
         </If>
-        <If condition={step !== 'text'}>
-          <TouchButton className="absolute bottom-[-84px] p-0">
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 1 }}
-              className="px-[20px] py-[13px] flex gap-[6px] text-white bg-neutral-95 rounded-[6px] text-bold2 font-semibold">
-              행운의 취뽀 부적 다운받기
-            </motion.div>
-          </TouchButton>
+        <If condition={step === 'finish'}>
+          <div className="absolute left-[50%] translate-x-[-50%] bottom-[-84px]">
+            <TouchButton>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 1 }}
+                className="px-[20px] py-[13px] flex items-center gap-[6px] text-white bg-neutral-95 rounded-[6px] text-bold2 font-semibold whitespace-pre">
+                <LogoLeaf />
+                <span className="flex items-center">
+                  행운의 취뽀 부적 다운받기
+                  <Icon name="download" />
+                </span>
+                <LogoLeaf />
+              </motion.div>
+            </TouchButton>
+          </div>
         </If>
       </DialogContent>
     </Dialog>
diff --git a/src/app/(sidebar)/(my-info)/page.tsx b/src/app/(sidebar)/(my-info)/page.tsx
index 800945dd..1eb90ea6 100644
--- a/src/app/(sidebar)/(my-info)/page.tsx
+++ b/src/app/(sidebar)/(my-info)/page.tsx
@@ -13,6 +13,7 @@ import { If } from '@/system/utils/If';
 import { motion } from 'framer-motion';
 import { InfoCardSkeleton } from './components/InfoCardSkeleton';
 import { AsyncBoundaryWithQuery } from '@/lib';
+import { Onboarding } from './containers/Onboarding/Onboarding';
 
 export default function MyInfo() {
   const [showHeader, setShowHeader] = useState(false);
@@ -112,6 +113,9 @@ export default function MyInfo() {
           pendingFallback={<InfoCardSkeleton count={4} />}>
           <InfoCardList cardType={currentCardType} />
         </AsyncBoundaryWithQuery>
+        <If condition={false}>
+          <Onboarding />
+        </If>
       </div>
     </div>
   );
diff --git a/src/app/(sidebar)/my-recruit/[id]/page.tsx b/src/app/(sidebar)/my-recruit/[id]/page.tsx
index 88b1207f..b6f8b4b8 100644
--- a/src/app/(sidebar)/my-recruit/[id]/page.tsx
+++ b/src/app/(sidebar)/my-recruit/[id]/page.tsx
@@ -13,7 +13,7 @@ import { useState } from 'react';
 import { useDeleteRecruit } from '../api/useDeleteRecruit';
 import { usePostCardToRecruit } from '../api/usePostCardToRecruit';
 import { RightSidebar } from '../containers/RightSidebar/RightSidebar';
-import { DueDateDialog } from '../containers/components/DueDateDialog';
+import { DueDateDialog } from '../containers/components/DueDateDialog/DueDateDialog';
 import { DetailContent } from './components/DetailContent';
 import DetailHeader from './components/DetailHeader';
 
@@ -59,7 +59,7 @@ export default function CompanyDetail({ params: { id: recruitId } }: { params: {
                   </Dropdown.Trigger>
                   <Dropdown.Content align="end">
                     <Dropdown.CheckedItem className="gap-[8px]">
-                      <DueDateDialog onDuedateAppend={() => {}} />
+                      <DueDateDialog id={Number(recruitId)} onDuedateAppend={() => {}} />
                     </Dropdown.CheckedItem>
                   </Dropdown.Content>
                 </Dropdown>
diff --git a/src/app/(sidebar)/my-recruit/api/useDeleteRecruitSchedule.ts b/src/app/(sidebar)/my-recruit/api/useDeleteRecruitSchedule.ts
new file mode 100644
index 00000000..f9a257e9
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/api/useDeleteRecruitSchedule.ts
@@ -0,0 +1,25 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_RECRUIT_SCHEDULE } from '@/app/(sidebar)/my-recruit/api/useGetRecruitSchedule';
+
+interface Request {
+  id: number;
+  recruitScheduleId: number;
+}
+
+function deleteRecruitSchedule({ id, recruitScheduleId }: Request) {
+  return http.delete({ url: `/recruits/${id}/recruit-schedule/${recruitScheduleId}` });
+}
+
+export function useDeleteRecruitSchedule() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => deleteRecruitSchedule(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_SCHEDULE] });
+    },
+  });
+
+  return mutate;
+}
diff --git a/src/app/(sidebar)/my-recruit/api/useGetRecruitSchedule.ts b/src/app/(sidebar)/my-recruit/api/useGetRecruitSchedule.ts
new file mode 100644
index 00000000..a0074168
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/api/useGetRecruitSchedule.ts
@@ -0,0 +1,30 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+interface Request {
+  id: number;
+}
+
+interface ScheduleType {
+  id: number;
+  recruitScheduleStage: string;
+  deadLine: string;
+}
+
+export const GET_RECRUIT_SCHEDULE = 'get-recruit-schedule';
+
+function getRecruitSchedule({ id }: Request) {
+  return http.get<ScheduleType[]>({ url: `/recruits/${id}/recruit-schedule` });
+}
+
+export function useGetRecruitSchedule({ id }: Request) {
+  const result = useSuspenseQuery({
+    queryKey: [GET_RECRUIT_SCHEDULE, id],
+    queryFn: async () => {
+      const res = await getRecruitSchedule({ id });
+      return res.data;
+    },
+  });
+
+  return result;
+}
diff --git a/src/app/(sidebar)/my-recruit/api/usePostRecruitSchedule.ts b/src/app/(sidebar)/my-recruit/api/usePostRecruitSchedule.ts
new file mode 100644
index 00000000..027325f3
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/api/usePostRecruitSchedule.ts
@@ -0,0 +1,26 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_RECRUIT_SCHEDULE } from '@/app/(sidebar)/my-recruit/api/useGetRecruitSchedule';
+
+interface Request {
+  id: number;
+  recruitScheduleStage: string;
+  deadLine: string;
+}
+
+function postRecruitSchedule({ id, ...data }: Request) {
+  return http.post({ url: `/recruits/${id}/recruit-schedule`, data });
+}
+
+export function usePostRecruitSchedule() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => postRecruitSchedule(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_SCHEDULE] });
+    },
+  });
+
+  return mutate;
+}
diff --git a/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleDeadline.ts b/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleDeadline.ts
new file mode 100644
index 00000000..578ea7de
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleDeadline.ts
@@ -0,0 +1,26 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_RECRUIT_SCHEDULE } from '@/app/(sidebar)/my-recruit/api/useGetRecruitSchedule';
+
+interface Request {
+  id: number;
+  recruitScheduleId: number;
+  deadLine: string;
+}
+
+export function putRecruitScheduleDeadline({ id, recruitScheduleId, deadLine }: Request) {
+  return http.put({ url: `/recruits/${id}/recruit-schedule/${recruitScheduleId}/deadLine`, data: { deadLine } });
+}
+
+export function usePutRecruitScheduleDeadline() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => putRecruitScheduleDeadline(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_SCHEDULE] });
+    },
+  });
+
+  return mutate;
+}
diff --git a/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleStage.ts b/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleStage.ts
new file mode 100644
index 00000000..398feb29
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/api/usePutRecruitScheduleStage.ts
@@ -0,0 +1,29 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_RECRUIT_SCHEDULE } from '@/app/(sidebar)/my-recruit/api/useGetRecruitSchedule';
+
+interface Request {
+  id: number;
+  recruitScheduleId: number;
+  recruitScheduleStage: string;
+}
+
+export function putRecruitScheduleStage({ id, recruitScheduleId, recruitScheduleStage }: Request) {
+  return http.put({
+    url: `/recruits/${id}/recruit-schedule/${recruitScheduleId}/stage`,
+    data: { recruitScheduleStage },
+  });
+}
+
+export function usePutRecruitScheduleStage() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => putRecruitScheduleStage(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_SCHEDULE] });
+    },
+  });
+
+  return mutate;
+}
diff --git a/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx b/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx
index 62dbcaef..b1973e4b 100644
--- a/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx
+++ b/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx
@@ -1,12 +1,20 @@
 import { InfoCard } from '@/components/InfoCard';
+import { useDndContext } from '@/lib/dnd-kit/dnd-kit';
+import { If } from '@/system/utils/If';
 import { ComponentProps } from 'react';
 
 export function DraggableInfoCard(props: ComponentProps<typeof InfoCard>) {
+  const { over } = useDndContext();
+
+  const overTitle = over?.data.current?.title;
+
   return (
     <div className="relative">
-      <div className="absolute top-0 left-[50%] translate-y-[calc(-100%-8px)] translate-x-[-50%] px-[10px] py-[4px] bg-[rgba(112,115,124,0.85)] text-[white] text-label1 font-semibold rounded-[6px]">
-        {props.title || '제목을 입력해주세요'}
-      </div>
+      <If condition={overTitle != null}>
+        <div className="absolute top-0 left-[50%] translate-y-[calc(-100%-8px)] translate-x-[-50%] px-[10px] py-[4px] bg-[rgba(112,115,124,0.85)] text-[white] text-label1 font-semibold rounded-[6px] whitespace-pre">
+          {`내 공고 '${overTitle}' 폴더로 복사 중`}
+        </div>
+      </If>
       <InfoCard {...props} />
     </div>
   );
diff --git a/src/app/(sidebar)/my-recruit/constant.ts b/src/app/(sidebar)/my-recruit/constant.ts
index 44751ea5..47f23a31 100644
--- a/src/app/(sidebar)/my-recruit/constant.ts
+++ b/src/app/(sidebar)/my-recruit/constant.ts
@@ -4,7 +4,7 @@ export const recruitStatusList = [
   { variant: 'text', text: '지원 준비' },
   { variant: 'text', text: '지원 완료' },
   { variant: 'border' },
-  { variant: 'text', text: '서류 마감' },
+  { variant: 'text', text: '서류 통과' },
   { variant: 'text', text: '서류 탈락' },
   { variant: 'border' },
   { variant: 'text', text: '면접 통과' },
diff --git a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx
index a7da8f9e..63b397e9 100644
--- a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx
@@ -38,7 +38,10 @@ export function AllRecruitList({ selectedSeason }: Props) {
           present: (
             <div className="flex flex-col gap-[12px]">
               {allRecruits.map((cardInfo) => (
-                <Droppable key={`${cardInfo.season}-${cardInfo.title}`} id={cardInfo.id}>
+                <Droppable
+                  key={`${cardInfo.id}-${cardInfo.season}-${cardInfo.title}`}
+                  id={cardInfo.id}
+                  dataForOverlay={{ title: cardInfo.title }}>
                   <RowCard
                     highlighted={cardInfo.id === over?.id}
                     {...cardInfo}
diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx
index 7e0f9451..5c8c89ae 100644
--- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx
@@ -24,7 +24,6 @@ export function ProgressingRecruitList() {
   const { mutate: deleteRecruit } = useDeleteRecruit();
 
   const [cardsPerRow, setCardsPerRow] = useState(최초_노출_카드_갯수);
-  console.log('🚀 ~ ProgressingRecruitList ~ cardsPerRow:', cardsPerRow, recruitCards);
   const resizeRef = useResizeObserver(({ contentRect }) => {
     setCardsPerRow(Math.max(1, Math.floor(contentRect.width / (MIN_CARD_WIDTH + CARD_GAP))));
   });
@@ -55,7 +54,7 @@ export function ProgressingRecruitList() {
                 <div ref={resizeRef} className="grid flex-wrap" style={{ gridTemplateColumns, gap: CARD_GAP }}>
                   {recruitCardForShow.map((cardInfo) => (
                     <BoxCard
-                      key={`${cardInfo.season}-${cardInfo.title}`}
+                      key={`${cardInfo.id}-${cardInfo.season}-${cardInfo.title}`}
                       {...cardInfo}
                       onDuedateAppend={() => {}}
                       onRecruitDelete={deleteRecruit}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
index a64b9a39..44902679 100644
--- a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
@@ -6,8 +6,9 @@ import { MoreButton } from '@/app/(sidebar)/my-recruit/containers/components/Car
 import { StatusButton } from '@/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import Link from 'next/link';
-import { DueDateDialog } from '../DueDateDialog';
+import { DueDateDialog } from '../DueDateDialog/DueDateDialog';
 import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
+import { useRouter } from 'next/navigation';
 
 interface BoxCardProps extends RecruitCard {
   onRecruitDelete: (id: number) => void;
@@ -27,46 +28,49 @@ export function BoxCard({
   onRecruitStatusChange,
   onRecruitDelete,
 }: BoxCardProps) {
+  const router = useRouter();
   const minWidth = MIN_CARD_WIDTH;
 
   return (
-    <Link href={`/my-recruit/${id}`}>
-      <div className="flex-1 rounded-[10px] overflow-hidden cursor-pointer" style={{ minWidth }}>
-        <div className="h-38 pr-12 pl-20 bg-neutral-95 flex justify-between items-center">
-          {nearestSchedule == null ? (
-            <Dialog>
-              <Dialog.Trigger className="flex justify-between items-center w-full">
-                <span className="text-label2 text-neutral-50">공고 일정을 등록해주세요</span>
-                <Icon name="add" size={24} color={color.neutral50} />
-              </Dialog.Trigger>
-              <Dialog.Content className="w-400">
-                <DueDateDialog title={title} onDuedateAppend={() => onDuedateAppend()} />
-              </Dialog.Content>
-            </Dialog>
-          ) : (
-            <>
-              <div className="flex items-center gap-[4px]">
-                <Icon name="clover" size={20} color={color.mint30} />
-                <span className="text-white text-label2 ">
-                  {nearestSchedule.recruitScheduleStage} D-{dday(nearestSchedule.deadLine)}
-                </span>
-              </div>
-              <MoreButton onDeleteClick={() => onRecruitDelete(id)} />
-            </>
-          )}
-        </div>
-        <div className="p-20 pt-16 bg-white border-neutral-5 border-1 rounded-b-[10px] hover:border-neutral-95">
-          <div className="flex justify-between items-center">
-            <div className="bg-mint-1 text-mint-50 text-label1 px-8 py-4 rounded-4">{season}</div>
+    <div className="flex-1 rounded-[10px] overflow-hidden cursor-pointer" style={{ minWidth }}>
+      <div className="h-38 pr-12 pl-20 bg-neutral-95 flex justify-between items-center">
+        {nearestSchedule == null ? (
+          <Dialog>
+            <Dialog.Trigger className="flex justify-between items-center w-full">
+              <span className="text-label2 text-neutral-50">공고 일정을 등록해주세요</span>
+              <Icon name="add" size={24} color={color.neutral50} />
+            </Dialog.Trigger>
+            <Dialog.Content className="w-400">
+              <DueDateDialog id={id} title={title} onDuedateAppend={() => onDuedateAppend()} />
+            </Dialog.Content>
+          </Dialog>
+        ) : (
+          <>
+            <div className="flex items-center gap-[4px]">
+              <Icon name="clover" size={20} color={color.mint30} />
+              <span className="text-white text-label2 ">
+                {nearestSchedule.recruitScheduleStage} D-{dday(nearestSchedule.deadLine)}
+              </span>
+            </div>
+            <MoreButton onDeleteClick={() => onRecruitDelete(id)} />
+          </>
+        )}
+      </div>
+      <div
+        className="p-20 pt-16 bg-white border-neutral-5 border-1 rounded-b-[10px] hover:border-neutral-95"
+        onClick={() => router.push(`/my-recruit/${id}`)}>
+        <div className="flex justify-between items-center">
+          <div className="bg-mint-1 text-mint-50 text-label1 px-8 py-4 rounded-4">{season}</div>
+          <div onClick={(e) => e.stopPropagation()}>
             <StatusButton
               currentStatus={recruitStatus}
               onRecruitStatusChange={(status) => onRecruitStatusChange(id, status)}
             />
           </div>
-          <Spacing size={16} />
-          <span className="text-nuetral-95 font-semibold font-body1 text-ellipsis line-clamp-1">{title}</span>
         </div>
+        <Spacing size={16} />
+        <span className="text-nuetral-95 font-semibold font-body1 text-ellipsis line-clamp-1">{title}</span>
       </div>
-    </Link>
+    </div>
   );
 }
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/RowCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/RowCard.tsx
index d0d5aed7..9c27c98d 100644
--- a/src/app/(sidebar)/my-recruit/containers/components/Card/RowCard.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/components/Card/RowCard.tsx
@@ -9,6 +9,7 @@ import { StatusButton } from './common/StatusButton';
 import { cn } from '@/utils';
 import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
 import { MoreButton } from './common/MoreButton';
+import { useRouter } from 'next/navigation';
 
 type RowCardProps = RecruitCard & {
   highlighted?: boolean;
@@ -26,6 +27,7 @@ export function RowCard({
   onRecruitDelete,
   onRecruitStatusChange,
 }: RowCardProps) {
+  const router = useRouter();
   const isOutOfDate = nearestSchedule != null && dday(nearestSchedule.deadLine) < 0;
 
   const pointerEventsClassName = isOutOfDate ? 'pointer-events-none' : 'pointer-events-auto';
@@ -35,38 +37,38 @@ export function RowCard({
     .otherwise(() => 'bg-neutral-95');
 
   return (
-    <Link href={`/my-recruit/${id}`}>
-      <div className={cn('w-full rounded-[10px] overflow-hidden flex cursor-pointer', pointerEventsClassName)}>
-        <div className={cn('w-12 disabled:bg-neutral-10 h-70', rightMarkBackgroundColorClassName)} />
-        <div
-          className={cn(
-            'px-24 py-22 flex-1 flex items-center border-1 border-l-transparent rounded-r-[10px] justify-between hover:border-neutral-95 hover:border-l-transparent',
-            highlighted ? 'border-mint-10 bg-[rgba(221,243,235,0.50)]' : 'border-neutral-5 bg-[white]',
-          )}>
-          <div className="flex items-center">
-            <span className="text-neutral-50 text-label2 font-medium">{season}</span>
-            <Spacing size={24} direction="row" />
-            <If condition={nearestSchedule != null}>
-              <div className="px-6 py-4 rounded-[4px] bg-neutral-95 flex gap-[2px]">
-                <Icon name="clover" size={20} color={color.mint30} />
-                <span className="text-white text-label2 ">
-                  {recruitStatus} D-{dday(nearestSchedule?.deadLine!)}
-                </span>
-              </div>
-            </If>
-            <Spacing size={12} direction="row" />
-            <span className="font-semibold font-body1">{title}</span>
-          </div>
-          <div className="flex items-center">
-            <StatusButton
-              currentStatus={recruitStatus}
-              onRecruitStatusChange={(status) => onRecruitStatusChange(id, status)}
-            />
-            <Spacing size={32} direction="row" />
-            <MoreButton onDeleteClick={() => onRecruitDelete(id)} />
-          </div>
+    <div
+      className={cn('w-full rounded-[10px] overflow-hidden flex cursor-pointer', pointerEventsClassName)}
+      onClick={() => router.push(`/my-recruit/${id}`)}>
+      <div className={cn('w-12 disabled:bg-neutral-10 h-70', rightMarkBackgroundColorClassName)} />
+      <div
+        className={cn(
+          'px-24 py-22 flex-1 flex items-center border-1 border-l-transparent rounded-r-[10px] justify-between hover:border-neutral-95 hover:border-l-transparent',
+          highlighted ? 'border-mint-10 bg-[rgba(221,243,235,0.50)]' : 'border-neutral-5 bg-[white]',
+        )}>
+        <div className="flex items-center">
+          <span className="text-neutral-50 text-label2 font-medium">{season}</span>
+          <Spacing size={24} direction="row" />
+          <If condition={nearestSchedule != null}>
+            <div className="px-6 py-4 rounded-[4px] bg-neutral-95 flex gap-[2px]">
+              <Icon name="clover" size={20} color={color.mint30} />
+              <span className="text-white text-label2 ">
+                {recruitStatus} D-{dday(nearestSchedule?.deadLine!)}
+              </span>
+            </div>
+          </If>
+          <Spacing size={12} direction="row" />
+          <span className="font-semibold font-body1">{title}</span>
+        </div>
+        <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
+          <StatusButton
+            currentStatus={recruitStatus}
+            onRecruitStatusChange={(status) => onRecruitStatusChange(id, status)}
+          />
+          <Spacing size={32} direction="row" />
+          <MoreButton onDeleteClick={() => onRecruitDelete(id)} />
         </div>
       </div>
-    </Link>
+    </div>
   );
 }
diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx
deleted file mode 100644
index 46fb9394..00000000
--- a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { recruitStatusList } from '@/app/(sidebar)/my-recruit/constant';
-import { Button, Dropdown, Icon } from '@/system/components';
-import { Calendar } from '@/system/components/Calendar/Calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
-import { color } from '@/system/token/color';
-import { Spacing } from '@/system/utils/Spacing';
-import { cn } from '@/utils';
-import clsx from 'clsx';
-import { format } from 'date-fns/format';
-import { motion } from 'framer-motion';
-import { useState } from 'react';
-import { recruitScheduleStageList } from '../../constant';
-
-interface DueDateDialogProps {
-  title?: string;
-  onDuedateAppend: () => void;
-}
-
-export function DueDateDialog({ title }: DueDateDialogProps) {
-  const [selectedDate, setSelectedDate] = useState<Date>();
-  const [currentRecruitStage, setCurrentRecruitStage] = useState<string>(recruitStatusList[3].text);
-  const [dueDateList, setDueDateList] = useState<
-    Array<{
-      recruitScheduleStage: string | null;
-      deadLine: `${number}-${number}-${number}` | null;
-    }>
-  >([]);
-
-  const isDateSelected = selectedDate != null;
-  const activatedAddButton =
-    dueDateList.length !== 0 && dueDateList[0].deadLine != null && dueDateList[0].recruitScheduleStage != null;
-
-  return (
-    <div className="p-20">
-      <div className="flex items-center w-314">
-        {title && (
-          <>
-            <Icon name="folderFill" size={20} color={color.neutral95} />
-            <Spacing size={4} direction="row" />
-          </>
-        )}
-        <span
-          className={cn('text-body1 font-semibold overflow-hidden text-ellipsis line-clamp-1', title ? 'flex-1' : '')}>
-          {title ? `${title}의 공고 일정 등록하기` : '공고 일정 등록하기'}
-        </span>
-      </div>
-      <Spacing size={4} />
-      <span className={clsx('text-caption1 text-neutral-35', title ? '' : 'block text-start')}>
-        일정을 등록하면 잊지 않도록 알려드릴게요!
-      </span>
-      <Spacing size={24} />
-      {/* 마감일 입력 */}
-      <div className="w-full flex justify-between items-center p-8 bg-neutral-1 rounded-[8px]">
-        <Dropdown>
-          <Dropdown.Trigger>
-            <div className="flex items-center gap-[4px] px-8 py-4">
-              <span className="text-label1 text-neutral-95">{currentRecruitStage}</span>
-              {title && <Dropdown.TriggerArrow />}
-            </div>
-          </Dropdown.Trigger>
-          <Dropdown.Content>
-            {recruitScheduleStageList.map((item, index) => (
-              <Dropdown.CheckedItem
-                key={index}
-                checked={currentRecruitStage === item}
-                disabled={currentRecruitStage === item}
-                onClick={() => setCurrentRecruitStage(item)}>
-                {item}
-              </Dropdown.CheckedItem>
-            ))}
-          </Dropdown.Content>
-        </Dropdown>
-        <Popover>
-          <PopoverTrigger>
-            <motion.div
-              initial="initial"
-              variants={{
-                initial: { backgroundColor: 'rgb(241, 242, 243, 0)' },
-                touch: { scale: 0.96, transition: { duration: 0.1 } },
-                hover: { backgroundColor: 'rgb(241, 242, 243, 1)' },
-              }}
-              whileTap="touch"
-              whileHover="hover"
-              className="px-8 py-4 flex items-center gap-[4px] rounded-[4px]">
-              <Icon name={isDateSelected ? 'calendarFill' : 'calendar'} size={20} color={color.neutral30} />
-              <span className={clsx('text-label2', isDateSelected ? 'text-neutral-95' : 'text-neutral-40')}>
-                {isDateSelected ? format(selectedDate, 'yyyy.mm.dd') : '마감일을 선택해주세요'}
-              </span>
-            </motion.div>
-          </PopoverTrigger>
-          <PopoverContent className="w-270 mr-[120px]">
-            <Calendar mode="single" selected={selectedDate} onSelect={setSelectedDate} />
-          </PopoverContent>
-        </Popover>
-      </div>
-      <Spacing size={16} />
-      <Button
-        disabled={activatedAddButton === false}
-        className="w-full h-46 flex justify-center items-center gap-[4px] border-[1px] border-neutral-35 border-dashed rounded-[6px]">
-        <Icon name="add" color={color.neutral70} />
-        <span className="text-caption1 font-medium text-neutral-70">일정 추가하기</span>
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/DueDateDialog.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/DueDateDialog.tsx
new file mode 100644
index 00000000..3913d356
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/DueDateDialog.tsx
@@ -0,0 +1,100 @@
+import { Button, Icon } from '@/system/components';
+import { color } from '@/system/token/color';
+import { Spacing } from '@/system/utils/Spacing';
+import { cn } from '@/utils';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { useGetRecruitSchedule } from '../../../api/useGetRecruitSchedule';
+import { Form } from '@/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form';
+import { If } from '@/system/utils/If';
+import { useQueryClient } from '@tanstack/react-query';
+import { GET_ALL_RECRUITS_KEY } from '../../../api/useGetAllRecruits';
+import { GET_PROGRESSING_RECRUITS_KEY } from '../../../api/useGetProgressingRecruits';
+import { useDeleteRecruitSchedule } from '../../../api/useDeleteRecruitSchedule';
+
+interface DueDateDialogProps {
+  id: number;
+  title?: string;
+  onDuedateAppend: () => void;
+}
+
+export function DueDateDialog({ id, title }: DueDateDialogProps) {
+  const [additonalScheduleForm, setAdditionalScheduleForm] = useState(false);
+  const scheduleList = useGetRecruitSchedule({ id }).data;
+
+  const { mutate: deleteRecruitSchedule } = useDeleteRecruitSchedule();
+
+  const activatedAddButton =
+    additonalScheduleForm === false &&
+    scheduleList.length !== 0 &&
+    scheduleList[0].deadLine != null &&
+    scheduleList[0].recruitScheduleStage != null;
+
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    return () => {
+      queryClient.invalidateQueries({ queryKey: [GET_PROGRESSING_RECRUITS_KEY] });
+      queryClient.invalidateQueries({ queryKey: [GET_ALL_RECRUITS_KEY] });
+    };
+  }, []);
+
+  return (
+    <div className="p-20" key={scheduleList.length}>
+      <div className="flex items-center w-314">
+        {title && (
+          <>
+            <Icon name="folderFill" size={20} color={color.neutral95} />
+            <Spacing size={4} direction="row" />
+          </>
+        )}
+        <span
+          className={cn('text-body1 font-semibold overflow-hidden text-ellipsis line-clamp-1', title ? 'flex-1' : '')}>
+          {title ? `${title}의 공고 일정 등록하기` : '공고 일정 등록하기'}
+        </span>
+      </div>
+      <Spacing size={4} />
+      <span className={clsx('text-caption1 text-neutral-35', title ? '' : 'block text-start')}>
+        일정을 등록하면 잊지 않도록 알려드릴게요!
+      </span>
+      <Spacing size={24} />
+      {/* 마감일 입력 */}
+      <div className="flex w-full flex-col gap-[8px]">
+        {scheduleList.length === 0 ? (
+          <Form recruitId={id} hasArrow={title != null} />
+        ) : (
+          scheduleList.map((schedule, index) => (
+            <Form
+              recruitId={id}
+              key={schedule.id}
+              {...schedule}
+              hasArrow={title != null}
+              hasDeleteButton={index !== 0}
+              onDeleteClick={() => deleteRecruitSchedule({ id, recruitScheduleId: schedule.id })}
+            />
+          ))
+        )}
+        <If condition={additonalScheduleForm}>
+          <Form
+            recruitId={id}
+            hasArrow={title != null}
+            hasDeleteButton
+            onDeleteClick={() => setAdditionalScheduleForm(false)}
+          />
+        </If>
+      </div>
+      <Spacing size={16} />
+      <Button
+        onClick={() => setAdditionalScheduleForm(true)}
+        disabled={activatedAddButton === false}
+        className={cn(
+          activatedAddButton ? 'bg-neutral-95' : 'border-dashed',
+          'w-full h-46 flex justify-center items-center gap-[4px] border-[1px] border-neutral-35 rounded-[6px]',
+        )}>
+        <Icon name="add" color={activatedAddButton ? 'white' : color.neutral70} />
+        <span className={clsx(activatedAddButton ? 'text-white' : 'text-neutral-70', 'text-caption1 font-medium')}>
+          일정 추가하기
+        </span>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx
new file mode 100644
index 00000000..4d210bd7
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx
@@ -0,0 +1,129 @@
+import { Dropdown, Icon } from '@/system/components';
+import { Calendar } from '@/system/components/Calendar/Calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
+import { color } from '@/system/token/color';
+import clsx from 'clsx';
+import { format } from 'date-fns/format';
+import { motion } from 'framer-motion';
+import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
+import { useState } from 'react';
+import { usePostRecruitSchedule } from '../../../api/usePostRecruitSchedule';
+import { usePutRecruitScheduleDeadline } from '../../../api/usePutRecruitScheduleDeadline';
+import { usePutRecruitScheduleStage } from '../../../api/usePutRecruitScheduleStage';
+import { If } from '@/system/utils/If';
+
+interface Props {
+  id?: number;
+  recruitId: number;
+  deadLine?: string;
+  recruitScheduleStage?: string;
+  hasDeleteButton?: boolean;
+  hasArrow: boolean;
+  onDeleteClick?: () => void;
+}
+
+// 매번 서버요청 안하도록 리팩토링
+export function Form({
+  id,
+  recruitId,
+  hasArrow,
+  deadLine,
+  recruitScheduleStage,
+  hasDeleteButton,
+  onDeleteClick,
+}: Props) {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(deadLine != null ? new Date(deadLine) : undefined);
+  const [currentRecruitStage, setCurrentRecruitStage] = useState<string>(
+    recruitScheduleStage ?? recruitScheduleStageList[0],
+  );
+
+  const isDateSelected = selectedDate != null;
+  const { mutate: postRecruitSchedule } = usePostRecruitSchedule();
+  const { mutate: putRecruitScheduleDeadline } = usePutRecruitScheduleDeadline();
+  const { mutate: putRecruitScheduleState } = usePutRecruitScheduleStage();
+
+  const handleStageClick = (item: string) => {
+    if (id != null) {
+      putRecruitScheduleState({ id: recruitId, recruitScheduleId: id, recruitScheduleStage: item });
+      return;
+    }
+    setCurrentRecruitStage(item);
+    if (selectedDate == null) {
+      return;
+    }
+    postRecruitSchedule({
+      id: recruitId,
+      deadLine: format(selectedDate, 'yyyy-MM-dd'),
+      recruitScheduleStage: currentRecruitStage,
+    });
+  };
+
+  const handleDeadlineClick = (date?: Date) => {
+    if (date == null) {
+      return;
+    }
+    if (id != null) {
+      putRecruitScheduleDeadline({ id: recruitId, recruitScheduleId: id, deadLine: format(date, 'yyyy-MM-dd') });
+      return;
+    }
+    setSelectedDate(date);
+    postRecruitSchedule({
+      id: recruitId,
+      deadLine: format(date, 'yyyy-MM-dd'),
+      recruitScheduleStage: currentRecruitStage,
+    });
+  };
+
+  return (
+    <div className="w-full flex justify-between items-center p-8 bg-neutral-1 rounded-[8px]">
+      <Dropdown>
+        <Dropdown.Trigger>
+          <div className="flex items-center gap-[4px] px-8 py-4">
+            <span className="text-label1 text-neutral-95">{currentRecruitStage}</span>
+            {hasArrow && <Dropdown.TriggerArrow />}
+          </div>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          {recruitScheduleStageList.map((item, index) => (
+            <Dropdown.CheckedItem
+              key={index}
+              checked={currentRecruitStage === item}
+              disabled={currentRecruitStage === item}
+              onClick={() => handleStageClick(item)}>
+              {item}
+            </Dropdown.CheckedItem>
+          ))}
+        </Dropdown.Content>
+      </Dropdown>
+      <div className="flex items-center">
+        <Popover>
+          <PopoverTrigger>
+            <motion.div
+              initial="initial"
+              variants={{
+                initial: { backgroundColor: 'rgb(241, 242, 243, 0)' },
+                touch: { scale: 0.96, transition: { duration: 0.1 } },
+                hover: { backgroundColor: 'rgb(241, 242, 243, 1)' },
+              }}
+              whileTap="touch"
+              whileHover="hover"
+              className="px-8 py-4 flex items-center gap-[4px] rounded-[4px]">
+              <Icon name={isDateSelected ? 'calendarFill' : 'calendar'} size={20} color={color.neutral30} />
+              <span className={clsx('text-label2', isDateSelected ? 'text-neutral-95' : 'text-neutral-40')}>
+                {isDateSelected ? format(selectedDate, 'yyyy.MM.dd') : '마감일을 선택해주세요'}
+              </span>
+            </motion.div>
+          </PopoverTrigger>
+          <PopoverContent className="w-270 mr-[120px]">
+            <Calendar mode="single" selected={selectedDate} onSelect={handleDeadlineClick} />
+          </PopoverContent>
+          <If condition={hasDeleteButton}>
+            <button onClick={onDeleteClick}>
+              <Icon name="close" size={16} color={'#989BA2'} />
+            </button>
+          </If>
+        </Popover>
+      </div>
+    </div>
+  );
+}
diff --git a/src/container/Sidebar/Sidebar.tsx b/src/container/Sidebar/Sidebar.tsx
index f7b87500..e237431f 100644
--- a/src/container/Sidebar/Sidebar.tsx
+++ b/src/container/Sidebar/Sidebar.tsx
@@ -67,12 +67,12 @@ export function Sidebar() {
         </Collapsible>
         <Collapsible collapsed={expanded ? myJDCollapsed : true} onCollapsedChange={setMyJDCollapsed}>
           <SidebarButton
-            iconName={pathname === MY_RECRUIT_PATH ? 'workFill' : 'folder'}
-            selected={pathname === MY_RECRUIT_PATH}
+            iconName={pathname.includes(MY_RECRUIT_PATH) ? 'workFill' : 'folder'}
+            selected={pathname.includes(MY_RECRUIT_PATH)}
             expanded={expanded}
             expandedText="내 공고"
             withHoverEffect={!expanded}
-            withTouchEffect={pathname !== MY_RECRUIT_PATH}
+            withTouchEffect={!pathname.includes(MY_RECRUIT_PATH)}
             right={
               <Collapsible.Trigger>
                 <Collapsible.ArrowButton />
diff --git a/src/hooks/useScroll.ts b/src/hooks/useScroll.ts
index 97f04be2..a5a93ae1 100644
--- a/src/hooks/useScroll.ts
+++ b/src/hooks/useScroll.ts
@@ -3,7 +3,6 @@ import { RefObject, useEffect } from 'react';
 export function useScroll(target: RefObject<HTMLDivElement>, callback: (topOffsetY: number) => void) {
   useEffect(() => {
     const element = target.current ?? window;
-    console.log(element);
 
     const callback2 = () => {
       const topOffsetY = target.current?.scrollTop ?? window.scrollY;
diff --git a/src/lib/dnd-kit/Droppable.tsx b/src/lib/dnd-kit/Droppable.tsx
index c0d65697..d4fdd05e 100644
--- a/src/lib/dnd-kit/Droppable.tsx
+++ b/src/lib/dnd-kit/Droppable.tsx
@@ -6,11 +6,12 @@ import { motion, useAnimationControls } from 'framer-motion';
 interface DroppableProps {
   id: string | number;
   children?: ReactNode;
+  dataForOverlay?: any;
 }
 
-export function Droppable({ id, children }: DroppableProps) {
+export function Droppable({ id, children, dataForOverlay }: DroppableProps) {
   const animationControl = useAnimationControls();
-  const { setNodeRef } = useDroppable({ id });
+  const { setNodeRef } = useDroppable({ id, data: dataForOverlay });
   const { selectedId } = useDndAdditionalContext();
 
   useEffect(() => {
diff --git a/src/system/components/Dialog/Dialog.tsx b/src/system/components/Dialog/Dialog.tsx
index 483a3e03..a30cc878 100644
--- a/src/system/components/Dialog/Dialog.tsx
+++ b/src/system/components/Dialog/Dialog.tsx
@@ -43,10 +43,10 @@ const DialogContent = React.forwardRef<
       )}
       {...props}>
       {children}
-      <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+      {/* <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
         <Icon name="x" color="#878A93" />
         <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      </DialogPrimitive.Close> */}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
diff --git a/src/system/components/Icon/Icon.tsx b/src/system/components/Icon/Icon.tsx
index 68835c71..86f904fc 100644
--- a/src/system/components/Icon/Icon.tsx
+++ b/src/system/components/Icon/Icon.tsx
@@ -44,6 +44,7 @@ import { Trash } from './SVG/Trash';
 import { Unlink } from './SVG/Unlink';
 import { Up } from './SVG/Up';
 import { WorkFill } from './SVG/WorkFill';
+import { Downloads } from './SVG/Downloads';
 import { X } from './SVG/X';
 
 const iconMap = {
@@ -89,6 +90,7 @@ const iconMap = {
   rocket: Rocket,
   logoOnly: LogoOnly,
   workFill: WorkFill,
+  download: Downloads,
   arrowUp: ArrowUp,
   logout: Logout,
   profileFill: ProfileFill,
diff --git a/src/system/components/Icon/SVG/Close.tsx b/src/system/components/Icon/SVG/Close.tsx
index 05f4524e..0cc8c4cd 100644
--- a/src/system/components/Icon/SVG/Close.tsx
+++ b/src/system/components/Icon/SVG/Close.tsx
@@ -2,9 +2,9 @@ import { IconBaseType } from '@/system/components/Icon/SVG/type';
 
 export function Close({ size, color }: IconBaseType) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
-      <path d="M18 6L6 18" stroke={color} strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="round" />
-      <path d="M6 6L18 18" stroke={color} strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="round" />
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <path d="M11 5L5 11" stroke={color} strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="round" />
+      <path d="M5 5L11 11" stroke={color} strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="round" />
     </svg>
   );
 }
diff --git a/src/system/components/Icon/SVG/Downloads.tsx b/src/system/components/Icon/SVG/Downloads.tsx
new file mode 100644
index 00000000..5e0e0a91
--- /dev/null
+++ b/src/system/components/Icon/SVG/Downloads.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconBaseType } from './type';
+
+export function Downloads({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <path d="M4.16406 12.3333V15.6666H15.8307V12.3333" stroke={color} stroke-width="1.25" />
+      <path
+        d="M10 2.33325V10.6666M10 10.6666L13.75 6.91659M10 10.6666L6.25 6.91659"
+        stroke={color}
+        stroke-width="1.25"
+      />
+    </svg>
+  );
+}