diff --git a/front-end/package.json b/front-end/package.json
index 467cf33..4eb321f 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/front-end/src/App.js b/front-end/src/App.js
index 3784575..1cccf5a 100644
--- a/front-end/src/App.js
+++ b/front-end/src/App.js
@@ -1,25 +1,34 @@
-import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Login from './screens/Login';
+import Home from './screens/Home';
+import Registration from './screens/Registration';
+import Accessories from './screens/Accessories';
+import All_Items from './screens/All_Items';
+import Coats_Jackets from './screens/Coats_Jackets';
+import Pants from './screens/Pants';
+import Shirt from './screens/Shirts';
+import Shoes from './screens/Shoes';
+import Skirts_Dresses from './screens/Skirts_Dresses';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Login/>}> </Route>
+        <Route path="/home" element={<Home/>} />
+        <Route path="/register" element={<Registration/>} />
+        <Route path="/accessories" element={<Accessories/>} />
+        <Route path="/all-items" element={<All_Items/>} />
+        <Route path="/coats-jackets" element={<Coats_Jackets/>} />
+        <Route path="/pants" element={<Pants/>} />
+        <Route path="/shirt" element={<Shirt/>} />
+        <Route path="/shoes" element={<Shoes/>} />
+        <Route path="/skirts-dresses" element={<Skirts_Dresses/>} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 
 export default App;
+//https://www.w3schools.com/react/react_router.asp
\ No newline at end of file
diff --git a/front-end/src/components/OverlayMenu.js b/front-end/src/components/OverlayMenu.js
index 270212a..37ad446 100644
--- a/front-end/src/components/OverlayMenu.js
+++ b/front-end/src/components/OverlayMenu.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './OverlayMenu.css';
-
+import { Link } from 'react-router-dom';
 const OverlayMenu = () => {
     const [isOpen, setIsOpen] = useState(false); // State to manage the menu visibility
 
@@ -17,12 +17,18 @@ const OverlayMenu = () => {
                 <h2>Wardrobe Wizard</h2>
                 <nav>
                     <ul>
-                        <li><a href="/home">Home</a></li>
+                        {/* <li><a href="/home">Home</a></li>
                         <li><a href="/view-closet">View Closet</a></li>
                         <li><a href="/add-item">Add Item</a></li>
                         <li><a href="/outfit-archive">Outfit Archive</a></li>
                         <li><a href="/generator">Generator</a></li>
-                        <li><a href="/logout">Logout</a></li>
+                        <li><a href="/">Logout</a></li> */}
+                        <li><Link to="/home">Home</Link></li>
+                        <li><Link to="/view-closet">View Closet</Link></li>
+                        <li><Link to="/add-item">Add Item</Link></li>
+                        <li><Link to="/outfit-archive">Outfit Archive</Link></li>
+                        <li><Link to="/generator">Generator</Link></li>
+                        <li><Link to="/">Logout</Link></li>
                     </ul>
                 </nav>
             </div>
diff --git a/front-end/src/screens/Accessories.js b/front-end/src/screens/Accessories.js
index c78402f..5d3973d 100644
--- a/front-end/src/screens/Accessories.js
+++ b/front-end/src/screens/Accessories.js
@@ -17,7 +17,7 @@ const Accessories = () => {
             <OverlayMenu />
             <header className='Accessories-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Accessories</h1>
+                <h3>Accessories</h3>
             </header>
             <div className="Accessories-list">
                 {Accessories.map((Accessorie, index) => (
diff --git a/front-end/src/screens/All_Items.js b/front-end/src/screens/All_Items.js
index 384fb83..f2d9d5a 100644
--- a/front-end/src/screens/All_Items.js
+++ b/front-end/src/screens/All_Items.js
@@ -17,7 +17,7 @@ const All_Items = () => {
             <OverlayMenu />
             <header className='All_Items-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>All_Items</h1>
+                <h3>All Items</h3>
             </header>
             <div className="All_Items-list">
                 {All_Items.map((All_Item, index) => (
diff --git a/front-end/src/screens/Coats_Jackets.js b/front-end/src/screens/Coats_Jackets.js
index 013a1c0..7abc9f9 100644
--- a/front-end/src/screens/Coats_Jackets.js
+++ b/front-end/src/screens/Coats_Jackets.js
@@ -17,7 +17,7 @@ const Coats_Jackets = () => {
             <OverlayMenu />
             <header className='Coats_Jackets-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Coats/Jackets</h1>
+                <h3>Coats/Jackets</h3>
             </header>
             <div className="Coats_Jackets-list">
                 {Coats_Jackets.map((Coat_Jacket, index) => (
diff --git a/front-end/src/screens/Home.js b/front-end/src/screens/Home.js
index 425cc97..ffbb4a3 100644
--- a/front-end/src/screens/Home.js
+++ b/front-end/src/screens/Home.js
@@ -1,16 +1,20 @@
 import '../styles/Home.css'
+import OverlayMenu from '../components/OverlayMenu';
+import { Link } from 'react-router-dom';
+
 function Home(){
     return(
         <div className="Home">
+            <OverlayMenu />
             <div className='banner'>
                 <h1>WARDROBE WIZARD</h1>
                 <h3>Home Page</h3>
             </div>
             <div className="homeList"> 
-                <h3>View Closet</h3> 
-                <h3>View Closet</h3>   
-                <h3>Add Item</h3>  
-                <h3>Generator Outfit</h3>  
+                <h3><Link to="/home">View Closet</Link></h3>   
+                <h3><Link to="/view-closet">Add Item</Link></h3>  
+                <h3><Link to="/outfit-archive">Outfit Archive</Link></h3>  
+                <h3><Link to="/generator">Generator Outfit</Link></h3>  
             </div>
         </div>
     )
diff --git a/front-end/src/screens/Pants.js b/front-end/src/screens/Pants.js
index a1a9bb6..5afc48c 100644
--- a/front-end/src/screens/Pants.js
+++ b/front-end/src/screens/Pants.js
@@ -17,7 +17,7 @@ const Pants = () => {
             <OverlayMenu />
             <header className='Pants-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Pants</h1>
+                <h3>Pants</h3>
             </header>
             <div className="Pants-list">
                 {Pants.map((Pant, index) => (
diff --git a/front-end/src/screens/Shirts.js b/front-end/src/screens/Shirts.js
index af1016d..047211e 100644
--- a/front-end/src/screens/Shirts.js
+++ b/front-end/src/screens/Shirts.js
@@ -17,7 +17,7 @@ const Shirt = () => {
             <OverlayMenu />
             <header className='Shirt-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Shirts</h1>
+                <h3>Shirts</h3>
             </header>
             <div className="Shirt-list">
                 {shirts.map((shirt, index) => (
diff --git a/front-end/src/screens/Shoes.js b/front-end/src/screens/Shoes.js
index fd2fb33..a2ba3fa 100644
--- a/front-end/src/screens/Shoes.js
+++ b/front-end/src/screens/Shoes.js
@@ -17,7 +17,7 @@ const Shoes = () => {
             <OverlayMenu />
             <header className='Shoes-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Shoes</h1>
+                <h3>Shoes</h3>
             </header>
             <div className="Shoes-list">
                 {Shoes.map((Shoe, index) => (
diff --git a/front-end/src/screens/Skirts_Dresses.js b/front-end/src/screens/Skirts_Dresses.js
index 64e208e..75eaad6 100644
--- a/front-end/src/screens/Skirts_Dresses.js
+++ b/front-end/src/screens/Skirts_Dresses.js
@@ -17,7 +17,7 @@ const Skirts_Dresses = () => {
             <OverlayMenu />
             <header className='Skirts_Dresses-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h1>Skirts/Dresses</h1>
+                <h3>Skirts/Dresses</h3>
             </header>
             <div className="Skirts_Dresses-list">
                 {Skirts_Dresses.map((Skirt_Dresse, index) => (
diff --git a/front-end/src/styles/Accessories.css b/front-end/src/styles/Accessories.css
index e068537..d75a851 100644
--- a/front-end/src/styles/Accessories.css
+++ b/front-end/src/styles/Accessories.css
@@ -7,7 +7,7 @@
     text-align: center;
 }
 
-.Accessories-banner h1, .Accessories-banner h2 {
+.Accessories-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
     margin-left: 2em;
@@ -15,7 +15,7 @@
     font-size: 27px;
 }
 
-.Accessories-banner h2 {
+.Accessories-banner h3, .Accessories-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 }
diff --git a/front-end/src/styles/All_Items.css b/front-end/src/styles/All_Items.css
index ce19a73..aaa2514 100644
--- a/front-end/src/styles/All_Items.css
+++ b/front-end/src/styles/All_Items.css
@@ -7,7 +7,7 @@
     text-align: center;
 }
 
-.All_Items-banner h1, .All_Items-banner h2 {
+.All_Items-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
     margin-left: 2em;
@@ -15,7 +15,7 @@
     font-size: 27px;
 }
 
-.All_Items-banner h2 {
+.All_Items-banner h3, .All_Items-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 }
diff --git a/front-end/src/styles/Coats_Jackets.css b/front-end/src/styles/Coats_Jackets.css
index 55417f6..97fb0a0 100644
--- a/front-end/src/styles/Coats_Jackets.css
+++ b/front-end/src/styles/Coats_Jackets.css
@@ -7,7 +7,7 @@
     text-align: center;
 }
 
-.Coats_Jackets-banner h1, .Coats_Jackets-banner h2 {
+.Coats_Jackets-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
     margin-left: 2em;
@@ -15,7 +15,7 @@
     font-size: 27px;
 }
 
-.Coats_Jackets-banner h2 {
+.Coats_Jackets-banner h3,  .Coats_Jackets-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 }
diff --git a/front-end/src/styles/Home.css b/front-end/src/styles/Home.css
new file mode 100644
index 0000000..1d939e1
--- /dev/null
+++ b/front-end/src/styles/Home.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IM+Fell+French+Canon+SC&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:wght@100..900&display=swap');
+
+.banner {
+    background-color: #f1f1f1;
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.banner h1{
+    font-family: "IM Fell French Canon SC", serif;
+    margin: 0;
+    margin-left: 2em;
+    text-align: left;
+    font-size: 27px;
+}
+
+.banner h3 {
+    font-family: 'Cormorant Infant', serif;
+    font-weight: 300;
+}
+
+.homeList {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font-family: "Inria Serif", serif;
+    font-weight: 700;
+    font-style: normal;
+}
+
+.homeList a{
+    text-decoration: none;
+    text-decoration: none;
+    color: black;
+}
+
diff --git a/front-end/src/styles/Login.css b/front-end/src/styles/Login.css
new file mode 100644
index 0000000..2f03f2b
--- /dev/null
+++ b/front-end/src/styles/Login.css
@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IM+Fell+French+Canon+SC&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:wght@100..900&display=swap');
+
+.banner{
+    background-color: #f1f1f1;
+    padding: 1.5rem;
+}
+
+.banner h1 {
+    font-family: "IM Fell French Canon SC", serif;
+    font-weight: 400;
+    margin: 0;
+    text-align: center;
+}
+
+.banner h3{
+    font-family: 'Cormorant Infant', serif;
+    font-weight: 300;
+    text-align: center;
+}
+
+.login{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}  
+
+.login h2 {
+    font-family: "Inria Serif", serif;
+    font-weight: 700;
+    font-style: normal;
+}
+
+.loginForm{
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+}
+
+.loginForm input{
+    background-color: #f1f1f1;
+    border: none;
+    text-align: center;
+    border-radius: 5px;
+}
+
+.loginForm button{
+    background-color: #000000;
+    border: none;
+    color: #f1f1f1;
+    padding: .5rem;
+}
+
+.register{
+    text-align: center;
+}
+
+.register a {
+    text-decoration: none;
+    text-decoration: none;
+    font-size: xx-small;
+    font-family: "Inter", sans-serif;
+    color: #919191;
+}
diff --git a/front-end/src/styles/Pants.css b/front-end/src/styles/Pants.css
index 2162b01..8f54c5e 100644
--- a/front-end/src/styles/Pants.css
+++ b/front-end/src/styles/Pants.css
@@ -7,7 +7,7 @@
     text-align: center;
 }
 
-.Pants-banner h1, .Pants-banner h2 {
+.Pants-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
     margin-left: 2em;
@@ -15,7 +15,7 @@
     font-size: 27px;
 }
 
-.Pants-banner h2 {
+.Pants-banner h3 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 }
diff --git a/front-end/src/styles/Shirts.css b/front-end/src/styles/Shirts.css
index 6682750..71d0f40 100644
--- a/front-end/src/styles/Shirts.css
+++ b/front-end/src/styles/Shirts.css
@@ -7,12 +7,15 @@
     text-align: center;
 }
 
-.Shirt-banner h1, .Shirt-banner h2 {
+.Shirt-banner h1{
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
+    margin-left: 2em;
+    text-align: left;
+    font-size: 27px;
 }
 
-.Shirt-banner h2 {
+.Shirt-banner h3, .Shirt-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 }
diff --git a/front-end/src/styles/Shoes.css b/front-end/src/styles/Shoes.css
index 7ffae97..ffff9d8 100644
--- a/front-end/src/styles/Shoes.css
+++ b/front-end/src/styles/Shoes.css
@@ -7,17 +7,17 @@
     text-align: center;
 }
 
-.Shoes-banner h1, .Shoes-banner h2 {
+.Shoes-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
+    margin-left: 2em;
+    text-align: left;
+    font-size: 27px;
 }
 
-.Shoes-banner h2 {
+.Shoes-banner h3, .Shoes-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
-    margin-left: 2em;
-    text-align: left;
-    font-size: 27px;
 }
 
 /* Grid layout for the shirt list */
diff --git a/front-end/src/styles/Skirts_Dresses.css b/front-end/src/styles/Skirts_Dresses.css
index 09f0e7a..8f9ffa6 100644
--- a/front-end/src/styles/Skirts_Dresses.css
+++ b/front-end/src/styles/Skirts_Dresses.css
@@ -7,17 +7,19 @@
     text-align: center;
 }
 
-.Skirts_Dresses-banner h1, .Skirts_Dresses-banner h2 {
+.Skirts_Dresses-banner h1 {
     font-family: "IM Fell French Canon SC", serif;
     margin: 0;
+    margin-left: 2em;
+    text-align: left;
+    font-size: 27px;
+    
 }
 
-.Skirts_Dresses-banner h2 {
+.Skirts_Dresses-banner h3, .Skirts_Dresses-banner h1 {
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
-    margin-left: 2em;
-    text-align: left;
-    font-size: 27px;
+
 }
 
 /* Grid layout for the shirt list */