diff --git a/frontend/checkout.html b/frontend/checkout.html
index c1cc7e230d39cdedfc1dd8278d9b49f06695d612..ccdfb3dda736555faff21415ad8f2006c1ed3fbe 100644
--- a/frontend/checkout.html
+++ b/frontend/checkout.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- <link rel="stylesheet" href="style.css"> -->
-    <link rel="stylesheet" href="css/&menu.css">
+    <link rel="stylesheet" href="css/menu.css">
     <link rel="stylesheet" href="css/checkout.css">
     <link rel="stylesheet" href="css/button.css">
     <title>Checkout</title>
diff --git a/frontend/css/index.css b/frontend/css/index.css
index e557f9b07a9c7a2d0739b9691ee2057f7cf18fa6..0ed59982d6aea4cfbe12fa32a2e5e0098c5149a6 100644
--- a/frontend/css/index.css
+++ b/frontend/css/index.css
@@ -18,6 +18,31 @@
        
 }
 
+
+html {
+    scroll-behavior: smooth;
+}
+
+body{
+    overflow-y: hidden;
+}
+
+
+*::-webkit-scrollbar {
+    width: 4px;
+  }
+      
+*::-webkit-scrollbar-thumb {
+    background-color:  white;
+}
+
+
+body {
+    display: flex;
+    flex-direction: column;
+
+}
+
 nav{
     display: flex;
     flex-direction: row;
@@ -29,6 +54,13 @@ nav{
     
 }
 
+#sub {
+
+    width: 100%;
+    height: 12.5vw;
+
+}
+
 a{
     text-decoration: none;
 }
@@ -70,7 +102,6 @@ a{
 
 main {
     width: 100%;
-    height: 100vh;
     background-image:url(../img/Dym19R.jpg);
     background-position: center center;
     background-size: cover;
@@ -80,18 +111,20 @@ main {
     background-clip: border-box;
     background-color: #ccc;
 
+
 }
 
 #desc {
 
     position: relative;
-    top: 50%;
     left: 50%;
     width: 75%;
+    margin-top: 10vw;
+    margin-bottom: 10vw;
     background-color: rgba(0, 0, 0, 0.597);
     backdrop-filter: blur(20px);
     border-radius: 10px;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%);
     color: white;
 
 }
@@ -107,4 +140,68 @@ main {
     margin-bottom: 2vh;
     font-size: 2vw;
 
+}
+
+
+#prices{
+    padding-top: 5vw;
+    padding-bottom: 15vw;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    transition: 1s ease;
+}
+
+
+.box {
+
+    width: 30%;
+    height: 20%;
+    background-color: rgba(0, 0, 0, 0.597);
+    backdrop-filter: blur(20px);
+    margin-left: 10%;
+    margin-right: 10%;
+    border-radius: 20px;
+
+
+}
+
+.lititle {
+    color: white;
+    font-size: 2.5vw;
+    text-align: center;
+    margin-top: 2vh;
+}
+
+.prices {
+
+    color: white;
+    font-size: 3vw;
+    text-align: center;
+}
+
+footer {
+
+    height: 10vw;
+    width: 100%;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.597);
+    backdrop-filter: blur(20px);
+
+}
+
+img{
+    margin-top: 5vh;
+    width: 3vw;
+    height: 3vw;
+
+}
+
+footer > p {
+    color: white;
+}
+
+
+@media screen and (max-width: 600px) {
+    
 }
\ No newline at end of file
diff --git a/frontend/css/price.css b/frontend/css/price.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/index.html b/frontend/index.html
index c77ccfe702ef83ae3530f873ab45ea0e0969cde5..8be6d47851ca68ba05cca24aece704e8440f32f1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -13,12 +13,16 @@
     <nav>
             <a href="shop.html" class="fill" >SHOP</a>
             <p id="fill" class="fill">HOMEPAGE</p>
-            <a href="price.html" class="fill">PRICES</a>
+            <a href="#prices" class="fill">PRICES</a>
 
     </nav>
 
+    
+
     <main>
 
+        <div id = "sub"></div>
+
         <div id="desc">
             <p id="title">Description</p>
             <p id= "text">
@@ -31,16 +35,31 @@
         </div>
 
        
+        <div id = "prices">
+
+            <div class= "box">
+                <p class ="lititle">Shiny</p>
+                <p class="prices">4.00 CHF</p>
+            </div>
+
 
+            <div class= "box">
+                <p class ="lititle">Normal</p>
+                <p class = "prices">2.00 CHF</p>
 
+            </div>
+
+        </div>
+
+        <footer>
+            <img src="img/poke.svg" alt="">
+            <p>Copyright © Benjamin Sitbon - Leonard Beck. </br> All right reserved.</p>
+        </footer>
     </main>
     
 
-    <footer>
-        
-    </footer>
+    
 
-    <script src="js/index.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/frontend/price.html b/frontend/price.html
new file mode 100644
index 0000000000000000000000000000000000000000..0dd8d016f4471207cecab3913b8ab2a913ded1f1
--- /dev/null
+++ b/frontend/price.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="css/index.css">
+    <title>Homepage</title>
+</head>
+<body>
+
+    <nav>
+            <a href="shop.html" class="fill" >SHOP</a>
+            <p id="fill" class="fill">PRICES</p>
+            <a href="price.html" class="fill">PRICES</a>
+
+    </nav>
+
+    <main>
+
+        
+
+       
+
+
+    </main>
+    
+
+    <footer>
+        
+    </footer>
+
+    <script src="js/index.js"></script>
+
+</body>
+</html>
\ No newline at end of file