diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8c8abc6..b168902 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,13 +4,15 @@ import Login from "./Login";
 import Home from "./Home";
 import Assignment from "./Assignment";
 import Deposit from "./Deposit";
+import Intro from "./Intro";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Home />} />
+        <Route path="/" element={<Intro />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/home" element={<Home />} />
         <Route path="/assignment" element={<Assignment />} />
         <Route path="/deposit" element={<Deposit />} />
       </Routes>
diff --git a/frontend/src/Home.jsx b/frontend/src/Home.jsx
index db58368..8ac2af7 100644
--- a/frontend/src/Home.jsx
+++ b/frontend/src/Home.jsx
@@ -1,26 +1,9 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import homeLogo from "./assets/img/home.svg";
+import styles from "./Home.module.css";
 
 const Home = () => {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      navigate("/login");
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  }, [navigate]);
-
-  return (
-    <div className="home">
-      <div className="home__container">
-        <h1>PIROCHECK</h1>
-        <img src={homeLogo} alt="PiroCheck Logo" className="home__logo" />
-      </div>
-    </div>
-  );
+  return <div className={styles.home_container}></div>;
 };
 
 export default Home;
diff --git a/frontend/src/Home.module.css b/frontend/src/Home.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/Intro.jsx b/frontend/src/Intro.jsx
new file mode 100644
index 0000000..0419c6a
--- /dev/null
+++ b/frontend/src/Intro.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./Intro.module.css";
+
+const Intro = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigate("/login");
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
+  return (
+    <div className={styles.intro_container}>
+      <div className={styles.intro}>
+        <h1 className={styles.pirocheck}>PIROCHECK</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Intro;
diff --git a/frontend/src/Intro.module.css b/frontend/src/Intro.module.css
new file mode 100644
index 0000000..1344aaa
--- /dev/null
+++ b/frontend/src/Intro.module.css
@@ -0,0 +1,21 @@
+.intro {
+  background-image: url("./assets/img/home.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pirocheck {
+  font-size: 1.25rem;
+  transform: scaleX(1.5);
+}
+.intro_container {
+  background-color: var(--background-black);
+  color: var(--main-green);
+  font-family: "Cafe24Moyamoya-Regular-v1.0", sans-serif;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}