diff --git a/frontend/src/pages/ContactUsPage.vue b/frontend/src/pages/ContactUsPage.vue
index b4451ec..1d380ea 100644
--- a/frontend/src/pages/ContactUsPage.vue
+++ b/frontend/src/pages/ContactUsPage.vue
@@ -113,14 +113,13 @@
         </div>
 
         <q-card flat class="map-card">
-          <div class="map-placeholder">
-            <q-icon name="place" size="44px" color="primary" />
-            <div class="map-title">403, Port Washington Road, Canada</div>
-            <div class="map-text">
-              Interactive map placeholder ready to be replaced with your real embed
-              or location component.
-            </div>
-          </div>
+          <iframe
+            class="map-frame"
+            :src="mapEmbedUrl"
+            title="Clinic location map"
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
+          />
         </q-card>
       </div>
     </section>
@@ -158,6 +157,9 @@ const socialLinks = [
   { icon: instagramIconUrl, label: 'Instagram' },
   { icon: whatsappIconUrl, label: 'WhatsApp' },
 ];
+
+const mapEmbedUrl =
+  'https://maps.google.com/maps?q=403%20Port%20Washington%20Road%2C%20Canada&z=14&output=embed';
 </script>
 
 <style lang="sass" scoped>
@@ -289,23 +291,17 @@ const socialLinks = [
   overflow: hidden
   padding: 18px
 
-.map-placeholder
-  display: grid
-  place-items: center
-  min-height: 380px
-  padding: 32px
+.map-frame
+  display: block
+  width: 100%
+  height: 550px
+  border: 0
   border-radius: 24px
-  background: linear-gradient(135deg, rgba(223, 247, 238, 0.92) 0%, rgba(219, 234, 254, 0.92) 100%)
-  text-align: center
+  filter: grayscale(1)
+  transition: filter 0.2s ease
 
-.map-title
-  margin-top: 14px
-  font-size: 1.3rem
-  font-weight: 800
-
-.map-text
-  max-width: 540px
-  margin-top: 10px
+.map-frame:hover
+  filter: grayscale(0)
 
 @media (max-width: 1023px)
   .contact-layout