diff --git a/package.json b/package.json
index 9bccbfb..44f969b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "fs-extra": "^11.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index d01c55e..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import "./App.css";
-
-import Header from "./layouts/Header";
-import logo from "../src/assets/svg/logo.svg";
-
-function App() {
-  return (
-    <>
-      <Header />
-    </>
-  );
-}
-
-export default App;
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index adee88a..14fe1d8 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -1,23 +1,25 @@
 import "./styles.css";
 
+import { Link } from "react-router-dom";
+
 const Navbar = ({ className, onClick, handleClose }) => {
   return (
     <nav className={`navbar ${className ? className : ""}`}>
       <ul className="navbarList">
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="/">
             Home
-          </a>
+          </Link>
         </li>
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="about">
             About
-          </a>
+          </Link>
         </li>
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="character">
             Hanzo Character Maker
-          </a>
+          </Link>
         </li>
       </ul>
     </nav>
diff --git a/src/index.js b/src/index.js
index cdca195..30ba593 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,18 +1,22 @@
 import "./index.css";
+import "./app.css";
 
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
-import App from "./App";
+import Root from "./pages/Root";
 import reportWebVitals from "./reportWebVitals";
 import { GlobalContextProvider } from "./contexts/GlobalContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <GlobalContextProvider>
-      <App />
-    </GlobalContextProvider>
+    <BrowserRouter>
+      <GlobalContextProvider>
+        <Root />
+      </GlobalContextProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
 
diff --git a/src/layouts/BasicLayout/index.js b/src/layouts/BasicLayout/index.js
new file mode 100644
index 0000000..78bfeb1
--- /dev/null
+++ b/src/layouts/BasicLayout/index.js
@@ -0,0 +1,20 @@
+import "./styles.css";
+
+import { Outlet } from "react-router-dom";
+
+import Footer from "../Footer";
+import Header from "../Header";
+
+const BasicLayout = () => {
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default BasicLayout;
diff --git a/src/layouts/BasicLayout/styles.css b/src/layouts/BasicLayout/styles.css
new file mode 100644
index 0000000..800039e
--- /dev/null
+++ b/src/layouts/BasicLayout/styles.css
@@ -0,0 +1 @@
+.main {}
\ No newline at end of file
diff --git a/src/layouts/Footer/index.js b/src/layouts/Footer/index.js
index 66c2e7e..d8e9245 100644
--- a/src/layouts/Footer/index.js
+++ b/src/layouts/Footer/index.js
@@ -1,7 +1,7 @@
-import './styles.css';
+import "./styles.css";
 
 const Footer = () => {
-  return <div className="footer"></div>;
+  return <footer className="footer"></footer>;
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
new file mode 100644
index 0000000..1d0de63
--- /dev/null
+++ b/src/pages/About/index.js
@@ -0,0 +1,11 @@
+import "./styles.css";
+
+import BasicLayout from "../../layouts/BasicLayout";
+import Footer from "../../layouts/Footer";
+import Header from "../../layouts/Header";
+
+const About = () => {
+  return <div className="about">ABOUT</div>;
+};
+
+export default About;
diff --git a/src/pages/About/styles.css b/src/pages/About/styles.css
new file mode 100644
index 0000000..f3b45c6
--- /dev/null
+++ b/src/pages/About/styles.css
@@ -0,0 +1 @@
+.about {}
\ No newline at end of file
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..d0d2548
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const Character = () => {
+  return <div className="character">character</div>;
+};
+
+export default Character;
diff --git a/src/pages/Character/styles.css b/src/pages/Character/styles.css
new file mode 100644
index 0000000..9b75472
--- /dev/null
+++ b/src/pages/Character/styles.css
@@ -0,0 +1 @@
+.character {}
\ No newline at end of file
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index 6e9df12..4b48505 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -1,7 +1,7 @@
-import './styles.css';
+import "./styles.css";
 
 const Home = () => {
-  return <div className="home"></div>;
+  return <div className="home">home</div>;
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Root/index.js b/src/pages/Root/index.js
new file mode 100644
index 0000000..9c02bfb
--- /dev/null
+++ b/src/pages/Root/index.js
@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+
+import About from "../About";
+import BasicLayout from "../../layouts/BasicLayout";
+import Character from "../Character";
+import Home from "../Home";
+
+const Root = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<BasicLayout />}>
+        <Route index element={<Home />} />
+        <Route path="about" element={<About />} />
+        <Route path="character" element={<Character />} />
+        <Route path="*" element={<>ERROR 404</>} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default Root;