diff --git a/alternating.html b/alternating.html
index a3f5035..81808a3 100644
--- a/alternating.html
+++ b/alternating.html
@@ -4,27 +4,91 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cookie Store</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <style>
+      .img-responsive {
+        max-width: 100%;
+        height: auto;
+        border-radius: 50%; /* Make the image circular */
+        object-fit: cover; /* Crop image to fit circular shape */
+        border: 5px solid #ddd; /* Optional: Add a border to highlight the circle */
+      }
+      .img-container {
+        width: 100%;
+        padding-top: 100%; /* Create a square container */
+        position: relative;
+      }
+      .img-container img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .text-container {
+        text-align: center; /* Center the text */
+        padding: 1rem; /* Add padding around text */
+      }
+    </style>
   </head>
   <body>
     <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+      <div class="container">
+        <h2 class="text-center mb-4">Our Cookies</h2>
+        <p class="text-center mb-4">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" />
+        <!-- Mint Chocolate -->
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 text-container order-md-1">
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+          </div>
+          <div class="col-12 col-md-6 text-center order-md-0">
+            <div class="img-container">
+              <img class="img-fluid img-responsive" src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+            </div>
+          </div>
+        </div>
 
-      <h3>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+        <!-- Peanut Butter -->
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 text-container order-md-0">
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+          </div>
+          <div class="col-12 col-md-6 text-center order-md-1">
+            <div class="img-container">
+              <img class="img-fluid img-responsive" src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+            </div>
+          </div>
+        </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+        <!-- Oatmeal -->
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 text-container order-md-1">
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructor's favorite</p>
+          </div>
+          <div class="col-12 col-md-6 text-center order-md-0">
+            <div class="img-container">
+              <img class="img-fluid img-responsive" src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+            </div>
+          </div>
+        </div>
 
-      <h3>Chocolate Chip</h3>
-      <p>Gooey chocolate you'll love</p>
-      <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
+        <!-- Chocolate Chip -->
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 text-container order-md-0">
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+          </div>
+          <div class="col-12 col-md-6 text-center order-md-1">
+            <div class="img-container">
+              <img class="img-fluid img-responsive" src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
+            </div>
+          </div>
+        </div>
+      </div>
     </main>
   </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..5981607 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,50 @@
-/* Add custom css styles here */
+/* Ensure images are displayed as circles */
+.img-circle {
+    width: 100%; /* Ensure the image fills the column's width */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 50%; /* Make the images circular */
+    object-fit: cover; /* Ensure the image covers the circle without stretching */
+  }
+  
+  /* Optional: If you want to control the size of the images */
+  .img-circle-container {
+    width: 150px; /* Adjust as needed */
+    height: 150px; /* Adjust as needed */
+    overflow: hidden; /* Hide any overflow from the circle shape */
+    border-radius: 50%; /* Ensure the container is also circular */
+    display: flex; /* Center the image inside */
+    align-items: center; /* Center the image vertically */
+    justify-content: center; /* Center the image horizontally */
+    margin-bottom: 1rem; /* Add some space below each item */
+  }
+
+.second-header { 
+    text-align: center;
+}
+.first-header {
+    text-align: center;
+}
+.row {
+    padding: 40px;
+    text-align: center;
+}
+
+.third {
+    background-color: rgb(202, 202, 202);
+}
+.third img {
+    width: 20%;
+    height: auto;
+}
+.third div {
+    display: flex;
+    justify-content: center;
+}
+
+.fourth {
+    padding: 40px;
+    background-color: rgb(74, 74, 159);
+    text-align: center;
+    color: white;
+}
+
diff --git a/index.html b/index.html
index eae824d..147f654 100644
--- a/index.html
+++ b/index.html
@@ -4,36 +4,52 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cookie Store</title>
+    <link rel="stylesheet" href="css/styles.css" >
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
   </head>
   <body>
+    <div class="first-header">
     <header>
       <h1>Cookie Store</h1>
       <p>Buy our awesome cookies. All proceeds go to charity!</p>
     </header>
-
+    </div>
     <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+      <div class="second-header">
+        <h2>Our Cookies</h2>
+        <p>Checkout our latest and delicious cookies.</p>
+      </div>
+
+      <div class="row">
 
+      <div class="col-12 col-md-6 col-lg-3">
       <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 img-circle" src="images/mint-cookie.png" 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" alt="A single peanut butter cookie" />
-
+      <img class="img-fluid img-circle" src="images/peanut-cookie.png" 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" alt="A single oatmeal cookie" />
-
+      <img class="img-fluid img-circle" src="images/oatmeal-cookie.png" 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" alt="A single chocolate chip cookie" />
+      <img class="img-fluid img-circle" src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
+      </div>
+    </div>
     </main>
-    <div>
+    <div class="third">
+      <div>
       <h2>About us</h2>
-
+      </div class="txt-img">
+      <div>
       <img src="images/bakers.svg" alt="illustrations of two people baking" />
       <div>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -44,8 +60,9 @@ <h2>About us</h2>
         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
         mollit anim id est laborum.
       </div>
+      </div>
     </div>
-    <footer>
+    <footer class="fourth">
       <h2>Contact us</h2>
       <div>
         100 Broadway Avenue,<br />
