diff --git a/src/components/PaymentPlanForm.js b/src/components/PaymentPlanForm.js
index 624c1ed..d385498 100644
--- a/src/components/PaymentPlanForm.js
+++ b/src/components/PaymentPlanForm.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react";
+import React, { Component } from "react";
 import {
     Form,
     withModulesManager,
@@ -22,6 +22,7 @@ const styles = theme => ({
     paperHeader: theme.paper.header,
     paperHeaderAction: theme.paper.action,
     item: theme.paper.item,
+    lockedPage: theme.page.locked,
 });
 
 class PaymentPlanForm extends Component {
@@ -31,6 +32,7 @@ class PaymentPlanForm extends Component {
             paymentPlan: {},
             jsonExtValid: true,
             requiredValid: false,
+            clientMutationId: null,
         };
     }
 
@@ -48,6 +50,9 @@ class PaymentPlanForm extends Component {
         }
         if (prevProps.submittingMutation && !this.props.submittingMutation) {
             this.props.journalize(this.props.mutation);
+            this.setState((state, props) => ({
+              clientMutationId: props.mutation.clientMutationId,
+            }));
         }
     }
 
@@ -96,9 +101,17 @@ class PaymentPlanForm extends Component {
     setRequiredValid = (valid) => this.setState({ requiredValid: !!valid });
 
     render() {
-        const { intl, back, paymentPlanId, title, save, isReplacing = false } = this.props;
+        const {
+          intl,
+          back,
+          paymentPlanId,
+          save,
+          isReplacing = false,
+          classes,
+        } = this.props;
+        const shouldBeLocked = Boolean(this.state.clientMutationId);
         return (
-            <Fragment>
+            <div className={shouldBeLocked ? classes.lockedPage : null}>
                 <Helmet title={formatMessageWithValues(this.props.intl, "paymentPlan", "paymentPlan.page.title", this.titleParams())} />
                 <Form
                     module="paymentPlan"
@@ -117,8 +130,9 @@ class PaymentPlanForm extends Component {
                     paymentPlanId={paymentPlanId}
                     isReplacing={isReplacing}
                     openDirty={save}
+                    readOnly={shouldBeLocked}
                 />
-            </Fragment>
+            </div>
         )
     }
 }
diff --git a/src/components/PaymentPlanHeadPanel.js b/src/components/PaymentPlanHeadPanel.js
index 06d1c1c..733ed0a 100644
--- a/src/components/PaymentPlanHeadPanel.js
+++ b/src/components/PaymentPlanHeadPanel.js
@@ -130,6 +130,7 @@ class PaymentPlanHeadPanel extends FormPanel {
             isCodeValid,
             isCodeValidating,
             validationError,
+            readOnly = false,
         }
             = this.props;
         const { benefitPlan: productOrBenefitPlan, calculation: calculationId, ...others } = this.props.edited;
@@ -191,6 +192,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                         variant="outlined" 
                         color="#DFEDEF" 
                         className={classes.button}
+                        disabled={readOnly}
                         style={{ 
                           border: "0px",
                           textAlign: "right",
@@ -207,7 +209,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                             <PaymentPlanTypePicker
                                 module="contributionPlan"
                                 label="type"
-                                readOnly={!!paymentPlan.id}
+                                readOnly={!!paymentPlan.id || readOnly}
                                 withNull={false}
                                 required
                                 value={paymentPlan?.benefitPlanTypeName?.replace(/\s+/g, '') ?? ''}
@@ -221,7 +223,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                                 label="code"
                                 required={true}
                                 value={!!paymentPlan.code ? paymentPlan.code : ""}
-                                readOnly={!!paymentPlan.id}
+                                readOnly={!!paymentPlan.id || readOnly}
                                 itemQueryIdentifier="paymentPlanCode"
                                 codeTakenLabel="paymentPlan.codeTaken"
                                 shouldValidate={this.shouldValidate}
@@ -239,6 +241,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                             <TextInput
                                 module="contributionPlan"
                                 label="name"
+                                readOnly={readOnly}
                                 required
                                 value={!!paymentPlan.name ? paymentPlan.name : ""}
                                 onChange={(v) => this.updateAttribute("name", v)}
@@ -251,6 +254,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                                 value={!!calculationId ? calculationId : null}
                                 onChange={this.updateAttribute}
                                 context={paymentPlanType}
+                                readOnly={readOnly}
                                 required
                             />
                         </Grid>
@@ -260,6 +264,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                                     ? "product.ProductPicker"
                                     : "socialProtection.BenefitPlanPicker"}
                                 withNull={true}
+                                readOnly={readOnly}
                                 label={formatMessage(intl, "paymentPlan", "benefitPlan")}
                                 required
                                 value={paymentPlan.benefitPlan !== undefined && paymentPlan.benefitPlan !== null ? (isEmptyObject(paymentPlan.benefitPlan) ? null : paymentPlan.benefitPlan) : null}
@@ -270,6 +275,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                             <Grid item xs={GRID_ITEM_SIZE} className={classes.item}>
                                 <NumberInput
                                     module="contributionPlan"
+                                    readOnly={readOnly}
                                     label="periodicity"
                                     required
                                     /**
@@ -286,6 +292,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                             <PublishedComponent
                                 pubRef="core.DatePicker"
                                 module="contributionPlan"
+                                readOnly={readOnly}
                                 label="dateValidFrom"
                                 required
                                 value={!!paymentPlan.dateValidFrom ? paymentPlan.dateValidFrom : null}
@@ -296,6 +303,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                             <PublishedComponent
                                 pubRef="core.DatePicker"
                                 module="contributionPlan"
+                                readOnly={readOnly}
                                 label="dateValidTo"
                                 value={!!paymentPlan.dateValidTo ? paymentPlan.dateValidTo : null}
                                 onChange={(v) => this.updateAttribute("dateValidTo", v)}
@@ -318,6 +326,7 @@ class PaymentPlanHeadPanel extends FormPanel {
                                 intl={intl}
                                 className={PAYMENTPLAN_CLASSNAME}
                                 entity={paymentPlan}
+                                readOnly={readOnly}
                                 requiredRights={[!!paymentPlan.id ? RIGHT_CALCULATION_UPDATE : RIGHT_CALCULATION_WRITE]}
                                 value={!!paymentPlan.jsonExt ? paymentPlan.jsonExt : null}
                                 onChange={this.updateAttribute}
@@ -355,7 +364,9 @@ class PaymentPlanHeadPanel extends FormPanel {
                                         setAppliedFiltersRowStructure={this.setAppliedFiltersRowStructure}
                                         updateAttributes={this.updateJsonExt}
                                         getDefaultAppliedCustomFilters={this.getDefaultAppliedCustomFilters}
-                                        edited={this.props.edited} />
+                                        edited={this.props.edited}
+                                        readOnly={readOnly}
+                                        />
 
                                 </Grid>
                             </Fragment>
diff --git a/src/dialogs/AdvancedCriteriaDialog.js b/src/dialogs/AdvancedCriteriaDialog.js
index 3350f08..35eca1f 100644
--- a/src/dialogs/AdvancedCriteriaDialog.js
+++ b/src/dialogs/AdvancedCriteriaDialog.js
@@ -40,6 +40,7 @@ const AdvancedCriteriaDialog = ({
   additionalParams,
   confirmed,
   edited,
+  readOnly = false,
 }) => {
 
   const [isOpen, setIsOpen] = useState(false);
@@ -157,32 +158,33 @@ const AdvancedCriteriaDialog = ({
               index={index}
               filters={filters}
               setFilters={setFilters}
-              readOnly={confirmed}
+              readOnly={confirmed || readOnly}
             />)
           })}
           { !confirmed ? (
           <div 
             style={{ backgroundColor: "#DFEDEF", paddingLeft: "10px", paddingBottom: "10px" }}
           >
-            <AddCircle 
-              style={{ 
-                border: "thin solid", 
-                borderRadius: "40px", 
-                width: "16px", 
-                height: "16px" 
-              }} 
-              onClick={handleAddFilter}
-              disabled={confirmed}
-            />
+
             <Button 
               onClick={handleAddFilter} 
               variant="outlined"
+              startIcon={
+                <AddCircle
+                  style={{
+                    border: 'thin solid',
+                    borderRadius: '40px',
+                    width: '16px',
+                    height: '16px',
+                  }}
+                />
+              }
               style={{ 
                 border: "0px", 
                 "marginBottom": "6px", 
                 fontSize: "0.8rem" 
               }}
-              disabled={confirmed}
+              disabled={confirmed || readOnly}
             >
               {formatMessage(intl, "paymentPlan", "paymentPlan.advancedCriteria.button.addFilters")}
             </Button>
@@ -196,7 +198,7 @@ const AdvancedCriteriaDialog = ({
               style={{
                 border: '0px',
               }}
-              disabled={confirmed}
+              disabled={confirmed || readOnly}
             >
               {formatMessage(intl, 'individual', 'paymentPlan.advancedCriteria.button.clearAllFilters')}
             </Button>
@@ -211,7 +213,7 @@ const AdvancedCriteriaDialog = ({
               variant="contained" 
               color="primary" 
               autoFocus
-              disabled={!object || confirmed}
+              disabled={!object || confirmed || readOnly}
             >
               {formatMessage(intl, "paymentPlan", "paymentPlan.advancedCriteria.button.filter")}
             </Button>