diff --git a/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx b/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx
index f5c133b..92e4e51 100644
--- a/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx
+++ b/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx
@@ -10,7 +10,7 @@ interface BreadCrumbItemProps {
 
 const BreadCrumbInner = styled.div<{ disabled: boolean }>`
   color: ${({ theme, disabled }) =>
-    disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY};
+    disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY};
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 `;
 
diff --git a/packages/web/src/common/components/Buttons/Button.tsx b/packages/web/src/common/components/Buttons/Button.tsx
index 7a59fb1..a2919f8 100644
--- a/packages/web/src/common/components/Buttons/Button.tsx
+++ b/packages/web/src/common/components/Buttons/Button.tsx
@@ -38,7 +38,7 @@ const ButtonDefaultInner = styled(ButtonInner)`
   background: ${({ theme }) => theme.colors.PRIMARY};
   cursor: pointer;
   &:hover {
-    background: ${({ theme }) => theme.colors.MINT[800]};
+    background: ${({ theme }) => theme.colors.GREEN[800]};
   }
 `;
 
@@ -47,13 +47,13 @@ const ButtonOutlinedInner = styled(ButtonInner)`
   background: ${({ theme }) => theme.colors.WHITE};
   cursor: pointer;
   &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+    border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   }
 `;
 
 const ButtonDisabledInner = styled(ButtonInner)`
-  color: ${({ theme }) => theme.colors.GRAY[300]};
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   background: ${({ theme }) => theme.colors.GRAY[100]};
   cursor: not-allowed;
 `;
diff --git a/packages/web/src/common/components/Buttons/TextButton.tsx b/packages/web/src/common/components/Buttons/TextButton.tsx
index 9d84fb4..2bac887 100644
--- a/packages/web/src/common/components/Buttons/TextButton.tsx
+++ b/packages/web/src/common/components/Buttons/TextButton.tsx
@@ -9,7 +9,7 @@ const StyledTextButton = styled.button<ButtonProps>`
   background: none;
   border: none;
   color: ${({ theme, disabled }) =>
-    disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY};
+    disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   line-height: 20px;
diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
index 85b8bee..50f6915 100644
--- a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
@@ -15,7 +15,7 @@ const getBackgroundColor = (
   type?: CalendarDateProps["type"],
 ) => {
   if (type === "Default") return theme.colors.PRIMARY;
-  if (type === "Past/Future") return theme.colors.GRAY[300];
+  if (type === "Past/Future") return theme.colors.GRAY[100];
   return theme.colors.WHITE;
 };
 
@@ -78,12 +78,12 @@ const DateContainer = styled.div<CalendarDateProps>`
   }}
   background-color: ${({ type, theme }) => {
     if (type === "Past/Future" || type === "Default") return "transparent";
-    if (type === "Pass") return theme.colors.MINT[300];
+    if (type === "Pass") return theme.colors.GREEN[300];
     return theme.colors.PRIMARY;
   }};
   color: ${({ type, theme }) => {
     if (type === "Default") return theme.colors.BLACK;
-    if (type === "Past/Future") return theme.colors.GRAY[300];
+    if (type === "Past/Future") return theme.colors.GRAY[100];
     return theme.colors.WHITE;
   }};
 `;
@@ -118,11 +118,11 @@ const DateWrapper = styled.div<{
   background: ${({ type, theme }) => {
     switch (type) {
       case "End":
-        return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.MINT[300]} 50%)`;
+        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.MINT[300]} 50%)`;
+        return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
       case "Pass":
-        return `${theme.colors.MINT[300]}`;
+        return `${theme.colors.GREEN[300]}`;
       default:
         return "transparent";
     }
diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
index a50666b..39d248e 100644
--- a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
+++ b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
@@ -17,7 +17,7 @@ const DayWrapper = styled.div<{
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   line-height: 20px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
-  color: ${({ theme }) => theme.colors.GRAY[600]};
+  color: ${({ theme }) => theme.colors.GRAY[400]};
   width: 100%;
   ${({ size }) => {
     switch (size) {
diff --git a/packages/web/src/common/components/Checkbox.tsx b/packages/web/src/common/components/Checkbox.tsx
index 30b64bd..d3bdc69 100644
--- a/packages/web/src/common/components/Checkbox.tsx
+++ b/packages/web/src/common/components/Checkbox.tsx
@@ -18,10 +18,10 @@ const CheckboxInner = styled.div<{ disabled: boolean }>`
   border-radius: 4px;
   border: 1px solid
     ${({ disabled, theme }) =>
-      disabled ? theme.colors.GRAY[300] : theme.colors.BLACK};
+      disabled ? theme.colors.GRAY[100] : theme.colors.BLACK};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   background-color: ${({ disabled, theme }) =>
-    disabled ? theme.colors.GRAY[100] : "transparent"};
+    disabled ? theme.colors.GRAY[50] : "transparent"};
 `;
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -34,7 +34,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
       <Icon
         type="check"
         size={16}
-        color={disabled ? colors.GRAY[300] : colors.BLACK}
+        color={disabled ? colors.GRAY[100] : colors.BLACK}
       />
     )}
   </CheckboxInner>
diff --git a/packages/web/src/common/components/CheckboxOption.tsx b/packages/web/src/common/components/CheckboxOption.tsx
new file mode 100644
index 0000000..ce53e98
--- /dev/null
+++ b/packages/web/src/common/components/CheckboxOption.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Checkbox from "./Checkbox";
+import Typography from "./Typography";
+
+interface CheckboxOptionProps {
+  optionText: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const CheckboxOptionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  padding-left: 2px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    gap: 8px;
+  }
+`;
+
+const ResponsiveTypography = styled(Typography)`
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    font-size: 14px;
+  }
+`;
+
+const CheckboxOption: React.FC<CheckboxOptionProps> = ({
+  optionText,
+  checked,
+  onClick,
+}) => (
+  <CheckboxOptionWrapper onClick={onClick}>
+    <Checkbox checked={checked} />
+    <ResponsiveTypography
+      ff="PRETENDARD"
+      color="BLACK"
+      onClick={e => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {optionText}
+    </ResponsiveTypography>
+  </CheckboxOptionWrapper>
+);
+
+export default CheckboxOption;
diff --git a/packages/web/src/common/components/Forms/ItemNumberInput.tsx b/packages/web/src/common/components/Forms/ItemNumberInput.tsx
index c3081dd..64eb11a 100644
--- a/packages/web/src/common/components/Forms/ItemNumberInput.tsx
+++ b/packages/web/src/common/components/Forms/ItemNumberInput.tsx
@@ -30,13 +30,13 @@ const LabelWithIcon = styled.div`
 `;
 
 const StyledInfoIcon = styled(InfoOutlinedIcon)`
-  color: ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
   cursor: pointer;
   font-size: 16px;
 `;
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -62,7 +62,7 @@ const RightContentWrapper = styled.div<{ hasError: boolean }>`
   line-height: 20px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ theme, hasError }) =>
-    hasError ? theme.colors.RED[600] : theme.colors.GRAY[300]};
+    hasError ? theme.colors.RED[700] : theme.colors.GRAY[100]};
 `;
 
 const Input = styled.input<ItemNumberInputProps & { hasError: boolean }>`
@@ -88,7 +88,7 @@ const Input = styled.input<ItemNumberInputProps & { hasError: boolean }>`
 
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled ? theme.colors.GRAY[300] : undefined};
+      !hasError && !disabled ? theme.colors.GRAY[100] : undefined};
   }
 
   &::placeholder {
diff --git a/packages/web/src/common/components/Forms/PhoneInput.tsx b/packages/web/src/common/components/Forms/PhoneInput.tsx
index c4c1e25..11b047c 100644
--- a/packages/web/src/common/components/Forms/PhoneInput.tsx
+++ b/packages/web/src/common/components/Forms/PhoneInput.tsx
@@ -37,7 +37,7 @@ export interface PhoneInputProps
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -67,7 +67,7 @@ const Input = styled.input.withConfig({
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};
diff --git a/packages/web/src/common/components/Forms/SearchSelect/index.tsx b/packages/web/src/common/components/Forms/SearchSelect/index.tsx
index 307a862..50549fe 100644
--- a/packages/web/src/common/components/Forms/SearchSelect/index.tsx
+++ b/packages/web/src/common/components/Forms/SearchSelect/index.tsx
@@ -43,7 +43,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -71,7 +71,7 @@ const Input = styled.input<InputProps>`
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};
@@ -99,7 +99,7 @@ const SearchList = styled.div`
   opacity: 1;
   background-color: ${({ theme }) => theme.colors.WHITE};
   border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   padding: 8px;
   max-height: 280px;
   overflow-y: auto;
diff --git a/packages/web/src/common/components/Forms/Select.tsx b/packages/web/src/common/components/Forms/Select.tsx
index b3f407a..0f8e0e7 100644
--- a/packages/web/src/common/components/Forms/Select.tsx
+++ b/packages/web/src/common/components/Forms/Select.tsx
@@ -44,7 +44,7 @@ const StyledSelect = styled.div<{
   border: 1px solid
     ${({ theme, hasError, isOpen }) => {
       if (isOpen) return theme.colors.PRIMARY;
-      return hasError ? theme.colors.RED[600] : theme.colors.GRAY[200];
+      return hasError ? theme.colors.RED[700] : theme.colors.GRAY[200];
     }};
   border-radius: 4px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
@@ -55,7 +55,7 @@ const StyledSelect = styled.div<{
   &:focus,
   &:hover:not(:focus) {
     border-color: ${({ theme, isOpen }) =>
-      isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[300]};
+      isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[100]};
   }
 
   ${({ disabled }) => disabled && disabledStyle}
@@ -68,7 +68,7 @@ const Dropdown = styled.div`
   width: 100%;
   margin-top: 4px;
   padding: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.colors.WHITE};
   gap: 4px;
@@ -84,7 +84,7 @@ const Option = styled.div<{ selectable?: boolean }>`
   line-height: 20px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ theme, selectable }) =>
-    selectable ? theme.colors.BLACK : theme.colors.GRAY[300]};
+    selectable ? theme.colors.BLACK : theme.colors.GRAY[100]};
   ${({ selectable }) =>
     selectable &&
     css`
@@ -103,7 +103,7 @@ const NoOption = styled.div`
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   text-align: center;
   pointer-events: none;
-  color: ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
 `;
 
 const IconWrapper = styled.div`
diff --git a/packages/web/src/common/components/Forms/TextInput.tsx b/packages/web/src/common/components/Forms/TextInput.tsx
index 4661d68..f56cf7b 100644
--- a/packages/web/src/common/components/Forms/TextInput.tsx
+++ b/packages/web/src/common/components/Forms/TextInput.tsx
@@ -17,7 +17,7 @@ export interface TextInputProps
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -53,7 +53,7 @@ const Input = styled.input.attrs<TextInputProps>(({ area }) => ({
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};
diff --git a/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx b/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx
index 8faf433..b3cbc65 100644
--- a/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx
+++ b/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components";
 const StyledErrorMessage = styled.span`
   display: block;
   padding: 0px 0px 0px 2px;
-  color: ${({ theme }) => theme.colors.RED[600]};
+  color: ${({ theme }) => theme.colors.RED[700]};
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   font-size: 12px;
diff --git a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
index fb69282..4e6da42 100644
--- a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
+++ b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
@@ -32,7 +32,7 @@ const MobileNavMenuInner = styled.div`
   justify-content: flex-start;
   gap: 8px;
 
-  background: ${({ theme }) => theme.colors.BACKGROUND};
+  background: ${({ theme }) => theme.colors.WHITE};
 
   @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.xs}) {
     display: none;
diff --git a/packages/web/src/common/components/Radio/RadioOption.tsx b/packages/web/src/common/components/Radio/RadioOption.tsx
index 17fdbde..a66e9c0 100644
--- a/packages/web/src/common/components/Radio/RadioOption.tsx
+++ b/packages/web/src/common/components/Radio/RadioOption.tsx
@@ -22,6 +22,11 @@ const RadioOptionInner = styled.div`
   line-height: 20px;
   font-style: normal;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  cursor: pointer;
+
+  & > * {
+    pointer-events: none;
+  }
 `;
 
 const RadioOption = <T extends string>({
diff --git a/packages/web/src/common/components/SearchInput.tsx b/packages/web/src/common/components/SearchInput.tsx
index 63531fc..7aa7704 100644
--- a/packages/web/src/common/components/SearchInput.tsx
+++ b/packages/web/src/common/components/SearchInput.tsx
@@ -18,7 +18,7 @@ const SearchInputWrapper = styled.div`
   align-items: center;
   flex: 1;
   &:hover {
-    border-color: ${({ theme }) => theme.colors.GRAY[300]};
+    border-color: ${({ theme }) => theme.colors.GRAY[100]};
   }
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.PRIMARY};
diff --git a/packages/web/src/common/components/SelectedItem.tsx b/packages/web/src/common/components/SelectedItem.tsx
index 933073b..3c50b79 100644
--- a/packages/web/src/common/components/SelectedItem.tsx
+++ b/packages/web/src/common/components/SelectedItem.tsx
@@ -38,7 +38,7 @@ const SelectedItem: React.FC<SelectedItemProps> = ({
     <Typography
       fs={16}
       lh={20}
-      color={isDisabled ? "GRAY.300" : "BLACK"}
+      color={isDisabled ? "GRAY.100" : "BLACK"}
       style={{ flex: 1 }}
     >
       {text}
diff --git a/packages/web/src/common/components/StepProcess/StepProcess.tsx b/packages/web/src/common/components/StepProcess/StepProcess.tsx
index fae7f5f..64917cc 100644
--- a/packages/web/src/common/components/StepProcess/StepProcess.tsx
+++ b/packages/web/src/common/components/StepProcess/StepProcess.tsx
@@ -30,7 +30,7 @@ const StepContainer = styled.div<{ width: string }>`
   &::before {
     content: "";
     position: absolute;
-    background: ${props => props.theme.colors.GRAY[300]};
+    background: ${props => props.theme.colors.GRAY[100]};
     height: 4px;
     border-radius: 2px;
     width: 100%;
@@ -44,8 +44,8 @@ const StepContainer = styled.div<{ width: string }>`
     position: absolute;
     background: linear-gradient(
       to right,
-      ${props => props.theme.colors.MINT[300]} 100%,
-      ${props => props.theme.colors.GRAY[300]} 100%
+      ${props => props.theme.colors.GREEN[300]} 100%,
+      ${props => props.theme.colors.GRAY[100]} 100%
     );
     height: 4px;
     border-radius: 2px;
diff --git a/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx b/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx
index 055fae8..cd8da58 100644
--- a/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx
+++ b/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx
@@ -23,9 +23,9 @@ const StepDot = styled.div<{ step: Step }>`
     ${props => {
       switch (props.step) {
         case Step.After:
-          return props.theme.colors.MINT[300];
+          return props.theme.colors.GREEN[300];
         case Step.Before:
-          return props.theme.colors.GRAY[300];
+          return props.theme.colors.GRAY[100];
         case Step.Current:
         default:
           return props.theme.colors.PRIMARY;
@@ -34,7 +34,7 @@ const StepDot = styled.div<{ step: Step }>`
   background-color: ${props => {
     switch (props.step) {
       case Step.After:
-        return props.theme.colors.MINT[300];
+        return props.theme.colors.GREEN[300];
       case Step.Before:
         return props.theme.colors.GRAY[200];
       case Step.Current:
diff --git a/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx b/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx
index 956178a..da65bf1 100644
--- a/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx
+++ b/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx
@@ -5,9 +5,9 @@ const StepLabel = styled.div<{ step: Step }>`
   color: ${props => {
     switch (props.step) {
       case Step.After:
-        return props.theme.colors.GRAY[600];
+        return props.theme.colors.GRAY[700];
       case Step.Before:
-        return props.theme.colors.GRAY[300];
+        return props.theme.colors.GRAY[100];
       case Step.Current:
       default:
         return props.theme.colors.BLACK;
diff --git a/packages/web/src/common/components/Table/TableButtonCell.tsx b/packages/web/src/common/components/Table/TableButtonCell.tsx
index b334d1c..b17a879 100644
--- a/packages/web/src/common/components/Table/TableButtonCell.tsx
+++ b/packages/web/src/common/components/Table/TableButtonCell.tsx
@@ -33,7 +33,7 @@ const CellText = styled.div<{ isGray: boolean }>`
   line-height: 24px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ isGray, theme }) =>
-    isGray ? theme.colors.GRAY[300] : theme.colors.BLACK};
+    isGray ? theme.colors.GRAY[100] : theme.colors.BLACK};
 `;
 
 const TableButtonCell: React.FC<TableButtonCellProps> = ({
diff --git a/packages/web/src/common/components/Table/TableCell.tsx b/packages/web/src/common/components/Table/TableCell.tsx
index ac95c2e..9d03900 100644
--- a/packages/web/src/common/components/Table/TableCell.tsx
+++ b/packages/web/src/common/components/Table/TableCell.tsx
@@ -32,7 +32,7 @@ const CellText = styled.div<{ isGray: boolean }>`
   line-height: 24px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ isGray, theme }) =>
-    isGray ? theme.colors.GRAY[300] : theme.colors.BLACK};
+    isGray ? theme.colors.GRAY[100] : theme.colors.BLACK};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/packages/web/src/common/components/Tag.tsx b/packages/web/src/common/components/Tag.tsx
index df20845..7958149 100644
--- a/packages/web/src/common/components/Tag.tsx
+++ b/packages/web/src/common/components/Tag.tsx
@@ -22,9 +22,9 @@ const TagInner = styled.div<{ color: TagColor }>`
   line-height: 16px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   color: ${({ theme, color }) =>
-    color === "RED" ? theme.colors.WHITE : theme.colors[color][600]};
+    color === "RED" ? theme.colors.WHITE : theme.colors.GREEN[600]};
   background-color: ${({ theme, color }) =>
-    color === "RED" ? theme.colors.RED[600] : theme.colors[color][200]};
+    color === "RED" ? theme.colors.RED[700] : theme.colors.GREEN[300]};
   border-radius: ${({ theme }) => theme.round.sm};
 `;
 
@@ -32,7 +32,7 @@ interface TagProps extends React.PropsWithChildren {
   color?: TagColor;
 }
 
-const Tag: React.FC<TagProps> = ({ children = <div />, color = "BLUE" }) => (
+const Tag: React.FC<TagProps> = ({ children = <div />, color = "GREEN" }) => (
   <TagInner color={color}>{children}</TagInner>
 );
 
diff --git a/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx b/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx
index 04a3b72..ec6628e 100644
--- a/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx
+++ b/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx
@@ -17,12 +17,12 @@ const styleSwitch = (theme: DefaultTheme, type: TimetableCellType) => {
     case "hover":
       return {
         background: theme.colors.WHITE,
-        border: `1px solid ${theme.colors.GRAY[300]}`,
+        border: `1px solid ${theme.colors.GRAY[100]}`,
       };
     case "selected":
       return {
         background: theme.colors.PRIMARY,
-        border: `1px solid ${theme.colors.MINT[800]}`,
+        border: `1px solid ${theme.colors.GREEN[800]}`,
       };
     case "disabled":
       return {
@@ -31,7 +31,7 @@ const styleSwitch = (theme: DefaultTheme, type: TimetableCellType) => {
       };
     case "past":
       return {
-        background: theme.colors.MINT[300],
+        background: theme.colors.GREEN[300],
         border: `1px solid ${theme.colors.GRAY[200]}`,
       };
     default:
diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts
index 6bbf810..be6d447 100644
--- a/packages/web/src/styles/themes/colors.ts
+++ b/packages/web/src/styles/themes/colors.ts
@@ -7,46 +7,25 @@
 const colors = {
   WHITE: "#FFFFFF",
   BLACK: "#333333",
-  PRIMARY: "#0099AD",
-  BACKGROUND:
-    "linear-gradient(180deg, #EAFAFC 0%, #FFFFFF 33.33%, #FFFFFF 66.67%, #FFFFFF 100%)",
-  GREEN: {
-    200: "#E9F9EF",
-    600: "#008B1C",
-  },
-  ORANGE: {
-    200: "#FDF7E6",
-    600: "#FF9211",
-  },
-  BLUE: {
-    200: "#E7F0FF",
-    600: "#065DAC",
-  },
-  PURPLE: {
-    200: "#F6EEFE",
-    600: "#9836EF",
-  },
-  PINK: {
-    200: "#FFF1F9",
-    600: "#DB2777",
-  },
-  YELLOW: {
-    200: "#FFFDE9",
-    600: "#E9A311",
-  },
-
-  MINT: {
-    300: "#92CCD4",
-    800: "#0C7F8E",
-  },
+  PRIMARY: "#00674B",
   GRAY: {
-    100: "#FAFAFA",
-    200: "#EEEEEE",
-    300: "#DDDDDD",
-    600: "#555555",
+    50: "#F3F3F3",
+    100: "#DDDDDD",
+    200: "#C6C6C6",
+    400: "#9B9B9B",
+    700: "#5E5E5E",
+    900: "#393939",
+  },
+  GREEN: {
+    100: "#C3E3D6",
+    300: "#7FBDA4",
+    600: "#298062",
+    800: "#09563F",
   },
   RED: {
-    600: "#DC2626",
+    50: "#FFEEEB",
+    200: "#F5A3A8",
+    700: "#B7202A",
   },
 };