diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
index 95e6a31..34fb323 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
@@ -638,12 +638,315 @@ late particularay
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     border-color: #C0A062;
     background: #ffffff;
+    animation: templateHoverPulse 0.6s ease-in-out;
+}
+
+/* Enhanced hover animation */
+@keyframes templateHoverPulse {
+    0% {
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+    }
+    50% {
+        box-shadow: 0 25px 60px rgba(192, 160, 98, 0.25);
+    }
+    100% {
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    }
+}
+
+/* Additional hover effects for template content */
+.template-card:hover .template-content {
+    transform: translateY(-2px);
+    transition: transform 0.3s ease;
+}
+
+/* Hover effect for template titles */
+.template-card:hover h1,
+.template-card:hover h2,
+.template-card:hover h3 {
+    color: #C0A062;
+    transition: color 0.3s ease;
+}
+
+/* Hover effect for template preview images */
+.template-card:hover .gallery-item,
+.template-card:hover .hero,
+.template-card:hover .p1-image-side,
+.template-card:hover .p2-image,
+.template-card:hover .vision-image {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+    filter: brightness(1.1);
+}
+
+/* Hover effect for buttons within templates */
+.template-card:hover .cta-btn,
+.template-card:hover .btn {
+    background: #C0A062 !important;
+    color: white !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.3);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property stats */
+.template-card:hover .stat-item,
+.template-card:hover .feature-item {
+    color: #C0A062;
+    transform: translateX(5px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for amenities and lists */
+.template-card:hover .amenity-item,
+.template-card:hover .amenities-list li {
+    color: #C0A062;
+    transform: translateX(8px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for icons */
+.template-card:hover .fa-solid,
+.template-card:hover .fa-check {
+    color: #C0A062;
+    transform: scale(1.2);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property details */
+.template-card:hover .spec-item,
+.template-card:hover .item {
+    border-left: 3px solid #C0A062;
+    padding-left: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for contact info */
+.template-card:hover .agent-info,
+.template-card:hover .contact-info {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for cover elements */
+.template-card:hover .cover-title,
+.template-card:hover .main-title,
+.template-card:hover .p1-main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for gallery items */
+.template-card:hover .gallery-item span {
+    background: rgba(192, 160, 98, 0.9);
+    color: white;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for page numbers and footers */
+.template-card:hover .page-number,
+.template-card:hover .page-footer-bar {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for newsletter-style template */
+.template-card:hover .newsletter-header h2 {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for modern home template elements */
+.template-card:hover .property-name,
+.template-card:hover .property-address {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for grand oak template */
+.template-card:hover .cover-title,
+.template-card:hover .p1-main-title {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for vertice template */
+.template-card:hover .main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for serenity template */
+.template-card:hover .p1-main-title {
+    color: #C0A062;
+    transform: translateY(-2px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for price displays */
+.template-card:hover .price,
+.template-card:hover .priceDisplay {
+    color: #C0A062;
+    font-weight: 700;
+    transform: scale(1.05);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for reference IDs */
+.template-card:hover .reference-id,
+.template-card:hover .p1-ref-id {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for collection badges */
+.template-card:hover .collection {
+    background: #C0A062;
+    color: white;
+    padding: 4px 12px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for area displays */
+.template-card:hover .area {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for section titles */
+.template-card:hover .section-title {
+    border-bottom: 2px solid #C0A062;
+    padding-bottom: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for description text */
+.template-card:hover .description p,
+.template-card:hover .pull-quote {
+    color: #555;
+    line-height: 1.7;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for pull quotes */
+.template-card:hover .pull-quote {
+    border-left: 4px solid #C0A062;
+    padding-left: 16px;
+    font-style: italic;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for floor plan stats */
+.template-card:hover .floorplan-stats-p5 .stat {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for highlights list */
+.template-card:hover .highlights-list-p6 li {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin: 2px 0;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property field displays */
+.template-card:hover .property-field {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for owner info */
+.template-card:hover .owner-info {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 8px;
+    border-radius: 8px;
+    border-left: 3px solid #C0A062;
+    transition: all 0.3s ease;
 }
 
 .template-card.selected {
     border: 3px solid #000000 !important; /* Black selected border */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     transform: translateY(-6px);
+    animation: selectedPulse 2s ease-in-out infinite;
+}
+
+/* Selected state animation */
+@keyframes selectedPulse {
+    0%, 100% {
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+    50% {
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* Enhanced selected indicator */
+.selected-indicator {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.4);
+    animation: selectedIndicatorBounce 0.6s ease-out;
+    z-index: 10;
+}
+
+@keyframes selectedIndicatorBounce {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.2) rotate(-90deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+.selected-icon {
+    font-size: 14px;
+    animation: checkmarkPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes checkmarkPulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
 }
 
 /* Template Heights - Masonry Zigzag Layout */
diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
index a49ca80..fd3e9b1 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
@@ -1507,7 +1507,9 @@ export default class PropertyTemplateSelector extends LightningElement {
     tempDiv.innerHTML = htmlContent;
 
     // Remove preview-only UI like no-image placeholders
-    const previewOnly = tempDiv.querySelectorAll('[data-preview-only="true"], .floating-placeholder, .placeholder-badge, .placeholder-bubble');
+    const previewOnly = tempDiv.querySelectorAll(
+      '[data-preview-only="true"], .floating-placeholder, .placeholder-badge, .placeholder-bubble'
+    );
     previewOnly.forEach((el) => el.remove());
 
     // Ensure list styling is preserved in output
@@ -2257,7 +2259,10 @@ export default class PropertyTemplateSelector extends LightningElement {
         .replace(/\"/g, """)
         .replace(/'/g, "'");
 
-    const lines = raw.replace(/\r\n?/g, "\n").split("\n").map((l) => l.trim());
+    const lines = raw
+      .replace(/\r\n?/g, "\n")
+      .split("\n")
+      .map((l) => l.trim());
 
     const bulletRe = /^\s*(?:[-*•]|\u2022)\s+(.*)$/; // -,*,• bullets
     const numberedRe = /^\s*(\d+)[\.)]\s+(.*)$/; // 1. or 1)
@@ -2422,7 +2427,7 @@ export default class PropertyTemplateSelector extends LightningElement {
     }
 
     return amenities
-      .map((a) => `<li><i class=\"fa-solid fa-check\"></i> ${a}</li>`) 
+      .map((a) => `<li><i class=\"fa-solid fa-check\"></i> ${a}</li>`)
       .join("");
   }
   // Template methods
@@ -2647,15 +2652,15 @@ export default class PropertyTemplateSelector extends LightningElement {
 
   createModernHomeTemplate() {
     const data = this.propertyData || {};
-    const propertyName = data.Name || data.propertyName || "Property Name";
-    const propertyType =
-      data.Property_Type__c || data.propertyType || "Property Type";
-    const location = data.Address__c || data.location || "Location";
-    const price = data.Price__c || data.price || "Price on Request";
-    const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
-    const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
-    const area = data.Square_Feet__c || data.area || "N/A";
-    
+    console.log("data-----------", data);
+    const propertyName = data.Name || data.propertyName;
+    const propertyType = data.Property_Type__c || data.propertyType;
+    const location = data.Address__c || data.location;
+    const price = data.Price__c || data.price;
+    const bedrooms = data.Bedrooms__c || data.bedrooms;
+    const bathrooms = data.Bathrooms__c || data.bathrooms;
+    const area = data.Square_Feet__c || data.area;
+
     const description = this.formatDescriptionForPDF(
       data.Description_English__c ||
         data.descriptionEnglish ||
@@ -2687,37 +2692,37 @@ export default class PropertyTemplateSelector extends LightningElement {
     const furnishing = data.Furnished__c || data.furnished || "N/A";
     const maintenanceFee =
       data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
-    const serviceCharge =
-      data.Service_Charge__c || data.serviceCharge || "N/A";
+    const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
 
     const ownerName = data.Owner_Name__c || data.ownerName || "N/A";
     const ownerPhone = data.Owner_Phone__c || data.ownerPhone || "N/A";
 
-    const landmarks =
-      data.Nearby_Landmarks__c || data.nearbyLandmarks || "N/A";
+    const landmarks = data.Nearby_Landmarks__c || data.nearbyLandmarks || "N/A";
     const transportation =
       data.Transportation__c || data.transportation || "N/A";
     const schools = data.Schools__c || data.schools || "N/A";
     const hospitals = data.Hospitals__c || data.hospitals || "N/A";
-    const shopping =
-      data.Shopping_Centers__c || data.shoppingCenters || "N/A";
+    const shopping = data.Shopping_Centers__c || data.shoppingCenters || "N/A";
     const airportDistance =
       data.Airport_Distance__c || data.airportDistance || "N/A";
 
     const petFriendly =
-      data.Pet_Friendly__c !== undefined
+      data.Pet_Friendly__c !== "N/A"
         ? data.Pet_Friendly__c
           ? "Yes"
           : "No"
         : data.petFriendly || "N/A";
     const smokingAllowed =
-      data.Smoking_Allowed__c !== undefined
+      data.Smoking_Allowed__c !== "N/A"
         ? data.Smoking_Allowed__c
           ? "Yes"
           : "No"
         : data.smokingAllowed || "N/A";
     const availableFrom =
-      data.Rent_Available_From__c || data.Available_From__c || data.availableFrom || "N/A";
+      data.Rent_Available_From__c ||
+      data.Available_From__c ||
+      data.availableFrom ||
+      "N/A";
     const minimumContract =
       data.Minimum_Contract__c || data.minimumContract || "N/A";
     const securityDeposit =
@@ -2739,8 +2744,11 @@ export default class PropertyTemplateSelector extends LightningElement {
         const chunkHTML = chunk
           .map((img, idx) => {
             const title =
-              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
-            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+              img.title ||
+              img.pcrm__Title__c ||
+              `Property Image ${i + idx + 1}`;
+            const extraStyle =
+              idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
             return `<img src="${img.url}" alt="${title}" style="width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}"/>`;
           })
           .join("");
@@ -3137,7 +3145,7 @@ export default class PropertyTemplateSelector extends LightningElement {
                     <div class="stats">
                         <span class="stat-item"><i class="fa-solid fa-bed"></i> ${bedrooms} Beds</span>
                         <span class="stat-item"><i class="fa-solid fa-bath"></i> ${bathrooms} Baths</span>
-                        <span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> ${area} sq. ft.</span>
+                        <span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> ${area}</span>
                     </div>
                 </div>
             </div>
@@ -3151,12 +3159,12 @@ export default class PropertyTemplateSelector extends LightningElement {
             
             <div class="agent-footer">
                 <div class="agent-info">
-                    <h3>${agentName}</h3>
+                    <h3>${this.propertyData.contactName}</h3>
                     <p>Your Real Estate Professional</p>
                 </div>
                 <div class="agent-contact-details">
-                    <p>${agentPhone}</p>
-                    <p>${agentEmail}</p>
+                    <p>${this.propertyData.contactPhone}</p>
+                    <p>${this.propertyData.contactEmail}</p>
                 </div>
             </div>
         </div>
@@ -3205,7 +3213,9 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <strong>Reference ID:</strong> ${referenceId}
             </div>
             <div class="owner-info">
-                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
+                <strong>Owner Info:</strong> ${
+                  this.propertyData.contactEmail
+                }, ${this.propertyData.contactPhone}
             </div>
         </footer>
     </div>
@@ -3215,27 +3225,49 @@ export default class PropertyTemplateSelector extends LightningElement {
             <div>
                 <h2 class="section-title">Location & Nearby</h2>
                 <div class="nearby-list">
-                    <div class="nearby-item"><i class="icon fa-solid fa-location-dot"></i><div><strong>Landmarks:</strong> <span>${landmarks}</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-train-subway"></i><div><strong>Transportation:</strong> <span>${transportation}</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-graduation-cap"></i><div><strong>Schools:</strong> <span>${schools}</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-hospital"></i><div><strong>Hospitals:</strong> <span>${hospitals}</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-cart-shopping"></i><div><strong>Shopping:</strong> <span>${shopping}</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-plane-departure"></i><div><strong>Airport:</strong> <span>${airportDistance}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-location-dot"></i><div><strong>City:</strong> <span>${
+                      this.propertyData.city
+                    }</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-train-subway"></i><div><strong>Community:</strong> <span>${
+                      this.propertyData.community
+                    }</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-graduation-cap"></i><div><strong>Sub Community:</strong> <span>${
+                      this.propertyData.subCommunity
+                    }</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-hospital"></i><div><strong>Locality:</strong> <span>${
+                      this.propertyData.locality
+                    }</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-cart-shopping"></i><div><strong>Tower:</strong> <span>${
+                      this.propertyData.tower
+                    }</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-plane-departure"></i><div><strong>Unit Number:</strong> <span>${
+                      this.propertyData.unitNumber
+                    }</span></div></div>
                 </div>
             </div>
             <div class="map-container">
-                <img src="${mapsImageUrl}" />
+                <img src="${this.getRandomImage()}" />
             </div>
         </section>
 
         <section class="additional-info-section">
             <h2 class="section-title">Additional Information</h2>
             <div class="info-list">
-                <div class="info-item"><strong>Pet Friendly:</strong> <span>${petFriendly}</span></div>
-                <div class="info-item"><strong>Smoking:</strong> <span>${smokingAllowed}</span></div>
-                <div class="info-item"><strong>Available From:</strong> <span>${availableFrom}</span></div>
-                <div class="info-item"><strong>Minimum Contract:</strong> <span>${minimumContract}</span></div>
-                <div class="info-item"><strong>Security Deposit:</strong> <span>${securityDeposit}</span></div>
+                <div class="info-item"><strong>Available From:</strong> <span>${
+                  this.propertyData.rentAvailableFrom
+                }</span></div>
+                <div class="info-item"><strong>Rent Available To:</strong> <span>${
+                  this.propertyData.rentAvailableTo
+                }</span></div>
+                <div class="info-item"><strong>Smoking:</strong> <span>${
+                  this.propertyData.smokingAllowed
+                }</span></div>
+                <div class="info-item"><strong>Minimum Contract:</strong> <span>${
+                  this.propertyData.minimumContract
+                }</span></div>
+                <div class="info-item"><strong>Security Deposit:</strong> <span>${
+                  this.propertyData.securityDeposit
+                }</span></div>
             </div>
         </section>
 
@@ -3244,7 +3276,9 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <strong>Reference ID:</strong> ${referenceId}
             </div>
             <div class="owner-info">
-                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
+                <strong>Owner Info:</strong> ${
+                  this.propertyData.contactEmail
+                }, ${this.propertyData.contactPhone}
             </div>
         </footer>
     </div>
@@ -3382,12 +3416,8 @@ ${galleryPagesHTML}
 
     // Enhanced property data extraction with better fallbacks
     const propertyName =
-      data.Name ||
-      data.propertyName ||
-      data.pcrm__Title_English__c;
-    const location =
-      data.Address__c ||
-      data.location;
+      data.Name || data.propertyName || data.pcrm__Title_English__c;
+    const location = data.Address__c || data.location;
     const price =
       data.Sale_Price_Min__c ||
       data.Rent_Price_Min__c ||
@@ -3397,15 +3427,13 @@ ${galleryPagesHTML}
       data.pcrm__Title_English__c || data.Name || data.propertyName;
     const bedrooms = data.Bedrooms__c || data.bedrooms;
     const bathrooms = data.Bathrooms__c || data.bathrooms;
-    const squareFeet =
-      data.Square_Feet__c || data.squareFeet || data.area;
+    const squareFeet = data.Square_Feet__c || data.squareFeet || data.area;
     const status = (data.Status__c || data.status).toString();
 
     // Enhanced property details
     const propertyType = data.Property_Type__c || data.propertyType;
     const yearBuilt = data.Build_Year__c || data.yearBuilt;
-    const furnishing =
-      data.Furnished__c || data.furnishing;
+    const furnishing = data.Furnished__c || data.furnishing;
     const parking = data.Parking_Spaces__c || data.parking;
     const description = this.formatDescriptionForPDF(
       data.Description_English__c ||
@@ -3413,9 +3441,8 @@ ${galleryPagesHTML}
         data.description ||
         "An exquisite villa offering unparalleled luxury and sophistication in one of the most prestigious locations."
     );
-    const floor = data.Floor__c || data.floor 
-    const maintenanceFee =
-      data.Maintenance_Fee__c || data.maintenanceFee;
+    const floor = data.Floor__c || data.floor;
+    const maintenanceFee = data.Maintenance_Fee__c || data.maintenanceFee;
     const serviceCharge = data.Service_Charge__c || data.serviceCharge;
 
     // Additional property details
@@ -3430,10 +3457,9 @@ ${galleryPagesHTML}
     const hoa = data.HOA__c || data.hoa;
     const hoaFee = data.HOA_Fee__c || data.hoaFee;
     const taxYear = data.Tax_Year__c || data.taxYear;
-    const taxAmount = data.Tax_Amount__c || data.taxAmount ;
-    const lastSold = data.Last_Sold__c || data.lastSold ;
-    const lastSoldPrice =
-      data.Last_Sold_Price__c || data.lastSoldPrice ;
+    const taxAmount = data.Tax_Amount__c || data.taxAmount;
+    const lastSold = data.Last_Sold__c || data.lastSold;
+    const lastSoldPrice = data.Last_Sold_Price__c || data.lastSoldPrice;
 
     // Location and POI data
     const schools = data.Schools__c || data.schools || "N/A";
@@ -3446,39 +3472,27 @@ ${galleryPagesHTML}
     const transportation =
       data.Transportation__c || data.transportation || "N/A";
     const hospitals = data.Hospitals__c || data.hospitals || "N/A";
-    const beachDistance =
-      data.Beach_Distance__c || data.beachDistance || "N/A";
-    const metroDistance =
-      data.Metro_Distance__c || data.metroDistance || "N/A";
+    const beachDistance = data.Beach_Distance__c || data.beachDistance || "N/A";
+    const metroDistance = data.Metro_Distance__c || data.metroDistance || "N/A";
 
     // Additional information
     const petFriendly = data.Pet_Friendly__c || data.petFriendly;
-    const smokingAllowed =
-      data.Smoking_Allowed__c || data.smokingAllowed;
-    const availableFrom =
-      data.Available_From__c || data.availableFrom;
-    const minimumContract =
-      data.Minimum_Contract__c || data.minimumContract;
-    const securityDeposit =
-      data.Security_Deposit__c || data.securityDeposit;
+    const smokingAllowed = data.Smoking_Allowed__c || data.smokingAllowed;
+    const availableFrom = data.Available_From__c || data.availableFrom;
+    const minimumContract = data.Minimum_Contract__c || data.minimumContract;
+    const securityDeposit = data.Security_Deposit__c || data.securityDeposit;
     const utilitiesIncluded =
-      data.Utilities_Included__c ||
-      data.utilitiesIncluded;
-    const internetIncluded =
-      data.Internet_Included__c || data.internetIncluded;
+      data.Utilities_Included__c || data.utilitiesIncluded;
+    const internetIncluded = data.Internet_Included__c || data.internetIncluded;
     const cableIncluded = data.Cable_Included__c || data.cableIncluded;
 
     // Agent and owner information
     const agentName = data.Agent_Name__c || data.agentName;
-    const agentPhone =
-      data.Agent_Phone__c || data.agentPhone;
-    const agentEmail =
-      data.Agent_Email__c || data.agentEmail ;
-    const ownerName = data.Owner_Name__c || data.ownerName ;
-    const ownerPhone =
-      data.Owner_Phone__c || data.ownerPhone ;
-    const ownerEmail =
-      data.Owner_Email__c || data.ownerEmail;
+    const agentPhone = data.Agent_Phone__c || data.agentPhone;
+    const agentEmail = data.Agent_Email__c || data.agentEmail;
+    const ownerName = data.Owner_Name__c || data.ownerName;
+    const ownerPhone = data.Owner_Phone__c || data.ownerPhone;
+    const ownerEmail = data.Owner_Email__c || data.ownerEmail;
     // Get smart images
     const exteriorImage = this.getExteriorImageUrl();
     const interiorImage1 = this.getSmartImageForSection(
@@ -3516,8 +3530,11 @@ ${galleryPagesHTML}
         const chunkHTML = chunk
           .map((img, idx) => {
             const title =
-              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
-            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+              img.title ||
+              img.pcrm__Title__c ||
+              `Property Image ${i + idx + 1}`;
+            const extraStyle =
+              idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
             return `<img src="${img.url}" alt="${title}" style="width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}"/>`;
           })
           .join("");
@@ -3538,7 +3555,7 @@ ${galleryPagesHTML}
     }
 
     // Return the complete Grand Oak Villa template with all dynamic data
-  return `<!DOCTYPE html>
+    return `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -3708,8 +3725,8 @@ ${galleryPagesHTML}
         }
         .description p {
             font-size: 0.95rem;
-            line-height: 1.8;
-            margin: 0 0 15px 0;
+            line-height: 1.2;
+            margin: 0 0 8px 0;
             color: var(--color-text-primary);
         }
         .specs-and-amenities {
@@ -3833,30 +3850,13 @@ ${galleryPagesHTML}
                     </div>
                 </div>
 
-                <div class="specs-and-amenities">
-                    <div>
-                        <h2 class="section-title">Specifications</h2>
-                        <div class="spec-list">
-                            <div class="item"><span class="key">Reference ID:</span> <span class="value">${referenceId}</span></div>
-                            <div class="item"><span class="key">Status:</span> <span class="value">${status}</span></div>
-                            <div class="item"><span class="key">Type:</span> <span class="value">${propertyType}</span></div>
-                            <div class="item"><span class="key">Year Built:</span> <span class="value">${yearBuilt}</span></div>
-                            <div class="item"><span class="key">Floor:</span> <span class="value">${floor}</span></div>
-                            <div class="item"><span class="key">Parking:</span> <span class="value">${parking}</span></div>
-                            <div class="item"><span class="key">Furnishing:</span> <span class="value">${furnishing}</span></div>
-                            <div class="item"><span class="key">Maintenance Fee:</span> <span class="value">${maintenanceFee}</span></div>
-                            <div class="item"><span class="key">Service Charge:</span> <span class="value">${serviceCharge}</span></div>
-                        </div>
-                    </div>
-                    <div>
-                        <h2 class="section-title">Amenities & Features</h2>
-                        <ul class="amenities-list">${this.generateAmenitiesListItems(data)}</ul>
-                    </div>
-                </div>
+               
             </main>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Agent:</strong> ${this.propertyData.contactEmail} | ${
+      this.propertyData.contactPhone
+    } | ${this.propertyData.contactName}</div>
             <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
@@ -3872,49 +3872,61 @@ ${galleryPagesHTML}
                 <div class="poi-grid" style="margin-top: 12px;">
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-school"></i></div>
-                        <div class="title">Schools</div>
-                        <div class="details">${schools}</div>
+                        <div class="title">City</div>
+                        <div class="details">${this.propertyData.city}</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-shopping-cart"></i></div>
-                        <div class="title">Shopping</div>
-                        <div class="details">${shoppingCenters}</div>
+                        <div class="title">Community</div>
+                        <div class="details">${
+                          this.propertyData.community
+                        }</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-plane"></i></div>
-                        <div class="title">Airport</div>
-                        <div class="details">${airportDistance}</div>
+                        <div class="title">Sub Community</div>
+                        <div class="details">${
+                          this.propertyData.subCommunity
+                        }</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-landmark"></i></div>
-                        <div class="title">Landmarks</div>
-                        <div class="details">${nearbyLandmarks}</div>
+                        <div class="title">Locality</div>
+                        <div class="details">${this.propertyData.locality}</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-bus"></i></div>
-                        <div class="title">Transportation</div>
-                        <div class="details">${transportation}</div>
+                        <div class="title">Tower</div>
+                        <div class="details">${this.propertyData.tower}</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-hospital"></i></div>
-                        <div class="title">Hospitals</div>
-                        <div class="details">${hospitals}</div>
+                        <div class="title">Unit Number</div>
+                        <div class="details">${
+                          this.propertyData.unitNumber
+                        }</div>
                     </div>
                     <div class="poi-item" style="break-inside: avoid;">
                         <div class="icon"><i class="fa-solid fa-umbrella-beach"></i></div>
-                        <div class="title">Beach</div>
-                        <div class="details">${beachDistance}</div>
+                        <div class="title">Sale Price (Min):</div>
+                        <div class="details">${
+                          this.propertyData.beachDistance
+                        }</div>
                     </div>
                      <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-subway"></i></div>
-                        <div class="title">Metro</div>
-                        <div class="details">${metroDistance}</div>
+                        <div class="title">Sale Price (Max):</div>
+                        <div class="details">${
+                          this.propertyData.salePriceMax
+                        }</div>
                     </div>
                 </div>
             </div>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Agent:</strong> ${this.propertyData.contactEmail} | ${
+      this.propertyData.contactPhone
+    } | ${this.propertyData.contactName}</div>
             <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
@@ -3926,31 +3938,33 @@ ${galleryPagesHTML}
                 <span class="property-name">${propertyName}</span>
             </header>
             <main class="main-content page-split-layout">
-                <section class="gallery-section">
-                    <h2 class="section-title">A Glimpse Inside</h2>
-                    <div class="photo-grid">
-                        <div class="photo-item photo-item-1"></div>
-                        <div class="photo-item photo-item-2"></div>
-                        <div class="photo-item photo-item-3"></div>
-                    </div>
-                </section>
+               
                 <section class="additional-info-section">
                     <h2 class="section-title">Additional Information</h2>
                     <div class="spec-list">
-                        <div class="item"><span class="key">Pet Friendly:</span> <span class="value">${petFriendly}</span></div>
-                        <div class="item"><span class="key">Smoking:</span> <span class="value">${smokingAllowed}</span></div>
-                        <div class="item"><span class="key">Available From:</span> <span class="value">${availableFrom}</span></div>
-                        <div class="item"><span class="key">Minimum Contract:</span> <span class="value">${minimumContract}</span></div>
-                        <div class="item"><span class="key">Security Deposit:</span> <span class="value">${securityDeposit}</span></div>
-                        <div class="item"><span class="key">Utilities Included:</span> <span class="value">${utilitiesIncluded}</span></div>
-                        <div class="item"><span class="key">Internet Included:</span> <span class="value">${internetIncluded}</span></div>
-                        <div class="item"><span class="key">Cable Included:</span> <span class="value">${cableIncluded}</span></div>
+                        <div class="item"><span class="key">Parking Spaces:</span> <span class="value">${
+                          this.propertyData.parkingSpaces
+                        }</span></div>
+                        <div class="item"><span class="key">Offering Type:</span> <span class="value">${
+                          this.propertyData.offeringType
+                        }</span></div>
+                        <div class="item"><span class="key">Furnished:</span> <span class="value">${
+                          this.propertyData.furnished
+                        }</span></div>
+                        <div class="item"><span class="key">Available From:</span> <span class="value">${
+                          this.propertyData.rentAvailableFrom
+                        }</span></div>
+                        <div class="item"><span class="key">Available To:</span> <span class="value">${
+                          this.propertyData.rentAvailableTo
+                        }</span></div>
                     </div>
                 </section>
             </main>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Agent:</strong> ${this.propertyData.contactEmail} | ${
+      this.propertyData.contactPhone
+    } | ${this.propertyData.contactName}</div>
             <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
@@ -3960,7 +3974,7 @@ ${galleryPagesHTML}
 
 </body>
 </html>
-`
+`;
   }
 
   createSerenityHouseTemplate() {
@@ -4040,7 +4054,8 @@ ${galleryPagesHTML}
 
     // Additional dynamic fields
     const floor = data.Floor__c || data.floor || "N/A";
-    const maintenanceFee = data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
+    const maintenanceFee =
+      data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
     const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
     const acres = data.Lot_Size__c || data.acres || "N/A";
 
@@ -4056,8 +4071,11 @@ ${galleryPagesHTML}
         const chunkHTML = chunk
           .map((img, idx) => {
             const title =
-              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
-            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+              img.title ||
+              img.pcrm__Title__c ||
+              `Property Image ${i + idx + 1}`;
+            const extraStyle =
+              idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
             return `<img src="${img.url}" alt="${title}" style="width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}"/>`;
           })
           .join("");
@@ -4221,10 +4239,10 @@ ${galleryPagesHTML}
         }
         .page-title-main {
             font-family: var(--font-serif);
-            font-size: 3.5rem;
+            font-size: 3rem;
             font-weight: 600;
             color: var(--color-text-primary);
-            margin: 0 0 15px 0;
+            margin: 0 0 1px 0;
             line-height: 1;
         }
         .page-title-sub {
@@ -4398,14 +4416,11 @@ ${galleryPagesHTML}
             <div class="p1-image-side"></div>
             <div class="p1-content-side">
                 <header class="p1-header">
-                    <div class="collection">Elysian Estates Collection</div>
                     <h1 class="p1-main-title">${propertyName}</h1>
                     <p class="p1-address">${location}</p>
-                    <p class="p1-ref-id">Reference ID: ${referenceId}</p>
                 </header>
                 <footer class="p1-footer">
-                    <div class="area">${squareFeet} Sq. Ft. • ${bedrooms} Bedrooms • ${bathrooms} Bathrooms</div>
-                    ${description}
+                    <div class="area">• ${squareFeet}  • ${bedrooms} Bedrooms • ${bathrooms} Bathrooms</div>
                     <br>
                     <strong>${priceDisplay}</strong>
                 </footer>
@@ -4459,7 +4474,9 @@ ${galleryPagesHTML}
                 <hr class="content-divider">
                 
                 <h3 class="section-title">Amenities & Features</h3>
-                <ul class="amenities-list">${this.generateAmenitiesListItems(data)}</ul>
+                <ul class="amenities-list">${this.generateAmenitiesListItems(
+                  data
+                )}</ul>
             </div>
         </div>
     </div>
@@ -4472,15 +4489,30 @@ ${galleryPagesHTML}
             <div class="p4-info-grid">
                 <div class="location-list">
                     <h2 class="p4-section-title">Location & Nearby</h2>
-                    <div class="item"><strong>Schools</strong> <span>${schools}</span></div>
-                    <div class="item"><strong>Shopping</strong> <span>${shopping}</span></div>
-                    <div class="item"><strong>Hospitals</strong> <span>${hospitals}</span></div>
-                    <div class="item"><strong>Country Club</strong> <span>${countryClub}</span></div>
-                    <div class="item"><strong>Airport</strong> <span>${airport}</span></div>
-                </div>
-                <div class="info-list">
+                    <div class="item"><strong>City</strong> <span>${
+                      this.propertyData.city
+                    }</span></div>
+                    <div class="item"><strong>Community</strong> <span>${
+                      this.propertyData.community
+                    }</span></div>
+                    <div class="item"><strong>Sub community</strong> <span>${
+                      this.propertyData.subCommunity
+                    }</span></div>
+                    <div class="item"><strong>Locality</strong> <span>${
+                      this.propertyData.locality
+                    }</span></div>
+                    <div class="item"><strong>Tower</strong> <span>${
+                      this.propertyData.tower
+                    }</span></div>
+                    </div>
+                    <div class="info-list">
                     <h2 class="p4-section-title">Additional Information</h2>
-                    <div class="info-item"><strong>Pet-Friendly</strong> <span>${petFriendly}</span></div>
+                    <div class="info-item"><strong>Available from</strong> <span>${
+                      this.propertyData.rentAvailableFrom
+                    }</span></div>
+                    <div class="info-item"><strong>Available to</strong> <span>${
+                      this.propertyData.rentAvailableTo
+                    }</span></div>
                     <div class="info-item"><strong>Smoking</strong> <span>${smoking}</span></div>
                     <div class="info-item"><strong>Availability</strong> <span>${availability}</span></div>
                     <div class="info-item"><strong>Utilities</strong> <span>${utilities}</span></div>
@@ -4489,7 +4521,7 @@ ${galleryPagesHTML}
 
             <hr class="content-divider">
 
-            <h2 class="p4-section-title">Floor Plan & Location</h2>
+            <h2 class="p4-section-title">Owner and Agent Information</h2>
             <div class="p4-floorplan-container"></div>
 
             <div class="p4-contact-row">
@@ -4550,11 +4582,14 @@ ${galleryPagesHTML}
     const parking =
       data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A";
     const floor = data.Floor__c || data.floor || "N/A";
-    const maintenanceFee = data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
+    const maintenanceFee =
+      data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
     const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
     const acres = data.acres || data.Lot_Size__c || "N/A";
     const priceDisplay =
-      price !== "Price on Request" ? `Residences Starting from ${price}` : "Price on Request";
+      price !== "Price on Request"
+        ? `Residences Starting from ${price}`
+        : "Price on Request";
 
     const agentName =
       data.contactName || data.Agent_Name__c || data.agentName || "N/A";
@@ -4565,7 +4600,8 @@ ${galleryPagesHTML}
 
     // Location and highlights
     const landmarks = data.Nearby_Landmarks__c || data.landmarks || "N/A";
-    const transportation = data.Transportation__c || data.transportation || "N/A";
+    const transportation =
+      data.Transportation__c || data.transportation || "N/A";
     const schools = data.Schools__c || data.schools || "N/A";
     const shopping = data.Shopping_Centers__c || data.shoppingCenters || "N/A";
     const airport = data.Airport_Distance__c || data.airportDistance || "N/A";
@@ -4593,8 +4629,11 @@ ${galleryPagesHTML}
         const chunkHTML = chunk
           .map((img, idx) => {
             const title =
-              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
-            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+              img.title ||
+              img.pcrm__Title__c ||
+              `Property Image ${i + idx + 1}`;
+            const extraStyle =
+              idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
             return `<img src=\"${img.url}\" alt=\"${title}\" style=\"width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}\"/>`;
           })
           .join("");
@@ -4797,7 +4836,7 @@ ${galleryPagesHTML}
             background-position: center;
         }
         .vision-text h3 {
-            font-size: 1.8rem;
+            font-size: 1.2rem;
             font-weight: 700;
             color: var(--color-dark);
             margin-bottom: 20px;
@@ -5027,7 +5066,11 @@ ${galleryPagesHTML}
             <div class="address">${location}</div>
         </div>
         <div class="cover-footer">
-            <span>${price !== "Price on Request" ? `Residences Starting from ${price}` : "Price on Request"}</span>
+            <span>${
+              price !== "Price on Request"
+                ? `Residences Starting from ${price}`
+                : "Price on Request"
+            }</span>
             <span>Ref ID: ${referenceId}</span>
         </div>
     </div>
@@ -5036,7 +5079,6 @@ ${galleryPagesHTML}
         <div class="page-container">
             <header class="page-header">
                 <h1 class="page-title">Elevated <span>Living</span></h1>
-                <span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
             </header>
             <main class="vision-grid">
                 <div class="vision-text"><h3>${propertyType} • ${status} • ${squareFeet} sq ft</h3>${description}</div>
@@ -5044,7 +5086,6 @@ ${galleryPagesHTML}
             </main>
             <footer class="page-footer-bar">
                 <span class="property-name">THE VERTICE</span>
-                <span>Page 02 / 06</span>
             </footer>
         </div>
     </div>
@@ -5052,13 +5093,11 @@ ${galleryPagesHTML}
     <div class="brochure-page">
         <div class="page-container">
             <header class="page-header">
-                <h1 class="page-title">Exquisite <span>Interiors</span></h1>
-                <span class="page-subtitle">A Canvas for Your Life</span>
+                <h1 class="page-title">Exquisite <span>Views</span></h1>
             </header>
-            <main class="gallery-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:180px;gap:20px;">${propertyGallery}</main>
+            <main class="gallery-grid p-2" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:180px;gap:20px;">${propertyGallery}</main>
              <footer class="page-footer-bar">
                 <span class="property-name">THE VERTICE</span>
-                <span>Page 03 / 06</span>
             </footer>
         </div>
     </div>
@@ -5067,15 +5106,35 @@ ${galleryPagesHTML}
         <div class="page-container">
             <header class="page-header">
                 <h1 class="page-title">Amenities & <span>Features</span></h1>
-                <span class="page-subtitle">Beyond the Expected</span>
             </header>
-            <p class="amenities-intro">An unrivaled collection of amenities offers residents a resort-style living experience. From the serene rooftop pool to the state-of-the-art wellness center, every detail is crafted for comfort, convenience, and luxury.</p>
-            <main class="page4-grid">
+<div class="Vision-grid align-items-start">
+                                            <div class="vision-text">
+                                                <span class="label">Parking Spaces:</span>
+                                                <span class="value">${
+                                                  this.propertyData
+                                                    .parkingSpaces
+                                                }</span>
+                                            </div>
+                                            <div class="vision-text">
+                                                <span class="label">Furnished:</span>
+                                                <span class="value">${
+                                                  this.propertyData.furnished
+                                                }</span>
+                                            </div>
+                                            <div class="vision-text">
+                                                <span class="label">Offering Type:</span>
+                                                <span class="value">${
+                                                  this.propertyData.offeringType
+                                                }</span>
+                                            </div>
+                                        </div>            <main class="page4-grid">
                 <div class="page4-image"></div>
                 <div class="page4-content">
                     <div>
                         <h3 class="section-title">Lifestyle Amenities</h3>
-                        <ul class="amenities-list-p4">${this.generateAmenitiesListItems(data)}</ul>
+                        <ul class="amenities-list-p4">${this.generateAmenitiesListItems(
+                          data
+                        )}</ul>
                     </div>
                     <div>
                         <h3 class="section-title">Key Specifications</h3>
@@ -5090,7 +5149,6 @@ ${galleryPagesHTML}
             </main>
              <footer class="page-footer-bar">
                 <span class="property-name">THE VERTICE</span>
-                <span>Page 04 / 06</span>
             </footer>
         </div>
     </div>
@@ -5108,23 +5166,30 @@ ${galleryPagesHTML}
                         <h4>Two-Bedroom Residence</h4>
                         <div class="floorplan-stats-p5">
                             <div class="stat">
-                                <div class="value">1,450</div>
+                                <div class="value">${
+                                  this.propertyData.size
+                                }</div>
                                 <div class="label">SQ. FT.</div>
                             </div>
                             <div class="stat">
-                                <div class="value">2</div>
+                                <div class="value">${
+                                  this.propertyData.bedrooms
+                                }</div>
                                 <div class="label">BEDROOMS</div>
                             </div>
                             <div class="stat">
-                                <div class="value">2</div>
+                                <div class="value">${
+                                  this.propertyData.bathrooms
+                                }</div>
                                 <div class="label">BATHROOMS</div>
                             </div>
                             <div class="stat">
-                                <div class="value">1</div>
-                                <div class="label">BALCONY</div>
+                                <div class="value">${
+                                  this.propertyData.floor
+                                }</div>
+                                <div class="label">Floors</div>
                             </div>
                         </div>
-                        <p class="description">A thoughtfully designed space perfect for urban professionals or small families, combining comfort with panoramic city views.</p>
                     </div>
                 </div>
                  <div class="floorplan-showcase">
@@ -5133,33 +5198,40 @@ ${galleryPagesHTML}
                         <h4>Three-Bedroom Penthouse</h4>
                         <div class="floorplan-stats-p5">
                             <div class="stat">
-                                <div class="value">3,200</div>
+                                <div class="value">${
+                                  this.propertyData.size
+                                }</div>
                                 <div class="label">SQ. FT.</div>
                             </div>
                             <div class="stat">
-                                <div class="value">3</div>
+                                <div class="value">${
+                                  this.propertyData.bedrooms
+                                }</div>
                                 <div class="label">BEDROOMS</div>
                             </div>
                             <div class="stat">
-                                <div class="value">3.5</div>
+                                <div class="value">${
+                                  this.propertyData.bathrooms
+                                }</div>
                                 <div class="label">BATHROOMS</div>
                             </div>
                             <div class="stat">
-                                <div class="value">1</div>
-                                <div class="label">TERRACE</div>
+                                <div class="value">${
+                                  this.propertyData.floor
+                                }</div>
+                                <div class="label">Floors</div>
                             </div>
                         </div>
-                        <p class="description">The pinnacle of luxury living, this penthouse offers expansive spaces, premium finishes, and exclusive access to a private rooftop terrace.</p>
                     </div>
                 </div>
                 <div>
                     <h3 class="section-title">Additional Information</h3>
                     <div class="additional-specs-grid">
-                        <div class="spec-item"><div class="label">Pets</div><div class="value">${petFriendly}</div></div>
-                        <div class="spec-item"><div class="label">Smoking</div><div class="value">${smoking}</div></div>
+                        <div class="spec-item"><div class="label">Available from</div><div class="value">${this.propertyData.rentAvailableFrom}</div></div>
+                        <div class="spec-item"><div class="label">Rent Available To</div><div class="value">${this.propertyData.rentAvailableTo}</div></div>
                         <div class="spec-item"><div class="label">Availability</div><div class="value">${availability}</div></div>
-                        <div class="spec-item"><div class="label">Parking</div><div class="value">${parking}</div></div>
-                        <div class="spec-item"><div class="label">Security Deposit</div><div class="value">${securityDeposit}</div></div>
+                        <div class="spec-item"><div class="label">Unit Number</div><div class="value">${this.propertyData.unitNumber}</div></div>
+                        <div class="spec-item"><div class="label">Offereing type</div><div class="value">${this.propertyData.offeringType}</div></div>
                         <div class="spec-item"><div class="label">Utilities</div><div class="value">${utilities}</div></div>
                     </div>
                 </div>
@@ -5178,32 +5250,32 @@ ${galleryPagesHTML}
                 <span class="page-subtitle">Your Future Awaits</span>
             </header>
             <main class="page6-main">
+                
                 <div>
-                    <h3 class="section-title">Schedule a Private Viewing</h3>
-                    <p>Experience The Vertice firsthand. Contact our sales executive to arrange an exclusive tour of the property and available residences.</p>
-                    <div class="contact-person-p6">
-                        <div class="name">Alexander Valentine</div>
-                        <div class="title">Sales Executive, Elysian Properties</div>
-                        <div class="details">
-                            (555) 123-9876<br>
-                            alex.v@elysian.com
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <h3 class="section-title">Neighborhood Highlights</h3>
                     <ul class="highlights-list-p6">
-                        <li><i class="fa-solid fa-tree-city"></i> <strong>Landmarks:</strong> Central Park (5 min)</li>
-                        <li><i class="fa-solid fa-train-subway"></i> <strong>Transportation:</strong> Metro Line A (2 min walk)</li>
-                        <li><i class="fa-solid fa-school"></i> <strong>Schools:</strong> Metropolis Intl. (10 min)</li>
-                        <li><i class="fa-solid fa-cart-shopping"></i> <strong>Shopping:</strong> The Galleria Mall (8 min)</li>
-                        <li><i class="fa-solid fa-plane-departure"></i> <strong>Airport:</strong> 25 min drive</li>
+                        <li><i class="fa-solid fa-tree-city"></i> <strong>City:</strong> ${
+                          this.propertyData.city
+                        }</li>
+                        <li><i class="fa-solid fa-train-subway"></i> <strong>Community:</strong> ${
+                          this.propertyData.community
+                        }</li>
+                        <li><i class="fa-solid fa-school"></i> <strong>Sub Community:</strong> ${
+                          this.propertyData.subCommunity
+                        }</li>
+                        <li><i class="fa-solid fa-cart-shopping"></i> <strong>Locality:</strong> ${
+                          this.propertyData.locality
+                        }</li>
+                        <li><i class="fa-solid fa-plane-departure"></i> <strong>Tower:</strong> ${
+                          this.propertyData.tower
+                        }</li>
+                        <li><i class="fa-solid fa-plane-departure"></i> <strong>Unit Number:</strong> ${
+                          this.propertyData.unitNumber
+                        }</li>
                     </ul>
                 </div>
             </main>
             <footer class="page-footer-bar">
                 <span class="property-name">THE VERTICE</span>
-                <span>Page 06 / 06</span>
             </footer>
         </div>
     </div>
@@ -5452,12 +5524,18 @@ ${galleryPagesHTML}
 
     const currentList = this.findParentList(range.commonAncestorContainer);
 
-    if (currentList && currentList.tagName.toLowerCase() === listType.toLowerCase()) {
+    if (
+      currentList &&
+      currentList.tagName.toLowerCase() === listType.toLowerCase()
+    ) {
       this.convertListToParagraph(currentList);
       return;
     }
 
-    if (currentList && currentList.tagName.toLowerCase() !== listType.toLowerCase()) {
+    if (
+      currentList &&
+      currentList.tagName.toLowerCase() !== listType.toLowerCase()
+    ) {
       this.convertListType(currentList, listType);
       return;
     }
@@ -5470,7 +5548,8 @@ ${galleryPagesHTML}
     let current = node;
     while (current && current !== document.body) {
       if (current.nodeType === Node.ELEMENT_NODE) {
-        if (current.tagName === "UL" || current.tagName === "OL") return current;
+        if (current.tagName === "UL" || current.tagName === "OL")
+          return current;
         if (current.tagName === "LI") return current.parentElement;
       }
       current = current.parentElement;
@@ -6501,10 +6580,7 @@ ${galleryPagesHTML}
     // Otherwise add a visual tab (4 NBSP) at the start of the current block
     const getBlock = (node) => {
       let n = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-      while (
-        n &&
-        !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)
-      ) {
+      while (n && !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)) {
         n = n.parentElement;
       }
       return n || editor;
@@ -6553,10 +6629,7 @@ ${galleryPagesHTML}
     // Otherwise, remove one indentation level (up to 4 NBSP/spaces) at start of the current block
     const getBlock = (node) => {
       let n = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-      while (
-        n &&
-        !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)
-      ) {
+      while (n && !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)) {
         n = n.parentElement;
       }
       return n || editor;
@@ -7552,7 +7625,9 @@ ${galleryPagesHTML}
         // Remove selection from other elements
         const editor = element.closest(".enhanced-editor-content");
         if (editor) {
-          const allDraggable = editor.querySelectorAll(".draggable-element, .draggable-image-container, .draggable-table-container");
+          const allDraggable = editor.querySelectorAll(
+            ".draggable-element, .draggable-image-container, .draggable-table-container"
+          );
           allDraggable.forEach((el) => {
             if (el !== element) el.classList.remove("selected");
           });
@@ -10739,7 +10814,8 @@ ${galleryPagesHTML}
       const placeholder = document.createElement("div");
       placeholder.style.width = currentWidth + "px";
       placeholder.style.height = currentHeight + "px";
-      placeholder.style.display = window.getComputedStyle(element).display || "inline-block";
+      placeholder.style.display =
+        window.getComputedStyle(element).display || "inline-block";
 
       const container = document.createElement("div");
       container.className = "draggable-image-container";
@@ -10768,7 +10844,8 @@ ${galleryPagesHTML}
       element.style.margin = "0";
       element.style.display = "block";
       element.style.boxSizing = "border-box";
-      element.style.objectFit = window.getComputedStyle(element).objectFit || "cover";
+      element.style.objectFit =
+        window.getComputedStyle(element).objectFit || "cover";
 
       // Replace the image in the flow with placeholder, then move image to absolute container
       const originalParent = element.parentNode;
@@ -10899,7 +10976,48 @@ ${galleryPagesHTML}
     this.logCurrentState();
   }
 
+  // Global function to get a random image from available images
+  getRandomImage() {
+    const fallbackImage =
+      "https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
+    // Get all available images from different sources
+    const allImages = [];
+
+    // Add real property images
+    if (
+      Array.isArray(this.realPropertyImages) &&
+      this.realPropertyImages.length > 0
+    ) {
+      allImages.push(...this.realPropertyImages);
+    }
+
+    // Add property images
+    if (Array.isArray(this.propertyImages) && this.propertyImages.length > 0) {
+      allImages.push(...this.propertyImages);
+    }
+
+    // Add images from all categories
+    Object.values(this.imagesByCategory).forEach((categoryImages) => {
+      if (Array.isArray(categoryImages) && categoryImages.length > 0) {
+        allImages.push(...categoryImages);
+      }
+    });
+
+    // If no images available, return fallback
+    if (allImages.length === 0) {
+      return fallbackImage;
+    }
+
+    // Get a random image from available images
+    const randomIndex = Math.floor(Math.random() * allImages.length);
+    const randomImage = allImages[randomIndex];
+
+    // Return the image URL, handling different possible structures
+    return randomImage?.url || randomImage?.src || randomImage || fallbackImage;
+  }
+
   connectedCallback() {
     this.loadSavedTemplates();
   }
-}
\ No newline at end of file
+}