diff --git a/alternating.html b/alternating.html
index a3f5035..1ba79e6 100644
--- a/alternating.html
+++ b/alternating.html
@@ -4,27 +4,101 @@
     <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@4.4.1/dist/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+      <div class="container text-center">
+        <div class="py-4">
+          <h2>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 class="row py-5">
+          <div
+            class="col-xs-12 col-md-6 order-md-1 d-flex flex-column justify-content-center"
+          >
+            <h3>Mint Chocolate</h3>
+            <p>Tasty mint chocolate cookies</p>
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <img
+              src="images/mint-cookie.png"
+              alt="A single mint chocolate cookie"
+              class="rounded-circle"
+            />
+          </div>
+        </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 py-5">
+          <div
+            class="col-xs-12 col-md-6 d-flex flex-column justify-content-center"
+          >
+            <h3>Peanut Butter</h3>
+            <p>Yummy peanut buttery goodness</p>
+          </div>
+          <div class="col-xs-12 col-md-6 order-md-1">
+            <img
+              src="images/peanut-cookie.png"
+              alt="A single peanut butter cookie"
+              class="rounded-circle"
+            />
+          </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 py-5">
+          <div
+            class="col-xs-12 col-md-6 order-md-1 d-flex flex-column justify-content-center"
+          >
+            <h3>Oatmeal</h3>
+            <p>Your fitness instructor's favorite</p>
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <img
+              src="images/oatmeal-cookie.png"
+              alt="A single oatmeal cookie"
+              class="rounded-circle"
+            />
+          </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 py-5">
+          <div
+            class="col-xs-12 col-md-6 d-flex flex-column justify-content-center"
+          >
+            <h3>Chocolate Chip</h3>
+            <p>Gooey chocolate you'll love</p>
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <img
+              src="images/chip-cookie.png"
+              alt="A single chocolate chip cookie"
+              class="rounded-circle"
+            />
+          </div>
+        </div>
+      </div>
     </main>
+
+    <script
+      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..ddaefe0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,68 @@
 /* Add custom css styles here */
+*{
+    padding: 0;
+    margin: 0;
+}
+
+header{
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 5vh;
+
+}
+
+footer{
+    background-color: rgb(0, 121, 213);
+    color: white;
+}
+
+.hero-img{
+    background-image: url('/images/coffee-biscuits.jpg'); 
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    min-height: 400px;
+    color: white;
+}
+
+.hero-text{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.hero-text-bg{
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 30px;
+    border-radius: 10px;
+}
+
+.hero-text-bg h1{
+    text-align: center;
+}
+
+.hero-text-bg p{
+    text-align: center;
+    font-size: 20px;
+}
+
+.about-cookies h2{
+    font-size: 2.5em;
+}
+.cookies-showcase{
+    padding-bottom: 5vh;
+
+}
+.cookies-showcase img{
+    border-radius: 100vh;
+}
+
+.about-us h2{
+    text-align: center;
+}
+
+.icon{
+    height: 8rem;
+    border-radius: 4rem;
+}
+
diff --git a/index.html b/index.html
index eae824d..660715d 100644
--- a/index.html
+++ b/index.html
@@ -4,48 +4,105 @@
     <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"
+    />
+
+    <link rel="stylesheet" href="./css/styles.css" />
   </head>
   <body>
     <header>
-      <h1>Cookie Store</h1>
-      <p>Buy our awesome cookies. All proceeds go to charity!</p>
+      <div class="hero-img">
+        <div
+          class="hero-text d-flex flex-column justify-content-center align-items-center"
+        >
+          <div class="hero-text-bg">
+            <h1>Cookie Store</h1>
+            <p>Buy our awesome cookies. All proceeds go to charity!</p>
+          </div>
+        </div>
+      </div>
     </header>
 
     <main>
-      <h2>Our Cookies</h2>
-      <p>Checkout our latest and delicious cookies.</p>
+      <div class="about-cookies text-center container">
+        <h2>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 class="cookies-showcase container-fluid text-center">
+        <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>Peanut Butter</h3>
-      <p>Yummy peanut buttery goodness</p>
-      <img src="images/peanut-cookie.png" alt="A single peanut butter 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>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>Oatmeal</h3>
+            <p>Your fitness instructors favorite</p>
+            <img
+              src="images/oatmeal-cookie.png"
+              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-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>
+        </div>
+      </div>
     </main>
-    <div>
+
+    <section class="about-us container-fluid bg-light py-4">
       <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="row">
+        <div class="col-md-auto">
+          <img
+            class="icon img-fluid"
+            src="images/bakers.svg"
+            alt="Illustration of two people baking"
+          />
+        </div>
+        <div class="col">
+          <div class="about-us-text">
+            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>
-    </div>
-    <footer>
+    </section>
+
+    <footer
+      class="d-flex flex-column justify-content-center align-items-center"
+    >
       <h2>Contact us</h2>
       <div>
         100 Broadway Avenue,<br />
@@ -53,5 +110,21 @@ <h2>Contact us</h2>
         (212) 555-1234
       </div>
     </footer>
+
+    <script
+      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
