diff --git a/alternating.html b/alternating.html
index a3f5035..854ecf3 100644
--- a/alternating.html
+++ b/alternating.html
@@ -3,28 +3,107 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Bootstrap -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/styles.css" />
     <title>Cookie Store</title>
   </head>
   <body>
-    <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+    !-- Bootstrap -->
+    <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>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
+      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
+      integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
+      crossorigin="anonymous"
+    ></script>
 
-      <h3>Mint Chocolate</h3>
-      <p>Tasty mint chocolate cookies</p>
-      <img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
+    <main class="container">
+      <div class="col-12 text-center mb-4">
+        <h1>Our Cookies</h1>
+        <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" />
+      <div class="row text-md-end mb-4">
+        <div
+          class="col-12 col-md-6 text-md-start d-flex flex-column justify-content-center mb-3 mb-md-0 order-md-2"
+        >
+          <h3>Mint Chocolate</h3>
+          <p>Tasty mint chocolate cookies</p>
+        </div>
+        <div class="col-12 col-md-6 order-1">
+          <div class="cookie">
+            <img
+              src="images/mint-cookie.png"
+              alt="A single mint chocolate cookie"
+            />
+          </div>
+        </div>
+      </div>
 
-      <h3>Oatmeal</h3>
-      <p>Your fitness instructors favorite</p>
-      <img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
+      <div class="row text-md-start mb-4">
+        <div
+          class="col-12 col-md-6 text-md-end d-flex flex-column justify-content-center mb-3 mb-md-0"
+        >
+          <h3>Peanut Butter</h3>
+          <p>Yummy peanut buttery goodness</p>
+        </div>
+        <div class="col-12 col-md-6">
+          <div class="cookie">
+            <img
+              src="images/peanut-cookie.png"
+              alt="A single peanut butter 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" />
+      <div class="row text-md-end mb-4">
+        <div
+          class="col-12 col-md-6 text-md-start d-flex flex-column justify-content-center mb-3 mb-md-0 order-md-2"
+        >
+          <h3>Oatmeal</h3>
+          <p>Your fitness instructors favorite</p>
+        </div>
+        <div class="col-12 col-md-6 order-1">
+          <div class="cookie">
+            <img
+              src="images/oatmeal-cookie.png"
+              alt="A single oatmeal cookie"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="row text-md-start mb-4">
+        <div
+          class="col-12 col-md-6 text-md-end d-flex flex-column justify-content-center mb-3 mb-md-0"
+        >
+          <h3>Chocolate Chip</h3>
+          <p>Gooey chocolate you'll love</p>
+        </div>
+        <div class="col-12 col-md-6">
+          <div class="cookie">
+            <img
+              src="images/chip-cookie.png"
+              alt="A single chocolate chip cookie"
+            />
+          </div>
+        </div>
+      </div>
     </main>
   </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..73e3546 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,81 @@
-/* Add custom css styles here */
+body {
+    font-family: Roboto;
+    font-size: 20px;
+}
+
+/* Header Section */
+
+header {
+    height: 400px;
+    background-image: url("../images/coffee-biscuits.jpg");
+    background-size: cover;
+    background-position: center;
+
+    /* Align text to the center */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.header-content {
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 20px 30px;
+    border-radius: 10px;
+    color: white;
+}
+
+/* Cookies Section */
+
+.row {
+    padding: 20px 30px;
+    text-align: center;
+}
+
+.cookie img {
+    border-radius: 50%;
+}
+
+/* About me Section */
+.about-us {
+    padding: 20px;
+    background-color: #ebedf1;
+}
+
+.about-us h2 {
+    margin-bottom: 15px;
+    font-size: 25px;
+
+    justify-content: center;
+    text-align: center;
+}
+
+.about-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+}
+
+.about-content img {
+    width: 20%;
+    max-width: 150px;
+    border-radius: 50%;
+}
+
+/* Footer Section */
+
+footer {
+    height: 200px;
+    background-color: #9645f8;
+    background-size: cover;
+    background-position: center;
+
+    /* Align text to the center */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: white;    
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..ecdff72 100644
--- a/index.html
+++ b/index.html
@@ -3,48 +3,108 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/styles.css" />
+    <!-- Bootstrap -->
+    <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>
+    <!-- Bootstrap -->
+    <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>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
+      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
+      integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- Site Building -->
     <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+      <div class="header-content">
+        <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" />
+      <!-- Bootstrap Layout -->
+      <div class="cookie container">
+        <div class="row">
+          <h2>Our Cookies</h2>
+          <p>Checkout our latest and delicious cookies.</p>
+          <div class="col">
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+            <div class="cookie">
+              <img
+                src="images/mint-cookie.png"
+                alt="A single mint chocolate cookie"
+              />
+            </div>
+          </div>
+          <div class="col">
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+            <div class="cookie">
+              <img
+                src="images/peanut-cookie.png"
+                alt="A single peanut butter cookie"
+              />
+            </div>
+          </div>
+          <div class="col">
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructors favorite</p>
+            <div class="cookie">
+              <img
+                src="images/oatmeal-cookie.png"
+                alt="A single oatmeal cookie"
+              />
+            </div>
+          </div>
+          <div class="col">
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+            <div class="cookie">
+              <img
+                src="images/chip-cookie.png"
+                alt="A single chocolate chip cookie"
+              />
+            </div>
+          </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.
+    <section class="about-us">
+      <h2>About us</h2>
+      <div class="about-content">
+        <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>
       </div>
-    </div>
+    </section>
+
     <footer>
       <h2>Contact us</h2>
       <div>
