diff --git a/package-lock.json b/package-lock.json
index 4c9eb232..c331c8b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
       "devDependencies": {
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/styled-components": "^5.1.26",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
@@ -2760,6 +2761,16 @@
       "integrity": "sha512-z/G02d+59gyyUb7KYhKi9jOhicek6QD2oMaotUyG+lUkybpXoV49dY9bj7Ah5Q+y7knK2jU67UTX9FyfGzaxQg==",
       "dev": true
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -2804,6 +2815,17 @@
       "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==",
       "dev": true
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.26",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz",
+      "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==",
+      "dev": true,
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
@@ -3902,6 +3924,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -4481,6 +4512,12 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/react-router": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
diff --git a/package.json b/package.json
index 4b2df495..5f1d4129 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
diff --git a/src/App.tsx b/src/App.tsx
index 1d23e4ef..b4f6543f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,5 @@
-import { RecoilRoot } from 'recoil';
-import Home from './pages/Home';
-
 function App() {
-  return (
-    <RecoilRoot>
-      {/* 아래에 각각의 페이지 */}
-      <Home />
-    </RecoilRoot>
-  );
+  return <></>;
 }
 
 export default App;
diff --git a/src/index.css b/src/index.css
index e69de29b..d94d4168 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 6f4c83ce..0ed5f68c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,9 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import theme from './styles/theme';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <RecoilRoot>
+      <ThemeProvider theme={theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </RecoilRoot>
   </React.StrictMode>,
 );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index 8ca06e8f..00000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Home = () => {
-  return <div>Home</div>;
-};
-
-export default Home;
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
new file mode 100644
index 00000000..780f9f5c
--- /dev/null
+++ b/src/styles/styled.d.ts
@@ -0,0 +1,9 @@
+import 'styled-components';
+import { ColorType, FontSizeType } from './theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: ColorType;
+    fontSize: FontSizeType;
+  }
+}
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
new file mode 100644
index 00000000..7a20e7b7
--- /dev/null
+++ b/src/styles/theme.ts
@@ -0,0 +1,25 @@
+import { DefaultTheme } from 'styled-components';
+
+const colors = {
+  // primary:
+  // secondary:
+  border: '#f2f2f2',
+  white: '#ffffff',
+  black: '#1D1B26',
+};
+
+const fontSize = {
+  title: 20,
+  subTitle: 16,
+  text: 14,
+};
+
+export type ColorType = typeof colors;
+export type FontSizeType = typeof fontSize;
+
+const theme: DefaultTheme = {
+  colors,
+  fontSize,
+};
+
+export default theme;