diff --git a/src/Components/Footer.styled.js b/src/Components/Footer.styled.js
index bd841a8..8354e10 100644
--- a/src/Components/Footer.styled.js
+++ b/src/Components/Footer.styled.js
@@ -4,7 +4,7 @@ import GlobalStyled from 'Styled/Global.styled';
 
 const Footer = styled.div`
   background: ${props =>
-    props.isProfile && GlobalStyled.theme.profilePageMyInfoBackgroundColor};
+    props.isProfile && GlobalStyled.theme.backgroundTheme3};
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ const Footer = styled.div`
   h6 {
     font-size: 0.6rem;
     font-weight: 700;
-    color: ${GlobalStyled.theme.textColorGray};
+    color: ${GlobalStyled.theme.textGray3};
   }
 `;
 
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 408fd13..3e67cb9 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -101,13 +101,13 @@ const Header = () => {
         <div>
           {!isArticle && (
             <MenuIcon
-              sx={{ color: GlobalStyled.theme.headerIconColor }}
+              sx={{ color: GlobalStyled.theme.white }}
               onClick={handleOpenMenu}
             />
           )}
           {isArticle && (
             <ArrowBackIosRoundedIcon
-              sx={{ color: GlobalStyled.theme.headerIconColor }}
+              sx={{ color: GlobalStyled.theme.white }}
               onClick={handleBackButton}
             />
           )}
@@ -122,15 +122,15 @@ const Header = () => {
         </div>
         <div>
           {/*<SearchIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={handleToggleSearch}
           />*/}
           <AccountCircleIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={() => navi('/profile')}
           />
           <NotificationsIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={() => navi('/alarm')}
           />
         </div>
@@ -142,7 +142,7 @@ const Header = () => {
           height: GlobalStyled.theme.headerHeight,
         }}
       ></div>
-      {/* <SearchIcon sx={{ color: GlobalStyled.theme.headerIconColor }} onClick={() => navi('/search')} /> */}
+      {/* <SearchIcon sx={{ color: GlobalStyled.theme.white }} onClick={() => navi('/search')} /> */}
       <SwipeableDrawer
         anchor="left"
         open={isMenuModal}
diff --git a/src/Components/PreviewArticle.styled.js b/src/Components/PreviewArticle.styled.js
index fe88cdb..32809ad 100644
--- a/src/Components/PreviewArticle.styled.js
+++ b/src/Components/PreviewArticle.styled.js
@@ -12,7 +12,7 @@ const PreviewArticleDiv = styled.div`
   align-items: center;
   padding: 0.5rem 0.9rem 0.3rem 0.9rem;
   border-bottom: 1px solid #e6e6e6;
-  background-color: ${GlobalStyled.theme.previewArticleBackgroundColor};
+  background-color: ${GlobalStyled.theme.white};
 
   .top {
     display: flex;
@@ -26,7 +26,7 @@ const PreviewArticleDiv = styled.div`
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .top>* {
+  .top > * {
     padding-right: 0.3rem;
   }
   .middle {
@@ -74,7 +74,7 @@ const PreviewArticleDiv = styled.div`
     .liked_icon {
       margin-left: auto;
       margin-bottom: 0.1rem;
-      color: ${GlobalStyled.theme.likedIconColor};
+      color: ${GlobalStyled.theme.buttonRed1};
       &::after {
         content: '${props => {
           if (props.article.likeCount > 0) return props.article.likeCount;
@@ -84,7 +84,7 @@ const PreviewArticleDiv = styled.div`
     }
 
     .comment_icon {
-      color: ${GlobalStyled.theme.commentIconColor};
+      color: ${GlobalStyled.theme.buttonBlue2};
       &::after {
         content: '${props => {
           if (props.article.commentCount > 0) return props.article.commentCount;
diff --git a/src/Components/ProfileHeader.styled.js b/src/Components/ProfileHeader.styled.js
index 51f9f4f..b16f2e3 100644
--- a/src/Components/ProfileHeader.styled.js
+++ b/src/Components/ProfileHeader.styled.js
@@ -13,7 +13,7 @@ const ProfileHeaderDiv = styled.div`
   box-sizing: border-box;
 
   svg {
-    color: ${GlobalStyled.theme.headerIconColor};
+    color: ${GlobalStyled.theme.white};
     cursor: pointer;
   }
   #unvisible {
diff --git a/src/Pages/AlarmPage/Components/AlarmArticle.styled.js b/src/Pages/AlarmPage/Components/AlarmArticle.styled.js
index 5e3741c..a5a90dd 100644
--- a/src/Pages/AlarmPage/Components/AlarmArticle.styled.js
+++ b/src/Pages/AlarmPage/Components/AlarmArticle.styled.js
@@ -17,9 +17,10 @@ const AlramArticleDiv = styled.div`
   background-color: #fff;
   ${props => (props.isNotice ? `cursor: default;` : `cursor: pointer;`)}
   ${props =>
-    props.isRead && `background-color: ${GlobalStyled.theme.textColorLight};`}
+    props.isRead && `background-color: ${GlobalStyled.theme.textGray1};`}
   ${props =>
-    props.isNotice && `background-color: ${GlobalStyled.theme.primary}99;`}
+    props.isNotice &&
+    `background-color: ${GlobalStyled.theme.backgroundBlue2}99;`}
 
   .left {
     word-break: keep-all;
diff --git a/src/Pages/ArticlePage/ArticlePage.styled.js b/src/Pages/ArticlePage/ArticlePage.styled.js
index 7f7549d..e98c652 100644
--- a/src/Pages/ArticlePage/ArticlePage.styled.js
+++ b/src/Pages/ArticlePage/ArticlePage.styled.js
@@ -190,11 +190,11 @@ const CommentContent = styled.div`
     ${props =>
       props.isMine
         ? css`
-            background: ${GlobalStyled.theme.textColorMint};
+            background: ${GlobalStyled.theme.backgroundBlue2};
             color: white;
           `
         : css`
-            background: ${GlobalStyled.theme.textColorLightGray};
+            background: ${GlobalStyled.theme.backgroundGray2};
           `}
     border-radius: 0.5rem;
     font-size: 0.75rem;
@@ -210,7 +210,7 @@ const CommentContent = styled.div`
     margin-bottom: 0.2rem;
     margin-left: 1rem;
     margin-right: 0.2rem;
-    color: ${GlobalStyled.theme.textColorSecondary};
+    color: ${GlobalStyled.theme.textGray4};
   }
 
   .liked_count {
@@ -221,7 +221,7 @@ const CommentContent = styled.div`
     margin-bottom: 0.2rem;
     margin-right: 1rem;
     font-size: 0.75rem;
-    color: ${GlobalStyled.theme.likedCountColor};
+    color: ${GlobalStyled.theme.buttonRed1};
 
     svg {
       width: 1rem;
@@ -258,7 +258,7 @@ const CreateCommentViewDiv = styled.div`
 
   form {
     width: 90%;
-    background-color: ${GlobalStyled.theme.textColorLight};
+    background-color: ${GlobalStyled.theme.textGray1};
     border-radius: 2rem;
     display: flex;
     flex-direction: row;
@@ -269,11 +269,11 @@ const CreateCommentViewDiv = styled.div`
 
     input {
       width: 90%;
-      color: ${GlobalStyled.theme.textColor};
+      color: ${GlobalStyled.theme.textBlack};
       background-color: rgba(0, 0, 0, 0);
       border: none;
       &::placeholder {
-        color: ${GlobalStyled.theme.textColorGray};
+        color: ${GlobalStyled.theme.textGray3};
       }
       &:focus {
         outline: none;
@@ -285,8 +285,8 @@ const CreateCommentViewDiv = styled.div`
       box-sizing: content-box;
       border: none;
       background: none;
-      background-color: ${GlobalStyled.theme.primary};
-      color: ${GlobalStyled.theme.textColorWhite};
+      background-color: ${GlobalStyled.theme.buttonBlue2};
+      color: ${GlobalStyled.theme.textWhite};
       width: 40px;
       height: 40px;
       margin-left: 0.5rem;
@@ -294,7 +294,7 @@ const CreateCommentViewDiv = styled.div`
       box-shadow: none;
 
       &:hover {
-        background-color: ${GlobalStyled.theme.primary};
+        background-color: ${GlobalStyled.theme.buttonBlue2};
       }
     }
   }
diff --git a/src/Pages/AuthPage/Components/Auth.styled.js b/src/Pages/AuthPage/Components/Auth.styled.js
index 097b629..f9b0830 100644
--- a/src/Pages/AuthPage/Components/Auth.styled.js
+++ b/src/Pages/AuthPage/Components/Auth.styled.js
@@ -36,7 +36,7 @@ const ErrorSpan = styled.span`
 const Input = styled(TextField)`
   && {
     * {
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
     }
     #filled-error-helper-text {
       padding: 10px 12px;
@@ -59,8 +59,8 @@ const AuthDiv = styled.div`
   height: 100%;
   gap: 10px;
 
-  color: ${GlobalStyled.theme.textColorWhite};
-  fill: ${GlobalStyled.theme.textColorWhite};
+  color: ${GlobalStyled.theme.textWhite};
+  fill: ${GlobalStyled.theme.textWhite};
 
   .input_div {
     display: flex;
@@ -74,7 +74,7 @@ const AuthDiv = styled.div`
       flex: 1 1 40%;
       top: 50%;
       /* transform: translateY(-50%); */
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
       font-weight: 600;
       content: '@student.42seoul.kr';
     }
@@ -83,23 +83,23 @@ const AuthDiv = styled.div`
   .send_button {
     width: 100%;
     margin-bottom: 1rem;
-    color: ${GlobalStyled.theme.textColorWhite};
+    color: ${GlobalStyled.theme.textWhite};
     background-color: ${GlobalStyled.theme.primary};
     &:hover {
-      /* color: ${GlobalStyled.theme.textColorWhite}; */
-      background-color: ${GlobalStyled.theme.disabled};
+      /* color: ${GlobalStyled.theme.textWhite}; */
+      background-color: ${GlobalStyled.theme.backgroundGray3};
       /* background-color: #0000001f; */
     }
     &:active {
-      /* color: ${GlobalStyled.theme.textColorWhite}; */
+      /* color: ${GlobalStyled.theme.textWhite}; */
       background-color: ${GlobalStyled.theme.primary};
     }
     &:focus {
-      color: ${GlobalStyled.theme.textColorWhite};
+      color: ${GlobalStyled.theme.textWhite};
       background-color: ${GlobalStyled.theme.primary};
     }
     &:disabled {
-      background-color: ${GlobalStyled.theme.disabled};
+      background-color: ${GlobalStyled.theme.backgroundGray3};
     }
   }
 
@@ -110,12 +110,12 @@ const AuthDiv = styled.div`
       margin-top: 2rem;
       h2 {
         font-size: 1.2rem;
-        color: ${GlobalStyled.theme.primary};
+        color: ${GlobalStyled.theme.textBlue};
         font-weight: 700;
       }
       h3 {
         font-size: 1rem;
-        color: ${GlobalStyled.theme.textColorLight};
+        color: ${GlobalStyled.theme.textGray1};
         font-weight: 400;
       }
     }
@@ -131,7 +131,7 @@ const AuthDiv = styled.div`
 
     h4 {
       font-size: 0.8rem;
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
       font-weight: 400;
       &:first-child {
         margin-bottom: 0.5rem;
@@ -141,7 +141,7 @@ const AuthDiv = styled.div`
     button {
       margin-top: 1rem;
       width: max-content;
-      color: ${GlobalStyled.theme.textColorWhite};
+      color: ${GlobalStyled.theme.textWhite};
       text-decoration: underline;
       border: none;
       background: none;
diff --git a/src/Pages/CategoryPage/CategoryPage.styled.js b/src/Pages/CategoryPage/CategoryPage.styled.js
index e215f02..1af3be4 100644
--- a/src/Pages/CategoryPage/CategoryPage.styled.js
+++ b/src/Pages/CategoryPage/CategoryPage.styled.js
@@ -48,14 +48,14 @@ const MainBody = styled.div`
     }
 
     select {
-      color: ${GlobalStyled.theme.categoryNameTextColor};
+      color: ${GlobalStyled.theme.textWhite};
       font-size: 1.1rem;
       font-weight: 700;
       padding-top: 0;
       padding-bottom: 0;
     }
     svg {
-      color: ${GlobalStyled.theme.categoryNameTextColor};
+      color: ${GlobalStyled.theme.textWhite};
     }
   }
 `;
diff --git a/src/Pages/CategoryPage/Components/Body.styled.js b/src/Pages/CategoryPage/Components/Body.styled.js
index 87d9a06..5715e83 100644
--- a/src/Pages/CategoryPage/Components/Body.styled.js
+++ b/src/Pages/CategoryPage/Components/Body.styled.js
@@ -34,7 +34,7 @@ const StyledList = styled(List)`
     right: 1.5rem;
     z-index: 100;
     background-color: ${GlobalStyled.theme.secondary};
-    color: ${GlobalStyled.theme.headerIconColor};
+    color: ${GlobalStyled.theme.buttonWhite};
     border-radius: 40%;
     cursor: 'pointer';
     @media (min-width: ${GlobalStyled.theme.mobileMinWidth}) {
diff --git a/src/Pages/CreateArticlePage/CreateArticlePage.styled.js b/src/Pages/CreateArticlePage/CreateArticlePage.styled.js
index 7c7e3f9..931bdd7 100644
--- a/src/Pages/CreateArticlePage/CreateArticlePage.styled.js
+++ b/src/Pages/CreateArticlePage/CreateArticlePage.styled.js
@@ -83,8 +83,7 @@ const CreateArticlePage = styled.div`
         display: flex;
         background-color: #fff;
         padding: 0.9rem 1rem;
-        border: 1px solid
-          ${GlobalStyled.theme.createArticlePageInputBorderColor};
+        border: 1px solid ${GlobalStyled.theme.lineBlue1};
         font-size: 1rem;
         &:focus {
           outline: none;
@@ -134,14 +133,14 @@ const CreateArticlePage = styled.div`
       }
 
       select {
-        color: ${GlobalStyled.theme.categoryNameTextColor};
+        color: ${GlobalStyled.theme.textWhite};
         font-size: 1.1rem;
         font-weight: 700;
         padding-top: 0;
         padding-bottom: 0;
       }
       svg {
-        color: ${GlobalStyled.theme.categoryNameTextColor};
+        color: ${GlobalStyled.theme.textWhite};
       }
     }
   }
diff --git a/src/Pages/MainPage/Components/Body.styled.js b/src/Pages/MainPage/Components/Body.styled.js
index 0fafd9f..d2afff1 100644
--- a/src/Pages/MainPage/Components/Body.styled.js
+++ b/src/Pages/MainPage/Components/Body.styled.js
@@ -8,7 +8,7 @@ const ListDivider = styled.div`
   box-sizing: border-box;
   padding: ${props => props.margin || '0'};
   background-color: ${props =>
-    props.backgroundColor || GlobalStyled.theme.borderColor};
+    props.backgroundColor || GlobalStyled.theme.lineGray2};
 `;
 
 const StyledList = styled(List)`
@@ -20,7 +20,7 @@ const StyledList = styled(List)`
     right: 1.5rem;
     z-index: 100;
     background-color: ${GlobalStyled.theme.secondary};
-    color: ${GlobalStyled.theme.headerIconColor};
+    color: ${GlobalStyled.theme.buttonWhite};
     border-radius: 40%;
     cursor: 'pointer';
     @media (min-width: ${GlobalStyled.theme.mobileMinWidth}) {
@@ -36,9 +36,9 @@ const BoardTitleDiv = styled.div`
   box-sizing: border-box;
   width: 100%;
   display: flex;
-  background-color: ${GlobalStyled.theme.background};
-  color: ${GlobalStyled.theme.text};
-  border-bottom: 1px solid ${GlobalStyled.theme.borderColor};
+  background-color: ${GlobalStyled.theme.backgroundGray1};
+  color: ${GlobalStyled.theme.textBlack};
+  border-bottom: 1px solid ${GlobalStyled.theme.lineGray2};
   // padding: 0.65rem 1.2rem;
   padding: 0.65rem 1rem;
   align-items: center;
@@ -66,7 +66,7 @@ const BoardTitleDiv = styled.div`
 const CheckInHeader = styled.div`
   display: flex;
   justify-content: space-between;
-  background-color: ${GlobalStyled.theme.mainPageCheckInInfoBackgroundColor};
+  background-color: ${GlobalStyled.theme.backgroundBlue1};
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 1.2rem;
@@ -81,7 +81,7 @@ const CheckInHeader = styled.div`
   }
   button {
     padding: 0.2rem 0.5rem;
-    background-color: ${GlobalStyled.theme.primary};
+    background-color: ${GlobalStyled.theme.buttonBlue2};
   }
 `;
 
@@ -89,7 +89,7 @@ const CheckInBody = styled.div`
   display: flex;
   justify-content: space-around;
   padding: 0.5rem 1.2rem 1.8rem;
-  background-color: ${GlobalStyled.theme.mainPageCheckInInfoBackgroundColor};
+  background-color: ${GlobalStyled.theme.backgroundBlue1};
 
   .circular_progress_bar_div {
     width: 7.3rem;
@@ -102,7 +102,7 @@ const CheckInBody = styled.div`
       font-size: 1.1rem;
       font-weight: 700;
       margin-bottom: 0.3rem;
-      color: ${GlobalStyled.theme.textColor};
+      color: ${GlobalStyled.theme.textBlack};
     }
 
     .circular_progress_bar {
@@ -120,29 +120,27 @@ const CheckInBody = styled.div`
 
   .gaepo {
     .CircularProgressbar-trail {
-      stroke: ${GlobalStyled.theme
-        .mainPageCheckInInfoProgressBarBackgroundColor}80;
+      stroke: ${GlobalStyled.theme.backgroundGray3}80;
     }
     .CircularProgressbar-path {
-      stroke: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorGaepo};
+      stroke: ${GlobalStyled.theme.primary};
     }
     .CircularProgressbar-text {
-      fill: ${GlobalStyled.theme.textColor};
-      //fill: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorGaepo};
+      fill: ${GlobalStyled.theme.textBlack};
+      //fill: ${GlobalStyled.theme.primary};
     }
   }
 
   .seocho {
     .CircularProgressbar-trail {
-      stroke: ${GlobalStyled.theme
-        .mainPageCheckInInfoProgressBarBackgroundColor}80;
+      stroke: ${GlobalStyled.theme.backgroundGray3}80;
     }
     .CircularProgressbar-path {
-      stroke: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorSeocho};
+      stroke: ${GlobalStyled.theme.primaryEcole};
     }
     .CircularProgressbar-text {
-      fill: ${GlobalStyled.theme.textColor};
-      //fill: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorSeocho};
+      fill: ${GlobalStyled.theme.textBlack};
+      //fill: ${GlobalStyled.theme.primaryEcole};
     }
   }
 `;
diff --git a/src/Pages/MyCommentPage/Components/MyComment.styled.js b/src/Pages/MyCommentPage/Components/MyComment.styled.js
index b492bbb..3fe7a54 100644
--- a/src/Pages/MyCommentPage/Components/MyComment.styled.js
+++ b/src/Pages/MyCommentPage/Components/MyComment.styled.js
@@ -21,7 +21,7 @@ const MyCommentDiv = styled.div`
   padding: 0.5rem 1rem;
 
   .top {
-    color: ${GlobalStyled.theme.textColorGray};
+    color: ${GlobalStyled.theme.textGray2};
     font-size: 0.6rem;
   }
   .middle {
@@ -37,7 +37,7 @@ const MyCommentDiv = styled.div`
     justify-content: space-between;
     align-items: center;
     font-size: 0.75rem;
-    color: ${GlobalStyled.theme.textColorGray};
+    color: ${GlobalStyled.theme.textGray2};
 
     *:nth-child(1) {
       font-weight: bold;
diff --git a/src/Pages/ProfilePage/Components/Info.styled.js b/src/Pages/ProfilePage/Components/Info.styled.js
index 10480ba..12995c0 100644
--- a/src/Pages/ProfilePage/Components/Info.styled.js
+++ b/src/Pages/ProfilePage/Components/Info.styled.js
@@ -20,12 +20,12 @@ const InfoDiv = styled.div`
       font-size: 1.2rem;
       line-height: 20px;
 
-      color: ${GlobalStyled.theme.textColorWhite};
+      color: ${GlobalStyled.theme.textWhite};
     }
     .welcome-message {
       padding-left: 0.4rem;
       font-size: 0.5rem;
-      color: ${GlobalStyled.theme.textColorLightGray};
+      color: ${GlobalStyled.theme.textGray2};
     }
   }
 `;
diff --git a/src/Pages/SettingPage/Components/Setting.styled.js b/src/Pages/SettingPage/Components/Setting.styled.js
index 0bfa3f5..d46788f 100644
--- a/src/Pages/SettingPage/Components/Setting.styled.js
+++ b/src/Pages/SettingPage/Components/Setting.styled.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import GlobalStyled from 'Styled/Global.styled';
 
 const SettingDiv = styled.div`
-  background: ${GlobalStyled.theme.profilePageBackgroundColor};
+  background: ${GlobalStyled.theme.backgroundGray1};
   .setting_container_title {
     box-sizing: border-box;
     font-size: 1.2rem;
diff --git a/src/Styled/Global.styled.js b/src/Styled/Global.styled.js
index 6c13136..bd309b4 100644
--- a/src/Styled/Global.styled.js
+++ b/src/Styled/Global.styled.js
@@ -1,52 +1,57 @@
 import styled from 'styled-components';
 
 const theme = {
+  // Main Theme
   primary: '#53b7ba',
-  secondary: 'rgba(42, 45, 56, 1)',
-  background: '#f5f5f5',
-  text: '#000',
-  textSecondary: '#666',
-  textLightSecondary: '#ccc',
-  disabled: '#c4c4c4',
-
-  textColor: '#000',
-  textColorSecondary: '#666',
-  textColorGray: '#979797',
-  textColorLightGray: '#ddd',
-  textColorLight: '#eee',
-  textColorWhite: '#fff',
-  textColorMint: '#54b7ba',
-
-  likedIconColor: '#df867d',
-  commentIconColor: '#53b7ba',
-
-  borderColor: '#e6e6e6',
+  secondary: '#2a2d38',
+  primaryEcole: '#387e9c',
+  white: '#fff',
+  black: '#000',
+
+  //Background Color
+  backgroundTheme1: '#696b72',
+  backgroundTheme2: '#40424c',
+  backgroundTheme3: '#2a2d38',
+  backgroundWhite: '#fff',
+  backgroundGray1: '#f9f9f9',
+  backgroundGray2: '#eaeaea',
+  backgroundGray3: '#c4c4c4',
+  backgroundBlack: '#000',
+  backgroundBlue1: '#e4f3f3',
+  backgroundBlue2: '#53b7ba',
+  backgroundBlue3: '#4c5a66',
+
+  //Text Color
+  textWhite: '#fff',
+  textGray1: '#eee',
+  textGray2: '#c4c4c4',
+  textGray3: '#979797',
+  textGray4: '#5f5f5f',
+  textBlack: '#000',
+  textBlue: '#53b7ba',
+  textRed: '#df867d',
+
+  //Button Color
+  buttonWhite: '#fff',
+  buttonGray1: '#d8d8d8',
+  buttonGray2: '#b4b4b4',
+  buttonBlack: '#000',
+  buttonBlue1: '#bce0e1',
+  buttonBlue2: '#53b7ba',
+  buttonRed1: '#df867d',
+  buttonRed2: '#ad0000',
+
+  //Line Color
+  lineGray1: '#d8d8d8',
+  lineGray2: '#e6e6e6',
+  lineGray3: '#f9f9f9',
+  lineBlue1: '#dadde6',
+
+  //Length
   borderRadius: '0.25rem',
-
   headerHeight: '4.5rem',
-  headerBackgroundColor: 'rgba(42, 45, 56, 1)',
-  headerIconColor: '#fff',
-
-  mainPageCheckInInfoBackgroundColor: '#e4f3f3',
-  mainPageCheckInInfoProgressBarColorGaepo: '#53b7ba',
-  mainPageCheckInInfoProgressBarColorSeocho: '#387E9C',
-  mainPageCheckInInfoProgressBarBackgroundColor: '#B4B4B4',
-
-  previewArticleBackgroundColor: '#fff',
-
-  profilePageMyInfoBackgroundColor: '#2a2d38',
-  profilePageBackgroundColor: '#f9f9f9',
-
-  createArticlePageInputBorderColor: '#dadde6',
-
-  categoryNameBackgroundColor: '#4C5A66',
-  categoryNameTextColor: '#FFF',
-
   mobileMinWidth: '28rem',
   desktopWidth: '24.5rem',
-
-  likedCountColor: '#DF867D',
-  commentCountColor: '#53B7BA',
 };
 
 const assets = {
@@ -81,17 +86,15 @@ const ProfileBackgroundDiv = styled.div`
 
   // color
   background-color: ${props =>
-    props.isProfile
-      ? theme.profilePageMyInfoBackgroundColor
-      : theme.profilePageBackgroundColor};
+    props.isProfile ? theme.backgroundTheme3 : theme.backgroundGray1};
 `;
 
 const BoardTitleDiv = styled.div`
   box-sizing: border-box;
   width: 100%;
   display: flex;
-  background-color: ${theme.categoryNameBackgroundColor};
-  color: ${theme.categoryNameTextColor};
+  background-color: ${theme.backgroundBlue3};
+  color: ${theme.textWhite};
   // padding: 0.65rem 1.2rem;
   padding: 0.65rem 1rem;
   align-items: center;