diff --git a/css/styles.css b/css/styles.css
index 8b13789..84c1573 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,84 @@
+.milkbg-container{
+    position: relative;
+    text-align: center;
+    color: white;
+    font-weight: bolder;
+}
 
+.milk-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 300px;
+    width: 600px;
+    transform: translate(-50%, -50%);
+    border: 1px solid black;
+    /* background-color: transparent;
+    opacity: 0.8; */
+    background-color: rgba(0,0,0, 0.6);
+    border-radius: 5px;
+    font-size:22px;
+
+  }
+
+.cookie-pic {
+    border-radius: 50%;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.cookie-store-name{
+    font-size:75px;
+}
+
+.about-us {
+    background-color: lightgray;
+    font-size:30px;
+    display: inline-block;
+    text-align: center;
+}
+
+.contact-us {
+    font-family: 'Open Sans', sans-serif;;
+    font-weight: bold;
+    text-align: center;  
+    background-color: rgb(89, 186, 247);
+    color:white;
+    margin-bottom: auto;
+    height: 175px;
+    
+}
+
+.img-fluid{
+    width: 100%;
+}
+
+.cookie-store{
+    text-align: center;
+    margin:80px;
+}
+
+.the-cookies{
+    text-align: center;
+    margin: 5px;
+}
+
+
+.about-us-par{
+    text-align: left;
+    font-weight: light;
+    color: rgb(87, 85, 85);
+    font-size: 20px;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.contct-us-title{
+    padding: 10px;
+    height: 50px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 30px;
+}
+
+.address {
+    font-size:large;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..8c71b08 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,93 @@
 <!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">
 </head>
+
 <body>
+  <div class="milkbg-container">
+    <img src="img/milkbg.jpg" class="img-fluid" alt="Responsive image">
+    <div class="milk-text">
+      <div class="cookie-store">
+        <h1>
+          <div class="cookie-store-name">Cookie Store</div>
+        </h1>
+        <p>Buy our awesome cookies. All proceeds go to charity!</p>
+      </div>
+    </div>
+  </div>
+
 
+  <div class="the-cookies">
+    <h2>The Cookies</h2>
+  </div>
 
-<h1>Cookie Store</h1>
+  <div class="container">
+    <div class="row justify-content-between">
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+      <div class="col-sm-12 col-md-12 col-lg-3 justify-content-between">
+        <h3>Thin Mint Cookies</h3>
+        <p>Tasty mint chocolate cookies</p>
+        <img class="cookie-pic" src="img/mint.png">
+      </div>
 
-<h2>The Cookies</h2>
+      <div class="col-sm-12 col-md-12 col-lg-3 justify-content-between m-0 p-3">
+        <h3>Peanut Butter Cookies</h3>
+        <p>Yummy peanut buttery goodness!</p>
+        <img class="cookie-pic" src="img/peanut.png">
+      </div>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+      <div class="col-sm-12 col-md-12 col-lg-3 justify-content-between m-0 p-2">
+        <h3>Short Bread Cookies</h3>
+        <p>Santa's favorite classic.</p>
+        <img class="cookie-pic" src="img/shortbread.png">
+      </div>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+      <div class="col-sm-12 col-md-12 col-lg-3 justify-content-between m-0 p-0">
+        <h3>Smore's Cookies</h3>
+        <p>Camp fire favorite!</p>
+        <img class="cookie-pic" src="img/smores.png">
+      </div>
+    </div>
+  </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+  <div class="row about-us text-center m-0 p-2">
+    <div class="col-12 p-1">
+      <h2>About us</h2>
+    </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-3">
+      <img class="monster.pic" src="img/cmonster.png">
+    </div>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
-</div>
+    <div class="about-us-par col-9">
+      <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="contact-us">
+    <h2>
+      <div class="contct-us-title"> Contact us</div>
+    </h2>
+
+    <div class="address">
+      100 Broadway Avenue,<br>
+      New York, NY 10001 <br>
+      (212) 555-1234
+    </div>
+  </div>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
