diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..6746605
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/alternating.html b/alternating.html
index a3f5035..a776337 100644
--- a/alternating.html
+++ b/alternating.html
@@ -4,27 +4,50 @@
     <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>
   <body>
     <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+      <div class="text-center m-5 p-5 ">
+        <h2 class="fw-bold">Our Cookies</h2>
+        <p>Checkout our latest and delicious cookies.</p>
+      </div>
 
-      <h3>Mint Chocolate</h3>
-      <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+      <div style="max-width: 80%;" class="mx-auto text-center ">
+        <div class="mt-4 row row-cols-sm-1 row-cols-md-2 align-items-center justify-content-center">
+          <div class="col order-md-2 offset-md-1">
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+          </div>
+          <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" class="col rounded-circle order-md-1 col-md-4 offset-md-1 col-sm-6" />
+        </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="mt-5 row row-cols-sm-1 row-cols-md-2 align-items-center justify-content-center">
+          <div class="col order-md-1 cookie-discription">
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+          </div>
+          <img src="images/peanut-cookie.png" alt="A single peanut butter cookie" class="col rounded-circle order-md-2 col-md-4 offset-md-1 col-sm-6" />
+        </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+        <div class="mt-5 row row-cols-sm-1 row-cols-md-2 align-items-center justify-content-center">
+          <div class="col order-md-2 cookie-discription">
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructors favorite</p>
+          </div>
+          <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" class="col rounded-circle order-md-1 col-md-4 offset-md-1 col-sm-6"/>
+        </div>
 
-      <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="mt-5 row row-cols-sm-1 row-cols-md-2 align-items-center justify-content-center">
+          <div class="col order-md-1 cookie-discription">
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+          </div>
+          <img src="images/chip-cookie.png" alt="A single chocolate chip cookie" class="col rounded-circle order-md-2 col-md-4 offset-md-1 col-sm-6"/>
+        </div>
+        <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>
+      </div>
     </main>
   </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..ee4e91f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,39 @@
 /* Add custom css styles here */
+header{
+    height: 400px;
+    background-image: url("/images/coffee-biscuits.jpg");
+    background-size: cover;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+
+.cookie-title{
+    text-align:center;
+    padding: 50px;
+    display:block;
+    border: 2px lightgray solid;
+    background-color: rgba(0 , 0, 0, 0.5);
+    border-radius: 20px;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    letter-spacing:2px;
+}
+
+main{
+    margin: 7% auto;
+}
+
+.aboutSec{
+    padding: 5% 0% 8% 0%;
+    
+}
+
+.aboutSec h2{
+    padding: 2%;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.cookies{
+    padding:2%;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..97c7aa3 100644
--- a/index.html
+++ b/index.html
@@ -4,48 +4,67 @@
     <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>
   <body>
-    <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+    <header class="text-light">
+      <div class="cookie-title">
+        <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" />
+    <main class="text-center d-grid gap-4">
+      <div>
+        <h2 class="fw-bold">Our Cookies</h2>
+        <p>Checkout our latest and delicious cookies.</p>
+      </div>
+      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-4 cookies">
+        <div class="col">
+          <h3>Mint Chocolate</h3>
+          <p>Tasty mint chocolate cookies</p>
+          <img src="images/mint-cookie.png" class="img-fluid rounded-circle" alt="A single mint chocolate 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">
+          <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>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+        <div class="col">
+          <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>
 
-      <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="col">
+          <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>
     </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="aboutSec bg-light">
+      <h2 class="text-center">About us</h2>
+      <div class="row justify-content-center w-100">
+        <img src="images/bakers.svg" alt="illustrations of two people baking" class="col-2 rounded-circle"/>
+        <div class="col-9">
+          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="bg-primary text-center text-light p-5">
       <h2>Contact us</h2>
       <div>
         100 Broadway Avenue,<br />
@@ -53,5 +72,6 @@ <h2>Contact us</h2>
         (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>
