diff --git a/my_compassion/__manifest__.py b/my_compassion/__manifest__.py
index 115ad51c1..459206a31 100644
--- a/my_compassion/__manifest__.py
+++ b/my_compassion/__manifest__.py
@@ -91,6 +91,9 @@
         "templates/components/my2_giving_limits_modal.xml",
         "templates/components/my2_checkout.xml",
         "templates/components/my2_weather_time_container.xml",
+        "templates/components/my2_sponsorships_section.xml",
+        "templates/components/my2_payment_method_modal.xml",
+        "templates/components/my2_payment_method_card.xml",
         # Other data the depends on the templates
         "data/my2_new_sponsorship_wizard_steps.xml",
     ],
diff --git a/my_compassion/controllers/my2_donations.py b/my_compassion/controllers/my2_donations.py
index 1eb723638..9a5c31033 100644
--- a/my_compassion/controllers/my2_donations.py
+++ b/my_compassion/controllers/my2_donations.py
@@ -8,13 +8,15 @@
 #
 ##############################################################################
 
+import json
 import math
 from collections import defaultdict
 from datetime import datetime, timedelta
 
 from werkzeug.exceptions import BadRequest, NotFound
 
-from odoo import fields, http
+import odoo
+from odoo import _, fields, http
 from odoo.http import request
 
 from odoo.addons.portal.controllers.portal import CustomerPortal
@@ -397,7 +399,14 @@ def my_donations(self, invoice_page=1, invoice_per_page=12, **kw):
         partner = request.env.user.partner_id
 
         # Active sponsorships
-        active_sponsorships = partner.get_portal_sponsorships("active")
+        active_sponsorships = partner.get_portal_sponsorships(["active", "mandate"])
+
+        # Group sponsorships by their backend Contract Group
+        sponsorship_groups = active_sponsorships.mapped("group_id")
+
+        # Put all payment methods into an array
+        all_groups = partner.get_payment_modes()
+        payment_methods = [group.get_payment_method_info() for group in all_groups]
 
         # Due invoices
         date_filter_up_bound = datetime.today() + timedelta(days=30)
@@ -417,16 +426,16 @@ def my_donations(self, invoice_page=1, invoice_per_page=12, **kw):
             )
         )
 
-        # Computing the total price of the active sponsorships grouped
-        # per sponsorship frequency and payment method.
-        # group_id groups the invoices that have the same payment method and frequency.
+        # Total cost calculation
         tot_cost_per_frequency = defaultdict(lambda: defaultdict(float))
 
         for sponsorship in active_sponsorships:
             currency = sponsorship.pricelist_id.currency_id.name
-            tot_cost_per_frequency[sponsorship.group_id.month_interval][
-                currency
-            ] += sponsorship.total_amount
+            # Ensure group exists
+            if sponsorship.group_id:
+                tot_cost_per_frequency[sponsorship.group_id.month_interval][
+                    currency
+                ] += sponsorship.total_amount
 
         paid_invoices_data = self._get_paginated_paid_invoices(
             partner, invoice_page, invoice_per_page
@@ -436,6 +445,9 @@ def my_donations(self, invoice_page=1, invoice_per_page=12, **kw):
         values.update(
             {
                 "active_sponsorships": active_sponsorships,
+                "sponsorship_groups": sponsorship_groups,
+                "payment_methods": payment_methods,
+                "payment_methods_json": json.dumps(payment_methods),
                 "tot_cost_per_frequency": tot_cost_per_frequency,
                 "due_invoices": due_invoices,
                 "paid_invoices_subset": paid_invoices_data["paid_invoices_subset"],
@@ -466,6 +478,240 @@ def my_donations_history(self, invoice_page=1, invoice_per_page=12, **kw):
 
         return {"html": html}
 
+    @http.route(
+        "/my2/donations/get_payment_methods_sponsor",
+        type="json",
+        auth="user",
+        website=True,
+    )
+    def get_payment_methods_sponsor(self, **kwargs):
+        """
+        Returns a list of payment methods (saved tokens and acquirers) for the current
+        user.
+        """
+        partner = request.env.user.partner_id
+        groups = partner.get_payment_modes()
+        payment_methods = []
+
+        for group in groups:
+            info = group.get_payment_method_info()
+            if not info:
+                continue
+            method = dict(info)
+            method["group_id"] = group.id
+
+            payment_methods.append(method)
+
+        return payment_methods
+
+    @http.route(
+        "/my2/donation/change_method_contract", type="json", auth="user", website=True
+    )
+    def change_payment_method_contract(self, contract_id, group_id, **kwargs):
+        """
+        Changes the payment method for a specific contract.
+
+        :param contract_id: ID of the recurring.contract to update.
+        :param group_id: ID of an existing group to merge into
+        """
+        partner = request.env.user.partner_id
+        if not contract_id or not group_id:
+            raise BadRequest()
+        # Verify that the contract belongs to the user
+        contract = (
+            request.env["recurring.contract"]
+            .sudo()
+            .search([("id", "=", int(contract_id)), ("partner_id", "=", partner.id)])
+        )
+        if not contract:
+            raise NotFound()
+
+        success = contract.change_contract_group(int(group_id))
+        if success:
+            # Render the updated list
+            values = self._prepare_sponsorship_values(partner)
+            html = request.env["ir.qweb"]._render(
+                "my_compassion.my2_sponsorships_section", values
+            )
+            return {
+                "success": True,
+                "html": html,
+                "payment_methods": values["payment_methods"],
+            }
+
+        return {"success": False, "error": _("Operation failed")}
+
+    @http.route(
+        "/my2/donation/change_method_group", type="json", auth="user", website=True
+    )
+    def change_payment_method_group(
+        self, group_id, new_group_id=None, new_bvr_ref=None, **kwargs
+    ):
+        """
+        Endpoint to update payment method for a sponsorship group.
+        Accepts new_group_id (to merge) or new_bvr_ref (to update ref).
+        """
+        partner = request.env.user.partner_id
+
+        if not group_id:
+            raise BadRequest(_("Group ID is required."))
+
+        # Security Check: Search ensures the group belongs to the logged-in user
+        group = (
+            request.env["recurring.contract.group"]
+            .sudo()
+            .search(
+                [("id", "=", int(group_id)), ("partner_id", "=", partner.id)], limit=1
+            )
+        )
+
+        if not group:
+            raise NotFound(_("Payment group not found or access denied."))
+
+        # Call the model method to perform the logic
+        success = group.change_payment_method(
+            new_group_id=new_group_id, new_bvr_ref=new_bvr_ref
+        )
+
+        if success:
+            values = self._prepare_sponsorship_values(partner)
+            html = request.env["ir.qweb"]._render(
+                "my_compassion.my2_sponsorships_section", values
+            )
+            return {
+                "success": True,
+                "html": html,
+                "payment_methods": values["payment_methods"],
+            }
+
+        return {"success": False, "error": _("Operation failed")}
+
+    # Configuration for supported manual payment methods
+    # Key: frontend 'value' from the select input
+    # Value: 'name' (or partial name) to search for in account.payment.mode
+    _payment_mode_map = {
+        "permanent_order": "Permanent Order",
+        "bvr": "BVR",
+    }
+
+    @http.route(
+        "/my2/donation/add_payment_method_group", type="json", auth="user", website=True
+    )
+    def add_payment_method_group(
+        self,
+        recurring_unit="month",
+        method_type="bvr",
+        advance_billing_months=1,
+        **kwargs,
+    ):
+        """
+        Creates a new Contract Group with manual BVR/Permanent Order details.
+        """
+        partner = request.env.user.partner_id
+
+        # 1. Resolve Payment Mode Search Term
+        mode_search_term = self._payment_mode_map.get(method_type)
+
+        if not mode_search_term:
+            return {
+                "success": False,
+                "error": _("Invalid payment method type selected."),
+            }
+
+        # 2. Find the Payment Mode
+        # Exact match attempt
+        payment_mode = (
+            request.env["account.payment.mode"]
+            .sudo()
+            .search([("name", "=", mode_search_term)], limit=1)
+        )
+
+        # Fallback: Loose search (ilike) if exact match fails
+        if not payment_mode:
+            payment_mode = (
+                request.env["account.payment.mode"]
+                .sudo()
+                .search([("name", "ilike", mode_search_term)], limit=1)
+            )
+
+        if not payment_mode:
+            return {
+                "success": False,
+                "error": _('Configuration Error: Payment mode "%s" not found.')
+                % mode_search_term,
+            }
+
+        # 3. Create the Group
+        try:
+            new_group = (
+                request.env["recurring.contract.group"]
+                .sudo()
+                .create(
+                    {
+                        "partner_id": partner.id,
+                        "payment_mode_id": payment_mode.id,
+                        "recurring_unit": recurring_unit,
+                        "recurring_value": int(advance_billing_months),
+                        "active": True,
+                    }
+                )
+            )
+            new_bvr_ref = new_group.compute_partner_bvr_ref(partner)
+            if new_bvr_ref:
+                new_group.bvr_reference = new_bvr_ref
+
+            if new_group:
+                values = self._prepare_sponsorship_values(request.env.user.partner_id)
+                html = request.env["ir.qweb"]._render(
+                    "my_compassion.my2_sponsorships_section", values
+                )
+                return {
+                    "success": True,
+                    "html": html,
+                    "group_id": new_group.id,
+                    "payment_methods": values["payment_methods"],
+                }
+
+            return {"success": False}
+
+        except odoo.exceptions.ValidationError:
+            return {
+                "success": False,
+                "error": _("An unexpected error occurred. Please try again."),
+            }
+
+    def _prepare_sponsorship_values(self, partner):
+        """
+        Helper to fetch all data required for the sponsorship list view.
+        Returns a dict of values for QWeb rendering.
+        """
+        # 1. Fetch Active Sponsorships
+        active_sponsorships = partner.get_portal_sponsorships(["active", "mandate"])
+
+        # 2. Fetch Groups
+        sponsorship_groups = active_sponsorships.mapped("group_id")
+
+        # 3. Calculate Totals
+        tot_cost_per_frequency = defaultdict(lambda: defaultdict(float))
+        for sponsorship in active_sponsorships:
+            currency = sponsorship.pricelist_id.currency_id.name
+            if sponsorship.group_id:
+                tot_cost_per_frequency[sponsorship.group_id.month_interval][
+                    currency
+                ] += sponsorship.total_amount
+
+        # 4. Fetch Available Methods (for modals)
+        all_groups = partner.get_payment_modes()
+        payment_methods = [group.get_payment_method_info() for group in all_groups]
+
+        return {
+            "active_sponsorships": active_sponsorships,
+            "sponsorship_groups": sponsorship_groups,
+            "tot_cost_per_frequency": tot_cost_per_frequency,
+            "payment_methods": payment_methods,
+            "payment_methods_json": json.dumps(payment_methods),
+        }
+
     def _get_paginated_paid_invoices(
         self, partner, invoice_page=1, invoice_per_page=12
     ):
diff --git a/my_compassion/data/payment_options.xml b/my_compassion/data/payment_options.xml
new file mode 100644
index 000000000..267d50b95
--- /dev/null
+++ b/my_compassion/data/payment_options.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data noupdate="1">
+        <record id="payment_mode_ebill" model="account.payment.mode">
+            <field name="name">eBill</field>
+            <field name="company_id" ref="base.main_company"/>
+            <field name="bank_account_link">variable</field>
+            <field name="payment_method_id" ref="account.account_payment_method_manual_in"/>
+            <field name="active" eval="True"/>
+        </record>
+
+        <record id="account_payment_method_ebill" model="account.payment.method">
+            <field name="name">eBill</field>
+            <field name="code">ebill</field>
+            <field name="payment_type">inbound</field>
+        </record>
+    </data>
+</odoo>
diff --git a/my_compassion/models/contract_group.py b/my_compassion/models/contract_group.py
index 39ca65c25..86bb95d59 100644
--- a/my_compassion/models/contract_group.py
+++ b/my_compassion/models/contract_group.py
@@ -6,16 +6,31 @@
 #    The licence is in the file __manifest__.py
 #
 ##############################################################################
-from odoo import fields, models
+from odoo import _, api, fields, models
 
 
 class ContractGroup(models.Model):
     _name = "recurring.contract.group"
     _inherit = ["recurring.contract.group", "translatable.model"]
 
-    gender = fields.Selection(store=False)
+    active = fields.Boolean(default=True)
+    payment_token_id = fields.Many2one("payment.token", string="Payment Token")
+    gender = fields.Selection(related="partner_id.gender", store=True, readonly=False)
     total_amount = fields.Float(compute="_compute_total_amount")
 
+    active_contract_count = fields.Integer(
+        string="Active Contracts Count", compute="_compute_active_contract_count"
+    )
+
+    @api.depends("contract_ids.state")
+    def _compute_active_contract_count(self):
+        for group in self:
+            group.active_contract_count = len(
+                group.contract_ids.filtered(
+                    lambda s: s.state not in ["terminated", "cancelled"]
+                )
+            )
+
     def _compute_total_amount(self):
         for group in self:
             group.total_amount = sum(
@@ -23,3 +38,71 @@ def _compute_total_amount(self):
                     lambda s: s.state not in ["terminated", "cancelled"]
                 ).mapped("total_amount")
             )
+
+    def get_payment_method_info(self):
+        """
+        Returns a dict containing display info for the group's payment method.
+        Used in MyCompassion2.0 portal.
+        """
+        self.ensure_one()
+
+        # Default / Fallback values
+        info = {
+            "icon": False,
+            "ref_number": False,
+            "label": _("Unknown Method"),
+            "expire_date": False,
+            "is_card": False,
+            "mode_id": self.payment_mode_id.id if self.payment_mode_id else False,
+            "group_id": self.id,
+        }
+
+        if not self.payment_mode_id:
+            return info
+
+        all_icons = self.env["payment.icon"].sudo().search([("image", "!=", False)])
+        for icon in all_icons:
+            if icon.name.lower() in self.payment_mode_id.name.lower():
+                info["icon"] = icon.id
+                break
+
+        # Basic Mode Info
+        info["label"] = self.payment_mode_id.display_name
+        info["type"] = "mode"
+        info["ref_number"] = self.bvr_reference if self.bvr_reference else False
+
+        return info
+
+    def change_payment_method(self, new_group_id=None, new_bvr_ref=None):
+        """
+        Update the contract group by either merging into an existing group
+        (if new_group_id provided) or finding/creating a group for a specific
+        payment mode (if payment_mode_id provided).
+        """
+        self.ensure_one()
+
+        # Merge into another Payment Group
+        if new_group_id:
+            target_group = self.env["recurring.contract.group"].browse(
+                int(new_group_id)
+            )
+
+            # Validation: Target must exist and belong to the same partner
+            if not target_group.exists() or target_group.partner_id != self.partner_id:
+                return False
+
+            # Avoid self-merge
+            if target_group.id == self.id:
+                return True
+
+            # Move all contracts to the target group
+            self.active_contract_ids.write({"group_id": target_group.id})
+            return True
+
+        # Update Reference (e.g. manual BVR or LSV reference update)
+        if new_bvr_ref is not None:
+            # Updating the reference for the current group
+            self.write({"bvr_reference": new_bvr_ref})
+            return True
+
+        return False
diff --git a/my_compassion/models/contracts.py b/my_compassion/models/contracts.py
index 7fc5173bd..36635e1a9 100644
--- a/my_compassion/models/contracts.py
+++ b/my_compassion/models/contracts.py
@@ -13,5 +13,30 @@ def _compute_can_show_on_my_compassion(self):
         for contract in self:
             contract.can_show_on_my_compassion = contract.state in [
                 "active",
+                "mandate",
                 "terminated",
             ] or (contract.state != "cancelled" and not contract.parent_id)
+
+    def change_contract_group(self, new_group_id):
+        """
+        Moves the sponsorship (self) to the specified contract group.
+        :param new_group_id: int ID of the target recurring.contract.group
+        """
+        self.ensure_one()
+
+        if not new_group_id:
+            return False
+
+        # If we are already in this group, do nothing
+        if self.group_id.id == new_group_id:
+            return True
+
+        target_group = self.env["recurring.contract.group"].browse(new_group_id)
+
+        if not target_group.exists() or target_group.partner_id != self.partner_id:
+            return False
+
+        # Move the contract to the new group
+        self.write({"group_id": target_group.id})
+
+        return True
diff --git a/my_compassion/models/res_partner.py b/my_compassion/models/res_partner.py
index f39b504a2..66576d19b 100644
--- a/my_compassion/models/res_partner.py
+++ b/my_compassion/models/res_partner.py
@@ -53,7 +53,7 @@ def _compute_is_sponsor(self):
                     "|",
                     ("partner_id", "=", partner.id),
                     ("correspondent_id", "=", partner.id),
-                    ("state", "in", ["waiting", "active"]),
+                    ("state", "in", ["waiting", "mandate", "active"]),
                     ("child_id", "!=", False),
                 ],
             )
@@ -93,3 +93,19 @@ def _compute_is_donor(self):
         donor_ids = {data["partner_id"][0] for data in donors_data}
         for partner in self:
             partner.is_donor = partner.id in donor_ids
+
+    def get_payment_modes(self):
+        """
+        Retrieve all unique payment modes currently linked to the partner.
+        Used to display existing methods.
+        """
+        self.ensure_one()
+        # Find groups for this partner that have a payment mode.
+        groups = self.env["recurring.contract.group"].search(
+            [
+                ("partner_id", "=", self.id),
+                ("payment_mode_id", "!=", False),
+            ]
+        )
+
+        return groups
diff --git a/my_compassion/static/src/css/my2_payment_modal.css b/my_compassion/static/src/css/my2_payment_modal.css
new file mode 100644
index 000000000..905dfe3fa
--- /dev/null
+++ b/my_compassion/static/src/css/my2_payment_modal.css
@@ -0,0 +1,66 @@
+/* Define the variable for maintainability */
+:root {
+    /* Represents the total height of modal header/footer or vertical padding to subtract */
+    --modal-vertical-padding: 64px;
+}
+
+/* Card Container */
+.payment-method-card {
+    transition: all 0.2s ease-in-out;
+    border-width: 1px;
+}
+
+/* Selected State */
+.payment-method-card.selected {
+    border-width: 10px;
+}
+
+/* Hover State */
+.payment-method-card:not(.selected):hover {
+    background-color: #f8f9fa;
+    border-color: #dee2e6;
+}
+
+.payment-method-card .pointer-events-none {
+    pointer-events: none;
+}
+
+.payment-method-card.hover-shadow-sm:hover {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+#payment_method_selector_modal .modal-content {
+    max-height: 90vh; /* limit modal height */
+    overflow: hidden; /* let inner container scroll */
+}
+
+/* scrollable list that fits inside modal (subtract header/footer space) */
+.payment-methods-list {
+    /* Using custom property to calculate available height */
+    max-height: calc(100vh - var(--modal-vertical-padding));
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.oe_accordion_arrow {
+    transition: transform 0.25s ease-in-out;
+}
+
+/* When button has .collapsed class → section is closed → show right arrow */
+.btn.collapsed .oe_accordion_arrow {
+    transform: rotate(-90deg); /* chevron-down becomes chevron-right */
+}
+
+/* When expanded → keep down (0deg) */
+.btn:not(.collapsed) .oe_accordion_arrow {
+    transform: rotate(0deg);
+}
+
+/* Same logic for payment method cards*/
+.cursor-pointer[aria-expanded="false"] .oe_accordion_arrow {
+    transform: rotate(-90deg);
+}
+
+.cursor-pointer[aria-expanded="true"] .oe_accordion_arrow {
+    transform: rotate(0deg);
+}
diff --git a/my_compassion/static/src/js/my2_donations.js b/my_compassion/static/src/js/my2_donations.js
index 9c611f247..2dca076e3 100644
--- a/my_compassion/static/src/js/my2_donations.js
+++ b/my_compassion/static/src/js/my2_donations.js
@@ -1,54 +1,346 @@
-document.addEventListener("DOMContentLoaded", function () {
-    odoo.define("my_compassion.donations_pager_simple", function (require) {
-        "use strict";
+odoo.define("my_compassion.my2_donations", function (require) {
+    "use strict";
 
-        var rpc = require("web.rpc");
-        let isUpdating = false;
+    var publicWidget = require("web.public.widget");
+    var core = require("web.core");
+    var QWeb = core.qweb;
+    const ToastService = require("my_compassion.toast_service");
+    var _t = core._t;
 
-        function updateHistory(page) {
-            if (isUpdating) {
-                return;
+    publicWidget.registry.My2Donations = publicWidget.Widget.extend({
+        selector: ".my2-donations-page",
+
+        // Load Client-Side QWeb Templates
+        xmlDependencies: ["/my_compassion/static/src/xml/my2_payment_method_templates.xml"],
+
+        events: {
+            // Custom events dispatched from the DOM (e.g. from my2_sponsorships_group_card.xml)
+            open_payment_method_update: "_onOpenUpdateModal",
+            open_payment_method_change: "_onOpenChangeModal",
+            open_payment_method_add: "_onOpenAddModal",
+
+            // UI Interaction events
+            "click #btn_save_payment_method": "_onSavePaymentMethod",
+            'change input[name="payment_method_selection"]': "_onMethodSelectionChange",
+            "click #history_pager_prev, #history_pager_next": "_onPagerClick",
+        },
+
+        /**
+         * Widget Initialization
+         */
+        start: function () {
+            var self = this;
+
+            // 1. Initialize Local State
+            // Read the initial list of payment methods passed from the backend template
+            var $container = this.$("#my_sponsorships_container");
+            this.paymentMethods = $container.data("payment-methods") || [];
+
+            // 2. Global Bindings (Cleanup & Modal behaviors)
+            this._onModalHiddenGlobalBound = this._onModalHiddenGlobal.bind(this);
+            this._onMethodSelectionChangeBound = this._onMethodSelectionChange.bind(this);
+
+            $("body").on("hidden.bs.modal", ".modal", this._onModalHiddenGlobalBound);
+            // We bind change to body to catch inputs inside dynamically rendered modals
+            $("body").on("change", 'input[name="payment_method_selection"]', this._onMethodSelectionChangeBound);
+
+            // 3. Check for URL flash messages (e.g. after redirects)
+            this._checkAddPaymentMethod();
+
+            return this._super.apply(this, arguments);
+        },
+
+        destroy: function () {
+            if (this._onModalHiddenGlobalBound) {
+                $("body").off("hidden.bs.modal", ".modal", this._onModalHiddenGlobalBound);
             }
+            if (this._onMethodSelectionChangeBound) {
+                $("body").off("change", 'input[name="payment_method_selection"]', this._onMethodSelectionChangeBound);
+            }
+            this._super.apply(this, arguments);
+        },
+
+        // -------------------------------------------------------------------------
+        // MODAL OPEN HANDLERS
+        // -------------------------------------------------------------------------
+
+        /**
+         * Opens the "Change" modal (Moving a contract to a different group/method)
+         */
+        _onOpenChangeModal: function (ev) {
+            ev.stopPropagation();
+            // detail contains: { contract_id, group_id, child_name } passed via detail_js
+            var detail = ev.detail || {};
+            var $container = this.$("#my_sponsorships_container");
+            this.paymentMethods = $container.data("payment-methods") || [];
+
+            var $modal = $("#payment_method_selector_modal_change");
+
+            // Update Description
+            $modal
+                .find("#modal_description")
+                .text(
+                    _.str.sprintf(
+                        _t("Change your payment method for %s."),
+                        detail.child_name || _t("your sponsored child")
+                    )
+                );
+
+            // Store context
+            $modal.data("contract-id", detail.contract_id);
 
-            const historyContainer = document.getElementById("donation_history_container");
-            const pagerButtons = document.querySelectorAll("#history_pager_prev, #history_pager_next");
+            // Render the list of available methods
+            // We pass the current group_id to highlight the currently active method
+            this._renderPaymentMethodsList($modal, detail.group_id, "#modal_container");
 
-            if (!historyContainer) {
-                console.error("Donation history container not found.");
+            $modal.modal("show");
+        },
+
+        /**
+         * Opens the "Update" modal (Editing the current group's details or merging)
+         */
+        _onOpenUpdateModal: function (ev) {
+            ev.stopPropagation();
+            var detail = ev.detail || {};
+            // detail contains: { group_id, method_info }
+
+            var $modal = $("#payment_method_selector_modal_update");
+            $modal.data("group-id", detail.group_id);
+
+            // 1. Render the "Update Current Details" Form
+            // We reuse the client-side QWeb template for the form
+            // Note: detail.method_info comes from the data-attributes we setup in the template
+            var formHtml = QWeb.render("my_compassion.PaymentMethodUpdateAccordion", detail.method_info || {});
+            $modal.find("#modal_container").empty().html(formHtml);
+
+            // 2. Render the "Switch" list in the accordion
+            this._renderPaymentMethodsList($modal, detail.group_id, "#payment_methods_switch_container");
+
+            $modal.modal("show");
+        },
+
+        /**
+         * Opens the "Add" modal
+         */
+        _onOpenAddModal: function (ev) {
+            ev.stopPropagation();
+            $("#payment_method_selector_modal_add").modal("show");
+        },
+
+        // -------------------------------------------------------------------------
+        // RENDERING HELPERS
+        // -------------------------------------------------------------------------
+
+        /**
+         * Renders the list of payment method cards into a specific container
+         * Uses the local `this.paymentMethods` state.
+         */
+        _renderPaymentMethodsList: function ($modal, currentGroupId, containerSelector) {
+            var $container = $modal.find(containerSelector);
+            $container.empty();
+
+            if (!this.paymentMethods || this.paymentMethods.length === 0) {
+                $container.html(QWeb.render("my_compassion.PaymentMethodLoading"));
                 return;
             }
 
-            isUpdating = true;
-            pagerButtons.forEach((btn) => btn.classList.add("disabled"));
+            var self = this;
+            // Iterate over local state
+            _.each(this.paymentMethods, function (method) {
+                // Clone data to avoid mutating state
+                var data = _.extend({}, method, {
+                    // Mark as selected if it matches the current group of the child
+                    selected: method.group_id == currentGroupId,
+                });
+
+                // Render Client-Side Template
+                var $card = $(QWeb.render("my_compassion.PaymentMethodCard", data));
+                $container.append($card);
+            });
+        },
+
+        // -------------------------------------------------------------------------
+        // ACTION HANDLERS
+        // -------------------------------------------------------------------------
+
+        _onMethodSelectionChange: function (ev) {
+            var $input = $(ev.currentTarget);
+            var $container = $input.closest(".payment-methods-container, #payment_methods_switch_container");
+
+            // Visual toggle of classes
+            $container
+                .find(".payment-method-card")
+                .removeClass("selected border-core-blue bg-light-blue")
+                .addClass("border-gray-200 hover-shadow-sm");
+
+            $input
+                .closest(".payment-method-card")
+                .addClass("selected border-core-blue bg-light-blue")
+                .removeClass("border-gray-200 hover-shadow-sm");
+        },
+
+        _onSavePaymentMethod: function (ev) {
+            ev.preventDefault();
+            var self = this;
+            var $btn = $(ev.currentTarget);
+            var $modal = $btn.closest(".modal");
+            var modalType = $modal.data("modal-type");
+
+            // UI Loading State
+            $btn.prop("disabled", true).prepend('<i class="fa fa-spinner fa-spin mr-1"/>');
+
+            var promise;
+            var params = {};
+            var route = "";
+
+            // --- PREPARE PARAMETERS BASED ON MODAL TYPE ---
+            if (modalType == "change") {
+                var $selectedInput = $modal.find('input[name="payment_method_selection"]:checked');
+                var new_group_id = $selectedInput.attr("group-id");
+
+                route = "/my2/donation/change_method_contract";
+                params = {
+                    contract_id: $modal.data("contract-id"),
+                    group_id: parseInt(new_group_id),
+                };
+            } else if (modalType == "update") {
+                var currentGroupId = $modal.data("group-id");
+                route = "/my2/donation/change_method_group";
+                params = { group_id: currentGroupId };
+
+                // 1. Check for Group Switch
+                var $selectedGroupInput = $modal.find('input[name="payment_method_selection"]:checked');
+                if ($selectedGroupInput.length) {
+                    var selectedGroupId = $selectedGroupInput.attr("group-id");
+                    if (selectedGroupId && parseInt(selectedGroupId) !== parseInt(currentGroupId)) {
+                        params.new_group_id = parseInt(selectedGroupId);
+                    }
+                }
+
+                // 2. Check for Detail Updates
+                var $bvrInput = $modal.find('input[name="ref_number"]');
+                if ($bvrInput.length) {
+                    var newBvrRef = $bvrInput.val();
+                    var oldBvrRef = $bvrInput.prop("defaultValue");
+                    if (newBvrRef !== oldBvrRef) {
+                        params.new_bvr_ref = newBvrRef;
+                    }
+                }
+
+                if (!params.new_group_id && !params.new_bvr_ref) {
+                    this._closeModal($modal, $btn);
+                    return;
+                }
+            } else if (modalType == "add") {
+                route = "/my2/donation/add_payment_method_group";
+                params = {
+                    method_type: $modal.find('select[name="method_type"]').val(),
+                    recurring_unit: $modal.find('select[name="recurring_unit"]').val(),
+                    advance_billing_months: parseInt($modal.find('input[name="advance_billing_months"]').val()),
+                };
+            }
+
+            // --- EXECUTE RPC REQUEST ---
+            if (route) {
+                this._rpc({
+                    route: route,
+                    params: params,
+                })
+                    .then(function (result) {
+                        if (result.success) {
+                            $modal.modal("hide");
+                            ToastService.success(_t("The operation was successful."), _t("Success"));
+
+                            // A. UPDATE HTML (Server-Side Rendered List)
+                            if (result.html) {
+                                var $newContent = $(result.html);
+                                // Replace the specific container
+                                self.$("#my_sponsorships_container").replaceWith($newContent);
+                            }
 
-            rpc.query({
+                            // B. UPDATE STATE (Client-Side Data)
+                            if (result.payment_methods) {
+                                self.paymentMethods = result.payment_methods;
+                            }
+                        } else {
+                            ToastService.error(result.error || _t("An error occurred."));
+                        }
+                    })
+                    .finally(function () {
+                        self._closeModal($modal, $btn);
+                    });
+            }
+        },
+
+        _closeModal: function ($modal, $btn) {
+            $modal.modal("hide");
+            $btn.prop("disabled", false).find(".fa-spinner").remove();
+        },
+
+        _onModalHidden: function ($modal) {
+            // Cleanup data attached to DOM
+            $modal.removeData(["group-id", "contract-id"]);
+            $modal.find('input[type="radio"]').prop("checked", false);
+            // Also reset form inputs if needed
+            $modal.find('input[type="text"]').val(function () {
+                return this.defaultValue;
+            });
+        },
+
+        _onModalHiddenGlobal: function (ev) {
+            var $modal = $(ev.target);
+            if ($modal.attr("id") && $modal.attr("id").startsWith("payment_method_selector_modal")) {
+                this._onModalHidden($modal);
+            }
+        },
+
+        // -------------------------------------------------------------------------
+        // TOASTS & HISTORY
+        // -------------------------------------------------------------------------
+
+        _checkAddPaymentMethod: function () {
+            var urlParams = new URLSearchParams(window.location.search);
+            var res = urlParams.get("payment_method_result");
+            var msg = urlParams.get("payment_method_message");
+
+            if (res === "Success") ToastService.success(_t(msg), _t(res));
+            else if (res === "Error") ToastService.error(_t(msg), _t(res));
+            else if (res === "Already Saved") ToastService.info(_t(msg), _t(res));
+
+            if (res) {
+                urlParams.delete("payment_method_result");
+                urlParams.delete("payment_method_message");
+                var newUrl = window.location.pathname + (urlParams.toString() ? "?" + urlParams.toString() : "");
+                window.history.replaceState({}, document.title, newUrl);
+            }
+        },
+
+        _onPagerClick: function (ev) {
+            ev.preventDefault();
+            var $btn = $(ev.currentTarget);
+            if ($btn.hasClass("disabled")) return;
+            var page = $btn.data("page");
+            if (page) this._updateHistory(page);
+        },
+
+        _updateHistory: function (page) {
+            var self = this;
+            var $container = this.$("#donation_history_container");
+            var $buttons = this.$("#history_pager_prev, #history_pager_next");
+            $buttons.addClass("disabled");
+
+            this._rpc({
                 route: "/my2/donations/history",
-                params: {
-                    invoice_page: page,
-                },
+                params: { invoice_page: page },
             })
                 .then(function (result) {
-                    if (result.html) {
-                        historyContainer.outerHTML = result.html;
+                    if (result.html && $container.length) {
+                        $container.replaceWith(result.html);
                     }
                 })
-                .finally(() => {
-                    isUpdating = false;
-                    document.querySelectorAll("#history_pager_prev, #history_pager_next").forEach((btn) => {
-                        if (btn) btn.classList.remove("disabled");
-                    });
+                .finally(function () {
+                    self.$("#history_pager_prev, #history_pager_next").removeClass("disabled");
                 });
-        }
-
-        document.addEventListener("click", function (event) {
-            const btn = event.target.closest("#history_pager_prev, #history_pager_next");
-            if (btn) {
-                event.preventDefault();
-                const page = btn.dataset.page;
-                if (page) {
-                    updateHistory(page);
-                }
-            }
-        });
+        },
     });
 });
diff --git a/my_compassion/static/src/xml/my2_payment_method_templates.xml b/my_compassion/static/src/xml/my2_payment_method_templates.xml
new file mode 100644
index 000000000..444012bdc
--- /dev/null
+++ b/my_compassion/static/src/xml/my2_payment_method_templates.xml
@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <!--
+        Card component for a single payment method.
+        Injected data:
+        - icon: ID of the payment method icon image.
+        - ref_number: Reference number or last 4 digits of the card.
+        - label: Display name of the payment method.
+        - type: Type of the payment method
+        - expire_date: Expiration date of the payment method (if applicable).
+        - brand: Brand of the payment method (if applicable).
+        - is_card: Boolean indicating if the payment method is a card.
+        - mode_id: Unique identifier for the payment method mode.
+        - selected: Boolean indicating if this payment method is currently selected.
+        - group_id: ID of the associated contract group (if applicable).
+    -->
+    <t t-name="my_compassion.PaymentMethodCard">
+        <div
+            t-attf-class="payment-method-card d-flex align-items-center p-3 mb-2 border
+         rounded cursor-pointer position-relative bg-white transition-all
+          #{selected ? 'selected border-core-blue bg-light-blue' : 'border-gray-200 hover-shadow-sm'}"
+            onclick="$(this).find('input[type=radio]').prop('checked', true).trigger('change');"
+        >
+            <!--Hidden Radio Input (Functional but invisible)-->
+            <div class="d-none">
+                <input
+                    type="radio"
+                    name="payment_method_selection"
+                    t-att-id="'pm_' + type + '_' + (mode_id || id)"
+                    t-att-group-id="group_id || undefined"
+                    t-att-checked="selected ? 'checked' : undefined"
+                />
+            </div>
+            <!-- Icon -->
+            <div
+                class="icon-wrapper mr-3 d-flex align-items-center justify-content-center bg-white"
+                style="width: 50px; height: 32px;"
+            >
+                <t t-if="icon">
+                    <img
+                        t-attf-src="/web/image?model=payment.icon&amp;id=#{icon}&amp;field=image"
+                        class="img-fluid"
+                        style="max-height: 100%; max-width: 100%; object-fit: contain;"
+                        alt="Icon"
+                        onerror="this.style.display='none'"
+                    />
+                </t>
+                <t t-elif="is_card">
+                    <!-- Fallback generic card icon if no specific icon is found -->
+                    <i class="fa fa-credit-card text-muted fa-2x" />
+                </t>
+            </div>
+            <!-- Info -->
+            <div class="flex-grow-1">
+                <div class="font-weight-bold text-dark-blue leading-tight">
+                    <t t-esc="label" />
+                </div>
+                <!-- Subtitle Logic: Ref Number or Expire Date or Brand -->
+                <div class="small text-muted mt-1">
+                    <t t-if="ref_number">
+                        <span class="mr-1">
+                            Ref:
+                            <t t-esc="ref_number" />
+                        </span>
+                    </t>
+                    <t t-if="is_card">
+                        <t t-if="expire_date">
+                            <span>
+                                Exp:
+                                <t t-esc="expire_date" />
+                            </span>
+                        </t>
+                    </t>
+                </div>
+            </div>
+            <!-- Checkmark for Selected State -->
+            <t t-if="selected">
+                <i class="fa fa-check-circle text-core-blue ml-3" />
+            </t>
+        </div>
+    </t>
+    <!-- Loading Template -->
+    <t t-name="my_compassion.PaymentMethodLoading">
+        <div class="text-center p-4">
+            <i class="fa fa-circle-o-notch fa-spin fa-2x text-core-blue mb-2" />
+            <p class="text-muted small">Loading payment methods...</p>
+        </div>
+    </t>
+    <!--
+        Accordion component for updating or switching payment methods.
+        Contains two sections:
+        1. Update Current Details (expanded by default)
+        2. Switch Payment Method (collapsed by default)
+        The switch payment method section will be populated dynamically via JS.
+    -->
+    <t t-name="my_compassion.PaymentMethodUpdateAccordion">
+        <div id="payment_method_accordion" class="accordion">
+            <!-- Section 1: Update Details -->
+            <div class="border-bottom mb-2">
+                <div class="card-header bg-white border-0 p-0" id="headingForm">
+                    <h5 class="mb-0">
+                        <button
+                            class="btn btn-link btn-block text-left text-dark-blue font-weight-bold d-flex justify-content-between align-items-center text-decoration-none"
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#collapseForm"
+                            aria-expanded="true"
+                            aria-controls="collapseForm"
+                        >
+                            <span>Update Current Details</span>
+                            <i class="fa fa-chevron-down small oe_accordion_arrow" />
+                        </button>
+                    </h5>
+                </div>
+                <div
+                    id="collapseForm"
+                    class="collapse show"
+                    aria-labelledby="headingForm"
+                    data-parent="#payment_method_accordion"
+                >
+                    <div class="pt-3 pl-1 pr-1">
+                        <!-- Calls the form template with current scope's data (group_info) -->
+                        <t t-call="my_compassion.PaymentMethodUpdateForm" />
+                    </div>
+                </div>
+            </div>
+            <!-- Section 2: Switch Method -->
+            <div class="border-bottom">
+                <div class="card-header bg-white border-0 p-0" id="headingList">
+                    <h5 class="mb-0">
+                        <button
+                            class="btn btn-link btn-block text-left text-dark-blue font-weight-bold d-flex justify-content-between align-items-center text-decoration-none collapsed"
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#collapseList"
+                            aria-expanded="false"
+                            aria-controls="collapseList"
+                        >
+                            <span>Switch Payment Method</span>
+                            <i class="fa fa-chevron-down small oe_accordion_arrow" />
+                        </button>
+                    </h5>
+                </div>
+                <div
+                    id="collapseList"
+                    class="collapse"
+                    aria-labelledby="headingList"
+                    data-parent="#payment_method_accordion"
+                >
+                    <div class="pt-3" id="payment_methods_switch_container" />
+                </div>
+            </div>
+        </div>
+    </t>
+    <!--
+        Reusable Form Field Component (Client Side Version)
+        This mimics the backend theme component for use in JS
+    -->
+    <t t-name="my_compassion.FormFieldComponent">
+        <div t-attf-class="form-field-container mb-3 #{top_class || ''}">
+            <t t-if="label">
+                <label t-att-for="name" class="text-core-blue body-small bold mb-1">
+                    <t t-esc="label" />
+                </label>
+            </t>
+            <!-- Slot content is simulated by passing value/placeholder -->
+            <input
+                type="text"
+                t-att-name="name"
+                t-att-id="name"
+                t-attf-class="form-control #{input_class || ''}"
+                t-att-value="value"
+                t-att-placeholder="placeholder || ''"
+                t-att-disabled="disabled"
+            />
+            <t t-if="invalid_hint">
+                <div class="invalid-hint text-mid-orange tiny-text mb-1 d-none">
+                    <t t-esc="invalid_hint" />
+                </div>
+            </t>
+        </div>
+    </t>
+    <!--
+        Payment Method Update Form
+        Injected data :
+        - ref_number: Reference number or last 4 digits of the card.
+    -->
+    <t t-name="my_compassion.PaymentMethodUpdateForm">
+        <div class="payment-update-form text-left">
+            <!-- Fallback for non-card methods (like LSV, BVR reference) -->
+            <t t-call="my_compassion.FormFieldComponent">
+                <t t-set="label">Reference Number</t>
+                <t t-set="name">ref_number</t>
+                <t t-set="value" t-value="ref_number" />
+            </t>
+        </div>
+    </t>
+</templates>
diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index c2d33bb20..6c4cf284e 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -23,6 +23,7 @@
     - primary_button (dict): Primary button with custom action (see Button).                 [none]
     - recipient (string): Item recipient.                                                    [none]
     - subtext (string): Text under name and recipient.                                       [none]
+    - inline_button (dict): Inline button with custom action (see Button).                  [none]
     - title_color (string): Color of the title.                                              [dark-blue]
     - accent_color (string): Color of the left border accent.                                [dark-blue]
     - price_color (string): Color of the price.                                              [dark-blue]
@@ -37,13 +38,19 @@
     <!-- DONATION ITEM BUTTON -->
     <template id="DonationItemButton" name="Donation Item Button">
         <t t-set="color" t-value="button.get('color') or 'dark-blue'" />
-        <t t-if="button.get('action') == 'link'" t-set="onclick" t-valuef="location.href='#{button.get('href')}'" />
-        <t
-            t-elif="button.get('action') == 'event'"
-            t-set="onclick"
-            t-valuef="this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
-        />
-        <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick">
+        <t t-if="button.get('action') == 'event'">
+            <t t-set="evt_detail" t-value="button.get('detail_js') or button.get('detail') or '{}'" />
+            <t
+                t-set="onclick"
+                t-valuef="event.preventDefault(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{evt_detail}}))"
+            />
+        </t>
+        <t t-elif="button.get('action') == 'link'" t-set="onclick" t-valuef="location.href='#{button.get('href')}'" />
+        <div
+            t-attf-class="action-button #{button_top_class}"
+            t-att-onclick="onclick"
+            t-att="button.get('attributes') or {}"
+        >
             <i t-if="button.get('icon')" t-attf-class="tiny-text icon-#{button.get('icon')} text-#{color}" />
             <i
                 t-if="button.get('pictogram')"
@@ -66,9 +73,7 @@
         <t t-set="monthly" t-value="monthly == True" />
         <t t-set="monthly_noabbr" t-value="monthly_noabbr == True" />
         <t t-set="secondary_buttons" t-value="secondary_buttons or []" />
-        <!-- Estimate component minimum width -->
-        <t t-set="min_width" t-valuef="#{300 + 24 * len(secondary_buttons)}px" />
-        <!-- Component definition -->
+        <t t-set="inline_button" t-value="inline_button or None" />
         <div
             t-attf-class="donation-item-container p-2 d-flex rounded-lg bg-#{bg_color} border-#{accent_color} #{top_class}"
             t-attf-style="min-width: #{min_width}"
@@ -94,6 +99,13 @@
                         <div t-if="subtext" t-attf-class="text-#{subtext_color} body-small bold">
                             <t t-esc="subtext" />
                         </div>
+                        <t t-if="inline_button" t-call="my_compassion.DonationItemButton">
+                            <t t-set="button" t-value="inline_button" />
+                            <t
+                                t-set="button_top_class"
+                                t-value="'mt-1 p-0 border-0 bg-transparent align-self-start shadow-none'"
+                            />
+                        </t>
                     </div>
                     <t t-foreach="secondary_buttons" t-as="button">
                         <t t-call="my_compassion.DonationItemButton">
diff --git a/my_compassion/templates/components/my2_payment_method_card.xml b/my_compassion/templates/components/my2_payment_method_card.xml
new file mode 100644
index 000000000..695f8da79
--- /dev/null
+++ b/my_compassion/templates/components/my2_payment_method_card.xml
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!--
+Description:
+    Component to display a sponsorship group card with payment method details and associated sponsorships.
+
+    Injected data:
+    - group: The sponsorship group object containing payment method and sponsorship details.
+    - payment_methods_JSON (JSON): Available payment methods for the partner in JSON to pass to the JS.
+
+   -->
+<odoo>
+    <template id="my2_sponsorships_group_card" name="Sponsorships Group Card Component">
+        <t t-set="info" t-value="group.get_payment_method_info()" />
+        <div class="sponsorship-group mb-4 sponsorship-group-container">
+            <div class="d-flex flex-column border rounded shadow-sm">
+                <div
+                    class="d-flex justify-content-between align-items-center p-3 bg-light cursor-pointer border-bottom rounded-top"
+                    data-toggle="collapse"
+                    t-att-data-target="'#group_collapse_%s' % group.id"
+                    aria-expanded="true"
+                >
+                    <t t-set="icon_id" t-value="info.get('icon')" />
+                    <t t-set="expire_date" t-value="info.get('expire_date')" />
+                    <div class="d-flex flex-column">
+                        <div class="d-flex flex-row">
+                            <t t-if="icon_id">
+                                <img
+                                    t-att-src="'/web/image?model=payment.icon&amp;id=%s&amp;field=image&amp;width=50&amp;height=50' % icon_id"
+                                    style="width: 50px; height: 32px; object-fit: contain; margin-right: 12px; flex-shrink: 0;"
+                                    alt="Payment method"
+                                    onerror="this.style.display='none'"
+                                />
+                            </t>
+                            <div class="d-flex flex-column">
+                                <h5 class="m-0 text-dark-blue font-weight-bold d-flex align-items-center">
+                                    <span>
+                                        <t t-esc="info.get('label') or 'Unknown Method'" />
+                                    </span>
+                                </h5>
+                                <!-- Ref number line – only if exists -->
+                                <t t-if="info.get('ref_number')">
+                                    <div class="small text-muted mt-1">
+                                        Ref:
+                                        <span class="font-weight-medium" t-esc="info.get('ref_number')" />
+                                    </div>
+                                </t>
+                                <!-- Expiration line – only if exists -->
+                                <t t-if="expire_date">
+                                    <div class="small text-muted mt-1">
+                                        Expires:
+                                        <span class="font-weight-medium" t-esc="expire_date" />
+                                    </div>
+                                </t>
+                            </div>
+                        </div>
+                        <div class="small mt-1 text-muted d-flex align-items-center">
+                            <span>Monthly total:</span>
+                            <span class="text-core-blue font-weight-bold ml-1 mr-1">
+                                <t t-set="price" t-value="group.total_amount" />
+                                <t t-if="price % 1 == 0" t-set="price" t-value="'{0}.-'.format(int(price))" />
+                                <t t-esc="price" />
+                                <t
+                                    t-if="group.contract_ids"
+                                    t-esc="group.contract_ids[0].pricelist_id.currency_id.name"
+                                />
+                            </span>
+                            <span class="mr-1 ml-1">
+
+                            </span>
+                            <span>
+                                <t t-esc="group.active_contract_count" />
+                                sponsorships
+                            </span>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <a
+                            href="#"
+                            class="mr-4 text-core-black opacity-50-hover"
+                            data-toggle="modal"
+                            data-target="#payment_method_selector_modal_update"
+                            t-att-data-group-id="group.id"
+                            t-att-data-ref-number="info.get('ref_number')"
+                            onclick="event.stopPropagation();
+                                    this.dispatchEvent(new CustomEvent('open_payment_method_update', {
+                                        bubbles: true,
+                                        detail: {
+                                            group_id: this.dataset.groupId,
+                                            method_info: {
+                                                ref_number: this.dataset.refNumber
+                                            }
+                                        }
+                                    }));
+                               "
+                        >
+                            <div class="text-dark-blue">
+                                <i t-attf-class="tiny-text icon-edit02" />
+                            </div>
+                        </a>
+                        <div class="text-core-black">
+                            <i class="fa fa-chevron-down oe_accordion_arrow" />
+                        </div>
+                    </div>
+                </div>
+                <div t-att-id="'group_collapse_%s' % group.id" class="collapse show rounded mt-3 mr-3 ml-3">
+                    <t t-foreach="group.contract_ids" t-as="sponsorship">
+                        <t t-if="sponsorship">
+                            <t t-if="sponsorship.state not in ['terminated', 'cancelled']">
+                                <div class="mb-3">
+                                    <t
+                                        t-set="profile_button_data"
+                                        t-value="{
+                                        'label': 'See profile',
+                                        'pictogram': 'child-sponsorship',
+                                        'action': 'link',
+                                        'href': '/my2/children/' + str(sponsorship.child_id.id),
+                                        'color': 'low-blue'
+                                    }"
+                                    />
+                                    <t
+                                        t-set="change_payment_data"
+                                        t-value="{
+                                           'label': 'Change',
+                                           'icon': 'edit02',
+                                           'action': 'event',
+                                           'custom_event': 'open_payment_method_change',
+
+                                           'color': 'low-blue',
+
+
+                                           'attributes': {
+                                               'data-contract-id': sponsorship.id,
+                                               'data-group-id': group.id,
+                                               'data-child-name': sponsorship.child_id.preferred_name or '',
+                                               'data-modal-type': 'Change'
+                                           },
+
+
+                                           'detail_js': '{
+                                               contract_id: this.dataset.contractId,
+                                               group_id: this.dataset.groupId,
+                                               child_name: this.dataset.childName,
+                                               modal_type: this.dataset.modalType
+                                           }'
+                                       }"
+                                    />
+                                    <t
+                                        t-set="secondary_buttons_data"
+                                        t-value="[
+                                        {
+                                            'icon': 'download01',
+                                            'color': 'mid-yellow',
+                                            'action': 'link',
+                                            'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),
+                                        }
+                                    ]"
+                                    />
+                                    <t t-call="my_compassion.DonationItemComponent">
+                                        <t t-set="name" t-value="sponsorship.child_id.preferred_name" />
+                                        <t
+                                            t-set="image"
+                                            t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait"
+                                        />
+                                        <t t-set="price" t-value="sponsorship.total_amount" />
+                                        <t t-set="inline_button" t-value="profile_button_data" />
+                                        <t t-set="primary_button" t-value="change_payment_data" />
+                                        <t t-set="monthly_noabbr" t-value="True" />
+                                        <t t-set="secondary_buttons" t-value="secondary_buttons_data" />
+                                        <t t-set="bg_color" t-value="'light-blue'" />
+                                        <t t-set="accent_color" t-value="'low-blue'" />
+                                        <t t-set="title_color" t-value="'low-blue'" />
+                                        <t t-set="price_color" t-value="'low-blue'" />
+                                    </t>
+                                </div>
+                            </t>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </template>
+</odoo>
diff --git a/my_compassion/templates/components/my2_payment_method_modal.xml b/my_compassion/templates/components/my2_payment_method_modal.xml
new file mode 100644
index 000000000..34f2836f8
--- /dev/null
+++ b/my_compassion/templates/components/my2_payment_method_modal.xml
@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!--
+    Description:
+
+     Injected data:
+    - modal_type: Type of modal to display (update, add, change).
+    - payment_methods: List of available payment methods to choose from (in case of 'change' and 'update' modals).
+
+-->
+<odoo>
+    <template id="my2_payment_method_selector" name="Payment Method Selector Component">
+        <div
+            class="modal fade"
+            t-att-id="'payment_method_selector_modal_' + modal_type"
+            t-att-data-modal-type="modal_type"
+            tabindex="-1"
+            role="dialog"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content border-0">
+                    <div class="p-0 m-0">
+                        <h3 class="text-center text-core-blue pb-2 pt-3">
+                            <t t-if="modal_type == 'update'">Update Payment Method</t>
+                            <t t-elif="modal_type == 'add'">Add Payment Method</t>
+                            <t t-elif="modal_type == 'change'">Change Payment Method</t>
+                        </h3>
+                        <div class="pl-4 pr-4 pt-3">
+                            <form id="payment_method_form">
+                                <input type="hidden" name="contract_group_id" id="selected_contract_group_id" />
+                                <div>
+                                    <t t-if="modal_type == 'update'">
+                                        <p class="text-center text-muted mb-3">
+                                            Update your payment method details below.
+                                        </p>
+                                    </t>
+                                    <t t-elif="modal_type == 'add'">
+                                        <p class="text-center text-muted mb-3">
+                                            Redirecting to add a new payment method
+                                        </p>
+                                    </t>
+                                    <t t-elif="modal_type == 'change'">
+                                        <p class="text-center text-muted mb-3" id="modal_description">
+                                            Select a new payment method from the options below.
+                                        </p>
+                                    </t>
+                                </div>
+                            </form>
+                            <t t-if="modal_type == 'change' or modal_type == 'update'">
+                                <!-- Container for Dynamic Cards -->
+                                <div id="modal_container" class="payment-methods-container mb-3">
+                                    <!-- JS will inject components here -->
+                                </div>
+                            </t>
+                            <t t-elif="modal_type == 'add'">
+                                <div id="add_payment_method_container" class="mb-3">
+                                    <t t-call="theme_compassion_2025.FormFieldComponent">
+                                        <t t-set="label">Payment Type</t>
+                                        <t t-set="input_id">new_method_type</t>
+                                        <t t-set="top_class">mb-3</t>
+                                        <t t-call="theme_compassion_2025.SelectComponent">
+                                            <t t-set="name">method_type</t>
+                                            <t t-set="id">new_method_type</t>
+                                            <option value="permanent_order" selected="selected">Permanent Order</option>
+                                            <option value="bvr">BVR</option>
+                                        </t>
+                                    </t>
+                                    <div class="form-row">
+                                        <div class="col-6">
+                                            <t t-call="theme_compassion_2025.FormFieldComponent">
+                                                <t t-set="label">Recurring Unit</t>
+                                                <t t-set="input_id">new_recurring_unit</t>
+                                                <t t-set="top_class">mb-3</t>
+                                                <t t-call="theme_compassion_2025.SelectComponent">
+                                                    <t t-set="name">recurring_unit</t>
+                                                    <t t-set="id">new_recurring_unit</t>
+                                                    <option value="month" selected="selected">Monthly</option>
+                                                    <option value="year">Yearly</option>
+                                                </t>
+                                            </t>
+                                        </div>
+                                        <div class="col-6">
+                                            <t t-call="theme_compassion_2025.FormFieldComponent">
+                                                <t t-set="label">Advance Billing (Months)</t>
+                                                <t t-set="input_id">new_advance_billing_months</t>
+                                                <t t-set="top_class">mb-3</t>
+                                                <input
+                                                    type="number"
+                                                    name="advance_billing_months"
+                                                    id="new_advance_billing_months"
+                                                    class="form-control"
+                                                    value="1"
+                                                    min="1"
+                                                />
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </t>
+                            <div class="modal-footer border-top-0">
+                                <a href="#" data-dismiss="modal">
+                                    <t t-call="theme_compassion_2025.ThemedButtonComponent">
+                                        <t t-set="variant" t-value="'compact'" />
+                                        <t t-set="variation" t-value="'hollow'" />
+                                        <t t-set="label" t-value="'Cancel'" />
+                                        <t t-set="color" t-value="'core-blue'" />
+                                        <t t-set="text_color" t-value="'core-blue'" />
+                                    </t>
+                                </a>
+                                <t t-call="theme_compassion_2025.ThemedButtonComponent">
+                                    <t t-set="variant" t-value="'compact'" />
+                                    <t t-set="variation" t-value="'filled'" />
+                                    <t t-set="label" t-value="'Save'" />
+                                    <t t-set="color" t-value="'core-blue'" />
+                                    <t t-set="text_color" t-value="'white'" />
+                                    <t t-set="id" t-value="'btn_save_payment_method'" />
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</odoo>
diff --git a/my_compassion/templates/components/my2_sponsorships_section.xml b/my_compassion/templates/components/my2_sponsorships_section.xml
new file mode 100644
index 000000000..a906ec24e
--- /dev/null
+++ b/my_compassion/templates/components/my2_sponsorships_section.xml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- Template: My Sponsorships Section
+
+Description:
+This partial template renders the list of active sponsorships grouped by their payment method.
+It is designed to be re-rendered and replaced via AJAX calls (Server-Side Rendering)
+when payment methods are added, updated, or changed, ensuring the view remains
+consistent without a full page reload.
+
+Used in:
+- Template: my2_my_donations_page (included for initial load)
+- Controller: /my2/donation/change_method_contract (returns HTML for AJAX replace)
+- Controller: /my2/donation/change_method_group (returns HTML for AJAX replace)
+- Controller: /my2/donation/add_payment_method_group (returns HTML for AJAX replace)
+
+Injected data:
+- active_sponsorships (recordset): A set of recurring.contract records for the partner (filtered for active, waiting, or mandate states).
+- sponsorship_groups (recordset): The recurring.contract.group records associated with the active sponsorships.
+- tot_cost_per_frequency (dict): A nested dictionary summing up costs. Structure: { frequency_interval (int): { currency (str): total_amount (float) } }.
+- payment_methods (list): A list of dictionaries containing display info (label, icon, type, id) for all the partner's available payment modes.
+- payment_methods_json (JSON): Available payment methods for the partner in JSON to pass to the JS.
+
+
+Notes:
+- This section is isolated to allow "Optimistic UI" updates via the controller's _prepare_sponsorship_values helper.
+
+-->
+<odoo>
+    <data>
+        <template id="my2_sponsorships_section" name="My Sponsorships List Section">
+            <div id="my_sponsorships_container" t-att-data-payment-methods="payment_methods_json">
+                <h3 class="text-dark-blue">My sponsorships</h3>
+                <p>
+                    You currently have
+                    <span class="body-small bold">
+                        <t t-esc="len(active_sponsorships)" />
+                    </span>
+                    active
+                    sponsorship(s) for a total of
+                    <!-- Currently only the monthly payments are available
+                     but in the future this should address also the other frequencies-->
+                    <t t-if="1 in tot_cost_per_frequency">
+                        <t t-foreach="tot_cost_per_frequency[1].items()" t-as="currency_total">
+                            <span class="body-small bold">
+                                <t t-esc="'%.2f' % currency_total[1]" />
+                                <t t-esc="currency_total[0]" />
+                                /month.
+                            </span>
+                            <t t-if="not currency_total_last">,</t>
+                        </t>
+                    </t>
+                    <br />
+                    A payment slip is available for download for each of
+                    your sponsored children.
+                </p>
+                <!-- SPONSORSHIP GROUPS -->
+                <t t-foreach="sponsorship_groups" t-as="group">
+                    <t t-call="my_compassion.my2_sponsorships_group_card">
+                        <t t-set="group" t-value="group" />
+                        <t t-set="all_groups" t-value="sponsorship_groups" />
+                    </t>
+                </t>
+                <!-- ADD PAYMENT METHOD BUTTON -->
+                <div class="d-flex flex-column align-items-center">
+                    <a
+                        href="#"
+                        data-toggle="modal"
+                        data-target="#payment_method_selector_modal_add"
+                        onclick="event.preventDefault();
+                                   this.dispatchEvent(new CustomEvent('open_payment_method_add', {
+                                        bubbles: true,
+                                        detail: {'modal_type': 'Add'}
+                                   }));"
+                    >
+                        <t t-call="theme_compassion_2025.ThemedButtonComponent">
+                            <t t-set="variant" t-value="'compact'" />
+                            <t t-set="variation" t-value="'filled'" />
+                            <t t-set="label" t-value="'Add a payment method'" />
+                            <t t-set="icon" t-value="'icon-plus'" />
+                            <t t-set="color" t-value="'dark-blue'" />
+                            <t t-set="text_color" t-value="'pure-white'" />
+                            <t t-set="icon_color" t-value="'pure-white'" />
+                        </t>
+                    </a>
+                </div>
+            </div>
+        </template>
+    </data>
+</odoo>
diff --git a/my_compassion/templates/my2_assets.xml b/my_compassion/templates/my2_assets.xml
index 7a4868c79..d068a0667 100644
--- a/my_compassion/templates/my2_assets.xml
+++ b/my_compassion/templates/my2_assets.xml
@@ -10,6 +10,7 @@
             <script type="text/javascript" src="/my_compassion/static/src/js/toast_service.js" />
             <script type="text/javascript" src="/my_compassion/static/src/js/my2_child_letters.js" />
             <script type="text/javascript" src="/my_compassion/static/src/js/my2_donation_form.js" />
+            <script type="text/javascript" src="/my_compassion/static/src/js/my2_donations.js" />
             <script
                 type="text/javascript"
                 src="/my_compassion/static/src/js/my2_bootstrap_scrollbar_compensate_override.js"
@@ -19,6 +20,7 @@
             <link rel="stylesheet" href="/my_compassion/static/src/css/my2_donation_item.css" />
             <link rel="stylesheet" href="/my_compassion/static/src/css/my2_donation_product.css" />
             <link rel="stylesheet" href="/my_compassion/static/src/css/my2_donation_form.css" />
+            <link rel="stylesheet" href="/my_compassion/static/src/css/my2_payment_modal.css" />
         </xpath>
         <!-- Loads files at the end of page -->
         <xpath expr="//script[last()]" position="after">
diff --git a/my_compassion/templates/pages/my2_donations.xml b/my_compassion/templates/pages/my2_donations.xml
index ede557daa..e89ca4c6c 100644
--- a/my_compassion/templates/pages/my2_donations.xml
+++ b/my_compassion/templates/pages/my2_donations.xml
@@ -17,6 +17,9 @@ Page: My Compassion 2 Donations Page
 
     Injected data:
     - active_sponsorships (recordset): Sponsorships in active state for the logged-in partner.
+    - sponsorship_groups (recordset): Sponsorship groups by payment methods linked to the partner.
+    - payment_methods (list): Available payment methods for the partner.
+    - payment_methods_json (JSON): Available payment methods for the partner in JSON to pass to the JS.
     - tot_cost_per_frequency (dict): Total sponsorship cost grouped by frequency and currency.
     - due_invoices (recordset): Outstanding invoices not yet paid.
     - paid_invoices_subset (recordset): Subset of paid invoices for donation history.
@@ -30,8 +33,22 @@ Page: My Compassion 2 Donations Page
     <data>
         <template id="my2_my_donations_page" name="My Account Donations Details">
             <t t-call="website.layout">
-                <div class="container">
-                    <div class="single-column">
+                <div class="container sponsorship-group">
+                    <div class="single-column my2-donations-page">
+                        <!-- 1. UPDATE MODAL (For editing a group) -->
+                        <t t-call="my_compassion.my2_payment_method_selector">
+                            <t t-set="modal_type" t-value="'update'" />
+                            <t t-set="payment_methods" t-value="payment_methods" />
+                        </t>
+                        <!-- 2. CHANGE MODAL (For moving a child to another group) -->
+                        <t t-call="my_compassion.my2_payment_method_selector">
+                            <t t-set="modal_type" t-value="'change'" />
+                            <t t-set="payment_methods" t-value="payment_methods" />
+                        </t>
+                        <!-- 3. ADD MODAL (For creating a new payment method) -->
+                        <t t-call="my_compassion.my2_payment_method_selector">
+                            <t t-set="modal_type" t-value="'add'" />
+                        </t>
                         <!-- TITLE-->
                         <div class="my-5">
                             <t t-call="theme_compassion_2025.TitleComponent">
@@ -81,76 +98,10 @@ Page: My Compassion 2 Donations Page
                                 </div>
                             </div>
                         </div>
-                        <!-- MY SPONSORSHIPS -->
-                        <div>
-                            <h3 class="text-dark-blue">My sponsorships</h3>
-                            <p>
-                                You currently have
-                                <span class="body-small bold">
-                                    <t t-esc="len(active_sponsorships)" />
-                                </span>
-                                active
-                                sponsorship(s) for a total of
-                                <!-- Currently only the monthly payments are available
-                                 but in the future this should address also the other frequencies-->
-                                <t t-if="1 in tot_cost_per_frequency">
-                                    <t t-foreach="tot_cost_per_frequency[1].items()" t-as="currency_total">
-                                        <span class="body-small bold">
-                                            <t t-esc="'%.2f' % currency_total[1]" />
-                                            <t t-esc="currency_total[0]" />
-                                            /month.
-                                        </span>
-                                        <t t-if="not currency_total_last">,</t>
-                                    </t>
-                                </t>
-                                <br />
-                                A payment slip is available for download for each of
-                                your sponsored children.
-                            </p>
-                            <t t-foreach="active_sponsorships" t-as="sponsorship">
-                                <t t-if="sponsorship">
-                                    <div class="mb-4">
-                                        <t
-                                            t-set="primary_button_data"
-                                            t-value="{
-                        'label': 'See profile',
-                        'pictogram': 'child-sponsorship',
-                        'action': 'link',
-                        'href': '/my2/children/' + str(sponsorship.child_id.id),
-                        'color': 'low-blue'
-                    }"
-                                        />
-                                        <t
-                                            t-set="secondary_buttons_data"
-                                            t-value="[
-                        {
-                            'icon': 'download01',
-                            'color': 'mid-yellow',
-                            'action': 'link',
-                            'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),
-                        }
-                    ]"
-                                        />
-                                        <t t-call="my_compassion.DonationItemComponent">
-                                            <t t-set="name" t-value="sponsorship.child_id.preferred_name" />
-                                            <t
-                                                t-set="image"
-                                                t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait"
-                                            />
-                                            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
-                                            <t t-set="price" t-value="sponsorship.total_amount" />
-                                            <t t-set="primary_button" t-value="primary_button_data" />
-                                            <t t-set="monthly_noabbr" t-value="True" />
-                                            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />
-                                            <t t-set="bg_color" t-value="'light-blue'" />
-                                            <t t-set="accent_color" t-value="'low-blue'" />
-                                            <t t-set="title_color" t-value="'low-blue'" />
-                                            <t t-set="price_color" t-value="'low-blue'" />
-                                        </t>
-                                    </div>
-                                </t>
-                            </t>
-                        </div>
+                        <!-- LIST OF SPONSORSHIPS -->
+                        <t t-call="my_compassion.my2_sponsorships_section">
+                            <t t-set="payment_methods_json" t-value="payment_methods_json" />
+                        </t>
                         <!-- DUE INVOICES -->
                         <div class="mb-4 mt-4">
                             <h3 class="text-dark-blue">Open contributions</h3>
@@ -191,7 +142,6 @@ Page: My Compassion 2 Donations Page
                         <t t-call="my_compassion.my2_donations_history_content" />
                     </div>
                 </div>
-                <script type="text/javascript" src="/my_compassion/static/src/js/my2_donations.js" />
                 <link rel="stylesheet" href="/my_compassion/static/src/css/my2_donations.css" />
             </t>
         </template>