diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 0431012..6eb47ba 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -58,7 +58,7 @@ export default function AboutPage() {
               title: "Patient Satisfaction Rate",
             },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg?_wi=2"
           imageAlt="REGROWTH clinic modern facility"
           mediaAnimation="opacity"
           useInvertedBackground={true}
@@ -81,7 +81,7 @@ export default function AboutPage() {
                 "State-of-the-art follicular unit extraction (FUE) and follicular unit transplantation (FUT) techniques for natural-looking results. Minimally invasive with quick recovery.",
               tags: ["Hair Restoration", "Surgical"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg",
+                "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg?_wi=3",
             },
             {
               id: "hair-loss-treatment",
@@ -91,7 +91,7 @@ export default function AboutPage() {
                 "Advanced treatments including PRP therapy, medications, and laser therapy to stop hair fall and stimulate regrowth naturally.",
               tags: ["PRP Therapy", "Non-Surgical"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg",
+                "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg?_wi=3",
             },
             {
               id: "skin-treatments",
@@ -101,7 +101,7 @@ export default function AboutPage() {
                 "Comprehensive skin care including Hydra Facial, laser hair removal, acne treatment, and anti-aging procedures for radiant, healthy skin.",
               tags: ["Laser", "Facial"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg",
+                "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg?_wi=3",
             },
             {
               id: "prp-therapy",
@@ -111,7 +111,7 @@ export default function AboutPage() {
                 "Cutting-edge PRP therapy using your own blood plasma to regenerate hair follicles and improve skin quality without side effects.",
               tags: ["Regenerative", "Non-Surgical"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg",
+                "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg?_wi=3",
             },
           ]}
           animationType="slide-up"
diff --git a/src/app/before-after/page.tsx b/src/app/before-after/page.tsx
index da97d89..812bd78 100644
--- a/src/app/before-after/page.tsx
+++ b/src/app/before-after/page.tsx
@@ -84,7 +84,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2022",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/high-angle-father-helping-boy-with-lice_23-2149541819.jpg",
+                "http://img.b2bpic.net/free-photo/high-angle-father-helping-boy-with-lice_23-2149541819.jpg?_wi=2",
               imageAlt: "hair transplant before after result",
             },
             {
@@ -94,7 +94,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2023",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296515.jpg",
+                "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296515.jpg?_wi=2",
               imageAlt: "hair restoration success male before after",
             },
             {
@@ -104,7 +104,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2021",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/young-adult-brushing-their-hair_23-2149345777.jpg",
+                "http://img.b2bpic.net/free-photo/young-adult-brushing-their-hair_23-2149345777.jpg?_wi=2",
               imageAlt: "male hair transplant successful result",
             },
             {
@@ -114,7 +114,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2023",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/front-view-smiley-woman-brushing-her-hair_23-2148641494.jpg",
+                "http://img.b2bpic.net/free-photo/front-view-smiley-woman-brushing-her-hair_23-2148641494.jpg?_wi=2",
               imageAlt: "hair transplant result successful male",
             },
             {
@@ -124,7 +124,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2022",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/close-up-gay-men-posing-together_23-2149123549.jpg",
+                "http://img.b2bpic.net/free-photo/close-up-gay-men-posing-together_23-2149123549.jpg?_wi=2",
               imageAlt: "hair grafting successful male result",
             },
             {
@@ -134,7 +134,7 @@ export default function BeforeAfterPage() {
               company: "Patient Since 2023",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/medium-shot-man-using-dry-shampoo-home_23-2150689672.jpg",
+                "http://img.b2bpic.net/free-photo/medium-shot-man-using-dry-shampoo-home_23-2150689672.jpg?_wi=2",
               imageAlt: "PRP treatment hair growth result",
             },
           ]}
@@ -243,7 +243,7 @@ export default function BeforeAfterPage() {
           }}
           buttonText="Book Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=4"
           imageAlt="medical consultation appointment booking clinic"
           mediaAnimation="opacity"
           mediaPosition="right"
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index d42973a..0bd9c87 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -85,7 +85,7 @@ export default function BlogPage() {
                 "Learn essential hair care practices to maintain healthy hair and prevent hair loss. Discover the role of nutrition, stress management, and proper hair care routines in maintaining thick, healthy hair throughout your life.",
               tags: ["Hair Care", "Prevention", "Health"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg",
+                "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg?_wi=3",
               imageAlt: "dermatology clinic modern interior design",
             },
             {
@@ -96,7 +96,7 @@ export default function BlogPage() {
                 "Comprehensive comparison between Follicular Unit Extraction (FUE) and Follicular Unit Transplantation (FUT). Understand the differences in procedure, recovery time, scarring, and results to make an informed decision for your hair restoration journey.",
               tags: ["Hair Transplant", "Surgery", "Guide"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg",
+                "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg?_wi=4",
               imageAlt: "hair transplant surgery medical procedure",
             },
             {
@@ -108,7 +108,7 @@ export default function BlogPage() {
                 "Explore how Platelet Rich Plasma therapy stimulates hair follicles and promotes natural hair growth. Learn about the science behind PRP, the treatment process, timeline for results, and why it's becoming a popular non-surgical solution for hair loss.",
               tags: ["PRP Therapy", "Hair Growth", "Treatment"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg",
+                "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg?_wi=4",
               imageAlt: "PRP platelet rich plasma therapy",
             },
             {
@@ -119,7 +119,7 @@ export default function BlogPage() {
                 "Discover the latest technologies in skin treatments including laser therapy, Hydra Facial, and micro-needling. Learn how these advanced procedures can address acne scars, pigmentation, aging skin, and achieve radiant, youthful-looking skin.",
               tags: ["Skin Treatment", "Laser", "Innovation"],
               imageSrc:
-                "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg",
+                "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg?_wi=4",
               imageAlt: "dermatology skin treatment procedure",
             },
           ]}
@@ -224,7 +224,7 @@ export default function BlogPage() {
           }}
           buttonText="Book Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=5"
           imageAlt="medical consultation appointment booking clinic"
           mediaAnimation="opacity"
           mediaPosition="right"
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 636d321..56c78d0 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -110,7 +110,7 @@ export default function ContactPage() {
           }}
           buttonText="Book Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=6"
           imageAlt="medical consultation appointment booking clinic"
           mediaAnimation="opacity"
           mediaPosition="right"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 981b1d3..db6d7f3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1432,6 +1432,1373 @@ export default function RootLayout({
   
   window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
 })();
+`
+          }}
+        />
+      
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+(function() {
+  if (window.self === window.top) return;
+
+  if (window.__webildEditorInitialized) return;
+  window.__webildEditorInitialized = true;
+
+  let isActive = false;
+  let hoveredElement = null;
+  let selectedElement = null;
+  let originalContent = null;
+  let isEditing = false;
+  let elementTypeLabel = null;
+  let hoverOverlay = null;
+  let scrollTimeout = null;
+  let isScrolling = false;
+
+  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
+  const hoverClass = 'webild-hover';
+  const selectedClass = 'webild-selected';
+
+  const style = document.createElement('style');
+  style.id = 'webild-inspector-styles';
+  style.textContent = '' +
+    '.webild-hover {' +
+    '  outline: 2px dashed #4d96ff80 !important;' +
+    '  border-radius: 0 !important;' +
+    '  outline-offset: 2px !important;' +
+    '  cursor: pointer !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    '.webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  outline-offset: 2px !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '  border-radius: 0 !important;' +
+    '}' +
+    '[contenteditable="true"].webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    'img.webild-hover,' +
+    'img.webild-selected,' +
+    'video.webild-hover,' +
+    'video.webild-selected {' +
+    '  outline-offset: 2px !important;' +
+    '}' +
+    '.webild-element-type-label {' +
+    '  position: fixed !important;' +
+    '  z-index: 999999 !important;' +
+    '  background: #4d96ff !important;' +
+    '  color: white !important;' +
+    '  padding: 4px 8px !important;' +
+    '  font-size: 11px !important;' +
+    '  font-weight: 600 !important;' +
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+    '  pointer-events: none !important;' +
+    '  white-space: nowrap !important;' +
+    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
+    '  letter-spacing: 0.3px !important;' +
+    '  border: 1px solid #4d96ff20 !important;' +
+    '}' +
+    '.webild-element-type-label.label-top {' +
+    '  border-radius: 6px 6px 0 0 !important;' +
+    '}' +
+    '.webild-element-type-label.label-bottom {' +
+    '  border-radius: 0 0 6px 6px !important;' +
+    '}' +
+    '.webild-hover-overlay {' +
+    '  position: fixed !important;' +
+    '  background-color: #4d96ff15 !important;' +
+    '  pointer-events: none !important;' +
+    '  z-index: 999998 !important;' +
+    '  transition: all 0.15s ease !important;' +
+    '}';
+  document.head.appendChild(style);
+  
+  const getUniqueSelector = (element, assignId = false) => {
+    if (element.dataset && element.dataset.webildSelector) {
+      return element.dataset.webildSelector;
+    }
+    
+    const existingId = element.getAttribute('data-webild-id');
+    if (existingId) {
+      return '[data-webild-id="' + existingId + '"]';
+    }
+    
+    if (assignId) {
+      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+      element.setAttribute('data-webild-id', uniqueId);
+      return '[data-webild-id="' + uniqueId + '"]';
+    }
+    
+    return null;
+  };
+  
+  const getSectionId = (element) => {
+    let current = element;
+    while (current && current !== document.body) {
+      const sectionId = current.getAttribute('data-section');
+      if (sectionId) {
+        return sectionId;
+      }
+      current = current.parentElement;
+    }
+    return 'hero';
+  };
+  
+  const getElementType = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  const computedStyle = window.getComputedStyle(element);
+
+  if (tagName === 'img') {
+    return 'Image';
+  }
+
+  if (tagName === 'video') {
+    return 'Video';
+  }
+
+  const backgroundImage = computedStyle.backgroundImage;
+  if (backgroundImage && backgroundImage !== 'none') {
+    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
+      const area = element.offsetWidth * element.offsetHeight;
+      const hasReasonableSize = area > 1000;
+      const hasFewChildren = element.children.length <= 2;
+      
+      if (hasReasonableSize && hasFewChildren) {
+        return 'Image';
+      }
+    }
+  }
+
+    if (tagName === 'button') return 'Button';
+    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
+    if (element.getAttribute('role') === 'button') return 'Button';
+
+    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
+    const hasButtonClass = buttonClasses.some(cls =>
+      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
+    );
+
+    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
+      return 'Button';
+    }
+
+    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
+    if (textTags.includes(tagName)) {
+      return 'Text';
+    }
+
+    if (tagName === 'div') {
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+      
+      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
+        return 'Text';
+      }
+      
+      return 'Div';
+    }
+
+    if (tagName === 'article') {
+      return 'Article';
+    }
+
+    if (tagName === 'a' && !element.getAttribute('href')) {
+      return 'Text';
+    }
+
+    return 'Section';
+  };
+
+  const extractOriginalUrl = (url) => {
+    if (!url) return url;
+
+    if (url.includes('/_next/')) {
+      try {
+        const urlObj = new URL(url);
+        const originalPath = urlObj.searchParams.get('url');
+        if (originalPath) {
+          return originalPath;
+        }
+      } catch (e) {
+        return url;
+      }
+    }
+    
+    if (url.includes('.webild.io/')) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.pathname;
+      } catch (e) {
+        return url;
+      }
+    }
+
+    return url;
+  };
+
+  const getMediaTypeFromUrl = (url) => {
+    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
+    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
+    try {
+      const pathname = new URL(url).pathname.toLowerCase();
+      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
+      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
+    } catch(e) {}
+    return 'unknown';
+  };
+
+  const swapMediaElement = (oldEl, newTag, newSrc) => {
+    const newEl = document.createElement(newTag);
+    Array.from(oldEl.attributes).forEach(function(attr) {
+      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
+        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
+      }
+    });
+    newEl.style.cssText = oldEl.style.cssText;
+    if (newTag === 'video') {
+      newEl.setAttribute('autoplay', '');
+      newEl.setAttribute('loop', '');
+      newEl.setAttribute('muted', '');
+      newEl.setAttribute('playsinline', '');
+    }
+    newEl.src = newSrc;
+    if (oldEl.parentNode) {
+      oldEl.parentNode.replaceChild(newEl, oldEl);
+    }
+    return newEl;
+  };
+
+  const getElementInfo = (element, assignId = false) => {
+    const rect = element.getBoundingClientRect();
+    const tagName = element.tagName.toLowerCase();
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
+    let className = undefined;
+    try {
+      if (element.className) {
+        if (typeof element.className === 'string') {
+          className = element.className;
+        } else if (element.className.baseVal !== undefined) {
+          className = element.className.baseVal;
+        }
+      }
+    } catch (e) {}
+    
+    const info = {
+      tagName: tagName,
+      id: element.id || undefined,
+      className: className,
+      selector: selector,
+      elementType: null,
+      sectionId: sectionId,
+      boundingBox: {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      }
+    };
+    
+    if (tagName === 'img') {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
+        src: originalSrc,
+        alt: element.alt || undefined,
+        naturalWidth: element.naturalWidth,
+        naturalHeight: element.naturalHeight,
+        isBackground: false
+      };
+    }
+
+    if (tagName === 'video') {
+      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
+        src: resolvedSrc,
+        alt: element.getAttribute('aria-label') || undefined,
+        isBackground: false,
+        isVideo: true
+      };
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundImage = computedStyle.backgroundImage;
+    if (backgroundImage && backgroundImage !== 'none') {
+      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+      if (urlMatch) {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
+          info.imageData = {
+            src: originalBgSrc,
+            isBackground: true
+          };
+        } else {
+          if (!info.imageData) info.imageData = {};
+          info.imageData.backgroundImageSrc = originalBgSrc;
+        }
+      }
+    }
+    
+    const elementType = getElementType(element);
+    info.elementType = elementType;
+    
+    if (elementType === 'Button') {
+      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
+      const buttonHref = element.getAttribute('href') ||
+                        element.getAttribute('data-href') ||
+                        element.getAttribute('onclick') ||
+                        element.dataset?.link ||
+                        undefined;
+
+      info.buttonData = {
+        text: buttonText,
+        href: buttonHref
+      };
+    }
+
+    if (elementType === 'Text') {
+      info.textContent = element.textContent || '';
+    }
+    
+    return info;
+  };
+  
+  const isValidElement = (element) => {
+    if (!isActive) return false;
+    const tagName = element.tagName?.toLowerCase();
+    if (invalidElements.includes(tagName)) return false;
+    const isImage = tagName === 'img';
+    const isVideo = tagName === 'video';
+    if (isImage || isVideo) return true;
+    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
+    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
+    const hasChildren = element.children && element.children.length > 0;
+    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
+      return false;
+    }
+    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  const getMostSpecificElement = (x, y) => {
+    const elements = document.elementsFromPoint(x, y);
+    const validElements = elements.filter(el =>
+      isValidElement(el) &&
+      !el.classList.contains('webild-hover-overlay') &&
+      !el.classList.contains('webild-element-type-label')
+    );
+
+    if (validElements.length === 0) return null;
+    const scoredElements = validElements.map(element => {
+      let score = 0;
+      const rect = element.getBoundingClientRect();
+      const tagName = element.tagName.toLowerCase();
+      const computedStyle = window.getComputedStyle(element);
+      let depth = 0;
+      let current = element;
+      while (current && current !== document.body) {
+        depth++;
+        current = current.parentElement;
+      }
+      score += depth * 2;
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+
+      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
+      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+      const hasFewChildren = element.children.length <= 3;
+      const area = rect.width * rect.height;
+      const viewportArea = window.innerWidth * window.innerHeight;
+      const isSmallElement = area < viewportArea * 0.1;
+      if (hasDirectText) score += 20;
+      if (hasImages) score += 15;
+      if (isInteractive) score += 25;
+      if (hasFewChildren) score += 10;
+      if (isSmallElement) score += 5;
+      if (area > viewportArea * 0.3) score -= 30;
+      if (element.hasAttribute('data-section')) score -= 15;
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
+      if (['p', 'span', 'label'].includes(tagName)) score += 15;
+      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
+
+      return { element, score };
+    });
+    scoredElements.sort((a, b) => b.score - a.score);
+    return scoredElements[0]?.element || validElements[0];
+  };
+
+  const isTextElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Text';
+  };
+
+  const isButtonElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Button';
+  };
+
+  const updateButtonText = (element, newText) => {
+    const textNodes = [];
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    let node;
+    while (node = walker.nextNode()) {
+      if (node.textContent && node.textContent.trim()) {
+        textNodes.push(node);
+      }
+    }
+
+    if (textNodes.length > 0) {
+      textNodes[0].textContent = newText;
+      for (let i = 1; i < textNodes.length; i++) {
+        textNodes[i].textContent = '';
+      }
+    } else {
+      element.textContent = newText;
+    }
+  };
+
+  const makeEditable = (element, clickEvent) => {
+    if (!isTextElement(element)) return;
+    
+    originalContent = element.textContent;
+    element.contentEditable = 'true';
+    
+    if (!element.dataset.webildOriginalWhiteSpace) {
+      const computedStyle = window.getComputedStyle(element);
+      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
+      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
+      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
+      element.dataset.webildOriginalOverflow = computedStyle.overflow;
+    }
+    
+    element.style.whiteSpace = 'pre-wrap';
+    element.style.wordWrap = 'break-word';
+    element.style.overflowWrap = 'break-word';
+    element.style.overflow = 'visible';
+    
+    element.focus();
+    isEditing = true;
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-started',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    const handleBeforeInput = (e) => {
+      // Prevent deletion if it would leave the element empty
+      const currentText = element.textContent || '';
+      const inputType = e.inputType;
+      
+      // Check if this is a delete operation that would leave the element empty
+      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
+        e.preventDefault();
+        element.textContent = ' ';
+        // Move cursor to the beginning
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild || element, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    };
+    
+    const handleInput = () => {
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
+      
+      // Ensure there's always at least a space to keep the element editable
+      if (currentText === '' || currentText === null || currentText.length === 0) {
+        element.textContent = ' ';
+        currentText = ' ';
+        // Move cursor to the beginning
+        try {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.setStart(element.firstChild || element, 0);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } catch (e) {
+          // Ignore cursor positioning errors
+        }
+      }
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: {
+          type: 'updateText',
+          selector: elementInfo.selector,
+          oldValue: originalContent,
+          newValue: currentText,
+          elementType: elementInfo.elementType,
+          sectionId: elementInfo.sectionId,
+          timestamp: Date.now()
+        }
+      }, '*');
+      
+      if (currentText !== originalContent) {
+        window.parent.postMessage({
+          type: 'webild-text-changed',
+          data: { 
+            selector: elementInfo.selector,
+            hasChanges: true
+          }
+        }, '*');
+      }
+    };
+    
+    element.addEventListener('beforeinput', handleBeforeInput);
+    element.addEventListener('input', handleInput);
+    element.dataset.inputHandler = 'true';
+    element.dataset.beforeInputHandler = 'true';
+    
+    if (clickEvent && element.childNodes.length > 0) {
+      try {
+        let range = null;
+        
+        if (document.caretRangeFromPoint) {
+          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
+          if (position) {
+            range = document.createRange();
+            range.setStart(position.offsetNode, position.offset);
+            range.collapse(true);
+          }
+        }
+        
+        if (range) {
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } catch (e) {
+        console.warn('[Webild] Could not set caret position:', e);
+      }
+    }
+  };
+  
+  const makeUneditable = (element, save = false) => {
+    if (!element || element.contentEditable !== 'true') return;
+    
+    element.contentEditable = 'false';
+    isEditing = false;
+    
+    if (element.dataset.webildOriginalWhiteSpace) {
+      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
+      delete element.dataset.webildOriginalWhiteSpace;
+    }
+    if (element.dataset.webildOriginalWordWrap) {
+      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
+      delete element.dataset.webildOriginalWordWrap;
+    }
+    if (element.dataset.webildOriginalOverflowWrap) {
+      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
+      delete element.dataset.webildOriginalOverflowWrap;
+    }
+    if (element.dataset.webildOriginalOverflow) {
+      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
+      delete element.dataset.webildOriginalOverflow;
+    }
+    
+    if (element.dataset.beforeInputHandler === 'true') {
+      element.removeEventListener('beforeinput', () => {});
+      delete element.dataset.beforeInputHandler;
+    }
+    
+    if (element.dataset.inputHandler === 'true') {
+      element.removeEventListener('input', () => {});
+      delete element.dataset.inputHandler;
+    }
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-ended',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    if (save && originalContent !== element.textContent) {
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
+      
+      // Trim the final text and convert space-only to empty string for saving
+      if (finalText === ' ' || finalText.trim() === '') {
+        finalText = '';
+        // Update the actual element text to empty for display
+        element.textContent = '';
+      }
+      
+      const change = {
+        type: 'updateText',
+        selector: elementInfo.selector,
+        oldValue: originalContent,
+        newValue: finalText,
+        elementType: elementInfo.elementType,
+        sectionId: elementInfo.sectionId,
+        timestamp: Date.now()
+      };
+
+      saveChangeToStorage(change);
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: change
+      }, '*');
+    } else if (!save && originalContent !== null) {
+      element.textContent = originalContent;
+    }
+    
+    originalContent = null;
+  };
+  
+  const createHoverOverlay = (element) => {
+    const rect = element.getBoundingClientRect();
+    const overlay = document.createElement('div');
+    overlay.className = 'webild-hover-overlay';
+    overlay.style.cssText = \`
+      position: fixed !important;
+      top: \${rect.top - 2}px !important;
+      left: \${rect.left - 2}px !important;
+      width: \${rect.width + 4}px !important;
+      height: \${rect.height + 4}px !important;
+      background-color: rgba(90, 113, 230, 0.15) !important;
+      pointer-events: none !important;
+      z-index: 999998 !important;
+      transition: all 0.15s ease !important;
+    \`;
+    document.body.appendChild(overlay);
+    return overlay;
+  };
+  
+  const removeHoverOverlay = () => {
+    if (hoverOverlay) {
+      hoverOverlay.remove();
+      hoverOverlay = null;
+    }
+  };
+  
+  const showElementTypeLabel = (element, elementType) => {
+    if (!elementType) return;
+
+    removeElementTypeLabel();
+
+    const rect = element.getBoundingClientRect();
+    elementTypeLabel = document.createElement('div');
+    elementTypeLabel.className = 'webild-element-type-label';
+    const ariaLabel = element.getAttribute('aria-label');
+    let labelText;
+    
+    if (elementType === 'Div') {
+      labelText = 'Div';
+    } else if (elementType === 'Article') {
+      labelText = 'Article';
+    } else if (elementType === 'Section') {
+      labelText = ariaLabel || 'Section';
+    } else {
+      labelText = elementType;
+    }
+    
+    elementTypeLabel.textContent = labelText;
+    document.body.appendChild(elementTypeLabel);
+    const labelRect = elementTypeLabel.getBoundingClientRect();
+    let labelTop = rect.top - labelRect.height - 2;
+    let labelLeft = rect.left - 3;
+    let isLabelOnTop = true;
+    if (labelTop < 0) {
+      labelTop = rect.bottom + 1;
+      isLabelOnTop = false;
+    }
+    if (labelTop + labelRect.height > window.innerHeight) {
+      labelTop = rect.bottom - labelRect.height;
+      isLabelOnTop = false;
+      if (labelTop < 0) {
+        labelTop = rect.top;
+        isLabelOnTop = true;
+      }
+    }
+    if (labelLeft + labelRect.width > window.innerWidth) {
+      labelLeft = window.innerWidth - labelRect.width;
+    }
+    if (labelLeft < 0) {
+      labelLeft = 0;
+    }
+    if (isLabelOnTop) {
+      elementTypeLabel.classList.add('label-top');
+    } else {
+      elementTypeLabel.classList.add('label-bottom');
+    }
+
+    elementTypeLabel.style.cssText = \`
+      left: \${labelLeft}px !important;
+      top: \${labelTop}px !important;
+      transform: none !important;
+    \`;
+  };
+  
+  const removeElementTypeLabel = () => {
+    if (elementTypeLabel) {
+      elementTypeLabel.remove();
+      elementTypeLabel = null;
+    }
+  };
+  
+  const handleMouseOver = (e) => {
+    if (!isActive) return;
+
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+
+    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
+      return;
+    }
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    hoveredElement = target;
+    
+    const computedStyle = window.getComputedStyle(target);
+    const currentPosition = computedStyle.position;
+    
+    if (currentPosition === 'static' || currentPosition === '') {
+      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+      hoveredElement.style.position = 'relative';
+    }
+    
+    hoveredElement.classList.add(hoverClass);
+    
+    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
+      hoverOverlay = createHoverOverlay(target);
+    }
+    
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-hover',
+      data: getElementInfo(target, false)
+    }, '*');
+  };
+  
+  const handleMouseOut = (e) => {
+    if (!isActive) return;
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      hoveredElement = null;
+      
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+  };
+  
+  const handleClick = (e) => {
+  if (!isActive) return;
+
+  if (isEditing) {
+    e.stopPropagation();
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  if (!isValidElement(target)) return;
+    
+    if (selectedElement && selectedElement !== target) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      selectedElement.classList.remove(hoverClass);
+      
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    if (selectedElement === target) {
+      if (target.dataset.webildOriginalPosition) {
+        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
+        delete target.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      selectedElement = null;
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+      return;
+    }
+    
+    selectedElement = target;
+    selectedElement.classList.add(selectedClass);
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (hoveredElement === target) {
+      hoveredElement.classList.remove(hoverClass);
+      hoveredElement = null;
+    }
+    
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
+    showElementTypeLabel(target, elementInfo.elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-selected',
+      data: elementInfo
+    }, '*');
+    
+    if (isTextElement(target)) {
+      setTimeout(() => makeEditable(target, e), 50);
+    }
+  };
+  
+  const handleKeyDown = (e) => {
+    if (!isActive) return;
+    if (!isEditing || !selectedElement) return;
+    
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      makeUneditable(selectedElement, true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      makeUneditable(selectedElement, false);
+    }
+  };
+  
+  const handleBlur = (e) => {
+    if (!isActive) return;
+    if (isEditing && selectedElement && e.target === selectedElement) {
+      makeUneditable(selectedElement, true);
+    }
+  };
+  
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  const handleScroll = () => {
+    if (!isActive) return;
+    
+    if (isEditing) return;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      selectedElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+    }
+
+    if (hoveredElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      hoveredElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+
+    removeHoverOverlay();
+    removeElementTypeLabel();
+
+    isScrolling = true;
+
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+
+    scrollTimeout = setTimeout(() => {
+      isScrolling = false;
+
+      if (lastMouseX > 0 && lastMouseY > 0) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
+          hoveredElement = target;
+
+          const computedStyle = window.getComputedStyle(target);
+          const currentPosition = computedStyle.position;
+
+          if (currentPosition === 'static' || currentPosition === '') {
+            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+            hoveredElement.style.position = 'relative';
+          }
+
+          hoveredElement.classList.add(hoverClass);
+          hoverOverlay = createHoverOverlay(target);
+
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
+
+          window.parent.postMessage({
+            type: 'webild-element-hover',
+            data: getElementInfo(target, false)
+          }, '*');
+        }
+      }
+    }, 150);
+
+    window.parent.postMessage({
+      type: 'webild-iframe-scroll'
+    }, '*');
+  };
+  
+  const getStorageKey = () => {
+    const url = new URL(window.location.href);
+    const pathParts = url.pathname.split('/').filter(Boolean);
+    return \`webild-changes-\${pathParts.join('-')}\`;
+  };
+
+  const saveChangeToStorage = (change) => {
+    try {
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+
+      const filteredChanges = existingChanges.filter(c => {
+        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
+      });
+      filteredChanges.push(change);
+
+      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
+
+      window.parent.postMessage({
+        type: 'webild-change-saved-locally',
+        data: { change, allChanges: filteredChanges }
+      }, '*');
+    } catch (error) {
+      console.error('Failed to save change to localStorage:', error);
+    }
+  };
+
+  const clearLocalChanges = () => {
+    try {
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
+      window.parent.postMessage({
+        type: 'webild-local-changes-cleared',
+        data: {}
+      }, '*');
+    } catch (error) {
+      console.error('Failed to clear local changes:', error);
+    }
+  };
+
+  const handleMessage = (e) => {
+    if (!e.data || !e.data.type) return;
+
+    if (e.data.type === 'webild-activate-editor') {
+      if (!isActive) {
+        isActive = true;
+        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-deactivate-editor') {
+      if (isActive) {
+        isActive = false;
+
+        if (selectedElement) {
+          makeUneditable(selectedElement, false);
+          selectedElement.classList.remove(selectedClass);
+          selectedElement = null;
+        }
+        if (hoveredElement) {
+          hoveredElement.classList.remove(hoverClass);
+          hoveredElement = null;
+        }
+
+        removeHoverOverlay();
+        removeElementTypeLabel();
+        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-clear-local-changes') {
+      clearLocalChanges();
+      return;
+    }
+
+    if (e.data.type === 'webild-cancel-changes') {
+      try {
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
+        if (savedChanges) {
+          const changes = JSON.parse(savedChanges);
+          changes.forEach(change => {
+            try {
+              const element = document.querySelector(change.selector);
+              if (!element) return;
+
+              if (change.type === 'updateText') {
+                if (isTextElement(element)) {
+                  element.textContent = change.oldValue;
+                }
+              } else if (change.type === 'updateButton') {
+                if (isButtonElement(element)) {
+                  updateButtonText(element, change.oldValue);
+                }
+              } else if (change.type === 'replaceImage') {
+                const revertTag = element.tagName.toLowerCase();
+                const isBackground = revertTag !== 'img' && revertTag !== 'video';
+                if (isBackground) {
+                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
+                } else {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
+                    swapMediaElement(element, 'img', change.oldValue);
+                  } else if (revertTag === 'img' && oldMediaType === 'video') {
+                    swapMediaElement(element, 'video', change.oldValue);
+                  } else if (revertTag === 'video') {
+                    element.src = change.oldValue;
+                    element.load();
+                  } else {
+                    element.src = change.oldValue;
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn('[Webild] Failed to revert change:', err);
+            }
+          });
+        }
+        clearLocalChanges();
+      } catch (error) {
+        console.error('[Webild] Failed to cancel changes:', error);
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-text') {
+      const { selector, newValue, oldValue, sectionId } = e.data.data;
+      try {
+        let element = null;
+        
+        if (selectedElement && isTextElement(selectedElement)) {
+          element = selectedElement;
+        }
+        else if (selector) {
+          try {
+            element = document.querySelector(selector);
+          } catch (err) {
+            console.warn('[Webild] Invalid selector:', selector);
+          }
+        }
+        
+        if (!element && sectionId) {
+          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
+          if (sectionElement) {
+            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
+            for (let i = 0; i < textElements.length; i++) {
+              const el = textElements[i];
+              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
+                element = el;
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
+                  element.dataset.webildSelector = newSelector;
+                }
+                break;
+              }
+            }
+          }
+        }
+        
+        if (element && isTextElement(element)) {
+          element.textContent = newValue;
+          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
+          
+          window.parent.postMessage({
+            type: 'webild-text-update-success',
+            data: {
+              selector: finalSelector,
+              newValue: newValue
+            }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-text-update-failed',
+            data: { selector, newValue }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-text-update-failed',
+          data: { selector, newValue, error: error.message }
+        }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-button') {
+      const { selector, text, href } = e.data.data;
+      try {
+        const element = document.querySelector(selector);
+        if (element && isButtonElement(element)) {
+          if (text !== undefined) {
+            updateButtonText(element, text);
+          }
+          if (href !== undefined) {
+            if (element.tagName.toLowerCase() === 'a') {
+              element.href = href;
+            } else {
+              element.setAttribute('data-href', href);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('[Webild] Invalid selector for button update:', selector, error);
+      }
+      return;
+    }
+
+    if (!isActive) return;
+
+    if (e.data.type === 'webild-replace-image') {
+      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
+      let element = null;
+
+      try {
+        element = document.querySelector(selector);
+      } catch {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
+        }, '*');
+        return;
+      }
+
+      if (!element) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Element not found', success: false }
+        }, '*');
+        return;
+      }
+
+      try {
+        let replaced = false;
+        let oldValue = '';
+
+        if (isBackground) {
+          oldValue = window.getComputedStyle(element).backgroundImage;
+          element.style.backgroundImage = \`url('\${newSrc}')\`;
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'img') {
+          oldValue = element.src;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            element.src = newSrc;
+          }
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'video') {
+          oldValue = element.src || element.currentSrc || '';
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
+          if (newMediaType === 'image' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            if (sources.length > 0) {
+              sources.forEach(function(source) { source.src = newSrc; });
+              element.load();
+            } else {
+              element.src = newSrc;
+              element.load();
+            }
+          }
+          replaced = true;
+        } else {
+          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+          if (hasBackgroundImage) {
+            oldValue = window.getComputedStyle(element).backgroundImage;
+            element.style.backgroundImage = \`url('\${newSrc}')\`;
+            replaced = true;
+          }
+        }
+
+        if (replaced) {
+          const elementInfo = getElementInfo(element);
+
+          let cleanOldValue = oldValue;
+          if (oldValue.includes('url(')) {
+            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
+            if (urlMatch) {
+              cleanOldValue = urlMatch[1];
+            }
+          }
+
+          cleanOldValue = extractOriginalUrl(cleanOldValue);
+
+          const change = {
+            type: 'replaceImage',
+            selector: selector,
+            oldValue: cleanOldValue,
+            newValue: newSrc,
+            elementType: elementInfo.elementType,
+            sectionId: elementInfo.sectionId,
+            timestamp: Date.now()
+          };
+
+          saveChangeToStorage(change);
+
+          window.parent.postMessage({
+            type: 'webild-element-changed',
+            data: change
+          }, '*');
+
+          window.parent.postMessage({
+            type: 'webild-image-replaced',
+            data: { selector, newSrc, success: true }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-image-replacement-error',
+            data: { selector, message: 'Could not determine how to replace image', success: false }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: error.message || 'Failed to replace image', success: false }
+        }, '*');
+      }
+    }
+  };
+  
+  document.addEventListener('mouseover', handleMouseOver, true);
+  document.addEventListener('mouseout', handleMouseOut, true);
+  document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKeyDown, true);
+  document.addEventListener('blur', handleBlur, true);
+  window.addEventListener('scroll', handleScroll, true);
+  window.addEventListener('message', handleMessage, true);
+  
+  let lastPathname = window.location.pathname;
+  
+  const notifyPageChange = () => {
+    window.parent.postMessage({
+      type: 'webild-page-changed',
+      data: { pathname: window.location.pathname }
+    }, '*');
+  };
+  
+  window.addEventListener('popstate', () => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, true);
+  
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
+  notifyPageChange();
+  
+  window.webildCleanup = () => {
+    isActive = false;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+    }
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (urlCheckInterval) {
+      clearInterval(urlCheckInterval);
+    }
+    
+    document.removeEventListener('mouseover', handleMouseOver, true);
+    document.removeEventListener('mouseout', handleMouseOut, true);
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('keydown', handleKeyDown, true);
+    document.removeEventListener('blur', handleBlur, true);
+    window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('message', handleMessage, true);
+    
+    document.querySelectorAll('.' + hoverClass).forEach(el => {
+      el.classList.remove(hoverClass);
+    });
+    document.querySelectorAll('.' + selectedClass).forEach(el => {
+      el.classList.remove(selectedClass);
+    });
+    
+    const styleEl = document.getElementById('webild-inspector-styles');
+    if (styleEl) styleEl.remove();
+    
+    hoveredElement = null;
+    selectedElement = null;
+  };
+  
+  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
+})();
 `
           }}
         />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8c18cd3..e189b71 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -148,7 +148,7 @@ export default function HomePage() {
               title: "Patient Satisfaction Rate",
             },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332442.jpg?_wi=1"
           imageAlt="REGROWTH clinic modern facility"
           mediaAnimation="opacity"
           useInvertedBackground={true}
@@ -168,7 +168,7 @@ export default function HomePage() {
               author: "Advanced Surgical Procedure",
               description: "State-of-the-art follicular unit extraction (FUE) and follicular unit transplantation (FUT) techniques for natural-looking results. Minimally invasive with quick recovery.",
               tags: ["Hair Restoration", "Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg?_wi=1",
               imageAlt: "Hair transplant surgery medical procedure",
             },
             {
@@ -177,7 +177,7 @@ export default function HomePage() {
               author: "Medical Management",
               description: "Advanced treatments including PRP therapy, medications, and laser therapy to stop hair fall and stimulate regrowth naturally.",
               tags: ["PRP Therapy", "Non-Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg?_wi=1",
               imageAlt: "Hair loss treatment medical therapy",
             },
             {
@@ -186,7 +186,7 @@ export default function HomePage() {
               author: "Dermatological Care",
               description: "Comprehensive skin care including Hydra Facial, laser hair removal, acne treatment, and anti-aging procedures for radiant, healthy skin.",
               tags: ["Laser", "Facial"],
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg?_wi=1",
               imageAlt: "Dermatology skin treatment procedure",
             },
             {
@@ -195,7 +195,7 @@ export default function HomePage() {
               author: "Regenerative Therapy",
               description: "Cutting-edge PRP therapy using your own blood plasma to regenerate hair follicles and improve skin quality without side effects.",
               tags: ["Regenerative", "Non-Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg?_wi=1",
               imageAlt: "PRP platelet rich plasma therapy",
             },
           ]}
@@ -218,7 +218,7 @@ export default function HomePage() {
               role: "Hair Transplant",
               company: "Patient Since 2022",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-father-helping-boy-with-lice_23-2149541819.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-father-helping-boy-with-lice_23-2149541819.jpg?_wi=1",
               imageAlt: "Hair transplant before after result",
             },
             {
@@ -227,7 +227,7 @@ export default function HomePage() {
               role: "Hair Restoration",
               company: "Patient Since 2023",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296515.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296515.jpg?_wi=1",
               imageAlt: "Hair restoration success male before after",
             },
             {
@@ -236,7 +236,7 @@ export default function HomePage() {
               role: "FUE Procedure",
               company: "Patient Since 2021",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-brushing-their-hair_23-2149345777.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-brushing-their-hair_23-2149345777.jpg?_wi=1",
               imageAlt: "Male hair transplant successful result",
             },
             {
@@ -245,7 +245,7 @@ export default function HomePage() {
               role: "Hair Transplant",
               company: "Patient Since 2023",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-brushing-her-hair_23-2148641494.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-brushing-her-hair_23-2148641494.jpg?_wi=1",
               imageAlt: "Hair transplant result successful male",
             },
             {
@@ -254,7 +254,7 @@ export default function HomePage() {
               role: "Hair Grafting",
               company: "Patient Since 2022",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-gay-men-posing-together_23-2149123549.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-gay-men-posing-together_23-2149123549.jpg?_wi=1",
               imageAlt: "Hair grafting successful male result",
             },
             {
@@ -263,7 +263,7 @@ export default function HomePage() {
               role: "PRP Treatment",
               company: "Patient Since 2023",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-using-dry-shampoo-home_23-2150689672.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-using-dry-shampoo-home_23-2150689672.jpg?_wi=1",
               imageAlt: "PRP treatment hair growth result",
             },
           ]}
@@ -430,7 +430,7 @@ export default function HomePage() {
           }}
           buttonText="Book Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=1"
           imageAlt="Medical consultation appointment booking clinic"
           mediaAnimation="opacity"
           mediaPosition="right"
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 97cc5cc..6204d87 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -188,7 +188,7 @@ export default function PricingPage() {
           }}
           buttonText="Book Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=3"
           imageAlt="REGROWTH consultation booking"
           mediaAnimation="opacity"
           mediaPosition="right"
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index b36ded4..6e774f3 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -53,7 +53,7 @@ export default function ServicesPage() {
               author: "Advanced Surgical Procedure",
               description: "State-of-the-art follicular unit extraction (FUE) and follicular unit transplantation (FUT) techniques for natural-looking results. Minimally invasive with quick recovery.",
               tags: ["Hair Restoration", "Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-going-through-follicular-unit-extraction-process_23-2149106297.jpg?_wi=2",
             },
             {
               id: "hair-loss-treatment",
@@ -61,7 +61,7 @@ export default function ServicesPage() {
               author: "Medical Management",
               description: "Advanced treatments including PRP therapy, medications, and laser therapy to stop hair fall and stimulate regrowth naturally.",
               tags: ["PRP Therapy", "Non-Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229772.jpg?_wi=2",
             },
             {
               id: "skin-treatments",
@@ -69,7 +69,7 @@ export default function ServicesPage() {
               author: "Dermatological Care",
               description: "Comprehensive skin care including Hydra Facial, laser hair removal, acne treatment, and anti-aging procedures for radiant, healthy skin.",
               tags: ["Laser", "Facial"],
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg?_wi=2",
             },
             {
               id: "prp-therapy",
@@ -77,7 +77,7 @@ export default function ServicesPage() {
               author: "Regenerative Therapy",
               description: "Cutting-edge PRP therapy using your own blood plasma to regenerate hair follicles and improve skin quality without side effects.",
               tags: ["Regenerative", "Non-Surgical"],
-              imageSrc: "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/rejuvenation-injection-face_1098-21910.jpg?_wi=2",
             },
           ]}
           animationType="slide-up"
@@ -166,7 +166,7 @@ export default function ServicesPage() {
           }}
           buttonText="Request Consultation"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/doctor-consults-with-sick-lady-clinic_482257-119147.jpg?_wi=2"
           imageAlt="Professional consultation at REGROWTH"
           mediaAnimation="opacity"
           mediaPosition="right"