diff --git a/controllers/appointmentController.js b/controllers/appointmentController.js
new file mode 100644
index 0000000..076d246
--- /dev/null
+++ b/controllers/appointmentController.js
@@ -0,0 +1,377 @@
+const AppointmentSubmission = require("../models/appointmentSubmission");
+const Appointment = require("../models/appointment");
+
+// ==================== CMS ADMIN FUNCTIONS ====================
+
+// Render admin page for appointment management
+exports.index = async (req, res) => {
+    try {
+        let appointment = await Appointment.findOne({ name: "default" });
+
+        // If no data in DB, try to load from JSON file
+        if (!appointment) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/appointment.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                appointment = await Appointment.migrateFromJson(jsonData);
+            } else {
+                // Create default appointment
+                appointment = await Appointment.create({
+                    name: "default",
+                    hero: {
+                        title: "Make Appointment",
+                        backgroundImage: "",
+                        subtitle: "",
+                        heading: "",
+                        description: "",
+                    },
+                    visaOptions: [],
+                    form: {
+                        heading: "Request Appointment",
+                        fields: [],
+                        submitButton: {
+                            text: "Request Appointment",
+                            icon: "fa-solid fa-arrow-right",
+                            buttonClass: "theme-btn",
+                        },
+                    },
+                });
+            }
+        }
+
+        const { startDate, endDate } = req.query;
+        const query = {};
+
+        if (startDate || endDate) {
+            query.createdAt = {};
+            if (startDate) {
+                query.createdAt.$gte = new Date(startDate);
+            }
+            if (endDate) {
+                // Set end date to end of day
+                const end = new Date(endDate);
+                end.setHours(23, 59, 59, 999);
+                query.createdAt.$lte = end;
+            }
+        }
+
+        const submissions = await AppointmentSubmission.find(query).sort({ createdAt: -1 }).limit(50);
+
+        res.render("admin/appointment/index", {
+            layout: "layouts/main",
+            title: "Appointment Management",
+            data: appointment,
+            submissions,
+            startDate,
+            endDate,
+            user: req.session.user,
+            frontendUrl: process.env.FRONTEND_URL || "http://localhost:3000",
+        });
+    } catch (err) {
+        console.error("Error loading appointment admin page:", err);
+        req.flash("error", "Error loading appointment data");
+        res.redirect("/admin/dashboard");
+    }
+};
+
+// Update appointment data
+exports.update = async (req, res) => {
+    try {
+        const { hero, visaOptions, form } = req.body;
+
+        // Parse JSON strings if needed
+        const heroData = typeof hero === "string" ? JSON.parse(hero) : hero;
+        const visaOptionsData = typeof visaOptions === "string" ? JSON.parse(visaOptions) : visaOptions;
+        const formData = typeof form === "string" ? JSON.parse(form) : form;
+
+        let appointment = await Appointment.findOne({ name: "default" });
+
+        if (appointment) {
+            appointment.hero = heroData;
+            appointment.visaOptions = visaOptionsData;
+            appointment.form = formData;
+            await appointment.save();
+        } else {
+            appointment = await Appointment.create({
+                name: "default",
+                hero: heroData,
+                visaOptions: visaOptionsData,
+                form: formData,
+            });
+        }
+
+        req.flash("success", "Appointment data updated successfully");
+        res.redirect("/admin/appointment");
+    } catch (err) {
+        console.error("Error updating appointment:", err);
+        req.flash("error", "Error updating appointment data");
+        res.redirect("/admin/appointment");
+    }
+};
+
+// API to get appointment data
+exports.getAppointmentData = async (req, res) => {
+    try {
+        let appointment = await Appointment.findOne({ name: "default" });
+
+        if (!appointment) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/appointment.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                appointment = await Appointment.migrateFromJson(jsonData);
+            }
+        }
+
+        res.json({
+            success: true,
+            data: appointment,
+        });
+    } catch (err) {
+        console.error("Error getting appointment data:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading appointment data",
+        });
+    }
+};
+
+// Public API to get appointment page data (for frontend)
+exports.api = async (req, res) => {
+    try {
+        let appointment = await Appointment.findOne({ name: "default" });
+
+        if (!appointment) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/appointment.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                appointment = await Appointment.migrateFromJson(jsonData);
+            }
+        }
+
+        if (!appointment) {
+            return res.status(404).json({
+                success: false,
+                error: "Appointment data not found",
+            });
+        }
+
+        res.json({
+            success: true,
+            data: {
+                hero: appointment.hero,
+                visaOptions: appointment.visaOptions,
+                form: appointment.form,
+            },
+        });
+    } catch (err) {
+        console.error("Error getting appointment API data:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading appointment data",
+        });
+    }
+};
+
+// ==================== APPOINTMENT SUBMISSIONS API ====================
+
+// API để submit appointment form (từ frontend)
+exports.submitAppointment = async (req, res) => {
+    try {
+        const { name, email, phone, address, appointmentDate, message, visaTypes } = req.body;
+
+        // Validation
+        if (!name || !email) {
+            return res.status(400).json({
+                success: false,
+                error: "Name and email are required",
+            });
+        }
+
+        // Create new submission
+        const submission = new AppointmentSubmission({
+            name: name.trim(),
+            email: email.trim().toLowerCase(),
+            phone: phone?.trim() || "",
+            address: address?.trim() || "",
+            appointmentDate: appointmentDate?.trim() || "",
+            message: message?.trim() || "",
+            visaTypes: Array.isArray(visaTypes) ? visaTypes : [],
+            ipAddress: req.ip || req.connection?.remoteAddress || "",
+            userAgent: req.get("User-Agent") || "",
+        });
+
+        await submission.save();
+
+        res.status(201).json({
+            success: true,
+            message: "Thank you! Your appointment request has been submitted. We will contact you soon.",
+            data: {
+                id: submission._id,
+                name: submission.name,
+                email: submission.email,
+                appointmentDate: submission.appointmentDate,
+            },
+        });
+    } catch (err) {
+        console.error("Error submitting appointment:", err);
+
+        // Handle validation errors
+        if (err.name === "ValidationError") {
+            const errors = Object.values(err.errors).map((e) => e.message);
+            return res.status(400).json({
+                success: false,
+                error: errors.join(", "),
+            });
+        }
+
+        res.status(500).json({
+            success: false,
+            error: "Error submitting appointment. Please try again later.",
+        });
+    }
+};
+
+// API để lấy danh sách appointments (cho admin)
+exports.getAppointments = async (req, res) => {
+    try {
+        const { status, page = 1, limit = 20 } = req.query;
+
+        const query = {};
+        if (status && ["pending", "confirmed", "completed", "cancelled"].includes(status)) {
+            query.status = status;
+        }
+
+        const skip = (parseInt(page) - 1) * parseInt(limit);
+
+        const [appointments, total] = await Promise.all([
+            AppointmentSubmission.find(query)
+                .sort({ createdAt: -1 })
+                .skip(skip)
+                .limit(parseInt(limit)),
+            AppointmentSubmission.countDocuments(query),
+        ]);
+
+        res.json({
+            success: true,
+            data: appointments,
+            pagination: {
+                page: parseInt(page),
+                limit: parseInt(limit),
+                total,
+                totalPages: Math.ceil(total / parseInt(limit)),
+            },
+        });
+    } catch (err) {
+        console.error("Error getting appointments:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading appointments",
+        });
+    }
+};
+
+// API để cập nhật status của appointment
+exports.updateAppointmentStatus = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const { status, notes } = req.body;
+
+        const validStatuses = ["pending", "confirmed", "completed", "cancelled"];
+        if (!validStatuses.includes(status)) {
+            return res.status(400).json({
+                success: false,
+                error: "Invalid status",
+            });
+        }
+
+        const updateData = { status };
+        if (notes !== undefined) updateData.notes = notes;
+        if (status === "confirmed") updateData.confirmedAt = new Date();
+        if (status === "completed") updateData.completedAt = new Date();
+
+        const appointment = await AppointmentSubmission.findByIdAndUpdate(
+            id,
+            updateData,
+            { new: true }
+        );
+
+        if (!appointment) {
+            return res.status(404).json({
+                success: false,
+                error: "Appointment not found",
+            });
+        }
+
+        res.json({
+            success: true,
+            data: appointment,
+        });
+    } catch (err) {
+        console.error("Error updating appointment:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error updating appointment",
+        });
+    }
+};
+
+// API để lấy chi tiết một appointment
+exports.getAppointmentById = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const appointment = await AppointmentSubmission.findById(id);
+
+        if (!appointment) {
+            return res.status(404).json({
+                success: false,
+                error: "Appointment not found",
+            });
+        }
+
+        res.json({
+            success: true,
+            data: appointment,
+        });
+    } catch (err) {
+        console.error("Error getting appointment:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading appointment",
+        });
+    }
+};
+
+// API để xóa appointment
+exports.deleteAppointment = async (req, res) => {
+    try {
+        const { id } = req.params;
+        const appointment = await AppointmentSubmission.findByIdAndDelete(id);
+
+        if (!appointment) {
+            return res.status(404).json({
+                success: false,
+                error: "Appointment not found",
+            });
+        }
+
+        res.json({
+            success: true,
+            message: "Appointment deleted successfully",
+        });
+    } catch (err) {
+        console.error("Error deleting appointment:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error deleting appointment",
+        });
+    }
+};
diff --git a/controllers/contactController.js b/controllers/contactController.js
index 8b49ed1..55890f4 100644
--- a/controllers/contactController.js
+++ b/controllers/contactController.js
@@ -1,5 +1,6 @@
 const { addBaseUrlToImages } = require("../utils/imageHelper");
 const Contact = require("../models/contact");
+const ContactSubmission = require("../models/contactSubmission");
 
 // Get contact data from MongoDB
 const getContactData = async () => {
@@ -60,6 +61,7 @@ exports.index = async (req, res) => {
         zoom: 15,
         location: "",
         markerTitle: "",
+        embedUrl: "",
         tileLayer: {
           url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
           attribution: "",
@@ -70,16 +72,38 @@ exports.index = async (req, res) => {
       form: {
         sectionLabel: "",
         heading: "",
+        description: "",
         fields: [],
-        submitButton: { text: "Send Message" },
+        submitButton: { text: "Send Message", icon: "fa-solid fa-arrow-right", buttonClass: "theme-btn style-2" },
       },
     };
-    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+
+    const { startDate, endDate } = req.query;
+    const query = {};
+
+    if (startDate || endDate) {
+      query.createdAt = {};
+      if (startDate) {
+        query.createdAt.$gte = new Date(startDate);
+      }
+      if (endDate) {
+        // Set end date to end of day
+        const end = new Date(endDate);
+        end.setHours(23, 59, 59, 999);
+        query.createdAt.$lte = end;
+      }
+    }
+
+    const submissions = await ContactSubmission.find(query).sort({ createdAt: -1 }).limit(50);
+    const frontendUrl = process.env.FRONTEND_URL;
 
     res.render("admin/contact/index", {
       title: "Contact Management",
       layout: "layouts/main",
       data,
+      submissions,
+      startDate,
+      endDate,
       frontendUrl,
       currentPath: req.path,
       user: req.session.user,
@@ -140,6 +164,7 @@ exports.update = async (req, res) => {
           zoom: 15,
           location: "",
           markerTitle: "",
+          embedUrl: "",
           tileLayer: {
             url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
             attribution: "",
@@ -150,8 +175,9 @@ exports.update = async (req, res) => {
         form: formData || {
           sectionLabel: "",
           heading: "",
+          description: "",
           fields: [],
-          submitButton: { text: "Send Message" },
+          submitButton: { text: "Send Message", icon: "fa-solid fa-arrow-right", buttonClass: "theme-btn style-2" },
         },
       });
     } else {
@@ -179,3 +205,141 @@ exports.update = async (req, res) => {
     res.redirect("/admin/contact");
   }
 };
+
+// API để submit contact form (từ frontend)
+exports.submitForm = async (req, res) => {
+  try {
+    const { name, email, phone, address, date, message } = req.body;
+
+    // Validation
+    if (!name || !email) {
+      return res.status(400).json({
+        success: false,
+        error: "Name and email are required",
+      });
+    }
+
+    // Create new submission
+    const submission = new ContactSubmission({
+      name: name.trim(),
+      email: email.trim().toLowerCase(),
+      phone: phone?.trim() || "",
+      address: address?.trim() || "",
+      date: date?.trim() || "",
+      message: message?.trim() || "",
+      ipAddress: req.ip || req.connection?.remoteAddress || "",
+      userAgent: req.get("User-Agent") || "",
+    });
+
+    await submission.save();
+
+    res.status(201).json({
+      success: true,
+      message: "Thank you for contacting us! We will get back to you soon.",
+      data: {
+        id: submission._id,
+        name: submission.name,
+        email: submission.email,
+      },
+    });
+  } catch (err) {
+    console.error("Error submitting contact form:", err);
+
+    // Handle validation errors
+    if (err.name === "ValidationError") {
+      const errors = Object.values(err.errors).map((e) => e.message);
+      return res.status(400).json({
+        success: false,
+        error: errors.join(", "),
+      });
+    }
+
+    res.status(500).json({
+      success: false,
+      error: "Error submitting form. Please try again later.",
+    });
+  }
+};
+
+// API để lấy danh sách submissions (cho admin)
+exports.getSubmissions = async (req, res) => {
+  try {
+    const { status, page = 1, limit = 20 } = req.query;
+
+    const query = {};
+    if (status && ["pending", "read", "replied", "archived"].includes(status)) {
+      query.status = status;
+    }
+
+    const skip = (parseInt(page) - 1) * parseInt(limit);
+
+    const [submissions, total] = await Promise.all([
+      ContactSubmission.find(query)
+        .sort({ createdAt: -1 })
+        .skip(skip)
+        .limit(parseInt(limit)),
+      ContactSubmission.countDocuments(query),
+    ]);
+
+    res.json({
+      success: true,
+      data: submissions,
+      pagination: {
+        page: parseInt(page),
+        limit: parseInt(limit),
+        total,
+        totalPages: Math.ceil(total / parseInt(limit)),
+      },
+    });
+  } catch (err) {
+    console.error("Error getting submissions:", err);
+    res.status(500).json({
+      success: false,
+      error: "Error loading submissions",
+    });
+  }
+};
+
+// API để cập nhật status của submission
+exports.updateSubmissionStatus = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { status, notes } = req.body;
+
+    const validStatuses = ["pending", "read", "replied", "archived"];
+    if (!validStatuses.includes(status)) {
+      return res.status(400).json({
+        success: false,
+        error: "Invalid status",
+      });
+    }
+
+    const updateData = { status };
+    if (notes !== undefined) updateData.notes = notes;
+    if (status === "replied") updateData.repliedAt = new Date();
+
+    const submission = await ContactSubmission.findByIdAndUpdate(
+      id,
+      updateData,
+      { new: true }
+    );
+
+    if (!submission) {
+      return res.status(404).json({
+        success: false,
+        error: "Submission not found",
+      });
+    }
+
+    res.json({
+      success: true,
+      data: submission,
+    });
+  } catch (err) {
+    console.error("Error updating submission:", err);
+    res.status(500).json({
+      success: false,
+      error: "Error updating submission",
+    });
+  }
+};
diff --git a/controllers/pricingController.js b/controllers/pricingController.js
new file mode 100644
index 0000000..73fb543
--- /dev/null
+++ b/controllers/pricingController.js
@@ -0,0 +1,193 @@
+const Pricing = require("../models/pricing");
+
+// ==================== CMS ADMIN FUNCTIONS ====================
+
+// Render admin page for pricing management
+exports.index = async (req, res) => {
+    try {
+        let pricing = await Pricing.findOne({ name: "default" });
+
+        // If no data in DB, try to load from JSON file
+        if (!pricing) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/pricing.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                pricing = await Pricing.migrateFromJson(jsonData);
+            } else {
+                // Create default pricing
+                pricing = await Pricing.create({
+                    name: "default",
+                    hero: {
+                        title: "Pricing Plan",
+                        backgroundImage: "/assets/img/inner-page/breadcrumb.jpg",
+                        shapeImage: "/assets/img/inner-page/shape.png",
+                        breadcrumb: [
+                            { text: "Home", link: "/" },
+                            { text: "Pricing Plan", link: "" },
+                        ],
+                    },
+                    pricingSection: {
+                        subtitle: "pricing plan",
+                        heading: "Flexible Plans to Suit Every Traveler",
+                        description: "Choose the plan that fits your visa needs and enjoy expert guidance every step of the way.",
+                    },
+                    plans: {
+                        monthly: [],
+                        yearly: [],
+                    },
+                    testimonials: {
+                        subtitle: "What Our Clients Say",
+                        heading: "Immigration Success Stories",
+                        buttonText: "View All Review",
+                        buttonLink: "/contact",
+                        buttonIcon: "fa-solid fa-arrow-right",
+                        image: "",
+                        items: [],
+                    },
+                });
+            }
+        }
+
+        res.render("admin/pricing/index", {
+            layout: "layouts/main",
+            title: "Pricing Management",
+            data: pricing,
+            user: req.session.user,
+            frontendUrl: process.env.FRONTEND_URL || "http://localhost:3000",
+        });
+    } catch (err) {
+        console.error("Error loading pricing admin page:", err);
+        req.flash("error", "Error loading pricing data");
+        res.redirect("/admin/dashboard");
+    }
+};
+
+// Update pricing data
+exports.update = async (req, res) => {
+    try {
+        const { hero, pricingSection, plans, testimonials } = req.body;
+
+        // Parse JSON strings if needed
+        const heroData = typeof hero === "string" ? JSON.parse(hero) : hero;
+        const pricingSectionData = typeof pricingSection === "string" ? JSON.parse(pricingSection) : pricingSection;
+        const plansData = typeof plans === "string" ? JSON.parse(plans) : plans;
+        const testimonialsData = typeof testimonials === "string" ? JSON.parse(testimonials) : testimonials;
+
+        let pricing = await Pricing.findOne({ name: "default" });
+
+        if (pricing) {
+            pricing.hero = heroData;
+            pricing.pricingSection = pricingSectionData;
+            pricing.plans = plansData;
+            pricing.testimonials = testimonialsData;
+            await pricing.save();
+        } else {
+            pricing = await Pricing.create({
+                name: "default",
+                hero: heroData,
+                pricingSection: pricingSectionData,
+                plans: plansData,
+                testimonials: testimonialsData,
+            });
+        }
+
+        req.flash("success", "Pricing data updated successfully");
+        res.redirect("/admin/pricing");
+    } catch (err) {
+        console.error("Error updating pricing:", err);
+        req.flash("error", "Error updating pricing data");
+        res.redirect("/admin/pricing");
+    }
+};
+
+// API to get pricing data (admin)
+exports.getPricingData = async (req, res) => {
+    try {
+        let pricing = await Pricing.findOne({ name: "default" });
+
+        if (!pricing) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/pricing.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                pricing = await Pricing.migrateFromJson(jsonData);
+            }
+        }
+
+        res.json({
+            success: true,
+            data: pricing,
+        });
+    } catch (err) {
+        console.error("Error getting pricing data:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading pricing data",
+        });
+    }
+};
+
+// Public API to get pricing page data (for frontend)
+exports.api = async (req, res) => {
+    try {
+        let pricing = await Pricing.findOne({ name: "default" });
+
+        if (!pricing) {
+            const fs = require("fs");
+            const path = require("path");
+            const jsonPath = path.join(__dirname, "../data/pricing.json");
+
+            if (fs.existsSync(jsonPath)) {
+                const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+                pricing = await Pricing.migrateFromJson(jsonData);
+            }
+        }
+
+        if (!pricing) {
+            return res.status(404).json({
+                success: false,
+                error: "Pricing data not found",
+            });
+        }
+
+        const backendUrl = process.env.BACKEND_URL || "http://localhost:3001";
+
+        const getFullUrl = (path) => {
+            if (!path || path.startsWith("http")) return path;
+            return `${backendUrl}${path.startsWith("/") ? "" : "/"}${path}`;
+        };
+
+        // Convert to plain object to modify properties safely
+        const pricingData = pricing.toObject ? pricing.toObject() : pricing;
+
+        if (pricingData.hero) {
+            pricingData.hero.backgroundImage = getFullUrl(pricingData.hero.backgroundImage);
+            pricingData.hero.shapeImage = getFullUrl(pricingData.hero.shapeImage);
+        }
+
+        if (pricingData.testimonials) {
+            pricingData.testimonials.image = getFullUrl(pricingData.testimonials.image);
+        }
+
+        res.json({
+            success: true,
+            data: {
+                hero: pricingData.hero,
+                pricingSection: pricingData.pricingSection,
+                plans: pricingData.plans,
+                testimonials: pricingData.testimonials,
+            },
+        });
+    } catch (err) {
+        console.error("Error getting pricing API data:", err);
+        res.status(500).json({
+            success: false,
+            error: "Error loading pricing data",
+        });
+    }
+};
diff --git a/controllers/uploadController.js b/controllers/uploadController.js
index 3fd8590..ef6f4c8 100644
--- a/controllers/uploadController.js
+++ b/controllers/uploadController.js
@@ -13,7 +13,7 @@ const uploadController = {
 
       // Lấy loại ảnh từ query params
       const imageType = req.query.imageType || 'general';
-      
+
       // Tạo đường dẫn tương đối để lưu vào database
       const relativePath = `/uploads/${imageType}/${req.file.filename}`;
       const baseUrl = process.env.BACKEND_URL || `${req.protocol}://${req.get('host')}`;
@@ -41,7 +41,7 @@ const uploadController = {
             if (camp) {
               // Đồng bộ camps.image và camps.camp-detail.hero.bgImage - 2 trường này luôn giống nhau
               camp.image = relativePath;
-              
+
               // Đảm bảo camp-detail.hero tồn tại và sync bgImage
               if (!camp['camp-detail']) camp['camp-detail'] = {};
               if (!camp['camp-detail'].hero) camp['camp-detail'].hero = {};
@@ -73,59 +73,59 @@ const uploadController = {
   updateImagePath: async (req, res) => {
     try {
       const { jsonFile, jsonPath, newImagePath } = req.body;
-      
+
       if (!jsonFile || !jsonPath || !newImagePath) {
-        return res.status(400).json({ 
-          success: false, 
-          message: 'Missing required information (jsonFile, jsonPath, newImagePath)' 
+        return res.status(400).json({
+          success: false,
+          message: 'Missing required information (jsonFile, jsonPath, newImagePath)'
         });
       }
 
       // Đọc file JSON
       const jsonFilePath = path.join(__dirname, '../data', jsonFile);
       const jsonData = jsonHelper.readJsonFile(jsonFilePath);
-      
+
       // Cập nhật đường dẫn ảnh theo jsonPath
       // jsonPath có định dạng như "banner.image" hoặc "partners[0].logo"
       const pathParts = jsonPath.split('.');
       let current = jsonData;
-      
+
       // Duyệt qua các phần của path trừ phần cuối
       for (let i = 0; i < pathParts.length - 1; i++) {
         const part = pathParts[i];
-        
+
         // Kiểm tra nếu là mảng (ví dụ: partners[0])
         if (part.includes('[') && part.includes(']')) {
           const arrName = part.substring(0, part.indexOf('['));
           const index = parseInt(part.substring(part.indexOf('[') + 1, part.indexOf(']')));
-          
+
           if (!current[arrName] || !Array.isArray(current[arrName])) {
-            return res.status(400).json({ 
-              success: false, 
-              message: `Array ${arrName} not found in data` 
+            return res.status(400).json({
+              success: false,
+              message: `Array ${arrName} not found in data`
             });
           }
-          
+
           current = current[arrName][index];
         } else {
           if (!current[part]) {
-            return res.status(400).json({ 
-              success: false, 
-              message: `Property ${part} not found in data` 
+            return res.status(400).json({
+              success: false,
+              message: `Property ${part} not found in data`
             });
           }
-          
+
           current = current[part];
         }
       }
-      
+
       // Cập nhật giá trị
       const lastPart = pathParts[pathParts.length - 1];
       current[lastPart] = newImagePath;
-      
+
       // Lưu lại file JSON
       jsonHelper.writeJsonFile(jsonFilePath, jsonData);
-      
+
       return res.status(200).json({
         success: true,
         message: 'Image path updated successfully',
@@ -141,22 +141,22 @@ const uploadController = {
   deleteImage: async (req, res) => {
     try {
       const { imagePath } = req.body;
-      
+
       if (!imagePath) {
         return res.status(400).json({ success: false, message: 'Missing image path to delete' });
       }
-      
+
       // Chuyển đổi đường dẫn tương đối thành đường dẫn tuyệt đối
       const fullPath = path.join(__dirname, '../public', imagePath);
-      
+
       // Kiểm tra xem file có tồn tại không
       if (!fs.existsSync(fullPath)) {
         return res.status(404).json({ success: false, message: 'Image file not found' });
       }
-      
+
       // Xóa file
       fs.unlinkSync(fullPath);
-      
+
       return res.status(200).json({
         success: true,
         message: 'Image deleted successfully',
diff --git a/data/appointment.json b/data/appointment.json
new file mode 100644
index 0000000..a8f2cf2
--- /dev/null
+++ b/data/appointment.json
@@ -0,0 +1,77 @@
+{
+    "hero": {
+        "title": "Make Appointment",
+        "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg",
+        "subtitle": "About Our Consultancy",
+        "heading": "Want to meet us for your need?",
+        "description": "24/7 customer support is always ready to answer all your questions"
+    },
+    "visaOptions": [
+        "Canada Immigration",
+        "Tourist Visa",
+        "Medical Visa",
+        "Coaching",
+        "Student Visa",
+        "Spouse Visa",
+        "Job Opportunity",
+        "Exam"
+    ],
+    "form": {
+        "heading": "Request Appointment",
+        "fields": [
+            {
+                "name": "name",
+                "label": "Your Name",
+                "type": "text",
+                "placeholder": "Your name",
+                "required": true,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "email",
+                "label": "Your Email",
+                "type": "email",
+                "placeholder": "Your email",
+                "required": true,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "phone",
+                "label": "Your Phone",
+                "type": "tel",
+                "placeholder": "Phone Number",
+                "required": false,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "address",
+                "label": "Your Address",
+                "type": "text",
+                "placeholder": "Your address",
+                "required": false,
+                "colClass": "col-lg-6"
+            },
+            {
+                "name": "appointmentDate",
+                "label": "Appointment Date",
+                "type": "date",
+                "placeholder": "",
+                "required": false,
+                "colClass": "col-lg-6"
+            },
+            {
+                "name": "message",
+                "label": "Your Message",
+                "type": "textarea",
+                "placeholder": "Type your message",
+                "required": false,
+                "colClass": "col-lg-12"
+            }
+        ],
+        "submitButton": {
+            "text": "Request Appointment",
+            "icon": "fa-solid fa-arrow-right",
+            "buttonClass": "theme-btn"
+        }
+    }
+}
\ No newline at end of file
diff --git a/data/contact-data.json b/data/contact-data.json
deleted file mode 100644
index ae404df..0000000
--- a/data/contact-data.json
+++ /dev/null
@@ -1,95 +0,0 @@
-{
-  "hero": {
-    "title": "Contact Us",
-    "backgroundImage": "/uploads/banner/b10.jpg",
-    "overlayColor": "rgba(0, 0, 0, 0)",
-    "sectionClass": "uk-section-secondary uk-section-overlap uk-preserve-color uk-light",
-    "titleClass": "uk-heading-large uk-text-center !text-[5vw]",
-    "enableScrollspy": true,
-    "backgroundPosition": "top-center"
-  },
-  "contactCards": [
-    {
-      "type": "phone",
-      "title": "Phone Number",
-      "content": ["+123456789"],
-      "iconType": "fas fa-phone",
-      "iconSource": "fontawesome"
-    },
-    {
-      "type": "email",
-      "title": "Email Address",
-      "content": ["office@ggcamp.org"],
-      "iconType": "fas fa-envelope",
-      "iconSource": "fontawesome"
-    },
-    {
-      "type": "location",
-      "title": "Our Location",
-      "content": ["Poblacion, Madridejos 22, Cebu City, Philippines"],
-      "iconType": "fas fa-map-marker-alt",
-      "iconSource": "fontawesome"
-    },
-    {
-      "type": "hours",
-      "title": "Working hours",
-      "content": ["Monday to Saturday: 07pm - 05am", "Sunday: Closed"],
-      "iconType": "fas fa-clock",
-      "iconSource": "fontawesome"
-    }
-  ],
-  "map": {
-    "coordinates": {
-      "lat": 10.3157,
-      "lng": 123.8854
-    },
-    "zoom": 15,
-    "location": "Poblacion, Madridejos 22, Cebu City, Philippines",
-    "markerTitle": "Our Office",
-    "tileLayer": {
-      "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-      "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
-      "maxZoom": 18,
-      "minZoom": 0
-    }
-  },
-  "form": {
-    "sectionLabel": "Contact Us",
-    "heading": "Let's plan your dream adventure - contact our team today",
-    "fields": [
-      {
-        "name": "firstName",
-        "type": "text",
-        "placeholder": "First name",
-        "required": true
-      },
-      {
-        "name": "lastName",
-        "type": "text",
-        "placeholder": "Last name",
-        "required": true
-      },
-      {
-        "name": "phone",
-        "type": "tel",
-        "placeholder": "Phone Number",
-        "required": true
-      },
-      {
-        "name": "email",
-        "type": "email",
-        "placeholder": "Email Address",
-        "required": true
-      },
-      {
-        "name": "message",
-        "type": "textarea",
-        "placeholder": "Send Message",
-        "required": true
-      }
-    ],
-    "submitButton": {
-      "text": "Send Message"
-    }
-  }
-}
diff --git a/data/contact.json b/data/contact.json
new file mode 100644
index 0000000..474c9e1
--- /dev/null
+++ b/data/contact.json
@@ -0,0 +1,119 @@
+{
+    "hero": {
+        "title": "CONTACT US",
+        "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg",
+        "overlayColor": "rgba(0, 0, 0, 0)",
+        "sectionClass": "breadcrumb-wrapper fix bg-cover",
+        "titleClass": "breadcrumb-title",
+        "enableScrollspy": false,
+        "backgroundPosition": "center"
+    },
+    "contactCards": [
+        {
+            "type": "location",
+            "title": "Location",
+            "content": [    
+                "43 Sardinella, 3nd Land Walk,",
+                "Orchard view, London, UK"
+            ],
+            "iconType": "fa-solid fa-location-dot",
+            "iconSource": "fontawesome"
+        },
+        {
+            "type": "email",
+            "title": "Email Address",
+            "content": [
+                "supportinfo@gmail.com",
+                "arluxhotelinfo.com"
+            ],
+            "iconType": "fa-solid fa-envelope",
+            "iconSource": "fontawesome"
+        },
+        {
+            "type": "phone",
+            "title": "Phone Number",
+            "content": [
+                "+880 123 427 00",
+                "+000 938 809 12"
+            ],
+            "iconType": "fa-solid fa-phone",
+            "iconSource": "fontawesome"
+        }
+    ],
+    "map": {
+        "coordinates": {
+            "lat": -37.81450084255415,
+            "lng": 144.9618311901502
+        },
+        "zoom": 15,
+        "location": "Envato, Melbourne, Australia",
+        "markerTitle": "Our Office",
+        "embedUrl": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6678.7619084840835!2d144.9618311901502!3d-37.81450084255415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sbd!4v1641984054261!5m2!1sen!2sbd",
+        "tileLayer": {
+            "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            "attribution": "",
+            "maxZoom": 18,
+            "minZoom": 0
+        }
+    },
+    "form": {
+        "sectionLabel": "",
+        "heading": "Send Us Message",
+        "description": "Have questions about visas or immigration? Send us a message today and our expert team will respond quickly.",
+        "fields": [
+            {
+                "name": "name",
+                "label": "Your Name",
+                "type": "text",
+                "placeholder": "Your name",
+                "required": true,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "email",
+                "label": "Your Email",
+                "type": "email",
+                "placeholder": "Your email",
+                "required": true,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "phone",
+                "label": "Your Phone",
+                "type": "tel",
+                "placeholder": "Phone Number",
+                "required": true,
+                "colClass": "col-lg-4"
+            },
+            {
+                "name": "address",
+                "label": "Your Address",
+                "type": "text",
+                "placeholder": "Address Now",
+                "required": false,
+                "colClass": "col-lg-6"
+            },
+            {
+                "name": "date",
+                "label": "Your Date",
+                "type": "date",
+                "placeholder": "Date",
+                "required": false,
+                "colClass": "col-lg-6"
+            },
+            {
+                "name": "message",
+                "label": "Your Message",
+                "type": "textarea",
+                "placeholder": "Type your message",
+                "required": false,
+                "colClass": "col-lg-12"
+            }
+        ],
+        "submitButton": {
+            "text": "SEND MESSAGE",
+            "icon": "fa-solid fa-arrow-right",
+            "buttonClass": "theme-btn style-2"
+        }
+    }
+}
\ No newline at end of file
diff --git a/data/pricing.json b/data/pricing.json
new file mode 100644
index 0000000..db531a8
--- /dev/null
+++ b/data/pricing.json
@@ -0,0 +1,118 @@
+{
+    "hero": {
+        "title": "Pricing Plan",
+        "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg",
+        "shapeImage": "/assets/img/inner-page/shape.png",
+        "breadcrumb": [
+            {
+                "text": "Home",
+                "link": "/"
+            },
+            {
+                "text": "Pricing Plan",
+                "link": ""
+            }
+        ]
+    },
+    "pricingSection": {
+        "subtitle": "pricing plan",
+        "heading": "Flexible Plans to Suit Every Traveler",
+        "description": "Choose the plan that fits your visa needs and enjoy expert guidance every step of the way."
+    },
+    "plans": {
+        "monthly": [
+            {
+                "name": "Basic Plan",
+                "price": "32",
+                "period": "mo",
+                "currency": "$",
+                "buttonText": "Get Started Today",
+                "buttonLink": "/pricing",
+                "buttonIcon": "fa-solid fa-arrow-right",
+                "style": "default",
+                "features": [
+                    "Everything in Basic Plan",
+                    "Visa Interview Preparation",
+                    "Priority Processing Support",
+                    "Phone & Email Assistance",
+                    "Step-by-Step Application Support"
+                ]
+            },
+            {
+                "name": "Premium Plan",
+                "price": "32",
+                "period": "mo",
+                "currency": "$",
+                "buttonText": "Get Started Today",
+                "buttonLink": "/pricing",
+                "buttonIcon": "fa-solid fa-arrow-right",
+                "style": "style-2",
+                "features": [
+                    "Everything in Basic Plan",
+                    "Visa Interview Preparation",
+                    "Priority Processing Support",
+                    "Phone & Email Assistance",
+                    "Step-by-Step Application Support"
+                ]
+            }
+        ],
+        "yearly": [
+            {
+                "name": "Basic Plan",
+                "price": "32",
+                "period": "mo",
+                "currency": "$",
+                "buttonText": "Get Started Today",
+                "buttonLink": "/pricing",
+                "buttonIcon": "fa-solid fa-arrow-right",
+                "style": "default",
+                "features": [
+                    "Everything in Basic Plan",
+                    "Visa Interview Preparation",
+                    "Priority Processing Support",
+                    "Phone & Email Assistance",
+                    "Step-by-Step Application Support"
+                ]
+            },
+            {
+                "name": "Premium Plan",
+                "price": "32",
+                "period": "mo",
+                "currency": "$",
+                "buttonText": "Get Started Today",
+                "buttonLink": "/pricing",
+                "buttonIcon": "fa-solid fa-arrow-right",
+                "style": "style-2",
+                "features": [
+                    "Everything in Basic Plan",
+                    "Visa Interview Preparation",
+                    "Priority Processing Support",
+                    "Phone & Email Assistance",
+                    "Step-by-Step Application Support"
+                ]
+            }
+        ]
+    },
+    "testimonials": {
+        "subtitle": "What Our Clients Say",
+        "heading": "Immigration Success Stories",
+        "buttonText": "View All Review",
+        "buttonLink": "/contact",
+        "buttonIcon": "fa-solid fa-arrow-right",
+        "image": "/assets/img/home-3/test-thumb.jpg",
+        "items": [
+            {
+                "name": "Mohammed Ali",
+                "role": "Family Visa",
+                "rating": 5,
+                "content": "The team provided exceptional guidance throughout my immigration process. Their expertise, personalized support, and attention to detail ensured a smooth, stress-free experience and successful visa approval."
+            },
+            {
+                "name": "Mohammed Ali",
+                "role": "Family Visa",
+                "rating": 5,
+                "content": "The team provided exceptional guidance throughout my immigration process. Their expertise, personalized support, and attention to detail ensured a smooth, stress-free experience and successful visa approval."
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/middleware/upload.js b/middleware/upload.js
index e285ff8..7808000 100644
--- a/middleware/upload.js
+++ b/middleware/upload.js
@@ -9,18 +9,18 @@ const storage = multer.diskStorage({
     try {
       // Lấy loại ảnh từ request fields
       const imageType = req.query.imageType || 'general';
-      
+
       // Tạo đường dẫn đến thư mục lưu trữ
       const uploadPath = path.join(__dirname, '../public/uploads', imageType);
-      
+
       console.log('Creating upload directory:', uploadPath);
-      
+
       // Kiểm tra và tạo thư mục nếu chưa tồn tại
       if (!fs.existsSync(uploadPath)) {
         fs.mkdirSync(uploadPath, { recursive: true });
         console.log('Directory created successfully');
       }
-      
+
       cb(null, uploadPath);
     } catch (error) {
       console.error('Error creating directory:', error);
@@ -31,11 +31,11 @@ const storage = multer.diskStorage({
     try {
       const imageType = req.query.imageType || 'general';
       const uploadPath = path.join(__dirname, '../public/uploads', imageType);
-      
+
       // Lấy tên file gốc (sanitize để tránh ký tự đặc biệt)
       const originalName = file.originalname.replace(/[^a-zA-Z0-9.-]/g, '_');
       const fullPath = path.join(uploadPath, originalName);
-      
+
       // Kiểm tra nếu file đã tồn tại
       if (fs.existsSync(fullPath)) {
         console.log('File already exists, reusing:', originalName);
@@ -63,7 +63,7 @@ const fileFilter = (req, file, cb) => {
   const allowedTypes = /jpeg|jpg|png|gif|webp|svg/;
   const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
   const mimetype = allowedTypes.test(file.mimetype);
-  
+
   if (extname && mimetype) {
     return cb(null, true);
   } else {
@@ -83,12 +83,12 @@ const videoStorage = multer.diskStorage({
   destination: function (req, file, cb) {
     // Tạo đường dẫn đến thư mục lưu trữ video
     const uploadPath = path.join(__dirname, '../public/uploads/videos');
-    
+
     // Kiểm tra và tạo thư mục nếu chưa tồn tại
     if (!fs.existsSync(uploadPath)) {
       fs.mkdirSync(uploadPath, { recursive: true });
     }
-    
+
     cb(null, uploadPath);
   },
   filename: function (req, file, cb) {
@@ -103,7 +103,7 @@ const videoStorage = multer.diskStorage({
 const videoFileFilter = (req, file, cb) => {
   const allowedTypes = /mp4|webm/;
   const mimetype = allowedTypes.test(file.mimetype);
-  
+
   if (mimetype) {
     return cb(null, true);
   } else {
@@ -124,7 +124,7 @@ async function convertToWebp(req, res, next) {
   if (!req.file) return next();
   console.log('🔄 Converting image to webp format...');
   console.log('Original file:', req.file.path);
-  
+
   try {
     const filePath = req.file.path;
     const webpPath = filePath.replace(path.extname(filePath), '.webp');
@@ -139,7 +139,7 @@ async function convertToWebp(req, res, next) {
     if (fs.existsSync(filePath)) {
       fs.unlinkSync(filePath);
     }
-    
+
     // Cập nhật thông tin file
     req.file.filename = path.basename(webpPath);
     req.file.path = webpPath;
diff --git a/models/appointment.js b/models/appointment.js
new file mode 100644
index 0000000..4416f0a
--- /dev/null
+++ b/models/appointment.js
@@ -0,0 +1,206 @@
+const mongoose = require("mongoose");
+
+// Clear cache
+if (mongoose.models.Appointment) {
+    delete mongoose.models.Appointment;
+}
+if (mongoose.connection.models.Appointment) {
+    delete mongoose.connection.models.Appointment;
+}
+
+// Schema cho hero section
+const heroSchema = new mongoose.Schema(
+    {
+        title: {
+            type: String,
+            trim: true,
+            default: "Make Appointment",
+        },
+        backgroundImage: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        subtitle: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        heading: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        description: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+    },
+    { _id: false }
+);
+
+// Schema cho form field
+const formFieldSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            required: true,
+            trim: true,
+        },
+        label: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        type: {
+            type: String,
+            required: true,
+            trim: true,
+            enum: ["text", "email", "tel", "textarea", "date", "select"],
+        },
+        placeholder: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        colClass: {
+            type: String,
+            trim: true,
+            default: "col-lg-12",
+        },
+    },
+    { _id: false }
+);
+
+// Schema cho submit button
+const submitButtonSchema = new mongoose.Schema(
+    {
+        text: {
+            type: String,
+            required: true,
+            trim: true,
+            default: "Request Appointment",
+        },
+        icon: {
+            type: String,
+            trim: true,
+            default: "fa-solid fa-arrow-right",
+        },
+        buttonClass: {
+            type: String,
+            trim: true,
+            default: "theme-btn",
+        },
+    },
+    { _id: false }
+);
+
+// Schema cho form
+const formSchema = new mongoose.Schema(
+    {
+        heading: {
+            type: String,
+            trim: true,
+            default: "Request Appointment",
+        },
+        fields: {
+            type: [formFieldSchema],
+            default: [],
+        },
+        submitButton: {
+            type: submitButtonSchema,
+            default: () => ({}),
+        },
+    },
+    { _id: false }
+);
+
+// Main Appointment Schema
+const appointmentSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            default: "default",
+            unique: true,
+        },
+        hero: {
+            type: heroSchema,
+            default: () => ({}),
+        },
+        visaOptions: {
+            type: [String],
+            default: [],
+        },
+        form: {
+            type: formSchema,
+            default: () => ({}),
+        },
+    },
+    {
+        timestamps: true,
+    }
+);
+
+// Migration method to import data from JSON
+appointmentSchema.statics.migrateFromJson = async function (jsonData) {
+    try {
+        // Check if default appointment exists
+        const existingAppointment = await this.findOne({ name: "default" });
+
+        // Process data from JSON
+        const processedData = {
+            hero: {
+                title: jsonData.hero?.title || "Make Appointment",
+                backgroundImage: jsonData.hero?.backgroundImage || "",
+                subtitle: jsonData.hero?.subtitle || "",
+                heading: jsonData.hero?.heading || "",
+                description: jsonData.hero?.description || "",
+            },
+            visaOptions: Array.isArray(jsonData.visaOptions) ? jsonData.visaOptions : [],
+            form: {
+                heading: jsonData.form?.heading || "Request Appointment",
+                fields: (jsonData.form?.fields || []).map((field) => ({
+                    name: field.name || "",
+                    label: field.label || "",
+                    type: field.type || "text",
+                    placeholder: field.placeholder || "",
+                    required: field.required || false,
+                    colClass: field.colClass || "col-lg-12",
+                })),
+                submitButton: {
+                    text: jsonData.form?.submitButton?.text || "Request Appointment",
+                    icon: jsonData.form?.submitButton?.icon || "fa-solid fa-arrow-right",
+                    buttonClass: jsonData.form?.submitButton?.buttonClass || "theme-btn",
+                },
+            },
+        };
+
+        if (existingAppointment) {
+            // Update existing appointment
+            existingAppointment.hero = processedData.hero;
+            existingAppointment.visaOptions = processedData.visaOptions;
+            existingAppointment.form = processedData.form;
+            await existingAppointment.save();
+            console.log("Appointment data updated successfully");
+            return existingAppointment;
+        } else {
+            // Create new appointment
+            const newAppointment = await this.create({
+                name: "default",
+                ...processedData,
+            });
+            console.log("Appointment data imported successfully");
+            return newAppointment;
+        }
+    } catch (error) {
+        console.error("Error migrating appointment data:", error);
+        throw error;
+    }
+};
+
+module.exports = mongoose.model("Appointment", appointmentSchema);
diff --git a/models/appointmentSubmission.js b/models/appointmentSubmission.js
new file mode 100644
index 0000000..6987f90
--- /dev/null
+++ b/models/appointmentSubmission.js
@@ -0,0 +1,83 @@
+const mongoose = require("mongoose");
+
+/**
+ * Schema for Appointment Submissions
+ * Stores appointment requests from users
+ */
+const appointmentSubmissionSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            required: [true, "Name is required"],
+            trim: true,
+            maxlength: [100, "Name cannot exceed 100 characters"],
+        },
+        email: {
+            type: String,
+            required: [true, "Email is required"],
+            trim: true,
+            lowercase: true,
+            match: [/^\S+@\S+\.\S+$/, "Please enter a valid email"],
+        },
+        phone: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        address: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        appointmentDate: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        message: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        visaTypes: {
+            type: [String],
+            default: [],
+        },
+        status: {
+            type: String,
+            enum: ["pending", "confirmed", "completed", "cancelled"],
+            default: "pending",
+        },
+        notes: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        confirmedAt: {
+            type: Date,
+            default: null,
+        },
+        completedAt: {
+            type: Date,
+            default: null,
+        },
+        ipAddress: {
+            type: String,
+            default: "",
+        },
+        userAgent: {
+            type: String,
+            default: "",
+        },
+    },
+    {
+        timestamps: true,
+    }
+);
+
+// Index for faster queries
+appointmentSubmissionSchema.index({ status: 1, createdAt: -1 });
+appointmentSubmissionSchema.index({ email: 1 });
+appointmentSubmissionSchema.index({ appointmentDate: 1 });
+
+module.exports = mongoose.model("AppointmentSubmission", appointmentSubmissionSchema);
diff --git a/models/contact.js b/models/contact.js
index 65776f9..26df236 100644
--- a/models/contact.js
+++ b/models/contact.js
@@ -145,6 +145,11 @@ const mapSchema = new mongoose.Schema(
       trim: true,
       default: "",
     },
+    embedUrl: {
+      type: String,
+      trim: true,
+      default: "",
+    },
     tileLayer: {
       type: tileLayerSchema,
       required: true,
@@ -161,11 +166,16 @@ const formFieldSchema = new mongoose.Schema(
       required: true,
       trim: true,
     },
+    label: {
+      type: String,
+      trim: true,
+      default: "",
+    },
     type: {
       type: String,
       required: true,
       trim: true,
-      enum: ["text", "email", "tel", "textarea", "programme"],
+      enum: ["text", "email", "tel", "textarea", "programme", "date"],
     },
     placeholder: {
       type: String,
@@ -176,6 +186,11 @@ const formFieldSchema = new mongoose.Schema(
       type: Boolean,
       default: false,
     },
+    colClass: {
+      type: String,
+      trim: true,
+      default: "col-lg-12",
+    },
     programmeName: {
       type: String,
       trim: true,
@@ -193,6 +208,16 @@ const submitButtonSchema = new mongoose.Schema(
       required: true,
       trim: true,
     },
+    icon: {
+      type: String,
+      trim: true,
+      default: "fa-solid fa-arrow-right",
+    },
+    buttonClass: {
+      type: String,
+      trim: true,
+      default: "theme-btn style-2",
+    },
   },
   { _id: false }
 );
@@ -210,6 +235,11 @@ const formSchema = new mongoose.Schema(
       trim: true,
       default: "",
     },
+    description: {
+      type: String,
+      trim: true,
+      default: "",
+    },
     fields: {
       type: [formFieldSchema],
       default: [],
@@ -335,6 +365,7 @@ contactSchema.statics.migrateFromJson = async function (jsonData) {
         zoom: jsonData.map?.zoom || 15,
         location: jsonData.map?.location || "",
         markerTitle: jsonData.map?.markerTitle || "",
+        embedUrl: jsonData.map?.embedUrl || "",
         tileLayer: {
           url:
             jsonData.map?.tileLayer?.url ||
@@ -347,15 +378,20 @@ contactSchema.statics.migrateFromJson = async function (jsonData) {
       form: {
         sectionLabel: jsonData.form?.sectionLabel || "",
         heading: jsonData.form?.heading || "",
+        description: jsonData.form?.description || "",
         fields: (jsonData.form?.fields || []).map((field) => ({
           name: field.name || "",
+          label: field.label || "",
           type: field.type || "text",
           placeholder: field.placeholder || "",
           required: field.required || false,
+          colClass: field.colClass || "col-lg-12",
           programmeName: field.programmeName || "",
         })),
         submitButton: {
           text: jsonData.form?.submitButton?.text || "Send Message",
+          icon: jsonData.form?.submitButton?.icon || "fa-solid fa-arrow-right",
+          buttonClass: jsonData.form?.submitButton?.buttonClass || "theme-btn style-2",
         },
       },
     };
diff --git a/models/contactSubmission.js b/models/contactSubmission.js
new file mode 100644
index 0000000..ce7f5b9
--- /dev/null
+++ b/models/contactSubmission.js
@@ -0,0 +1,74 @@
+const mongoose = require("mongoose");
+
+/**
+ * Schema for Contact Form Submissions
+ * Stores user inquiries from the contact form
+ */
+const contactSubmissionSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            required: [true, "Name is required"],
+            trim: true,
+            maxlength: [100, "Name cannot exceed 100 characters"],
+        },
+        email: {
+            type: String,
+            required: [true, "Email is required"],
+            trim: true,
+            lowercase: true,
+            match: [/^\S+@\S+\.\S+$/, "Please enter a valid email"],
+        },
+        phone: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        address: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        date: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        message: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        status: {
+            type: String,
+            enum: ["pending", "read", "replied", "archived"],
+            default: "pending",
+        },
+        notes: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        repliedAt: {
+            type: Date,
+            default: null,
+        },
+        ipAddress: {
+            type: String,
+            default: "",
+        },
+        userAgent: {
+            type: String,
+            default: "",
+        },
+    },
+    {
+        timestamps: true,
+    }
+);
+
+// Index for faster queries
+contactSubmissionSchema.index({ status: 1, createdAt: -1 });
+contactSubmissionSchema.index({ email: 1 });
+
+module.exports = mongoose.model("ContactSubmission", contactSubmissionSchema);
diff --git a/models/pricing.js b/models/pricing.js
new file mode 100644
index 0000000..4f9e931
--- /dev/null
+++ b/models/pricing.js
@@ -0,0 +1,328 @@
+const mongoose = require("mongoose");
+
+// Clear cache
+if (mongoose.models.Pricing) {
+    delete mongoose.models.Pricing;
+}
+if (mongoose.connection.models.Pricing) {
+    delete mongoose.connection.models.Pricing;
+}
+
+// Schema for breadcrumb item
+const breadcrumbItemSchema = new mongoose.Schema(
+    {
+        text: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        link: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+    },
+    { _id: false }
+);
+
+// Schema for hero section
+const heroSchema = new mongoose.Schema(
+    {
+        title: {
+            type: String,
+            trim: true,
+            default: "Pricing Plan",
+        },
+        backgroundImage: {
+            type: String,
+            trim: true,
+            default: "/assets/img/inner-page/breadcrumb.jpg",
+        },
+        shapeImage: {
+            type: String,
+            trim: true,
+            default: "/assets/img/inner-page/shape.png",
+        },
+        breadcrumb: {
+            type: [breadcrumbItemSchema],
+            default: [],
+        },
+    },
+    { _id: false }
+);
+
+// Schema for pricing section header
+const pricingSectionSchema = new mongoose.Schema(
+    {
+        subtitle: {
+            type: String,
+            trim: true,
+            default: "pricing plan",
+        },
+        heading: {
+            type: String,
+            trim: true,
+            default: "Flexible Plans to Suit Every Traveler",
+        },
+        description: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+    },
+    { _id: false }
+);
+
+// Schema for individual plan
+const planSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            trim: true,
+            required: true,
+        },
+        price: {
+            type: String,
+            trim: true,
+            default: "0",
+        },
+        period: {
+            type: String,
+            trim: true,
+            default: "mo",
+        },
+        currency: {
+            type: String,
+            trim: true,
+            default: "$",
+        },
+        buttonText: {
+            type: String,
+            trim: true,
+            default: "Get Started Today",
+        },
+        buttonLink: {
+            type: String,
+            trim: true,
+            default: "/pricing",
+        },
+        buttonIcon: {
+            type: String,
+            trim: true,
+            default: "fa-solid fa-arrow-right",
+        },
+        style: {
+            type: String,
+            trim: true,
+            enum: ["default", "style-2"],
+            default: "default",
+        },
+        features: {
+            type: [String],
+            default: [],
+        },
+    },
+    { _id: false }
+);
+
+// Schema for plans container
+const plansSchema = new mongoose.Schema(
+    {
+        monthly: {
+            type: [planSchema],
+            default: [],
+        },
+        yearly: {
+            type: [planSchema],
+            default: [],
+        },
+    },
+    { _id: false }
+);
+
+// Schema for testimonial item
+const testimonialItemSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        role: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        rating: {
+            type: Number,
+            min: 1,
+            max: 5,
+            default: 5,
+        },
+        content: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+    },
+    { _id: false }
+);
+
+// Schema for testimonials section
+const testimonialsSchema = new mongoose.Schema(
+    {
+        subtitle: {
+            type: String,
+            trim: true,
+            default: "What Our Clients Say",
+        },
+        heading: {
+            type: String,
+            trim: true,
+            default: "Immigration Success Stories",
+        },
+        buttonText: {
+            type: String,
+            trim: true,
+            default: "View All Review",
+        },
+        buttonLink: {
+            type: String,
+            trim: true,
+            default: "/contact",
+        },
+        buttonIcon: {
+            type: String,
+            trim: true,
+            default: "fa-solid fa-arrow-right",
+        },
+        image: {
+            type: String,
+            trim: true,
+            default: "",
+        },
+        items: {
+            type: [testimonialItemSchema],
+            default: [],
+        },
+    },
+    { _id: false }
+);
+
+// Main Pricing Schema
+const pricingSchema = new mongoose.Schema(
+    {
+        name: {
+            type: String,
+            default: "default",
+            unique: true,
+        },
+        hero: {
+            type: heroSchema,
+            default: () => ({}),
+        },
+        pricingSection: {
+            type: pricingSectionSchema,
+            default: () => ({}),
+        },
+        plans: {
+            type: plansSchema,
+            default: () => ({}),
+        },
+        testimonials: {
+            type: testimonialsSchema,
+            default: () => ({}),
+        },
+    },
+    {
+        timestamps: true,
+    }
+);
+
+// Migration method to import data from JSON
+pricingSchema.statics.migrateFromJson = async function (jsonData) {
+    try {
+        // Check if default pricing exists
+        const existingPricing = await this.findOne({ name: "default" });
+
+        // Process data from JSON
+        const processedData = {
+            hero: {
+                title: jsonData.hero?.title || "Pricing Plan",
+                backgroundImage: jsonData.hero?.backgroundImage || "/assets/img/inner-page/breadcrumb.jpg",
+                shapeImage: jsonData.hero?.shapeImage || "/assets/img/inner-page/shape.png",
+                breadcrumb: (jsonData.hero?.breadcrumb || []).map((item) => ({
+                    text: item.text || "",
+                    link: item.link || "",
+                })),
+            },
+            pricingSection: {
+                subtitle: jsonData.pricingSection?.subtitle || "pricing plan",
+                heading: jsonData.pricingSection?.heading || "Flexible Plans to Suit Every Traveler",
+                description: jsonData.pricingSection?.description || "",
+            },
+            plans: {
+                monthly: (jsonData.plans?.monthly || []).map((plan) => ({
+                    name: plan.name || "",
+                    price: plan.price || "0",
+                    period: plan.period || "mo",
+                    currency: plan.currency || "$",
+                    buttonText: plan.buttonText || "Get Started Today",
+                    buttonLink: plan.buttonLink || "/pricing",
+                    buttonIcon: plan.buttonIcon || "fa-solid fa-arrow-right",
+                    style: plan.style || "default",
+                    features: plan.features || [],
+                })),
+                yearly: (jsonData.plans?.yearly || []).map((plan) => ({
+                    name: plan.name || "",
+                    price: plan.price || "0",
+                    period: plan.period || "mo",
+                    currency: plan.currency || "$",
+                    buttonText: plan.buttonText || "Get Started Today",
+                    buttonLink: plan.buttonLink || "/pricing",
+                    buttonIcon: plan.buttonIcon || "fa-solid fa-arrow-right",
+                    style: plan.style || "default",
+                    features: plan.features || [],
+                })),
+            },
+            testimonials: {
+                subtitle: jsonData.testimonials?.subtitle || "What Our Clients Say",
+                heading: jsonData.testimonials?.heading || "Immigration Success Stories",
+                buttonText: jsonData.testimonials?.buttonText || "View All Review",
+                buttonLink: jsonData.testimonials?.buttonLink || "/contact",
+                buttonIcon: jsonData.testimonials?.buttonIcon || "fa-solid fa-arrow-right",
+                image: jsonData.testimonials?.image || "",
+                items: (jsonData.testimonials?.items || []).map((item) => ({
+                    name: item.name || "",
+                    role: item.role || "",
+                    rating: item.rating || 5,
+                    content: item.content || "",
+                })),
+            },
+        };
+
+        if (existingPricing) {
+            // Update existing pricing
+            existingPricing.hero = processedData.hero;
+            existingPricing.pricingSection = processedData.pricingSection;
+            existingPricing.plans = processedData.plans;
+            existingPricing.testimonials = processedData.testimonials;
+            await existingPricing.save();
+            console.log("Pricing data updated successfully");
+            return existingPricing;
+        } else {
+            // Create new pricing
+            const newPricing = await this.create({
+                name: "default",
+                ...processedData,
+            });
+            console.log("Pricing data imported successfully");
+            return newPricing;
+        }
+    } catch (error) {
+        console.error("Error migrating pricing data:", error);
+        throw error;
+    }
+};
+
+module.exports = mongoose.model("Pricing", pricingSchema);
diff --git a/routes/admin.js b/routes/admin.js
index bfaa9dd..fb7d1ff 100644
--- a/routes/admin.js
+++ b/routes/admin.js
@@ -157,6 +157,52 @@ router.get(
   contactController.getContactData,
 );
 
+// Contact submissions management
+router.get(
+  "/contact/submissions",
+  ensureAuthenticated,
+  contactController.getSubmissions
+);
+router.put(
+  "/contact/submissions/:id",
+  ensureAuthenticated,
+  contactController.updateSubmissionStatus
+);
+
+// Appointment management
+const appointmentController = require("../controllers/appointmentController");
+router.get(
+  "/appointments",
+  ensureAuthenticated,
+  appointmentController.getAppointments
+);
+router.get(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.getAppointmentById
+);
+router.put(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.updateAppointmentStatus
+);
+router.delete(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.deleteAppointment
+);
+
+// Appointment CMS page management
+router.get("/appointment", ensureAuthenticated, appointmentController.index);
+router.post("/appointment/update", ensureAuthenticated, appointmentController.update);
+router.get("/appointment/data", ensureAuthenticated, appointmentController.getAppointmentData);
+
+// Pricing CMS page management
+const pricingController = require("../controllers/pricingController");
+router.get("/pricing", ensureAuthenticated, pricingController.index);
+router.post("/pricing/update", ensureAuthenticated, pricingController.update);
+router.get("/pricing/data", ensureAuthenticated, pricingController.getPricingData);
+
 // Activity CRUD routes
 router.get("/activity", ensureAuthenticated, activityController.index);
 router.get(
@@ -355,9 +401,9 @@ router.post(
 
 // Test Image Paths route
 router.get("/test-images", ensureAuthenticated, (req, res) => {
-  const fs = require("fs");
-  const path = require("path");
-  const campLocationData = require("../data/camp-location.json");
+  const fs = require('fs');
+  const path = require('path');
+  const campLocationData = require('../data/camp-location.json');
 
   // Collect all image paths
   const imagePaths = [];
@@ -408,9 +454,9 @@ router.get("/test-images", ensureAuthenticated, (req, res) => {
     });
   }
 
-  res.render("admin/test-images", {
-    layout: "layouts/admin",
-    title: "Test Image Paths",
+  res.render('admin/test-images', {
+    layout: 'layouts/admin',
+    title: 'Test Image Paths',
     images: imagePaths,
     user: req.session.user,
   });
diff --git a/routes/index.js b/routes/index.js
index e0796c1..3322df9 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -56,6 +56,18 @@ router.get("/api/footer", footerController.api);
 // Contact API route
 router.get("/api/contact", contactController.api);
 
+// Contact form submission (public)
+router.post("/api/contact/submit", contactController.submitForm);
+
+// Appointment API
+const appointmentController = require("../controllers/appointmentController");
+router.get("/api/appointment", appointmentController.api);
+router.post("/api/appointment/submit", appointmentController.submitAppointment);
+
+// Pricing API
+const pricingController = require("../controllers/pricingController");
+router.get("/api/pricing", pricingController.api);
+
 router.get("/api/faq", faqController.api);
 // Safety API route
 router.get("/api/safety", safetyController.api);
diff --git a/scripts/2025_12_02_114127_contact.js b/scripts/2025_12_02_114127_contact.js
new file mode 100644
index 0000000..c24e849
--- /dev/null
+++ b/scripts/2025_12_02_114127_contact.js
@@ -0,0 +1,38 @@
+require("dotenv").config();
+const fs = require("fs").promises;
+const path = require("path");
+const connectDB = require("../config/database");
+const Contact = require("../models/contact");
+const mongoose = require("mongoose");
+
+/**
+ * Migration: contact
+ * Migrate contact data from contact-data.json
+ */
+async function migrate() {
+  try {
+    await connectDB();
+
+    // Read contact-data.json file
+    const contactJsonPath = path.join(__dirname, "../data/contact.json");
+    const contactData = JSON.parse(await fs.readFile(contactJsonPath, "utf8"));
+
+    // Migrate data using the model's static method
+    await Contact.migrateFromJson(contactData);
+
+    console.log("Contact migration completed successfully");
+
+    await mongoose.disconnect();
+    process.exit(0);
+  } catch (error) {
+    console.error("Migration error:", error);
+    process.exit(1);
+  }
+}
+
+// Chạy migration nếu được gọi trực tiếp
+if (require.main === module) {
+  migrate();
+}
+
+module.exports = { migrate };
diff --git a/scripts/2026_02_03_appointment.js b/scripts/2026_02_03_appointment.js
new file mode 100644
index 0000000..edf5315
--- /dev/null
+++ b/scripts/2026_02_03_appointment.js
@@ -0,0 +1,71 @@
+/**
+ * Migration script for Appointment data
+ * Imports data from appointment.json to MongoDB
+ *
+ * Run: node scripts/2026_02_03_appointment.js
+ */
+
+require("dotenv").config();
+const mongoose = require("mongoose");
+const fs = require("fs");
+const path = require("path");
+
+// Connect to MongoDB
+const connectDB = async () => {
+    try {
+        await mongoose.connect(process.env.MONGODB_URI);
+        console.log("MongoDB connected successfully");
+    } catch (error) {
+        console.error("MongoDB connection error:", error);
+        process.exit(1);
+    }
+};
+
+const runMigration = async () => {
+    try {
+        await connectDB();
+
+        // Load Appointment model
+        const Appointment = require("../models/appointment");
+
+        // Load JSON data
+        const jsonPath = path.join(__dirname, "../data/appointment.json");
+
+        if (!fs.existsSync(jsonPath)) {
+            console.log("appointment.json not found, creating default data...");
+            const defaultData = {
+                hero: {
+                    title: "Make Appointment",
+                    backgroundImage: "",
+                    subtitle: "",
+                    heading: "",
+                    description: "",
+                },
+                visaOptions: [],
+                form: {
+                    heading: "Request Appointment",
+                    fields: [],
+                    submitButton: {
+                        text: "Request Appointment",
+                        icon: "fa-solid fa-arrow-right",
+                        buttonClass: "theme-btn",
+                    },
+                },
+            };
+            await Appointment.migrateFromJson(defaultData);
+        } else {
+            const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+            console.log("Loaded appointment.json data");
+            await Appointment.migrateFromJson(jsonData);
+        }
+
+        console.log("✅ Appointment migration completed successfully!");
+    } catch (error) {
+        console.error("❌ Migration failed:", error);
+    } finally {
+        await mongoose.connection.close();
+        console.log("MongoDB connection closed");
+    }
+};
+
+runMigration();
diff --git a/server.js b/server.js
index 8b1dda4..eb71f17 100644
--- a/server.js
+++ b/server.js
@@ -42,8 +42,6 @@ app.use(
   },
   express.static(path.join(__dirname, "assets")),
 );
-app.use("/img", express.static(path.join(process.cwd(), "public/img")));
-// Serve static files from public directory (uploads, etc.)
 app.use(
   "/uploads",
   (req, res, next) => {
@@ -55,6 +53,11 @@ app.use(
   express.static(path.join(__dirname, "public", "uploads")),
 );
 
+// Serve other public files
+app.use(
+  express.static(path.join(__dirname, "public")),
+);
+
 // Serve other public files
 app.use(express.static(path.join(__dirname, "public")));
 // Session configuration
diff --git a/views/admin/appointment/index.ejs b/views/admin/appointment/index.ejs
new file mode 100644
index 0000000..707fba1
--- /dev/null
+++ b/views/admin/appointment/index.ejs
@@ -0,0 +1,791 @@
+<div class="container">
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+        <div>
+            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
+                <%= title %>
+            </h1>
+            <p class="text-muted mb-0">Edit content displayed on Appointment page</p>
+        </div>
+        <div>
+            <a href="<%= frontendUrl %>/make-appointment/" class="btn btn-outline-primary" target="_blank">
+                <i class="fas fa-external-link-alt me-2"></i>View Appointment Page
+            </a>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <form method="POST" class="content-with-fixed-buttons" id="appointmentForm"
+                action="/admin/appointment/update">
+                <!-- Hidden inputs for JSON data -->
+                <input type="hidden" name="hero" id="heroJson">
+                <input type="hidden" name="visaOptions" id="visaOptionsJson">
+                <input type="hidden" name="form" id="formJson">
+
+                <!-- Navigation Tabs -->
+                <div class="card shadow-sm border-0 mb-4">
+                    <div class="card-header bg-white border-bottom">
+                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" data-bs-toggle="tab" href="#hero" role="tab">
+                                    <i class="fas fa-home me-2"></i>Hero
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#visaOptions" role="tab">
+                                    <i class="fas fa-passport me-2"></i>Visa Options
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#form" role="tab">
+                                    <i class="fas fa-envelope me-2"></i>Form
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#submissions" role="tab">
+                                    <i class="fas fa-list me-2"></i>Submissions
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <!-- Hero Tab -->
+                            <div class="tab-pane fade show active" id="hero" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <h6 class="fw-medium mb-3">Hero Section</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-5">
+                                                <label class="form-label fw-medium">Background Image</label>
+                                                <div class="input-group mb-2">
+                                                    <input type="text" class="form-control" id="heroBackgroundImage"
+                                                        name="heroBackgroundImage"
+                                                        value="<%= data.hero?.backgroundImage || '' %>">
+                                                    <button type="button"
+                                                        class="btn btn-outline-primary btn-upload-image"
+                                                        data-target-input="heroBackgroundImage"
+                                                        data-image-type="appointment">
+                                                        <i class="fas fa-upload me-1"></i>Upload
+                                                    </button>
+                                                </div>
+                                                <small class="text-muted">Recommended size: 1920x1080px</small>
+                                            </div>
+                                            <div class="col-md-7">
+                                                <div id="heroImagePreview" style="height: 200px;">
+                                                    <% if (data.hero?.backgroundImage) { %>
+                                                        <% let heroImgSrc=data.hero.backgroundImage; if (heroImgSrc &&
+                                                            !heroImgSrc.startsWith('http://') &&
+                                                            !heroImgSrc.startsWith('https://')) {
+                                                            heroImgSrc=heroImgSrc.startsWith('/') ? heroImgSrc : '/' +
+                                                            heroImgSrc; } %>
+                                                            <img src="<%= heroImgSrc %>" class="img-thumbnail"
+                                                                id="heroPreviewImg"
+                                                                style="height: 200px; width: 100%; object-fit: cover;"
+                                                                alt="Background image preview"
+                                                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                                            <div class="border rounded p-5 text-center text-muted"
+                                                                style="height: 200px; display: none; align-items: center; justify-content: center;">
+                                                                Image preview
+                                                            </div>
+                                                            <% } else { %>
+                                                                <div class="border rounded p-5 text-center text-muted"
+                                                                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
+                                                                    Image preview
+                                                                </div>
+                                                                <% } %>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row g-3 mt-2">
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Title</label>
+                                                <input type="text" class="form-control" id="heroTitle" name="heroTitle"
+                                                    value="<%= data.hero?.title || '' %>">
+                                            </div>
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Subtitle</label>
+                                                <input type="text" class="form-control" id="heroSubtitle"
+                                                    name="heroSubtitle" value="<%= data.hero?.subtitle || '' %>">
+                                            </div>
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Heading</label>
+                                                <input type="text" class="form-control" id="heroHeading"
+                                                    name="heroHeading" value="<%= data.hero?.heading || '' %>">
+                                            </div>
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Description</label>
+                                                <textarea class="form-control" id="heroDescription"
+                                                    name="heroDescription"
+                                                    rows="2"><%= data.hero?.description || '' %></textarea>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Visa Options Tab -->
+                            <div class="tab-pane fade" id="visaOptions" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Visa Options</h6>
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addVisaOption()">
+                                                <i class="fas fa-plus"></i> Add Option
+                                            </button>
+                                        </div>
+                                        <p class="text-muted small">These options will appear in the visa type selection
+                                            dropdown on the appointment form.</p>
+                                        <div id="visaOptionsContainer">
+                                            <% if (data.visaOptions && data.visaOptions.length> 0) { %>
+                                                <% data.visaOptions.forEach((option, index)=> { %>
+                                                    <div class="input-group mb-2 visa-option-item">
+                                                        <span class="input-group-text"><i
+                                                                class="fas fa-passport"></i></span>
+                                                        <input type="text" class="form-control visa-option-input"
+                                                            value="<%= option %>" placeholder="Enter visa option">
+                                                        <button type="button" class="btn btn-outline-danger"
+                                                            onclick="removeVisaOption(this)">
+                                                            <i class="fas fa-trash"></i>
+                                                        </button>
+                                                    </div>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Form Tab -->
+                            <div class="tab-pane fade" id="form" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <h6 class="fw-medium mb-3">Form Settings</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label class="form-label">Form Heading</label>
+                                                <input type="text" class="form-control" id="formHeading"
+                                                    value="<%= data.form?.heading || '' %>">
+                                            </div>
+                                            <div class="col-md-6">
+                                                <label class="form-label">Submit Button Text</label>
+                                                <input type="text" class="form-control" id="formSubmitButtonText"
+                                                    value="<%= data.form?.submitButton?.text || 'Request Appointment' %>">
+                                            </div>
+                                            <!-- Hidden fields for submitButton icon and buttonClass -->
+                                            <input type="hidden" id="formSubmitButtonIcon"
+                                                value="<%= data.form?.submitButton?.icon || 'fa-solid fa-arrow-right' %>">
+                                            <input type="hidden" id="formSubmitButtonClass"
+                                                value="<%= data.form?.submitButton?.buttonClass || 'theme-btn' %>">
+                                        </div>
+
+                                        <hr class="my-4">
+
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Form Fields</h6>
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addFormField()">
+                                                <i class="fas fa-plus"></i> Add Field
+                                            </button>
+                                        </div>
+
+                                        <div id="formFieldsContainer">
+                                            <% if (data.form?.fields && data.form.fields.length> 0) { %>
+                                                <% data.form.fields.forEach((field, index)=> { %>
+                                                    <div class="card mb-3 form-field-item">
+                                                        <div class="card-body">
+                                                            <div class="row g-3">
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Field Name</label>
+                                                                    <input type="text"
+                                                                        class="form-control field-name-input"
+                                                                        value="<%= field.name || '' %>"
+                                                                        placeholder="e.g., name">
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Label</label>
+                                                                    <input type="text"
+                                                                        class="form-control field-label-input"
+                                                                        value="<%= field.label || '' %>"
+                                                                        placeholder="e.g., Your Name">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Type</label>
+                                                                    <select class="form-select field-type-select">
+                                                                        <option value="text" <%=field.type==='text'
+                                                                            ? 'selected' : '' %>>Text</option>
+                                                                        <option value="email" <%=field.type==='email'
+                                                                            ? 'selected' : '' %>>Email</option>
+                                                                        <option value="tel" <%=field.type==='tel'
+                                                                            ? 'selected' : '' %>>Phone</option>
+                                                                        <option value="textarea"
+                                                                            <%=field.type==='textarea' ? 'selected' : ''
+                                                                            %>>Textarea</option>
+                                                                        <option value="date" <%=field.type==='date'
+                                                                            ? 'selected' : '' %>>Date</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Col Class</label>
+                                                                    <select class="form-select field-col-select">
+                                                                        <option value="col-lg-4"
+                                                                            <%=field.colClass==='col-lg-4' ? 'selected'
+                                                                            : '' %>>1/3 Width</option>
+                                                                        <option value="col-lg-6"
+                                                                            <%=field.colClass==='col-lg-6' ? 'selected'
+                                                                            : '' %>>1/2 Width</option>
+                                                                        <option value="col-lg-12"
+                                                                            <%=field.colClass==='col-lg-12' ? 'selected'
+                                                                            : '' %>>Full Width</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Required</label>
+                                                                    <div class="form-check mt-2">
+                                                                        <input
+                                                                            class="form-check-input field-required-check"
+                                                                            type="checkbox" <%=field.required
+                                                                            ? 'checked' : '' %>>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="col-md-6">
+                                                                    <label class="form-label">Placeholder</label>
+                                                                    <input type="text"
+                                                                        class="form-control field-placeholder-input"
+                                                                        value="<%= field.placeholder || '' %>">
+                                                                </div>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-outline-danger btn-sm mt-3"
+                                                                onclick="removeFormField(this)">
+                                                                <i class="fas fa-trash me-2"></i>Remove Field
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Submissions Tab -->
+                            <div class="tab-pane fade" id="submissions" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Recent Submissions</h6>
+                                        </div>
+
+                                        <!-- Date Filter -->
+                                        <div class="row g-2 mb-4 align-items-end" id="filterContainer">
+                                            <input type="hidden" id="filterTab" value="submissions">
+                                            <div class="col-md-3">
+                                                <label class="form-label small text-muted">Start Date</label>
+                                                <input type="date" class="form-control form-control-sm"
+                                                    id="filterStartDate" value="<%= locals.startDate || '' %>">
+                                            </div>
+                                            <div class="col-md-3">
+                                                <label class="form-label small text-muted">End Date</label>
+                                                <input type="date" class="form-control form-control-sm"
+                                                    id="filterEndDate" value="<%= locals.endDate || '' %>">
+                                            </div>
+                                            <div class="col-md-3">
+                                                <button type="button" class="btn btn-sm btn-primary w-100"
+                                                    onclick="applyDateFilter()">
+                                                    <i class="fas fa-filter me-1"></i> Filter
+                                                </button>
+                                            </div>
+                                            <div class="col-md-2">
+                                                <a href="/admin/appointment?tab=submissions"
+                                                    class="btn btn-sm btn-outline-secondary w-100">
+                                                    <i class="fas fa-times me-1"></i> Clear
+                                                </a>
+                                            </div>
+                                        </div>
+
+                                        <div class="table-responsive">
+                                            <table class="table table-hover align-middle">
+                                                <thead class="table-light">
+                                                    <tr>
+                                                        <th>Date</th>
+                                                        <th>Name</th>
+                                                        <th>Contact</th>
+                                                        <th>Appt Date</th>
+                                                        <th>Visa Types</th>
+                                                        <th>Message</th>
+                                                        <th>Status</th>
+                                                        <th>Action</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <% if (locals.submissions && submissions.length> 0) { %>
+                                                        <% submissions.forEach(submission=> { %>
+                                                            <tr>
+                                                                <td>
+                                                                    <%= new
+                                                                        Date(submission.createdAt).toLocaleDateString()
+                                                                        %>
+                                                                        <br>
+                                                                        <small class="text-muted">
+                                                                            <%= new
+                                                                                Date(submission.createdAt).toLocaleTimeString([],
+                                                                                {hour: '2-digit' , minute:'2-digit'}) %>
+                                                                        </small>
+                                                                </td>
+                                                                <td>
+                                                                    <%= submission.name %>
+                                                                </td>
+                                                                <td>
+                                                                    <div class="d-flex flex-column">
+                                                                        <a href="mailto:<%= submission.email %>"
+                                                                            class="text-decoration-none"><i
+                                                                                class="fas fa-envelope me-1"></i>
+                                                                            <%= submission.email %>
+                                                                        </a>
+                                                                        <% if(submission.phone) { %>
+                                                                            <span class="text-muted small"><i
+                                                                                    class="fas fa-phone me-1"></i>
+                                                                                <%= submission.phone %>
+                                                                            </span>
+                                                                            <% } %>
+                                                                    </div>
+                                                                </td>
+                                                                <td>
+                                                                    <%= submission.appointmentDate || '-' %>
+                                                                </td>
+                                                                <td>
+                                                                    <% if (submission.visaTypes &&
+                                                                        submission.visaTypes.length> 0) { %>
+                                                                        <% submission.visaTypes.forEach(type=> { %>
+                                                                            <span
+                                                                                class="badge bg-light text-dark border me-1">
+                                                                                <%= type %>
+                                                                            </span>
+                                                                            <% }); %>
+                                                                                <% } else { %>
+                                                                                    <span class="text-muted">-</span>
+                                                                                    <% } %>
+                                                                </td>
+                                                                <td>
+                                                                    <% if (submission.message) { %>
+                                                                        <div title="<%= submission.message %>"
+                                                                            style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                                                            <%= submission.message %>
+                                                                        </div>
+                                                                        <% } else { %>
+                                                                            <span class="text-muted">-</span>
+                                                                            <% } %>
+                                                                </td>
+                                                                <td>
+                                                                    <% let statusClass='bg-secondary' ;
+                                                                        if(submission.status==='pending' )
+                                                                        statusClass='bg-warning text-dark' ;
+                                                                        if(submission.status==='confirmed' )
+                                                                        statusClass='bg-success' ;
+                                                                        if(submission.status==='completed' )
+                                                                        statusClass='bg-info text-dark' ;
+                                                                        if(submission.status==='cancelled' )
+                                                                        statusClass='bg-danger' ; %>
+                                                                        <span
+                                                                            class="badge <%= statusClass %> rounded-pill">
+                                                                            <%= submission.status %>
+                                                                        </span>
+                                                                </td>
+                                                                <td>
+                                                                    <button type="button"
+                                                                        class="btn btn-sm btn-outline-primary"
+                                                                        onclick="openStatusModal('<%= submission._id %>', '<%= submission.status %>')"
+                                                                        title="Update Status">
+                                                                        <i class="fas fa-edit"></i>
+                                                                    </button>
+                                                                </td>
+                                                            </tr>
+                                                            <% }); %>
+                                                                <% } else { %>
+                                                                    <tr>
+                                                                        <td colspan="8"
+                                                                            class="text-center py-4 text-muted">No
+                                                                            submissions found</td>
+                                                                    </tr>
+                                                                    <% } %>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div class="mt-3 text-end">
+                                            <small class="text-muted">Showing last 50 submissions</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Fixed Bottom Buttons -->
+                <div class="fixed-bottom-buttons">
+                    <button type="reset" class="btn btn-secondary" onclick="resetForm()">
+                        <i class="fas fa-undo me-2"></i>Reset
+                    </button>
+                    <button type="submit" class="btn btn-primary" id="submitBtn">
+                        <i class="fas fa-save me-2"></i>Save Changes
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Status Update Modal -->
+<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Update Status</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="statusForm">
+                    <input type="hidden" id="statusSubmissionId">
+                    <div class="mb-3">
+                        <label for="statusSelect" class="form-label">Status</label>
+                        <select class="form-select" id="statusSelect">
+                            <option value="pending">Pending</option>
+                            <option value="confirmed">Confirmed</option>
+                            <option value="completed">Completed</option>
+                            <option value="cancelled">Cancelled</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" onclick="saveStatus()">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="application/json" id="appointmentDataJson"><%- JSON.stringify(data) %></script>
+
+<script>
+    let originalFormData = null;
+    let statusModal = null;
+
+    document.addEventListener('DOMContentLoaded', function () {
+        try {
+            var jsonScript = document.getElementById('appointmentDataJson');
+            originalFormData = JSON.parse(jsonScript.textContent);
+        } catch (e) {
+            console.error('Error parsing originalFormData:', e);
+            originalFormData = {};
+        }
+
+        // Check for tab parameter in URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const tab = urlParams.get('tab');
+        if (tab) {
+            const triggerEl = document.querySelector(`a[href="#${tab}"]`);
+            if (triggerEl) {
+                const tabInstance = new bootstrap.Tab(triggerEl);
+                tabInstance.show();
+            }
+        }
+
+        // Move modal to body to prevent backdrop issues
+        const statusModalEl = document.getElementById('statusModal');
+        if (statusModalEl) {
+            document.body.appendChild(statusModalEl);
+        }
+        statusModal = new bootstrap.Modal(statusModalEl);
+
+        updateAllJsonInputs();
+        initializeFormHandlers();
+    });
+
+    function applyDateFilter() {
+        const startDate = document.getElementById('filterStartDate').value;
+        const endDate = document.getElementById('filterEndDate').value;
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', 'submissions');
+
+        if (startDate) {
+            url.searchParams.set('startDate', startDate);
+        } else {
+            url.searchParams.delete('startDate');
+        }
+
+        if (endDate) {
+            url.searchParams.set('endDate', endDate);
+        } else {
+            url.searchParams.delete('endDate');
+        }
+
+        window.location.href = url.toString();
+    }
+
+    function openStatusModal(id, currentStatus) {
+        document.getElementById('statusSubmissionId').value = id;
+        document.getElementById('statusSelect').value = currentStatus;
+        statusModal.show();
+    }
+
+    async function saveStatus() {
+        const id = document.getElementById('statusSubmissionId').value;
+        const status = document.getElementById('statusSelect').value;
+
+        try {
+            const response = await fetch(`/admin/appointments/${id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ status })
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                // Determine CSS class for the notification or badge
+                // Since this is generic, we'll reload or update UI manually if complex.
+                // Reload is safest to show updated table state (including sorting/filtering if any)
+                // But let's try to be smooth:
+
+                window.location.reload();
+            } else {
+                alert('Failed to update status: ' + (result.error || 'Unknown error'));
+            }
+        } catch (error) {
+            console.error('Error updating status:', error);
+            alert('Error updating status');
+        }
+    }
+
+    function initializeFormHandlers() {
+        const form = document.getElementById('appointmentForm');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+            const submitBtn = document.getElementById('submitBtn');
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
+
+            try {
+                updateJsonData();
+                this.submit();
+            } catch (error) {
+                console.error('Error updating data:', error);
+                alert('Failed to process form data. Please try again.');
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
+            }
+        });
+
+        // Image upload buttons
+        document.querySelectorAll('.btn-upload-image').forEach(button => {
+            button.addEventListener('click', function () {
+                const targetInput = this.dataset.targetInput;
+                const imageType = this.dataset.imageType;
+                openImageUploader(targetInput, imageType);
+            });
+        });
+
+        // Update preview when background image changes
+        document.getElementById('heroBackgroundImage').addEventListener('input', function () {
+            updateHeroImagePreview(this.value);
+        });
+    }
+
+    function updateHeroImagePreview(imagePath) {
+        const previewContainer = document.getElementById('heroImagePreview');
+        if (imagePath) {
+            let imgSrc = imagePath;
+            if (!imgSrc.startsWith('http://') && !imgSrc.startsWith('https://')) {
+                imgSrc = imgSrc.startsWith('/') ? imgSrc : '/' + imgSrc;
+            }
+            previewContainer.innerHTML = `
+                <img src="${imgSrc}" class="img-thumbnail" id="heroPreviewImg"
+                    style="height: 200px; width: 100%; object-fit: cover;"
+                    alt="Background image preview"
+                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="border rounded p-5 text-center text-muted"
+                    style="height: 200px; display: none; align-items: center; justify-content: center;">
+                    Image preview
+                </div>
+            `;
+        } else {
+            previewContainer.innerHTML = `
+                <div class="border rounded p-5 text-center text-muted"
+                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
+                    Image preview
+                </div>
+            `;
+        }
+    }
+
+    function updateAllJsonInputs() {
+        updateJsonData();
+    }
+
+    function updateJsonData() {
+        // Hero data
+        const heroData = {
+            title: document.getElementById('heroTitle').value || '',
+            backgroundImage: document.getElementById('heroBackgroundImage').value || '',
+            subtitle: document.getElementById('heroSubtitle').value || '',
+            heading: document.getElementById('heroHeading').value || '',
+            description: document.getElementById('heroDescription').value || '',
+        };
+        document.getElementById('heroJson').value = JSON.stringify(heroData);
+
+        // Visa options
+        const visaOptions = [];
+        document.querySelectorAll('.visa-option-input').forEach(input => {
+            if (input.value.trim()) {
+                visaOptions.push(input.value.trim());
+            }
+        });
+        document.getElementById('visaOptionsJson').value = JSON.stringify(visaOptions);
+
+        // Form data
+        const fields = [];
+        document.querySelectorAll('.form-field-item').forEach(item => {
+            fields.push({
+                name: item.querySelector('.field-name-input').value || '',
+                label: item.querySelector('.field-label-input').value || '',
+                type: item.querySelector('.field-type-select').value || 'text',
+                placeholder: item.querySelector('.field-placeholder-input').value || '',
+                required: item.querySelector('.field-required-check').checked,
+                colClass: item.querySelector('.field-col-select').value || 'col-lg-12',
+            });
+        });
+
+        const formData = {
+            heading: document.getElementById('formHeading').value || '',
+            fields: fields,
+            submitButton: {
+                text: document.getElementById('formSubmitButtonText').value || 'Request Appointment',
+                icon: document.getElementById('formSubmitButtonIcon').value || 'fa-solid fa-arrow-right',
+                buttonClass: document.getElementById('formSubmitButtonClass').value || 'theme-btn',
+            },
+        };
+        document.getElementById('formJson').value = JSON.stringify(formData);
+    }
+
+    function addVisaOption() {
+        const container = document.getElementById('visaOptionsContainer');
+        const html = `
+            <div class="input-group mb-2 visa-option-item">
+                <span class="input-group-text"><i class="fas fa-passport"></i></span>
+                <input type="text" class="form-control visa-option-input" value="" placeholder="Enter visa option">
+                <button type="button" class="btn btn-outline-danger" onclick="removeVisaOption(this)">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', html);
+    }
+
+    function removeVisaOption(button) {
+        button.closest('.visa-option-item').remove();
+    }
+
+    function addFormField() {
+        const container = document.getElementById('formFieldsContainer');
+        const html = `
+            <div class="card mb-3 form-field-item">
+                <div class="card-body">
+                    <div class="row g-3">
+                        <div class="col-md-3">
+                            <label class="form-label">Field Name</label>
+                            <input type="text" class="form-control field-name-input" value="" placeholder="e.g., name">
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label">Label</label>
+                            <input type="text" class="form-control field-label-input" value="" placeholder="e.g., Your Name">
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Type</label>
+                            <select class="form-select field-type-select">
+                                <option value="text" selected>Text</option>
+                                <option value="email">Email</option>
+                                <option value="tel">Phone</option>
+                                <option value="textarea">Textarea</option>
+                                <option value="date">Date</option>
+                            </select>
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Col Class</label>
+                            <select class="form-select field-col-select">
+                                 <option value="col-lg-4">1/3 Width</option>
+                                <option value="col-lg-6">1/2 Width</option>
+                                <option value="col-lg-12" selected>Full Width</option>
+                            </select>
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Required</label>
+                            <div class="form-check mt-2">
+                                <input class="form-check-input field-required-check" type="checkbox">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">Placeholder</label>
+                            <input type="text" class="form-control field-placeholder-input" value="">
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-outline-danger btn-sm mt-3" onclick="removeFormField(this)">
+                        <i class="fas fa-trash me-2"></i>Remove Field
+                    </button>
+                </div>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', html);
+    }
+
+    function removeFormField(button) {
+        button.closest('.form-field-item').remove();
+    }
+
+    function resetForm() {
+        if (confirm('Are you sure you want to reset all changes?')) {
+            location.reload();
+        }
+    }
+
+    // Image uploader function (reuse from shared)
+    function openImageUploader(targetInput, imageType) {
+        // Open upload modal or trigger file input
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = async function (e) {
+            const file = e.target.files[0];
+            if (!file) return;
+
+            const formData = new FormData();
+            formData.append('image', file);
+
+            try {
+                const response = await fetch('/admin/upload/image', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+                if (result.success && result.imagePath) {
+                    document.getElementById(targetInput).value = result.imagePath;
+                    if (targetInput === 'heroBackgroundImage') {
+                        updateHeroImagePreview(result.imagePath);
+                    }
+                } else {
+                    alert('Upload failed: ' + (result.error || 'Unknown error'));
+                }
+            } catch (error) {
+                console.error('Upload error:', error);
+                alert('Upload failed. Please try again.');
+            }
+        };
+        input.click();
+    }
+</script>
\ No newline at end of file
diff --git a/views/admin/contact/index.ejs b/views/admin/contact/index.ejs
index 2ce659e..ba96344 100644
--- a/views/admin/contact/index.ejs
+++ b/views/admin/contact/index.ejs
@@ -15,8 +15,7 @@
 
     <div class="row">
         <div class="col-12">
-            <form method="POST" class="content-with-fixed-buttons" id="contactForm"
-                action="/admin/contact/update">
+            <form method="POST" class="content-with-fixed-buttons" id="contactForm" action="/admin/contact/update">
                 <!-- Hidden inputs for JSON data -->
                 <input type="hidden" name="hero" id="heroJson">
                 <input type="hidden" name="contactCards" id="contactCardsJson">
@@ -47,6 +46,11 @@
                                     <i class="fas fa-envelope me-2"></i>Form
                                 </a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#submissions" role="tab">
+                                    <i class="fas fa-list me-2"></i>Submissions
+                                </a>
+                            </li>
                         </ul>
                     </div>
 
@@ -61,10 +65,12 @@
                                                 <label class="form-label fw-medium">Background Image</label>
                                                 <div class="input-group mb-2">
                                                     <input type="text" class="form-control" id="heroBackgroundImage"
-                                                        name="heroBackgroundImage" value="<%= data.hero?.backgroundImage || '' %>">
+                                                        name="heroBackgroundImage"
+                                                        value="<%= data.hero?.backgroundImage || '' %>">
                                                     <button type="button"
                                                         class="btn btn-outline-primary btn-upload-image"
-                                                        data-target-input="heroBackgroundImage" data-image-type="contact">
+                                                        data-target-input="heroBackgroundImage"
+                                                        data-image-type="contact">
                                                         <i class="fas fa-upload me-1"></i>Upload
                                                     </button>
                                                 </div>
@@ -73,23 +79,26 @@
                                             <div class="col-md-7">
                                                 <div id="heroImagePreview" style="height: 300px;">
                                                     <% if (data.hero?.backgroundImage) { %>
-                                                        <% 
-                                                            let heroImgSrc = data.hero.backgroundImage;
-                                                            if (heroImgSrc && !heroImgSrc.startsWith('http://') && !heroImgSrc.startsWith('https://')) {
-                                                                heroImgSrc = heroImgSrc.startsWith('/') ? heroImgSrc : '/' + heroImgSrc;
-                                                            }
-                                                        %>
-                                                        <img src="<%= heroImgSrc %>" class="img-thumbnail" id="heroPreviewImg"
-                                                            style="height: 300px; width: 100%; object-fit: cover;"
-                                                            alt="Background image preview" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                                                        <div class="border rounded p-5 text-center text-muted" style="height: 300px; display: none; align-items: center; justify-content: center;">
-                                                            Image preview
-                                                        </div>
-                                                    <% } else { %>
-                                                        <div class="border rounded p-5 text-center text-muted" style="height: 300px; display: flex; align-items: center; justify-content: center;">
-                                                            Image preview
-                                                        </div>
-                                                    <% } %>
+                                                        <% let heroImgSrc=data.hero.backgroundImage; if (heroImgSrc &&
+                                                            !heroImgSrc.startsWith('http://') &&
+                                                            !heroImgSrc.startsWith('https://')) {
+                                                            heroImgSrc=heroImgSrc.startsWith('/') ? heroImgSrc : '/' +
+                                                            heroImgSrc; } %>
+                                                            <img src="<%= heroImgSrc %>" class="img-thumbnail"
+                                                                id="heroPreviewImg"
+                                                                style="height: 300px; width: 100%; object-fit: cover;"
+                                                                alt="Background image preview"
+                                                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                                            <div class="border rounded p-5 text-center text-muted"
+                                                                style="height: 300px; display: none; align-items: center; justify-content: center;">
+                                                                Image preview
+                                                            </div>
+                                                            <% } else { %>
+                                                                <div class="border rounded p-5 text-center text-muted"
+                                                                    style="height: 300px; display: flex; align-items: center; justify-content: center;">
+                                                                    Image preview
+                                                                </div>
+                                                                <% } %>
                                                 </div>
                                             </div>
                                         </div>
@@ -101,12 +110,17 @@
                                             </div>
                                         </div>
                                         <!-- Hidden field for overlayColor - keep default value -->
-                                        <input type="hidden" id="heroOverlayColor" value="<%= data.hero?.overlayColor || 'rgba(0, 0, 0, 0)' %>">
+                                        <input type="hidden" id="heroOverlayColor"
+                                            value="<%= data.hero?.overlayColor || 'rgba(0, 0, 0, 0)' %>">
                                         <!-- Hidden fields for class values - keep in data but not editable -->
-                                        <input type="hidden" id="heroSectionClass" value="<%= data.hero?.sectionClass || '' %>">
-                                        <input type="hidden" id="heroTitleClass" value="<%= data.hero?.titleClass || '' %>">
-                                        <input type="hidden" id="heroBackgroundPosition" value="<%= data.hero?.backgroundPosition || 'center' %>">
-                                        <input type="hidden" id="heroEnableScrollspy" value="<%= data.hero?.enableScrollspy ? 'true' : 'false' %>">
+                                        <input type="hidden" id="heroSectionClass"
+                                            value="<%= data.hero?.sectionClass || '' %>">
+                                        <input type="hidden" id="heroTitleClass"
+                                            value="<%= data.hero?.titleClass || '' %>">
+                                        <input type="hidden" id="heroBackgroundPosition"
+                                            value="<%= data.hero?.backgroundPosition || 'center' %>">
+                                        <input type="hidden" id="heroEnableScrollspy"
+                                            value="<%= data.hero?.enableScrollspy ? 'true' : 'false' %>">
                                     </div>
                                 </div>
                             </div>
@@ -117,126 +131,246 @@
                                     <div class="card-body">
                                         <div class="d-flex justify-content-between align-items-center mb-3">
                                             <h6 class="fw-medium mb-0">Contact Cards</h6>
-                                            <button type="button" class="btn btn-primary btn-sm" onclick="addContactCard()">
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addContactCard()">
                                                 <i class="fas fa-plus"></i> Add Card
                                             </button>
                                         </div>
                                         <div id="contactCardsContainer">
-                                            <% if (data.contactCards && data.contactCards.length > 0) { %>
-                                                <% data.contactCards.forEach((card, index) => { %>
-                                                    <% 
-                                                        const iconSource = card.iconSource || (card.iconType && card.iconType.startsWith('/uploads/') ? 'image' : 'fontawesome');
-                                                        const isImageIcon = iconSource === 'image';
-                                                        const faIconValue = !isImageIcon ? (card.iconType || '') : '';
-                                                        const imageIconValue = isImageIcon ? (card.iconType || '') : '';
-                                                    %>
-                                                    <div class="card mb-3 contact-card-item">
-                                                        <div class="card-body">
-                                                            <div class="row g-3">
-                                                                <div class="col-md-3">
-                                                                    <label class="form-label">Type</label>
-                                                                    <select class="form-select card-type-select" name="cardType_<%= index %>" data-index="<%= index %>">
-                                                                        <option value="phone" <%= card.type === 'phone' ? 'selected' : '' %>>Phone</option>
-                                                                        <option value="email" <%= card.type === 'email' ? 'selected' : '' %>>Email</option>
-                                                                        <option value="location" <%= card.type === 'location' ? 'selected' : '' %>>Location</option>
-                                                                        <option value="hours" <%= card.type === 'hours' ? 'selected' : '' %>>Hours</option>
-                                                                        <option value="website" <%= card.type === 'website' ? 'selected' : '' %>>Website</option>
-                                                                        <option value="social" <%= card.type === 'social' ? 'selected' : '' %>>Social Media</option>
-                                                                        <option value="custom" <%= card.type === 'custom' ? 'selected' : '' %>>Custom</option>
-                                                                    </select>
-                                                                </div>
-                                                                <div class="col-md-6">
-                                                                    <label class="form-label">Title</label>
-                                                                    <input type="text" class="form-control" name="cardTitle_<%= index %>"
-                                                                        value="<%= card.title || '' %>">
-                                                                </div>
-                                                                <div class="col-md-12">
-                                                                    <label class="form-label">Icon Type</label>
-                                                                    <div class="btn-group w-100 mb-3" role="group">
-                                                                        <input type="radio" class="btn-check icon-source-radio" name="cardIconSource_<%= index %>" 
-                                                                            id="iconSource_fa_<%= index %>" value="fontawesome" 
-                                                                            <%= iconSource === 'fontawesome' ? 'checked' : '' %> 
-                                                                            data-index="<%= index %>" onchange="handleIconSourceChange(this)">
-                                                                        <label class="btn btn-outline-primary" for="iconSource_fa_<%= index %>">
-                                                                            <i class="fas fa-icons me-2"></i>Font Awesome
-                                                                        </label>
-                                                                        
-                                                                        <input type="radio" class="btn-check icon-source-radio" name="cardIconSource_<%= index %>" 
-                                                                            id="iconSource_img_<%= index %>" value="image" 
-                                                                            <%= iconSource === 'image' ? 'checked' : '' %> 
-                                                                            data-index="<%= index %>" onchange="handleIconSourceChange(this)">
-                                                                        <label class="btn btn-outline-primary" for="iconSource_img_<%= index %>">
-                                                                            <i class="fas fa-image me-2"></i>Upload Image
-                                                                        </label>
-                                                                    </div>
-                                                                    
-                                                                    <!-- Font Awesome Icon Selector -->
-                                                                    <div class="icon-fa-container" data-index="<%= index %>" style="display: <%= iconSource === 'fontawesome' ? 'block' : 'none' %>;">
-                                                                        <label class="form-label">Select Font Awesome Icon</label>
-                                                                        <select class="form-select fa-icon-select" name="cardFaIcon_<%= index %>" data-index="<%= index %>">
-                                                                            <option value="">-- Select Icon --</option>
-                                                                            <option value="fas fa-phone" <%= faIconValue === 'fas fa-phone' ? 'selected' : '' %>>📞 Phone</option>
-                                                                            <option value="fas fa-envelope" <%= faIconValue === 'fas fa-envelope' ? 'selected' : '' %>>✉️ Email</option>
-                                                                            <option value="fas fa-map-marker-alt" <%= faIconValue === 'fas fa-map-marker-alt' ? 'selected' : '' %>>📍 Location</option>
-                                                                            <option value="fas fa-clock" <%= faIconValue === 'fas fa-clock' ? 'selected' : '' %>>🕐 Clock</option>
-                                                                            <option value="fas fa-globe" <%= faIconValue === 'fas fa-globe' ? 'selected' : '' %>>🌐 Website</option>
-                                                                            <option value="fas fa-calendar" <%= faIconValue === 'fas fa-calendar' ? 'selected' : '' %>>📅 Calendar</option>
-                                                                            <option value="fas fa-user" <%= faIconValue === 'fas fa-user' ? 'selected' : '' %>>👤 User</option>
-                                                                            <option value="fas fa-users" <%= faIconValue === 'fas fa-users' ? 'selected' : '' %>>👥 Users</option>
-                                                                            <option value="fas fa-building" <%= faIconValue === 'fas fa-building' ? 'selected' : '' %>>🏢 Building</option>
-                                                                            <option value="fas fa-home" <%= faIconValue === 'fas fa-home' ? 'selected' : '' %>>🏠 Home</option>
-                                                                            <option value="fab fa-facebook" <%= faIconValue === 'fab fa-facebook' ? 'selected' : '' %>>📘 Facebook</option>
-                                                                            <option value="fab fa-twitter" <%= faIconValue === 'fab fa-twitter' ? 'selected' : '' %>>🐦 Twitter</option>
-                                                                            <option value="fab fa-instagram" <%= faIconValue === 'fab fa-instagram' ? 'selected' : '' %>>📷 Instagram</option>
-                                                                            <option value="fab fa-linkedin" <%= faIconValue === 'fab fa-linkedin' ? 'selected' : '' %>>💼 LinkedIn</option>
-                                                                            <option value="fab fa-youtube" <%= faIconValue === 'fab fa-youtube' ? 'selected' : '' %>>📺 YouTube</option>
-                                                                            <option value="fas fa-mobile-alt" <%= faIconValue === 'fas fa-mobile-alt' ? 'selected' : '' %>>📱 Mobile</option>
-                                                                            <option value="fas fa-fax" <%= faIconValue === 'fas fa-fax' ? 'selected' : '' %>>📠 Fax</option>
-                                                                            <option value="fas fa-headset" <%= faIconValue === 'fas fa-headset' ? 'selected' : '' %>>🎧 Support</option>
-                                                                            <option value="fas fa-info-circle" <%= faIconValue === 'fas fa-info-circle' ? 'selected' : '' %>>ℹ️ Info</option>
+                                            <% if (data.contactCards && data.contactCards.length> 0) { %>
+                                                <% data.contactCards.forEach((card, index)=> { %>
+                                                    <% const iconSource=card.iconSource || (card.iconType &&
+                                                        card.iconType.startsWith('/uploads/') ? 'image' : 'fontawesome'
+                                                        ); const isImageIcon=iconSource==='image' ; const
+                                                        faIconValue=!isImageIcon ? (card.iconType || '' ) : '' ; const
+                                                        imageIconValue=isImageIcon ? (card.iconType || '' ) : '' ; %>
+                                                        <div class="card mb-3 contact-card-item">
+                                                            <div class="card-body">
+                                                                <div class="row g-3">
+                                                                    <div class="col-md-3">
+                                                                        <label class="form-label">Type</label>
+                                                                        <select class="form-select card-type-select"
+                                                                            name="cardType_<%= index %>"
+                                                                            data-index="<%= index %>">
+                                                                            <option value="phone" <%=card.type==='phone'
+                                                                                ? 'selected' : '' %>>Phone</option>
+                                                                            <option value="email" <%=card.type==='email'
+                                                                                ? 'selected' : '' %>>Email</option>
+                                                                            <option value="location"
+                                                                                <%=card.type==='location' ? 'selected'
+                                                                                : '' %>>Location</option>
+                                                                            <option value="hours" <%=card.type==='hours'
+                                                                                ? 'selected' : '' %>>Hours</option>
+                                                                            <option value="website"
+                                                                                <%=card.type==='website' ? 'selected'
+                                                                                : '' %>>Website</option>
+                                                                            <option value="social"
+                                                                                <%=card.type==='social' ? 'selected'
+                                                                                : '' %>>Social Media</option>
+                                                                            <option value="custom"
+                                                                                <%=card.type==='custom' ? 'selected'
+                                                                                : '' %>>Custom</option>
                                                                         </select>
-                                                                        <small class="text-muted">Choose a Font Awesome icon from the list</small>
-                                                                        <div class="mt-2 fa-icon-preview" data-index="<%= index %>">
-                                                                            <% if (faIconValue) { %>
-                                                                                <i class="<%= faIconValue %> fa-2x text-primary"></i>
-                                                                            <% } %>
+                                                                    </div>
+                                                                    <div class="col-md-6">
+                                                                        <label class="form-label">Title</label>
+                                                                        <input type="text" class="form-control"
+                                                                            name="cardTitle_<%= index %>"
+                                                                            value="<%= card.title || '' %>">
+                                                                    </div>
+                                                                    <div class="col-md-12">
+                                                                        <label class="form-label">Icon Type</label>
+                                                                        <div class="btn-group w-100 mb-3" role="group">
+                                                                            <input type="radio"
+                                                                                class="btn-check icon-source-radio"
+                                                                                name="cardIconSource_<%= index %>"
+                                                                                id="iconSource_fa_<%= index %>"
+                                                                                value="fontawesome"
+                                                                                <%=iconSource==='fontawesome'
+                                                                                ? 'checked' : '' %>
+                                                                            data-index="<%= index %>"
+                                                                                onchange="handleIconSourceChange(this)">
+                                                                                <label class="btn btn-outline-primary"
+                                                                                    for="iconSource_fa_<%= index %>">
+                                                                                    <i
+                                                                                        class="fas fa-icons me-2"></i>Font
+                                                                                    Awesome
+                                                                                </label>
+
+                                                                                <input type="radio"
+                                                                                    class="btn-check icon-source-radio"
+                                                                                    name="cardIconSource_<%= index %>"
+                                                                                    id="iconSource_img_<%= index %>"
+                                                                                    value="image"
+                                                                                    <%=iconSource==='image' ? 'checked'
+                                                                                    : '' %>
+                                                                                data-index="<%= index %>"
+                                                                                    onchange="handleIconSourceChange(this)">
+                                                                                    <label
+                                                                                        class="btn btn-outline-primary"
+                                                                                        for="iconSource_img_<%= index %>">
+                                                                                        <i
+                                                                                            class="fas fa-image me-2"></i>Upload
+                                                                                        Image
+                                                                                    </label>
+                                                                        </div>
+
+                                                                        <!-- Font Awesome Icon Selector -->
+                                                                        <div class="icon-fa-container"
+                                                                            data-index="<%= index %>"
+                                                                            style="display: <%= iconSource === 'fontawesome' ? 'block' : 'none' %>;">
+                                                                            <label class="form-label">Select Font
+                                                                                Awesome Icon</label>
+                                                                            <select class="form-select fa-icon-select"
+                                                                                name="cardFaIcon_<%= index %>"
+                                                                                data-index="<%= index %>">
+                                                                                <option value="">-- Select Icon --
+                                                                                </option>
+                                                                                <option value="fas fa-phone"
+                                                                                    <%=faIconValue==='fas fa-phone'
+                                                                                    ? 'selected' : '' %>>📞 Phone
+                                                                                </option>
+                                                                                <option value="fas fa-envelope"
+                                                                                    <%=faIconValue==='fas fa-envelope'
+                                                                                    ? 'selected' : '' %>>✉️ Email
+                                                                                </option>
+                                                                                <option value="fas fa-map-marker-alt"
+                                                                                    <%=faIconValue==='fas fa-map-marker-alt'
+                                                                                    ? 'selected' : '' %>>📍 Location
+                                                                                </option>
+                                                                                <option value="fas fa-clock"
+                                                                                    <%=faIconValue==='fas fa-clock'
+                                                                                    ? 'selected' : '' %>>🕐 Clock
+                                                                                </option>
+                                                                                <option value="fas fa-globe"
+                                                                                    <%=faIconValue==='fas fa-globe'
+                                                                                    ? 'selected' : '' %>>🌐 Website
+                                                                                </option>
+                                                                                <option value="fas fa-calendar"
+                                                                                    <%=faIconValue==='fas fa-calendar'
+                                                                                    ? 'selected' : '' %>>📅 Calendar
+                                                                                </option>
+                                                                                <option value="fas fa-user"
+                                                                                    <%=faIconValue==='fas fa-user'
+                                                                                    ? 'selected' : '' %>>👤 User
+                                                                                </option>
+                                                                                <option value="fas fa-users"
+                                                                                    <%=faIconValue==='fas fa-users'
+                                                                                    ? 'selected' : '' %>>👥 Users
+                                                                                </option>
+                                                                                <option value="fas fa-building"
+                                                                                    <%=faIconValue==='fas fa-building'
+                                                                                    ? 'selected' : '' %>>🏢 Building
+                                                                                </option>
+                                                                                <option value="fas fa-home"
+                                                                                    <%=faIconValue==='fas fa-home'
+                                                                                    ? 'selected' : '' %>>🏠 Home
+                                                                                </option>
+                                                                                <option value="fab fa-facebook"
+                                                                                    <%=faIconValue==='fab fa-facebook'
+                                                                                    ? 'selected' : '' %>>📘 Facebook
+                                                                                </option>
+                                                                                <option value="fab fa-twitter"
+                                                                                    <%=faIconValue==='fab fa-twitter'
+                                                                                    ? 'selected' : '' %>>🐦 Twitter
+                                                                                </option>
+                                                                                <option value="fab fa-instagram"
+                                                                                    <%=faIconValue==='fab fa-instagram'
+                                                                                    ? 'selected' : '' %>>📷 Instagram
+                                                                                </option>
+                                                                                <option value="fab fa-linkedin"
+                                                                                    <%=faIconValue==='fab fa-linkedin'
+                                                                                    ? 'selected' : '' %>>💼 LinkedIn
+                                                                                </option>
+                                                                                <option value="fab fa-youtube"
+                                                                                    <%=faIconValue==='fab fa-youtube'
+                                                                                    ? 'selected' : '' %>>📺 YouTube
+                                                                                </option>
+                                                                                <option value="fas fa-mobile-alt"
+                                                                                    <%=faIconValue==='fas fa-mobile-alt'
+                                                                                    ? 'selected' : '' %>>📱 Mobile
+                                                                                </option>
+                                                                                <option value="fas fa-fax"
+                                                                                    <%=faIconValue==='fas fa-fax'
+                                                                                    ? 'selected' : '' %>>📠 Fax</option>
+                                                                                <option value="fas fa-headset"
+                                                                                    <%=faIconValue==='fas fa-headset'
+                                                                                    ? 'selected' : '' %>>🎧 Support
+                                                                                </option>
+                                                                                <option value="fas fa-info-circle"
+                                                                                    <%=faIconValue==='fas fa-info-circle'
+                                                                                    ? 'selected' : '' %>>ℹ️ Info
+                                                                                </option>
+                                                                            </select>
+                                                                            <small class="text-muted">Choose a Font
+                                                                                Awesome icon from the list</small>
+                                                                            <div class="mt-2 fa-icon-preview"
+                                                                                data-index="<%= index %>">
+                                                                                <% if (faIconValue) { %>
+                                                                                    <i
+                                                                                        class="<%= faIconValue %> fa-2x text-primary"></i>
+                                                                                    <% } %>
+                                                                            </div>
+                                                                        </div>
+
+                                                                        <!-- Upload Image -->
+                                                                        <div class="icon-image-container"
+                                                                            data-index="<%= index %>"
+                                                                            style="display: <%= iconSource === 'image' ? 'block' : 'none' %>;">
+                                                                            <label class="form-label">Upload Icon
+                                                                                Image</label>
+                                                                            <div class="input-group">
+                                                                                <input type="text"
+                                                                                    class="form-control card-icon-image-input"
+                                                                                    name="cardIconImage_<%= index %>"
+                                                                                    value="<%= imageIconValue %>"
+                                                                                    placeholder="/uploads/icon.png">
+                                                                                <button type="button"
+                                                                                    class="btn btn-outline-primary btn-upload-image"
+                                                                                    data-target-input="cardIconImage_<%= index %>"
+                                                                                    data-image-type="contact">
+                                                                                    <i
+                                                                                        class="fas fa-upload me-1"></i>Upload
+                                                                                    Icon
+                                                                                </button>
+                                                                            </div>
+                                                                            <% if (imageIconValue) { %>
+                                                                                <img src="<%= imageIconValue %>"
+                                                                                    class="img-thumbnail mt-2 icon-image-preview"
+                                                                                    data-index="<%= index %>"
+                                                                                    style="max-height: 100px; width: auto;"
+                                                                                    alt="Icon preview">
+                                                                                <% } else { %>
+                                                                                    <img src=""
+                                                                                        class="img-thumbnail mt-2 icon-image-preview"
+                                                                                        data-index="<%= index %>"
+                                                                                        style="max-height: 100px; width: auto; display: none;"
+                                                                                        alt="Icon preview">
+                                                                                    <% } %>
+                                                                                        <small class="text-muted">Upload
+                                                                                            a custom icon image for this
+                                                                                            contact card</small>
                                                                         </div>
                                                                     </div>
-                                                                    
-                                                                    <!-- Upload Image -->
-                                                                    <div class="icon-image-container" data-index="<%= index %>" style="display: <%= iconSource === 'image' ? 'block' : 'none' %>;">
-                                                                        <label class="form-label">Upload Icon Image</label>
-                                                                    <div class="input-group">
-                                                                            <input type="text" class="form-control card-icon-image-input" name="cardIconImage_<%= index %>" 
-                                                                                value="<%= imageIconValue %>" placeholder="/uploads/icon.png">
-                                                                        <button type="button" class="btn btn-outline-primary btn-upload-image" 
-                                                                                data-target-input="cardIconImage_<%= index %>" data-image-type="contact">
-                                                                            <i class="fas fa-upload me-1"></i>Upload Icon
-                                                                        </button>
-                                                                    </div>
-                                                                        <% if (imageIconValue) { %>
-                                                                            <img src="<%= imageIconValue %>" class="img-thumbnail mt-2 icon-image-preview" data-index="<%= index %>" style="max-height: 100px; width: auto;" alt="Icon preview">
-                                                                        <% } else { %>
-                                                                            <img src="" class="img-thumbnail mt-2 icon-image-preview" data-index="<%= index %>" style="max-height: 100px; width: auto; display: none;" alt="Icon preview">
-                                                                    <% } %>
-                                                                        <small class="text-muted">Upload a custom icon image for this contact card</small>
+                                                                    <div class="col-md-12">
+                                                                        <label class="form-label">Content (one per
+                                                                            line)</label>
+                                                                        <textarea class="form-control"
+                                                                            name="cardContent_<%= index %>"
+                                                                            rows="3"><%= (card.content || []).join('\n') %></textarea>
+                                                                        <small class="text-muted">Enter each content
+                                                                            item on a new line</small>
                                                                     </div>
                                                                 </div>
-                                                                <div class="col-md-12">
-                                                                    <label class="form-label">Content (one per line)</label>
-                                                                    <textarea class="form-control" name="cardContent_<%= index %>" rows="3"><%= (card.content || []).join('\n') %></textarea>
-                                                                    <small class="text-muted">Enter each content item on a new line</small>
-                                                                </div>
+                                                                <button type="button"
+                                                                    class="btn btn-outline-danger btn-sm mt-3"
+                                                                    onclick="removeContactCard(this)">
+                                                                    <i class="fas fa-trash me-2"></i>Remove Card
+                                                                </button>
                                                             </div>
-                                                            <button type="button"
-                                                                class="btn btn-outline-danger btn-sm mt-3"
-                                                                onclick="removeContactCard(this)">
-                                                                <i class="fas fa-trash me-2"></i>Remove Card
-                                                            </button>
                                                         </div>
-                                                    </div>
-                                                <% }); %>
-                                            <% } %>
+                                                        <% }); %>
+                                                            <% } %>
                                         </div>
                                     </div>
                                 </div>
@@ -251,44 +385,61 @@
                                             <div class="col-md-6">
                                                 <label class="form-label">Marker Title</label>
                                                 <input type="text" class="form-control" id="mapMarkerTitle"
-                                                    value="<%= data.map?.markerTitle || '' %>" placeholder="e.g., Our Office">
+                                                    value="<%= data.map?.markerTitle || '' %>"
+                                                    placeholder="e.g., Our Office">
                                             </div>
                                             <div class="col-md-6">
                                                 <label class="form-label">Location</label>
                                                 <input type="text" class="form-control" id="mapLocation"
-                                                    value="<%= data.map?.location || '' %>" placeholder="e.g., 123 Main St, City, Country">
-                                                <small class="text-muted">Enter address - map will be automatically shown</small>
+                                                    value="<%= data.map?.location || '' %>"
+                                                    placeholder="e.g., 123 Main St, City, Country">
+                                                <small class="text-muted">Enter address - map will be automatically
+                                                    shown</small>
                                             </div>
                                             <div class="col-md-12">
-                                                <div id="mapPreview" style="height: 400px; border: 1px solid #ddd; border-radius: 4px; margin-top: 15px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999;">
-                                                    <% if (data.map?.location && data.map?.coordinates?.lat && data.map?.coordinates?.lng) { %>
-                                                        <% 
-                                                            const lat = data.map.coordinates.lat;
-                                                            const lng = data.map.coordinates.lng;
-                                                            const zoom = data.map.zoom || 15;
-                                                            const markerTitle = data.map.markerTitle || data.map.location;
-                                                            // Calculate bbox for proper zoom - smaller bbox = more zoomed in
-                                                            const zoomDelta = {
-                                                                10: 0.1, 11: 0.05, 12: 0.025, 13: 0.0125, 14: 0.006,
-                                                                15: 0.003, 16: 0.0015, 17: 0.00075, 18: 0.000375
-                                                            };
-                                                            const delta = zoomDelta[zoom] || 0.003;
-                                                            const latDelta = delta;
-                                                            const lngDelta = delta * 1.5;
-                                                        %>
-                                                        <iframe 
-                                                            width="100%" 
-                                                            height="100%" 
-                                                            style="border:0; border-radius: 4px;" 
-                                                            src="https://www.openstreetmap.org/export/embed.html?bbox=<%= lng-lngDelta %>,<%= lat-latDelta %>,<%= lng+lngDelta %>,<%= lat+latDelta %>&layer=mapnik&marker=<%= lat %>,<%= lng %>"
-                                                            frameborder="0">
+                                                <label class="form-label">Google Map Embed URL</label>
+                                                <input type="text" class="form-control" id="mapEmbedUrl"
+                                                    value="<%= data.map?.embedUrl || '' %>"
+                                                    placeholder="https://www.google.com/maps/embed?...">
+                                                <small class="text-muted">Paste embed URL from Google Maps (Share ->
+                                                    Embed a map)</small>
+                                            </div>
+                                            <div class="col-md-12">
+                                                <div id="mapPreview"
+                                                    style="height: 400px; border: 1px solid #ddd; border-radius: 4px; margin-top: 15px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999;">
+                                                    <% if (data.map?.embedUrl) { %>
+                                                        <iframe width="100%" height="100%"
+                                                            style="border:0; border-radius: 4px;"
+                                                            src="<%= data.map.embedUrl %>" frameborder="0"
+                                                            allowfullscreen="" loading="lazy">
                                                         </iframe>
                                                         <div class="mt-2 text-center">
-                                                            <small class="text-muted">📍 <%= markerTitle %></small>
+                                                            <small class="text-muted">Location: <%=
+                                                                    data.map?.markerTitle || data.map?.location
+                                                                    || 'Location' %></small>
                                                         </div>
-                                                    <% } else { %>
-                                                        Enter location above to see map preview
-                                                    <% } %>
+                                                        <% } else if (data.map?.location && data.map?.coordinates?.lat
+                                                            && data.map?.coordinates?.lng) { %>
+                                                            <% var lat=data.map.coordinates.lat; var
+                                                                lng=data.map.coordinates.lng; var zoom=data.map.zoom ||
+                                                                15; var markerTitle=data.map.markerTitle ||
+                                                                data.map.location; var zoomDelta={ 10: 0.1, 11: 0.05,
+                                                                12: 0.025, 13: 0.0125, 14: 0.006, 15: 0.003, 16: 0.0015,
+                                                                17: 0.00075, 18: 0.000375 }; var delta=zoomDelta[zoom]
+                                                                || 0.003; var latDelta=delta; var lngDelta=delta * 1.5;
+                                                                %>
+                                                                <iframe width="100%" height="100%"
+                                                                    style="border:0; border-radius: 4px;"
+                                                                    src="https://www.openstreetmap.org/export/embed.html?bbox=<%= lng-lngDelta %>,<%= lat-latDelta %>,<%= lng+lngDelta %>,<%= lat+latDelta %>&layer=mapnik&marker=<%= lat %>,<%= lng %>"
+                                                                    frameborder="0">
+                                                                </iframe>
+                                                                <div class="mt-2 text-center">
+                                                                    <small class="text-muted">📍 <%= markerTitle %>
+                                                                    </small>
+                                                                </div>
+                                                                <% } else { %>
+                                                                    Enter location above to see map preview
+                                                                    <% } %>
                                                 </div>
                                             </div>
                                         </div>
@@ -296,10 +447,14 @@
                                         <input type="hidden" id="mapLat" value="<%= data.map?.coordinates?.lat || 0 %>">
                                         <input type="hidden" id="mapLng" value="<%= data.map?.coordinates?.lng || 0 %>">
                                         <input type="hidden" id="mapZoom" value="<%= data.map?.zoom || 15 %>">
-                                        <input type="hidden" id="tileLayerUrl" value="<%= data.map?.tileLayer?.url || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' %>">
-                                        <input type="hidden" id="tileLayerAttribution" value="<%= data.map?.tileLayer?.attribution || '' %>">
-                                        <input type="hidden" id="tileLayerMaxZoom" value="<%= data.map?.tileLayer?.maxZoom || 18 %>">
-                                        <input type="hidden" id="tileLayerMinZoom" value="<%= data.map?.tileLayer?.minZoom || 0 %>">
+                                        <input type="hidden" id="tileLayerUrl"
+                                            value="<%= data.map?.tileLayer?.url || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' %>">
+                                        <input type="hidden" id="tileLayerAttribution"
+                                            value="<%= data.map?.tileLayer?.attribution || '' %>">
+                                        <input type="hidden" id="tileLayerMaxZoom"
+                                            value="<%= data.map?.tileLayer?.maxZoom || 18 %>">
+                                        <input type="hidden" id="tileLayerMinZoom"
+                                            value="<%= data.map?.tileLayer?.minZoom || 0 %>">
                                     </div>
                                 </div>
                             </div>
@@ -325,53 +480,87 @@
                                                 <input type="text" class="form-control" id="formHeading"
                                                     value="<%= data.form?.heading || '' %>">
                                             </div>
+                                            <div class="col-md-12">
+                                                <label class="form-label">Description</label>
+                                                <textarea class="form-control" id="formDescription"
+                                                    rows="2"><%= data.form?.description || '' %></textarea>
+                                            </div>
+                                            <!-- Hidden fields for submitButton icon and buttonClass -->
+                                            <input type="hidden" id="formSubmitButtonIcon"
+                                                value="<%= data.form?.submitButton?.icon || 'fa-solid fa-arrow-right' %>">
+                                            <input type="hidden" id="formSubmitButtonClass"
+                                                value="<%= data.form?.submitButton?.buttonClass || 'theme-btn style-2' %>">
                                         </div>
                                         <hr class="my-4">
                                         <div class="d-flex justify-content-between align-items-center mb-3">
                                             <h6 class="fw-medium mb-0">Form Fields</h6>
-                                            <button type="button" class="btn btn-primary btn-sm" onclick="addFormField()">
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addFormField()">
                                                 <i class="fas fa-plus"></i> Add Field
                                             </button>
                                         </div>
                                         <div id="formFieldsContainer">
-                                            <% if (data.form?.fields && data.form.fields.length > 0) { %>
-                                                <% data.form.fields.forEach((field, index) => { %>
+                                            <% if (data.form?.fields && data.form.fields.length> 0) { %>
+                                                <% data.form.fields.forEach((field, index)=> { %>
                                                     <div class="card mb-3 form-field-item">
                                                         <div class="card-body">
                                                             <div class="row g-3">
                                                                 <div class="col-md-3">
                                                                     <label class="form-label">Label</label>
-                                                                    <input type="text" class="form-control" name="fieldName_<%= index %>"
-                                                                        value="<%= field.name || '' %>" placeholder="e.g., Your Name">
+                                                                    <input type="text" class="form-control"
+                                                                        name="fieldName_<%= index %>"
+                                                                        value="<%= field.name || '' %>"
+                                                                        placeholder="e.g., Your Name">
                                                                 </div>
                                                                 <div class="col-md-3">
                                                                     <label class="form-label">Field Type</label>
-                                                                    <select class="form-select field-type-select" name="fieldType_<%= index %>" data-index="<%= index %>" onchange="handleFieldTypeChange(this)">
-                                                                        <option value="text" <%= field.type === 'text' ? 'selected' : '' %>>Text</option>
-                                                                        <option value="email" <%= field.type === 'email' ? 'selected' : '' %>>Email</option>
-                                                                        <option value="tel" <%= field.type === 'tel' ? 'selected' : '' %>>Tel</option>
-                                                                        <option value="textarea" <%= field.type === 'textarea' ? 'selected' : '' %>>Textarea</option>
-                                                                        <option value="programme" <%= field.type === 'programme' ? 'selected' : '' %>>Programme</option>
+                                                                    <select class="form-select field-type-select"
+                                                                        name="fieldType_<%= index %>"
+                                                                        data-index="<%= index %>"
+                                                                        onchange="handleFieldTypeChange(this)">
+                                                                        <option value="text" <%=field.type==='text'
+                                                                            ? 'selected' : '' %>>Text</option>
+                                                                        <option value="email" <%=field.type==='email'
+                                                                            ? 'selected' : '' %>>Email</option>
+                                                                        <option value="tel" <%=field.type==='tel'
+                                                                            ? 'selected' : '' %>>Tel</option>
+                                                                        <option value="textarea"
+                                                                            <%=field.type==='textarea' ? 'selected' : ''
+                                                                            %>>Textarea</option>
+                                                                        <option value="programme"
+                                                                            <%=field.type==='programme' ? 'selected'
+                                                                            : '' %>>Programme</option>
                                                                     </select>
                                                                 </div>
                                                                 <div class="col-md-4">
                                                                     <label class="form-label">Placeholder</label>
-                                                                    <input type="text" class="form-control" name="fieldPlaceholder_<%= index %>"
+                                                                    <input type="text" class="form-control"
+                                                                        name="fieldPlaceholder_<%= index %>"
                                                                         value="<%= field.placeholder || '' %>">
                                                                 </div>
                                                                 <div class="col-md-2">
                                                                     <label class="form-label">Required</label>
                                                                     <div class="form-check mt-2">
-                                                                        <input class="form-check-input" type="checkbox" name="fieldRequired_<%= index %>"
-                                                                            <%= field.required ? 'checked' : '' %>>
+                                                                        <input class="form-check-input" type="checkbox"
+                                                                            name="fieldRequired_<%= index %>"
+                                                                            <%=field.required ? 'checked' : '' %>>
                                                                     </div>
                                                                 </div>
-                                                                <div class="col-md-3 programme-name-field" style="display: <%= field.type === 'programme' ? 'block' : 'none' %>;">
+                                                                <div class="col-md-3 programme-name-field"
+                                                                    style="display: <%= field.type === 'programme' ? 'block' : 'none' %>;">
                                                                     <label class="form-label">Programme Name</label>
-                                                                    <input type="text" class="form-control" name="fieldProgrammeName_<%= index %>"
-                                                                        value="<%= field.programmeName || '' %>" placeholder="e.g., Summer Camp 2024">
-                                                                    <small class="text-muted">Internal name for the programme</small>
+                                                                    <input type="text" class="form-control"
+                                                                        name="fieldProgrammeName_<%= index %>"
+                                                                        value="<%= field.programmeName || '' %>"
+                                                                        placeholder="e.g., Summer Camp 2024">
+                                                                    <small class="text-muted">Internal name for the
+                                                                        programme</small>
                                                                 </div>
+                                                                <!-- Hidden fields for label and colClass -->
+                                                                <input type="hidden" name="fieldLabel_<%= index %>"
+                                                                    value="<%= field.label || '' %>">
+                                                                <input type="hidden" name="fieldColClass_<%= index %>"
+                                                                    value="<%= field.colClass || 'col-lg-12' %>">
                                                             </div>
                                                             <button type="button"
                                                                 class="btn btn-outline-danger btn-sm mt-3"
@@ -380,8 +569,125 @@
                                                             </button>
                                                         </div>
                                                     </div>
-                                                <% }); %>
-                                            <% } %>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Submissions Tab -->
+                            <div class="tab-pane fade" id="submissions" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Recent Submissions</h6>
+                                        </div>
+
+                                        <!-- Date Filter -->
+                                        <div class="row g-2 mb-4 align-items-end" id="filterContainer">
+                                            <input type="hidden" id="filterTab" value="submissions">
+                                            <div class="col-md-3">
+                                                <label class="form-label small text-muted">Start Date</label>
+                                                <input type="date" class="form-control form-control-sm"
+                                                    id="filterStartDate" value="<%= locals.startDate || '' %>">
+                                            </div>
+                                            <div class="col-md-3">
+                                                <label class="form-label small text-muted">End Date</label>
+                                                <input type="date" class="form-control form-control-sm"
+                                                    id="filterEndDate" value="<%= locals.endDate || '' %>">
+                                            </div>
+                                            <div class="col-md-3">
+                                                <button type="button" class="btn btn-sm btn-primary w-100"
+                                                    onclick="applyDateFilter()">
+                                                    <i class="fas fa-filter me-1"></i> Filter
+                                                </button>
+                                            </div>
+                                            <div class="col-md-2">
+                                                <a href="/admin/contact?tab=submissions"
+                                                    class="btn btn-sm btn-outline-secondary w-100">
+                                                    <i class="fas fa-times me-1"></i> Clear
+                                                </a>
+                                            </div>
+                                        </div>
+
+                                        <div class="table-responsive">
+                                            <table class="table table-hover align-middle">
+                                                <thead class="table-light">
+                                                    <tr>
+                                                        <th>Date</th>
+                                                        <th>Name</th>
+                                                        <th>Email</th>
+                                                        <th>Phone</th>
+                                                        <th>Message</th>
+                                                        <th>Status</th>
+                                                        <th>Action</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <% if (locals.submissions && submissions.length> 0) { %>
+                                                        <% submissions.forEach(submission=> { %>
+                                                            <tr>
+                                                                <td>
+                                                                    <%= new
+                                                                        Date(submission.createdAt).toLocaleDateString()
+                                                                        %>
+                                                                        <%= new
+                                                                            Date(submission.createdAt).toLocaleTimeString([],
+                                                                            {hour: '2-digit' , minute:'2-digit'}) %>
+                                                                </td>
+                                                                <td>
+                                                                    <%= submission.name %>
+                                                                </td>
+                                                                <td><a href="mailto:<%= submission.email %>">
+                                                                        <%= submission.email %>
+                                                                    </a></td>
+                                                                <td>
+                                                                    <%= submission.phone || '-' %>
+                                                                </td>
+                                                                <td>
+                                                                    <div title="<%= submission.message %>"
+                                                                        style="max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                                                        <%= submission.message %>
+                                                                    </div>
+                                                                </td>
+                                                                <td>
+                                                                    <% let statusClass='bg-secondary' ;
+                                                                        if(submission.status==='pending' )
+                                                                        statusClass='bg-warning text-dark' ;
+                                                                        if(submission.status==='read' )
+                                                                        statusClass='bg-info text-dark' ;
+                                                                        if(submission.status==='replied' )
+                                                                        statusClass='bg-success' ;
+                                                                        if(submission.status==='archived' )
+                                                                        statusClass='bg-secondary' ; %>
+                                                                        <span
+                                                                            class="badge <%= statusClass %> rounded-pill">
+                                                                            <%= submission.status %>
+                                                                        </span>
+                                                                </td>
+                                                                <td>
+                                                                    <button type="button"
+                                                                        class="btn btn-sm btn-outline-primary"
+                                                                        onclick="openStatusModal('<%= submission._id %>', '<%= submission.status %>')"
+                                                                        title="Update Status">
+                                                                        <i class="fas fa-edit"></i>
+                                                                    </button>
+                                                                </td>
+                                                            </tr>
+                                                            <% }); %>
+                                                                <% } else { %>
+                                                                    <tr>
+                                                                        <td colspan="7"
+                                                                            class="text-center py-4 text-muted">No
+                                                                            submissions found</td>
+                                                                    </tr>
+                                                                    <% } %>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div class="mt-3 text-end">
+                                            <small class="text-muted">Showing last 50 submissions</small>
                                         </div>
                                     </div>
                                 </div>
@@ -404,15 +710,126 @@
     </div>
 </div>
 
+<!-- Status Update Modal -->
+<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Update Status</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="statusForm">
+                    <input type="hidden" id="statusSubmissionId">
+                    <div class="mb-3">
+                        <label for="statusSelect" class="form-label">Status</label>
+                        <select class="form-select" id="statusSelect">
+                            <option value="pending">Pending</option>
+                            <option value="read">Read</option>
+                            <option value="replied">Replied</option>
+                            <option value="archived">Archived</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" onclick="saveStatus()">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="application/json" id="contactDataJson"><%- JSON.stringify(data) %></script>
+
 <script>
     let originalFormData = null;
+    let statusModal = null;
 
     document.addEventListener('DOMContentLoaded', function () {
-        originalFormData = <%- JSON.stringify(data) %>;
+        try {
+            var jsonScript = document.getElementById('contactDataJson');
+            originalFormData = JSON.parse(jsonScript.textContent);
+        } catch (e) {
+            console.error('Error parsing originalFormData:', e);
+            originalFormData = {};
+        }
+
+        // Check for tab parameter in URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const tab = urlParams.get('tab');
+        if (tab) {
+            const triggerEl = document.querySelector(`a[href="#${tab}"]`);
+            if (triggerEl) {
+                const tabInstance = new bootstrap.Tab(triggerEl);
+                tabInstance.show();
+            }
+        }
+
+        // Move modal to body to prevent backdrop issues
+        const statusModalEl = document.getElementById('statusModal');
+        if (statusModalEl) {
+            document.body.appendChild(statusModalEl);
+        }
+        statusModal = new bootstrap.Modal(statusModalEl);
+
         updateAllJsonInputs(originalFormData);
         initializeFormHandlers();
     });
 
+    function applyDateFilter() {
+        const startDate = document.getElementById('filterStartDate').value;
+        const endDate = document.getElementById('filterEndDate').value;
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', 'submissions');
+
+        if (startDate) {
+            url.searchParams.set('startDate', startDate);
+        } else {
+            url.searchParams.delete('startDate');
+        }
+
+        if (endDate) {
+            url.searchParams.set('endDate', endDate);
+        } else {
+            url.searchParams.delete('endDate');
+        }
+
+        window.location.href = url.toString();
+    }
+
+    function openStatusModal(id, currentStatus) {
+        document.getElementById('statusSubmissionId').value = id;
+        document.getElementById('statusSelect').value = currentStatus;
+        statusModal.show();
+    }
+
+    async function saveStatus() {
+        const id = document.getElementById('statusSubmissionId').value;
+        const status = document.getElementById('statusSelect').value;
+
+        try {
+            const response = await fetch(`/admin/contact/submissions/${id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ status })
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                window.location.reload();
+            } else {
+                alert('Failed to update status: ' + (result.error || 'Unknown error'));
+            }
+        } catch (error) {
+            console.error('Error updating status:', error);
+            alert('Error updating status');
+        }
+    }
+
     function initializeFormHandlers() {
         const form = document.getElementById('contactForm');
         form.addEventListener('submit', async function (e) {
@@ -422,7 +839,11 @@
             submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
 
             try {
+                console.log('=== Before updateJsonData ===');
+                console.log('heroJson before:', document.getElementById('heroJson').value);
                 updateJsonData();
+                console.log('=== After updateJsonData ===');
+                console.log('heroJson after:', document.getElementById('heroJson').value);
                 this.submit();
             } catch (error) {
                 console.error('Error updating data:', error);
@@ -444,40 +865,106 @@
         const mapLocationInput = document.getElementById('mapLocation');
         if (mapLocationInput) {
             let geocodeTimeout;
-            mapLocationInput.addEventListener('input', function() {
+            mapLocationInput.addEventListener('input', function () {
                 clearTimeout(geocodeTimeout);
                 const location = this.value.trim();
-                
+
                 if (!location) {
-                    document.getElementById('mapPreview').innerHTML = 'Enter location above to see map preview';
+                    renderMapPreview();
                     return;
                 }
-                
+
                 geocodeTimeout = setTimeout(() => {
                     geocodeLocation(location);
                 }, 800); // Wait 800ms after user stops typing
             });
-            
+
             // Show map immediately if coordinates already exist
             const mapLat = document.getElementById('mapLat');
             const mapLng = document.getElementById('mapLng');
             if (mapLat && mapLng && mapLat.value && mapLng.value && parseFloat(mapLat.value) !== 0 && parseFloat(mapLng.value) !== 0) {
                 // Coordinates already exist, show map immediately
-                showMapPreview(parseFloat(mapLat.value), parseFloat(mapLng.value));
+                const savedLocation = sanitizeLocationInput(mapLocationInput.value);
+                showMapPreview(parseFloat(mapLat.value), parseFloat(mapLng.value), savedLocation || null);
             } else if (mapLocationInput.value) {
                 // Only geocode if coordinates don't exist
                 setTimeout(() => geocodeLocation(mapLocationInput.value), 500);
             }
+
+            mapLocationInput.addEventListener('blur', function () {
+                const cleaned = sanitizeLocationInput(this.value);
+                if (!cleaned && this.value.trim()) {
+                    showToast('Warning', 'Invalid location. Please enter a readable address.', 'warning');
+                }
+                this.value = cleaned;
+                renderMapPreview({ address: this.value });
+            });
+        }
+
+        const mapEmbedUrlInput = document.getElementById('mapEmbedUrl');
+        if (mapEmbedUrlInput) {
+            const normalizeEmbedInput = () => {
+                const raw = mapEmbedUrlInput.value || '';
+                const normalized = extractEmbedUrl(raw);
+                if (normalized && normalized !== raw.trim()) {
+                    mapEmbedUrlInput.value = normalized;
+                }
+                renderMapPreview();
+            };
+
+            mapEmbedUrlInput.addEventListener('paste', function () {
+                setTimeout(normalizeEmbedInput, 0);
+            });
+            mapEmbedUrlInput.addEventListener('blur', normalizeEmbedInput);
+        }
+
+        const mapMarkerTitleInput = document.getElementById('mapMarkerTitle');
+        if (mapMarkerTitleInput) {
+            mapMarkerTitleInput.addEventListener('input', function () {
+                renderMapPreview();
+            });
         }
     }
-
     function showMapPreview(lat, lng, address = null) {
+        renderMapPreview({ lat, lng, address });
+    }
+
+    function renderMapPreview(options = {}) {
         const mapPreview = document.getElementById('mapPreview');
         if (!mapPreview) return;
-        
+
+        const mapLat = parseFloat((document.getElementById('mapLat') || {}).value);
+        const mapLng = parseFloat((document.getElementById('mapLng') || {}).value);
+        const lat = typeof options.lat === 'number' ? options.lat : mapLat;
+        const lng = typeof options.lng === 'number' ? options.lng : mapLng;
+        const address = options.address || null;
+
         const zoom = parseInt(document.getElementById('mapZoom')?.value) || 15;
-        const markerTitle = document.getElementById('mapMarkerTitle')?.value || address || 'Location';
-        
+        const locationInputValue = sanitizeLocationInput(document.getElementById('mapLocation')?.value || '');
+        const markerTitle = document.getElementById('mapMarkerTitle')?.value || address || locationInputValue || 'Location';
+        const embedUrl = extractEmbedUrl(document.getElementById('mapEmbedUrl')?.value || '');
+
+        const caption = '<div class="mt-2 text-center">' +
+            '<small class="text-muted">Location: ' + escapeHtml(markerTitle) + '</small>' +
+            '</div>';
+
+        if (embedUrl) {
+            mapPreview.innerHTML = '<iframe ' +
+                'width="100%" ' +
+                'height="100%" ' +
+                'style="border:0; border-radius: 4px;" ' +
+                'src="' + embedUrl + '" ' +
+                'frameborder="0" allowfullscreen="" loading="lazy">' +
+                '</iframe>' +
+                caption;
+            return;
+        }
+
+        if (!lat || !lng) {
+            mapPreview.innerHTML = 'Enter location above to see map preview';
+            return;
+        }
+
         // Calculate bbox for proper zoom - smaller bbox = more zoomed in
         // For zoom level 15, use approximately 0.01 degree = ~1km
         const zoomDelta = {
@@ -491,45 +978,50 @@
             17: 0.00075,
             18: 0.000375
         };
-        
+
         const delta = zoomDelta[zoom] || 0.003;
         const latDelta = delta;
         const lngDelta = delta * 1.5; // Adjust for latitude
-        
-        mapPreview.innerHTML = `
-            <iframe 
-                width="100%" 
-                height="100%" 
-                style="border:0; border-radius: 4px;" 
-                src="https://www.openstreetmap.org/export/embed.html?bbox=${lng-lngDelta},${lat-latDelta},${lng+lngDelta},${lat+latDelta}&layer=mapnik&marker=${lat},${lng}"
-                frameborder="0">
-            </iframe>
-            <div class="mt-2 text-center">
-                <small class="text-muted">📍 ${markerTitle}</small>
-            </div>
-        `;
+
+        mapPreview.innerHTML = '<iframe ' +
+            'width="100%" ' +
+            'height="100%" ' +
+            'style="border:0; border-radius: 4px;" ' +
+            'src="https://www.openstreetmap.org/export/embed.html?bbox=' + (lng - lngDelta) + ',' + (lat - latDelta) + ',' + (lng + lngDelta) + ',' + (lat + latDelta) + '&layer=mapnik&marker=' + lat + ',' + lng + '" ' +
+            'frameborder="0">' +
+            '</iframe>' +
+            caption;
+    }
+
+    function escapeHtml(value) {
+        return String(value || '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
     }
 
     async function geocodeLocation(address) {
         const mapPreview = document.getElementById('mapPreview');
         if (!mapPreview) return;
-        
+
         try {
             mapPreview.innerHTML = '<div class="text-center p-4"><i class="fas fa-spinner fa-spin me-2"></i>Finding location...</div>';
-            
+
             // Use Nominatim API (free, no key required)
             const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}&limit=1`);
             const data = await response.json();
-            
+
             if (data && data.length > 0) {
                 const result = data[0];
                 const lat = parseFloat(result.lat);
                 const lng = parseFloat(result.lon);
-                
+
                 // Update hidden fields
                 document.getElementById('mapLat').value = lat;
                 document.getElementById('mapLng').value = lng;
-                
+
                 // Show map preview with proper zoom
                 showMapPreview(lat, lng, address);
             } else {
@@ -610,30 +1102,30 @@
                         if (previewImg) {
                             previewImg.src = previewUrl;
                             previewImg.style.display = 'block';
-                    }
-                } else {
-                    // Handle other image previews
-                    let card = input.closest('.card');
-                    let previewImg = card ? card.querySelector('img') : null;
-
-                    if (!previewImg) {
-                        const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
-                        previewImg = parent ? parent.querySelector('.uploaded-preview') : null;
-                    }
-
-                    if (previewImg) {
-                        previewImg.src = previewUrl;
-                        previewImg.style.display = 'block';
+                        }
                     } else {
-                        const img = document.createElement('img');
-                        img.src = previewUrl;
-                        img.className = 'img-thumbnail uploaded-preview mt-2';
-                        img.style.height = '150px';
-                        img.style.width = '100%';
-                        img.style.objectFit = 'cover';
+                        // Handle other image previews
+                        let card = input.closest('.card');
+                        let previewImg = card ? card.querySelector('img') : null;
 
-                        const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
-                        if (parent) parent.appendChild(img);
+                        if (!previewImg) {
+                            const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
+                            previewImg = parent ? parent.querySelector('.uploaded-preview') : null;
+                        }
+
+                        if (previewImg) {
+                            previewImg.src = previewUrl;
+                            previewImg.style.display = 'block';
+                        } else {
+                            const img = document.createElement('img');
+                            img.src = previewUrl;
+                            img.className = 'img-thumbnail uploaded-preview mt-2';
+                            img.style.height = '150px';
+                            img.style.width = '100%';
+                            img.style.objectFit = 'cover';
+
+                            const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
+                            if (parent) parent.appendChild(img);
                         }
                     }
                 }
@@ -709,10 +1201,36 @@
         document.getElementById('mapJson').value = JSON.stringify(data.map || {});
         document.getElementById('formJson').value = JSON.stringify(data.form || {});
 
+        const mapEmbedUrlInput = document.getElementById('mapEmbedUrl');
+        if (mapEmbedUrlInput) {
+            mapEmbedUrlInput.value = data.map?.embedUrl || '';
+        }
+
         populateContactCardsFromData(data.contactCards || []);
         populateFormFieldsFromData(data.form?.fields || []);
     }
 
+    function extractEmbedUrl(raw) {
+        if (!raw) return '';
+        const trimmed = raw.trim();
+        const srcMatch = trimmed.match(/src\s*=\s*["']([^"']+)["']/i);
+        if (srcMatch && srcMatch[1]) return srcMatch[1].trim();
+        return trimmed;
+    }
+
+    function sanitizeLocationInput(raw) {
+        if (!raw) return '';
+        const trimmed = String(raw).trim();
+        if (!trimmed) return '';
+        if (/leaflet-container|leaflet-touch|leaflet-fade-anim|leaflet-grab|leaflet-touch-drag|leaflet-touch-zoom/i.test(trimmed)) {
+            return '';
+        }
+        if (/<[^>]+>/.test(trimmed)) {
+            return trimmed.replace(/<[^>]+>/g, '').trim();
+        }
+        return trimmed;
+    }
+
     function addContactCard() {
         const container = document.getElementById('contactCardsContainer');
         const index = container.children.length;
@@ -811,12 +1329,12 @@
     </div>
   `;
         container.insertAdjacentHTML('beforeend', html);
-        
+
         // Initialize upload button for new card
         const newCard = container.lastElementChild;
         const uploadBtn = newCard.querySelector('.btn-upload-image');
         if (uploadBtn) {
-            uploadBtn.addEventListener('click', function() {
+            uploadBtn.addEventListener('click', function () {
                 const targetInput = this.dataset.targetInput;
                 const imageType = this.dataset.imageType;
                 openImageUploader(targetInput, imageType);
@@ -829,7 +1347,7 @@
         const source = radio.value;
         const faContainer = document.querySelector(`.icon-fa-container[data-index="${index}"]`);
         const imageContainer = document.querySelector(`.icon-image-container[data-index="${index}"]`);
-        
+
         if (source === 'fontawesome') {
             if (faContainer) faContainer.style.display = 'block';
             if (imageContainer) imageContainer.style.display = 'none';
@@ -843,7 +1361,7 @@
         const index = select.dataset.index;
         const iconClass = select.value;
         const preview = document.querySelector(`.fa-icon-preview[data-index="${index}"]`);
-        
+
         if (preview) {
             if (iconClass) {
                 preview.innerHTML = `<i class="${iconClass} fa-2x text-primary"></i>`;
@@ -894,6 +1412,9 @@
             <input type="text" class="form-control" name="fieldProgrammeName_${index}" placeholder="e.g., Summer Camp 2024">
             <small class="text-muted">Internal name for the programme</small>
           </div>
+          <!-- Hidden fields for label and colClass -->
+          <input type="hidden" name="fieldLabel_${index}" value="">
+          <input type="hidden" name="fieldColClass_${index}" value="col-lg-12">
         </div>
         <button type="button" class="btn btn-outline-danger btn-sm mt-3" onclick="removeFormField(this)">
           <i class="fas fa-trash me-2"></i>Remove Field
@@ -914,7 +1435,7 @@
         const fieldItem = selectElement.closest('.form-field-item');
         const labelInput = fieldItem.querySelector(`[name="fieldName_${index}"]`);
         const programmeNameField = fieldItem.querySelector('.programme-name-field');
-        
+
         if (fieldType === 'programme') {
             // Auto-generate label for programme field
             if (labelInput && (!labelInput.value || labelInput.value.trim() === '')) {
@@ -939,7 +1460,7 @@
             const heroTitleClassEl = document.getElementById('heroTitleClass');
             const heroEnableScrollspyEl = document.getElementById('heroEnableScrollspy');
             const heroBackgroundPositionEl = document.getElementById('heroBackgroundPosition');
-            
+
             const heroData = {
                 title: (document.getElementById('heroTitle') || {}).value?.trim() || '',
                 backgroundImage: (document.getElementById('heroBackgroundImage') || {}).value?.trim() || '',
@@ -961,16 +1482,16 @@
                     const titleEl = item.querySelector('[name^="cardTitle_"]');
                     const contentEl = item.querySelector('[name^="cardContent_"]');
                     const content = (contentEl?.value || '').split('\n').filter(line => line.trim() !== '');
-                    
+
                     const iconSource = (iconSourceRadio?.value || 'fontawesome');
                     let iconType = '';
-                    
+
                     if (iconSource === 'fontawesome') {
                         iconType = (faIconEl?.value || '').trim();
                     } else {
                         iconType = (imageIconEl?.value || '').trim();
                     }
-                    
+
                     return {
                         type: (typeEl?.value || '').trim(),
                         iconType: iconType,
@@ -983,14 +1504,17 @@
             document.getElementById('contactCardsJson').value = JSON.stringify(contactCardsData);
 
             // Map
+            const rawLocation = (document.getElementById('mapLocation') || {}).value?.trim() || '';
+            const cleanedLocation = sanitizeLocationInput(rawLocation) || originalFormData?.map?.location || '';
             const mapData = {
                 coordinates: {
                     lat: parseFloat((document.getElementById('mapLat') || {}).value) || 0,
                     lng: parseFloat((document.getElementById('mapLng') || {}).value) || 0
                 },
                 zoom: parseInt((document.getElementById('mapZoom') || {}).value) || 15,
-                location: (document.getElementById('mapLocation') || {}).value?.trim() || '',
+                location: cleanedLocation,
                 markerTitle: (document.getElementById('mapMarkerTitle') || {}).value?.trim() || '',
+                embedUrl: (document.getElementById('mapEmbedUrl') || {}).value?.trim() || '',
                 tileLayer: {
                     url: (document.getElementById('tileLayerUrl') || {}).value?.trim() || '',
                     attribution: (document.getElementById('tileLayerAttribution') || {}).value?.trim() || '',
@@ -1002,35 +1526,50 @@
 
             // Form
             const formFieldsData = Array.from(document.querySelectorAll('.form-field-item'))
-                .map((item) => {
+                .map((item, idx) => {
                     const nameEl = item.querySelector('[name^="fieldName_"]');
+                    const labelEl = item.querySelector('[name^="fieldLabel_"]');
                     const typeEl = item.querySelector('[name^="fieldType_"]');
                     const placeholderEl = item.querySelector('[name^="fieldPlaceholder_"]');
                     const requiredEl = item.querySelector('[name^="fieldRequired_"]');
+                    const colClassEl = item.querySelector('[name^="fieldColClass_"]');
                     const programmeNameEl = item.querySelector('[name^="fieldProgrammeName_"]');
-                    
+
+                    // Get original field data if exists
+                    const originalField = originalFormData?.form?.fields?.[idx] || {};
+
                     const fieldData = {
                         name: (nameEl?.value || '').trim(),
-                        type: (typeEl?.value || '').trim(),
+                        label: (labelEl?.value || '').trim() || originalField.label || '',
+                        type: (typeEl?.value || '').trim() || originalField.type || 'text',
                         placeholder: (placeholderEl?.value || '').trim(),
-                        required: (requiredEl?.checked || false)
+                        required: (requiredEl?.checked || false),
+                        colClass: (colClassEl?.value || '').trim() || originalField.colClass || 'col-lg-12'
                     };
-                    
+
+                    console.log(`Field ${idx} (${fieldData.name}): colClassInput='${colClassEl?.value}', original='${originalField.colClass}', FINAL='${fieldData.colClass}'`);
+
                     // Add programmeName if field type is programme
                     if (fieldData.type === 'programme' && programmeNameEl) {
                         fieldData.programmeName = (programmeNameEl?.value || '').trim();
                     }
-                    
+
                     return fieldData;
                 })
                 .filter(field => field.name !== '');
 
+            // Get original form data
+            const originalForm = originalFormData?.form || {};
+
             const formData = {
                 sectionLabel: (document.getElementById('formSectionLabel') || {}).value?.trim() || '',
                 heading: (document.getElementById('formHeading') || {}).value?.trim() || '',
+                description: (document.getElementById('formDescription') || {}).value?.trim() || originalForm.description || '',
                 fields: formFieldsData,
                 submitButton: {
-                    text: (document.getElementById('formSubmitButtonText') || {}).value?.trim() || 'Send Message'
+                    text: (document.getElementById('formSubmitButtonText') || {}).value?.trim() || 'Send Message',
+                    icon: (document.getElementById('formSubmitButtonIcon') || {}).value?.trim() || originalForm.submitButton?.icon || 'fa-solid fa-arrow-right',
+                    buttonClass: (document.getElementById('formSubmitButtonClass') || {}).value?.trim() || originalForm.submitButton?.buttonClass || 'theme-btn style-2'
                 }
             };
             document.getElementById('formJson').value = JSON.stringify(formData);
@@ -1047,16 +1586,16 @@
         (cards || []).forEach((card, i) => {
             addContactCard();
             const el = container.lastElementChild;
-            
+
             // Set basic fields
             el.querySelector(`[name="cardType_${i}"]`).value = card.type || '';
             el.querySelector(`[name="cardTitle_${i}"]`).value = card.title || '';
             el.querySelector(`[name="cardContent_${i}"]`).value = (card.content || []).join('\n');
-            
+
             // Determine icon source
             const iconType = card.iconType || '';
             const iconSource = card.iconSource || (iconType && iconType.startsWith('/uploads/') ? 'image' : 'fontawesome');
-            
+
             // Set icon source radio button
             const faRadio = el.querySelector(`#iconSource_fa_${i}`);
             const imgRadio = el.querySelector(`#iconSource_img_${i}`);
@@ -1067,7 +1606,7 @@
                 if (faRadio) faRadio.checked = true;
                 handleIconSourceChange(faRadio);
             }
-            
+
             // Set icon value based on source
             if (iconSource === 'fontawesome') {
                 const faSelect = el.querySelector(`[name="cardFaIcon_${i}"]`);
@@ -1079,13 +1618,13 @@
                 const imageInput = el.querySelector(`[name="cardIconImage_${i}"]`);
                 if (imageInput && iconType) {
                     imageInput.value = iconType;
-                    
+
                     // Show preview image
                     const previewImg = el.querySelector(`.icon-image-preview[data-index="${i}"]`);
                     if (previewImg) {
-                    const previewUrl = (iconType.startsWith('http://') || iconType.startsWith('https://')) 
-                        ? iconType 
-                        : (window.location.origin + iconType);
+                        const previewUrl = (iconType.startsWith('http://') || iconType.startsWith('https://'))
+                            ? iconType
+                            : (window.location.origin + iconType);
                         previewImg.src = previewUrl;
                         previewImg.style.display = 'block';
                     }
@@ -1104,14 +1643,18 @@
             el.querySelector(`[name="fieldType_${i}"]`).value = field.type || '';
             el.querySelector(`[name="fieldPlaceholder_${i}"]`).value = field.placeholder || '';
             el.querySelector(`[name="fieldRequired_${i}"]`).checked = field.required || false;
-            
+            const labelEl = el.querySelector(`[name="fieldLabel_${i}"]`);
+            if (labelEl) labelEl.value = field.label || '';
+            const colClassEl = el.querySelector(`[name="fieldColClass_${i}"]`);
+            if (colClassEl) colClassEl.value = field.colClass || 'col-lg-12';
+
             // Handle programme type - show/hide programme name field and set value
             if (field.type === 'programme') {
                 const typeSelect = el.querySelector(`[name="fieldType_${i}"]`);
                 if (typeSelect) {
                     handleFieldTypeChange(typeSelect);
                 }
-                
+
                 const programmeNameInput = el.querySelector(`[name="fieldProgrammeName_${i}"]`);
                 if (programmeNameInput && field.programmeName) {
                     programmeNameInput.value = field.programmeName || '';
@@ -1119,5 +1662,4 @@
             }
         });
     }
-</script>
-
+</script>
\ No newline at end of file
diff --git a/views/admin/dashboard.ejs b/views/admin/dashboard.ejs
index 9fb5879..d6a9534 100644
--- a/views/admin/dashboard.ejs
+++ b/views/admin/dashboard.ejs
@@ -11,18 +11,9 @@
         <div class="col-md-4 border-end">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-home fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-home fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Home</h5>
@@ -38,18 +29,9 @@
         <div class="col-md-4 border-end">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-bars fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-bars fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Header & Menu</h5>
@@ -65,18 +47,9 @@
         <div class="col-md-4">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-window-minimize fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-window-minimize fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Footer</h5>
@@ -92,18 +65,9 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-users fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">About Us</h5>
@@ -119,18 +83,9 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-envelope fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-envelope fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Contact</h5>
@@ -146,18 +101,9 @@
         <div class="col-md-4 border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-question-circle fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-question-circle fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">FAQ</h5>
@@ -173,18 +119,45 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-file-contract fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-calendar-check fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Appointment</h5>
+                <p class="text-muted mb-0 small">Manage appointment page</p>
+              </div>
+            </div>
+            <a href="/admin/appointment" class="btn btn-sm btn-primary w-100 mt-2">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4">
+            <div class="d-flex align-items-center mb-3">
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-tags fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Pricing</h5>
+                <p class="text-muted mb-0 small">Manage pricing page</p>
+              </div>
+            </div>
+            <a href="/admin/pricing" class="btn btn-sm btn-primary w-100 mt-2">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4">
+            <div class="d-flex align-items-center mb-3">
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-file-contract fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Terms & Conditions</h5>
@@ -203,18 +176,9 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-plane fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-plane fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Travel</h5>
@@ -230,18 +194,9 @@
         <div class="col-md-4 border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-shield-alt fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-shield-alt fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Safety</h5>
@@ -257,18 +212,9 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-campground fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-campground fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Camp Location</h5>
@@ -287,18 +233,9 @@
         <div class="col-md-4 border-end border-top">
           <div class="p-4">
             <div class="d-flex align-items-center mb-3">
-              <div
-                class="rounded-circle d-flex align-items-center justify-content-center me-3"
-                style="
-                  width: 50px;
-                  height: 50px;
-                  background-color: rgba(184, 183, 106, 0.1);
-                "
-              >
-                <i
-                  class="fas fa-running fa-lg"
-                  style="color: var(--primary-color)"
-                ></i>
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-running fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
                 <h5 class="mb-0">Activities</h5>
@@ -362,18 +299,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-bars"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-bars" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Menu Header API</span>
                 </div>
@@ -400,18 +328,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-home"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-home" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Home API</span>
                 </div>
@@ -438,18 +357,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-info-circle"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
                   </div>
                   <span>About API</span>
                 </div>
@@ -476,18 +386,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-users"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-users" style="color: var(--primary-color);"></i>
                   </div>
                   <span>About Us API</span>
                 </div>
@@ -514,18 +415,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-question-circle"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-question-circle" style="color: var(--primary-color);"></i>
                   </div>
                   <span>FAQ API</span>
                 </div>
@@ -552,18 +444,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-file-contract"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-file-contract" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Terms & Conditions API</span>
                 </div>
@@ -590,18 +473,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-plane"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-plane" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Travel API</span>
                 </div>
@@ -628,18 +502,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-shield-alt"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-shield-alt" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Safety API</span>
                 </div>
@@ -666,18 +531,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-campground"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-campground" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Camp Location API</span>
                 </div>
@@ -705,18 +561,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-sitemap"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-sitemap" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Menu Tree API</span>
                 </div>
@@ -743,18 +590,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-envelope"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-envelope" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Contact API</span>
                 </div>
@@ -781,56 +619,9 @@
             <tr>
               <td>
                 <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-envelope"
-                      style="color: var(--primary-color)"
-                    ></i>
-                  </div>
-                  <span>Service API</span>
-                </div>
-              </td>
-              <td><code>/api/service</code></td>
-              <td>
-                <span
-                  class="badge"
-                  style="background-color: var(--primary-color)"
-                  >GET</span
-                >
-              </td>
-              <td>API to get service data</td>
-              <td>
-                <a
-                  href="/api/service"
-                  class="btn btn-sm btn-outline-primary"
-                  target="_blank"
-                >
-                  <i class="fas fa-external-link-alt me-1"></i>View
-                </a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex align-items-center">
-                  <div
-                    class="rounded-circle d-flex align-items-center justify-content-center me-2"
-                    style="
-                      width: 32px;
-                      height: 32px;
-                      background-color: rgba(184, 183, 106, 0.1);
-                    "
-                  >
-                    <i
-                      class="fas fa-campground"
-                      style="color: var(--primary-color)"
-                    ></i>
+                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                    <i class="fas fa-campground" style="color: var(--primary-color);"></i>
                   </div>
                   <span>Camp Location API</span>
                 </div>
@@ -875,18 +666,9 @@
       <div class="row">
         <div class="col-md-6">
           <div class="d-flex align-items-center mb-3">
-            <div
-              class="rounded-circle d-flex align-items-center justify-content-center me-3"
-              style="
-                width: 40px;
-                height: 40px;
-                background-color: rgba(184, 183, 106, 0.1);
-              "
-            >
-              <i
-                class="fas fa-info-circle"
-                style="color: var(--primary-color)"
-              ></i>
+            <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+              style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
+              <i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
             </div>
             <div>
               <div class="text-muted small">Version</div>
@@ -899,19 +681,13 @@
 
         <div class="col-md-6">
           <div class="d-flex align-items-center mb-3">
-            <div
-              class="rounded-circle d-flex align-items-center justify-content-center me-3"
-              style="
-                width: 40px;
-                height: 40px;
-                background-color: rgba(184, 183, 106, 0.1);
-              "
-            >
-              <i class="fas fa-user" style="color: var(--primary-color)"></i>
+            <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+              style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
+              <i class="fas fa-user" style="color: var(--primary-color);"></i>
             </div>
             <div>
               <div class="text-muted small">Logged in as</div>
-              <div class="fw-bold" style="color: var(--primary-color)">
+              <div class="fw-bold" style="color: var(--primary-color);">
                 <%= user.username %>
               </div>
             </div>
@@ -919,14 +695,8 @@
         </div>
       </div>
 
-      <div
-        class="alert mt-3 mb-0"
-        style="
-          background-color: rgba(184, 183, 106, 0.05);
-          border-left: 4px solid var(--primary-color);
-        "
-        role="alert"
-      >
+      <div class="alert mt-3 mb-0"
+        style="background-color: rgba(184, 183, 106, 0.05); border-left: 4px solid var(--primary-color);" role="alert">
         <div class="d-flex">
           <div class="me-3">
             <i
@@ -983,4 +753,4 @@
     background-color: var(--primary-color) !important;
     color: white;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/views/admin/pricing/index.ejs b/views/admin/pricing/index.ejs
new file mode 100644
index 0000000..f21b487
--- /dev/null
+++ b/views/admin/pricing/index.ejs
@@ -0,0 +1,742 @@
+<div class="container">
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+        <div>
+            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
+                <%= title %>
+            </h1>
+            <p class="text-muted mb-0">Edit content displayed on Pricing page</p>
+        </div>
+        <div>
+            <a href="<%= frontendUrl %>/pricing/" class="btn btn-outline-primary" target="_blank">
+                <i class="fas fa-external-link-alt me-2"></i>View Pricing Page
+            </a>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <form method="POST" class="content-with-fixed-buttons" id="pricingForm" action="/admin/pricing/update">
+                <!-- Hidden inputs for JSON data -->
+                <input type="hidden" name="hero" id="heroJson">
+                <input type="hidden" name="pricingSection" id="pricingSectionJson">
+                <input type="hidden" name="plans" id="plansJson">
+                <input type="hidden" name="testimonials" id="testimonialsJson">
+
+                <!-- Navigation Tabs -->
+                <div class="card shadow-sm border-0 mb-4">
+                    <div class="card-header bg-white border-bottom">
+                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" data-bs-toggle="tab" href="#hero" role="tab">
+                                    <i class="fas fa-home me-2"></i>Hero
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#pricingSection" role="tab">
+                                    <i class="fas fa-tags me-2"></i>Pricing Section
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#plans" role="tab">
+                                    <i class="fas fa-dollar-sign me-2"></i>Plans
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#testimonials" role="tab">
+                                    <i class="fas fa-quote-right me-2"></i>Testimonials
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <!-- Hero Tab -->
+                            <div class="tab-pane fade show active" id="hero" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <h6 class="fw-medium mb-3">Hero Section</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-5">
+                                                <label class="form-label fw-medium">Background Image</label>
+                                                <div class="input-group mb-2">
+                                                    <input type="text" class="form-control" id="heroBackgroundImage"
+                                                        name="heroBackgroundImage"
+                                                        value="<%= data.hero?.backgroundImage || '' %>">
+                                                    <button type="button"
+                                                        class="btn btn-outline-primary btn-upload-image"
+                                                        data-target-input="heroBackgroundImage"
+                                                        data-image-type="pricing">
+                                                        <i class="fas fa-upload me-1"></i>Upload
+                                                    </button>
+                                                </div>
+                                                <small class="text-muted">Recommended size: 1920x1080px</small>
+                                            </div>
+                                            <div class="col-md-7">
+                                                <div id="heroImagePreview" style="height: 200px;">
+                                                    <% if (data.hero?.backgroundImage) { %>
+                                                        <% let heroImgSrc=data.hero.backgroundImage; if (heroImgSrc &&
+                                                            !heroImgSrc.startsWith('http://') &&
+                                                            !heroImgSrc.startsWith('https://')) {
+                                                            heroImgSrc=heroImgSrc.startsWith('/') ? heroImgSrc : '/' +
+                                                            heroImgSrc; } %>
+                                                            <img src="<%= heroImgSrc %>" class="img-thumbnail"
+                                                                id="heroPreviewImg"
+                                                                style="height: 200px; width: 100%; object-fit: cover;"
+                                                                alt="Background image preview"
+                                                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                                            <div class="border rounded p-5 text-center text-muted"
+                                                                style="height: 200px; display: none; align-items: center; justify-content: center;">
+                                                                Image preview
+                                                            </div>
+                                                            <% } else { %>
+                                                                <div class="border rounded p-5 text-center text-muted"
+                                                                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
+                                                                    Image preview
+                                                                </div>
+                                                                <% } %>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row g-3 mt-2">
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Title</label>
+                                                <input type="text" class="form-control" id="heroTitle" name="heroTitle"
+                                                    value="<%= data.hero?.title || '' %>">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Pricing Section Tab -->
+                            <div class="tab-pane fade" id="pricingSection" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <h6 class="fw-medium mb-3">Pricing Section Header</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Subtitle</label>
+                                                <input type="text" class="form-control" id="pricingSectionSubtitle"
+                                                    value="<%= data.pricingSection?.subtitle || '' %>">
+                                            </div>
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Heading</label>
+                                                <input type="text" class="form-control" id="pricingSectionHeading"
+                                                    value="<%= data.pricingSection?.heading || '' %>">
+                                            </div>
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Description</label>
+                                                <textarea class="form-control" id="pricingSectionDescription"
+                                                    rows="3"><%= data.pricingSection?.description || '' %></textarea>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Plans Tab -->
+                            <div class="tab-pane fade" id="plans" role="tabpanel">
+                                <!-- Monthly Plans -->
+                                <div class="card border shadow-sm mb-4">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Monthly Plans</h6>
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addPlan('monthly')">
+                                                <i class="fas fa-plus"></i> Add Plan
+                                            </button>
+                                        </div>
+                                        <div id="monthlyPlansContainer">
+                                            <% if (data.plans?.monthly && data.plans.monthly.length> 0) { %>
+                                                <% data.plans.monthly.forEach((plan, index)=> { %>
+                                                    <div class="card mb-3 plan-item" data-type="monthly">
+                                                        <div class="card-body">
+                                                            <div class="row g-3">
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Plan Name</label>
+                                                                    <input type="text" class="form-control plan-name"
+                                                                        value="<%= plan.name || '' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Price</label>
+                                                                    <input type="text" class="form-control plan-price"
+                                                                        value="<%= plan.price || '' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Currency</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-currency"
+                                                                        value="<%= plan.currency || '$' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Period</label>
+                                                                    <input type="text" class="form-control plan-period"
+                                                                        value="<%= plan.period || 'mo' %>">
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Style</label>
+                                                                    <select class="form-select plan-style">
+                                                                        <option value="default"
+                                                                            <%=plan.style==='default' ? 'selected' : ''
+                                                                            %>>Default</option>
+                                                                        <option value="style-2"
+                                                                            <%=plan.style==='style-2' ? 'selected' : ''
+                                                                            %>>Style 2 (Featured)</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Text</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-text"
+                                                                        value="<%= plan.buttonText || 'Get Started Today' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Link</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-link"
+                                                                        value="<%= plan.buttonLink || '/pricing' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Icon</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-icon"
+                                                                        value="<%= plan.buttonIcon || 'fa-solid fa-arrow-right' %>">
+                                                                </div>
+                                                                <div class="col-md-12">
+                                                                    <label class="form-label">Features (one per
+                                                                        line)</label>
+                                                                    <textarea class="form-control plan-features"
+                                                                        rows="4"><%= (plan.features || []).join('\n') %></textarea>
+                                                                </div>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-outline-danger btn-sm mt-3"
+                                                                onclick="removePlan(this)">
+                                                                <i class="fas fa-trash me-2"></i>Remove Plan
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Yearly Plans -->
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Yearly Plans</h6>
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addPlan('yearly')">
+                                                <i class="fas fa-plus"></i> Add Plan
+                                            </button>
+                                        </div>
+                                        <div id="yearlyPlansContainer">
+                                            <% if (data.plans?.yearly && data.plans.yearly.length> 0) { %>
+                                                <% data.plans.yearly.forEach((plan, index)=> { %>
+                                                    <div class="card mb-3 plan-item" data-type="yearly">
+                                                        <div class="card-body">
+                                                            <div class="row g-3">
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Plan Name</label>
+                                                                    <input type="text" class="form-control plan-name"
+                                                                        value="<%= plan.name || '' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Price</label>
+                                                                    <input type="text" class="form-control plan-price"
+                                                                        value="<%= plan.price || '' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Currency</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-currency"
+                                                                        value="<%= plan.currency || '$' %>">
+                                                                </div>
+                                                                <div class="col-md-2">
+                                                                    <label class="form-label">Period</label>
+                                                                    <input type="text" class="form-control plan-period"
+                                                                        value="<%= plan.period || 'mo' %>">
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <label class="form-label">Style</label>
+                                                                    <select class="form-select plan-style">
+                                                                        <option value="default"
+                                                                            <%=plan.style==='default' ? 'selected' : ''
+                                                                            %>>Default</option>
+                                                                        <option value="style-2"
+                                                                            <%=plan.style==='style-2' ? 'selected' : ''
+                                                                            %>>Style 2 (Featured)</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Text</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-text"
+                                                                        value="<%= plan.buttonText || 'Get Started Today' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Link</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-link"
+                                                                        value="<%= plan.buttonLink || '/pricing' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Button Icon</label>
+                                                                    <input type="text"
+                                                                        class="form-control plan-button-icon"
+                                                                        value="<%= plan.buttonIcon || 'fa-solid fa-arrow-right' %>">
+                                                                </div>
+                                                                <div class="col-md-12">
+                                                                    <label class="form-label">Features (one per
+                                                                        line)</label>
+                                                                    <textarea class="form-control plan-features"
+                                                                        rows="4"><%= (plan.features || []).join('\n') %></textarea>
+                                                                </div>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-outline-danger btn-sm mt-3"
+                                                                onclick="removePlan(this)">
+                                                                <i class="fas fa-trash me-2"></i>Remove Plan
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Testimonials Tab -->
+                            <div class="tab-pane fade" id="testimonials" role="tabpanel">
+                                <div class="card border shadow-sm mb-4">
+                                    <div class="card-body">
+                                        <h6 class="fw-medium mb-3">Testimonials Section Header</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Subtitle</label>
+                                                <input type="text" class="form-control" id="testimonialsSubtitle"
+                                                    value="<%= data.testimonials?.subtitle || '' %>">
+                                            </div>
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Heading</label>
+                                                <input type="text" class="form-control" id="testimonialsHeading"
+                                                    value="<%= data.testimonials?.heading || '' %>">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label class="form-label fw-medium">Button Text</label>
+                                                <input type="text" class="form-control" id="testimonialsButtonText"
+                                                    value="<%= data.testimonials?.buttonText || '' %>">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label class="form-label fw-medium">Button Link</label>
+                                                <input type="text" class="form-control" id="testimonialsButtonLink"
+                                                    value="<%= data.testimonials?.buttonLink || '' %>">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label class="form-label fw-medium">Section Image</label>
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" id="testimonialsImage"
+                                                        value="<%= data.testimonials?.image || '' %>">
+                                                    <button type="button"
+                                                        class="btn btn-outline-primary btn-upload-image"
+                                                        data-target-input="testimonialsImage" data-image-type="pricing">
+                                                        <i class="fas fa-upload"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="d-flex justify-content-between align-items-center mb-3">
+                                            <h6 class="fw-medium mb-0">Testimonial Items</h6>
+                                            <button type="button" class="btn btn-primary btn-sm"
+                                                onclick="addTestimonial()">
+                                                <i class="fas fa-plus"></i> Add Testimonial
+                                            </button>
+                                        </div>
+                                        <div id="testimonialsContainer">
+                                            <% if (data.testimonials?.items && data.testimonials.items.length> 0) { %>
+                                                <% data.testimonials.items.forEach((item, index)=> { %>
+                                                    <div class="card mb-3 testimonial-item">
+                                                        <div class="card-body">
+                                                            <div class="row g-3">
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Name</label>
+                                                                    <input type="text"
+                                                                        class="form-control testimonial-name"
+                                                                        value="<%= item.name || '' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Role/Type</label>
+                                                                    <input type="text"
+                                                                        class="form-control testimonial-role"
+                                                                        value="<%= item.role || '' %>">
+                                                                </div>
+                                                                <div class="col-md-4">
+                                                                    <label class="form-label">Rating</label>
+                                                                    <select class="form-select testimonial-rating">
+                                                                        <option value="1" <%=item.rating===1
+                                                                            ? 'selected' : '' %>>1 Star</option>
+                                                                        <option value="2" <%=item.rating===2
+                                                                            ? 'selected' : '' %>>2 Stars</option>
+                                                                        <option value="3" <%=item.rating===3
+                                                                            ? 'selected' : '' %>>3 Stars</option>
+                                                                        <option value="4" <%=item.rating===4
+                                                                            ? 'selected' : '' %>>4 Stars</option>
+                                                                        <option value="5" <%=item.rating===5
+                                                                            ? 'selected' : '' %>>5 Stars</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col-md-12">
+                                                                    <label class="form-label">Content</label>
+                                                                    <textarea class="form-control testimonial-content"
+                                                                        rows="3"><%= item.content || '' %></textarea>
+                                                                </div>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-outline-danger btn-sm mt-3"
+                                                                onclick="removeTestimonial(this)">
+                                                                <i class="fas fa-trash me-2"></i>Remove Testimonial
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <% }); %>
+                                                        <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Fixed Bottom Buttons -->
+                <div class="fixed-bottom-buttons">
+                    <button type="reset" class="btn btn-secondary" onclick="resetForm()">
+                        <i class="fas fa-undo me-2"></i>Reset
+                    </button>
+                    <button type="submit" class="btn btn-primary" id="submitBtn">
+                        <i class="fas fa-save me-2"></i>Save Changes
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script type="application/json" id="pricingDataJson"><%- JSON.stringify(data) %></script>
+
+<script>
+    let originalFormData = null;
+
+    document.addEventListener('DOMContentLoaded', function () {
+        try {
+            var jsonScript = document.getElementById('pricingDataJson');
+            originalFormData = JSON.parse(jsonScript.textContent);
+        } catch (e) {
+            console.error('Error parsing originalFormData:', e);
+            originalFormData = {};
+        }
+        updateAllJsonInputs();
+        initializeFormHandlers();
+    });
+
+    function initializeFormHandlers() {
+        const form = document.getElementById('pricingForm');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+            const submitBtn = document.getElementById('submitBtn');
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
+
+            try {
+                updateJsonData();
+                this.submit();
+            } catch (error) {
+                console.error('Error updating data:', error);
+                alert('Failed to process form data. Please try again.');
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
+            }
+        });
+
+        // Image upload buttons
+        document.querySelectorAll('.btn-upload-image').forEach(button => {
+            button.addEventListener('click', function () {
+                const targetInput = this.dataset.targetInput;
+                const imageType = this.dataset.imageType;
+                openImageUploader(targetInput, imageType);
+            });
+        });
+
+        // Update preview when background image changes
+        document.getElementById('heroBackgroundImage').addEventListener('input', function () {
+            updateHeroImagePreview(this.value);
+        });
+    }
+
+    function updateHeroImagePreview(imagePath) {
+        const previewContainer = document.getElementById('heroImagePreview');
+        if (imagePath) {
+            let imgSrc = imagePath;
+            if (!imgSrc.startsWith('http://') && !imgSrc.startsWith('https://')) {
+                imgSrc = imgSrc.startsWith('/') ? imgSrc : '/' + imgSrc;
+            }
+            previewContainer.innerHTML = `
+                <img src="${imgSrc}" class="img-thumbnail" id="heroPreviewImg"
+                    style="height: 200px; width: 100%; object-fit: cover;"
+                    alt="Background image preview"
+                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="border rounded p-5 text-center text-muted"
+                    style="height: 200px; display: none; align-items: center; justify-content: center;">
+                    Image preview
+                </div>
+            `;
+        } else {
+            previewContainer.innerHTML = `
+                <div class="border rounded p-5 text-center text-muted"
+                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
+                    Image preview
+                </div>
+            `;
+        }
+    }
+
+    function updateAllJsonInputs() {
+        updateJsonData();
+    }
+
+    function updateJsonData() {
+        // Hero data
+        const heroData = {
+            title: document.getElementById('heroTitle').value || '',
+            backgroundImage: document.getElementById('heroBackgroundImage').value || '',
+            shapeImage: originalFormData?.hero?.shapeImage || '/assets/img/inner-page/shape.png',
+            breadcrumb: originalFormData?.hero?.breadcrumb || [],
+        };
+        document.getElementById('heroJson').value = JSON.stringify(heroData);
+
+        // Pricing Section data
+        const pricingSectionData = {
+            subtitle: document.getElementById('pricingSectionSubtitle').value || '',
+            heading: document.getElementById('pricingSectionHeading').value || '',
+            description: document.getElementById('pricingSectionDescription').value || '',
+        };
+        document.getElementById('pricingSectionJson').value = JSON.stringify(pricingSectionData);
+
+        // Plans data
+        const monthlyPlans = [];
+        document.querySelectorAll('#monthlyPlansContainer .plan-item').forEach(item => {
+            const featuresText = item.querySelector('.plan-features').value || '';
+            monthlyPlans.push({
+                name: item.querySelector('.plan-name').value || '',
+                price: item.querySelector('.plan-price').value || '0',
+                currency: item.querySelector('.plan-currency').value || '$',
+                period: item.querySelector('.plan-period').value || 'mo',
+                style: item.querySelector('.plan-style').value || 'default',
+                buttonText: item.querySelector('.plan-button-text').value || 'Get Started Today',
+                buttonLink: item.querySelector('.plan-button-link').value || '/pricing',
+                buttonIcon: item.querySelector('.plan-button-icon').value || 'fa-solid fa-arrow-right',
+                features: featuresText.split('\n').filter(f => f.trim()),
+            });
+        });
+
+        const yearlyPlans = [];
+        document.querySelectorAll('#yearlyPlansContainer .plan-item').forEach(item => {
+            const featuresText = item.querySelector('.plan-features').value || '';
+            yearlyPlans.push({
+                name: item.querySelector('.plan-name').value || '',
+                price: item.querySelector('.plan-price').value || '0',
+                currency: item.querySelector('.plan-currency').value || '$',
+                period: item.querySelector('.plan-period').value || 'mo',
+                style: item.querySelector('.plan-style').value || 'default',
+                buttonText: item.querySelector('.plan-button-text').value || 'Get Started Today',
+                buttonLink: item.querySelector('.plan-button-link').value || '/pricing',
+                buttonIcon: item.querySelector('.plan-button-icon').value || 'fa-solid fa-arrow-right',
+                features: featuresText.split('\n').filter(f => f.trim()),
+            });
+        });
+
+        document.getElementById('plansJson').value = JSON.stringify({
+            monthly: monthlyPlans,
+            yearly: yearlyPlans,
+        });
+
+        // Testimonials data
+        const testimonialItems = [];
+        document.querySelectorAll('#testimonialsContainer .testimonial-item').forEach(item => {
+            testimonialItems.push({
+                name: item.querySelector('.testimonial-name').value || '',
+                role: item.querySelector('.testimonial-role').value || '',
+                rating: parseInt(item.querySelector('.testimonial-rating').value) || 5,
+                content: item.querySelector('.testimonial-content').value || '',
+            });
+        });
+
+        const testimonialsData = {
+            subtitle: document.getElementById('testimonialsSubtitle').value || '',
+            heading: document.getElementById('testimonialsHeading').value || '',
+            buttonText: document.getElementById('testimonialsButtonText').value || '',
+            buttonLink: document.getElementById('testimonialsButtonLink').value || '',
+            buttonIcon: originalFormData?.testimonials?.buttonIcon || 'fa-solid fa-arrow-right',
+            image: document.getElementById('testimonialsImage').value || '',
+            items: testimonialItems,
+        };
+        document.getElementById('testimonialsJson').value = JSON.stringify(testimonialsData);
+    }
+
+    function addPlan(type) {
+        const container = document.getElementById(type + 'PlansContainer');
+        const html = `
+            <div class="card mb-3 plan-item" data-type="${type}">
+                <div class="card-body">
+                    <div class="row g-3">
+                        <div class="col-md-3">
+                            <label class="form-label">Plan Name</label>
+                            <input type="text" class="form-control plan-name" value="">
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Price</label>
+                            <input type="text" class="form-control plan-price" value="">
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Currency</label>
+                            <input type="text" class="form-control plan-currency" value="$">
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label">Period</label>
+                            <input type="text" class="form-control plan-period" value="mo">
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label">Style</label>
+                            <select class="form-select plan-style">
+                                <option value="default" selected>Default</option>
+                                <option value="style-2">Style 2 (Featured)</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Button Text</label>
+                            <input type="text" class="form-control plan-button-text" value="Get Started Today">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Button Link</label>
+                            <input type="text" class="form-control plan-button-link" value="/pricing">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Button Icon</label>
+                            <input type="text" class="form-control plan-button-icon" value="fa-solid fa-arrow-right">
+                        </div>
+                        <div class="col-md-12">
+                            <label class="form-label">Features (one per line)</label>
+                            <textarea class="form-control plan-features" rows="4"></textarea>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-outline-danger btn-sm mt-3" onclick="removePlan(this)">
+                        <i class="fas fa-trash me-2"></i>Remove Plan
+                    </button>
+                </div>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', html);
+    }
+
+    function removePlan(button) {
+        if (confirm('Are you sure you want to remove this plan?')) {
+            button.closest('.plan-item').remove();
+        }
+    }
+
+    function addTestimonial() {
+        const container = document.getElementById('testimonialsContainer');
+        const html = `
+            <div class="card mb-3 testimonial-item">
+                <div class="card-body">
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label class="form-label">Name</label>
+                            <input type="text" class="form-control testimonial-name" value="">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Role/Type</label>
+                            <input type="text" class="form-control testimonial-role" value="">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Rating</label>
+                            <select class="form-select testimonial-rating">
+                                <option value="1">1 Star</option>
+                                <option value="2">2 Stars</option>
+                                <option value="3">3 Stars</option>
+                                <option value="4">4 Stars</option>
+                                <option value="5" selected>5 Stars</option>
+                            </select>
+                        </div>
+                        <div class="col-md-12">
+                            <label class="form-label">Content</label>
+                            <textarea class="form-control testimonial-content" rows="3"></textarea>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-outline-danger btn-sm mt-3" onclick="removeTestimonial(this)">
+                        <i class="fas fa-trash me-2"></i>Remove Testimonial
+                    </button>
+                </div>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', html);
+    }
+
+    function removeTestimonial(button) {
+        if (confirm('Are you sure you want to remove this testimonial?')) {
+            button.closest('.testimonial-item').remove();
+        }
+    }
+
+    function resetForm() {
+        if (confirm('Are you sure you want to reset all changes?')) {
+            location.reload();
+        }
+    }
+
+    // Image uploader function
+    function openImageUploader(targetInput, imageType) {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = async function (e) {
+            const file = e.target.files[0];
+            if (!file) return;
+
+            const formData = new FormData();
+            formData.append('image', file);
+
+            try {
+                // Send imageType via query string as controller expects req.query.imageType
+                const uploadUrl = '/admin/upload/image?imageType=' + encodeURIComponent(imageType || 'general');
+                const response = await fetch(uploadUrl, {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+                if (result.success && result.path) {
+                    document.getElementById(targetInput).value = result.path;
+                    if (targetInput === 'heroBackgroundImage') {
+                        updateHeroImagePreview(result.path);
+                    }
+                } else {
+                    alert('Upload failed: ' + (result.error || 'Unknown error'));
+                }
+            } catch (error) {
+                console.error('Upload error:', error);
+                alert('Upload failed. Please try again.');
+            }
+        };
+        input.click();
+    }
+</script>
\ No newline at end of file
diff --git a/views/layouts/admin.ejs b/views/layouts/admin.ejs
index b7d2db4..01eca05 100644
--- a/views/layouts/admin.ejs
+++ b/views/layouts/admin.ejs
@@ -1,122 +1,119 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link rel="icon" type="image/png" href="/uploads/layout/favicon.png" />
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>
-      <%= typeof title !=='undefined' ? title + ' | ' : '' %>CMS-GGCamp
-    </title>
-    <!-- Bootstrap CSS -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
-    <!-- Font Awesome -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
-    <style>
-      :root {
-        --primary-color: #b8b76a;
-        --primary-light: #c9c88a;
-        --primary-dark: #9a994a;
-      }
-      
-      .btn-primary {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color);
-        color: white;
-      }
-      
-      .btn-primary:hover {
-        background-color: var(--primary-dark);
-        border-color: var(--primary-dark);
-      }
-      
-      .nav-link:hover {
-        color: var(--primary-color);
-      }
-      
-      .nav-link.active {
-        color: var(--primary-color);
-        font-weight: 600;
-      }
-    </style>
-    <%- style %>
-  </head>
 
-  <body>
-    <div class="container-fluid">
-      <div class="row">
-        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
-          <div class="position-sticky pt-3">
-            <ul class="nav flex-column">
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/dashboard">Dashboard</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/home">Home</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/header">Header & Menu</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/footer">Footer</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/about">About</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/about-us">About Us</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/contact">Contact</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/faq">FAQ</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/terms-conditions">Terms & Conditions</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/safety">Safety</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/camp-location">Camp Location</a>
-              </li>
-              <li class="nav-item">
-                
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/form">Form</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/admin/upload">Upload</a>
-              </li>
-            </ul>
-          </div>
-        </nav>
+<head>
+  <link rel="icon" type="image/png" href="/uploads/layout/favicon.png" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>
+    <%= typeof title !=='undefined' ? title + ' | ' : '' %>CMS-GGCamp
+  </title>
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+  <style>
+    :root {
+      --primary-color: #b8b76a;
+      --primary-light: #c9c88a;
+      --primary-dark: #9a994a;
+    }
 
-        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-          <!-- Flash Messages Data (Hidden) -->
-          <% if(typeof success_msg !=='undefined' || typeof error_msg
-          !=='undefined' || typeof error !=='undefined' ) { %>
+    .btn-primary {
+      background-color: var(--primary-color);
+      border-color: var(--primary-color);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background-color: var(--primary-dark);
+      border-color: var(--primary-dark);
+    }
+
+    .nav-link:hover {
+      color: var(--primary-color);
+    }
+
+    .nav-link.active {
+      color: var(--primary-color);
+      font-weight: 600;
+    }
+  </style>
+  <%- style %>
+</head>
+
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+        <div class="position-sticky pt-3">
+          <ul class="nav flex-column">
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/dashboard">Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/home">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/header">Header & Menu</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/footer">Footer</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/about">About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/about-us">About Us</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/contact">Contact</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/appointment">Appointment</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/faq">FAQ</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/terms-conditions">Terms & Conditions</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/safety">Safety</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/camp-location">Camp Location</a>
+            </li>
+            <li class="nav-item">
+
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/form">Form</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/upload">Upload</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+        <!-- Flash Messages Data (Hidden) -->
+        <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
           <div id="flash-messages-data" style="display: none">
-            <%- JSON.stringify({ success_msg: typeof success_msg !=='undefined'
-            && success_msg ? success_msg : null, error_msg: typeof error_msg
-            !=='undefined' && error_msg ? error_msg : null, error: typeof error
-            !=='undefined' && error ? error : null }) %>
+            <%- JSON.stringify({ success_msg: typeof success_msg !=='undefined' && success_msg ? success_msg : null,
+              error_msg: typeof error_msg !=='undefined' && error_msg ? error_msg : null, error: typeof error
+              !=='undefined' && error ? error : null }) %>
           </div>
           <% } %>
 
-          <div class="py-3"><%- body %></div>
-        </main>
-      </div>
+            <div class="py-3"><%- body %></div>
+      </main>
     </div>
+  </div>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
-    <%- script %>
-  </body>
-</html>
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+  <%- script %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/layouts/main.ejs b/views/layouts/main.ejs
index 203fc7d..e9857b1 100644
--- a/views/layouts/main.ejs
+++ b/views/layouts/main.ejs
@@ -727,35 +727,56 @@
               About
             </a>
 
-              <ul class="dropdown-menu">
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/about-us' ? 'active' : '' %>"
-                    href="/admin/about-us"
-                    >About us</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/safety' ? 'active' : '' %>"
-                    href="/admin/safety"
-                    >Safety</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/FAQ' ? 'active' : '' %>"
-                    href="/admin/faq"
-                    >FAQ</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/insurance' ? 'active' : '' %>"
-                    href="/admin/insurance"
-                    >Insurance</a
-                  >
-                </li>
+            <ul class="dropdown-menu">
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/about-us' ? 'active' : '' %>"
+                  href="/admin/about-us">About us</a>
+              </li>
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/safety' ? 'active' : '' %>"
+                  href="/admin/safety">Safety</a>
+              </li>
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/FAQ' ? 'active' : '' %>" href="/admin/faq">FAQ</a>
+              </li>
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/insurance' ? 'active' : '' %>"
+                  href="/admin/insurance">Insurance</a>
+              </li>
+
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/travel' ? 'active' : '' %>"
+                  href="/admin/travel">Travel</a>
+              </li>
+              <li>
+                <a class="dropdown-item <%= currentPath === '/admin/terms-conditions' ? 'active' : '' %>"
+                  href="/admin/terms-conditions">Terms & Conditions</a>
+              </li>
+
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>" href="/admin/contact">Contact
+              Us</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/appointment' ? 'active' : '' %>"
+              href="/admin/appointment">Appointment</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/pricing' ? 'active' : '' %>"
+              href="/admin/pricing">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/camp-location' ? 'active' : '' %>"
+              href="/admin/camp-location">Camp Location</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/activity' ? 'active' : '' %>" href="/admin/activity">Activity
+              & Booking</a>
+          </li>
+        </ul>
 
                 <li>
                   <a
@@ -807,17 +828,17 @@
         </ul>
         <div class="d-flex align-items-center">
           <% if (locals.user) { %>
-          <a href="/admin/dashboard" class="btn btn-primary me-2">
-            <i class="fas fa-tachometer-alt me-1"></i>Dashboard
-          </a>
-          <a href="/auth/logout" class="btn btn-outline-danger">
-            <i class="fas fa-sign-out-alt me-1"></i>Logout
-          </a>
-          <% } else { %>
-          <a href="/auth/login" class="btn btn-outline-primary">
-            <i class="fas fa-sign-in-alt me-1"></i>Login
-          </a>
-          <% } %>
+            <a href="/admin/dashboard" class="btn btn-primary me-2">
+              <i class="fas fa-tachometer-alt me-1"></i>Dashboard
+            </a>
+            <a href="/auth/logout" class="btn btn-outline-danger">
+              <i class="fas fa-sign-out-alt me-1"></i>Logout
+            </a>
+            <% } else { %>
+              <a href="/auth/login" class="btn btn-outline-primary">
+                <i class="fas fa-sign-in-alt me-1"></i>Login
+              </a>
+              <% } %>
         </div>
       </div>
     </div>
@@ -827,12 +848,12 @@
   <main>
     <!-- Flash Messages Data (Hidden) -->
     <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
-    <div id="flash-messages-data" style="display: none">
-      <%- JSON.stringify({ success_msg: typeof success_msg !=='undefined' && success_msg ? success_msg : null,
+      <div id="flash-messages-data" style="display: none">
+        <%- JSON.stringify({ success_msg: typeof success_msg !=='undefined' && success_msg ? success_msg : null,
           error_msg: typeof error_msg !=='undefined' && error_msg ? error_msg : null, error: typeof error !=='undefined'
           && error ? error : null }) %>
-    </div>
-    <% } %> <%- body %>
+      </div>
+      <% } %> <%- body %>
   </main>
 
   <!-- Footer -->
@@ -847,14 +868,14 @@
           <h5 class="mb-3">Links</h5>
           <ul class="list-unstyled">
             <% if (locals.user) { %>
-            <li class="mb-2">
-              <a href="/admin/dashboard" class="text-decoration-none hover-opacity">Dashboard</a>
-            </li>
-            <% } else { %>
-            <li class="mb-2">
-              <a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
-            </li>
-            <% } %>
+              <li class="mb-2">
+                <a href="/admin/dashboard" class="text-decoration-none hover-opacity">Dashboard</a>
+              </li>
+              <% } else { %>
+                <li class="mb-2">
+                  <a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
+                </li>
+                <% } %>
           </ul>
         </div>
         <div class="col-md-4">
@@ -871,7 +892,7 @@
       <div class="text-center">
         <p class="mb-0">
           &copy; <%= new Date().getFullYear() %> CMS-GGCamp. All rights
-          reserved.
+            reserved.
         </p>
       </div>
     </div>
@@ -934,7 +955,7 @@
                 formattedType + '</span><i class="fas fa-chevron-right nav-submenu-indicator"></i>';
 
               if (window.location.pathname.includes("/admin/level") && window.location.search.includes(
-                  "type=" + type)) {
+                "type=" + type)) {
                 link.classList.add("active");
               }