diff --git a/css/styles.css b/css/styles.css
index 8b13789..aa629a6 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,21 @@
+.jumbotron{
+    background-image: url(/Users/jackie/ctp-project/bootstrap-lab/img/milkbg.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: white;
+    text-align: center;
+    height: 300px;
+    margin: 20px;
+}
 
+.about-us{
+    background-color: gray;
+}
+
+.abt-us-div {
+   width: 50%;
+}
+.contact-us{
+    background-color: skyblue;
+    color: white;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..13e6776 100644
--- a/index.html
+++ b/index.html
@@ -2,46 +2,122 @@
 <html>
 <head>
   <title>Cookie Store</title>
+  <link rel="stylesheet"  type ="text/css" href="css/styles.css" >
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 </head>
 <body>
 
 
-<h1>Cookie Store</h1>
+<!--
+  <div class="jumbotron jumbotron-fluid">
+    <div class="container">
+      <div class="text-center">
+        <h1 class="display-4">Cookie Store</h1>
+        <p class="lead" >Buy our awesome cookies. All proceeds go to charity!</p>
+      </div>
+    </div>
+  </div>
+-->
+<div class="jumbotron text-center container">
+  <h1 class="display-4">Cookie Store</h1>
+  <p class="lead">Buy our awesome cookies. All proceeds go to charity!</p>
+</div>
+
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+<div class="container-fluid">
+  <div class="row">
 
-<h2>The Cookies</h2>
+    <div class="col-sm">
+      <h2 class="text-center">The Cookies</h2>
+    </div>
+  </div>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+  <div class="row">
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+    <div class="col-lg-3"> <!-- if we do -lg-3 it will take 3 units of space-->
+      <h3>Thin Mint Cookies</h3>
+      <p>Tasty mint chocolate cookies</p>
+      <img src="img/mint.png" class="img-fluid rounded-circle"> <!-- img-fluid allows us to have the image correctly resize based on screen-->
+    </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+    <div class="col-lg-3">
+      <h3>Peanut Butter Cookies</h3>
+      <p>Yummy peanut buttery goodness!</p>
+      <img src="img/peanut.png" class="img-fluid rounded-circle"">
+    </div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+    <div class="col-lg-3">
+      <h3>Short Bread Cookies</h3>
+      <p>Santa's favorite classic.</p>
+      <img src="img/shortbread.png" class="img-fluid rounded-circle"">
+    </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="col-lg-3">
+      <h3>Smore's Cookies</h3>
+      <p>Camp fire favorite!</p>
+      <img src="img/smores.png" class="img-fluid rounded-circle"">
+    </div>
+  
+  </div>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
 </div>
 
+
+
+
+
+<br>
+<br>
+<!--
+<div class="text-center about-us">
+  <h2 >About us</h2>
+  <div>
+
+    <div class="abt-us-div">
+      <img src="img/cmonster.png"/>
+    </div>
+
+    <div class="abt-us-div">
+  
+  </div>
+
+</div>
+</div>
+-->
+<div class="container about-us">
+  <div class="row">
+    <div class="col-sm">
+      <h2 class="text-center">About Us</h2>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-lg-3">
+      <img src="img/cmonster.png"/>
+    </div>
+    <div class="col-sm">
+      <p>
+        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.
+      </p>
+    </div>
+  </div>
+</div>
+
+<footer class="text-center contact-us container">
+  <h2>Contact us</h2>
+  <div>
+    100 Broadway Avenue,<br>
+    New York, NY 10001 <br>
+    (212) 555-1234
+  </div>
+</footer>
+
+
+
 </body>
 </html>
