diff --git a/css/styles.css b/css/styles.css
index 8b13789..4ca1efc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,50 @@
+body{
+  /*background-color: green;*/
+  /*background-image: url(../img/milkbg.jpg);*/
+  /*style="background-image: url(../img/milkbg.jpg);"*/
+}
 
+#bg-image{
+  background-image: url(../img/milkbg.jpg);
+  background-repeat: no-repeat;
+  height: 480px;
+  background-size: cover;
+  background-position:center;
+  /*content: url(../img/milkbg.jpg);*/
+}
+
+#main-title{
+  background-color: rgba(0,0,0,0.6);
+  width: 350px;
+  height: 200px;
+  color: white;
+  padding:35px;
+
+  /*vertical align*/
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#about{
+  background-color: #ddd;
+  height:250px;
+  padding: 1px;
+  margin-top: 20px;
+}
+#about img{
+  float:left;
+  /*margin-right: 20px;*/
+  padding:25px;
+}
+#about div{
+  margin:25px;
+}
+#about h2{
+  margin: 0, auto;
+}
+#contact{
+  color:white;
+  background-color: rgb(65, 161, 207);
+  padding: 20px;
+}
diff --git a/index.html b/index.html
index e2bedec..1453a46 100644
--- a/index.html
+++ b/index.html
@@ -2,46 +2,94 @@
 <html>
 <head>
   <title>Cookie Store</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
 
+<div class="row">
+  <div class="col-lg-12" align="center" id="bg-image">
 
-<h1>Cookie Store</h1>
+    <div class="" id="main-title">
+      <h1>Cookie Store</h1>
+      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
 
-<p>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">
+<div class="row">
+  <div class="col-md-12" align="center">
+      <h2>The Cookies</h2>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-6" align="right">
+    <h3>Thin Mint Cookies</h3>
+    <p>Tasty mint chocolate cookies</p>
+  </div>
+  <div class="col-md-6">
+    <img src="img/mint.png" class="img-circle">
+  </div>
+</div>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+<div class="row">
+  <div class="col-md-6 col-md-push-6">
+    <h3>Peanut Butter Cookies</h3>
+    <p>Yummy peanut buttery goodness!</p>
+  </div>
+  <div class="col-md-6 col-md-pull-6" align="right">
+    <img src="img/peanut.png" class="img-circle">
+  </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-6" align="right">
+    <h3>Short Bread Cookies</h3>
+    <p>Santa's favorite classic.</p>
+  </div>
+  <div class="col-md-6" align="">
+    <img src="img/shortbread.png" class="img-circle">
+  </div>
+</div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+<div class="row">
+  <div class="col-md-6 col-md-push-6" align="">
+    <h3>Smore's Cookies</h3>
+    <p>Camp fire favorite!</p>
+  </div>
+  <div class="col-md-6 col-md-pull-6" align="right">
+    <img src="img/smores.png" class="img-circle">
+  </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-lg-12"  id="about">
+    <h2 align="center">About us</h2>
+    <img src="img/cmonster.png" alt="cookie monster" height="170px">
+    <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>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
+<div class="row" >
+  <div class="col-lg-12" align="center" id="contact">
+    <h2>Contact us</h2>
+    <div>
+      100 Broadway Avenue,<br>
+      New York, NY 10001 <br>
+      (212) 555-1234
+    </div>
+  </div>
 </div>
 
+
 </body>
 </html>
