diff --git a/css/styles.css b/css/styles.css
index 8b13789..3db8b33 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,76 @@
+* {
+    box-sizing: border-box;
+}
+body, html {
+    height: 100%;
+}
 
+.store-hero {
+
+
+
+    
+    /* background-image: url(/img/milkbg.jpg); */
+    /* height: 50%;
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative; */
+}
+
+.store-name {
+    text-align: center;
+    color: white;
+    border: 1px solid red;
+    background-color: rgba(14, 13, 13, 0.664);
+    margin: 0 20%; 
+    /* height: 50%;
+    width: 50; */
+    /* position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); */
+}
+
+.the-cookies {
+    text-align: center;
+}
+
+.cookie-image{
+    border-radius: 50%;
+    max-width: 100%;
+    display: block;
+    margin: auto;
+}
+
+.cookie-name {
+    text-align: center;
+}
+
+.cookie-description {
+    text-align: center;
+}
+
+.about-section {
+    text-align: center;
+    margin-top: 20px;
+    background-color: #cfcfcf;
+
+}
+
+.contact-info {
+    /* border: 1px solid red; */
+    background-color: #518ce4;
+    padding: 20px 0px;
+    color: white;
+    /* margin: 20px; */
+}
+
+.align-contact {
+    text-align: center;
+}
+
+.align-info {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..d16f707 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,68 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Cookie Store</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/styles.css">
 </head>
-<body>
-
-
-<h1>Cookie Store</h1>
-
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
 
-<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">
+<body>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+  <div class="store-hero">
+    <img src="/img/milkbg.jpg" class="img-fluid" alt="Store image">
+    <div class="store-name">
+      <h1>Cookie Store</h1>
+      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
+  </div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+  <h2 class="the-cookies">The Cookies</h2>
+  <div class="container">
+    <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-4">
+      <div class="col">
+        <h3 class="cookie-name">Thin Mint Cookies</h3>
+        <p class="cookie-description">Tasty mint chocolate cookies</p>
+        <img class="cookie-image" src="img/mint.png">
+      </div>
+      <div class="col">
+        <h3 class="cookie-name">Peanut Butter Cookies</h3>
+        <p class="cookie-description">Yummy peanut buttery goodness!</p>
+        <img class="cookie-image" src="img/peanut.png">
+      </div>
+      <div class="col">
+        <h3 class="cookie-name">Short Bread Cookies</h3>
+        <p class="cookie-description">Santa's favorite classic.</p>
+        <img class="cookie-image" src="img/shortbread.png">
+      </div>
+      <div class="col">
+        <h3 class="cookie-name">Smore's Cookies</h3>
+        <p class="cookie-description">Camp fire favorite!</p>
+        <img class="cookie-image" src="img/smores.png">
+      </div>
+    </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>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
-</div>
+  <div class="about-section">
+    <h2 class="align-about">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>
+  <div class="contact-info">
+    <h2 class="align-contact">Contact us</h2>
+    <div class="align-info">
+      100 Broadway Avenue,<br>
+      New York, NY 10001 <br>
+      (212) 555-1234
+    </div>
+  </div>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
