diff --git a/scoots/contact.html b/scoots/contact.html
index f95358d..56a8b1b 100644
--- a/scoots/contact.html
+++ b/scoots/contact.html
@@ -69,7 +69,95 @@ <h1 id="nav-title">Scoots Rentals</h1>
         <!-- /End Header & Navigation -->
         <!-- Content -->
         <main>
-            
+            <section class="contact-hero">
+                <div class="overlay">
+                    <h2>Contact Us</h2>
+                    <p>Have a question or need more information? We are here to help!</p>
+                </div>
+            </section>
+            <section class="contact-area">
+                <h3>We’d Love To Hear From You!</h3>
+                <div class="contact-body">
+                    <div class="contact-info">
+                        <div class="address-block">
+                            <h3>Visit us at both locations</h3>
+                            <div class="address">
+                                <address>
+                                    <h4>Scoots @ Playa del Carmen-Cozumel</h4>
+                                    <div>
+                                        <span class="label" aria-hidden="true">
+                                            <img src="images/svg/map-icon.svg" alt="map icon" />
+                                        </span>
+                                        <span>
+                                            <p>5 Ave N Entre Calle 2</p>
+                                            <p>77600 Cozumel, Q.R. Mexico</p>
+                                        </span>
+                                    </div>
+
+                                    <a href="tel:+525558691234" target="_self">
+                                        <span class="label" aria-hidden="true">
+                                            <img src="images/svg/phone-icon.svg" alt="phone icon" />
+                                        </span>
+                                        <span class="value" aria-label="Click here to call 808-652-7407">+52 555 869 1234</span>
+                                    </a>
+                                </address>
+                                <iframe
+                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5589.892018422959!2d-86.95356976523163!3d20.51161250714187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f4e59cceda3d799%3A0xbf8ea7e97451cfd8!2sCentro%2C%20San%20Miguel%20de%20Cozumel%2C%20Quintana%20Roo%2C%20Mexico!5e0!3m2!1sen!2sus!4v1711467670660!5m2!1sen!2sus"
+                                    width="600"
+                                    height="300"
+                                    style="border: 0"
+                                    allowfullscreen=""
+                                    loading="lazy"
+                                    referrerpolicy="no-referrer-when-downgrade"
+                                ></iframe>
+
+                                <address>
+                                    <h4>Scoots @ Puerta Maya</h4>
+                                    <div>
+                                        <span class="label" aria-hidden="true"><img src="images/svg/map-icon.svg" alt="map icon" /> </span>
+                                        <span>
+                                            <p>5 Ave N Entre Calle 2</p>
+                                            <p>77600 Cozumel, Q.R. Mexico</p>
+                                        </span>
+                                    </div>
+                                    <a href="tel:+525559695678">
+                                        <span class="label" aria-hidden="true"><img src="images/svg/phone-icon.svg" alt="phone icon" /> </span>
+                                        <span class="value" aria-label="Click here to call 808-652-7407">+52 555 969 5678</span>
+                                    </a>
+                                </address>
+                                <iframe
+                                    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2079.9062928522703!2d-86.975759600473!3d20.475710187666206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1711467876877!5m2!1sen!2sus"
+                                    width="600"
+                                    height="300"
+                                    style="border: 0"
+                                    allowfullscreen=""
+                                    loading="lazy"
+                                    referrerpolicy="no-referrer-when-downgrade"
+                                ></iframe>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="contact-form">
+                        <fieldset>
+                            <legend>Email Contact</legend>
+                            <label class="top">Name* <input type="text" id="name" name="name" placeholder="Name" required /></label>
+                            <label class="top"
+                                >Email*
+                                <input
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    placeholder="someone@gmail.com"
+                                    required
+                                    title="Please enter a valid email address"
+                            /></label>
+                            <label class="top">Subject* <input type="text" id="subject" name="subject" required /></label>
+                            <label class="top">Message* <textarea id="message" name="message"></textarea></label>
+                        </fieldset>
+                        <button class="btn btn-primary"><a href="">Email us!</a></button>
+                    </div>
+                </div>
+            </section>
         </main>
         <!-- /End Content -->
         <!-- Footer  -->
@@ -121,7 +209,7 @@ <h4>Scoots @ Puerta Maya</h4>
                 <div class="logo-block">
                     <img src="images//favicons/motorcycle.webp" alt="Scooter Logo" width="150" height="150" />
                     <p>Where every ride is an adventure waiting to happen!</p>
-                    <button class="btn footer-btn"><a href="/">View Rentals</a></button>
+                    <button class="btn btn-secondary"><a href="/">View Rentals</a></button>
                 </div>
                 <div class="social-media-block">
                     <ul class="social-media-links">
diff --git a/scoots/images/heros/electric-scooter.webp b/scoots/images/heros/electric-scooter.webp
new file mode 100644
index 0000000..80ad358
Binary files /dev/null and b/scoots/images/heros/electric-scooter.webp differ
diff --git a/scoots/pages/test.html b/scoots/pages/test.html
index c7f9b4a..d6d57db 100644
--- a/scoots/pages/test.html
+++ b/scoots/pages/test.html
@@ -216,176 +216,6 @@ <h2 class="">
             </div>
         </div>
 
-        <!-- component -->
-        <div class="bg-gray-100 min-h-screen py-12 flex items-center justify-center">
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Pricing Card 1 -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
-                    <div class="p-1 bg-blue-200"></div>
-                    <div class="p-8">
-                        <h2 class="text-3xl font-bold text-gray-800 mb-4">Basic Plan</h2>
-                        <p class="text-gray-600 mb-6">Ideal for small businesses</p>
-                        <p class="text-4xl font-bold text-gray-800 mb-6">$19.99</p>
-                        <ul class="text-sm text-gray-600 mb-6">
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                10 Users
-                            </li>
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                Basic Features
-                            </li>
-                            <li class="flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                24/7 Support
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="p-4">
-                        <button
-                            class="w-full bg-blue-500 text-white rounded-full px-4 py-2 hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue active:bg-blue-800"
-                        >
-                            Select Plan
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Pricing Card 2 -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
-                    <div class="p-1 bg-green-200"></div>
-                    <div class="p-8">
-                        <h2 class="text-3xl font-bold text-gray-800 mb-4">Pro Plan</h2>
-                        <p class="text-gray-600 mb-6">Perfect for growing businesses</p>
-                        <p class="text-4xl font-bold text-gray-800 mb-6">$49.99</p>
-                        <ul class="text-sm text-gray-600 mb-6">
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                25 Users
-                            </li>
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                Advanced Features
-                            </li>
-                            <li class="flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                24/7 Support
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="p-4">
-                        <button
-                            class="w-full bg-green-500 text-white rounded-full px-4 py-2 hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800"
-                        >
-                            Select Plan
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Pricing Card 3 -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
-                    <div class="p-1 bg-purple-200"></div>
-                    <div class="p-8">
-                        <h2 class="text-3xl font-bold text-gray-800 mb-4">Enterprise Plan</h2>
-                        <p class="text-gray-600 mb-6">For large-scale enterprises</p>
-                        <p class="text-4xl font-bold text-gray-800 mb-6">$99.99</p>
-                        <ul class="text-sm text-gray-600 mb-6">
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                Unlimited Users
-                            </li>
-                            <li class="mb-2 flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http
-  
-  ://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                Premium Features
-                            </li>
-                            <li class="flex items-center">
-                                <svg
-                                    class="w-4 h-4 mr-2 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
-                                24/7 Priority Support
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="p-4">
-                        <button
-                            class="w-full bg-purple-500 text-white rounded-full px-4 py-2 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple active:bg-purple-800"
-                        >
-                            Select Plan
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
+      
     </body>
 </html>
diff --git a/scoots/styles/main.css b/scoots/styles/main.css
index fcd722e..fded827 100644
--- a/scoots/styles/main.css
+++ b/scoots/styles/main.css
@@ -441,7 +441,6 @@ address div p {
 
 .hero-info section h2 {
     font-size: 2.25rem;
-    line-height: 2.5rem;
     font-weight: 800;
     letter-spacing: -0.025em;
     line-height: 2.5rem;
@@ -521,6 +520,35 @@ address div p {
         width: 100%;
     }
 }
+
+.contact-hero {
+    background-image: url("../images/heros/electric-scooter.webp");
+    background-position: center;
+    background-size: cover;
+    width: 100vw;
+    height: 50vh;
+}
+.overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
+    width: 100%;
+    height: 100%;
+}
+.overlay h2 {
+    font-size: 2.25rem;
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    line-height: 2.5rem;
+}
+.overlay p {
+    margin-top: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+}
 /* *********************************
     // END Hero Section Styles
 ************************************ */
@@ -683,3 +711,79 @@ h5 {
         flex-direction: row;
     }
 }
+
+/* *********************************
+    Contact Page Styles
+************************************ */
+.contact-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    padding: 20px 80px;
+    color: var(--text-color-header);
+}
+.contact-body {
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+.contact-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    order: 1;
+}
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    order:2;
+}
+@media (min-width: 768px) {
+    .contact-body {
+        flex-direction: row;
+        gap: 25;
+    }
+}
+
+fieldset {
+    margin: 1rem 0;
+    border: 1px solid var(--text-color-header);
+    border-radius: 10px;
+    padding: 0.5rem 2%;
+}
+fieldset:last-of-type {
+    margin-bottom: 5px;
+}
+legend {
+    color: var(--text-color-header);
+    margin: 0 1rem;
+    padding: 0 0.5rem;
+}
+fieldset label.top,
+fieldset div {
+    display: block;
+    padding-top: 1rem;
+    color: var(--text-color-header);
+    font-size: 0.8rem;
+}
+fieldset label.top input,
+fieldset label.top textarea,
+fieldset label.top select {
+    -webkit-appearance: none;
+    display: block;
+    font-size: 1rem;
+    border: solid 1px #999;
+    border-radius: 4px;
+    padding: 0.75rem;
+    background-color: rgba(0, 0, 0, 0.1);
+    color: var(--text-color-main);
+    width: 100%;
+    max-width: 20rem;
+}