diff --git a/packages/web/src/common/components/Calendar/Calendar.tsx b/packages/web/src/common/components/Calendar/Calendar.tsx
index 902d47f..9659825 100644
--- a/packages/web/src/common/components/Calendar/Calendar.tsx
+++ b/packages/web/src/common/components/Calendar/Calendar.tsx
@@ -24,25 +24,34 @@ interface CalendarProps extends CalendarSizeProps {
   eventPeriods?: EventPeriod[];
   selectedDates: Date[];
   onDateClick?: (date: Date) => void;
-  width?: number;
+  width?: string;
+  height?: string;
   title?: string;
+  small?: boolean;
 }
 
 const CalendarWrapper = styled.div<{
   width?: CalendarProps["width"];
+  height?: CalendarProps["height"];
 }>`
-  width: ${({ width }) => (width ? `${width}px` : "100%")};
+  display: flex;
+  flex-direction: column;
+  width: ${({ width }) => width || "100%"};
+  height: ${({ height }) => height || "100%"};
 `;
 
 const CalendarContentWrapper = styled.div<{
   title?: CalendarProps["title"];
+  small?: CalendarProps["small"];
 }>`
   display: flex;
-  padding: 30px;
+  height: ${({ small }) => (small ? "calc(100% - 28px)" : "calc(100% - 40px)")};
+  height: ${({ title }) => title === "" && "100%"};
+  padding: ${({ small }) => (small ? "20px 18px" : "30px")};
   flex-direction: column;
   align-items: flex-end;
-  gap: 30px;
-  align-self: stretch;
+  gap: 12px;
+  flex-shrink: 0;
   border-radius: ${({ title }) => (title !== "" ? "0px 0px 4px 4px" : "4px")};
   ${({ title, theme }) =>
     title === ""
@@ -52,31 +61,38 @@ const CalendarContentWrapper = styled.div<{
   border-bottom: 2px solid ${theme.colors.GRAY[100]};`};
 `;
 
-const WeekWrapper = styled.div`
+const WeekWrapper = styled.div<{
+  small?: CalendarProps["small"];
+}>`
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: auto;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: flex-start;
   align-self: stretch;
   flex: 1 0 0;
+  height: 100%;
 `;
 
-const TitleWrapper = styled.div`
+const TitleWrapper = styled.div<{
+  small?: CalendarProps["small"];
+}>`
+  display: flex;
+  height: ${({ small }) => (small ? "28px" : "40px")};
+  border-radius: 4px 4px 0px 0px;
+  background: ${({ theme }) => theme.colors.GREEN[600]};
   display: flex;
-  height: 40px;
-  padding: 8px 20px;
+  padding: ${({ small }) => (small ? "8px 12px" : "10px 20px")};
   align-items: center;
   gap: 20px;
   align-self: stretch;
-  border-radius: 4px 4px 0px 0px;
-  background: ${({ theme }) => theme.colors.GREEN[600]};
 `;
 
 const Calendar: React.FC<CalendarProps> = ({
   title = "",
   width = undefined,
-  size = "md",
+  height = undefined,
+  small = false,
   existDates,
   eventPeriods = [],
   selectedDates,
@@ -123,7 +139,7 @@ const Calendar: React.FC<CalendarProps> = ({
       } else {
         eventPeriods.forEach(period => {
           if (
-            isSameDay(period.start, period.end) && // 2 eventPeriod 기간이 시작과 끝이 같을 때 처리 완료!
+            isSameDay(period.start, period.end) &&
             isSameDay(day, period.start)
           ) {
             type = "Selected";
@@ -145,21 +161,31 @@ const Calendar: React.FC<CalendarProps> = ({
     });
 
   return (
-    <CalendarWrapper width={width}>
+    <CalendarWrapper width={width} height={height}>
       {title !== "" && (
-        <TitleWrapper>
-          <Typography color="WHITE" fs={20} fw="BOLD" lh={20}>
-            {title}
-          </Typography>
+        <TitleWrapper small={small}>
+          {small ? (
+            <Typography color="WHITE" fs={16} fw="SEMIBOLD" lh={20}>
+              {title}
+            </Typography>
+          ) : (
+            <Typography color="WHITE" fs={18} fw="SEMIBOLD" lh={20}>
+              {title}
+            </Typography>
+          )}
         </TitleWrapper>
       )}
-      <CalendarContentWrapper title={title}>
-        <MonthNavigator currentDate={currentDate} onChange={setCurrentDate} />
-        <WeekWrapper>
+      <CalendarContentWrapper title={title} small={small}>
+        <MonthNavigator
+          currentDate={currentDate}
+          onChange={setCurrentDate}
+          small={small}
+        />
+        <WeekWrapper small={small}>
           {weeks.map((weekStart: Date) => (
             <CalendarWeek
               week={getWeekData(weekStart)}
-              size={size}
+              small={small}
               key={weekStart.toISOString()}
               onDateClick={handleDateClick}
             />
diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
index 9805714..b708a4e 100644
--- a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
@@ -14,7 +14,6 @@ export interface CalendarDateProps {
     | "End"
     | "Selected"
     | "Past/Future";
-  size?: "lg" | "md" | "sm";
   onDateClick?: (date: Date) => void;
 }
 
@@ -22,7 +21,14 @@ const getBackgroundColor = (
   theme: DefaultTheme,
   type?: CalendarDateProps["type"],
 ) => {
-  if (type === "Default" || type === "Saturday" || type === "Sunday")
+  if (
+    type === "Default" ||
+    type === "Saturday" ||
+    type === "Sunday" ||
+    type === "Start" ||
+    type === "End" ||
+    type === "Pass"
+  )
     return theme.colors.PRIMARY;
   if (type === "Past/Future") return theme.colors.GREEN[100];
   return theme.colors.WHITE;
@@ -33,15 +39,12 @@ const ExistWrapper = styled.div<{
   type?: CalendarDateProps["type"];
 }>`
   display: flex;
-  flex: 1 0 0;
-  flex-wrap: wrap;
   position: relative;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   align-items: center;
-  align-content: center;
   justify-content: center;
-  padding: 0px 2px;
-  gap: 10px;
+  flex-direction: column;
 
   ${({ exist, type, theme }) =>
     exist &&
@@ -49,8 +52,8 @@ const ExistWrapper = styled.div<{
       &::after {
         content: "";
         position: absolute;
-        right: 5px;
-        top: 2px;
+        right: -4px;
+        top: -1px;
         width: 4px;
         height: 4px;
         background-color: ${getBackgroundColor(theme, type)};
@@ -62,105 +65,63 @@ const ExistWrapper = styled.div<{
 
 const DateContainer = styled.div<CalendarDateProps>`
   display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 4px;
-  font-size: 20px;
+  align-items: center;
+  align-content: center;
+  align-self: stretch;
+  font-size: 16px;
   text-align: center;
-  font-weight: ${({ theme }) => theme.fonts.WEIGHT.BOLD};
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   line-height: 20px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
-
-  ${({ size }) => {
-    switch (size) {
-      case "sm":
-        return css`
-          width: 32px;
-          height: 32px;
-        `;
-      case "md":
-        return css`
-          width: 40px;
-          height: 40px;
-        `;
-      case "lg":
-      default:
-        return css`
-          width: 48px;
-          height: 48px;
-        `;
-    }
-  }}
-  background-color: ${({ type, theme }) => {
-    if (
-      type === "Past/Future" ||
-      type === "Default" ||
-      type === "Saturday" ||
-      type === "Sunday"
-    )
-      return "transparent";
-    if (type === "Pass") return theme.colors.GREEN[300];
-    return theme.colors.PRIMARY;
-  }};
+  gap: 10px;
+  flex: 1 0 0;
+  flex-wrap: wrap;
   color: ${({ type, theme }) => {
     if (type === "Default") return theme.colors.GRAY[900];
     if (type === "Saturday") return theme.colors.GREEN[700];
     if (type === "Sunday") return theme.colors.RED[700];
     if (type === "Past/Future") return theme.colors.GRAY[100];
-    return theme.colors.WHITE;
+    return theme.colors.BLACK;
   }};
 `;
 
 const DateWrapper = styled.div<{
   type?: CalendarDateProps["type"];
-  size?: CalendarDateProps["size"];
 }>`
   display: flex;
-  align-items: center;
   justify-content: center;
-  flex: 1;
+  align-items: center;
+  align-content: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  flex-wrap: wrap;
+  padding: 2px 0px;
+  height: fit-content;
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
-  width: 100%;
-  ${({ size }) => {
-    switch (size) {
-      case "sm":
-        return css`
-          height: 32px;
-        `;
-      case "md":
-        return css`
-          height: 40px;
-        `;
-      case "lg":
-      default:
-        return css`
-          height: 48px;
-        `;
-    }
-  }}
-  background: ${({ type, theme }) => {
-    switch (type) {
-      case "End":
-        return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
-      case "Start":
-        return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
-      case "Pass":
-        return `${theme.colors.GREEN[300]}`;
-      default:
-        return "transparent";
-    }
+  background-color: ${({ type, theme }) => {
+    if (
+      type === "Past/Future" ||
+      type === "Default" ||
+      type === "Saturday" ||
+      type === "Sunday"
+    )
+      return "transparent";
+    if (type === "Pass") return theme.colors.GREEN[100];
+    return theme.colors.GREEN[300];
+  }};
+  border-radius: ${({ type }) => {
+    if (type === "Start") return "2px 0px 0px 2px";
+    if (type === "End") return "0px 2px 2px 0px";
+    if (type === "Pass") return "0px";
+    return "2px";
   }};
-  width: 28px;
-  /* height: 24px; */ // CHACHA: 이것 때문에 기간 선택할 때 날짜 하이라이트랑 기간 표시 연두색의 높이차가 생깁니다. 아직 이것에 대한 디자인이 없어서 css 수정을 안 했어요..!
-  padding: 0px 2px;
-  gap: 10px;
 `;
 
 const CalendarDate: React.FC<CalendarDateProps> = ({
   date,
   exist,
   type = "Default",
-  size = "lg",
   onDateClick = () => {},
 }) => {
   const handleClick = () => {
@@ -169,8 +130,8 @@ const CalendarDate: React.FC<CalendarDateProps> = ({
     }
   };
   return (
-    <DateWrapper type={type} onClick={handleClick} size={size}>
-      <DateContainer date={date} exist={exist} type={type} size={size}>
+    <DateWrapper type={type} onClick={handleClick}>
+      <DateContainer date={date} exist={exist} type={type}>
         <ExistWrapper exist={exist} type={type}>
           {date.getDate()}
         </ExistWrapper>
diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarWeek.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarWeek.tsx
index 8b9c94f..42e8d1d 100644
--- a/packages/web/src/common/components/Calendar/_atomic/CalendarWeek.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/CalendarWeek.tsx
@@ -8,39 +8,57 @@ interface CalendarWeekProps {
     exist: boolean;
     type?: CalendarDateProps["type"];
   }[];
-  size?: CalendarDateProps["size"];
+  small?: boolean;
   onDateClick: (date: Date) => void;
 }
 
-export interface CalendarSizeProps {
-  size: CalendarDateProps["size"];
-}
+export interface CalendarSizeProps {}
 
 const WeekWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
-  height: 24px;
+  height: fit-content;
+`;
+
+const SmallWeekWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  justify-content: space-between;
+  height: fit-content;
 `;
 
 const CalendarWeek: React.FC<CalendarWeekProps> = ({
   week,
-  size = "lg",
+  small = false,
   onDateClick,
-}) => (
-  <WeekWrapper>
-    {week.map(day => (
-      <CalendarDate
-        key={day.date.toISOString()}
-        date={day.date}
-        exist={day.exist}
-        type={day.type}
-        size={size}
-        onDateClick={onDateClick}
-      />
-    ))}
-  </WeekWrapper>
-);
+}) =>
+  small ? (
+    <SmallWeekWrapper>
+      {week.map(day => (
+        <CalendarDate
+          key={day.date.toISOString()}
+          date={day.date}
+          exist={day.exist}
+          type={day.type}
+          onDateClick={onDateClick}
+        />
+      ))}
+    </SmallWeekWrapper>
+  ) : (
+    <WeekWrapper>
+      {week.map(day => (
+        <CalendarDate
+          key={day.date.toISOString()}
+          date={day.date}
+          exist={day.exist}
+          type={day.type}
+          onDateClick={onDateClick}
+        />
+      ))}
+    </WeekWrapper>
+  );
 
 export default CalendarWeek;
diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
index 39d248e..c9bba3d 100644
--- a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
@@ -1,14 +1,9 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { CalendarDateProps } from "./CalendarDate";
+import styled from "styled-components";
 
-export interface CalendarSizeProps {
-  size: CalendarDateProps["size"];
-}
+export interface CalendarSizeProps {}
 
-const DayWrapper = styled.div<{
-  size?: CalendarDateProps["size"];
-}>`
+const DayWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -19,41 +14,28 @@ const DayWrapper = styled.div<{
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   color: ${({ theme }) => theme.colors.GRAY[400]};
   width: 100%;
-  ${({ size }) => {
-    switch (size) {
-      case "sm":
-        return css`
-          height: 32px;
-        `;
-      case "md":
-        return css`
-          height: 40px;
-        `;
-      case "lg":
-      default:
-        return css`
-          height: 48px;
-        `;
-    }
-  }}
 `;
 
 const WeekWrapper = styled.div<CalendarSizeProps>`
   display: flex;
+  flex-direction: column;
   justify-content: space-evenly;
-  align-items: center;
+  align-items: flex-end;
+  align-self: stretch;
+  gap: 20px;
   width: 100%;
+  flex: 1 0 0;
 `;
 
-const CalendarWeekdays: React.FC<CalendarSizeProps> = ({ size }) => (
-  <WeekWrapper size={size}>
-    <DayWrapper size={size}>일</DayWrapper>
-    <DayWrapper size={size}>월</DayWrapper>
-    <DayWrapper size={size}>화</DayWrapper>
-    <DayWrapper size={size}>수</DayWrapper>
-    <DayWrapper size={size}>목</DayWrapper>
-    <DayWrapper size={size}>금</DayWrapper>
-    <DayWrapper size={size}>토</DayWrapper>
+const CalendarWeekdays = (
+  <WeekWrapper>
+    <DayWrapper>일</DayWrapper>
+    <DayWrapper>월</DayWrapper>
+    <DayWrapper>화</DayWrapper>
+    <DayWrapper>수</DayWrapper>
+    <DayWrapper>목</DayWrapper>
+    <DayWrapper>금</DayWrapper>
+    <DayWrapper>토</DayWrapper>
   </WeekWrapper>
 );
 
diff --git a/packages/web/src/common/components/Calendar/_atomic/MonthNavigator.tsx b/packages/web/src/common/components/Calendar/_atomic/MonthNavigator.tsx
index d102cc7..8b9a5ac 100644
--- a/packages/web/src/common/components/Calendar/_atomic/MonthNavigator.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/MonthNavigator.tsx
@@ -7,6 +7,7 @@ import Icon from "@sparcs-students/web/common/components/Icon";
 interface MonthNavigatorProps {
   currentDate: Date;
   onChange: (date: Date) => void;
+  small?: boolean;
 }
 
 const NavigatorWrapper = styled.div`
@@ -14,19 +15,24 @@ const NavigatorWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  font-size: 30px;
-  line-height: 30px;
-  text-align: center;
-  font-weight: ${({ theme }) => theme.fonts.WEIGHT.BOLD};
-  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
-  color: ${({ theme }) => theme.colors.GRAY[900]};
   user-select: none;
+  flex-shrink: 0;
+  align-self: stretch;
 `;
 
-const MonthDisplay = styled.div`
+const MonthDisplay = styled.div<{
+  small?: MonthNavigatorProps["small"];
+}>`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: ${({ small }) => (small ? "24px" : "28px")};
+  line-height: ${({ small }) => (small ? "24px" : "30px")};
+  text-align: center;
+  font-weight: ${({ small, theme }) =>
+    small ? theme.fonts.WEIGHT.MEDIUM : theme.fonts.WEIGHT.SEMIBOLD};
+  font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
+  color: ${({ theme }) => theme.colors.GRAY[900]};
 `;
 
 const ChevronBlockWrapper = styled.div`
@@ -37,13 +43,12 @@ const ChevronBlockWrapper = styled.div`
   justify-content: center;
   align-items: center;
   gap: 10px;
-  border-radius: 4px;
-  background: rgba(94, 94, 94, 0.5);
 `;
 
 const MonthNavigator: React.FC<MonthNavigatorProps> = ({
   currentDate,
   onChange = () => {},
+  small = false,
 }) => {
   const today = new Date();
 
@@ -64,23 +69,21 @@ const MonthNavigator: React.FC<MonthNavigatorProps> = ({
   return (
     <NavigatorWrapper>
       <ChevronBlockWrapper>
-        <Icon
-          type="chevron_left"
-          size={48}
-          onClick={handlePrevious}
-          color="WHITE"
-        />
+        {small ? (
+          <Icon type="arrow_back_ios_new" size={18} onClick={handlePrevious} />
+        ) : (
+          <Icon type="arrow_back_ios_new" size={24} onClick={handlePrevious} />
+        )}
       </ChevronBlockWrapper>
-      <MonthDisplay onClick={handleTodayClick}>
+      <MonthDisplay onClick={handleTodayClick} small={small}>
         {format(currentDate, "yyyy. MM.", { locale: ko })}
       </MonthDisplay>
       <ChevronBlockWrapper>
-        <Icon
-          type="chevron_right"
-          size={48}
-          onClick={handleNext}
-          color="WHITE"
-        />
+        {small ? (
+          <Icon type="arrow_forward_ios" size={18} onClick={handleNext} />
+        ) : (
+          <Icon type="arrow_forward_ios" size={24} onClick={handleNext} />
+        )}
       </ChevronBlockWrapper>
     </NavigatorWrapper>
   );