diff --git a/package.json b/package.json
index e732724..c113cb3 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/assets/fonts/SpoqaHanSansNeo-Bold.woff2 b/src/assets/fonts/SpoqaHanSansNeo-Bold.woff2
new file mode 100644
index 0000000..da1dd60
Binary files /dev/null and b/src/assets/fonts/SpoqaHanSansNeo-Bold.woff2 differ
diff --git a/src/assets/fonts/SpoqaHanSansNeo-Light.woff2 b/src/assets/fonts/SpoqaHanSansNeo-Light.woff2
new file mode 100644
index 0000000..283582d
Binary files /dev/null and b/src/assets/fonts/SpoqaHanSansNeo-Light.woff2 differ
diff --git a/src/assets/fonts/SpoqaHanSansNeo-Medium.woff2 b/src/assets/fonts/SpoqaHanSansNeo-Medium.woff2
new file mode 100644
index 0000000..0e9b8d7
Binary files /dev/null and b/src/assets/fonts/SpoqaHanSansNeo-Medium.woff2 differ
diff --git a/src/assets/fonts/SpoqaHanSansNeo-Regular.woff2 b/src/assets/fonts/SpoqaHanSansNeo-Regular.woff2
new file mode 100644
index 0000000..1572319
Binary files /dev/null and b/src/assets/fonts/SpoqaHanSansNeo-Regular.woff2 differ
diff --git a/src/assets/fonts/SpoqaHanSansNeo-Thin.woff2 b/src/assets/fonts/SpoqaHanSansNeo-Thin.woff2
new file mode 100644
index 0000000..283e8cb
Binary files /dev/null and b/src/assets/fonts/SpoqaHanSansNeo-Thin.woff2 differ
diff --git a/src/main.tsx b/src/main.tsx
index 82618e3..95da43c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,9 +4,7 @@ import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
 
 import { Router } from '@/router';
-import { GlobalFont } from '@/styles/GlobalFont';
-import { GlobalStyle } from '@/styles/GlobalStyle';
-import { theme } from '@/styles/theme';
+import { GlobalFont, GlobalStyle, theme } from '@/styles';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <RecoilRoot>
diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/styles/GlobalFont.ts b/src/styles/GlobalFont.ts
deleted file mode 100644
index fae02ec..0000000
--- a/src/styles/GlobalFont.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalFont = createGlobalStyle`@font-face {
-  font-family: "";
-  src: url("") format(''); 
-}
-`;
diff --git a/src/styles/global/GlobalFont.ts b/src/styles/global/GlobalFont.ts
new file mode 100644
index 0000000..80f7376
--- /dev/null
+++ b/src/styles/global/GlobalFont.ts
@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalFont = createGlobalStyle`
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
+}
+`;
diff --git a/src/styles/GlobalStyle.ts b/src/styles/global/GlobalStyle.ts
similarity index 96%
rename from src/styles/GlobalStyle.ts
rename to src/styles/global/GlobalStyle.ts
index b39bf41..dd38e19 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/global/GlobalStyle.ts
@@ -1,6 +1,8 @@
 import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
 
 export const GlobalStyle = createGlobalStyle`
+${reset}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
diff --git a/src/styles/index.ts b/src/styles/index.ts
new file mode 100644
index 0000000..20dfbde
--- /dev/null
+++ b/src/styles/index.ts
@@ -0,0 +1,4 @@
+export * from '@/styles/global/GlobalFont';
+export * from '@/styles/global/GlobalStyle';
+
+export * from '@/styles/theme/theme';
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
index 9419ecd..f8a7447 100644
--- a/src/styles/styled.d.ts
+++ b/src/styles/styled.d.ts
@@ -1,9 +1,10 @@
+import { ColorTypes, DeviceTypes, FontTypes } from '@/styles/theme/theme';
 import 'styled-components';
-import { ColorsTypes, FontsTypes } from './theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme {
-    colors: ColorsTypes;
-    fonts: FontsTypes;
+    color: ColorTypes;
+    font: FontTypes;
+    device: DeviceTypes;
   }
 }
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
deleted file mode 100644
index 694ca49..0000000
--- a/src/styles/theme.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-
-const colors = {
-  black: '#000000', // 예시
-} as const;
-
-interface Font {
-  font: string;
-  weight: number;
-  size: number;
-  lineHeight: number;
-}
-
-const FONT = ({ font, weight, size, lineHeight }: Font): string => {
-  return `
-    font-family : "${font}";
-    font-weight : ${weight};
-    font-size : ${size}px;
-    line-height : ${lineHeight}%;
-    `;
-};
-
-const fonts = {
-  example: FONT({
-    font: '',
-    weight: 0,
-    size: 0,
-    lineHeight: 0,
-  }),
-};
-
-export type ColorsTypes = typeof colors;
-export type FontsTypes = typeof fonts;
-
-export const theme: DefaultTheme = {
-  colors,
-  fonts,
-};
diff --git a/src/styles/theme/color.ts b/src/styles/theme/color.ts
new file mode 100644
index 0000000..bcf5ada
--- /dev/null
+++ b/src/styles/theme/color.ts
@@ -0,0 +1,45 @@
+export const color = {
+  black: '#000000',
+  white: '#ffffff',
+
+  // Primary
+  primary900: '#3d2669',
+  primary800: '#50328a',
+  primary700: '#6740b2',
+  primary600: '#8452e4',
+  primary500: '#915afb',
+  primary400: '#a77bfc',
+  primary300: '#b590fc',
+  primary200: '#ccb3fd',
+  primary100: '#ddccfe',
+  primary50: '#f4efff',
+
+  // Secondary
+  secondary900: '#66273b',
+  secondary800: '#86334e',
+  secondary700: '#ad4164',
+  secondary600: '#de5480',
+  secondary500: '#f45c8d',
+  secondary400: '#f67da4',
+  secondary300: '#f892b3',
+  secondary200: '#fab4cb',
+  secondary100: '#fcccdc',
+  secondary50: '#feeff4',
+
+  // Gray Scale
+  gray900: '#171717',
+  gray800: '#242424',
+  gray700: '#333333',
+  gray600: '#555555',
+  gray500: '#6f6f6f',
+  gray400: '#8b8b8b',
+  gray300: '#a5a5a5',
+  gray250: '#c1c1c1',
+  gray200: '#dfdfdf',
+  gray150: '#efefef',
+  gray100: '#f7f7f7',
+  gray50: '#fbfbfb',
+
+  // etc
+  bgModal: 'rgba(18, 18, 18, 0.36)',
+} as const;
diff --git a/src/styles/theme/device.ts b/src/styles/theme/device.ts
new file mode 100644
index 0000000..9b5dbc5
--- /dev/null
+++ b/src/styles/theme/device.ts
@@ -0,0 +1,11 @@
+const deviceSizes = {
+  mobile: '320px',
+  tablet: '600px',
+  desktop: '1280px',
+};
+
+export const device = {
+  mobile: `screen and (min-width: ${deviceSizes.mobile}) and (max-width: ${deviceSizes.tablet})`,
+  tablet: `screen and (min-width: ${deviceSizes.tablet}) and (max-width: ${deviceSizes.desktop})`,
+  desktop: `screen and (min-width: ${deviceSizes.desktop})`,
+};
diff --git a/src/styles/theme/font.ts b/src/styles/theme/font.ts
new file mode 100644
index 0000000..c57f943
--- /dev/null
+++ b/src/styles/theme/font.ts
@@ -0,0 +1,178 @@
+interface Font {
+  font: string;
+  weight: number;
+  size: number;
+  lineHeight: number;
+}
+
+const FONT = ({ font, weight, size, lineHeight }: Font): string => {
+  return `
+    font-family : "${font}";
+    font-weight: ${weight};
+    font-size : ${size}px;
+    line-height : ${lineHeight}px;
+    `;
+};
+
+export const font = {
+  desktop: {
+    d1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 82,
+      lineHeight: 100,
+    }),
+    d2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 65,
+      lineHeight: 80,
+    }),
+    h1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 50,
+      lineHeight: 60,
+    }),
+    h2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 40,
+      lineHeight: 50,
+    }),
+    title1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 32,
+      lineHeight: 40,
+    }),
+    title2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 25,
+      lineHeight: 32,
+    }),
+    body1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 18,
+      lineHeight: 28,
+    }),
+    body1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 18,
+      lineHeight: 28,
+    }),
+    body2m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body2r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 16,
+      lineHeight: 24,
+    }),
+    label1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 12,
+      lineHeight: 20,
+    }),
+  },
+  mobile: {
+    d1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 58,
+      lineHeight: 64,
+    }),
+    d2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 45,
+      lineHeight: 56,
+    }),
+    h1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 36,
+      lineHeight: 44,
+    }),
+    h2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 28,
+      lineHeight: 32,
+    }),
+    title1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 22,
+      lineHeight: 28,
+    }),
+    title2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body2m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    body2r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 12,
+      lineHeight: 20,
+    }),
+  },
+};
diff --git a/src/styles/theme/theme.ts b/src/styles/theme/theme.ts
new file mode 100644
index 0000000..1eac311
--- /dev/null
+++ b/src/styles/theme/theme.ts
@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components';
+
+import { color } from '@/styles/theme/color';
+import { device } from '@/styles/theme/device';
+import { font } from '@/styles/theme/font';
+
+export type ColorTypes = typeof color;
+export type FontTypes = typeof font;
+export type DeviceTypes = typeof device;
+export const theme: DefaultTheme = {
+  color,
+  font,
+  device,
+};
diff --git a/yarn.lock b/yarn.lock
index 55b1472..e72179f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2747,6 +2747,11 @@ styled-components@^6.1.8:
     stylis "4.3.1"
     tslib "2.5.0"
 
+styled-reset@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/styled-reset/-/styled-reset-4.5.2.tgz#2eba489fce52e34368693adb8d5fb4bf775edc3c"
+  integrity sha512-dbAaaVEhweBs2FGfqGBdW6oMcMK8238C2X5KCxBhUQJX92m/QyUfzRADOXhdXiXNkIPELtMCd72YY9eCdORfIw==
+
 stylis@4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"