diff --git a/alternating.html b/alternating.html
index a3f5035..747d6a3 100644
--- a/alternating.html
+++ b/alternating.html
@@ -4,27 +4,73 @@
     <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>
-    <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+    <main class=" container-fluid text-center ">
 
-      <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 text-center">
+        <h2>Our Cookies</h2>
+        <p>Checkout our latest and delicious cookies.</p>
+      </div>
 
-      <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" />
+      <div class = "container text-center">
+        <div class = "row row-cols-sm-1 row-cols-md-2 align-items-center">
+          <div class="col-md-4 order-1 order-sm-2 order-md-1 offset-md-2">
+            <img src="images/mint-cookie.png" class="rounded-circle" alt="A single mint chocolate cookie" height=200 width=200 />
+          </div>
+          <div class="col-md-4 text-center order-sm-1 order-md-2"> 
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+          </div>
+        </div>
+      </div> 
+
+
+      <div class= "container text-center">
+        <div class = " row  row-cols-sm-1 row-cols-md-2 align-items-center">
+          <div class="col-md-4 ">
+            <img src="images/peanut-cookie.png" class="rounded-circle" alt="A single peanut butter cookie" height=200 width=200 />
+          </div>
+          <div class="col-md-4  offset-md-2 order-first">
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+          </div>
+        </div>
+      </div>
+
+
+
+      <div class="container text-center">
+        <div class="row row-cols-sm-1 row-cols-md-2 align-items-center"> 
+          <div class="col-md-4 order-sm-2 order-md-2 order-1 offset-md-2">
+            <img src="images/oatmeal-cookie.png" class="rounded-circle" alt="A single oatmeal cookie" height=200 width=200 />
+          </div>
+          <div class="col-md-4 order-sm-1 order-md-2">
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructors favorite</p>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="container text-center">
+        <div class ="row align-items-center">
+          <div class="col-md-4 order-first offset-md-2">
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+          </div>
+          <div class="col-md-4 ">
+            <img src="images/chip-cookie.png" class="rounded-circle" alt="A single chocolate chip cookie" height=200 width=200/>
+          </div>
+        </div>
+      </div>
+
     </main>
   </body>
 </html>
+
+
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..e96ec28 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,14 @@
 /* Add custom css styles here */
+.header {
+    position: relative;
+}
+
+#headerText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    background-color: rgba(0,0,0,0.6);
+    border-radius: 1rem;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..63716e6 100644
--- a/index.html
+++ b/index.html
@@ -4,54 +4,85 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cookie Store</title>
-  </head>
+    <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>
-    <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
-    </header>
+     <header class="header">
+      <img src= "images/coffee-biscuits.jpg" alt="pic" height="500" width="100%"  >
+        <div class="text-center p-3 col" id="headerText">
+          <h1>Cookie Store</h1>
+          <p>Buy our awesome cookies. All proceeds go to charity!</p>
+        </div>
+      </header>
 
     <main>
-      <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" />
+      <div class = "container p-5">
+        <div class="col text-center" >
+          <h2>Our Cookies</h2>
+          <p>Checkout our latest and delicious cookies.</p>
+        </div>
+        <div class="row row-cols-lg-4 row-cols-md-2 row-cols-sm-1 text-center" >
+          
+          <div class="col" >
+            <h3>Mint Chocolate</h3>
+            <p >Tasty mint chocolate cookies</p>
+            <img src="images/mint-cookie.png" class="rounded-circle" alt="A single mint chocolate cookie"/>
+          </div>
+          <div class="col" > 
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+            <img src="images/peanut-cookie.png" class="rounded-circle" 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" class="rounded-circle" 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" class="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="bg-light container-fluid p-5">
+      <div class="container text-center">
+        <h2>About Us</h2>
       </div>
-    </div>
-    <footer>
-      <h2>Contact us</h2>
-      <div>
-        100 Broadway Avenue,<br />
-        New York, NY 10001 <br />
-        (212) 555-1234
+      <div class="row">
+        <div class="col-3 text-center">
+          <img src="images/bakers.svg" class="rounded-circle" alt="Two people baking" height="150" width="150"/>
+        </div>
+        <div class="col-9">
+          <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>
-    </footer>
+    </div>
+    
+
+    </div>
+        <footer>
+          <div class="text-center bg-primary text-white col p-5">
+            <h2>Contact us</h2>
+            <div>
+              100 Broadway Avenue,<br />
+              New York, NY 10001 <br />
+              (212) 555-1234
+            </div>
+          </div>
+        </footer>
   </body>
 </html>
