diff --git a/services/common/src/components/forms/BaseInput.tsx b/services/common/src/components/forms/BaseInput.tsx
index 5f0c485991..ed0c336a5c 100644
--- a/services/common/src/components/forms/BaseInput.tsx
+++ b/services/common/src/components/forms/BaseInput.tsx
@@ -80,7 +80,7 @@ interface BaseViewInputProps {
 }
 export const BaseViewInput: FC<BaseViewInputProps> = ({ label = "", value = "" }) => {
   return (
-    <div className="view-item">
+    <div className="view-item ant-form-item">
       {label && label !== "" && (
         <Typography.Paragraph className="view-item-label">{label}</Typography.Paragraph>
       )}
diff --git a/services/common/src/components/forms/FormWrapper.tsx b/services/common/src/components/forms/FormWrapper.tsx
index ac3dd07489..707f047d55 100644
--- a/services/common/src/components/forms/FormWrapper.tsx
+++ b/services/common/src/components/forms/FormWrapper.tsx
@@ -89,15 +89,16 @@ const FormWrapper: FC<FormWrapperProps & InjectedFormProps<any>> = ({
     }
   }, [isEditMode]);
 
-  const handleSubmit = (values) => {
+  const handleSubmit = async (values) => {
     dispatch(submit(props.name));
     if (!formErrors) {
-      props.onSubmit(values);
+      await props.onSubmit(values);
     }
   };
 
-  const formClassName =
-    `common-form common-form-${props.name} form-` + isEditMode ? "edit" : "view";
+  const formClassName = `common-form common-form-${props.name} form-${
+    isEditMode ? "edit" : "view"
+  }`;
 
   return (
     <FormProvider value={providerValues}>
diff --git a/services/common/src/components/forms/RenderSubmitButton.tsx b/services/common/src/components/forms/RenderSubmitButton.tsx
new file mode 100644
index 0000000000..f1f847f5cf
--- /dev/null
+++ b/services/common/src/components/forms/RenderSubmitButton.tsx
@@ -0,0 +1,38 @@
+import React, { FC, ReactNode, useContext } from "react";
+import { useSelector } from "react-redux";
+import { isDirty, isSubmitting } from "redux-form";
+import { FormContext } from "./FormWrapper";
+import { Button } from "antd";
+import { BaseButtonProps } from "antd/lib/button/button";
+
+interface RenderSubmitButtonProps {
+  buttonText?: string | ReactNode;
+  buttonProps?: BaseButtonProps;
+}
+
+const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
+  buttonText = "Save Changes",
+  buttonProps,
+}) => {
+  const { formName, isEditMode } = useContext(FormContext);
+  const submitting = useSelector(isSubmitting(formName));
+  const isFormDirty = useSelector(isDirty(formName));
+
+  return (
+    <>
+      {isEditMode && (
+        <Button
+          type="primary"
+          disabled={!isFormDirty || submitting}
+          loading={submitting}
+          htmlType="submit"
+          {...buttonProps}
+        >
+          {buttonText}
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default RenderSubmitButton;
diff --git a/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap b/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap
index 229bb939b9..f86ec102ff 100644
--- a/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap
+++ b/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RenderCancelButton component renders properly, does not show confirm on pristine form 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-FORM_NAME form-edit"
     id="FORM_NAME"
   >
     <button
diff --git a/services/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap
index 871fc6e1ed..1739775d89 100644
--- a/services/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap
+++ b/services/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AuthorizationsInvolved renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <div
diff --git a/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap
index 2c2bd75f87..aba829b195 100644
--- a/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap
+++ b/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`BasicInformation renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <h3
diff --git a/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap
index aba766c807..57b34df19c 100644
--- a/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap
+++ b/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Declaration renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <div
diff --git a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap
index d538fc51d3..fb3499c369 100644
--- a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap
+++ b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReportDetailsForm renders edit mode properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-edit"
     id="VIEW_EDIT_REPORT"
   >
     <div>
@@ -720,7 +720,7 @@ exports[`ReportDetailsForm renders edit mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -739,7 +739,7 @@ exports[`ReportDetailsForm renders edit mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
diff --git a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap
index 16349be75e..47b600999c 100644
--- a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap
+++ b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReportDetailsForm renders view mode properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-view"
     id="VIEW_EDIT_REPORT"
   >
     <div>
@@ -283,7 +283,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -302,7 +302,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -332,7 +332,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -351,7 +351,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -370,7 +370,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -389,7 +389,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -429,7 +429,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -448,7 +448,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
diff --git a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx
index 544e340d25..03cc794ca4 100644
--- a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx
+++ b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { change, Field, reset } from "redux-form";
+import { change, Field, initialize, reset } from "redux-form";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
 import PlusOutlined from "@ant-design/icons/PlusOutlined";
 import { Button, Input, Row, Table, Typography } from "antd";
@@ -52,6 +52,7 @@ const ComplianceCodeManagement: FC = () => {
     if (complianceCodes) {
       const newList = Object.values(complianceCodes).sort(sortComplianceCodesByArticleNumber);
       setFilteredRecordsList(newList);
+      dispatch(initialize(FORM.COMPLIANCE_CODE_BULK_EDIT, complianceCodes));
     }
   }, [complianceCodes]);
 
@@ -78,8 +79,8 @@ const ComplianceCodeManagement: FC = () => {
     }
   };
 
-  const handleModalSave = (values: IComplianceArticle) => {
-    dispatch(
+  const handleModalSave = async (values: IComplianceArticle) => {
+    await dispatch(
       change(FORM.COMPLIANCE_CODE_BULK_EDIT, `${formPrefix}${values.compliance_article_id}`, values)
     );
   };
@@ -271,6 +272,7 @@ const ComplianceCodeManagement: FC = () => {
           <Button
             onClick={() => openAddModal()}
             disabled={isEditMode}
+            loading={isLoading}
             type="primary"
             icon={<PlusOutlined />}
           >
@@ -311,7 +313,11 @@ const ComplianceCodeManagement: FC = () => {
                           </Button>
                         </>
                       ) : (
-                        <Button onClick={() => setIsEditMode(true)} type="primary">
+                        <Button
+                          onClick={() => setIsEditMode(true)}
+                          type="primary"
+                          loading={isLoading}
+                        >
                           Edit Expiry Dates
                         </Button>
                       )}
diff --git a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx
index bd9329aeeb..6dec01bfe1 100644
--- a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx
+++ b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx
@@ -21,6 +21,7 @@ import RenderDate from "@mds/common/components/forms/RenderDate";
 import RenderRadioButtons from "@mds/common/components/forms/RenderRadioButtons";
 import RenderAutoSizeField from "@mds/common/components/forms/RenderAutoSizeField";
 import RenderCancelButton from "@mds/common/components/forms/RenderCancelButton";
+import RenderSubmitButton from "@mds/common/components/forms/RenderSubmitButton";
 import {
   formatComplianceCodeArticleNumber,
   stripParentheses,
@@ -66,7 +67,7 @@ const ComplianceCodeViewEditForm: FC<{
     }
   }, [section, sub_section, paragraph, sub_paragraph]);
 
-  const handleSubmit = (values: IComplianceArticle) => {
+  const handleSubmit = async (values: IComplianceArticle) => {
     const cim_or_cpo =
       values.cim_or_cpo !== REPORT_REGULATORY_AUTHORITY_CODES.NONE ? values.cim_or_cpo : null;
     const payload = { ...values, article_act_code: "HSRCM", cim_or_cpo };
@@ -89,7 +90,7 @@ const ComplianceCodeViewEditForm: FC<{
         isEditMode={isEditMode}
         isModal={true}
       >
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={24}>
             <Typography.Text strong>HSRC Details</Typography.Text>
           </Col>
@@ -127,7 +128,7 @@ const ComplianceCodeViewEditForm: FC<{
             />
           </Col>
         </Row>
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={24} className="hide-required-indicator">
             <Field
               id="articleNumber"
@@ -139,7 +140,7 @@ const ComplianceCodeViewEditForm: FC<{
             />
           </Col>
         </Row>
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={12}>
             <Field
               name="effective_date"
@@ -221,11 +222,7 @@ const ComplianceCodeViewEditForm: FC<{
         </Row>
         <Row gutter={[16, 16]} justify="end">
           <RenderCancelButton />
-          {isEditMode && (
-            <Button htmlType="submit" type="primary">
-              Save Code
-            </Button>
-          )}
+          <RenderSubmitButton buttonText="Save Code" />
         </Row>
       </FormWrapper>
     </div>
diff --git a/services/core-web/src/styles/components/Forms.scss b/services/core-web/src/styles/components/Forms.scss
index ed1ecf4a55..536af5bf1b 100644
--- a/services/core-web/src/styles/components/Forms.scss
+++ b/services/core-web/src/styles/components/Forms.scss
@@ -72,6 +72,10 @@
   margin-bottom: 10px;
 }
 
+.common-form.form-view .ant-row.form-row-margin {
+  margin-bottom: 1em;
+}
+
 .vertical-radio-group {
   display: flex;
   flex-direction: column;
diff --git a/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage-prr.spec.tsx.snap b/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage-prr.spec.tsx.snap
index 8092838ea6..e69eac3765 100644
--- a/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage-prr.spec.tsx.snap
+++ b/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage-prr.spec.tsx.snap
@@ -252,7 +252,7 @@ exports[`ReportPage renders view mode properly 1`] = `
     </div>
     <div>
       <form
-        class="ant-form ant-form-vertical edit"
+        class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-view"
         id="VIEW_EDIT_REPORT"
       >
         <div
@@ -534,7 +534,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -553,7 +553,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -572,7 +572,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -602,7 +602,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -621,7 +621,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -640,7 +640,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -659,7 +659,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -699,7 +699,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -718,7 +718,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
diff --git a/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage.spec.tsx.snap b/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage.spec.tsx.snap
index 0378315c19..2741ca999f 100644
--- a/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage.spec.tsx.snap
+++ b/services/core-web/src/tests/components/Forms/reports/__snapshots__/ReportPage.spec.tsx.snap
@@ -254,7 +254,7 @@ exports[`ReportPage renders view mode properly 1`] = `
     </div>
     <div>
       <form
-        class="ant-form ant-form-vertical edit"
+        class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-view"
         id="VIEW_EDIT_REPORT"
       >
         <div
@@ -536,7 +536,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -555,7 +555,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -585,7 +585,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -604,7 +604,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -623,7 +623,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -642,7 +642,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -682,7 +682,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
@@ -701,7 +701,7 @@ exports[`ReportPage renders view mode properly 1`] = `
             style="padding: 4px 8px 4px 8px;"
           >
             <div
-              class="view-item"
+              class="view-item ant-form-item"
             >
               <div
                 class="ant-typography view-item-label"
diff --git a/services/core-web/src/tests/components/Forms/reports/__snapshots__/RequestReportForm.spec.tsx.snap b/services/core-web/src/tests/components/Forms/reports/__snapshots__/RequestReportForm.spec.tsx.snap
index df5111d361..f853cad37e 100644
--- a/services/core-web/src/tests/components/Forms/reports/__snapshots__/RequestReportForm.spec.tsx.snap
+++ b/services/core-web/src/tests/components/Forms/reports/__snapshots__/RequestReportForm.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`RequestReportForm renders form properly 1`] = `
   style="min-height: 380px;"
 >
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-REQUEST_REPORT form-edit"
     id="REQUEST_REPORT"
   >
     <div
diff --git a/services/core-web/src/tests/components/admin/__snapshots__/ComplianceCodeManagement.spec.tsx.snap b/services/core-web/src/tests/components/admin/__snapshots__/ComplianceCodeManagement.spec.tsx.snap
index 4c031051c6..a93bf8c69f 100644
--- a/services/core-web/src/tests/components/admin/__snapshots__/ComplianceCodeManagement.spec.tsx.snap
+++ b/services/core-web/src/tests/components/admin/__snapshots__/ComplianceCodeManagement.spec.tsx.snap
@@ -204,7 +204,7 @@ exports[`PermitConditionsNavigation renders properly 1`] = `
       </button>
     </div>
     <form
-      class="ant-form ant-form-vertical edit"
+      class="ant-form ant-form-vertical common-form common-form-COMPLIANCE_CODE_BULK_EDIT form-edit"
       id="COMPLIANCE_CODE_BULK_EDIT"
     >
       <div