diff --git a/src/app/components/Calendar.tsx b/src/app/components/Calendar.tsx
index 353f12a..eaa8b14 100644
--- a/src/app/components/Calendar.tsx
+++ b/src/app/components/Calendar.tsx
@@ -133,7 +133,7 @@ const ModalCalendar = ({ isOpen, closeModal, setIsCalendarOpen }: any) => {
     return (
       <span
         onClick={changeMonth}
-        className='hover:text-[tomato]'
+        className='hover:text-[tomato] p-4'
       >{'<'}</span>
     )
   }
@@ -149,7 +149,7 @@ const ModalCalendar = ({ isOpen, closeModal, setIsCalendarOpen }: any) => {
     return (
       <span
         onClick={changeMonth}
-        className='hover:text-[tomato]'
+        className='hover:text-[tomato] p-4'
       >{'>'}
       </span>
     )
diff --git a/src/app/components/cal.css b/src/app/components/cal.css
index 7fb4709..acfde12 100644
--- a/src/app/components/cal.css
+++ b/src/app/components/cal.css
@@ -5,60 +5,37 @@
   box-sizing: border-box;
 }
 
-/* 달력 몸통 */
-.react-calendar {
-  min-width: 550px; /* 달력의 너비 - 모바일 화면에 적합하게 조정 */
-  border-radius: 20px;
-  border: 3px solid #afa4ce;
-  display: flex;
-  flex-direction: column;
-  margin: auto; /* 수평 중앙 정렬 */
-  margin-top: 75px; /* 상단에서의 마진 */
-  /*max-height: 700px; /* 부모 요소의 높이를 따르도록 설정 */
-  height: 760px;
-  overflow-y: hidden !important;
-  position: relative; /* 추가: 상대 위치 설정 */
-}
 
-/* 달력 내부 스타일 */
-.react-calendar__month-view {
-  min-height: 420px !important; /* 내부 높이를 자동으로 조절 */
-  display: flex;
-  flex-direction: column;
-  margin: auto; /* 수평 중앙 정렬 */
-  margin-top: px; /* 상단에서의 마진 */
-  max-height: 620px; /* 부모 요소의 높이를 따르도록 설정 */
-  overflow-y: hidden !important; /* 내용이 넘칠 경우 스크롤 표시 */
-  position: relative; /* 추가: 상대 위치 설정 */
-}
 
-/* 달력 내부 스타일 */
-.react-calendar__month-view__days {
-  margin-top: 10px;
-  overflow-y: auto; /* 내용이 넘칠 경우 스크롤 표시 */
-}
+
+
+
 
 /* 오버레이 스타일 */
 .react-calendar::before {
   content: '';
-  position: fixed; /* 변경: 오버레이를 화면에 고정합니다. */
+  position: fixed;
+  /* 변경: 오버레이를 화면에 고정합니다. */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(
-    0,
-    0,
-    0,
-    0.3
-  ); /* 검정색 오버레이 색상 및 투명도 조절 */
-  z-index: -1; /* 달력 아래로 배치 */
+  background-color: rgba(0, 0, 0, 0.3);
+  /* 검정색 오버레이 색상 및 투명도 조절 */
+  z-index: -1;
+  /* 달력 아래로 배치 */
 }
 
 .calendar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+  /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
   position: relative;
 }
 
+
 .close-button {
   position: absolute;
   top: 10px;
@@ -69,53 +46,41 @@
   cursor: pointer;
 }
 
-/* 미디어 쿼리 반응형 */
+/* 미디어 쿼리: 태블릿 */
 @media screen and (min-width: 768px) {
   .react-calendar {
-    min-width: 62%; /* 중간 크기 화면에 적합한 너비 */
-    max-width: 900px; /* 최대 너비 */
-  }
-  .react-calendar__navigation {
-    background-color: #e6e6fa;
-    border-bottom: 4px solid #afa4ce;
-    height: 100px !important; /* 크기를 고정합니다. */
-    border-radius: 17px 17px 0 0;
-    overflow: hidden;
+    width: 70%;
+    /* 태블릿에서의 너비 */
   }
+}
 
-  .react-calendar__navigation span {
-    font-size: 32px;
-  }
 
-  .react-calendar__navigation__next-button,
-  .react-calendar__navigation__prev-button {
-    font-size: 40px;
-  }
+.react-calendar__navigation span {
+  font-size: 32px;
 }
 
-/* 더 큰 화면을 위한 미디어 쿼리 */
-@media screen and (min-width: 1024px) {
-  .react-calendar {
-    min-width: 50%; /* 더 큰 화면에 적합한 너비 */
-  }
+.react-calendar__navigation__next-button,
+.react-calendar__navigation__prev-button {
+  font-size: 40px;
 }
 
-/* 다크 모드 스타일 */
-@media (prefers-color-scheme: dark) {
+
+/* 미디어 쿼리: 데스크톱 */
+@media screen and (min-width: 1024px) {
   .react-calendar {
-    background-color: #333; /* 어두운 배경색 */
-    color: white; /* 흰색 글자 */
+    width: 60%;
+    /* 데스크톱에서의 너비 */
   }
 }
 
-/* 기타 스타일 설정 */
-/* ... (나머지 스타일 설정은 동일하게 유지) */
+
 
 /* 달력 상단 */
 .react-calendar__navigation {
   background-color: #e6e6fa;
   border-bottom: 4px solid #afa4ce;
-  height: 80px; /* 높이 조절을 원하는 값으로 수정 */
+  height: 80px;
+  /* 높이 조절을 원하는 값으로 수정 */
   border-radius: 17px 17px 0 0;
 }
 
@@ -132,29 +97,26 @@
   font-size: 30px;
 }
 
-/* <> 글자 마우스 올렸을 때 색상 */
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-  color: red;
-}
-
-/* 달력 안쪽 여백 */
-.react-calendar__month-view {
-  padding: 20px 36px;
-}
-
-.react-calendar__month-view__days {
-  margin-top: 10px;
-  height: 450;
-}
 
 .react-calendar__tile {
-  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
-  height: 105px !important; /* 날짜별 칸의 높이를 조절합니다. */
-  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
-  margin-top: 10px;
+  width: 40px;
+  /* 날짜별 칸의 너비를 조절합니다. */
+  height: 100px !important;
+  /* 날짜별 칸의 높이를 조절합니다. */
+  font-size: 16px;
+  /* 날짜의 글꼴 크기를 조절합니다. */
+  margin-top: 10px !important;
+  margin-right: 8px;
+  /* 날짜 칸 간격 늘림 */
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
 }
 
+
 /* 날짜 색상 및 크기 */
 .react-calendar__month-view abbr {
   color: black;
@@ -173,68 +135,79 @@
   color: black;
   text-decoration: none;
 }
+
+
+/* 요일 헤더 스타일 */
+.react-calendar__month-view__weekdays {
+  display: flex;
+  justify-content: space-around;
+  /* 요일 헤더를 가로로 균등 배치 */
+}
+
+
+.react-calendar__month-view__weekdays__weekday,
+.react-calendar__month-view__weekdays__weekday abbr {
+  text-align: center;
+  flex-grow: 1;
+}
+
 .react-calendar__tile--active.react-calendar__year-view__months__month {
   background-color: transparent;
   color: black;
   border-radius: 0;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .react-calendar__year-view__months abbr {
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .react-calendar__month-view__days {
-  margin-top: 10px;
+  margin-top: 6px;
 }
 
 /* 요일 색상 및 크기 */
-.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr /* 일 */ {
+.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr
+
+/* 일 */
+  {
   font-size: 20px;
   font-weight: 900;
-  color: red !important; /* 검정색으로 수정 */
+  color: red !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
-.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr /* 일 */ {
+.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr
+
+/* 일 */
+  {
   font-size: 20px;
   font-weight: 900;
-  color: blue !important; /* 검정색으로 수정 */
+  color: blue !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
-.react-calendar__month-view__weekdays:nth-child(6), /* 목요일 */
+.react-calendar__month-view__weekdays:nth-child(6),
+/* 목요일 */
 .react-calendar__month-view__weekdays:nth-child(7) {
   font-size: 20px;
   font-weight: 900;
-  color: red !important; /* 검정색으로 수정 */
+  color: red !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
-/* 날짜별 칸 스타일 */
-.react-calendar__tile {
-  text-align: center;
-  height: 87px; /* 수정된 부분: 날짜별 칸의 높이를 조절합니다. */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin-top: 10px !important; /* 수정된 부분: 날짜 간의 간격을 조절합니다. */
-}
-
-/* 날짜 클릭했을 때 칸 색상 */
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus,
-.react-calendar__tile--active {
-  background-color: rgba(215, 175, 211, 0.3);
-  border-radius: 14px;
-}
 
 .react-calendar__tile--active,
 .react-calendar__tile--now {
-  pointer-events: auto; /* 클릭 이벤트 비활성화 */
-  background-color: rgba(215, 175, 211, 0.3); /* RGB에 투명도 추가 */
+  pointer-events: auto;
+  /* 클릭 이벤트 비활성화 */
+  background-color: rgba(215, 175, 211, 0.3);
+  /* RGB에 투명도 추가 */
   border-radius: 14px;
   height: 87px;
 }
@@ -257,10 +230,6 @@
   background: none !important;
 }
 
-.react-calendar__navigation__label {
-  font-size: 24px;
-  font-weight: 600;
-}
 
 .dot-img {
   width: 100%;
@@ -277,30 +246,95 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 /* 스티커 크기 */
 .dot {
-  width: 80px; /* 이미지의 너비를 조절합니다. */
-  height: 80px; /* 이미지의 높이를 조절합니다. */
+  width: 65px;
+  height: 65px;
   display: flex;
   justify-content: center;
   align-items: center;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .dot img {
-  max-width: 100%; /* 이미지의 최대 너비를 조절하여 비율을 유지합니다. */
-  max-height: 100%; /* 이미지의 최대 높이를 조절하여 비율을 유지합니다. */
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  max-width: 100%;
+  /* 이미지의 최대 너비를 조절하여 비율을 유지합니다. */
+  max-height: 100%;
+  /* 이미지의 최대 높이를 조절하여 비율을 유지합니다. */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
-.calendar-container {
-  position: relative; /* 컨테이너 위치 설정 */
-}
+
 
 .react-calendar {
+  width: 80%;
+  /* 너비를 %로 조정 */
+  max-width: 550px;
+  /* 최대 너비 설정 */
+  min-height: 300px !important;
+  max-height: 690px;
+  border-radius: 20px;
+  border: 3px solid #afa4ce;
+  margin: 75vh auto 0;
+  /* 상단 마진을 뷰포트 높이의 %로 조정 */
+  height: auto;
+  overflow-y: hidden;
   position: relative;
-  overflow-y: auto !important;
 }
+
+.react-calendar__navigation {
+  background-color: #e6e6fa;
+  border-bottom: 4px solid #afa4ce;
+  height: 100px !important;
+  /* 크기를 고정합니다. */
+  border-radius: 17px 17px 0 0;
+  overflow: hidden;
+}
+
+.react-calendar__month-view {
+  min-height: 320px !important;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-height: 520px;
+  /* 부모 요소의 높이를 따르도록 설정 */
+  position: relative;
+  overflow-y: auto;
+}
+
+.react-calendar__tile {
+  width: 40px;
+  height: 80px !important;
+  font-size: 16px;
+  margin-top: 10px !important;
+  margin-right: 8px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus,
+.react-calendar__tile--active {
+  background-color: rgba(215, 175, 211, 0.3);
+  border-radius: 14px;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  color: red;
+}
+
+.react-calendar__navigation__label {
+  font-size: 24px;
+  font-weight: 600;
+}
\ No newline at end of file