diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..b6eaa35
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,40 @@
+.App {
+  min-height: 100vh;
+  background-color: rgb(211, 254, 255);
+  font-family: 'Times New Roman', Times, serif;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+header {
+  text-align: center;
+  background-color: rgb(180, 255, 214);
+  color: black;
+  font-size:x-large;
+  margin: none;
+  border-radius: none;
+  padding: 10%;
+}
+
+button {
+  color: black;
+  padding: 20px 60px;
+  text-decoration: none;
+  font-size: large;
+  border: none;
+  margin: 5%;
+  background-color: rgb(183,255,207);
+}
+
+button:hover {
+  background-color: rgb(0,141,141);
+  color: white;
+}
+
+.Topright {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  font-size:18px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index c0dc8e3..661ff21 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Registration from "./Pages/LoginPage/LoginPage";
 import Home from "./Pages/HomePage/HomePage"
+import Product from "./Pages/ProductPage/ProductPage"
 import {
   BrowserRouter as Router,
   Switch,
@@ -17,11 +18,17 @@ function App() {
           <Link to="/">Home</Link>
           &nbsp;
           <Link to="/registration">Register</Link>
-          </nav>
+          &nbsp;
+          <Link to="/product">Product</Link>
+        </nav>
+
         <Switch>
           <Route path="/registration">
             <Registration />
           </Route>
+          <Route path="/product">
+            <Product />
+          </Route>
           <Route path="/">
             <Home />
           </Route>
diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
new file mode 100644
index 0000000..57a9431
--- /dev/null
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -0,0 +1,45 @@
+.App {
+    min-height: 100vh;
+    background-color: rgb(211, 254, 255);
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  header {
+    text-align: left;
+    background-color:aqua;
+    color: black;
+    font-size:x-large;
+    margin: none;
+    border-radius: none;
+    padding: 10%;
+  }
+
+  button {
+    color: black;
+    padding: 20px 60px;
+    text-decoration: none;
+    font-size: large;
+    border: none;
+    margin: 5%;
+    background-color: rgb(183,255,207);
+  }
+
+  button:hover {
+    background-color: rgb(0,141,141);
+    color: white;
+  }
+
+  h2 {
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+    background-color: rgb(184, 227, 240);
+    color: black;
+    font-size:large;
+    margin: none;
+    border-radius: none;
+    padding: 1%;
+  }
+
diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
new file mode 100644
index 0000000..acb5048
--- /dev/null
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -0,0 +1,14 @@
+import "./ProductPage.css"
+
+function Product(){
+    return(
+            <div>
+                <div className = "App">
+                    <header><b>PRODUCT NAME HERE</b></header>
+                    <button>Add to Cart</button>
+                </div>
+            </div>
+    );
+}
+
+export default Product;
\ No newline at end of file