diff --git a/ceramic-coating.html b/ceramic-coating.html
index 33e8297..6cb0321 100644
--- a/ceramic-coating.html
+++ b/ceramic-coating.html
@@ -13,9 +13,9 @@
     <link href="css/hamburger.css" rel="stylesheet" />
     <style>
       hr {
-        background-color: black;
-        height: 4px;
+        border: 2px solid var(--gold);
         width: 75%;
+        margin: 1rem;
       }
 
       .info-box {
@@ -23,25 +23,53 @@
         width: 80%;
         padding: 2rem 4rem;;
         border-radius: 4rem;
+        height: min-content;
 
-        background-color: var(--gold);
+        border: 2px solid var(--gold);
+        transition: border 1s ease;
       }
+      .info-box:hover {
+        border: 2px solid white;
+      } 
       .info-box h1, p {
-        color: black;
+        color: white;
+        text-wrap: pretty;
       }
 
       .info-flex {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        align-items: center;
+        gap: 2rem;
+        max-width: 80%;
+      }
+      .info-flex:nth-child(1) {
+        max-width: 20%;
+        width: 20%;
+      }
+      .info-flex:nth-child(2) {
+        max-width: 80%;
         width: 80%;
       }
 
-      .info-flex:nth-child(1) {
-        width: 30%;
+      #allIncludeList {
+        display: flex; 
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        
+        max-width: 100%;
       }
-      .info-flex:nth-child(2) {
-        width: 60%;
+      li {
+        text-wrap: nowrap;
+        list-style-position: inside;
+        padding: 0rem;
+        margin: .5rem .5rem;
+      }
+      li::marker {
+        content: "✓ ";
+        color: var(--gold);
       }
 
       /** MOBILE */
@@ -49,6 +77,7 @@
 
         .info-flex {
           flex-direction: column;
+          align-items: center;
           width: 100%;
         }
         .info-flex section {
@@ -86,19 +115,38 @@
 
     <main id="main-content">
       
-      <section class="info-box">
+      <section class="info-box" style="margin-bottom: 2rem;">
         <h1><em>All</em> Ceramic Coatings Include</h1>
         <hr />
-        <p>testing</p>
+        <p>some headline details can go in here, then:</p>
+        <ul id="allIncludeList">
+          <li>list example item 1</li>
+          <li>list example item 2</li>
+          <li>list example item 3</li>
+          <li>list example item 4</li>
+        </ul>
       </section>
 
       <div class="info-flex">
         <section class="info-box">
-            
-          </section>
+          <h1>Choose your <em>Ceramic Coating</em> Package</h1>
+          <hr />
+          <ul>
+            <li>Elite Ceramic Coating</li>
+            <li>Complete Ceramic Coating</li>
+          </ul> 
+          <p><i>dev note:</i>maybe left-align list above, change bullet style, then use existing bullets as first list, then make sub-bullets for the distinguishing characteristics of each package with checkmark bullet?</p>
+        </section>
 
-          <section class="info-box">
-          </section>
+        <section class="info-box">
+          <h1>Wheel Wash <em>Add-on</em></h1>
+          <hr />
+          <ul id="allIncludeList">
+            <li>wheel wash information 1</li>
+            <li>wheel wash information 2</li>
+            <li>wheel wash information 3</li>
+          </ul>
+        </section>
       </div>
     </main>
     <script src="js/hamburger.js"></script>
diff --git a/index.html b/index.html
index 8e7f692..010c44f 100644
--- a/index.html
+++ b/index.html
@@ -43,13 +43,17 @@
         width: 50%;
         min-width: 100%;
 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--black);
         color: var(--gold);
 
         border: 1px solid var(--dark-gold);
         border-radius: 5rem;
 
-        padding: 2rem 0;
+        padding: 2rem 1rem;
         margin: 0;
 
         font-size: 2rem;
@@ -69,6 +73,7 @@
       #book-link {
         display: block;
         width: 50%;
+        text-decoration: none;
       }
 
       h2 {
diff --git a/reviews.html b/reviews.html
index c11be1f..611d85d 100644
--- a/reviews.html
+++ b/reviews.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
@@ -10,12 +9,16 @@
     <title>Luxury Detailing Maine</title>
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
+
+    <!-- IMAGE SLIDER CSS IMPORT -->
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+
     <style>
       /** REVIEWS */
       #reviewContainer {
         display: flex;
         flex-wrap: wrap;
-        gap: 5rem;
+        gap: 3rem;
 
         align-items: center;
         justify-content: center;
@@ -25,15 +28,15 @@
       /** REVIEW CARD */
       .review-card {
         padding: 1rem;
+        border: 2px solid var(--gold);
         border-radius: 1rem;
 
-        transition: 1s ease;
-        box-shadow: 0px 0px 25px var(--light-gold);
+        transition: 0.5s ease;
         color: white;
       }
 
       .review-card:hover {
-        box-shadow: 0px 0px 25px var(--gold);
+        border: 2px solid white;
       }
 
       .review-card-head {
@@ -59,12 +62,40 @@
       }
 
       /** GALLERY */
+      #gallery {
+        min-width: 100%;
+      }
       #galleryPhotos {
         display: flex;
+        min-width: 100%;
         flex-direction: column;
         align-items: center;
       }
 
+      /** JUXTAPOSE STUFF **/
+      a.jx-knightlab div.knightlab-logo {
+        visibility: hidden !important;
+        display: none !important;
+      }
+
+      a.jx-knightlab span.juxtapose-name {
+        visibility: hidden !important;
+        display: none !important;
+      }
+      .juxtapose img {
+        border-radius: 2rem;
+      }
+      div.jx-slider {
+        color: var(--gold) !important;
+      }
+
+      div.jx-arrow.jx-left {
+        border-color: transparent white transparent transparent;
+      }
+      div.jx-arrow.jx-right {
+        border-color: transparent transparent transparent white;
+      }
+
       /** BEFORE / AFTER IMAGES */
       .before-after-pair {
         position: relative;
@@ -140,7 +171,6 @@
           gap: 2rem;
         }
 
-
         .before-after-pair, .before-img, .after-img-container {
           width: 400px;
         }
@@ -170,6 +200,9 @@
         }
       }
     </style>
+
+
+
   </head>
 
   <body>
@@ -204,52 +237,25 @@
         <div id="reviewContainer"></div>
       </section>
 
+     
       <section id="gallery">
         <h1 style="margin-bottom: 2rem">Gallery</h1>
         <div id="galleryPhotos">
 
-          <figure class="before-after-pair">
-            <span class="before-img-container">
-              <figcaption class="img-state-text">before</figcaption>
-              <img class="before-img" src="assets/img/before1.jpg" 
-                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
-              </img>
-            </span>
-            <span class="after-img-container">
-              <figcaption class="img-state-text">after</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"
-                alt="The same trunk after it has been restored to like-new condition."></img>
-            </span>
-          </figure>
 
-          <figure class="before-after-pair">
-            <span class="before-img-container">
-              <figcaption class="img-state-text">before</figcaption>
-              <img class="before-img" src="assets/img/before1.jpg" 
-                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
-              </img>
-            </span>
-            <span class="after-img-container">
-              <figcaption class="img-state-text">after</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"
-                alt="The same trunk after it has been restored to like-new condition."></img>
-            </span>
-          </figure>
+          <div class="juxtapose" style="width: 45%;">
+            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
+            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
+          </div>
 
-          <figure class="before-after-pair">
-            <span class="before-img-container">
-              <figcaption class="img-state-text">before</figcaption>
-              <img class="before-img" src="assets/img/before1.jpg" 
-                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
-              </img>
-            </span>
-            <span class="after-img-container">
-              <figcaption class="img-state-text">after</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"
-                alt="The same trunk after it has been restored to like-new condition."></img>
-            </span>
-          </figure>
+          <div class="juxtapose" style="width: 45%;">
+            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
+            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
+          </div>
 
+
+          <!-- KEPT AS REMINDER -->
+          <!-- 
           <figure class="before-after-pair">
             <span class="before-img-container">
               <figcaption class="img-state-text">before</figcaption>
@@ -263,6 +269,7 @@
                 alt="The same trunk after it has been restored to like-new condition."></img>
             </span>
           </figure>
+          -->
 
         </div>
       </section>
@@ -347,5 +354,8 @@
         insertReviews(reviewData);
       };
     </script>
+    
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+
   </body>
 </html>
diff --git a/services.html b/services.html
index 2bc7b51..c9355c2 100644
--- a/services.html
+++ b/services.html
@@ -21,6 +21,7 @@
       }
 
       #book-button {
+        width: 100%;
         background-color: var(--black);
         color: var(--gold);
 
@@ -44,8 +45,7 @@
       
       #book-link {
         display: block;
-        width: 50%;
-        margin-top: 5rem;
+        width: 100%;
       } 
 
       /** Dropdown Menu Style Overrides */
@@ -104,9 +104,26 @@
       .dropdown-content {
         text-align: left;
         border: none;
+        /** closing speed */
+        transition: max-height .3s ease;
       }
+      /** service section dropdowns that are v long */
+      .dropdown-content.open-longest {
+        max-height: 1100px;
+        /** opening speed */
+        transition: max-height 1s ease;
+      }
+      /** service section dropdowns */
+      .dropdown-content.open-long {
+        max-height: 1100px;
+        /** opening speed */
+        transition: max-height 1s ease;
+      }
+      /** dropdowns holding specific service info */
       .dropdown-content.open {
-        max-height: 2000px;
+        max-height: 400px;
+        /** opening speed */
+        transition: max-height .5s ease;
       }
 
       .dropdown-body {
@@ -115,7 +132,7 @@
         justify-items: space-around;
         align-items: flex-start;
         flex-wrap: wrap;
-        margin: 1rem 1rem 1.5rem 6rem;
+        margin: 1rem 1rem 0rem 6rem;
         user-select: text;
       }
 
@@ -125,9 +142,12 @@
       .dropdown-body-half {
         flex-basis: 50%;
       }
-      .dropdown-body-full {
-        flex-basis: 100%;
+      .dropdown-button {
+        margin: auto;
+        margin-bottom: 1.5rem;
+        width: 80%;
       }
+
       /** mobile rules */
       /** MOBILE */
       @media screen and (max-width: 850px) {
@@ -145,8 +165,28 @@
         .dropdown-header {
           padding: 1.5rem 1rem 2rem 1rem;
         }
+
+        /** service section dropdowns that are v long */
+        .dropdown-content.open-longest {
+          max-height: 1700px;
+          /** opening speed */
+          transition: max-height 1s ease;
+        }
+        /** service section dropdowns */
+        .dropdown-content.open-long {
+          max-height: 1450px;
+          /** opening speed */
+          transition: max-height 1s ease;
+        }
+        /** dropdowns holding specific service info */
+        .dropdown-content.open {
+          max-height: 600px;
+          /** opening speed */
+          transition: max-height .5s ease;
+        }
+
         .dropdown-body {
-          margin: 1rem 1rem 1.5rem 3rem;
+          margin: 1rem 1rem 0rem 3rem;
           flex-direction: column;
         }
         .dropdown-body span:not(:first-child) {
@@ -155,11 +195,6 @@
         .dropdown-body p {
           padding-right: 0rem;
         }
-        .book-link {
-          padding: 0;
-          margin: 0;
-          align-self: center;
-        }
         
       }
     </style>
@@ -195,7 +230,7 @@
 
       <!-- SERVICE PACKAGE SECTION -->
       <section id="packages">
-        <div class="dropdown">
+        <div class="dropdown long">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
             <h1>Service Packages</h1>
@@ -235,15 +270,14 @@
                       <li>Light door jam cleaning</li>
                     </ul>
                   </span>
+                </div>
 
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" 
-                      href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
-                    >
-                      <button id="book-button">Book Level One Package Now</button>
-                    </a>
-                  </span>
-
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
+                  >
+                    <button id="book-button">Book Level One Package Now</button>
+                  </a>
                 </div>
               </div>
             </div>
@@ -281,31 +315,32 @@
                       <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
                     </ul>
                   </span>
-
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" 
-                      href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
-                    >
-                      <button id="book-button">Book Level Two Package Now</button>
-                    </a>
-                  <span>
                 </div>
+
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+                  >
+                    <button id="book-button">Book Level Two Package Now</button>
+                  </a>
+                <div>
               </div>
             </div> 
-
           </div>
         </div>
       </section>
 
       <!-- CERAMIC COATING SECTION -->
       <section id="ceramic">
-        <div class="dropdown">
+        <div class="dropdown longest">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
             <h1>Ceramic Coating</h1>
           </div>
           <div class="dropdown-content">
 
+            question for aden: should clicking this just bring user to "ceramic coating" page?
+
             <div class="dropdown">
               <div class="dropdown-header" onclick="toggleDropdown(this)">
                 <span class="dropdown-arrow">▼</span>
@@ -335,12 +370,11 @@
                       <li>1 Step polish to remove light swirls and enhance gloss</li>
                     </ul>
                   </span>
-
-                  <span class="dropdown-body-half">
-                    <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
-                      <button id="book-button">Book Elite Coating</button>
-                    </a>
-                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
+                    <button id="book-button">Book Elite Coating</button>
+                  </a>
                 </div>
               </div>
             </div>
@@ -380,12 +414,11 @@
                       </li>
                     </ul>
                   </span>
-
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
-                      <button id="book-button">Book Complete Coating</button>
-                    </a>
-                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
+                    <button id="book-button">Book Complete Coating</button>
+                  </a>
                 </div>
               </div>
             </div>
@@ -407,11 +440,11 @@
                       Only available if the entire car receives a ceramic coating.
                     </p>
                   </span>
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS">
-                      <button id="book-button">Book Wheel Wash</button>
-                    </a>   
-                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS">
+                    <button id="book-button">Book Wheel Wash</button>
+                  </a>   
                 </div>
               </div>
             </div>                            
@@ -421,7 +454,7 @@
 
       <!-- POLISHING + PAINT CORRECTION SECTION -->
       <section id="polish">
-        <div class="dropdown">
+        <div class="dropdown long">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
             <h1>Polishing & Paint Correction</h1>
@@ -451,12 +484,11 @@
                       <li>Ceramic coating, sealant, or wax required after</li>
                     </ul>
                   </span>
-                  
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
-                      <button id="book-button">Book Paint Enhancement</button>
-                    </a>   
-                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
+                    <button id="book-button">Book Paint Enhancement</button>
+                  </a>   
                 </div>
               </div>
             </div>
@@ -485,22 +517,23 @@
                       <li>Ceramic coating, sealant, or wax required after</li>
                     </ul>
                   </span>
-
-                  <span class="dropdown-body-full">
-                    <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
-                      <button id="book-button">Book Paint Correction</button>
-                    </a>   
-                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
+                    <button id="book-button">Book Paint Correction</button>
+                  </a>   
                 </div>
               </div>
             </div>                                 
           </div>
         </div>
       </section>
+
+      wip below
       
       <!-- EXTERIOR DETAILING SECTION -->
       <section id="exterior">
-        <div class="dropdown">
+        <div class="dropdown long">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
             <h1>Exterior Detailing</h1>
@@ -568,7 +601,7 @@
 
       <!-- INTERIOR DETAILING SECTION -->
       <section id="interior">
-        <div class="dropdown">
+        <div class="dropdown long">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
             <h1>Interior Detailing</h1>
@@ -653,11 +686,23 @@
         let body = headerClicked.nextElementSibling;
         let arrow = headerClicked.children[0];
 
-        headerClicked.parentElement.classList.toggle("open");
-        body.classList.toggle("open");
-        arrow.classList.toggle("open");
-      }
+        if (headerClicked.parentElement.classList.contains("longest")) {
+          headerClicked.parentElement.classList.toggle("open-longest");
+          body.classList.toggle("open-longest");
+          arrow.classList.toggle("open-longest");
+        }
+        else if (headerClicked.parentElement.classList.contains("long")) {
+          headerClicked.parentElement.classList.toggle("open-long");
+          body.classList.toggle("open-long");
+          arrow.classList.toggle("open-long");
+        }
+        else {
+          headerClicked.parentElement.classList.toggle("open");
+          body.classList.toggle("open");
+          arrow.classList.toggle("open");
+        }
 
+      }
     </script>
   </body>
 </html>