diff --git a/css/styles.css b/css/styles.css
index 8b13789..6ac6b0b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,22 @@
+* {
+    font-family: 'Source Sans Pro', sans-serif;
+}
 
+#header-image {
+    background-image: url('https://www.girlscouts.org/content/dam/girlscouts-gsusa/images/Cookies/welcome-cookie-sellers/PoweredByCookiesPage_1500x600.jpg');
+    height: 400px;
+    background-repeat: no-repeat;
+    background-size: 100% 400px;
+}
+
+#header-text {
+    background-color: rgba(100,100,100,0.7);
+}
+
+#about {
+    background-color: lightgray;
+}
+
+#contact {
+    background-color: lightblue ;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..77bc66d 100644
--- a/index.html
+++ b/index.html
@@ -2,45 +2,68 @@
 <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">
+  <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=Inter:wght@200&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
 </head>
 <body>
 
+<div class="bg-image d-flex justify-content-center align-items-center" id="header-image">
+  <div class="text-center d-flex flex-column align-items-center text-white p-5" id="header-text">
+    <h1>Cookie Store</h1>
+    <p>Buy our awesome cookies. All proceeds go to charity!</p>
+  </div>
+</div>
 
-<h1>Cookie Store</h1>
-
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
-
-<h2>The Cookies</h2>
+<h2 class="text-center m-3 font-weight-bold">The Cookies</h2>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+<div class="container-fluid d-flex align-items-center justify-content-center w-100 p-5">
+  <div class="row">
+    <div class="col-sm text-center m-1">
+      <h3>Thin Mint Cookies</h3>
+      <p>Tasty mint chocolate cookies</p>
+      <img src="img/mint.png">
+    </div>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+    <div class="col-sm text-center m-1">
+      <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="col-sm text-center m-1">
+      <h3>Short Bread Cookies</h3>
+      <p>Santa's favorite classic.</p>
+      <img src="img/shortbread.png">
+    </div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+    <div class="col-sm text-center m-1">
+      <h3>Smore's Cookies</h3>
+      <p>Camp fire favorite!</p>
+      <img 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>
+<div class="d-flex flex-column justify-content-center align-items-center p-4" id="about">
+  <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>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
+<div class="d-flex flex-column justify-content-center align-items-center p-4" id="contact">
+  <h2>Contact us</h2>
+  <div class="text-center">
+    100 Broadway Avenue,<br>
+    New York, NY 10001 <br>
+    (212) 555-1234
+  </div>
 </div>
 
 </body>
