diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..e367b9d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,52 @@
 /* Add custom css styles here */
+*{
+    font-family:'Times New Roman', Times, serif;
+}
+header{
+    background-image: url("/images/coffee-biscuits.jpg") ;
+    background-repeat: no-repeat;
+    background-size:cover;
+    color:#e4ca9e;
+    height:400px;
+}
+h1, h2, h3{
+    font-weight: bold;
+    text-decoration:underline;
+}
+.descriptorus{
+    text-align-last: end;
+}
+.cookiebox{
+    height:50%;
+    margin-bottom: 3%;
+}
+.headerdiv{
+    font-size:large;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    align-items:center;
+    width:80%;
+    max-width:650px;
+    min-width: 300px;
+    height:40%;
+    margin: 0 auto;
+    background-color:#0000007c;
+}
+.footdown{
+    background-color:#b8b8b844;
+}
+.bakerimg{
+    height:40%;
+    width:80%;
+    max-width:100px;
+    margin:0 auto;
+}
+footer{
+    color:white;
+    background-color:#6e6bd1;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..74982d7 100644
--- a/index.html
+++ b/index.html
@@ -3,49 +3,84 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Reminder: To link style sheet, use link tag w/ rel = "stylesheet"-->
+    <link href = "css/styles.css" rel = "stylesheet">
+    <!-- Adding BOOTSTRAP CSS-->
+    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    
     <title>Cookie Store</title>
   </head>
+
   <body>
-    <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    <header class="d-flex justify-content-center align-items-center text-center">
+      <!-- Bootstrap is a highly used standardized CSS stylesheet making it 
+       easier to format your page without downloading or developing an entire stylesheet
+       yourself-->
+
+       <!-- Bootstrap works by defining specific classes with specific behaviors:
+        i.e. text-center centers the div in the middle of the page-->
+      <div class="headerdiv rounded-5">
+        <h1>Cookie Store</h1>
+        <p>Buy our awesome cookies. All proceeds go to charity!</p>
+      </div>
     </header>
 
-    <main>
+    <main class="text-center cookiebox">
       <h2>Our Cookies</h2>
       <p>Checkout our latest and delicious cookies.</p>
 
-      <h3>Mint Chocolate</h3>
-      <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
-
-      <h3>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
-
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
-
-      <h3>Chocolate Chip</h3>
-      <p>Gooey chocolate you'll love</p>
-      <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
+      <!-- container is a bootstrap grid class. Bootstrap grids have a number of rows, and a 
+       number of columns (col) per row. To determine limitations, specific sub-classes 
+       (ex: col-12) each determine a behavior.-->
+      <div class = "container">
+        <div class ="row">
+          <!-- col-md-6 means on a medium screen, each column takes up 6 "spaces". 
+          The default row has 12 spaces as marked in col-12 -->
+          <div class = "col-12 col-md-6 col-lg-3">
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+            <!-- class rounded-circle changes the image shape into a circle-->
+            <img src="images/mint-cookie.png" class = "img-fluid rounded-circle" alt="A single mint chocolate cookie" />
+          </div>
+          <div class = "col-12 col-md-6 col-lg-3">
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+            <img src="images/peanut-cookie.png" class = "img-fluid rounded-circle" alt="A single peanut butter cookie" />
+          </div>
+          <div class = "col-12 col-md-6 col-lg-3">
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructors favorite</p>
+            <img src="images/oatmeal-cookie.png" class = "img-fluid rounded-circle" alt="A single oatmeal cookie" />
+          </div>
+          <div class = "col-12 col-md-6 col-lg-3">
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+            <img src="images/chip-cookie.png" class = "img-fluid rounded-circle" alt="A single chocolate chip cookie" />
+          </div>
+        </div>
+      </div>
     </main>
-    <div>
-      <h2>About us</h2>
-
-      <img src="images/bakers.svg" alt="illustrations of two people baking" />
-      <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 class="footdown">
+      <div class="row text-end">
+        <h2 class="col-10">About us</h2>
+      </div>
+      <div class="row">
+        <img src="images/bakers.svg"  class="bakerimg img-fluid rounded-pill col-5 col-md-3 col-lg-2" alt="illustrations of two people baking" />
+        <div class="col-6 text-center">
+          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>
-    <footer>
+
+    <footer class="text-center">
       <h2>Contact us</h2>
       <div>
         100 Broadway Avenue,<br />
