diff --git a/.env.development b/.env.development
index c941df88e..9975eae53 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-REACT_APP_USE_MOCK_API=false
+REACT_APP_USE_MOCK_API=true
 REACT_APP_ENABLE_PERMISSIONS=false
\ No newline at end of file
diff --git a/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx b/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx
index e6b5e64ae..c984d22e2 100644
--- a/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx
+++ b/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -219,7 +221,7 @@ const DiseaseForm: FC<IDiseaseProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/exams/examForm/ExamForm.tsx b/src/components/accessories/admin/exams/examForm/ExamForm.tsx
index 09d06f90c..f22081d59 100644
--- a/src/components/accessories/admin/exams/examForm/ExamForm.tsx
+++ b/src/components/accessories/admin/exams/examForm/ExamForm.tsx
@@ -1,4 +1,6 @@
 import classnames from "classnames/dedupe";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { get, has, isEmpty } from "lodash";
 import React, {
@@ -343,7 +345,7 @@ const ExamForm: FC<IExamProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
index df745456a..6c76829a7 100644
--- a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
+++ b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -185,7 +187,7 @@ const HospitalForm: FC<IHospitalFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {hospitalStore.updateHospital.status === "FAIL" && (
diff --git a/src/components/accessories/admin/operations/operationForm/OperationForm.tsx b/src/components/accessories/admin/operations/operationForm/OperationForm.tsx
index c63424935..31eadf8f1 100644
--- a/src/components/accessories/admin/operations/operationForm/OperationForm.tsx
+++ b/src/components/accessories/admin/operations/operationForm/OperationForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { OperationDTOOpeForEnum } from "generated/models/OperationDTO";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
@@ -226,15 +228,7 @@ const OperationForm: FC<IOperationProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={isLoading || !formik.dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
index 0c2862c82..319e3afb3 100644
--- a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
+++ b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -223,14 +225,7 @@ const SupplierForm: FC<ISupplierFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              type="reset"
-              variant="text"
-              disabled={isLoading}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {resetButtonLabel}
-            </Button>
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx b/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx
index 593a0c642..a53584651 100644
--- a/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const AdmissionTypeForm: FC<IAdmissionTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx b/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx
index 299d89d15..9f32494a5 100644
--- a/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx
+++ b/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { AgeTypeDTO } from "generated";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
@@ -141,7 +143,7 @@ const AgeTypesForm: FC<IAgeTypesFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {updateAgeTypes.status === "FAIL" && (
diff --git a/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx b/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx
index db9ffb671..2432e7f4d 100644
--- a/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DeliveryTypeForm: FC<IDeliveryTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx b/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx
index f558aa2ba..5d877e823 100644
--- a/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -142,7 +144,7 @@ const DeliveryResultTypeForm: FC<IDeliveryResultTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx b/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx
index f3cc97a23..042ec34bb 100644
--- a/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DischargeTypeForm: FC<IDischargeTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx b/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx
index c64eb4552..4df2cf3c4 100644
--- a/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DiseaseTypeForm: FC<IDiseaseTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx b/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx
index 0da3b1b01..7858dec7c 100644
--- a/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -136,7 +138,7 @@ const ExamTypeForm: FC<IExamTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx b/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx
index 0c0960fd2..53a849cd7 100644
--- a/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const MedicalTypeForm: FC<IMedicalTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx b/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx
index 21c0c64b9..1e4511cfb 100644
--- a/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const OperationTypeForm: FC<IOperationTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx
index 9a48965d1..7cdb804a5 100644
--- a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -142,7 +144,7 @@ const PregnantTreatmentTypeForm: FC<IPregnantTreatmentTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx b/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx
index 4cce3f318..ac8902261 100644
--- a/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx
+++ b/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const VaccineTypeForm: FC<IVaccineTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
index 97741b785..72a83108b 100644
--- a/src/components/accessories/admin/users/editGroup/EditGroup.tsx
+++ b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -13,9 +13,10 @@ import TextField from "../../../textField/TextField";
 import { PATHS } from "../../../../../consts";
 import { usePermission } from "../../../../../libraries/permissionUtils/usePermission";
 
-import { ChevronLeft } from "@mui/icons-material";
 import { CircularProgress } from "@mui/material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { PermissionDTO } from "generated/models/PermissionDTO";
 import { UserGroupDTO } from "generated/models/UserGroupDTO";
 import { getAllPermissions } from "../../../../../state/permissions";
@@ -165,16 +166,7 @@ export const EditGroup = () => {
         <div className="editGroupForm">
           <div className="editGroupForm__header">
             <div className="editGroupForm__actions">
-              <Button
-                dataCy="cancel-form"
-                onClick={handleCancelConfirmationDialog(true)}
-                type="button"
-                variant="text"
-                color="primary"
-              >
-                <ChevronLeft fontSize="small" />
-                {t("common.discard")}
-              </Button>
+              <DiscardButton />
             </div>
           </div>
           <form className="editGroupForm__form" onSubmit={handleSubmit}>
@@ -272,15 +264,7 @@ export const EditGroup = () => {
                 </Button>
               </div>
               <div className="reset_button">
-                <Button
-                  dataCy="reset-form"
-                  type="reset"
-                  variant="text"
-                  disabled={update.isLoading || !dirty}
-                  onClick={handleResetConfirmationDialog(true)}
-                >
-                  {t("common.reset")}
-                </Button>
+                <ResetButton formik={formik as any} />
               </div>
             </div>
           </form>
diff --git a/src/components/accessories/admin/users/editUser/EditUserForm.tsx b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
index 3b292f1a0..2daf81e3e 100644
--- a/src/components/accessories/admin/users/editUser/EditUserForm.tsx
+++ b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
@@ -4,6 +4,7 @@ import {
   FormHelperText,
   TextField as MuiTextField,
 } from "@mui/material";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
 import { useFormik } from "formik";
 import React, { ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,13 +13,13 @@ import { useNavigate } from "react-router-dom";
 import { UserDTO, UserGroupDTO } from "../../../../../generated";
 
 import checkIcon from "../../../../../assets/check-icon.png";
-import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
 import TextField from "../../../textField/TextField";
 
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { PATHS } from "../../../../../consts";
 import "./styles.scss";
 import { userSchema } from "./validation";
@@ -198,38 +199,10 @@ export const EditUserForm = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={isLoading || !dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
       </form>
-      <ConfirmationDialog
-        isOpen={openCancelConfirmation}
-        title={t("common.discard")}
-        info={t("common.discardMessage")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.discard")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleCancelConfirmation}
-        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
-      />
-      <ConfirmationDialog
-        isOpen={openResetConfirmation}
-        title={t("common.reset")}
-        info={t("common.resetform")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.reset")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
-      />
       <ConfirmationDialog
         isOpen={hasSucceeded}
         title={t("user.updatedSuccessTitle")}
diff --git a/src/components/accessories/admin/users/newGroup/NewGroup.tsx b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
index bb90b648d..d1d4e5bce 100644
--- a/src/components/accessories/admin/users/newGroup/NewGroup.tsx
+++ b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
@@ -1,3 +1,4 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import React, { useCallback, useEffect } from "react";
@@ -5,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import checkIcon from "../../../../../assets/check-icon.png";
-import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -15,6 +15,7 @@ import { PATHS } from "../../../../../consts";
 import { UserGroupDTO } from "../../../../../generated";
 
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import {
   createUserGroup,
   createUserGroupReset,
@@ -129,38 +130,10 @@ export const NewGroup = () => {
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={create.isLoading || !dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
       </form>
-      <ConfirmationDialog
-        isOpen={openCancelConfirmation}
-        title={t("common.discard")}
-        info={t("common.discardMessage")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.discard")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleCancelConfirmation}
-        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
-      />
-      <ConfirmationDialog
-        isOpen={openResetConfirmation}
-        title={t("common.reset")}
-        info={t("common.resetform")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.reset")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
-      />
       <ConfirmationDialog
         isOpen={create.hasSucceeded}
         title={t("user.groupCreated")}
diff --git a/src/components/accessories/admin/users/newUser/NewUser.tsx b/src/components/accessories/admin/users/newUser/NewUser.tsx
index 6a8bb0583..eaa0b27c5 100644
--- a/src/components/accessories/admin/users/newUser/NewUser.tsx
+++ b/src/components/accessories/admin/users/newUser/NewUser.tsx
@@ -4,6 +4,7 @@ import {
   FormHelperText,
   TextField as MuiTextField,
 } from "@mui/material";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import React, { ReactNode, useCallback, useEffect } from "react";
@@ -18,6 +19,7 @@ import { IState } from "../../../../../types";
 
 import Button from "components/accessories/button/Button";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { UserDTO } from "generated/models/UserDTO";
 import { UserGroupDTO } from "generated/models/UserGroupDTO";
 import { PATHS } from "../../../../../consts";
@@ -206,15 +208,7 @@ export const NewUser = () => {
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={create.isLoading || !dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
         <ConfirmationDialog
diff --git a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
index fe9ed31b8..9e29cf41a 100644
--- a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
+++ b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -184,7 +186,7 @@ const VaccineForm: FC<IVaccineFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/components/accessories/admin/wards/wardForm/WardForm.tsx b/src/components/accessories/admin/wards/wardForm/WardForm.tsx
index 5ed83e38d..97f5c64d4 100644
--- a/src/components/accessories/admin/wards/wardForm/WardForm.tsx
+++ b/src/components/accessories/admin/wards/wardForm/WardForm.tsx
@@ -282,7 +282,7 @@ const WardForm: FC<IWardProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode
diff --git a/src/libraries/hooks/ui/useDiscardHelpers.ts b/src/libraries/hooks/ui/useDiscardHelpers.ts
index 68e3e1e19..fb3f000f7 100644
--- a/src/libraries/hooks/ui/useDiscardHelpers.ts
+++ b/src/libraries/hooks/ui/useDiscardHelpers.ts
@@ -41,7 +41,9 @@ export function useDiscardHelpers() {
     } else {
       navigate(-1);
     }
-    setOpenCancelConfirmation(false);
+    setTimeout(() => {
+      setOpenCancelConfirmation(false);
+    }, 500);
   }, [
     navigate,
     setOpenCancelConfirmation,