diff --git a/css/styles.css b/css/styles.css
index 8b13789..b05428c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,47 @@
 
+.header{
+    text-align: center;
+    background-image: url("../img/milkbg.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    min-height: 400px;
+    background-position: center;
+    font-family: 'Anton', sans-serif;
+}
+
+h2{
+    font-family: 'Anton', sans-serif;
+}
+
+h3{
+font-family: 'Anton', sans-serif;
+}
+
+p{
+font-family: 'Anton', sans-serif;
+}
+
+.container-fluid{
+    text-align: center;
+}
+
+.about{
+    background-color: grey;
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.cookieMonster{
+    float: left;
+    margin: 1px;
+}
+
+.aboutUsText{
+    word-wrap: break;
+    
+}
+
+.footer{
+    background-color: aqua;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..770ee7b 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,92 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <title>Cookie Store</title>
-</head>
-<body>
+<html lang = "en">
+  <head>
+    <title>Cookie Store</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Rubik+Beastly&display=swap" rel="stylesheet">  
+    <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="header">
+          <h1>Cookie Store</h1>
+          <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
 
-<h1>Cookie Store</h1>
+    <div class="container-fluid">
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+      <h2>The Cookies</h2>
 
-<h2>The Cookies</h2>
+      <div class="row">
+        <div>
+        <div class="row">
+          <div class="col">
+            <h3>Thin Mint Cookies</h3>
+            <p>Tasty mint chocolate cookies</p>
+            <img src="img/mint.png">    
+          </div>   
+        </div>
+        </div>
+        <div>
+        <div class="row">
+            <div class="col ">
+              <h3>Peanut Butter Cookies</h3>
+              <p>Yummy peanut buttery goodness!</p>
+              <img src="img/peanut.png">
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="row">
+          <div class="col">
+            <h3>Smore's Cookies</h3>
+            <p>Camp fire favorite!</p>
+            <img src="img/smores.png">    
+          </div>
+        </div>
+        </div>
+        <div>
+        <div class="row">
+          <div class="col">
+            <h3>Short Bread Cookies</h3>
+            <p>Santa's favorite classic.</p>
+            <img src="img/shortbread.png">    
+          </div>
+        </div>
+      </div>
+    </div>
 
-<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">
+    </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+    <div class="about">
+      <h2>About us</h2>
+      <div class="cookieMonster">
+        <img src="img/cmonster.png">
+      </div>
+      <div class="aboutUsText">
+        <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>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+    <div class="footer">
+      <h2>Contact us</h2>
+      <div>
+        100 Broadway Avenue,<br>
+        New York, NY 10001 <br>
+        (212) 555-1234
+      </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>
-
-</body>
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+  </body>
 </html>
