diff --git a/frontend/index.html b/frontend/index.html
index fe855ed..7afeee8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="icon" type="image/svg+xml" href="./favicons/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>aramjonghu</title>
         <link href="./src/App.css" rel="stylesheet">
     </head>
-    <body>
+    <body class="bg-ctp-sapphire-50 dark:bg-ctp-base">
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
     </body>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 152fe1f..6960c47 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,11 +1,13 @@
 import './App.css'
 import Header from './components/Header'
+import Home from './pages/Home'
 
 function App() {
 
     return (
         <>
             <Header></Header>
+            <Home></Home>
         </>
     )
 }
diff --git a/frontend/src/assets/fonts/UbuntuNerdFont-Bold.ttf b/frontend/src/assets/fonts/UbuntuNerdFont-Bold.ttf
new file mode 100644
index 0000000..a20dc49
Binary files /dev/null and b/frontend/src/assets/fonts/UbuntuNerdFont-Bold.ttf differ
diff --git a/frontend/src/assets/fonts/UbuntuNerdFont-Regular.ttf b/frontend/src/assets/fonts/UbuntuNerdFont-Regular.ttf
new file mode 100644
index 0000000..58f06e6
Binary files /dev/null and b/frontend/src/assets/fonts/UbuntuNerdFont-Regular.ttf differ
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index ba5b05e..66490b1 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,12 +1,12 @@
-
+import logo from '../assets/logo.png';
 export default function Header() {
 
   return (
-    <header className="bg-ctp-base dark:bg-ctp-crust left-0 bouder-b border-ctp-overlay0 fixed top-0 z-50 w-full">
+    <header className="bg-ctp-lavender-200 dark:bg-ctp-crust left-0 bouder-b border-ctp-overlay0 fixed top-0 z-50 w-full">
       <nav className="mx-auto max-w-[80%] flex items-center justify-between p-4 w-full">
 
         <a href="/" className="flex items-center gap-2">
-          <img src="../assets/logo.png" alt="AramJonghu" className="h-8 w-auto" />
+          <img src={logo} alt="AramJonghu" className="h-8 w-auto" />
         </a>
 
         <div className="hidden md:flex gap-10">
diff --git a/frontend/src/components/Intro.jsx b/frontend/src/components/Intro.jsx
new file mode 100644
index 0000000..f76c3d2
--- /dev/null
+++ b/frontend/src/components/Intro.jsx
@@ -0,0 +1,7 @@
+
+export default function Intro() {
+
+    return(
+        <h1>hello!</h1>
+    )
+}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..fa36ef1
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,10 @@
+import Intro from "../components/Intro";
+
+export default function Home() {
+
+    return(
+        <div className="">
+            <Intro></Intro>
+        </div>
+    );
+}
