diff --git a/css/styles.css b/css/styles.css
index 8b13789..37ff33d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,53 @@
+*{
+    font-family:'Gluten';
+}
+
+nav{
+    background-color: rgb(79, 75, 75);
+}
+
+.title{
+    font-size: 60px;
+}
+
+#banner {
+    background-image: url("../img/milkbg.jpg");
+    background-size: cover;
+    background-position: top;
+    height: 400px;
+    width: 100%;
+    margin: 0 auto;
+}
+  
+#banner .content  {
+    background-color: rgb(0,0,0,0.50);
+    text-align: center;
+    color: white;
+    position: relative;
+    top: 60px;
+    width: 400px;
+    padding:20px;
+    border-radius: 5px ;
+    margin: 0 auto;
+}
+
+main{
+    padding-top: 20px;
+    padding: 20px;
+}
+
+.about{
+    padding-top: 20px;
+    padding: 20px;
+    background-color: lightgray;
+}
+.cookie{
+    position: relative;
+    bottom: 20px;
+}
+footer{
+    background-color: rgb(27, 112, 173);
+    padding-top: 20px;
+    padding: 20px;
+}
 
diff --git a/index.html b/index.html
index e2bedec..388aa91 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,104 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Cookie Store</title>
+  <link rel="stylesheet" href="css/styles.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Gluten&display=swap" rel="stylesheet">
 </head>
-<body>
-
 
-<h1>Cookie Store</h1>
+<body>
+  <nav>
+    <a href="index.html">index.html</a>|
+    <a href="index1.html">index1.html</a>|
+    <a href="index2.html">index2.html</a>|
+    <a href="index3.html">index3.html</a>|
+    <a href="index4.html">index4.html</a>|
+    <a href="index5.html">index5.html</a>
+  </nav>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+  <div id="banner">
+    <div class="content">
+      <h1><span class="title">Cookie Store</span></h1>
+      <p class="lead">Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
+  </div>
 
-<h2>The Cookies</h2>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+  <main>
+    <h2 class="text-center">The Cookies</h2>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+    <div class="row">
+      <div class="col-md-4 offset-md-4 text-center">
+        <h3>Thin Mint Cookies <span class="badge badge-danger">NEW</span></h3>
+        <p>Tasty mint chocolate cookies</p>
+      </div>
+      <div class="col-md-4 text-center">
+        <img class='img-fluid rounded-circle' src="img/mint.png">
+      </div>
+    </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+    <div class="row">
+      <div class="col-md-4 order-md-2 text-center">
+        <h3>Peanut Butter Cookies</h3>
+        <p>Yummy peanut buttery goodness!</p>
+      </div>
+      <div class="col-md-4 order-md-1 text-center">
+        <img class='img-fluid rounded-circle' src="img/peanut.png">
+      </div>
+    </div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+    <div class="row">
+      <div class="col-md-4 offset-md-4 text-center">
+        <h3>Short Bread Cookies</h3>
+        <p>Santa's favorite classic.</p>
+      </div>
+      <div class="col-md-4 text-center">
+        <img class='img-fluid rounded-circle' src="img/shortbread.png">
+      </div>
+    </div>
 
-<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 class="row">
+      <div class="col-md-4 order-md-2 text-center">
+        <h3>Smore's Cookies</h3>
+        <p>Camp fire favorite!</p>
+      </div>
+      <div class="col-md-4 order-md-1 text-center">
+        <img class='img-fluid rounded-circle' src="img/smores.png">
+      </div>
+    </div>
+  </main>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
-</div>
+  <div class="about">
+    <h2 class="text-center">About us</h2>
+    <div class="row">
+      <div class="col-2">
+        <img class='img-fluid' src="img/cmonster.png" alt="">
+      </div>
+      <div class="col-10">
+        <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>
+  </div>
+  <footer class='text-center text-white'>
+    <h2>Contact us</h2>
+    <div>
+      100 Broadway Avenue,<br>
+      New York, NY 10001 <br>
+      (212) 555-1234
+    </div>
+  </footer>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
