diff --git a/public/assets/images/footer/footer-bg-1.webp b/public/assets/images/footer/footer-bg-1.webp
new file mode 100644
index 0000000..506c5aa
Binary files /dev/null and b/public/assets/images/footer/footer-bg-1.webp differ
diff --git a/public/assets/images/footer/footer-bg-2.webp b/public/assets/images/footer/footer-bg-2.webp
new file mode 100644
index 0000000..6d051c3
Binary files /dev/null and b/public/assets/images/footer/footer-bg-2.webp differ
diff --git a/public/assets/images/services/details/cta.webp b/public/assets/images/services/details/cta.webp
new file mode 100644
index 0000000..7f11204
Binary files /dev/null and b/public/assets/images/services/details/cta.webp differ
diff --git a/public/assets/images/services/details/digital.webp b/public/assets/images/services/details/digital.webp
new file mode 100644
index 0000000..5b96daa
Binary files /dev/null and b/public/assets/images/services/details/digital.webp differ
diff --git a/public/assets/images/services/details/graphic.webp b/public/assets/images/services/details/graphic.webp
new file mode 100644
index 0000000..9d259f3
Binary files /dev/null and b/public/assets/images/services/details/graphic.webp differ
diff --git a/public/assets/images/services/details/mbl.webp b/public/assets/images/services/details/mbl.webp
new file mode 100644
index 0000000..7529576
Binary files /dev/null and b/public/assets/images/services/details/mbl.webp differ
diff --git a/public/assets/images/services/details/seo.webp b/public/assets/images/services/details/seo.webp
new file mode 100644
index 0000000..9ed15f6
Binary files /dev/null and b/public/assets/images/services/details/seo.webp differ
diff --git a/public/assets/images/services/details/service-1.webp b/public/assets/images/services/details/service-1.webp
new file mode 100644
index 0000000..3ced5e7
Binary files /dev/null and b/public/assets/images/services/details/service-1.webp differ
diff --git a/public/assets/images/services/details/service-2.webp b/public/assets/images/services/details/service-2.webp
new file mode 100644
index 0000000..4e2518c
Binary files /dev/null and b/public/assets/images/services/details/service-2.webp differ
diff --git a/public/assets/images/services/details/service-3.webp b/public/assets/images/services/details/service-3.webp
new file mode 100644
index 0000000..6a87514
Binary files /dev/null and b/public/assets/images/services/details/service-3.webp differ
diff --git a/public/assets/images/services/details/service-4.webp b/public/assets/images/services/details/service-4.webp
new file mode 100644
index 0000000..2c47545
Binary files /dev/null and b/public/assets/images/services/details/service-4.webp differ
diff --git a/public/assets/images/services/details/service-5.webp b/public/assets/images/services/details/service-5.webp
new file mode 100644
index 0000000..e3b9925
Binary files /dev/null and b/public/assets/images/services/details/service-5.webp differ
diff --git a/public/assets/images/services/details/service-6-1.webp b/public/assets/images/services/details/service-6-1.webp
new file mode 100644
index 0000000..16b5743
Binary files /dev/null and b/public/assets/images/services/details/service-6-1.webp differ
diff --git a/public/assets/images/services/details/service-6-2.webp b/public/assets/images/services/details/service-6-2.webp
new file mode 100644
index 0000000..6e26306
Binary files /dev/null and b/public/assets/images/services/details/service-6-2.webp differ
diff --git a/public/assets/images/services/details/ui-ux.webp b/public/assets/images/services/details/ui-ux.webp
new file mode 100644
index 0000000..ad998ce
Binary files /dev/null and b/public/assets/images/services/details/ui-ux.webp differ
diff --git a/public/assets/images/services/details/web.webp b/public/assets/images/services/details/web.webp
new file mode 100644
index 0000000..44a37cf
Binary files /dev/null and b/public/assets/images/services/details/web.webp differ
diff --git a/src/app/globals.css b/src/app/globals.css
index e138b7c..91ec91e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8503,7 +8503,7 @@ body {
 }
 
 .service-details__benefit {
-  margin: 40px 0;
+  margin: 20px 0;
 }
 
 .service-details__benefit__img {
@@ -13223,6 +13223,39 @@ body {
 
   }
 
+  .sidebar__call__title {
+    margin: 0 0 1px !important;
+    font-size: 14px !important;
+    font-weight: 700;
+    color: var(--insuba-white);
+    line-height: 1.4;
+}
+
+.sidebar__call__number {
+    position: relative;
+    z-index: 1;
+    font-size: 14px !important;
+    font-weight: 400;
+    color: var(--insuba-white);
+    line-height: 1;
+    text-decoration: none;
+    transition: all 500ms ease;
+}
+
+.sidebar__call__icon {
+    width: 60px !important;
+    height: 60px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 28px !important;
+    color: #fff;
+    background-color: #3779b9;
+    border: 6px solid #fff;
+    border-radius: 43px;
+}
+
 }
 
 @media (max-width: 992px) {
@@ -13242,6 +13275,12 @@ body {
 
     padding-top: 60px !important;
 
+  }
+
+      .service-sidebar{
+
+    display: none;
+
   }
 
   .counselling-solutions__title {
@@ -13273,6 +13312,11 @@ body {
 
   }
 
+  .service-details__benefit__img img {
+  width: 100%;
+  margin-bottom: 15px !important;
+}
+
   .banner-section {
     padding-top: 60px !important;
   }
@@ -13955,7 +13999,7 @@ body {
 
 .sidebar__call {
   position: relative;
-  padding: 432px 17px 22px;
+  padding: 420px 17px 22px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
diff --git a/src/components/mobile-app-development-service/About.tsx b/src/components/mobile-app-development-service/About.tsx
index 6de2429..2018566 100644
--- a/src/components/mobile-app-development-service/About.tsx
+++ b/src/components/mobile-app-development-service/About.tsx
@@ -61,7 +61,7 @@ const About = () => {
                             </div> */}
                             <div className="space28"></div>
                             <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
-                                <button onClick={() => setIsContactOpen(true)} className="vl-btn2">
+                                <button suppressHydrationWarning={true} onClick={() => setIsContactOpen(true)} className="vl-btn2">
                                     Start Your App Project Today <i className="fa-solid fa-arrow-right"></i>
                                 </button>
                             </div>
diff --git a/src/components/mobile-app-development-service/FAQ.tsx b/src/components/mobile-app-development-service/FAQ.tsx
index e598ccd..21b7aae 100644
--- a/src/components/mobile-app-development-service/FAQ.tsx
+++ b/src/components/mobile-app-development-service/FAQ.tsx
@@ -63,7 +63,7 @@ const AccordionItem = ({
     <div
         className={`faqv2-item${isOpen ? " faqv2-item-open" : ""} faqv2-item-${align}`}
     >
-        <button className="faqv2-question" onClick={onToggle} aria-expanded={isOpen}>
+        <button suppressHydrationWarning={true} className="faqv2-question" onClick={onToggle} aria-expanded={isOpen}>
             <span className="faqv2-q-text">{faq.q}</span>
             <span className={`faqv2-icon${isOpen ? " faqv2-icon-open" : ""}`}>
                 <i className="fa-solid fa-chevron-down"></i>
diff --git a/src/components/mobile-app-development-service/Hero.tsx b/src/components/mobile-app-development-service/Hero.tsx
index d920ab8..0b131c8 100644
--- a/src/components/mobile-app-development-service/Hero.tsx
+++ b/src/components/mobile-app-development-service/Hero.tsx
@@ -31,7 +31,7 @@ const Hero = () => {
                             <div className="space32"></div>
                             <GsapReveal y={30} duration={1.4} delay={0.6}>
                                 <div className="btn-area1 d-flex flex-wrap gap-3">
-                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free App Consultation<i className="fa-solid fa-angle-right"></i></button>
+                                    <button suppressHydrationWarning={true} onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free App Consultation<i className="fa-solid fa-angle-right"></i></button>
                                     {/* <Link href="#portfolio" className="vl-btn1 secondary-cta">View Our Work <i className="fa-solid fa-angle-right"></i></Link> */}
                                 </div>
                             </GsapReveal>
diff --git a/src/components/mobile-app-development-service/KeyFeatures.tsx b/src/components/mobile-app-development-service/KeyFeatures.tsx
index 0fba52c..52a2941 100644
--- a/src/components/mobile-app-development-service/KeyFeatures.tsx
+++ b/src/components/mobile-app-development-service/KeyFeatures.tsx
@@ -146,16 +146,16 @@ const KeyFeatures = () => {
                     {/* Controls + CTA */}
                     <div className="kf-controls-row">
                         <div className="kf-controls">
-                            <button className="kf-control-btn" onClick={handlePrev} aria-label="Previous">
+                            <button suppressHydrationWarning={true} className="kf-control-btn" onClick={handlePrev} aria-label="Previous">
                                 &#8592;
                             </button>
-                            <button className="kf-control-btn" onClick={handleNext} aria-label="Next">
+                            <button suppressHydrationWarning={true} className="kf-control-btn" onClick={handleNext} aria-label="Next">
                                 &#8594;
                             </button>
                         </div>
-                        <button onClick={() => setIsContactOpen(true)} className="kf-demo-btn">
+                        <button suppressHydrationWarning={true} onClick={() => setIsContactOpen(true)} className="kf-demo-btn">
                             Book Free Strategy Call
-                         <i className="fa-solid fa-angle-right"></i></button>
+                            <i className="fa-solid fa-angle-right"></i></button>
                     </div>
                 </div>
 
diff --git a/src/components/mobile-app-development-service/Service.tsx b/src/components/mobile-app-development-service/Service.tsx
index 0002551..7a8745e 100644
--- a/src/components/mobile-app-development-service/Service.tsx
+++ b/src/components/mobile-app-development-service/Service.tsx
@@ -54,7 +54,7 @@ const Service = () => {
                 <div className="row justify-content-center mt-5">
                     <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
                         <div className="service-bottom-cta mt-50">
-                            <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
+                            <button suppressHydrationWarning={true} onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                 Request Free Proposal <i className="fa-solid fa-angle-right"></i>
                             </button>
                         </div>
diff --git a/src/components/mobile-app-development-service/Work.tsx b/src/components/mobile-app-development-service/Work.tsx
index 5538593..6f3bff0 100644
--- a/src/components/mobile-app-development-service/Work.tsx
+++ b/src/components/mobile-app-development-service/Work.tsx
@@ -81,7 +81,7 @@ const Work = () => {
 
                                 <div className="space40"></div>
                                 <GsapReveal y={20} delay={0.4}>
-                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
+                                    <button suppressHydrationWarning={true} onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                         Let’s Build Your App <i className="fa-solid fa-angle-right"></i>
                                     </button>
                                 </GsapReveal>
diff --git a/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx b/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
index 62bb049..e5ebdd8 100644
--- a/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
+++ b/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
@@ -149,7 +149,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
 
                     {/* Right Side: Form or Status */}
                     <div className="col-lg-7 form-panel">
-                        <button onClick={onClose} className="close-btn">
+                        <button suppressHydrationWarning={true} onClick={onClose} className="close-btn">
                             <i className="fa-solid fa-xmark"></i>
                         </button>
 
@@ -215,7 +215,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                                         {formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
                                     </div>
 
-                                    <button type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
+                                    <button suppressHydrationWarning={true} type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
                                         {status === 'submitting' ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
                                     </button>
                                 </form>
diff --git a/src/components/mobile-app-development-service/support/common/VideoModal/VideoModal.tsx b/src/components/mobile-app-development-service/support/common/VideoModal/VideoModal.tsx
index 1774c73..542d5d3 100644
--- a/src/components/mobile-app-development-service/support/common/VideoModal/VideoModal.tsx
+++ b/src/components/mobile-app-development-service/support/common/VideoModal/VideoModal.tsx
@@ -22,7 +22,7 @@ const VideoModal: React.FC<VideoModalProps> = ({ isOpen, onClose, videoUrl }) =>
             <div className="modal-dialog modal-lg modal-dialog-centered" role="document" onClick={(e) => e.stopPropagation()}>
                 <div className="modal-content" style={{ backgroundColor: 'transparent', border: 'none' }}>
                     <div className="modal-body p-0">
-                        <button type="button" className="btn-close btn-close-white position-absolute top-0 end-0 m-2" aria-label="Close" onClick={onClose}></button>
+                        <button suppressHydrationWarning={true} type="button" className="btn-close btn-close-white position-absolute top-0 end-0 m-2" aria-label="Close" onClick={onClose}></button>
                         <div className="ratio ratio-16x9">
                             <iframe
                                 src={`${videoUrl}?autoplay=1`}
diff --git a/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx b/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
index 1d2e3a2..f03d24e 100644
--- a/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
@@ -1,212 +1,160 @@
-import Link from 'next/link';
-import React from 'react';
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+import axios from "axios";
 
-const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
-    const currentYear = new Date().getFullYear();
+const Footer = () => {
+    const [email, setEmail] = useState("");
+    const [status, setStatus] = useState({ show: false, type: "", message: "" });
 
-    const companyLinks = [
-        { label: 'Home', link: '#home' },
-        { label: 'About Us', link: '#about' },
-        { label: 'Portfolio', link: '#portfolio' },
-        { label: 'Faq', link: '#faq' },
-        { label: 'Contact', link: '#contact-trigger' },
-    ];
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!email) return;
 
-    const serviceLinks = [
-        { label: 'Mobile App Development', link: '#services' },
-    ];
+        setStatus({ show: false, type: "", message: "" });
 
-    const socialLinks = [
-        { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
-        { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
-        { icon: 'fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
-        { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
-        { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
-    ];
+        const emailData = {
+            email: email,
+            message: `Newsletter Subscription Request from: ${email}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube Footer Newsletter",
+        };
+
+        try {
+            const res = await axios.post("https://mailserver.metatronnest.com/send", emailData);
+            setStatus({
+                show: true,
+                type: "success",
+                message: res?.data?.message || "Subscribed successfully!",
+            });
+            setEmail("");
+        } catch (error) {
+            console.error("❌ Newsletter error:", error);
+            setStatus({
+                show: true,
+                type: "danger",
+                message: "Failed to subscribe. Please try again.",
+            });
+        }
+    };
 
     return (
-        <div
-            className={`${containerClass} sp8 position-relative`}
-            style={{
-                backgroundImage: 'url(/assets/img-app/home/footer/footer.webp)',
-                backgroundPosition: 'center',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: 'cover',
-                overflow: 'hidden',
-            }}
-        >
-            {/* Light overlay to ensure text readability */}
-            <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.7)', zIndex: 0 }} />
+        <footer>
+            <div className="footer-main bg-color-1" style={{ backgroundImage: 'url(/assets/images/footer/footer-bg-2.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}>
+                <div className="footer-top section-space-medium">
+                    <div className="small-container">
+                        <div className="row g-4">
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-1">
+                                    <figure className="image">
+                                        <img src="/assets/img-app/logo.webp" alt="footer logo" />
+                                    </figure>
+                                    <p className="mt-20 mb-40">Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
+                                    <div className="footer-socials mb-20">
+                                        <span>
+                                            <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-facebook-f"></i>
+                                            </a>
+                                        </span>
 
-            {topSpace && (
-                <>
-                    <div className="space100"></div>
-                    <div className="space50"></div>
-                </>
-            )}
-            <div className="container position-relative" style={{ zIndex: 1 }}>
-                <div className="row">
-                    {/* Column 1: Logo & Description */}
-                    <div className="col-lg-4 col-md-6">
-                        <div className="footer-logo1">
-                            <img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
-                            <div className="space24"></div>
-                            <p style={{ color: '#1a1f2b', lineHeight: '1.7' }}>
-                                We build secure, scalable, high-performance mobile apps that drive growth and deliver real business results.
-                            </p>
-                            <div className="space24"></div>
-                            <div className="footer-socials d-flex gap-3">
-                                {socialLinks.map((social, idx) => (
-                                    <a
-                                        key={idx}
-                                        id={`footer-social-${social.icon}`}
-                                        href={social.link}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="social-icon-box"
-                                        style={{
-                                            width: '40px',
-                                            height: '40px',
-                                            borderRadius: '50%',
-                                            background: social.bg || '#3779b9',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            color: '#fff',
-                                            transition: 'transform 0.3s'
-                                        }}
-                                        onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
-                                        onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(0)'; }}
-                                    >
-                                        <i className={`fa-brands ${social.icon}`}></i>
-                                    </a>
-                                ))}
+                                        <span>
+                                            <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-instagram"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-twitter"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-linkedin-in"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-youtube"></i>
+                                            </a>
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
-
-                    {/* Column 2: Company */}
-                    <div className="col-lg-2 col-md-6">
-                        <div className="space30 d-md-none d-block"></div>
-                        <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Company
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
-                                {companyLinks.map((item, idx) => (
-                                    <li key={idx} style={{ marginBottom: '15px' }}>
-                                        <Link
-                                            href={item.link}
-                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
-                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
-                                            onClick={(e) => {
-                                                if (item.link === '#contact-trigger') {
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-2 pl-50">
+                                    <h4 className="mb-20 footer-title">Quick Links</h4>
+                                    <ul className="service-list">
+                                        <li><Link href="#home">Home</Link></li>
+                                        <li><Link href="#about">About Us</Link></li>
+                                        <li><Link href="#portfolio">Portfolio</Link></li>
+                                        <li><Link href="#faq">Faq</Link></li>
+                                        <li>
+                                            <Link
+                                                href="#contact-trigger"
+                                                onClick={(e) => {
                                                     e.preventDefault();
                                                     window.dispatchEvent(new CustomEvent('openContactPopup'));
-                                                }
-                                            }}
-                                        >
-                                            {item.label}
-                                        </Link>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </div>
-
-                    {/* Column 3: Services */}
-                    <div className="col-lg-3 col-md-6">
-                        <div className="space30 d-lg-none d-block"></div>
-                        <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Services
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
-                                {serviceLinks.map((item, idx) => (
-                                    <li key={idx} style={{ marginBottom: '15px' }}>
-                                        <Link
-                                            href={item.link}
-                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
-                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
-                                            onClick={(e) => {
-                                                if (item.link === '#contact-trigger') {
-                                                    e.preventDefault();
-                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
-                                                }
-                                            }}
-                                        >
-                                            {item.label}
-                                        </Link>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </div>
-
-                    {/* Column 4: Newsletter */}
-                    {/* Column 4: Location */}
-                    <div className="col-lg-3 col-md-6">
-                        <div className="space30 d-lg-none d-block"></div>
-                        <div className="vl-footer-widget location-widget">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Get In Touch
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <div className="contact-list d-flex flex-column gap-3">
-                                {/* Email */}
-                                <div className="contact-item d-flex align-items-center gap-3">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-envelope"></i>
-                                    </div>
-                                    <div className="contact-text">
-                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
-                                            info@metatroncubesolutions.com
-                                        </a>
-                                    </div>
+                                                }}
+                                            >
+                                                Contact
+                                            </Link>
+                                        </li>
+                                    </ul>
                                 </div>
-
-                                {/* Location */}
-                                <div className="contact-item d-flex align-items-start gap-3">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-location-dot"></i>
-                                    </div>
-                                    <div className="contact-text">
-                                        <p style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, margin: 0 }}>
-                                            Waterloo, Ontario Canada
-                                        </p>
-                                    </div>
+                            </div>
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-2">
+                                    <h4 className="mb-20 footer-title">Our Services</h4>
+                                    <ul className="service-list">
+                                        <li><Link href="#services">Mobile App Development</Link></li>
+                                    </ul>
                                 </div>
-
-                                {/* Phone */}
-                                <div className="contact-item d-flex align-items-center gap-3">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-phone"></i>
-                                    </div>
-                                    <div className="contact-text">
-                                        <a href="tel:+1-647-679-7651" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
-                                            +1-647-679-7651
-                                        </a>
+                            </div>
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-4 pr-30">
+                                    <h4 className="mb-20 footer-title">Newsletter</h4>
+                                    <p>Subscribe our newsletter to get our latest update & news</p>
+                                    <div className="footer-subscribe">
+                                        {status.show && (
+                                            <div className={`alert alert-${status.type === 'danger' ? 'danger' : 'success'} mb-3`} style={{ fontSize: '14px', padding: '10px' }}>
+                                                {status.message}
+                                            </div>
+                                        )}
+                                        <form onSubmit={handleSubmit}>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                placeholder="Your email address"
+                                                required
+                                                suppressHydrationWarning={true}
+                                                value={email}
+                                                onChange={(e) => setEmail(e.target.value)}
+                                            />
+                                            <button type="submit" className="primary-btn-1" style={{ backgroundPosition: 'left center' }} suppressHydrationWarning={true}>
+                                                SUBSCRIBE NOW
+                                            </button>
+                                        </form>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-
-                <div className="space60"></div>
-                <div className="row align-items-center">
-                    <div className="col-lg-12 col-md-12">
-                        <div className="vl-copyright-area">
-                            <p style={{ margin: 0 }}>Copyright {new Date().getFullYear()} © by{" "} Metatroncube Software Solutions. All Rights Reserved.</p>
+                <div className="small-container">
+                    <div className="footer-bottom pt-15 pb-15" style={{ justifyContent: "center" }}>
+                        <div className="left-area">
+                            <span>Copyright {new Date().getFullYear()} © by{" "}
+                                Metatroncube Software Solutions.
+                                All Rights Reserved.
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </footer>
     );
 };
 
diff --git a/src/components/mobile-app-development-service/support/layout/Header/Header.tsx b/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
index bd35c9f..90cd984 100644
--- a/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
@@ -44,6 +44,7 @@ const Header = () => {
                                 <div className="vl-hero-btn d-none d-lg-block text-end">
                                     <span className="vl-btn-wrap text-end">
                                         <button
+                                            suppressHydrationWarning={true}
                                             onClick={() => setIsPopupOpen(true)}
                                             className="vl-btn1"
                                             style={{ border: 'none' }}
@@ -53,7 +54,7 @@ const Header = () => {
                                     </span>
                                 </div>
                                 <div className="vl-header-action-item d-block d-lg-none">
-                                    <button type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu}>
+                                    <button suppressHydrationWarning={true} type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu}>
                                         <i className="fa-solid fa-bars-staggered"></i>
                                     </button>
                                 </div>
diff --git a/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
index 9cccdc9..2460a05 100644
--- a/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
@@ -31,7 +31,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
                             </Link>
                         </div>
                         <div className="vl-offcanvas-close">
-                            <button className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
+                            <button suppressHydrationWarning={true} className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
                                 <i className="fa-solid fa-xmark"></i>
                             </button>
                         </div>
diff --git a/src/components/services-digital-solutions/ServiceDetails.tsx b/src/components/services-digital-solutions/ServiceDetails.tsx
index 594949f..ba9b0ac 100644
--- a/src/components/services-digital-solutions/ServiceDetails.tsx
+++ b/src/components/services-digital-solutions/ServiceDetails.tsx
@@ -47,7 +47,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                                 </ul>
                             </div>
 
-                            <div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/blog/blog-emergency-call.jpg")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
+                            <div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
                                 <img src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
                                 <div className="sidebar__call__inner">
                                     <span className="sidebar__call__icon">
@@ -96,34 +96,60 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
 
                 </div>
 
-                {/* Full-width FAQ section */}
+                {/* Two-column FAQ section */}
                 {service.faq && service.faq.length > 0 && (
                     <div className="service-details__faq-wrapper mt-40">
-                        <div className="sec-title mb-40">
-                            <div className="sec-title__shape"></div>
-                            <h6 className="sec-title__tagline">Service FAQ</h6>
-                            <h3 className="sec-title__title" style={{ fontSize: '34px' }}>Frequently Asked Questions</h3>
-                        </div>
-                        <div className="faq-one__accordion pelocis-accrodion">
-                            {service.faq.map((item, index) => (
-                                <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
-                                    <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
-                                        <div className="accrodion-title__shape"></div>
-                                        <div className="accrodion-title__icon">
-                                            <i className="fa fa-check"></i>
-                                        </div>
-                                        <h4 style={{ fontSize: '24px' }}>
-                                            {item.question}
-                                            <i className="icon-right-arrow-white"></i>
-                                        </h4>
-                                    </div>
-                                    <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
-                                        <div className="inner">
-                                            <p style={{ fontSize: '18px', color: '#444', lineHeight: '1.8' }} dangerouslySetInnerHTML={{ __html: item.answer }} />
-                                        </div>
-                                    </div>
+
+                        <div className="row align-items-center">
+                            <div className="col-lg-6">
+                                <div className="sec-title mb-40">
+                                    <div className="sec-title__shape"></div>
+                                    <h6 className="sec-title__tagline">Service FAQ</h6>
+                                    <h3 className="sec-title__title" style={{ fontSize: '34px' }}>Frequently Asked Questions</h3>
                                 </div>
-                            ))}
+                                <div className="faq-one__accordion pelocis-accrodion">
+                                    {service.faq.map((item, index) => (
+                                        <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
+                                            <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
+                                                <div className="accrodion-title__shape"></div>
+                                                <div className="accrodion-title__icon">
+                                                    <i className="fa fa-check"></i>
+                                                </div>
+                                                <h4 style={{ fontSize: '24px' }}>
+                                                    {item.question}
+                                                    <i className="icon-right-arrow-white"></i>
+                                                </h4>
+                                            </div>
+                                            <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
+                                                <div className="inner">
+                                                    <p style={{ fontSize: '18px', color: '#444', lineHeight: '1.8' }} dangerouslySetInnerHTML={{ __html: item.answer }} />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                            <div className="col-lg-6 mt-4 mt-lg-0">
+                                {service.faqImage ? (
+                                    <div className="service-details__faq-image ms-lg-4">
+                                        <img
+                                            src={service.faqImage}
+                                            alt="FAQ Support"
+                                            className="img-fluid rounded-4"
+                                            style={{ width: '100%', objectFit: 'cover' }}
+                                        />
+                                    </div>
+                                ) : (
+                                    <div className="service-details__faq-image ms-lg-4">
+                                        <img
+                                            src="/assets/images/services/details/service-1.webp"
+                                            alt="FAQ Placeholder"
+                                            className="img-fluid rounded-4"
+                                            style={{ width: '100%', objectFit: 'cover' }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
                 )}
diff --git a/src/components/web-development-service/support/layout/Footer/Footer.tsx b/src/components/web-development-service/support/layout/Footer/Footer.tsx
index d253fdd..8d7bd28 100644
--- a/src/components/web-development-service/support/layout/Footer/Footer.tsx
+++ b/src/components/web-development-service/support/layout/Footer/Footer.tsx
@@ -1,217 +1,161 @@
-import Link from 'next/link';
-import React from 'react';
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+import axios from "axios";
 
-const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
-    const currentYear = new Date().getFullYear();
+const Footer = () => {
+    const [email, setEmail] = useState("");
+    const [status, setStatus] = useState({ show: false, type: "", message: "" });
 
-    const companyLinks = [
-        { label: 'Home', link: '#home' },
-        { label: 'About Us', link: '#about' },
-        { label: 'Portfolio', link: '#portfolio' },
-        { label: 'Faq', link: '#faq' },
-        { label: 'Contact', link: '#contact-trigger' },
-    ];
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!email) return;
 
-    const serviceLinks = [
-        { label: 'Website Development', link: '#services' },
-    ];
+        setStatus({ show: false, type: "", message: "" });
 
-    const socialLinks = [
-        { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
-        { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
-        { icon: 'fa-brands fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
-        { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
-        { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
-    ];
+        const emailData = {
+            email: email,
+            message: `Newsletter Subscription Request from: ${email}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube Footer Newsletter",
+        };
+
+        try {
+            const res = await axios.post("https://mailserver.metatronnest.com/send", emailData);
+            setStatus({
+                show: true,
+                type: "success",
+                message: res?.data?.message || "Subscribed successfully!",
+            });
+            setEmail("");
+        } catch (error) {
+            console.error("❌ Newsletter error:", error);
+            setStatus({
+                show: true,
+                type: "danger",
+                message: "Failed to subscribe. Please try again.",
+            });
+        }
+    };
 
     return (
-        <div
-            className={`${containerClass} sp8 position-relative`}
-            style={{
-                backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
-                backgroundPosition: 'center',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: 'cover',
-                overflow: 'hidden',
-            }}
-        >
-            {/* Light overlay to ensure text readability */}
-            <div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
+        <footer>
+            <div className="footer-main bg-color-1" style={{ backgroundImage: 'url(/assets/images/footer/footer-bg-1.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}>
+                <div className="footer-top section-space-medium">
+                    <div className="small-container">
+                        <div className="row g-4">
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-1">
+                                    <figure className="image">
+                                        <img src="/assets/img-app/logo.webp" alt="footer logo" />
+                                    </figure>
+                                    <p className="mt-20 mb-40">Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
+                                    <div className="footer-socials mb-20">
+                                        <span>
+                                            <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-facebook-f"></i>
+                                            </a>
+                                        </span>
 
-            {topSpace && (
-                <>
-                    <div className="space100"></div>
-                    <div className="space50"></div>
-                </>
-            )}
-            <div className="container position-relative" style={{ zIndex: 1 }}>
-                <div className="row">
-                    {/* Column 1: Logo & Description */}
-                    <div className="col-lg-4 col-md-6">
-                        <div className="footer-logo1">
-                            <img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
-                            <div className="space24"></div>
-                            <p style={{ color: '#fff', lineHeight: '1.7' }}>
-                                We build high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth.
-                            </p>
-                            <div className="space24"></div>
-                            <div className="footer-socials d-flex gap-3">
-                                {socialLinks.map((social, idx) => (
-                                    <a
-                                        key={idx}
-                                        id={`footer-social-${social.icon}`}
-                                        href={social.link}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="social-icon-box"
-                                        style={{
-                                            width: '40px',
-                                            height: '40px',
-                                            borderRadius: '50%',
-                                            background: social.bg || '#3779b9',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            color: '#fff',
-                                            transition: 'transform 0.3s'
-                                        }}
-                                        onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
-                                        onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(0)'; }}
-                                    >
-                                        <i className={`fa-brands ${social.icon}`}></i>
-                                    </a>
-                                ))}
+                                        <span>
+                                            <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-instagram"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-twitter"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-linkedin-in"></i>
+                                            </a>
+                                        </span>
+
+                                        <span>
+                                            <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                                <i className="fa-brands fa-youtube"></i>
+                                            </a>
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
-
-                    {/* Column 2: Company */}
-                    <div className="col-lg-2 col-md-6">
-                        <div className="space30 d-md-none d-block"></div>
-                        <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Company
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
-                                {companyLinks.map((item, idx) => (
-                                    <li key={idx} style={{ marginBottom: '15px' }}>
-                                        <Link
-                                            href={item.link}
-                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
-                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
-                                            onClick={(e) => {
-                                                if (item.link === '#contact-trigger') {
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-2 pl-50">
+                                    <h4 className="mb-20 footer-title">Quick Links</h4>
+                                    <ul className="service-list">
+                                        <li><Link href="#home">Home</Link></li>
+                                        <li><Link href="#about">About Us</Link></li>
+                                        <li><Link href="#portfolio">Portfolio</Link></li>
+                                        <li><Link href="#faq">Faq</Link></li>
+                                        <li>
+                                            <Link
+                                                href="#contact-trigger"
+                                                onClick={(e) => {
                                                     e.preventDefault();
                                                     window.dispatchEvent(new CustomEvent('openContactPopup'));
-                                                }
-                                            }}
-                                        >
-                                            {item.label}
-                                        </Link>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </div>
-
-                    {/* Column 3: Services */}
-                    <div className="col-lg-3 col-md-6">
-                        <div className="space30 d-lg-none d-block"></div>
-                        <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Services
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
-                                {serviceLinks.map((item, idx) => (
-                                    <li key={idx} style={{ marginBottom: '15px' }}>
-                                        <Link
-                                            href={item.link}
-                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
-                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
-                                            onClick={(e) => {
-                                                if (item.link === '#contact-trigger') {
-                                                    e.preventDefault();
-                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
-                                                }
-                                            }}
-                                        >
-                                            {item.label}
-                                        </Link>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </div>
-
-                    {/* Column 4: Newsletter */}
-                    {/* Column 4: Location */}
-                    <div className="col-lg-3 col-md-6">
-                        <div className="space30 d-lg-none d-block"></div>
-                        <div className="vl-footer-widget location-widget">
-                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
-                                Get In Touch
-                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
-                            </h3>
-                            <div className="contact-list d-flex flex-column gap-3">
-                                {/* Email */}
-                                <div className="contact-item d-flex align-items-start gap-3 flex-wrap">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-envelope"></i>
-                                    </div>
-                                    <div className="contact-text" style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', maxWidth: '100%' }}>
-                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
-                                            info@metatroncubesolutions.com
-                                        </a>
-                                    </div>
+                                                }}
+                                            >
+                                                Contact
+                                            </Link>
+                                        </li>
+                                    </ul>
                                 </div>
-
-                                {/* Location */}
-                                <div className="contact-item d-flex align-items-start gap-3">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-location-dot"></i>
-                                    </div>
-                                    <div className="contact-text">
-                                        <p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
-                                            Waterloo, Ontario Canada
-                                        </p>
-                                    </div>
+                            </div>
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-2">
+                                    <h4 className="mb-20 footer-title">Our Services</h4>
+                                    <ul className="service-list">
+                                        <li><Link href="#services">Website Development</Link></li>
+                                    </ul>
                                 </div>
-
-                                {/* Phone */}
-                                <div className="contact-item d-flex align-items-start gap-3 flex-wrap">
-                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
-                                        <i className="fa-solid fa-phone"></i>
-                                    </div>
-                                    <div className="contact-text">
-                                        <a href="tel:+1-647-679-7651" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
-                                            +1-647-679-7651
-                                        </a>
+                            </div>
+                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
+                                <div className="footer-widget-4 pr-30">
+                                    <h4 className="mb-20 footer-title">Newsletter</h4>
+                                    <p>Subscribe our newsletter to get our latest update & news</p>
+                                    <div className="footer-subscribe">
+                                        {status.show && (
+                                            <div className={`alert alert-${status.type === 'danger' ? 'danger' : 'success'} mb-3`} style={{ fontSize: '14px', padding: '10px' }}>
+                                                {status.message}
+                                            </div>
+                                        )}
+                                        <form onSubmit={handleSubmit}>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                placeholder="Your email address"
+                                                required
+                                                suppressHydrationWarning={true}
+                                                value={email}
+                                                onChange={(e) => setEmail(e.target.value)}
+                                            />
+                                            <button type="submit" className="primary-btn-1" style={{ backgroundPosition: 'left center' }} suppressHydrationWarning={true}>
+                                                SUBSCRIBE NOW
+                                            </button>
+                                        </form>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-
-                <div className="space60"></div>
-                <div className="row align-items-center">
-                    <div className="col-lg-12 col-md-12">
-                        <div className="vl-copyright-area">
-                            <p style={{ color: '#fff', margin: 0 }}>Copyright {new Date().getFullYear()} © by{" "} Metatroncube Software Solutions. All Rights Reserved.</p>
+                <div className="small-container">
+                    <div className="footer-bottom pt-15 pb-15" style={{ justifyContent: "center" }}>
+                        <div className="left-area">
+                            <span>Copyright {new Date().getFullYear()} © by{" "}
+                                Metatroncube Software Solutions.
+                                All Rights Reserved.
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </footer>
     );
 };
 
 export default Footer;
-<span>Copyright {new Date().getFullYear()} © by{" "}
-    Metatroncube Software Solutions.
-    All Rights Reserved.
-</span>
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 607820f..5fb2ca4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -10,6 +10,7 @@ export interface ServiceType {
     slug?: string;
     content?: string;
     fullcontent?: string;
+    faqImage?: string;
     faq?: { question: string; answer: string }[];
     metatitle?: string;
     metaDesc?: string;
diff --git a/src/utils/data.ts b/src/utils/data.ts
index ca37fbd..32dc479 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -553,7 +553,7 @@ export const ourServices = [
                 <img src="/assets/images/services/service/web.webp" alt="benefit">
             </div>
 
-            <p class="service-details__text"><b>A website is not just an online destination; it’s a digital journey that starts with a single click.</b></p>
+            <p class="service-details__text text-center"><b>"A website is not just an online destination; it’s a digital journey that starts with a single click."</b></p>
 
             <p class="service-details__text">Our approach to website development goes beyond the technicalities of coding. We delve into the heart of your business, identifying and understanding your market, goals, and user needs. This allows us to create not just websites, but digital experiences that resonate with your audience, drive engagement, and foster growth.</p>
  <p class="service-details__text">With a team of skilled developers, creative designers, and strategic thinkers, we harness the latest in web technologies and trends to develop websites that are not only visually stunning but also functionally robust. Whether you’re a startup looking to make your mark, a growing business ready to scale, or an established brand seeking to innovate, our comprehensive website development services are tailored to meet your specific needs.</p>
@@ -788,7 +788,7 @@ export const ourServices = [
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-web.webp" alt="benefit">
+                            <img src="/assets/images/services/details/service-1.webp" alt="benefit">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -809,6 +809,7 @@ Robust Security</li>
             </div>
 
         `,
+        faqImage: '/assets/images/services/details/web.webp',
         faq: [
             {
                 "question": "Is my website builder allowed on site?",
@@ -844,6 +845,9 @@ Robust Security</li>
             <h2 class="service-details__content-title">Application Development at Metatroncube: Crafting Digital Masterpieces</h2>
             <p class="service-details__text">Step into the future of mobile technology with Metatroncube's Application Development Services. Our expertise spans across various platforms and technologies, ensuring we deliver high-performance, scalable, and engaging mobile applications tailored to your business needs. Whether you're looking for native solutions or cross-platform versatility, our skilled developers are adept at turning your concepts into reality.</p>
 
+            <div class="service-details__benefit__img mb-40">
+                <img src="/assets/images/services/service/app.webp" alt="benefit">
+            </div>
             
             <h4 class="service-details__content-title">Android Application Development</h4>
             <p class="service-details__text">Enter the vast world of Android with custom apps designed to harness the full power of the most widely used mobile OS. We utilize the latest frameworks and tools to ensure your Android app is robust, user-friendly, and capable of standing out in the crowded Play Store.</p>
@@ -851,7 +855,10 @@ Robust Security</li>
             <h4 class="service-details__content-title">iOS Application Development</h4>
             <p class="service-details__text">Immerse your users in the premium experience of iOS. Our developers craft sleek, intuitive applications that adhere to Apple's stringent design guidelines, providing an unmatched user experience that reflects the quality of the iOS ecosystem.</p>
 
-            <h4 class="service-details__content-title">Native Application Development</h4>
+            
+        `,
+
+        fullcontent: `<h4 class="service-details__content-title mt-20">Native Application Development</h4>
             <p class="service-details__text">For optimal performance and seamless integration with device capabilities, go native. We build native apps for both Android and iOS, ensuring they run smoothly, utilize device features to the fullest, and provide a superior user experience.</p>
 
             <h4 class="service-details__content-title">Cross-Platform Development with Flutter</h4>
@@ -859,7 +866,7 @@ Robust Security</li>
 
             <p class="service-details__text">By partnering with Metatroncube for your application development needs, you gain access to a team that's committed to innovation, quality, and delivering exceptional digital experiences. Let us help you navigate the mobile landscape with applications that elevate your brand and engage your users.</p>
 
-            <p class="service-details__text"><b>Code with Vision, Create with Precision – Crafting Mobile Experiences that Inspire.</b></p>
+            <p class="service-details__text text-center"><b>"Code with Vision, Create with Precision – Crafting Mobile Experiences that Inspire."</b></p>
 
 
 
@@ -901,7 +908,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom.webp" alt="Cross-Platform Development">
+                            <img src="/assets/images/services/details/service-2.webp" alt="Cross-Platform Development">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -917,8 +924,8 @@ Robust Security</li>
                         </div>
                     </div>
                 </div>
-            </div>
-        `,
+            </div>`,
+        faqImage: '/assets/images/services/details/mbl.webp',
         faq: [
             {
                 "question": "What is an app development agency?",
@@ -957,19 +964,25 @@ Robust Security</li>
             <h4 class="service-details__content-title">Graphic Design Services: Branding and Identity Design</h4>
             <p class="service-details__text">Elevate your corporate persona with Metatroncube's Graphic Design Services. We specialize in creating logos and brand elements that are not only visually stunning but also embody your company's core values, ensuring a consistent and powerful brand identity.</p>
 
+
+            <div class="service-details__benefit__img mb-40">
+                <img src="/assets/images/services/service/graphic.webp" alt="benefit">
+            </div>
+
             <h4 class="service-details__content-title">Graphic Design Services: Marketing Collateral Design</h4>
             <p class="service-details__text">Amplify your marketing strategy with Metatroncube's Graphic Design Services. Our team expertly produces brochures, flyers, and banners that not only grab attention but also convey your message effectively, making every piece of marketing collateral count.</p>
 
             <h4 class="service-details__content-title">Graphic Design Services: UI/UX Design</h4>
             <p class="service-details__text">With Metatroncube's Graphic Design Services, your digital presence will become more intuitive and visually appealing. Our commitment to refined UI/UX design ensures a seamless, user-friendly experience that translates into increased engagement and customer satisfaction.</p>
 
-            <h4 class="service-details__content-title">Graphic Design Services: Packaging Design</h4>
+                   `,
+        fullcontent: ` <h4 class="service-details__content-title mt-20">Graphic Design Services: Packaging Design</h4>
             <p class="service-details__text">Distinguish your products with the innovative packaging design offered by Metatroncube's Graphic Design Services. We understand the critical role of packaging in market success and design with the intent to make your products stand out and resonate with consumers.</p>
 
             <h4 class="service-details__content-title">Graphic Design Services: Infographics and Data Visualization</h4>
             <p class="service-details__text">Transform data into impactful stories with Metatroncube's Graphic Design Services. Our expertise in infographics and data visualization makes complex information easily digestible, visually engaging, and suitable for a variety of platforms, from annual reports to social media posts.</p>
 
-             <p class="service-details__text"><b>Designing Tomorrow’s Vision Today — Metatroncube: Where Creativity Meets Strategy.</b></p>
+             <p class="service-details__text text-center"><b>"Designing Tomorrow’s Vision Today — Metatroncube: Where Creativity Meets Strategy."</b></p>
 
             <p class="service-details__text">By choosing Metatroncube for your graphic design needs, you're not just getting a service; you're investing in a visual strategy that amplifies your brand's presence and connects with your customers on a deeper level.</p>
 
@@ -1010,7 +1023,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-gra.webp" alt="Graphic Design Services">
+                            <img src="/assets/images/services/details/service-3.webp" alt="Graphic Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1027,7 +1040,8 @@ Robust Security</li>
                     </div>
                 </div>
             </div>
-        `,
+`,
+        faqImage: '/assets/images/services/details/graphic.webp',
         faq: [
             {
                 "question": "What makes a good graphic design?",
@@ -1063,13 +1077,24 @@ Robust Security</li>
             <h2 class="service-details__content-title">UI/UX Design Services at Metatroncube: Shaping Experiences That Resonate</h2>
             <p class="service-details__text">Elevate your digital presence with Metatroncube's UI/UX Design Services, where user experience meets stunning aesthetics. Our design team focuses on creating interfaces that are not only visually appealing but also intuitively navigable, ensuring users enjoy every interaction with your digital product. From initial research to final implementation, we craft experiences that delight users and drive engagement.</p>
 
+
+              <div class="service-details__benefit__img mb-40">
+                <img src="/assets/images/services/service/ui.webp" alt="benefit">
+            </div>
+
+
             <h4 class="service-details__content-title">Research and Strategy</h4>
             <p class="service-details__text">Understanding your users is key. We begin with in-depth research and analysis to inform our design strategy, ensuring that every decision is data-driven and user-centered.</p>
 
             <h4 class="service-details__content-title">User Interface (UI) Design</h4>
             <p class="service-details__text">Captivate your audience with beautifully designed interfaces. Our UI designs are tailored to be clear, concise, and visually engaging, enhancing the overall aesthetic of your digital product.</p>
 
-            <h4 class="service-details__content-title">User Experience (UX) Design</h4>
+               <p class="service-details__text text-center"><b>"Designing with Empathy, Perfecting with Insight — Metatroncube: Shaping Experiences That Resonate."</b></p> 
+
+          
+        `,
+        fullcontent: `
+          <h4 class="service-details__content-title">User Experience (UX) Design</h4>
             <p class="service-details__text">Craft a seamless journey through your digital landscape. We map out the user flow to create intuitive and accessible experiences, which keep users coming back.</p>
 
             <h4 class="service-details__content-title">Prototyping and Testing</h4>
@@ -1078,8 +1103,6 @@ Robust Security</li>
             <h4 class="service-details__content-title">Responsive and Adaptive Design</h4>
             <p class="service-details__text">Prepare your product for every screen and device. Our responsive designs ensure your app or website performs flawlessly, no matter where it's accessed from.</p>
 
-                 <p class="service-details__text"><b>Designing with Empathy, Perfecting with Insight — Metatroncube: Shaping Experiences That Resonate.</b></p> 
-
 
             <p class="service-details__text">By integrating Metatroncube's UI/UX Design Services into your project, you're choosing a partner dedicated to exceptional design and optimal user experiences. Let's create something extraordinary together.</p>
 
@@ -1122,7 +1145,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-ui.webp" alt="UI/UX Design Services">
+                            <img src="/assets/images/services/details/service-4.webp" alt="UI/UX Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1138,8 +1161,8 @@ Robust Security</li>
                         </div>
                     </div>
                 </div>
-            </div>
-        `,
+            </div>`,
+        faqImage: '/assets/images/services/details/ui-ux.webp',
         faq: [
             {
                 "question": "What does a UI/UX design agency do?",
@@ -1177,20 +1200,28 @@ Robust Security</li>
 
             <p class="service-details__text">Transform your online presence with Metatroncube's SEO & Content Writing Services. In the digital age, visibility is key to success, and our specialized services are designed to propel your website to the top of search engine rankings. We blend artful content creation with strategic SEO practices to not only attract but also engage and retain your audience.</p>
 
+
+                
+              <div class="service-details__benefit__img mb-40">
+                <img src="/assets/images/services/service/seo.webp" alt="benefit">
+            </div>
+
             <h4 class="service-details__content-title">Search Engine Optimization (SEO)</h4>
             <p class="service-details__text">Unlock the potential of your website with our comprehensive SEO strategies. From keyword research and on-page optimization to link building and technical SEO, we ensure your site ranks higher on search engines, driving organic traffic and enhancing your online authority.</p>
 
             <h4 class="service-details__content-title">Content Writing</h4>
             <p class="service-details__text">Content is the heart of digital marketing, and our expert writers know how to make it beat. We produce engaging, informative, and SEO-friendly content that resonates with your audience and supports your marketing goals. From blog posts and articles to web content and whitepapers, our content not only informs but also inspires action.</p>
 
-            <h4 class="service-details__content-title">Integrated SEO & Content Strategy</h4>
+           <p class="service-details__text text-center"><b>"Crafting Words, Elevating Brands – Where Content Meets Purpose and Strategy."</b></p>
+
+        `,
+        fullcontent: `
+        
+             <h4 class="service-details__content-title mt-20">Integrated SEO & Content Strategy</h4>
             <p class="service-details__text">We don't just write content; we craft an integrated strategy where content and SEO work hand in hand. By aligning your content strategy with SEO best practices, we ensure that every piece of content is an opportunity to improve your search rankings and connect with your target audience.</p>
 
             <h4 class="service-details__content-title">Analytics and Reporting</h4>
-            <p class="service-details__text">Transparency and data-driven decisions are at the core of our services. We provide detailed analytics and performance reports, giving you insights into how our strategies are enhancing your online visibility and contributing to your business growth.</p>
-
-    <p class="service-details__text"><b>Crafting Words, Elevating Brands – Where Content Meets Purpose and Strategy.</b></p>
-            
+            <p class="service-details__text">Transparency and data-driven decisions are at the core of our services. We provide detailed analytics and performance reports, giving you insights into how our strategies are enhancing your online visibility and contributing to your business growth.</p>        
 
             <p class="service-details__text">Partner with Metatroncube for SEO & Content Writing Services and experience the power of content that's not just seen but also felt and acted upon. Let's elevate your brand's voice and make it echo across the digital landscape.</p>
 
@@ -1231,7 +1262,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-seo.webp" alt="SEO & Content Writing Services">
+                            <img src="/assets/images/services/details/service-5.webp" alt="SEO & Content Writing Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1248,7 +1279,9 @@ Robust Security</li>
                     </div>
                 </div>
             </div>
+
         `,
+        faqImage: '/assets/images/services/details/seo.webp',
         faq: [
             {
                 "question": "What is the importance of SEO in content writing?",
@@ -1285,14 +1318,25 @@ Robust Security</li>
            
             <p class="service-details__text"><b>Introduction:</b> Metatroncube Software Solutions is not just a digital marketing agency in Canada; we are your strategic partner for transformative digital success. Our bespoke digital marketing solutions are crafted to captivate your unique Canadian audience, driving the success story you deserve.</p>
 
+ <div class="service-details__benefit__img mb-40">
+                <img src="/assets/images/services/service/digital.webp" alt="benefit">
+            </div>
+
          <p class="service-details__text"><b>Digital Marketing Services:</b>  "Shaping Canada’s Digital Landscape – One Campaign at a Time"</p>
 
+             
+
             <p class="service-details__text">Your search for the best digital marketing agency in Canada ends here. Metatroncube Software Solutions is home to award-winning digital marketing excellence. We are committed to driving increased traffic, generating leads, and converting prospects into loyal customers. Engage with us to elevate your online presence and connect with your audience across Canada.</p>
 
             <h4 class="service-details__content-title">SEO: Optimizing for the Canadian Market – Beyond the Search Engine</h4>
             <p class="service-details__text">At Metatroncube, SEO is a strategic endeavor that goes beyond ranking first. It's about understanding and acting upon the motivations of your Canadian audience. By leveraging insightful data, we create compelling content that resonates with your clientele, positioning your brand as the go-to within your industry in Canada.</p>
 
-            <h4 class="service-details__content-title">PPC: Hyper-Targeted Pay Per Click Strategies – The Fast Lane to Visibility</h4>
+           
+        `,
+
+        fullcontent: `
+        
+         <h4 class="service-details__content-title">PPC: Hyper-Targeted Pay Per Click Strategies – The Fast Lane to Visibility</h4>
             <p class="service-details__text">With Metatroncube's Pay Per Click marketing, instantly navigate a stream of qualified Canadian traffic to your site. Our PPC experts utilize data-centric strategies to target traffic effectively, enhance conversions, and maximize your ROI, solidifying your online presence in the competitive Canadian market.</p>
 
             <h4 class="service-details__content-title">Display Advertising: Engaging Canadian Audiences with Precision Display Advertising</h4>
@@ -1310,7 +1354,7 @@ Robust Security</li>
             <h4 class="service-details__content-title">Content Marketing: Educating and Engaging the Canadian Market</h4>
             <p class="service-details__text">In Canada, content marketing is the key to building a base of loyal followers. Metatroncube begins by understanding the unique interests of your Canadian audience. Our team of expert writers then crafts content that satisfies their informational needs, establishing your brand's authority.</p>
 
-            <p class="service-details__text"><b>Crafting Visibility. Cultivating Connections. Let Metatroncube illuminate your digital path and forge lasting bonds with your audience.</b></p>
+            <p class="service-details__text mb-50"><b>Crafting Visibility. Cultivating Connections. Let Metatroncube illuminate your digital path and forge lasting bonds with your audience.</b></p>
 
 
             <h2 class="service-details__content-title text-center">Join Forces with a Leading Digital Marketing Agency in Canada</h2>
@@ -1350,14 +1394,9 @@ Robust Security</li>
 
 
 
-            <div class="service-details__benefit">
+            <div class="service-details__benefit mb-50">
                 <div class="row">
-                    <div class="col-md-6">
-                        <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-digi.webp" alt="Digital Marketing Services">
-                        </div>
-                    </div>
-                    <div class="col-md-6">
+                <div class="col-md-5">
                         <div class="service-details__benefit__content">
                             <h3 class="service-details__benefit__title">Amplify Your Reach with SEO Mastery</h3>
                             <p class="service-details__benefit__text">Ascend Search Rankings and Connect with Your Audience</p>
@@ -1369,6 +1408,11 @@ Robust Security</li>
                             </ul>
                         </div>
                     </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="/assets/images/services/details/service-6-1.webp" alt="Digital Marketing Services">
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -1377,7 +1421,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="/assets/images/services/details/bottom-digi2.webp" alt="Social Media Marketing">
+                            <img src="/assets/images/services/details/service-6-2.webp" alt="Social Media Marketing">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1394,7 +1438,9 @@ Robust Security</li>
                     </div>
                 </div>
             </div>
+        
         `,
+        faqImage: '/assets/images/services/details/digital.webp',
         faq: [
             {
                 "question": "What does a digital marketing agency do?",
@@ -1545,6 +1591,7 @@ Robust Security</li>
                 </div>
             </div>
         `,
+        faqImage: '/assets/images/services/details/service-details-2.png',
         faq: [
             {
                 "question": "Is my website builder allowed on site?",
@@ -1654,6 +1701,7 @@ Robust Security</li>
                 </div>
             </div>
         `,
+        faqImage: '/assets/images/services/details/service-details-2.png',
         faq: [
             {
                 "question": "What is an app development agency?",
@@ -1766,6 +1814,7 @@ Robust Security</li>
                 </div>
             </div>
         `,
+        faqImage: '/assets/images/services/details/service-details-2.png',
         faq: [
             {
                 "question": "Is my website builder allowed on site?",
@@ -1827,6 +1876,7 @@ Robust Security</li>
 
          
         `,
+        faqImage: '/assets/images/services/details/service-1.webp',
         faq: [
             {
                 "question": "Is my website builder allowed on site?",
@@ -1943,6 +1993,7 @@ Robust Security</li>
                 </div>
             </div>
         `,
+        faqImage: '/assets/images/services/details/service-1.webp',
         faq: [
             {
                 "question": "What is the importance of SEO in content writing?",