diff --git a/css/styles.css b/css/styles.css
index 8b13789..d663551 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,59 @@
+*{
+    text-align: center;
+    font-family: 'Inconsolata', monospace;
+}
 
+.nav{
+    margin-bottom: 0;
+}
+
+.nav-link{
+    margin: 1%;
+    padding: 0;
+}
+
+
+.xl-img{
+    margin-bottom: 5%;
+}
+
+.bg-img{
+    background-image: url('/img/milkbg.jpg');
+    background-repeat: no-repeat;
+    height:50vh;
+    background-position:center center;
+}
+
+
+.transparent{
+    background: rgba(0,0,0,.5);
+    margin-top: 10vh;
+    padding: 3%;
+    width: 30%;
+    margin-left:35%;
+}
+
+
+.about-us{
+    text-align: left;
+}
+
+
+.bg-lightgray{
+    background-color:lightgrey;
+    display: inline;
+    float:left;
+    margin: 0;
+}
+
+.cookie-monster{
+    background-image: url('/img/cmonster.png');
+    
+    
+}
+
+.footer{
+    color: white;
+    background-color:#28b3d6;
+    font-size: 1em;
+}
diff --git a/index.html b/index.html
index e2bedec..b3aa239 100644
--- a/index.html
+++ b/index.html
@@ -2,45 +2,107 @@
 <html>
 <head>
   <title>Cookie Store</title>
+
+  <!--Meta Tags-->
+  <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <!--Bootstrap CSS link-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  
+  <!--CSS link-->
+  <link href="css/styles.css" rel='stylesheet'> 
+
+  <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=Inconsolata&display=swap" rel="stylesheet">
 </head>
 <body>
 
+  <nav class="nav bg-dark text-blue container-fluid">
+    <a class="nav-link" href="#">index.html</a>
+    <a class="nav-link" href="#">index1.html</a>
+    <a class="nav-link" href="#">index2.html</a>
+    <a class="nav-link" href="#">index3.html</a>
+    <a class="nav-link" href="#">index4.html</a>
+    <a class="nav-link" href="#">index5.html</a>
+  </nav>
+
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-12 bg-img">
+      <div class="transparent text-white">
+        <h1 class="cookies">Cookie Store</h1>
+        <p class="cookies">Buy our awesome cookies. All proceeds go to charity!</p>
+      </div>        
+    </div>
+  </div>
+</div>
+
+  <h2>The Cookies</h2>
 
-<h1>Cookie Store</h1>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-lg-3 col-xl-9 col-md-12 xl">
+        <h3 class="col-xl-9">Thin Mint Cookies<span class="badge badge-secondary badge-danger">NEW</span></h3>
+        <p class="col-xl-9">Tasty mint chocolate cookies</p>
+        <img src="img/mint.png"class="offset-xl-9 xl-img rounded-circle img-fluid">
+      </div>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
 
-<h2>The Cookies</h2>
+      <div class="col-lg-3 col-xl-9 col-md-12">
+        <h3 class="offset-xl-9 ">Peanut Butter Cookies</h3>
+        <p class="offset-xl-9 ">Yummy peanut buttery goodness!</p>
+        <img src="img/peanut.png" class="rounded-circle img-fluid">
+      </div>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+      <div class="col-lg-3 col-xl-9 col-md-12">
+        <h3 class="col-xl-9">Short Bread Cookies</h3>
+        <p class="col-xl-9">Santa's favorite classic.</p>
+        <img src="img/shortbread.png "class="offset-xl-9 rounded-circle img-fluid">
+      </div>
+      
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+      <div class="col-lg-3 col-xl-9 col-md-12">
+        <h3 class="offset-xl-9  ">Smore's Cookies</h3>
+        <p class="offset-xl-9 ">Camp fire favorite!</p>
+        <img src="img/smores.png"class="rounded-circle img-fluid">
+      </div>
+     
+    </div>
+  </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+  
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-lg-3 col-sm-6 center-block bg-lightgray">
+        <img src="img/cmonster.png" >
+      </div>
+       <div class="col-lg-9 col-sm-6  bg-lightgray about-us">
+        <h2>About us</h2>
+        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="container-fluid footer">
+    <h2>Contact us</h2>
+    <div>
+      100 Broadway Avenue,<br>
+      New York, NY 10001 <br>
+      (212) 555-1234
+  </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>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
 </div>
 
 </body>
