diff --git a/alternating.html b/alternating.html
index a3f5035..c1f4c42 100644
--- a/alternating.html
+++ b/alternating.html
@@ -1,30 +1,74 @@
 <!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>
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Cookie Store</title>
+        <link href="./css/styles.css" rel="stylesheet">
+        <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 class="container-fluid text-center">
+            <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" />
+            <div class="row align-items-center">
+                <div class="col-md-6 order-md-2">
+                    <h3>Mint Chocolate</h3>
+                    <p>Tasty mint chocolate cookies</p>
+                </div>
+                <div class="col-md-6">
+                    <img
+                        class="img-fluid rounded-circle"
+                        src="images/mint-cookie.png"
+                        alt="A single mint chocolate cookie"/>
+                </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 align-items-center">
+                <div class="col-md-6">
+                    <h3>Peanut Butter</h3>
+                    <p>Yummy peanut buttery goodness</p>
+                </div>
+                <div class="col-md-6 order-md-2">
+                    <img
+                        class="img-fluid rounded-circle"
+                        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>
+            <div class="row align-items-center">
+                <div class="col-md-6 order-md-2">
+                    <h3>Oatmeal</h3>
+                    <p>Your fitness instructors favorite</p>
+                </div>
+                <div class="col-md-6 order-md-1">
+                    <img
+                        class="img-fluid rounded-circle"
+                        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>
+            <div class="row align-items-center">
+                <div class="col-md-6 order-md-1">
+                    <h3>Chocolate Chip</h3>
+                    <p>Gooey chocolate you'll love</p>
+                </div>
+                <div class="col-md-6 order-md-2">
+                    <img
+                        class="img-fluid rounded-circle"
+                        src="images/chip-cookie.png"
+                        alt="A single chocolate chip cookie"/>
+                </div>
+
+            </div>
+        </div>
     </main>
-  </body>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 3c3f2b6..b4df1fe 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,55 @@
 /* Add custom css styles here */
+*{
+    margin:0;
+    padding:0;
+}
+header{
+    height:400px;
+    text-align:center;
+    background-image: url('../images/coffee-biscuits.jpg');
+    background-size:cover;
+}
+.headerContent{
+    color:white;
+    padding:25px;
+    border-radius: 20px;
+    background: rgb(0 0 0 / 50%);
+}
+.headerContent p {
+    font-weight: lighter;
+    color: lightgray;
+}
+.center-content{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.about{
+    margin-top:10%;
+    background-color: #F8F9FA;
+    padding:2em;
+}
+
+.about-content div{
+    /* height:auto; */
+    /* max-height: 300px; */
+    /* width:100%; */
+    /* padding-top:2em; */
+}
+
+.about img{
+    /* padding:20px; */
+    max-height:150px;
+    width:auto;
+}
+
+.about-text{
+    /* background-color: #056DFD; */
+    /* padding:0 10px; */
+}
+footer{
+    background-color: #056DFD;
+    text-align: center;
+    color:white;
+    padding: 2em;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eae824d..e770006 100644
--- a/index.html
+++ b/index.html
@@ -1,57 +1,110 @@
 <!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>
-
-      <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" />
-    </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>
-    </div>
-    <footer>
-      <h2>Contact us</h2>
-      <div>
-        100 Broadway Avenue,<br />
-        New York, NY 10001 <br />
-        (212) 555-1234
-      </div>
-    </footer>
-  </body>
-</html>
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Cookie Store</title>
+        <link href="./css/styles.css" rel="stylesheet">
+        <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 class="center-content">
+            <div class="headerContent">
+                <h1>Cookie Store</h1>
+
+                <p class="lighter">Buy our awesome cookies. All proceeds go to charity!</p>
+
+            </div>
+        </header>
+
+        <main class="container-fluid text-center">
+            <h2>Our Cookies</h2>
+            <p>Checkout our latest and delicious cookies.</p>
+            <div class="row">
+                <div class="col-md-6 col-lg-3">
+                    <div class="row">
+                        <div class="">
+                            <h3>Mint Chocolate</h3>
+                            <p>Tasty mint chocolate cookies</p>
+                        </div>
+                        <div class="">
+                            <img
+                                class="img-fluid rounded-circle"
+                                src="images/mint-cookie.png"
+                                alt="A single mint chocolate cookie"/>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <h3>Peanut Butter</h3>
+                    <p>Yummy peanut buttery goodness</p>
+                    <img
+                        class="img-fluid rounded-circle"
+                        src="images/peanut-cookie.png"
+                        alt="A single peanut butter cookie"/>
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <h3>Oatmeal</h3>
+                    <p>Your fitness instructors favorite</p>
+                    <img
+                        class="img-fluid rounded-circle"
+                        src="images/oatmeal-cookie.png"
+                        alt="A single oatmeal cookie"/>
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <h3>Chocolate Chip</h3>
+                    <p>Gooey chocolate you'll love</p>
+                    <img
+                        class="img-fluid rounded-circle"
+                        src="images/chip-cookie.png"
+                        alt="A single chocolate chip cookie"/>
+                </div>
+            </div>
+
+        </main>
+        <div class="about container-fluid">
+            <div class="row">
+                <h2 class="text-center">About us</h2>
+
+            </div>
+            <div class="row about-content">
+                <div class="col-2 center-content">
+                    <!-- <div class="position-absolute"> -->
+                        <img
+                            class="rounded-circle img-fluid"
+                            src="images/bakers.svg"
+                            alt="illustrations of two people baking"/>
+                    <!-- </div> -->
+
+                </div>
+                <div class="col-10">
+                    <div class="about-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>
+            <h2>Contact us</h2>
+            <div>
+                100 Broadway Avenue,<br/>
+                New York, NY 10001
+                <br/>
+                (212) 555-1234
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
