diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.tsx b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
index 2ba9c110..22a9fe1a 100644
--- a/frontend/src/Commons/Forms/FormModule/FormModule.tsx
+++ b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
@@ -35,7 +35,7 @@ interface FormModuleProps {
   fertilizersDetails?: FertilizerInterface[];
   toggleEnabled?: boolean;
   updateFarmDetails(farmDetails: FarmDetailsInterface, inputModuleID: string): void;
-  updateFertDetails(nutrientDetails: FertilizerInterface[]): void;
+  updateFertDetails(nutrientDetails: FertilizerInterface[], moveNext?: boolean): void;
   handleFormState(cmd: string, toggle?: boolean, status?: string): void;
 }
 
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
index 9ab6141c..f12414bd 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
@@ -294,6 +294,21 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
     return [];
   };
 
+  const removeFertFromField = (field: FieldDetailInterface, fertilizer: FertilizerInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const fertIdx = updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.findIndex(
+      (f) => f === fertilizer,
+    );
+
+    updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.splice(fertIdx, 1);
+    updateFarmDetails(updatedFarmDetails, CALCULATE_NUTRIENTS);
+  };
+
   return (
     <>
       <Formik
@@ -443,6 +458,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                     field={farmDetails.Fields[selectedFieldIndex]}
                     cropBalances={cropBalances}
                     resultBalance={resultBalance}
+                    removeFert={removeFertFromField}
                   />
                 )}
             </StyledFieldContainer>
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
index 4d7da4c0..29cff664 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
@@ -12,6 +12,8 @@ const StyledH3Container = styled.div`
   align-items: center;
   justify-content: center;
   width: 70%;
+  margin: 0;
+  padding: 0;
 
   .blankSpace {
     display: none;
@@ -67,11 +69,18 @@ const StyledAgronomic = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-    margin: 28px auto 48px auto;
+  margin: 28px auto 48px auto;
+
+  td {
+    text-align: center;
+  }
 
   @media (min-width: ${screenSizes.desktop}) {
     width: 90%;
-
+    button {
+      display: none;
+    }
+  }
 `;
 
 const StyledRemoval = styled.div`
@@ -80,7 +89,7 @@ const StyledRemoval = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-  margin: 28px auto 48px auto;
+  margin: 18px auto 48px auto;
 
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -103,6 +112,10 @@ const StyledTable = styled.table<TableProps>`
     text-align: center;
   }
 
+  .th-crop {
+    width: 50%;
+  }
+
   tbody tr:nth-of-type(${(props) => (props.twoCrops ? 'even' : 'odd')}) {
     background-color: ${tokens.themeGray30};
   }
@@ -122,6 +135,8 @@ const StyledTable = styled.table<TableProps>`
 
   h4 {
     font: ${tokens.typographyBoldBody};
+    margin: 0;
+    padding: 0;
   }
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -136,6 +151,9 @@ const StyledTable = styled.table<TableProps>`
     .cropRemovalCol1 {
       display: none;
     }
+    .delBtnSpacer {
+      display: none;
+    }
   }
 `;
 
@@ -143,7 +161,7 @@ const StyledPBalance = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 11px;
+  gap: 5px;
   p {
     font: ${tokens.typographyRegularSmallBody};
     padding: 0;
@@ -159,7 +177,7 @@ const StyledPBalance = styled.div`
 
 const FontAwesomeContainer = styled.div`
   font-size: 16px;
-  margin-left: -28px;
+  margin-left: -20px;
 
   @media (min-width: ${screenSizes.desktop}) {
     font-size: 24px;
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
index b0c550f7..3075a826 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -1,7 +1,11 @@
 import { FC } from 'react';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
 import FertilizerInterface from '@Interface/FertilizerInterface';
-import { faCircleCheck, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCircleCheck,
+  faTrashCan,
+  faTriangleExclamation,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MainBalanceInterface from '@Interface/MainBalanceInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
@@ -22,11 +26,17 @@ interface CalculationListProps {
   field: FieldDetailInterface;
   cropBalances: MainBalanceInterface[];
   resultBalance: MainBalanceInterface;
+  removeFert(field: FieldDetailInterface, fertilizer: FertilizerInterface): void;
 }
 
 const zeroConstant: number = 0;
 
-const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, resultBalance }) => {
+const CalculationList: FC<CalculationListProps> = ({
+  field,
+  cropBalances,
+  resultBalance,
+  removeFert,
+}) => {
   const getResultsIcon = (nutrient: number) =>
     nutrient >= 0 ? faCircleCheck : faTriangleExclamation;
 
@@ -46,7 +56,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
         <StyledTable twoCrops={field.Crops.length > 1}>
           <thead>
             <tr>
-              <th>
+              <th className="th-crop">
                 <h4 className="col1">Crop</h4>
               </th>
               <th>
@@ -77,6 +87,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.agronomic?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4 className="delBtnSpacer">&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -97,7 +110,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -110,6 +123,16 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          type="button"
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete button"
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}
@@ -129,6 +152,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>
 
@@ -216,6 +242,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.cropRemoval?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4>&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -236,7 +265,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="cropRemovalCol1 col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -249,6 +278,16 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          type="button"
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete fertilizer from field"
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}
@@ -268,6 +307,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>
 
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
index 973d8917..248ad6dc 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -48,7 +48,7 @@ import CropsButtonGroup from './CropsButtonGroup';
 const checkHasCrops = (Fields: FieldDetailInterface[]) => {
   let hasCrop = false;
   Fields.forEach((field) => {
-    if (field.Crops.length > 0) {
+    if (field.Crops && field.Crops.length > 0) {
       hasCrop = true;
     }
   });
@@ -82,7 +82,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
   handleFormState,
   toggleEnabled,
 }) => {
-  const [, setCropsInfo] = useState(farmDetails);
+  const [, setFarmDetails] = useState(farmDetails);
   const [cropInitialValues, setInitialFieldValues] = useState(initialValues);
   // Only triggered once, it would show list and persists.
   const [fieldHasCrop, setFieldHasCrop] = useState<boolean>(checkHasCrops(farmDetails.Fields));
@@ -163,9 +163,9 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     );
   };
 
-  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number, cropIdx: number): void => {
+  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number): void => {
     const newCrop: CropsDetailsInterface = {
-      id: cropIdx,
+      id: farmDetails.Fields[fieldIdx].Crops?.length ?? 0,
       cropId: values.cropId,
       yield: values.yield,
       plantAgeYears: values.plantAgeYears,
@@ -180,14 +180,27 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     };
 
     setTimeout(() => {
-      farmDetails.Fields[fieldIdx].Crops.push(newCrop);
-      setCropsInfo(farmDetails);
+      farmDetails.Fields[fieldIdx].Crops?.push(newCrop);
+      setFarmDetails(farmDetails);
       showFormHandler(fieldIdx);
       setInitialFieldValues(initialValues);
       setFieldHasCrop(checkHasCrops(farmDetails.Fields));
     }, 400);
   };
 
+  const removeCrop = (field: FieldDetailInterface, crop: CropsDetailsInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const cropIdx = updatedFarmDetails.Fields[fieldIdx].Crops?.findIndex((c) => c === crop);
+
+    updatedFarmDetails.Fields[fieldIdx].Crops?.splice(cropIdx ?? 0, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
   const submitFarmInfo = () => {
     updateFarmDetails(farmDetails, CROPS_INFORMATION);
   };
@@ -203,13 +216,14 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
           <CropsList
             field={field}
             farmDetails={farmDetails}
+            removeCrop={removeCrop}
           />
 
           <Formik
             initialValues={cropInitialValues}
             validationSchema={validationSchema}
             onSubmit={(values, { resetForm }) => {
-              addCrop(values, index, field.Crops.length);
+              addCrop(values, index);
               resetForm();
             }}
             validate={(values) => {
@@ -354,7 +368,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
             }
           </Formik>
 
-          {!hasFieldBeenSelected[index] && field.Crops.length < 2 && (
+          {!hasFieldBeenSelected[index] && (field.Crops?.length ?? 0) < 2 && (
             <StyledNewFieldButtonContainer formCrops>
               <StyledNewFieldButtonController>
                 <Button
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
index e6c46435..8ed81514 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
@@ -20,6 +20,13 @@ const StyledListContainer = styled.div`
   gap: 4px;
   align-items: flex-start;
 
+  .CropsList {
+    align-items: flex-start;
+    button {
+      margin-top: 1px;
+    }
+  }
+
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
     gap: 110px;
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
index bc11b50b..15138bfb 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -2,15 +2,18 @@ import { FC } from 'react';
 import FarmDetailsInterface from '@Interface/FarmDetailsInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
+import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { StyledListItem, StyledCropsGroup } from '../ListComponent.styles';
 import { StyledListContainer, StyledFieldInfoList } from './CropsList.styles';
 
 interface CropsListComponentProps {
   field: FieldDetailInterface;
   farmDetails: FarmDetailsInterface;
+  removeCrop(field: FieldDetailInterface, crop: CropsDetailsInterface): void;
 }
 
-const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field }) => {
+const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field, removeCrop }) => {
   const fieldIndex = farmDetails.Fields.indexOf(field);
   return (
     <StyledFieldInfoList isFirstChild={fieldIndex === 0}>
@@ -23,7 +26,7 @@ const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field }) => {
           <p key={field.FieldName}>{field.FieldName}</p>
         </StyledListItem>
         <StyledCropsGroup>
-          {field.Crops.map((crop: CropsDetailsInterface, idx: number) => (
+          {field.Crops?.map((crop: CropsDetailsInterface, idx: number) => (
             <StyledListItem
               desktopWidth="160px"
               mobileWidth="121px"
@@ -32,6 +35,14 @@ const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field }) => {
               <div className="CropsList">
                 <h2>Crop</h2>
                 <h2>{idx + 1}</h2>
+                <button
+                  type="button"
+                  onClick={() => removeCrop(field, crop)}
+                  style={{ border: 'none', background: 'none' }}
+                  aria-label="delete crop"
+                >
+                  <FontAwesomeIcon icon={faTrashCan} />
+                </button>
               </div>
               <p key={crop.cropId}>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
             </StyledListItem>
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
index 0b794fbf..9a80a6ba 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -34,6 +34,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
 }) => {
   const initialFieldValues = initialFarmDetails.Fields[0].Nutrients[0];
   const [isAddButtonClicked, setAddButtonClicked] = useState<boolean>(false);
+  const [fertDetails, setFertDetails] = useState<FertilizerInterface[]>(fertilizersDetails);
 
   const validationSchema = Yup.object().shape({
     fertilizerTypeId: Yup.string().required('Required'),
@@ -85,7 +86,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
     fertK20Value = fertValues.K;
 
     const newFertilizer: FertilizerInterface = {
-      id: fertilizersDetails.length,
+      id: fertDetails.length,
       fertilizerTypeId: values.fertilizerTypeId,
       fertilizerId: values.fertilizerTypeId.includes('(Custom)')
         ? tempFertilizerId
@@ -104,7 +105,10 @@ const FertilizersInfo: FC<InputModuleProps> = ({
       liquidDensityUnitId: '',
     };
 
-    if (updateFertDetails) updateFertDetails([...fertilizersDetails, newFertilizer]);
+    fertDetails.push(newFertilizer);
+    setFertDetails(fertDetails);
+    if (updateFertDetails) updateFertDetails(fertDetails, false);
+
     setAddButtonClicked(false);
   };
 
@@ -112,16 +116,32 @@ const FertilizersInfo: FC<InputModuleProps> = ({
     setAddButtonClicked(true);
   };
 
+  const removeFert = (fertilizer: FertilizerInterface) => {
+    const updatedFerts = [...fertDetails];
+
+    const fertIdx = fertDetails.findIndex((f) => f === fertilizer);
+
+    updatedFerts.splice(fertIdx, 1);
+    setFertDetails([...updatedFerts]);
+    console.log(fertilizersDetails);
+    console.log(fertDetails);
+  };
+
   return (
     <>
-      {fertilizersDetails.length > 0 && (
-        <FertilizersListComponent fertilizerDetails={fertilizersDetails} />
+      {fertDetails.length > 0 && (
+        <FertilizersListComponent
+          fertilizerDetails={fertDetails}
+          removeFert={removeFert}
+        />
       )}
 
       {!isAddButtonClicked && (
         <FertilizersButtonComponent
           addNewFertilizer={addNewFertilizer}
           handleFormState={handleFormState}
+          fertDetails={fertDetails}
+          updateFertDetails={updateFertDetails}
         />
       )}
 
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
index 8eca8e03..b22100e9 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
@@ -4,7 +4,6 @@ import CmdOptions from '@Constants/CmdOptions';
 import Button from '@Commons/Button/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { COMPLETED } from '@Constants/ModuleStatus';
 import {
   StyledButtonGroupContainer,
   StyledButtonContainer,
@@ -13,15 +12,20 @@ import {
   StyledNewFieldButtonController,
 } from '@Commons/Button/FieldButtonGroup.styles';
 import { FERTILIZERS } from '@Constants/ModuleIDs';
+import FertilizerInterface from '@Interface/FertilizerInterface';
 
 type ButtonComponentProps = {
   addNewFertilizer: () => void;
   handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
+  updateFertDetails?(fertDetails: FertilizerInterface[], moveNext: boolean): void;
+  fertDetails: FertilizerInterface[];
 };
 
 const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
   addNewFertilizer,
   handleFormState,
+  updateFertDetails,
+  fertDetails,
 }) => (
   <StyledButtonGroupContainer>
     <StyledNewFieldButtonContainer>
@@ -60,7 +64,7 @@ const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
           disabled={false}
           text={ComponentText.NEXT}
           handleClick={() => {
-            handleFormState(CmdOptions.FORWARDS, undefined, COMPLETED);
+            if (updateFertDetails) updateFertDetails(fertDetails, true);
           }}
         />
       </StyledButtonContainer>
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
index d50af915..a3dad2f7 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 import getFertilizerOption from '@Utils/getFertID';
@@ -18,9 +18,10 @@ import {
 
 interface FertilizerProps {
   fertilizerDetails: FertilizerInterface[];
+  removeFert(fertilizer: FertilizerInterface): void;
 }
 
-const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) => (
+const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails, removeFert }) => (
   <StyledFieldInfoList>
     {fertilizerDetails.map((fertilizer: FertilizerInterface, index: number) => (
       <div key={fertilizer.id}>
@@ -67,8 +68,14 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) =>
               )}
             </DesktopFertilizerGroup>
             <StyledFontAwesomeContainer>
-              <FontAwesomeIcon icon={faPencil} />
-              <FontAwesomeIcon icon={faTrashCan} />
+              <button
+                type="button"
+                onClick={() => removeFert(fertilizer)}
+                style={{ border: 'none', background: 'none' }}
+                aria-label="delete fertilizer"
+              >
+                <FontAwesomeIcon icon={faTrashCan} />
+              </button>
             </StyledFontAwesomeContainer>
           </FertilizerTypeAndFontAwesomeContainer>
 
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index 9fb73ea6..0d3d57cf 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -47,19 +47,21 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
   toggleEnabled,
 }) => {
   // Builds field info inside the field form module.
-  const [, setFieldsInfo] = useState(farmDetails);
+  const [, setFarmDetails] = useState(farmDetails);
   const [fieldIndex, setFieldIndex] = useState(farmDetails.Fields.length);
   // Only triggered once, it would show list and persists.
   const [isSubmitted, setSubmitted] = useState<boolean>(farmDetails.Fields.length > 0);
   // Would trigger when new field button is clicked.
   const [isFieldAdded, setFieldAdd] = useState<boolean>(false);
+  const [initialValues, setInitialValues] = useState<FieldDetailInterface>(
+    initialFarmDetails.Fields[0],
+  );
 
   const radioOptions = [
     { id: 'true', label: 'Yes', value: true },
     { id: 'false', label: 'No', value: false },
   ];
 
-  const initialValues: FieldDetailInterface = initialFarmDetails.Fields[0];
   const textAreaMaxLength: number = 200;
   const validationSchema = Yup.object().shape({
     FieldName: Yup.string().max(24).required('Required'),
@@ -102,6 +104,34 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     }),
   });
 
+  const removeField = (field: FieldDetailInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const idx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    updatedFarmDetails.Fields.splice(idx, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
+  const editField = (field: FieldDetailInterface) => {
+    const idx = farmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    setInitialValues(field);
+    removeField(field);
+    setFieldIndex(idx);
+    setFieldAdd(true);
+    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
+  };
+
+  const addNewField = () => {
+    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
+    setFieldAdd(true);
+  };
+
   /**
    *
    * @param values : It's of type FieldDetailInterface, it calls, FieldName, Area, and Comments
@@ -125,6 +155,7 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
       };
 
       const newField: FieldDetailInterface = {
+        ...(farmDetails.Fields[fieldIndex] || initialValues),
         Id: fieldIndex,
         FieldName: values.FieldName,
         Area: values.Area,
@@ -145,69 +176,37 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
           leafTissueP: values.LeafTest.leafTissueP,
           leafTissueK: values.LeafTest.leafTissueK,
         },
-        Nutrients: {
-          nutrientManures: null,
-          nutrientFertilizers: [
-            {
-              id: 0,
-              fertilizerTypeId: '',
-              fertilizerId: '',
-              applUnitId: '',
-              applRate: 0,
-              applDate: '',
-              applMethodId: '',
-              customN: 0,
-              customP2o5: 0,
-              customK2o: 0,
-              fertN: 0,
-              fertP2o5: 0,
-              fertK2o: 0,
-              liquidDensity: 0,
-              liquidDensityUnitId: '',
-            },
-          ],
-          nutrientOthers: [],
-        },
-        Crops: [
-          {
-            id: 0,
-            cropId: '',
-            yield: 0,
-            plantAgeYears: '',
-            numberOfPlantsPerAcre: 0,
-            distanceBtwnPlantsRows: '',
-            willPlantsBePruned: false,
-            whereWillPruningsGo: '',
-            willSawdustBeApplied: false,
-          },
-        ],
+        Crops: farmDetails.Fields[fieldIndex]?.Crops ?? [],
       };
 
       if (values.HasSoilTest === false) newField.SoilTest = noSoilTestVal;
       if (values.HasLeafTest === false) newField.LeafTest = noLeafTestVal;
 
+      if (
+        farmDetails.Fields.find(
+          (f) => f.FieldName === newField.FieldName && f.Area === newField.Area,
+        )
+      )
+        removeField(newField);
       farmInfo.Fields.push(newField);
 
       // splice or pop to remove Crops after getting pushed to array
-      if (farmInfo.Fields[fieldIndex].Crops.length === 1) {
-        // Crops is not optional so this line is needed
-        farmInfo.Fields[fieldIndex].Crops.splice(0, 1);
-      }
-      if (farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.length === 1) {
-        farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
-      }
+      // if (farmInfo.Fields[fieldIndex].Crops.length === 1) {
+      //   // Crops is not optional so this line is needed
+      //   farmInfo.Fields[fieldIndex].Crops.splice(0, 1);
+      // }
+      // if (farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.length === 1) {
+      //   farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
+      // }
 
-      setFieldsInfo(farmInfo);
+      setInitialValues(initialValues);
+      setFarmDetails(farmInfo);
       setFieldIndex((prevIndex) => prevIndex + 1);
       setSubmitted(true);
       setFieldAdd(false);
     }, 400);
   };
 
-  const addNewField = () => {
-    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
-    setFieldAdd(true);
-  };
   const SoilTextArray: string[] = [
     'Different labs use different soil test methods for phosphorus (P) and potassium (K)',
     'Different methods give different values for the same soil sample',
@@ -223,11 +222,16 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     'The amount of available potassium given from a recent soil test. Generally expressed in ppm or mg/kg.';
   const pH: string =
     "Soil pH is the measure of a soil's acidity or alkalinity. Ranges between 4 and 9 in most soils.";
+
   return (
     <>
       {isSubmitted && (
         <>
-          <FieldsListComponent farmDetails={farmDetails} />
+          <FieldsListComponent
+            farmDetails={farmDetails}
+            removeField={removeField}
+            editField={editField}
+          />
           {!isFieldAdded && (
             <FieldsButtonComponent
               addNewField={addNewField}
@@ -241,7 +245,9 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
 
       {(isFieldAdded || !isSubmitted) && (
         <Formik
-          initialValues={initialValues}
+          initialValues={
+            fieldIndex < farmDetails.Fields.length ? farmDetails.Fields[fieldIndex] : initialValues
+          }
           validationSchema={validationSchema}
           onSubmit={addFieldData}
           validate={(values) => {
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
index 093df1fb..165a739c 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -18,9 +18,11 @@ import {
 
 interface FieldListProps {
   farmDetails: FarmDetailsInterface;
+  removeField(field: FieldDetailInterface): void;
+  editField(field: FieldDetailInterface): void;
 }
 
-const FieldsListComponent: FC<FieldListProps> = ({ farmDetails }) => {
+const FieldsListComponent: FC<FieldListProps> = ({ farmDetails, removeField, editField }) => {
   const fieldCount = farmDetails.Fields.length;
   // Will put this here for the meantime until I get insights from Product Owner
   const highValue = '25';
@@ -60,8 +62,22 @@ const FieldsListComponent: FC<FieldListProps> = ({ farmDetails }) => {
                 </StyledListItem>
               </StyledCommentContainerDesktop>
               <StyledFontAwesomeContainer>
-                <FontAwesomeIcon icon={faPencil} />
-                <FontAwesomeIcon icon={faTrashCan} />
+                <button
+                  type="button"
+                  onClick={() => editField(field)}
+                  style={{ border: 'none', background: 'none' }}
+                  aria-label="edit field"
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => removeField(field)}
+                  style={{ border: 'none', background: 'none' }}
+                  aria-label="delete field"
+                >
+                  <FontAwesomeIcon icon={faTrashCan} />
+                </button>
               </StyledFontAwesomeContainer>
             </StyledListContainer>
 
diff --git a/frontend/src/Constants/FarmRegionOptions.ts b/frontend/src/Constants/FarmRegionOptions.ts
index 47b822f7..bcac7e69 100644
--- a/frontend/src/Constants/FarmRegionOptions.ts
+++ b/frontend/src/Constants/FarmRegionOptions.ts
@@ -34,7 +34,7 @@ const FarmRegionOptions: OptionInterface[] = [
     label: 'Fraser Valley, West (Delta to Langley/Maple Ridge)',
   },
   {
-    value: '9',
+    value: '11',
     label: 'Fraser-Fort George',
   },
   {
diff --git a/frontend/src/Interface/InputModuleProps.tsx b/frontend/src/Interface/InputModuleProps.tsx
index aa916751..0c33fac0 100644
--- a/frontend/src/Interface/InputModuleProps.tsx
+++ b/frontend/src/Interface/InputModuleProps.tsx
@@ -14,7 +14,7 @@ interface InputModuleProps {
   fertilizersDetails: FertilizerInterface[];
   toggleEnabled?: boolean;
   updateFarmDetails: (farmDetails: FarmDetailsInterface, inputModuleID: string) => void;
-  updateFertDetails?: (fertilizersDetails: FertilizerInterface[]) => void;
+  updateFertDetails?: (fertilizersDetails: FertilizerInterface[], moveNext?: boolean) => void;
   handleFormState(cmd: string, toggle?: boolean, status?: string): void;
 }
 
diff --git a/frontend/src/Utils/convertToNMP.ts b/frontend/src/Utils/convertToNMP.ts
index ca52be20..738257bc 100644
--- a/frontend/src/Utils/convertToNMP.ts
+++ b/frontend/src/Utils/convertToNMP.ts
@@ -31,7 +31,7 @@ const convertToNMP = (
   prevDetails: NmpInterface,
 ): NmpInterface => {
   const newFields: NmpFieldInterface[] = newDetails.Fields.map((field: FieldDetailInterface) => {
-    const newCrops: NmpCropInterface[] = field.Crops.map((crop: CropsDetailsInterface) => ({
+    const newCrops: NmpCropInterface[] = field.Crops?.map((crop: CropsDetailsInterface) => ({
       ...templateCropNMP,
       id: crop.id,
       cropId: crop.cropId,
diff --git a/frontend/src/Views/MainPage/MainPage.tsx b/frontend/src/Views/MainPage/MainPage.tsx
index f4cd34ba..9235a939 100644
--- a/frontend/src/Views/MainPage/MainPage.tsx
+++ b/frontend/src/Views/MainPage/MainPage.tsx
@@ -20,6 +20,7 @@ import FormModule from '@Commons/Forms/FormModule/FormModule';
 import { loadFertDetails } from '@Utils/getLocalFertilizers';
 import * as InputModules from '@Commons/Forms/InputModules/index';
 import LocalStorageNames from '@Constants/LocalStorageNames';
+import { FERTILIZERS } from '@Constants/ModuleIDs';
 import { StyledMain, StyledMainContainer } from './MainPage.styles';
 
 const initialFertilizersDetails: FertilizerInterface[] = loadFertDetails();
@@ -175,8 +176,13 @@ const MainPage: FC = () => {
    * @param     newNutrients => A new 'TempNutrientInterface' object with new data from
    *            from the nutrient module.
    * */
-  const updateFertDetails = (newFerts: FertilizerInterface[]): void => {
+  const updateFertDetails = (newFerts: FertilizerInterface[], moveNext: boolean): void => {
     setFertDetails(newFerts);
+    if (!moveNext) return;
+
+    if (formStates[currForm].id === FERTILIZERS)
+      handleFormState(CmdOptions.FORWARDS, undefined, COMPLETED);
+    else handleFormState(FERTILIZERS, true);
   };
 
   const scrollHeader = useCallback(() => {