diff --git a/alternating.html b/alternating.html
index a3f5035..0047b88 100644
--- a/alternating.html
+++ b/alternating.html
@@ -1,30 +1,47 @@
 <!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>
-      <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" />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Cookie Store</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
 
-      <h3>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+<body>
+  <main class="container">
+    <div class="row">
+      <div class="col">
+        <h2>Our Cookies</h2>
+        <p>Checkout our latest and delicious cookies.</p>
+      </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      <div class="col order-3">
+        <h3>Mint Chocolate</h3>
+        <p>Tasty mint chocolate cookies</p>
+        <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+      </div>
 
-      <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>
+      <div class="col order-2">
+        <h3>Peanut Butter</h3>
+        <p>Yummy peanut buttery goodness</p>
+        <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+      </div>
+
+      <div class="col order-4">
+        <h3>Oatmeal</h3>
+        <p>Your fitness instructors favorite</p>
+        <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      </div>
+
+      <div class="col order-1">
+        <h3>Chocolate Chip</h3>
+        <p>Gooey chocolate you'll love</p>
+        <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
+      </div>
+    </div>
+  </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..ad175c3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,43 @@
-/* Add custom css styles here */
+
+.header-section {
+    height: 400px;
+    background-image: url("/images/coffee-biscuits.jpg"); 
+    background-size: cover; 
+    background-position: center;
+    display: flex;
+    justify-content: center; align-items: center; 
+    text-align: center; 
+  }
+  
+  .header-content {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
+  }
+  
+  .header-content h1 {
+    font-size: 3em; 
+    margin: 0;
+  }
+  
+  .header-content p {
+    font-size: 1.5em; 
+  }
+
+  .about-us-section {
+    background-color: #f8f9fa;
+    border-radius: 10px;
+  }
+  
+  .about-us-section h2 {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+  
+  .about-us-section p {
+    font-size: 1.1em;
+    line-height: 1.6;
+  }
+
+  .footer-section{
+    background-color: rgb(57, 57, 253);
+    color: white;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..41945c1 100644
--- a/index.html
+++ b/index.html
@@ -1,41 +1,58 @@
 <!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>
 
-    <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+<head>
+  <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
 
-      <h3>Mint Chocolate</h3>
-      <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+<body>
+  <header class="header-section">
+    <div class="header-content">
+      <h1>Cookie Store</h1>
+      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
+  </header>
 
-      <h3>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
+  <main class="container text-center">
+    <h2>Our Cookies</h2>
+    <p>Checkout our latest and delicious cookies.</p>
+    <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" />
+      </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      <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" />
+      </div>
 
-      <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>
+      <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" />
+      </div>
 
-      <img src="images/bakers.svg" alt="illustrations of two people baking" />
-      <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" />
+      </div>
+  </main>
+  <div class="container about-us-section my-5">
+    <h2 class="text-center">About us</h2>
+    <div class="row align-items-center">
+      <div class="col-12 col-md-4">
+        <img src="images/bakers.svg" alt="illustrations of two people baking" class="img-fluid" />
+      </div>
+      <div class="col-12 col-md-8">
         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
@@ -45,13 +62,15 @@ <h2>About us</h2>
         mollit anim id est laborum.
       </div>
     </div>
-    <footer>
+  </div>
+  <footer class="footer-section text-center py-4">
       <h2>Contact us</h2>
       <div>
         100 Broadway Avenue,<br />
         New York, NY 10001 <br />
         (212) 555-1234
       </div>
-    </footer>
-  </body>
-</html>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
