diff --git a/package.json b/package.json
index 0de355a..dec4325 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,14 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.3",
+    "react-icons": "^4.3.1",
+    "react-loading-icons": "^1.0.8",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
+    "styled-normalize": "^8.0.7",
     "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
new file mode 100644
index 0000000..b783ae1
--- /dev/null
+++ b/src/components/Label/Label.stories.tsx
@@ -0,0 +1,34 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Label from './Label';
+
+export default {
+  title: 'Label',
+  component: Label,
+  args: {
+    type: 'time',
+    value: 0,
+  },
+} as ComponentMeta<typeof Label>;
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
+
+export const DefaultTimeLabel = Template.bind({});
+
+export const TimeLabel = Template.bind({});
+
+TimeLabel.args = {
+  value: 255,
+};
+
+export const DefaultBookMarkLabel = Template.bind({});
+
+DefaultBookMarkLabel.args = {
+  type: 'bookmark',
+  value: 0,
+};
+
+export const BookMarkLabel = Template.bind({});
+
+BookMarkLabel.args = {
+  type: 'bookmark',
+  value: 10,
+};
diff --git a/src/components/Label/Label.styled.tsx b/src/components/Label/Label.styled.tsx
new file mode 100644
index 0000000..dcb5a21
--- /dev/null
+++ b/src/components/Label/Label.styled.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const StyledLabel = styled.p`
+  color: #cbcbcb;
+  font-size: rem(24px);
+  display: block;
+  padding: rem(10px) 0;
+`;
+
+export const StyledStrong = styled.strong`
+  font-weight: bolder;
+`;
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
new file mode 100644
index 0000000..efb80f1
--- /dev/null
+++ b/src/components/Label/Label.tsx
@@ -0,0 +1,34 @@
+import { BsBookmarkHeartFill } from 'react-icons/bs';
+import { RiTimerFill } from 'react-icons/ri';
+import { LabelProps } from './Label.types';
+import { StyledLabel, StyledStrong } from './Label.styled';
+
+export default function Label({ type, value }: LabelProps): JSX.Element {
+  const iconStyle = {
+    marginRight: '20px',
+    fontSize: '26px',
+    verticalAlign: 'bottom',
+  };
+
+  const renderByType = (type: string) => {
+    switch (type) {
+      case 'time':
+        return (
+          <>
+            <RiTimerFill style={iconStyle} />
+            Ready in <StyledStrong>{value} minutes </StyledStrong>
+          </>
+        );
+      case 'bookmark':
+        return (
+          <>
+            <BsBookmarkHeartFill style={iconStyle} />
+            <StyledStrong>{value}</StyledStrong> saved
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+  return <StyledLabel>{renderByType(type)}</StyledLabel>;
+}
diff --git a/src/components/Label/Label.types.ts b/src/components/Label/Label.types.ts
new file mode 100644
index 0000000..37417be
--- /dev/null
+++ b/src/components/Label/Label.types.ts
@@ -0,0 +1,4 @@
+export interface LabelProps {
+  type: string;
+  value: number;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 00b8912..c07ab77 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,2 @@
 export { default as App } from './App/App';
+export { default as Label } from './Label/Label';
diff --git a/src/index.tsx b/src/index.tsx
index a59b0cd..c3a4a35 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,17 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import { GlobalStyle } from 'styles/GlobalStyle';
+import { defaultTheme } from 'theme/theme';
 import { App } from './components';
 // import './reportWebVitals';
-import './styles/global.css';
 
 render(
   <StrictMode>
-    <App />
+    <ThemeProvider theme={defaultTheme}>
+      <GlobalStyle />
+      <App />
+    </ThemeProvider>
   </StrictMode>,
   document.getElementById('root'),
 );
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
new file mode 100644
index 0000000..c05f905
--- /dev/null
+++ b/src/styles/GlobalStyle.ts
@@ -0,0 +1,125 @@
+import { createGlobalStyle } from 'styled-components';
+import { normalize } from 'styled-normalize';
+
+export const GlobalStyle = createGlobalStyle`
+    ${normalize}
+
+    /* 시맨틱 태그 iE 맞춤 */
+    header,
+    footer,
+    main,
+    section,
+    article,
+    aside,
+    nav,
+    figure,
+    figcaption {
+    display: block;
+    }
+
+    /* 기본 스타일 */
+    /* 기본 박스 사이징 설정 */
+
+    body,
+    body::before,
+    body::after,
+    body *,
+    body *::before,
+    body *::after {
+    box-sizing: border-box;
+    }
+
+    /* 본문 기본 폰트, 글자 크기, 굵기, 배경 색상 지정 */
+    /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); */
+
+    @font-face {
+    font-family: 'Montserrat';
+    font-weight: normal;
+    font-style: normal;
+    src: url('./fonts/Montserrat-Regular.woff2') format('woff2'),
+        url('.assets/fonts/Montserrat-Bold.woff2') format('woff2');
+    font-display: block;
+    unicode-range: U+000-5FF;
+    }
+
+    body {
+    font-family: 'Montserrat', 'Roboto', sans-serif;
+    font-size: inherit;
+    position: relative;
+    }
+
+    /* 제목 글자 크기 및 굵기 재지정 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+    font-size: 100%;
+    font-weight: inherit;
+    margin: 0;
+    }
+
+    /* 목록 안쪽 여백 및 불릿 제거 */
+    ul,
+    ol {
+    padding-left: 0;
+    list-style: none;
+    }
+
+    /* 이미지에 발생하는 갭 제거 */
+    img {
+    vertical-align: middle;
+    }
+
+    /* 링크 요소의 밑줄 및 글자 색상 재 정의 */
+    a {
+    color: inherit;
+    text-decoration: none;
+    }
+
+    /* 주소 및 강조 요소 스타일 재 정의 */
+    address,
+    em {
+    font-style: normal;
+    }
+
+    /* fieldset 요소의 테두리 및 여백 제거 */
+    fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    }
+
+    /* 버튼 마우스 스타일 설정 */
+    button {
+    cursor: pointer;
+    color: inherit;
+    font-size: inherit;
+    }
+
+    /* form 요소 스타일 설정 */
+    input::-ms-clear,
+    input::-ms-reveal {
+    display: none;
+    }
+    input::-webkit-search-decoration,
+    input::-webkit-search-cancel-button,
+    input::-webkit-search-results-button,
+    input::-webkit-search-results-decoration {
+    display: none;
+    }
+
+    input,
+    button,
+    textarea {
+    appearance: none;
+    -webkit-appearance: none;
+    }
+
+
+    /* figure 기본 스타일 제거 */
+    figure {
+    margin: 0;
+    }
+`;
diff --git a/src/styles/fonts/Montserrat-Bold.woff2 b/src/styles/fonts/Montserrat-Bold.woff2
new file mode 100644
index 0000000..98305ba
Binary files /dev/null and b/src/styles/fonts/Montserrat-Bold.woff2 differ
diff --git a/src/styles/fonts/Montserrat-Regular.woff2 b/src/styles/fonts/Montserrat-Regular.woff2
new file mode 100644
index 0000000..644c304
Binary files /dev/null and b/src/styles/fonts/Montserrat-Regular.woff2 differ
diff --git a/src/styles/global.css b/src/styles/global.css
deleted file mode 100644
index 7323ae8..0000000
--- a/src/styles/global.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
diff --git a/src/theme/theme.d.ts b/src/theme/theme.d.ts
new file mode 100644
index 0000000..2b05c5a
--- /dev/null
+++ b/src/theme/theme.d.ts
@@ -0,0 +1,40 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    color: {
+      primaryGreen: string;
+      primaryOrange: string;
+      badgePink: string;
+      badgePurple: string;
+      badgeGreen: string;
+      badgeNavy: string;
+      heartPink: string;
+      black: string;
+      white: string;
+
+      backgroundGray: string;
+      searchGray: string;
+      menuBg: string;
+
+      gray100: string;
+      gray200: string;
+      gray300: string;
+      gray400: string;
+      gray500: string;
+      gray600: string;
+      gray700: string;
+      gray800: string;
+      gray900: string;
+    };
+
+    fontSize: {
+      xs: string;
+      s: string;
+      m: string;
+      l: string;
+      xl: string;
+      xxl: string;
+    };
+  }
+}
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
new file mode 100644
index 0000000..d26cd14
--- /dev/null
+++ b/src/theme/theme.ts
@@ -0,0 +1,39 @@
+import { DefaultTheme } from 'styled-components';
+import { pxToRem } from 'utils';
+
+export const defaultTheme: DefaultTheme = {
+  color: {
+    primaryGreen: '#529715',
+    primaryOrange: '#e56a18',
+    badgePink: '#d51754',
+    badgePurple: '#910087',
+    badgeGreen: '#349a2c',
+    badgeNavy: '#4b5aab',
+    heartPink: '#ff9d9d',
+    black: '#000000',
+    white: '#ffffff',
+
+    backgroundGray: '#fafafa',
+    searchGray: '#ebebeb',
+    menuBg: '#252525',
+
+    gray100: '#d8d8d8',
+    gray200: '#b0b0b0',
+    gray300: '#898989',
+    gray400: '#616161',
+    gray500: '#3a3a3a',
+    gray600: '#2e2e2e',
+    gray700: '#232323',
+    gray800: '#171717',
+    gray900: '#0c0c0c',
+  },
+
+  fontSize: {
+    xs: pxToRem(12),
+    s: pxToRem(14),
+    m: pxToRem(15),
+    l: pxToRem(16),
+    xl: pxToRem(18),
+    xxl: pxToRem(24),
+  },
+};
diff --git a/src/utils/.keep b/src/utils/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..54fcd80
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './style';
diff --git a/src/utils/style.ts b/src/utils/style.ts
new file mode 100644
index 0000000..a2116ab
--- /dev/null
+++ b/src/utils/style.ts
@@ -0,0 +1,3 @@
+export const pxToRem = (px: number, base = 16): string => {
+  return `${px / base}rem`;
+};
diff --git a/yarn.lock b/yarn.lock
index a932841..58d3248 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1126,7 +1126,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
   integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -3732,6 +3732,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.175":
+  version "4.14.179"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
+  integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
+
 "@types/long@^4.0.0", "@types/long@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
@@ -11424,6 +11429,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._isnative@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
@@ -12178,6 +12188,11 @@ nan@^2.12.1, nan@^2.15.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.23, nanoid@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
@@ -13846,6 +13861,11 @@ prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -14216,6 +14236,11 @@ react-helmet-async@^1.0.7, react-helmet-async@^1.2.3:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"
@@ -14235,6 +14260,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-loading-icons@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/react-loading-icons/-/react-loading-icons-1.0.8.tgz#8799af7507d92401778590b27de8d7ed679e2b95"
+  integrity sha512-j0myUwDUPoo3qaPkbgnA7U2RNHqLLC+wXcpMWe+rtk3Iw+mGHltZ3QitPSHFKtsFKlpM9UlMmZGZ6sw6WVVW7w==
+
 react-popper-tooltip@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
@@ -15832,6 +15862,11 @@ styled-components@^5.3.3:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
+styled-normalize@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/styled-normalize/-/styled-normalize-8.0.7.tgz#e883bff6a0c59a65a39365a4eb9c6cf48372c61f"
+  integrity sha512-qQV4O7B9g7ZUnStCwGde7Dc/mcFF/pz0Ha/LL7+j/r6uopf6kJCmmR7jCPQMCBrDkYiQ4xvw1hUoceVJkdaMuQ==
+
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -16289,6 +16324,11 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
@@ -17675,6 +17715,19 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
+
 zip-stream@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.1.0.tgz#51dd326571544e36aa3f756430b313576dc8fc79"