diff --git a/css/styles.css b/css/styles.css
index 8b13789..30b04b1 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,43 @@
+* {
+  overflow-x: hidden;
+}
 
+#hero {
+  background: url("../img/milkbg.jpg") center center no-repeat;
+  background-size: cover;
+  height: 600px;
+}
+
+#hero-content {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  padding: 100px 80px;
+  border-radius: 10px;
+}
+
+#hero-content h1 {
+  font-size: 70px;
+}
+
+#hero-content p {
+  font-size: 20px;
+}
+
+#cookies {
+  padding: 40px 0;
+}
+
+#cookies img {
+  border-radius: 100%;
+}
+
+#about {
+  background-color: #f0f0f0;
+  padding: 30px 0;
+}
+
+#contact {
+  background-color: #1e90ff;
+  color: #fff;
+  padding: 40px 0;
+}
diff --git a/index.html b/index.html
index e2bedec..fc3cb3c 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,73 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Cookie Store</title>
-</head>
-<body>
-
-
-<h1>Cookie Store</h1>
-
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+  <link rel="stylesheet" href="css/styles.css">
 
-<h2>The Cookies</h2>
-
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
-
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+  <!-- Bootstrap 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>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+<body>
+  <div class="container-fluid px-0">
+    <section id="hero" class="row align-items-center text-center justify-content-center">
+      <div id="hero-content" class="col-xs-4 col-lg-5">
+        <h1 class="">Cookie Store</h1>
+        <p>Buy our awesome cookies. All proceeds go to charity!</p>
+      </div>
+    </section>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+    <section id="cookies" class="text-center">
+      <h2>The Cookies</h2>
+      <div class="row justify-content-center">
+        <div class="col-sm-12 col-lg-3">
+          <h3>Thin Mint Cookies</h3>
+          <p>Tasty mint chocolate cookies</p>
+          <img src="img/mint.png">
+        </div>
+        <div class="col-sm-12 col-lg-3">
+          <h3>Peanut Butter Cookies</h3>
+          <p>Yummy peanut buttery goodness!</p>
+          <img src="img/peanut.png">
+        </div>
+        <div class="col-sm-12 col-lg-3">
+          <h3>Short Bread Cookies</h3>
+          <p>Santa's favorite classic.</p>
+          <img src="img/shortbread.png">
+        </div>
+        <div class="col-sm-12 col-lg-3">
+          <h3>Smore's Cookies</h3>
+          <p>Camp fire favorite!</p>
+          <img src="img/smores.png">
+        </div>
+      </div>
+    </section>
 
-<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>
+    <section id="about" class="row justify-content-center">
+      <img src="img/cmonster.png">
+      <div class="col-xs-8 col-lg-6">
+        <h2 class="text-center">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>
+    </section>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
-</div>
+    <section id="contact" class="text-center">
+      <h2>Contact us</h2>
+      <div>
+        100 Broadway Avenue,<br>
+        New York, NY 10001 <br>
+        (212) 555-1234
+      </div>
+    </section>
+  </div>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
