diff --git a/index.js b/index.js
index 8660968..f4a4b84 100644
--- a/index.js
+++ b/index.js
@@ -23,6 +23,32 @@ app.use(bodyParser.json());
 app.use(express.static(__dirname + "/static"));
 
 // Authentication Handlers
+
+// Check if user is authenticated and NO redirect
+function authNoRedirectHandler(req, res, next){
+    const authcookie = req.cookies.authcookie; // Get authcookie from cookie
+
+    jwt.verify(authcookie, SECRET_KEY, (err, data) =>{  // Verify authcookie
+        if(err){ // If authcookie is invalid
+            console.log(err);
+            next();
+        } else if(data.user){ // If authcookie is valid
+            req.user = data.user; // Set user to data.user
+            mysql_handler.con.query(`SELECT * FROM users WHERE id = "${req.user}"`, (err, result) => { // Get user from database
+                if(err) console.log(err);
+                let user = JSON.parse(JSON.stringify(result))[0]; // Parse user from database
+                // Set user to req.user
+                req.isAdmin = user.isAdmin;
+                req.username = user.username;
+                req.firstname = user.firstname;
+                req.lastname = user.lastname;
+                next(); // Continue to next handler
+            });
+        }
+    });
+}
+
+
 // Check if user is authenticated and redirect to login if not
 function authenticatedHandler(req, res, next){
     const authcookie = req.cookies.authcookie; // Get authcookie from cookie
@@ -62,32 +88,70 @@ function notAuthenticatedHandler(req, res, next){
 }
 
 // Homepage
-app.get("/", authenticatedHandler, (req, res) => { 
-    let dict = {
-        title: "Hallo",
-        isAdmin: req.isAdmin
-    }
+app.get("/", authNoRedirectHandler, (req, res) => { 
+    mysql_handler.con.query("SELECT * FROM products", function(err, result){
+        if(err) throw err;
 
-    res.render('index', dict)
+        let dict = {
+            title: "Startseite",
+            user: req.user,
+            products: JSON.parse(JSON.stringify(result))
+        }
+        res.render('index', dict)
+    });
 });
 
 // Product Page
 app.get("/product/:productId", (req, res) => {
     let productId = req.params.productId;
-    console.log(productId);
     
-    mysql_handler.con.query(`SELECT * FROM products WHERE id=${productId}` , function(err, result){
+    mysql_handler.con.query(`SELECT s.name AS sellerName, p.name AS productName, p.description AS productDescription, p.id AS id, price,quantity, delivery_time, p.categoryId
+     FROM products AS p LEFT JOIN  sellers AS s ON p.sellerId= s.id WHERE p.id=${productId}` , function(err, result){
         if(err) throw err;
 
         let product = JSON.parse(JSON.stringify(result))[0];
-        let dict = {
-            title: "product",
-            product: product
-        }
-        res.render('product', dict)
+        
+        mysql_handler.con.query(`SELECT title, content ,rating, u.username AS name FROM reviews AS r LEFT JOIN users AS u ON r.userId = u.id WHERE productId=${productId}`,function(err,result){
+            if(err) throw err;
+            let reviews = JSON.parse(JSON.stringify(result));
+            console.log(product)
+            mysql_handler.con.query(`SELECT * FROM categories WHERE id='${product.categoryId}'`,function(err,result){
+                if(err) throw err;
+                let category = JSON.parse(JSON.stringify(result))[0];
+
+                let dict = {
+                    title: product.productName,
+                    product: product,
+                    shippingDays: 3,
+                    stockAmount: 50,
+                    productDescription: "ez",
+                    loggedIn: true,
+                    reviews: reviews,
+                    category: category,                    
+                }
+                res.render('product', dict)
+            });
+        });
+        
     });
 });
 
+// Reviews
+app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
+    let productId = req.params.productId;
+    let rating = req.body.rating;
+    let title = req.body.title;
+    let content = req.body.content;
+    
+
+    mysql_handler.con.query(`INSERT INTO reviews(title, content, rating, userId, productId)
+     VALUES('${title}', '${content}', '${rating}', (SELECT id FROM users WHERE id = ${req.user}), (SELECT id FROM products WHERE id = ${productId}))`, (err, result) => {
+        if(err) throw err;
+        res.redirect("/product/" + productId);
+    });
+
+});
+
 // Search Page
 app.get("/search", (req, res) => {
     var products = [
@@ -304,4 +368,4 @@ app.post("/auth/login", notAuthenticatedHandler, (req, res) =>{
 
 app.listen(port, () =>{ // Start server
     console.log("Listining to " + port)
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/static/auth.css b/static/css/auth.css
similarity index 100%
rename from static/auth.css
rename to static/css/auth.css
diff --git a/static/css/header.css b/static/css/header.css
new file mode 100644
index 0000000..8b1376f
--- /dev/null
+++ b/static/css/header.css
@@ -0,0 +1,92 @@
+/* UTIL */
+ .vertical-center {
+    float: left;
+    top: 50%;
+    position: relative;
+    transform: translateY(-50%);
+}
+
+body {
+    margin: 0;
+}
+
+/* BACKGROUND */
+.headerDIV > div {
+    height: 100%;
+    text-align: center;
+    display: inline-block;
+    vertical-align: top;
+}
+
+/* LOGO PART */
+.headerDIVLogo {
+    width: 20%;
+}
+.headerDIVLogo > img {
+    float: left;
+    height: 80%;
+    position: relative;
+    top: 10%;
+}
+
+/* SEARCH PART */
+.headerDIVSearch {
+    width: 60%;
+}
+.headerDIVSearch > input {
+    left: 10%;
+    width: calc(80% - 60px);
+    border-radius: 5px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    height: 20px;
+    padding: 3px 10px;
+}
+.headerDIVSearch > button {
+    width: 40px;
+    left: 10%;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    height: 30px;
+}
+
+/* BUTTON PART */
+.headerDIVButton {
+    width: 20%;
+}
+.headerDIVButton > button {
+    height: 30px;
+    float: right;
+    margin-right: 10px;
+    height: 35px;
+    border-radius: 5px;
+    border: 3px solid rgb(6, 70, 107);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    cursor: pointer;
+    color:white;
+    font-weight: bold;
+}
+
+#headerBtnLogout{
+    background-color: rgb(172, 38, 38);
+    border-color: rgb(145, 35, 35);
+}
+
+#headerBtnLogout:hover{
+    background-color: rgb(206, 50, 50);
+}
+
+
+.headerDIVButton > button:hover {
+    background-color: rgb(23, 114, 167);
+}
+
+.headerDIV {
+    width: 100%;
+    height: 65px;
+    background-color: #414854;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/static/order.css b/static/css/order.css
similarity index 70%
rename from static/order.css
rename to static/css/order.css
index cd22924..cb0959e 100644
--- a/static/order.css
+++ b/static/css/order.css
@@ -3,8 +3,15 @@
     margin-left: auto;
     margin-right: auto;
     width: 500px;
+    margin-top: 60px;
+    margin-bottom: 60px;
 }
 
+#order-info p{
+    height: 30px;
+}
+
+
 form input[type="submit"]{
     color: rgb(255, 255, 255);
     font-weight: bold;
@@ -27,4 +34,13 @@ form input[type="submit"]{
 
 h3{
     text-align: center;
+}
+
+hr{
+    width: 100%;
+    border: 0px;
+    background-color:rgba(51, 51, 51, 0.337);
+    height: 2px;
+    margin-top: 20px;
+    margin-bottom: 20px;    
 }
\ No newline at end of file
diff --git a/static/css/product.css b/static/css/product.css
new file mode 100644
index 0000000..2a697f7
--- /dev/null
+++ b/static/css/product.css
@@ -0,0 +1,238 @@
+*{
+    padding:0;
+}
+
+h1, h2{
+    margin-left: 0px;
+    text-align: left;
+    padding-bottom: 0;
+    margin-bottom: 0px;
+}
+
+.seller{
+    display: block;
+    height: 30px;
+    margin-top:10px;
+    padding: 0;
+    font-weight: bold;
+    font-size: 10pt;
+}
+
+.badge{
+    background-color: rgb(224, 224, 224);
+    color: black;
+    height: 15px;
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: 9pt;
+    display: block;
+    margin-top: -5;
+    border-radius: 5px;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: -10px;
+    border: 2px solid rgb(143, 143, 143);
+    float:left;
+}
+#content
+{
+    width: 1000px;
+    height:3000px;  
+    background-color: rgb(244, 244, 244);
+    margin:auto;
+    padding-top: 10px;
+}
+#productPicture
+{
+    width: 40%;
+    height: 400px;
+    /*background-color: rgb(85, 85, 85);*/
+    display: block;
+    float: left;
+    border-bottom: 2px solid rgb(104, 117, 151);
+}
+
+#productPicture img
+{
+    width: 90%;
+    display: block;
+}
+#info
+{
+    width: 60%;
+    height: 400px;
+    display: block;
+    float: right;
+    /*background-color: rgb(121, 170, 182);*/
+    border-bottom: 2px solid rgb(104, 117, 151);;
+}
+
+.order-button{
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    display:block;
+    float:left;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+    cursor:pointer;
+    margin-right: 30px;
+    margin-top: 10px;
+}
+
+#description
+{
+    width: 100%;
+    display: block;
+    float: left;
+    background-color: rgba(103, 187, 183, 0);
+    border-bottom: 2px solid rgb(104, 117, 151);
+}
+
+#description p,h2 {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+#newReview{
+    width: 100%;
+    display: block;
+    float: left;
+    background-color: rgba(45, 66, 94, 0);
+    padding-bottom: 20px;
+    border-bottom: 2px solid rgb(104, 117, 151);;
+}
+#reviews{
+    width: 100%;
+    height: 1600px;
+    display: block;
+    float: left;
+    background-color: rgba(39, 39, 39, 0);
+
+}
+#reviewTemplate
+{
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+}
+#reviewTemplatePicture
+{
+    width: 200px;
+    height: 200px;
+    display: block;
+    float: left;
+    background-color: rgb(85, 158, 255);
+}
+
+
+#data
+{
+    width: 100%;
+    height: 50px;
+    display: block;
+    float: left;
+    background-color: rgb(124, 142, 212);
+    
+}
+#text
+{
+    width: 100%;
+    height: 150px;
+    display: block;
+    float: left;
+    background-color: rgb(211, 196, 247);
+}
+#reviewTemplateText
+{
+    background-color: rgb(235, 196, 228);
+}
+
+form{
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 500px;
+}
+
+form label{
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+    margin-top: 20px;
+}
+
+form label p{
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0px;
+    font-weight: bold;
+    letter-spacing: 1.5px;
+}
+form label input{
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(255, 255, 255);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+}
+/* Submit button with blue background horizontal center*/
+form input[type="submit"]{
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    width: 100%;
+    display:block;
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+    cursor:pointer;
+}
+
+
+/* Hover */
+
+form label input:hover{
+    border: 2px solid rgb(1, 197, 246);
+}
+
+form label input:focus{
+    border: 2px solid rgb(1, 197, 246);
+    box-shadow: 0 0 5px #719ece62;
+}
+
+form input[type="submit"]:hover{
+    border: 2px solid rgb(7, 130, 200);
+    background-color: rgb(7, 130, 200);
+}
+
+textarea{
+    resize: vertical;
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+}
\ No newline at end of file
diff --git a/static/style.css b/static/css/style.css
similarity index 88%
rename from static/style.css
rename to static/css/style.css
index 03267ed..004bdb2 100644
--- a/static/style.css
+++ b/static/css/style.css
@@ -2,10 +2,17 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
+html,body{
+    min-height: 100% !important;
+    height: 100%;
+}
+
 h1{
     text-align: center;
 }
 
+
+
 #error-text{
     color: red;
     font-weight: bold;
diff --git a/static/images/examples.jpg b/static/images/examples.jpg
new file mode 100644
index 0000000..0c47144
Binary files /dev/null and b/static/images/examples.jpg differ
diff --git a/views/index.ejs b/views/index.ejs
index b78130d..db077e7 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,10 +1,103 @@
-
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <%- include('partials/head'); %>
+<html lang="en" style="">
+	<head>
+		<%- include('partials/head'); %>
 </head>
-<body>
-    <h1>isAdmin: <%= isAdmin %></h1>
+	<body style="">
+		<%- include('partials/header'); %>
+			<style>
+				html {
+				height: 100%;
+				overflow-x: auto;
+				overflow-y: scroll;
+				margin: 0;
+				background-color: white;
+				}
+				body {
+				min-height: 100%;
+				}
+				.grid-container {				
+				display: flex;
+				gap: 20px;
+				margin: 0 auto;
+				grid-template-columns: auto auto auto auto;
+				padding: 20px;
+				}
+				.grid-item {
+				background-color: white;
+				border: 10px;
+				border-color: rgba(111,111,111,0.2) transparent transparent;
+				padding: 20px;
+				font-size: 20px;
+				height: 320px;
+				width: 280px;
+				text-align: left;
+				
+				}
+
+				.grid-item p{
+					display:block;
+					height: 50px;
+				}
+				.middle-content {
+				background: linear-gradient(to bottom left, #313c48, white);
+				background-repeat: no-repeat;
+				width: 80%;
+				margin: auto;
+				margin-top: 50px;
+				}
+			</style>
+			<div class="middle-content">
+				<div id="headlineTop">
+					<h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2>
+				</div>
+				<div class="grid-container" >
+					<% for (let i=0; i < products.length && i <=4; i++){ %>
+					<div class="grid-item">
+						<p><%= products[i].name %></p>
+						
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
+					</div>
+					<%}%>
+				</div>
+				<div id="headlineTop">
+					<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2>
+				</div>
+				<div class="grid-container">
+					<div class="grid-item">
+					<% let randomNr = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
+					</div>
+					<div class="grid-item">
+						<% let randomNr2 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr2].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr2].id%>','_self')">
+					
+					</div>
+					<div class="grid-item">
+						<% let randomNr3 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr3].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr3].id%>','_self')">
+					
+					</div>
+					<div class="grid-item">
+						<% let randomNr4 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr4].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr4].id%>','_self')">
+					
+					</div>
+				</div>
+				<div class="grid-container" style="margin-bottom: 100px;">
+					<% for (let i=0; i < products.length && i <=4; i++){ %>
+					<div class="grid-item">
+						<%= products[i].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
+					
+					</div>
+					<%}%>
+				</div>
+			</div>
+		<%- include('partials/footer'); %>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index a3670b5..b7cdee9 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/auth.css">
+    <link rel="stylesheet" href="/css/auth.css">
 </head>
 <body>
     <h1>Login</h1>
diff --git a/views/order.ejs b/views/order.ejs
index 8b02afc..c984a4e 100644
--- a/views/order.ejs
+++ b/views/order.ejs
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/order.css">
+    <link rel="stylesheet" href="/css/order.css">
 </head>
 <body>
+    <%- include('partials/header'); %>
     <h1>Ihre Bestellung</h1>
     <p id="error-text"><%- error %></p>
 
@@ -19,10 +20,12 @@
     <!--submit button-->
     <form action="/order" method="POST">
         <input hidden type="text" name="productId" value="<%= product.id %>">
-        <input hidden type="text" name="quantity" value="<%= quantity %>">
+        <input hidden   type="text" name="quantity" value="<%= quantity %>">
         <!-- Price is calculated on backend ;) -->
 
         <input type="submit" value="Bestellen">
     </form>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/views/order_success.ejs b/views/order_success.ejs
index f90d4b8..c4328d9 100644
--- a/views/order_success.ejs
+++ b/views/order_success.ejs
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/order.css">
+    <link rel="stylesheet" href="/css/order.css">
 </head>
 <body>
     <h1 style="color:rgb(6, 170, 6)">Ihre Bestellung wurde in Auftrag gegeben!</h1>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 77b0d81..7b1df18 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -7,10 +7,11 @@
 <style type="text/css">
 	.footerDIV {
 	width: 100%;
-	height:65px;
-	position: absolute;
-	bottom:-65px;
 	background-color: #414854;
+	clear: both;
+	position: relative;
+	height: 65px;
+	margin-top: -56px;
 	}
 	/* LOGO PART */
 	.footerDIVLogo {
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
index b4135ad..58d93d6 100644
--- a/views/partials/head.ejs
+++ b/views/partials/head.ejs
@@ -3,4 +3,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Shop - <%= title %></title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="/style.css">
\ No newline at end of file
+<link rel="stylesheet" href="/css/header.css">
+<link rel="stylesheet" href="/css/style.css">
\ No newline at end of file
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index ce18438..ff22551 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,82 +1,16 @@
 <div class="headerDIV">
-    <div class="headerDIVLogo">
+    <div class="headerDIVLogo" style="cursor:pointer"onclick="window.open('/', '_self')">
         <img src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
     </div><div class="headerDIVSearch">
         <input placeholder="Suche" class="vertical-center"></input
         ><button class="vertical-center"><i class="material-icons">search</i></button>
-    </div><div class="headerDIVLogin">
-        <button class="vertical-center">Login</button>
+    </div><div class="headerDIVButton">
+        <% if(user){ %>
+        <button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button>
+            <button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button>
+        <%} else{%>
+            <button class="vertical-center" onclick="window.open('/register', '_self')">Registrieren</button>
+            <button class="vertical-center" onclick="window.open('/login', '_self')">Login</button>
+        <% } %>
     </div>
-</div>
-
-<style type="text/css">
-    /* UTIL */
-    .vertical-center {
-        float: left;
-        top: 50%;
-        position: relative;
-        transform: translateY(-50%);
-    }
-
-    body {
-        margin: 0;
-    }
-
-    /* BACKGROUND */
-    .headerDIV > div {
-        height: 100%;
-        text-align: center;
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    /* LOGO PART */
-    .headerDIVLogo {
-        width: 20%;
-    }
-    .headerDIVLogo > img {
-        float: left;
-        height: 80%;
-        position: relative;
-        top: 10%;
-    }
-
-    /* SEARCH PART */
-    .headerDIVSearch {
-        width: 60%;
-    }
-    .headerDIVSearch > input {
-        left: 10%;
-        width: calc(80% - 60px);
-        border-radius: 5px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-        height: 20px;
-        padding: 3px 10px;
-    }
-    .headerDIVSearch > button {
-        width: 40px;
-        left: 10%;
-        border-radius: 5px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        height: 30px;
-    }
-
-    /* LOGIN PART */
-    .headerDIVLogin {
-        width: 20%;
-    }
-    .headerDIVLogin > button {
-        height: 30px;
-        float: right;
-        margin-right: 10px;
-    }
-
-    .headerDIV {
-        width: 100%;
-        height: 65px;
-        background-color: #414854;
-        margin: 0;
-    }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/views/product.ejs b/views/product.ejs
index 9199fef..aa6775d 100644
--- a/views/product.ejs
+++ b/views/product.ejs
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
+    <link rel="stylesheet" href="/css/product.css">
 </head>
 
 <body>
@@ -13,156 +14,84 @@
 
         <div id="top">
             <div id="productPicture">
-                <!--BILD-->
+                <img src="/images/examples.jpg" alt="">
             </div>
             <div id="info">
-                <h1 id="title"><%= product.name %></h1>
+                <h2><%= product.productName %></h2><br>
+                <p class="badge">Nr.:<%= product.id %></p><br>
+
+                <p class="seller">Verkäufer: <%= product.sellerName%></p><br>
+
+                <p class="product-detail"><b>Preis:</b> <%= product.price %> € / Stück</h2>
+                <p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
                 <p style="word-wrap: break-word;"></p>
                 <div>
-                    <label style="margin-right: 30px; margin-left: 30px; 
-                    <% if(stockAmount > 0){%>
-                        color: green;">
-                        lieferbar in <%= shippingDays %> - <%= shippingDays + 1 %> Tagen</label>
-                        <span><input type="number" id="quantity" min="1" max="<%= stockAmount %>" style="width: 30px;" value="1" ></span>
-                        
-                        <label>/<%= stockAmount %></label>
-                    <% } else { %>
-                        color: red;">
-                        nicht lieferbar</label>
-                        <% } %>
-                
+                    <label style="margin-right: 30px; margin-left: 0px;
 
+                    <% if(product.quantity > 0){%>
+                        color: green;">
+                        Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
+                        <div style=" float:right;">
+                            <span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
+                            <label>/<%= product.quantity %></label><br>
+                            <button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>    
+                        </div>
+                    <% } else { %>
+                        color: red; font-weight:bold;">
+                        Aktuell nicht lieferbar!</label>
+                        <% } %>
                 </div>
             </div>
         </div>
 
         <div id="description">
-            <h1 style="margin-left: 30px;">Beschreibung</h1>
-            <p style="margin-left: 30px;"><%= productDescription %></p>
+            <h2>Beschreibung</h2>
+            <p><%= product.productDescription %> </p>
         </div>
         <% if(loggedIn){ %>
         <div id="newReview">
-            <h1 style="padding-left: 30px;">Bewertung</h1>
-            <textarea name="review" id="" cols="60" rows="5" style="margin-left: 30px; resize: none;"></textarea>
-            <button>Post</button>
+            <h2 style="padding-left: 30px;">Rezensionen</h2>
+            <form action="/review/create/<%= product.id %>" method="post">
+                <label for="title">
+                    <p>Titel: </p>
+                    <input type="text" name="title">
+                </label>
+
+                <label for="rating">
+                    <p>Bewertung (0-10): </p>
+                    <input type="number" name="rating" max="10" min="0">
+                </label>
+
+                <label for="content">
+                    <textarea name="content" id="" max="500" cols="30" rows="10"></textarea>
+                </label>
+                
+                <input style="width: 150px" type="submit" value="Senden">
+            </form>
         </div>
         <% } %>
         <div id="reviews">
-            <% if(reviews > 0){ %>
-        <div id="reviewTemplate">
-            <div style="width: 100%; height: 200px; display: block; float: left;">
-                <div id= data >
-                    <h3 style="padding-left: 30px; width: 100%;">187Boii  12.12.12 12:12</h3>
-                </div>
-                <div id="text" >
-                    <p style="padding-left: 30px;";">junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text </p>
-                
-                </div>
-            </div>
-            
-            
-
-        </div>
+            <% if(reviews.length > 0){ %>
+                <% for(let i = 0; i < reviews.length; i++){ %>
+                    <div id="reviewTemplate">
+                        <div style="width: 100%; display: block; float: left;">
+                            <div id= data >
+                                <h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
+                                <p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></p>
+                            </div>
+                            <div id="text" >
+                                <h3 style="padding-left: 20px; padding-right: 20px; width: 100%;"><%= reviews[i].title %></h3>
+                                <p style="padding-left: 20px; padding-right: 20px;"><%= reviews[i].content %></p>
+                            
+                            </div>
+                        </div>
+                    </div>
+        <% } %>
         <% }else{ %>
             <div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
             <% } %>
         </div>
-    </div>
-    <style>
-        *{
-            padding:0;
-        }
-        #content
-        {
-            width: 1000px;
-            height:3000px;
-            
-            background-color: rgb(59, 59, 59);
-            margin:auto;
-        }
-        #productPicture
-        {
-            width: 40%;
-            height: 400px;
-            background-color: rgb(85, 85, 85);
-            display: block;
-            float: left;
-        }
-        #info
-        {
-            width: 60%;
-            height: 400px;
-            display: block;
-            float: right;
-            background-color: rgb(121, 170, 182);
-        }
-        #description
-        {
-            width: 100%;
-            height: 250px;
-            display: block;
-            float: left;
-            background-color: rgb(103, 187, 183);
-        }
-        #title
-        {
-            margin-left: 30px;
-
-        }
-        #newReview{
-            width: 100%;
-            height: 200px;
-            display: block;
-            float: left;
-            background-color: rgb(45, 66, 94);
-
-        }
-        #reviews{
-            width: 100%;
-            height: 1600px;
-            display: block;
-            float: left;
-            background-color: rgb(39, 39, 39);
-
-        }
-        #reviewTemplate
-        {
-            width: 100%;
-            height: 200px;
-            float: left;
-        }
-        #reviewTemplatePicture
-        {
-            width: 200px;
-            height: 200px;
-            display: block;
-            float: left;
-            background-color: rgb(85, 158, 255);
-        }
-
-
-        #data
-        {
-            width: 100%;
-            height: 50px;
-            display: block;
-            float: left;
-            background-color: rgb(58, 94, 97);
-        }
-        #text
-        {
-            width: 100%;
-            height: 150px;
-            display: block;
-            float: left;
-            background-color: rgb(78, 129, 133);
-        }
-        #reviewTemplateText
-        {
-            background-color: rgb(235, 196, 228);
-        }
-
-    </style>  
+    </div> 
     <%- include('partials/footer'); %>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/register.ejs b/views/register.ejs
index 40d03ec..07d5431 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/auth.css">
+    <link rel="stylesheet" href="/css/auth.css">
 </head>
 <body>
     <h1>Register</h1>