Fixed

frontend/src/app/components/alerts/Alert.jsx

@@ -24,12 +24,18 @@ const Alert = (props) => {
         </div>
         <div className={styles.alertBody}>
           <p>
-            You are about to add a new record. Please review the details before
-            continuing. Do you want to proceed?
+            {props?.body ||
+              " You are about to add a new record. Please review the details before continuing. Do you want to proceed?"}
           </p>
         </div>
         <div className={styles.actionButtons}>
-          <PrimaryButton text="Confirm" onClick={handleHide} />
+          <PrimaryButton
+            text="Confirm"
+            onClick={() => {
+              props?.setEditState(false);
+              handleHide();
+            }}
+          />
           <SecondaryButton text="Cancel" onClick={handleHide} />
         </div>
       </div>

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -37,8 +37,9 @@ const TopHeader = (props) => {
       {triggerAlert && (
         <Alert
           setTriggerAlert={setTriggerAlert}
-          onClick={() => setEditState(true)}
-          title={props.topbarTitle}
+          setEditState={setEditState}
+          title={!editState ? props.topbarTitle : "Save Changes"}
+          body="You are about to save the changes. Do you want to continue?"
         />
       )}
       <div className={styles.container}>
@@ -91,7 +92,9 @@ const TopHeader = (props) => {
                 text="Save"
                 form="form"
                 type="submit"
-                /*   onClick={() => setTriggerAlert(!triggerAlert)} */
+                onClick={() =>
+                  editState ? setTriggerAlert(!triggerAlert) : ""
+                }
                 icon={<CheckIcon width={20} height={20} />}
               />