diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
deleted file mode 100644
index 544badc..0000000
--- a/frontend/src/App.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function App() {
-  return <div>App</div>;
-}
-
-export default App;
diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx
new file mode 100644
index 0000000..b86cf44
--- /dev/null
+++ b/frontend/src/Router.jsx
@@ -0,0 +1,11 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { Home } from './pages/HomePage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Home />,
+  },
+]);
+
+export default router;
diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..65f0b6a
--- /dev/null
+++ b/frontend/src/components/Footer/Footer.jsx
@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.css';
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div>
+        <div className={styles.title}>EduFocus</div>
+        <div>Copyright © 2024 EduFocus 모든 권리 보유.</div>
+      </div>
+      <ul className={styles.linkList}>
+        <li>
+          <Link to={'/'}>서비스 이용약관</Link>
+        </li>
+        <li className={styles.divider} />
+        <li>
+          <Link to={'/'}>개인정보 처리방침</Link>
+        </li>
+      </ul>
+    </footer>
+  );
+}
diff --git a/frontend/src/components/Footer/Footer.module.css b/frontend/src/components/Footer/Footer.module.css
new file mode 100644
index 0000000..39c9c4e
--- /dev/null
+++ b/frontend/src/components/Footer/Footer.module.css
@@ -0,0 +1,46 @@
+.footer {
+  width: 100%;
+  padding: 40px;
+  margin-top: 100px;
+  background-color: var(--background-secondary);
+  color: var(--text-color-tertiary);
+  box-sizing: border-box;
+}
+
+.footerContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 1320px;
+  padding: 0 40px;
+  margin: 0 auto;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.title {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.linkList {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  margin: 20px 0 0;
+  list-style: none;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.divider {
+  width: 2px;
+  height: 12px;
+  border-radius: 1px;
+  background-color: var(--text-color-tertiary);
+}
diff --git a/frontend/src/components/Footer/index.js b/frontend/src/components/Footer/index.js
new file mode 100644
index 0000000..da94c29
--- /dev/null
+++ b/frontend/src/components/Footer/index.js
@@ -0,0 +1 @@
+export { default as Footer } from './Footer';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d46a72a..15ed389 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,132 @@
 :root {
-  --primary-color: #007bff;
+  /* primitive colors */
+  --black: #000;
+  --grey50: #f9fafb;
+  --grey100: #f2f4f6;
+  --grey200: #e5e8eb;
+  --grey300: #d1d6db;
+  --grey400: #b0b8c1;
+  --grey500: #8b95a1;
+  --grey600: #6b7684;
+  --grey700: #4e5968;
+  --grey800: #333d4b;
+  --grey900: #191f28;
+  --greyOpacity50: rgba(0, 23, 51, 0.02);
+  --greyOpacity100: rgba(2, 32, 71, 0.05);
+  --greyOpacity200: rgba(0, 27, 55, 0.1);
+  --greyOpacity300: rgba(0, 29, 58, 0.18);
+  --greyOpacity400: rgba(0, 25, 54, 0.31);
+  --greyOpacity500: rgba(3, 24, 50, 0.46);
+  --greyOpacity600: rgba(0, 19, 43, 0.58);
+  --greyOpacity700: rgba(3, 18, 40, 0.7);
+  --greyOpacity800: rgba(0, 12, 30, 0.8);
+  --greyOpacity900: rgba(2, 9, 19, 0.91);
+  --white: #fff;
+  --blue50: #e8f3ff;
+  --blue100: #c9e2ff;
+  --blue200: #90c2ff;
+  --blue300: #64a8ff;
+  --blue400: #4593fc;
+  --blue500: #3182f6;
+  --blue600: #2272eb;
+  --blue700: #1b64da;
+  --blue800: #1957c2;
+  --blue900: #194aa6;
+  --red50: #fee;
+  --red100: #ffd4d6;
+  --red200: #feafb4;
+  --red300: #fb8890;
+  --red400: #f66570;
+  --red500: #f04452;
+  --red600: #e42939;
+  --red700: #d22030;
+  --red800: #bc1b2a;
+  --red900: #a51926;
+  --orange50: #fff3e0;
+  --orange100: #ffe0b0;
+  --orange200: #ffcd80;
+  --orange300: #ffbd51;
+  --orange400: #ffa927;
+  --orange500: #fe9800;
+  --orange600: #fb8800;
+  --orange700: #f57800;
+  --orange800: #ed6700;
+  --orange900: #e45600;
+  --yellow50: #fff9e7;
+  --yellow100: #ffefbf;
+  --yellow200: #ffe69b;
+  --yellow300: #ffdd78;
+  --yellow400: #ffd158;
+  --yellow500: #ffc342;
+  --yellow600: #ffb331;
+  --yellow700: #faa131;
+  --yellow800: #ee8f11;
+  --yellow900: #dd7d02;
+  --green50: #f0faf6;
+  --green100: #aeefd5;
+  --green200: #76e4b8;
+  --green300: #3fd599;
+  --green400: #15c47e;
+  --green500: #03b26c;
+  --green600: #02a262;
+  --green700: #029359;
+  --green800: #028450;
+  --green900: #027648;
+  --teal50: #edf8f8;
+  --teal100: #bce9e9;
+  --teal200: #89d8d8;
+  --teal300: #58c7c7;
+  --teal400: #30b6b6;
+  --teal500: #18a5a5;
+  --teal600: #109595;
+  --teal700: #0c8585;
+  --teal800: #097575;
+  --teal900: #076565;
+  --purple50: #f9f0fc;
+  --purple100: #edccf8;
+  --purple200: #da9bef;
+  --purple300: #c770e4;
+  --purple400: #b44bd7;
+  --purple500: #a234c7;
+  --purple600: #9128b4;
+  --purple700: #8222a2;
+  --purple800: #73228e;
+  --purple900: #65237b;
+  --whiteOpacity50: rgba(209, 209, 253, 0.05);
+  --whiteOpacity100: rgba(217, 217, 255, 0.11);
+  --whiteOpacity200: rgba(222, 222, 255, 0.19);
+  --whiteOpacity300: rgba(224, 224, 255, 0.27);
+  --whiteOpacity400: rgba(232, 232, 253, 0.36);
+  --whiteOpacity500: rgba(242, 242, 255, 0.47);
+  --whiteOpacity600: rgba(248, 248, 255, 0.6);
+  --whiteOpacity700: rgba(253, 253, 255, 0.75);
+  --whiteOpacity800: rgba(253, 253, 254, 0.89);
+  --whiteOpacity900: #fff;
+
+  /* semantic colors */
+  --primary-color: #05f;
+  --accent-color: #f50;
+
+  --background: #fff;
+  --background-secondary: var(--grey100);
+  --background-tertiary: var(--grey200);
+
+  --border-color: var(--grey300);
+  --border-color-secondary: var(--grey600);
+  --border-color-tertiary: var(--grey800);
+
+  --text-color: var(--grey900);
+  --text-color-secondary: var(--grey700);
+  --text-color-tertiary: var(--grey400);
+
+  --error-color: var(--red500);
+  --success-color: var(--green500);
+  --warning-color: var(--yellow500);
+  --info-color: var(--blue500);
+
+  /* shadow */
+  --shadow: 2px 4px 12px var(--greyOpacity200);
+  --shadow-hard: 2px 4px 16px var(--greyOpacity300);
 }
 
 body {
@@ -7,13 +134,7 @@ body {
     Pretendard,
     -apple-system,
     BlinkMacSystemFont,
-    Bazier Square,
-    Noto Sans KR,
-    Segoe UI,
     Apple SD Gothic Neo,
-    Roboto,
-    Helvetica Neue,
-    Arial,
     sans-serif,
     Apple Color Emoji,
     Segoe UI Emoji,
@@ -22,3 +143,8 @@ body {
   margin: 0;
   padding: 0;
 }
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 54b39dd..aa1b3d9 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,18 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from 'react-router-dom';
+import router from './Router';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {},
+});
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </React.StrictMode>
+);
diff --git a/frontend/src/pages/HomePage/HomePage.jsx b/frontend/src/pages/HomePage/HomePage.jsx
new file mode 100644
index 0000000..6861736
--- /dev/null
+++ b/frontend/src/pages/HomePage/HomePage.jsx
@@ -0,0 +1,10 @@
+import { Footer } from '../../components/Footer';
+
+export default function Home() {
+  return (
+    <div>
+      <div>asdf</div>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/HomePage/index.js b/frontend/src/pages/HomePage/index.js
new file mode 100644
index 0000000..be9bd39
--- /dev/null
+++ b/frontend/src/pages/HomePage/index.js
@@ -0,0 +1 @@
+export { default as Home } from './HomePage';