diff --git a/alternating.html b/alternating.html
index a3f5035..f899808 100644
--- a/alternating.html
+++ b/alternating.html
@@ -1,30 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cookie Store</title>
-  </head>
-  <body>
-    <main>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
+  <title>Cookie Store</title>
+</head>
+
+<body class="">
+  <main class="mw-100">
+    <div class="mw-100 text-center self-center">
       <h2>Our Cookies</h2>
       <p>Checkout our latest and delicious cookies.</p>
+    </div>
+    <div class="container row row-cols-1 row-cols-lg-4 mw-100 text-center justify-content-center align-items-center">
+      <div class="col row" >
+        <div class="col-6 order- col-lg-10 d-flex order-md-2 order-lg-0 flex-column justify-content-center">
+          <h3 class="">Mint Chocolate</h3>
+          <p class="">Tasty mint chocolate cookies</p>
+        </div>
+        <img class="rounded-circle col-5 col-lg-10 order-md-1 order-lg-0" src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+      </div>
 
-      <h3>Mint Chocolate</h3>
-      <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+      <div class="col row">
+        <div class="col-6 col-lg-10 d-flex flex-column justify-content-center">
+          <h3>Peanut Butter</h3>
+          <p>Yummy peanut buttery goodness</p>
+        </div>
+        <img class="rounded-circle col-5 col-lg-10 " src="images/peanut-cookie.png"
+          alt="A single peanut butter cookie" />
+      </div>
 
-      <h3>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+      <div class="col row">
+        <div class="col-6 col-lg-10  order-md-2 order-lg-0 d-flex flex-column justify-content-center">
+          <h3>Oatmeal</h3>
+          <p>Your fitness instructor's favorite</p>
+        </div>
+        <img class="rounded-circle col-5 col-lg-10 order-md-1 order-lg-0 img-fluid" src="images/oatmeal-cookie.png"
+          alt="A single oatmeal cookie" />
+      </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      <div class="col row">
+        <div class="col-6 col-lg-10 d-flex flex-column justify-content-center">
+          <h3>Chocolate Chip</h3>
+          <p>Gooey chocolate you'll love</p>
+        </div>
+        <img class="rounded-circle col-5 col-lg-10 img-fluid" src="images/chip-cookie.png"
+          alt="A single chocolate chip cookie" />
+      </div>
+    </div>
+  </main>
+</body>
 
-      <h3>Chocolate Chip</h3>
-      <p>Gooey chocolate you'll love</p>
-      <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
-    </main>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..606196d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,77 @@
-/* Add custom css styles here */
+* {
+    padding: 0;
+    margin: 0;
+}
+
+@media screen and (min-width: 1200px) {
+    .center-img {
+            position: relative;
+            top: 40px;
+        }
+}
+
+header {
+    background-image: url("../images/coffee-biscuits.jpg");
+    background-size: contain;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 500px;
+    color: white;
+}
+.cookies-intro {
+    margin: 50px 0px 50px 0px;
+    align-self: center;
+    text-align: center;
+}
+.container {
+    margin-bottom: 40px;
+}
+
+.col {
+    justify-content: center;
+    text-align: center;
+}
+
+.about-container{
+        background-color: aliceblue;
+            align-items: center;
+            align-content: center;
+            padding: 60px;
+            margin-top: 100px;
+}
+
+main img {
+    border-radius: 100%;
+
+}
+
+.about-img {
+    border-radius: 100%;
+    height: 150px;
+}
+
+.about div {
+    align-items: center;
+}
+
+.about-content {
+    justify-content: center;
+}
+
+footer {
+    background-color: rgb(5, 109, 206);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 200px;
+    align-items: center;
+    align-content: center;
+    color: white;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..096e90a 100644
--- a/index.html
+++ b/index.html
@@ -1,57 +1,83 @@
+<!--I was able to implement grid utilities and tried to make the page similar to the one in the lesson, though a major problem was the width overflowing to the right.
+-->
+
+
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cookie Store</title>
-  </head>
-  <body>
-    <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
-    </header>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="./css/styles.css" rel="stylesheet" />
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+  <title>Cookie Store</title>
+</head>
+
+<body>
+  <header class="header">
+    <h1>Cookie Store</h1>
+    <p>Buy our awesome cookies. All proceeds go to charity!</p>
+  </header>
 
-    <main>
+  <main class="">
+        <div class="cookies-intro">
       <h2>Our Cookies</h2>
       <p>Checkout our latest and delicious cookies.</p>
-
+    </div>
+    <div class="container mw-100  row row-cols-1 row-cols-md-2 row-cols-lg-4">
+    <div class="col">
       <h3>Mint Chocolate</h3>
       <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
-
+      <img  class="img-fluid" src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+    </div>
+    <div class="col relative">
       <h3>Peanut Butter</h3>
       <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
-
+      <img class="center-img img-fluid"  src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+    </div> 
+    <div class="col">
       <h3>Oatmeal</h3>
       <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      <img class="center-img img-fluid" src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+    </div>
 
+    <div class="col">
       <h3>Chocolate Chip</h3>
       <p>Gooey chocolate you'll love</p>
-      <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
-    </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>
+      <img class="img-fluid"  src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
     </div>
-    <footer>
-      <h2>Contact us</h2>
-      <div>
-        100 Broadway Avenue,<br />
-        New York, NY 10001 <br />
-        (212) 555-1234
+    </div>
+  </main>
+  <div class="about-container">
+<div class="about row row-cols-1 bg-aliceblue">
+    <h2 class="col">About us</h2>
+    <div class="about-content row row-cols-1 row-cols-md-2 mw-100">
+      <div class="col col-md-2">
+       <img class="about-img" src="images/bakers.svg" alt="illustrations of two people baking" />
       </div>
-    </footer>
-  </body>
-</html>
+    <div class="col col-md-8 text-start">
+      <p>
+   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.
+      </p>
+
+    </div>
+  </div>
+  </div>
+  </div>
+  <footer class="mw-100">
+    <h2>Contact us</h2>
+    <div>
+      100 Broadway Avenue,<br />
+      New York, NY 10001 <br />
+      (212) 555-1234
+    </div>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+</body>
+
+</html>
\ No newline at end of file
