diff --git a/index.html b/index.html
index e2bedec..d5ae4be 100644
--- a/index.html
+++ b/index.html
@@ -2,46 +2,112 @@
 <html>
 <head>
   <title>Cookie Store</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  
 </head>
 <body>
 
+<div class="container"> 
+  <nav class="bg-dark" style="width:100%">
+    <a href="index.html" class="m-1 p-1" style='border-right: 2px solid #fff;'>index.html</a>
+    <a href="#" class="m-1 p-1" style='border-right: 2px solid #fff;'>index1.html</a>
+    <a href="#" class="m-1 p-1" style='border-right: 2px solid #fff;'>index2.html</a>
+    <a href="#" class="m-1 p-1" style='border-right: 2px solid #fff;'>index3.html</a>
+    <a href="#" class="m-1 p-1" style='border-right: 2px solid #fff;'>index4.html</a>
+    <a href="#" class="m-1 p-1" style='border-right: 2px solid #fff;'>index5.html</a>
+</nav>
+  <div class="d-flex flex-column justify-content-center align-items-center" style="width:100%;">
+  <div class="rounded p-5 text-light position-absolute d-flex flex-column justify-content-center align-items-center" style="background-color: rgb(0,0,0,0.6);">
+    <h1>Cookie Store</h1>
+    <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
+  <img style="width:100%; padding:0;" src="./img/milkbg.jpg" alt="">
+</div>
 
-<h1>Cookie Store</h1>
+  <div class="p-4 row  justify-content-center"><h2>The Cookies</h2></div>
+<div class="row justify-content-center align-items-center">
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+<div class="col-xl-3 row row-lg-3 row row-md-3 col justify-content-md-center">
+  <div class="p-4 row-xl-1 col row-lg-4 order-lg-1 col-md-1 row"></div>
+  <div class="p-4 row-xl-5 row-lg-4 order-lg-2  row-md-5">
+<h3>Thin Mint Cookies <span class="badge badge-danger">NEW</span></h3>
+<p>Tasty mint chocolate cookies</p>
+</div>
+<div class="p-4 row-xl-6 row-lg-4 order-lg-3 row-md-6 ">
+<img src="img/mint.png" class="row-lg-4 img-fluid rounded-circle">
+</div>
 
-<h2>The Cookies</h2>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+</div>
+
 
+<!-- //cookie 1 -->
+<div class="col-xl-3 row row-lg-3 row  row-md-3 row justify-content-md-center">
+
+<div class="p-4 row-xl-4 order-lg-1">
+  <div>
 <h3>Peanut Butter Cookies</h3>
 <p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+</div>
+</div>
+<div class="p-4 row-xl-4 order-xl-2">
+<img src="img/peanut.png" class="img-fluid rounded-circle" >
+</div>
+
+</div>
 
+<div class="col-xl-3 row  row-lg-3 row row-md-3 justify-content-md-center">
+  <div class="p-4 row-xl-4 col row-lg-4 order-lg-1 col-md-1 row"></div>
+    <div class="p-4 row-xl-4 order-lg-2 row-md-5">
 <h3>Short Bread Cookies</h3>
 <p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
 
+  </div>
+<div class="p-4 row-xl-4 order-lg-3 row-md-6">
+<img src="img/shortbread.png" class="img-fluid rounded-circle">
+</div>
+</div>
+
+<div class="col-xl-3 row row-lg-3 row row-md-3 col flex-lg-row flex-md-column justify-content-md-center align-items-md-center">
+
+  <div class="p-4 row-xl-4 order-lg-1 row-md-4">
+  <div>
 <h3>Smore's Cookies</h3>
 <p>Camp fire favorite!</p>
-<img src="img/smores.png">
-
-<h2>About us</h2>
-<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+</div>
+</div>
+<div class="p-4 row-xl-4 order-xl-2 row-md-4">
+<img src="img/smores.png" class="row-lg-4 order-lg-2 img-fluid rounded-circle">
+</div>
+</div>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
 </div>
+<div class="p-5 row-2 d-flex justify-content-center" style="background-color: #ccc;">
+  
+  <img src="./img/cmonster.png" class="col-lg-3 img-fluid">  
+  <div class="col-9">
+  <h2>About us</h2>
+  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+  </div>
+</div>
+  
+  <div class="p-5  d-flex align-items-center justify-content-center flex-column bg-info text-light" style='width:100%'>
+  <div>
+  <h2>Contact us</h2>
+  <div>
+    100 Broadway Avenue,<br>
+    New York, NY 10001 <br>
+    (212) 555-1234
+  </div>
+</div>
+  </div>
+
 
+</div>
 </body>
 </html>
