diff --git a/src/main.tsx b/src/main.tsx
index 60669faf..2760a99f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,50 +3,13 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
+import { theme } from "./styles/theme.ts";
+import { GlobalStyle } from "./styles/globalStyle.ts";
 import { router } from "./routes/router";
-import "./index.css";
-import { ThemeProvider, createGlobalStyle } from "styled-components";
+import { ThemeProvider } from "styled-components";
 
 const queryClient = new QueryClient();
 
-export const GlobalStyle = createGlobalStyle`
-  /* css reset */
-  *{margin:0;padding:0;font:inherit;color:inherit;}
-  *, :after, :before {box-sizing:border-box;}
-  :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4;}
-  html, body, #root {height:100%;}
-  img, svg {display: block;max-width:100%;}
-  button {background:none;border:0;cursor:pointer;}
-  a {text-decoration:none}
-  
-  * {
-      box-sizing: border-box;
-      font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  }
-`;
-
-const theme = {
-  color: {
-    primaryLight: "#FFECDB",
-    primary: "#FF7C17",
-    primaryDark: "#CB5A04",
-
-    secondaryLight: "#CDEDFF",
-    secondary: "#519EC9",
-    secondaryDark: "#0072B1",
-
-    black: "#151515",
-
-    greyScale1: "#404040",
-    greyScale2: "#686868",
-    greyScale3: "#999999",
-    greyScale4: "#B8B8B8",
-    greyScale5: "#CDCDCD",
-    greyScale6: "#E9E9E9",
-  },
-};
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
new file mode 100644
index 00000000..28b339e7
--- /dev/null
+++ b/src/styles/globalStyle.ts
@@ -0,0 +1,17 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  /* css reset */
+  *{margin:0;padding:0;font:inherit;color:inherit;}
+  *, :after, :before {box-sizing:border-box;}
+  :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4;}
+  html, body, #root {height:100%;}
+  img, svg {display: block;max-width:100%;}
+  button {background:none;border:0;cursor:pointer;}
+  a {text-decoration:none}
+  
+  * {
+      box-sizing: border-box;
+      font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  }
+`;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
new file mode 100644
index 00000000..5a7a36dd
--- /dev/null
+++ b/src/styles/theme.ts
@@ -0,0 +1,20 @@
+export const theme = {
+  color: {
+    primaryLight: "#FFECDB",
+    primary: "#FF7C17",
+    primaryDark: "#CB5A04",
+
+    secondaryLight: "#CDEDFF",
+    secondary: "#519EC9",
+    secondaryDark: "#0072B1",
+
+    black: "#151515",
+
+    greyScale1: "#404040",
+    greyScale2: "#686868",
+    greyScale3: "#999999",
+    greyScale4: "#B8B8B8",
+    greyScale5: "#CDCDCD",
+    greyScale6: "#E9E9E9",
+  },
+};
\ No newline at end of file