diff --git a/frontend/cypress/e2e/allegation-details-create.cy.ts b/frontend/cypress/e2e/allegation-details-create.cy.ts
index f91579028..67bec9a33 100644
--- a/frontend/cypress/e2e/allegation-details-create.cy.ts
+++ b/frontend/cypress/e2e/allegation-details-create.cy.ts
@@ -115,8 +115,8 @@ describe("Complaint Create Page spec - Create View", () => {
     cy.get('dd[id="comp-details-violation-observed"]').contains(createCallDetails.violationObservedString);
     cy.get('dd[id="comp-details-location"]').contains(createCallDetails.location);
     cy.get('dd[id="comp-details-location-description"]').should("have.text", createCallDetails.locationDescription);
-    cy.get('span[id="call-details-x-coordinate"]').contains(createCallDetails.xCoord);
-    cy.get('span[id="call-details-y-coordinate"]').contains(createCallDetails.yCoord);
+    cy.get('span[id="geo-details-x-coordinate"]').contains(createCallDetails.xCoord);
+    cy.get('span[id="geo-details-y-coordinate"]').contains(createCallDetails.yCoord);
     cy.get('dd[id="comp-details-community"]').contains(createCallDetails.community);
     cy.get('dd[id="comp-details-office"]').contains(createCallDetails.office);
     cy.get('dd[id="comp-details-zone"]').contains(createCallDetails.zone);
diff --git a/frontend/cypress/e2e/allegation-details-edit.cy.ts b/frontend/cypress/e2e/allegation-details-edit.cy.ts
index f1d016361..91b9c7c80 100644
--- a/frontend/cypress/e2e/allegation-details-edit.cy.ts
+++ b/frontend/cypress/e2e/allegation-details-edit.cy.ts
@@ -401,16 +401,16 @@ describe("Complaint Edit Page spec - Edit Allegation View", () => {
     cy.get("#attractants-pair-id input").should("not.exist");
 
     // X Coordinate
-    cy.get('[for="comp-details-edit-x-coordinate-input"]').should(($label) => {
+    cy.get('[for="input-x-coordinate"]').should(($label) => {
       expect($label).to.contain.text("Longitude");
     });
-    cy.get("#comp-details-edit-x-coordinate-input-div").should("exist");
+    cy.get("#input-x-coordinate").should("exist");
 
     // Y Coordinate
-    cy.get('[for="comp-details-edit-y-coordinate-input"]').should(($label) => {
+    cy.get('[for="input-y-coordinate"]').should(($label) => {
       expect($label).to.contain.text("Latitude");
     });
-    cy.get("#comp-details-edit-y-coordinate-input-div").should("exist");
+    cy.get("#input-y-coordinate").should("exist");
 
     // Area/Community
     cy.get("#area-community-pair-id label").should(($label) => {
diff --git a/frontend/cypress/e2e/hwcr-details-create-enter-coordinates.cy.ts b/frontend/cypress/e2e/hwcr-details-create-enter-coordinates.cy.ts
index 49767f442..2f33a50a8 100644
--- a/frontend/cypress/e2e/hwcr-details-create-enter-coordinates.cy.ts
+++ b/frontend/cypress/e2e/hwcr-details-create-enter-coordinates.cy.ts
@@ -67,11 +67,11 @@ describe("Complaint Create Page spec - Enter Coordinates - Create View", () => {
 
     cy.selectItemById("reported-select-id", createCallerInformation.reported);
 
-    cy.get("#comp-details-edit-x-coordinate-input").click({ force: true });
-    cy.get("#comp-details-edit-x-coordinate-input").clear().type(createCallDetails.xCoord);
+    cy.get("#input-x-coordinate").click({ force: true });
+    cy.get("#input-x-coordinate").clear().type(createCallDetails.xCoord);
 
-    cy.get("#comp-details-edit-y-coordinate-input").click({ force: true });
-    cy.get("#comp-details-edit-y-coordinate-input").clear().type(createCallDetails.yCoord);
+    cy.get("#input-y-coordinate").click({ force: true });
+    cy.get("#input-y-coordinate").clear().type(createCallDetails.yCoord);
 
     cy.get("#complaint-location-description-textarea-id").click({
       force: true,
@@ -114,8 +114,8 @@ describe("Complaint Create Page spec - Enter Coordinates - Create View", () => {
     });
 
     cy.get('dd[id="comp-details-location-description"]').should("have.text", createCallDetails.locationDescription);
-    cy.get('span[id="call-details-x-coordinate"]').contains(createCallDetails.xCoord);
-    cy.get('span[id="call-details-y-coordinate"]').contains(createCallDetails.yCoord);
+    cy.get('span[id="geo-details-x-coordinate"]').contains(createCallDetails.xCoord);
+    cy.get('span[id="geo-details-y-coordinate"]').contains(createCallDetails.yCoord);
     cy.get('dd[id="comp-details-community"]').contains(createCallDetails.community);
     cy.get('dd[id="comp-details-office"]').contains(createCallDetails.office);
     cy.get('dd[id="comp-details-zone"]').contains(createCallDetails.zone);
diff --git a/frontend/cypress/e2e/hwcr-details-create.cy.ts b/frontend/cypress/e2e/hwcr-details-create.cy.ts
index cfeb55664..d2166747f 100644
--- a/frontend/cypress/e2e/hwcr-details-create.cy.ts
+++ b/frontend/cypress/e2e/hwcr-details-create.cy.ts
@@ -113,8 +113,8 @@ describe("Complaint Create Page spec - Create View", () => {
 
     cy.get('dd[id="comp-details-location"]').contains(createCallDetails.location);
     cy.get('dd[id="comp-details-location-description"]').should("have.text", createCallDetails.locationDescription);
-    cy.get('span[id="call-details-x-coordinate"]').contains(createCallDetails.xCoord);
-    cy.get('span[id="call-details-y-coordinate"]').contains(createCallDetails.yCoord);
+    cy.get('span[id="geo-details-x-coordinate"]').contains(createCallDetails.xCoord);
+    cy.get('span[id="geo-details-y-coordinate"]').contains(createCallDetails.yCoord);
     cy.get('dd[id="comp-details-community"]').contains(createCallDetails.community);
     cy.get('dd[id="comp-details-office"]').contains(createCallDetails.office);
     cy.get('dd[id="comp-details-zone"]').contains(createCallDetails.zone);
diff --git a/frontend/cypress/e2e/hwcr-details-edit.cy.ts b/frontend/cypress/e2e/hwcr-details-edit.cy.ts
index 2b4208163..db4cc9410 100644
--- a/frontend/cypress/e2e/hwcr-details-edit.cy.ts
+++ b/frontend/cypress/e2e/hwcr-details-edit.cy.ts
@@ -353,16 +353,16 @@ describe("Complaint Edit Page spec - Edit View", () => {
     cy.get("#attractants-pair-id input").should("exist");
 
     // X Coordinate
-    cy.get('[for="comp-details-edit-x-coordinate-input"]').should(($label) => {
+    cy.get('[for="input-x-coordinate"]').should(($label) => {
       expect($label).to.contain.text("Longitude");
     });
-    cy.get("#comp-details-edit-x-coordinate-input-div").should("exist");
+    cy.get("#input-x-coordinate").should("exist");
 
     // Y Coordinate
-    cy.get('[for="comp-details-edit-y-coordinate-input"]').should(($label) => {
+    cy.get('[for="input-y-coordinate"]').should(($label) => {
       expect($label).to.contain.text("Latitude");
     });
-    cy.get("#comp-details-edit-y-coordinate-input-div").should("exist");
+    cy.get("#input-y-coordinate").should("exist");
 
     // Area/Community
     cy.get("#area-community-pair-id label").should(($label) => {
diff --git a/frontend/cypress/e2e/hwcr-outcome-equipment.cy.ts b/frontend/cypress/e2e/hwcr-outcome-equipment.cy.ts
index ab6daa477..879da12e0 100644
--- a/frontend/cypress/e2e/hwcr-outcome-equipment.cy.ts
+++ b/frontend/cypress/e2e/hwcr-outcome-equipment.cy.ts
@@ -37,8 +37,8 @@ describe("HWCR Outcome Equipment", () => {
         let inputs = [
           "#equipment-type-div",
           "#equipment-address-div",
-          "#equipment-coordinate-div",
-          "#equipment-coordinate-div",
+          "#equipment-coordinates",
+          "#equipment-coordinates",
           "#equipment-officer-set-div",
         ];
         cy.hasErrorMessage(inputs, "Errors creating equipment");
@@ -63,7 +63,7 @@ describe("HWCR Outcome Equipment", () => {
           equipmentType: "Bear snare",
         };
         cy.get("#equipment-copy-address-button").click();
-        cy.get("#equipment-copy-coordinates-button").click();
+        cy.get("#copy-coordinates-button").click();
 
         cy.fillInHWCSection(sectionParams).then(() => {
           cy.validateHWCSection(sectionParams);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0f6c432f0..b3b840703 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -102,6 +102,7 @@
         "uncontrollable": "^8.0.2",
         "urlpattern-polyfill": "^9.0.0",
         "util": "^0.12.5",
+        "utm-latlng": "^1.0.8",
         "uuid": "^9.0.1",
         "warning": "^4.0.3",
         "web-vitals": "^3.0.0"
@@ -24428,6 +24429,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utm-latlng": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/utm-latlng/-/utm-latlng-1.0.8.tgz",
+      "integrity": "sha512-jQ5l1BNTzNgas7jXOIh0jU0m5PU5LtmjYvRiLwR4iymYYAhEhQ6N0MGCnLjv5iO958b9tLMMSmzdbIIhLtXqCg=="
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 90dddf04e..ed564691a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -96,6 +96,7 @@
     "uncontrollable": "^8.0.2",
     "urlpattern-polyfill": "^9.0.0",
     "util": "^0.12.5",
+    "utm-latlng": "^1.0.8",
     "uuid": "^9.0.1",
     "warning": "^4.0.3",
     "web-vitals": "^3.0.0"
diff --git a/frontend/src/app/common/methods.tsx b/frontend/src/app/common/methods.tsx
index a2dd221ac..9509a661d 100644
--- a/frontend/src/app/common/methods.tsx
+++ b/frontend/src/app/common/methods.tsx
@@ -16,6 +16,7 @@ import { GirType } from "../types/app/code-tables/gir-type";
 import { WildlifeComplaint as WildlifeComplaintDto } from "../types/app/complaints/wildlife-complaint";
 import { AllegationComplaint as AllegationComplaintDto } from "../types/app/complaints/allegation-complaint";
 import { GeneralIncidentComplaint as GeneralIncidentComplaintDto } from "../types/app/complaints/general-complaint";
+let utmObj = require("utm-latlng");
 
 type Coordinate = number[] | string[] | undefined;
 
@@ -232,6 +233,15 @@ export const bcBoundaries = {
   maxLongitude: -114.0337,
 };
 
+export const bcUtmBoundaries = {
+  minEasting: 280220.6,
+  maxEasting: 720184.9,
+  minNorthing: 5346051.7,
+  maxNorthing: 6655120.8,
+};
+
+export const bcUtmZoneNumbers = ["7", "8", "9", "10", "11"];
+
 // given coordinates, return true if within BC or false if not within BC
 export const isWithinBC = (coordinates: Coordinate): boolean => {
   if (!coordinates) {
@@ -424,3 +434,33 @@ export const getThumbnailDataURL = async (file: File): Promise<string> => {
 export function isPositiveNum(number: string) {
   return !isNaN(Number(number)) && Number(number) >= 0;
 }
+
+export const formatLatLongCoordinate = (input: string | undefined): string | undefined => {
+  const regex = /-?(?:\d+(\.\d+)?|.\d+)/;
+  if (input && regex.exec(input)) {
+    const tokens = input.split(".");
+    if (tokens.length > 1) {
+      const decimals = tokens[1].length;
+      if (decimals <= 7) {
+        return input;
+      } else {
+        return tokens[0] + "." + tokens[1].substring(0, 7);
+      }
+    }
+  }
+  return input;
+};
+
+export const latLngToUtm = (lat: string, lng: string): { easting: string; northing: string; zone: string } => {
+  const regex = /-?(?:\d+(\.\d+)?|.\d+)/;
+  if (regex.exec(lat) && regex.exec(lng) && ![lat, lng].includes("0")) {
+    let utm = new utmObj();
+    const utmCoordinates = utm.convertLatLngToUtm(lat, lng, 3);
+    return {
+      easting: utmCoordinates.Easting.toFixed(0),
+      northing: utmCoordinates.Northing.toFixed(0),
+      zone: utmCoordinates.ZoneNumber ?? "",
+    };
+  }
+  return { easting: "", northing: "", zone: "" };
+};
diff --git a/frontend/src/app/components/common/comp-coordinate-input.tsx b/frontend/src/app/components/common/comp-coordinate-input.tsx
new file mode 100644
index 000000000..37a4dceab
--- /dev/null
+++ b/frontend/src/app/components/common/comp-coordinate-input.tsx
@@ -0,0 +1,442 @@
+import { FC, useEffect, useState } from "react";
+import Option from "../../types/app/option";
+import { CompRadioGroup } from "./comp-radiogroup";
+import { bcBoundaries, bcUtmBoundaries, formatLatLongCoordinate } from "../../common/methods";
+import { CompSelect } from "./comp-select";
+import { Button } from "react-bootstrap";
+let utmObj = require("utm-latlng");
+
+type Props = {
+  id?: string;
+  utmZones?: Array<Option>;
+  initXCoordinate?: string;
+  initYCoordinate?: string;
+  syncCoordinates: (yCoordinate: string | undefined, xCoordinate: string | undefined) => void;
+  throwError: (hasError: boolean) => void;
+  sourceXCoordinate?: string;
+  sourceYCoordinate?: string;
+  enableCopyCoordinates: boolean;
+};
+
+const COORDINATE_TYPES = {
+  LatLong: "Latitude/Longitude",
+  UTM: "UTM",
+};
+
+export const CompCoordinateInput: FC<Props> = ({
+  id,
+  utmZones,
+  initXCoordinate,
+  initYCoordinate,
+  sourceXCoordinate,
+  sourceYCoordinate,
+  syncCoordinates,
+  throwError,
+  enableCopyCoordinates,
+}) => {
+  const [coordinateType, setCoordinateType] = useState(COORDINATE_TYPES.LatLong);
+  const [xCoordinate, setXCoordinate] = useState<string | undefined>("");
+  const [yCoordinate, setYCoordinate] = useState<string | undefined>("");
+  const [xCoordinateErrorMsg, setXCoordinateErrorMsg] = useState<string | undefined>("");
+  const [yCoordinateErrorMsg, setYCoordinateErrorMsg] = useState<string | undefined>("");
+  const [eastingCoordinate, setEastingCoordinate] = useState<string | undefined>("");
+  const [northingCoordinate, setNorthingCoordinate] = useState<string | undefined>("");
+  const [eastingCoordinateErrorMsg, setEastingCoordinateErrorMsg] = useState<string | undefined>("");
+  const [northingCoordinateErrorMsg, setNorthingCoordinateErrorMsg] = useState<string | undefined>("");
+  const [zoneCoordinate, setZoneCoordinate] = useState<Option | undefined | null>();
+  const [zoneErrorMsg, setZoneErrorMsg] = useState<string | undefined>("");
+
+  const handleGeoPointChange = (latitude: string, longitude: string) => {
+    setYCoordinateErrorMsg("");
+    setXCoordinateErrorMsg("");
+    setYCoordinate(latitude);
+    setXCoordinate(longitude);
+
+    // handling removal of coordinates here
+    if ([latitude?.trim(), longitude?.trim()].every((item) => item === "")) {
+      throwError(false);
+      syncCoordinates("", "");
+      return;
+    }
+    const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
+    let hasErrors = false;
+    if (!regex.exec(latitude)) {
+      setYCoordinateErrorMsg("Latitude value must be a number");
+      hasErrors = true;
+    }
+    if (!regex.exec(longitude)) {
+      setXCoordinateErrorMsg("Longitude value must be a number");
+      hasErrors = true;
+    }
+    if (latitude && !Number.isNaN(latitude)) {
+      const item = parseFloat(latitude);
+      if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
+        setYCoordinateErrorMsg(
+          `Latitude value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`,
+        );
+        hasErrors = true;
+      }
+    }
+    if (longitude && !Number.isNaN(longitude) && longitude.trim() !== "-") {
+      const item = parseFloat(longitude);
+      if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
+        setXCoordinateErrorMsg(
+          `Longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`,
+        );
+        hasErrors = true;
+      } else {
+        syncCoordinates(latitude, longitude);
+      }
+    }
+    throwError(hasErrors);
+  };
+
+  const handleUtmGeoPointChange = (easting: string, northing: string, zone: string) => {
+    setEastingCoordinateErrorMsg("");
+    setNorthingCoordinateErrorMsg("");
+    setZoneErrorMsg("");
+    setYCoordinateErrorMsg("");
+    setXCoordinateErrorMsg("");
+
+    setEastingCoordinate(easting);
+    setNorthingCoordinate(northing);
+    setZoneCoordinate(zone ? ({ label: zone, value: zone } as Option) : undefined);
+
+    if (
+      [easting.toString().trim(), northing.toString().trim()].every((item) => item === "") &&
+      [undefined, ""].includes(zone)
+    ) {
+      throwError(false);
+      syncCoordinates("", "");
+      return;
+    }
+
+    const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
+    let hasErrors = false;
+    let lat;
+    let lng;
+
+    const errorTextSuffix = `The corresponding longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`;
+    const eastingErrorText =
+      `Invalid Easting. Easting value must be between 290220.6 and 720184.9 metres.` + errorTextSuffix;
+    const northingErrorText =
+      `Invalid Northing. Northing value must be between 5346051.7 and 6655120.8 metres.` + errorTextSuffix;
+    const zoneErrorText = `Invalid Zone. Must be in 7-11 range`;
+
+    let utm = new utmObj();
+    if (!regex.exec(easting)) {
+      setEastingCoordinateErrorMsg("Easting value must be a number");
+      hasErrors = true;
+    }
+    if (!regex.exec(northing)) {
+      setNorthingCoordinateErrorMsg("Northing value must be a number");
+      hasErrors = true;
+    }
+
+    if (easting && !Number.isNaN(easting)) {
+      const item = parseInt(easting);
+      if (item > bcUtmBoundaries.maxEasting || item < bcUtmBoundaries.minEasting) {
+        setEastingCoordinateErrorMsg(eastingErrorText);
+        hasErrors = true;
+      }
+    }
+
+    if (northing && !Number.isNaN(northing)) {
+      const item = parseInt(northing);
+      if (item > bcUtmBoundaries.maxNorthing || item < bcUtmBoundaries.minNorthing) {
+        setNorthingCoordinateErrorMsg(northingErrorText);
+        hasErrors = true;
+      }
+    }
+
+    if (
+      zone &&
+      !Number.isNaN(zone) &&
+      utmZones
+        ?.map((item) => {
+          return item.value;
+        })
+        .includes(zone.toString())
+    ) {
+    } else {
+      setZoneErrorMsg(zoneErrorText);
+      hasErrors = true;
+    }
+
+    if (hasErrors === false && easting && !Number.isNaN(easting) && northing && !Number.isNaN(northing)) {
+      const latLongCoordinates = utm.convertUtmToLatLng(easting, northing, zone, "N");
+      lat = latLongCoordinates.lat.toFixed(7);
+      if (lat > bcBoundaries.maxLatitude || lat < bcBoundaries.minLatitude) {
+        setNorthingCoordinateErrorMsg(northingErrorText);
+        hasErrors = true;
+      }
+      lng = latLongCoordinates.lng.toFixed(7);
+      if (lng > bcBoundaries.maxLongitude || lng < bcBoundaries.minLongitude) {
+        setEastingCoordinateErrorMsg(eastingErrorText);
+        hasErrors = true;
+      } else {
+        syncCoordinates(lat, lng);
+      }
+    }
+    throwError(hasErrors);
+  };
+
+  const handleChangeCoordinateType = (coordinateType: string) => {
+    if (coordinateType === COORDINATE_TYPES.UTM) {
+      if ([xCoordinateErrorMsg, yCoordinateErrorMsg].every((element) => element === "")) {
+        if (yCoordinate && xCoordinate) {
+          updateUtmFields(yCoordinate, xCoordinate);
+        } else {
+          setEastingCoordinate("");
+          setNorthingCoordinate("");
+          setZoneCoordinate(undefined);
+        }
+        setCoordinateType(coordinateType);
+      }
+    } else if (coordinateType === COORDINATE_TYPES.LatLong) {
+      if ([eastingCoordinateErrorMsg, northingCoordinateErrorMsg, zoneErrorMsg].every((element) => element === "")) {
+        if (eastingCoordinate && northingCoordinate && zoneCoordinate?.value) {
+          let utm = new utmObj();
+          const latLongCoordinates = utm.convertUtmToLatLng(
+            eastingCoordinate,
+            northingCoordinate,
+            zoneCoordinate?.value,
+            "N",
+          );
+          const lat = formatLatLongCoordinate(latLongCoordinates.lat.toString());
+          const lng = formatLatLongCoordinate(latLongCoordinates.lng.toString());
+
+          setYCoordinate(lat);
+          setXCoordinate(lng);
+          syncCoordinates(lat, lng);
+        }
+        setCoordinateType(coordinateType);
+      }
+    }
+  };
+
+  const updateUtmFields = (lat: string, lng: string): { easting: string; northing: string; zone: string } => {
+    let utm = new utmObj();
+    const utmCoordinates = utm.convertLatLngToUtm(lat, lng, 3);
+    setEastingCoordinate(utmCoordinates.Easting);
+    setNorthingCoordinate(utmCoordinates.Northing);
+    setZoneCoordinate({ label: utmCoordinates.ZoneNumber, value: utmCoordinates.ZoneNumber } as Option);
+
+    return { easting: utmCoordinates.Easting, northing: utmCoordinates.Northing, zone: utmCoordinates.ZoneNumber };
+  };
+
+  useEffect(() => {
+    const lat = formatLatLongCoordinate(initYCoordinate);
+    const lng = formatLatLongCoordinate(initXCoordinate);
+
+    setYCoordinate(lat);
+    setXCoordinate(lng);
+
+    if (lat && lng && !isZeroOrEmpty(lat) && !isZeroOrEmpty(lng)) {
+      if (coordinateType === COORDINATE_TYPES.LatLong) {
+        handleGeoPointChange(lat, lng);
+      }
+
+      if (coordinateType === COORDINATE_TYPES.UTM) {
+        const { easting, northing, zone } = updateUtmFields(lat, lng);
+        if (easting && northing && zone) {
+          handleUtmGeoPointChange(easting, northing, zone);
+        }
+      }
+    }
+  }, [initXCoordinate, initYCoordinate]);
+
+  const formatUtmCoordinate = (input: string | undefined): string => {
+    const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
+    let result = input;
+    if (regex.exec(input ?? "")) {
+      result = input ? Number(input).toFixed(0).toString() : "";
+    }
+    return result ?? "";
+  };
+
+  const isZeroOrEmpty = (input: string | undefined): boolean => {
+    return input === "" || input === "0";
+  };
+
+  return (
+    <div
+      className="comp-details-form-row"
+      id={id}
+    >
+      <label htmlFor="coordinate-type-radio-group">Coordinates</label>
+      <div
+        id="coordinate-input-div"
+        className="comp-details-input full-width"
+      >
+        <div className="comp-details-input full-width">
+          {
+            <CompRadioGroup
+              id="coordinate-type-radio-group"
+              options={[
+                { value: COORDINATE_TYPES.LatLong, label: "Latitude/Longitude" } as Option,
+                { value: COORDINATE_TYPES.UTM, label: "UTM" } as Option,
+              ]}
+              enableValidation={true}
+              errorMessage=""
+              itemClassName="comp-radio-btn"
+              groupClassName="comp-coordinate-type-radio-group"
+              value={coordinateType}
+              onChange={(option: any) => handleChangeCoordinateType(option.target.value)}
+              isDisabled={false}
+              radioGroupName="coordinate-type-radio-group"
+            />
+          }
+        </div>
+        {coordinateType === COORDINATE_TYPES.LatLong && (
+          <div className="comp-lat-long-input">
+            <div>
+              <input
+                placeholder="Latitude"
+                aria-label="Latitude"
+                type="text"
+                id="input-y-coordinate"
+                className={yCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
+                onChange={(evt: any) => handleGeoPointChange(evt.target.value, xCoordinate ?? "")}
+                value={yCoordinate ?? ""}
+                maxLength={120}
+              />
+              <label
+                className="comp-form-label-below"
+                htmlFor="input-y-coordinate"
+                hidden
+              >
+                Latitude
+              </label>
+            </div>
+            <div>
+              <input
+                placeholder="Longitude"
+                aria-label="Longitude"
+                type="text"
+                id="input-x-coordinate"
+                className={xCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
+                onChange={(evt: any) => handleGeoPointChange(yCoordinate ?? "", evt.target.value)}
+                value={xCoordinate ?? ""}
+                maxLength={120}
+              />
+              <label
+                className="comp-form-label-below"
+                htmlFor="input-x-coordinate"
+                hidden
+              >
+                Longitude
+              </label>
+            </div>
+          </div>
+        )}
+        {coordinateType === COORDINATE_TYPES.UTM && (
+          <div className="comp-lat-long-utm-input">
+            <input
+              placeholder="Easting"
+              aria-label="Easting"
+              type="text"
+              id="input-easting-coordinate"
+              className={eastingCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
+              onChange={(evt: any) =>
+                handleUtmGeoPointChange(evt.target.value, northingCoordinate ?? "", zoneCoordinate?.value ?? "")
+              }
+              value={formatUtmCoordinate(eastingCoordinate) ?? ""}
+            />
+            <label
+              className="comp-form-label-below"
+              htmlFor="input-easting-coordinate"
+              hidden
+            >
+              Easting
+            </label>
+
+            <input
+              placeholder="Northing"
+              aria-label="Northing"
+              type="text"
+              id="input-northing-coordinate"
+              className={northingCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
+              onChange={(evt: any) =>
+                handleUtmGeoPointChange(eastingCoordinate ?? "", evt.target.value, zoneCoordinate?.value ?? "")
+              }
+              value={formatUtmCoordinate(northingCoordinate) ?? ""}
+            />
+            <label
+              className="comp-form-label-below"
+              htmlFor="input-northing-coordinate"
+              hidden
+            >
+              Northing
+            </label>
+
+            <CompSelect
+              id="utm-zone-id"
+              classNamePrefix="comp-select"
+              className="comp-details-input coordinate-zone-select"
+              placeholder="Zone"
+              options={utmZones}
+              enableValidation={false}
+              onChange={(e: any) =>
+                handleUtmGeoPointChange(eastingCoordinate ?? "", northingCoordinate ?? "", e?.value)
+              }
+              value={zoneCoordinate}
+              isClearable={true}
+            />
+            <label
+              className="comp-form-label-below"
+              htmlFor="utm-zone-id"
+              hidden
+            >
+              Zone
+            </label>
+          </div>
+        )}
+        <div className="error-message">{yCoordinateErrorMsg}</div>
+        <div className="error-message">{xCoordinateErrorMsg}</div>
+        <div className="error-message">{eastingCoordinateErrorMsg}</div>
+        <div className="error-message">{northingCoordinateErrorMsg}</div>
+        <div className="error-message">{zoneErrorMsg}</div>
+        {enableCopyCoordinates && (
+          <Button
+            variant="outline-primary"
+            size="sm"
+            className="btn-txt svg-icon mt-2"
+            id="copy-coordinates-button"
+            onClick={() => {
+              if (coordinateType === COORDINATE_TYPES.LatLong) {
+                setXCoordinate(sourceXCoordinate);
+                setYCoordinate(sourceYCoordinate);
+                if (sourceXCoordinate && sourceYCoordinate) {
+                  handleGeoPointChange(sourceYCoordinate, sourceXCoordinate);
+                }
+              } else if (coordinateType === COORDINATE_TYPES.UTM) {
+                if (sourceXCoordinate && sourceYCoordinate) {
+                  const { easting, northing, zone } = updateUtmFields(sourceYCoordinate, sourceXCoordinate);
+                  if (easting && northing && zone) {
+                    handleUtmGeoPointChange(easting, northing, zone);
+                  }
+                }
+              }
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              className="bi bi-copy"
+              viewBox="0 0 16 16"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
+              />
+            </svg>
+            <span>Copy coordinates from complaint details</span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/common/comp-location-info.tsx b/frontend/src/app/components/common/comp-location-info.tsx
new file mode 100644
index 000000000..117c6f1f6
--- /dev/null
+++ b/frontend/src/app/components/common/comp-location-info.tsx
@@ -0,0 +1,52 @@
+import { FC, useEffect, useState } from "react";
+import { latLngToUtm } from "../../common/methods";
+interface CompLocationInfoProps {
+  yCoordinate: string;
+  xCoordinate: string;
+}
+export const CompLocationInfo: FC<CompLocationInfoProps> = ({ yCoordinate, xCoordinate }) => {
+  const [utmZone, setUtmZone] = useState<string>("");
+  const [northing, setNorthing] = useState<string>("");
+  const [easting, setEasting] = useState<string>("");
+
+  useEffect(() => {
+    const { easting: eastingValue, northing: northingValue, zone: zoneValue } = latLngToUtm(yCoordinate, xCoordinate);
+    setUtmZone(zoneValue);
+    setNorthing(northingValue);
+    setEasting(eastingValue);
+  }, [yCoordinate, xCoordinate]);
+  return (
+    <>
+      <div>
+        <dt>Coordinates</dt>
+        <dd>
+          <span id="geo-details-y-coordinate">Latitude: {yCoordinate ? `${yCoordinate}` : ""}</span>
+        </dd>
+      </div>
+      <div>
+        <dt>
+          <span id="geo-details-x-coordinate">Longitude: {xCoordinate ? `${xCoordinate}` : ""}</span>
+        </dt>
+      </div>
+      <br />
+      <div>
+        <dt></dt>
+        <dd className="comp-lat-long">
+          <span id="geo-details-easting-coordinate">Easting: {easting}</span>
+        </dd>
+      </div>
+      <div>
+        <dt></dt>
+        <dd className="comp-lat-long">
+          <span id="geo-details-northing-coordinate">Northing: {northing}</span>
+        </dd>
+      </div>
+      <div>
+        <dt></dt>
+        <dd className="comp-lat-long">
+          <span id="geo-details-zone-coordinate">Zone: {utmZone}</span>
+        </dd>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/containers/complaints/details/call-details.tsx b/frontend/src/app/components/containers/complaints/details/call-details.tsx
index 45957070d..dabf7bc7a 100644
--- a/frontend/src/app/components/containers/complaints/details/call-details.tsx
+++ b/frontend/src/app/components/containers/complaints/details/call-details.tsx
@@ -1,14 +1,14 @@
 import { FC } from "react";
 import { Badge, Card } from "react-bootstrap";
 import { useAppSelector } from "../../../../hooks/hooks";
-import { formatDate, formatTime, renderCoordinates } from "../../../../common/methods";
-import { Coordinates } from "../../../../types/app/coordinate-type";
+import { formatDate, formatTime } from "../../../../common/methods";
 import { ComplaintDetailsAttractant } from "../../../../types/complaints/details/complaint-attactant";
 import { selectComplaintDetails } from "../../../../store/reducers/complaints";
 import COMPLAINT_TYPES from "../../../../types/app/complaint-types";
 import { ComplaintDetails } from "../../../../types/complaints/details/complaint-details";
 import { FEATURE_TYPES } from "../../../../constants/feature-flag-types";
 import { FeatureFlag } from "../../../common/feature-flag";
+import { CompLocationInfo } from "../../../common/comp-location-info";
 
 interface ComplaintHeaderProps {
   complaintType: string;
@@ -113,13 +113,11 @@ export const CallDetails: FC<ComplaintHeaderProps> = ({ complaintType }) => {
               <dt>Location Description</dt>
               <dd id="comp-details-location-description">{locationDescription}</dd>
             </div>
-            <div>
-              <dt>Latitude/Longitude</dt>
-              <dd className="comp-lat-long">
-                <span id="call-details-y-coordinate">{renderCoordinates(coordinates, Coordinates.Latitude)}</span>
-                <span id="call-details-x-coordinate">{renderCoordinates(coordinates, Coordinates.Longitude)}</span>
-              </dd>
-            </div>
+            <CompLocationInfo
+              xCoordinate={coordinates?.[0] === 0 ? "" : coordinates?.[0].toString() ?? ""}
+              yCoordinate={coordinates?.[1] === 0 ? "" : coordinates?.[1].toString() ?? ""}
+            />
+            <br />
           </dl>
 
           {/* Other Location Details */}
diff --git a/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx b/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx
index 303599fd3..ad710b338 100644
--- a/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx
+++ b/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import COMPLAINT_TYPES from "../../../../types/app/complaint-types";
 import { CompSelect } from "../../../common/comp-select";
-import { bcBoundaries } from "../../../../common/methods";
+import { bcUtmZoneNumbers, formatLatLongCoordinate } from "../../../../common/methods";
 import { ValidationTextArea } from "../../../../common/validation-textarea";
 import DatePicker from "react-datepicker";
 import Select from "react-select";
@@ -13,6 +13,7 @@ import { Coordinates } from "../../../../types/app/coordinate-type";
 import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
 import { openModal, selectActiveTab, userId, isFeatureActive } from "../../../../store/reducers/app";
 import notificationInvalid from "../../../../../assets/images/notification-invalid.png";
+import { CompCoordinateInput } from "../../../common/comp-coordinate-input";
 
 import {
   selectAttractantCodeDropdown,
@@ -118,8 +119,7 @@ export const CreateComplaint: FC = () => {
   const [speciesErrorMsg, setSpeciesErrorMsg] = useState<string>("");
   const [complaintDescriptionErrorMsg, setComplaintDescriptionErrorMsg] = useState<string>("");
   const [communityErrorMsg, setCommunityErrorMsg] = useState<string>("");
-  const [geoPointXMsg, setGeoPointXMsg] = useState<string>("");
-  const [geoPointYMsg, setGeoPointYMsg] = useState<string>("");
+  const [coordinateErrorsInd, setCoordinateErrorsInd] = useState<boolean>(false);
   const [emailMsg, setEmailMsg] = useState<string>("");
   const [primaryPhoneMsg, setPrimaryPhoneMsg] = useState<string>("");
   const [secondaryPhoneMsg, setSecondaryPhoneMsg] = useState<string>("");
@@ -410,38 +410,23 @@ export const CreateComplaint: FC = () => {
     }
   };
 
-  const handleGeoPointChange = async (latitude: string, longitude: string) => {
-    //-- clear errors
-    setGeoPointXMsg("");
-    setGeoPointYMsg("");
-
+  const syncCoordinates = (yCoordinate: string | undefined, xCoordinate: string | undefined) => {
     let coordinates: Array<number> = [0, 0];
+    setLongitude(xCoordinate ?? "0");
+    setLatitude(yCoordinate ?? "0");
 
-    //-- verify latitude and longitude
-    if (latitude && !Number.isNaN(latitude)) {
-      const item = parseFloat(latitude);
-      if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
-        setGeoPointYMsg(`Value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`);
-      }
-    }
-
-    if (longitude && !Number.isNaN(longitude)) {
-      const item = parseFloat(longitude);
-      if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
-        setGeoPointXMsg(`Value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`);
-      }
-    }
-
-    //-- update coordinates
     if (latitude && longitude && !Number.isNaN(latitude) && !Number.isNaN(longitude)) {
-      coordinates[Coordinates.Longitude] = parseFloat(longitude);
-      coordinates[Coordinates.Latitude] = parseFloat(latitude);
+      coordinates[Coordinates.Longitude] = parseFloat(formatLatLongCoordinate(longitude) ?? "");
+      coordinates[Coordinates.Latitude] = parseFloat(formatLatLongCoordinate(latitude) ?? "");
     }
-
     const complaint = { ...complaintData, location: { type: "Point", coordinates } } as ComplaintDto;
     applyComplaintData(complaint);
   };
 
+  const throwError = (hasError: boolean) => {
+    setCoordinateErrorsInd(hasError);
+  };
+
   const handleNameChange = (value: string) => {
     const complaint = { ...complaintData, name: value?.trim() } as ComplaintDto;
     applyComplaintData(complaint);
@@ -523,16 +508,6 @@ export const CreateComplaint: FC = () => {
     applyComplaintData(complaint);
   };
 
-  const handleCoordinateChange = (input: string, type: Coordinates) => {
-    if (type === Coordinates.Latitude) {
-      setLatitude(input);
-      handleGeoPointChange(input, longitude);
-    } else {
-      setLongitude(input);
-      handleGeoPointChange(latitude, input);
-    }
-  };
-
   const cancelConfirmed = () => {
     navigate(`/`);
   };
@@ -597,6 +572,10 @@ export const CreateComplaint: FC = () => {
       }
     }
 
+    if (coordinateErrorsInd) {
+      result = true;
+    }
+
     return result;
   };
 
@@ -935,30 +914,16 @@ export const CreateComplaint: FC = () => {
               />
             </div>
           </div>
-          <CompInput
-            id="comp-details-edit-y-coordinate-input"
-            divid="comp-details-edit-y-coordinate-div"
-            type="input"
-            label="Latitude"
-            containerClass="comp-details-edit-input"
-            formClass="comp-details-form-row"
-            inputClass="comp-form-control"
-            error={geoPointYMsg}
-            step="any"
-            onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Latitude)}
-          />
-
-          <CompInput
-            id="comp-details-edit-x-coordinate-input"
-            divid="comp-details-edit-x-coordinate-div"
-            type="input"
-            label="Longitude"
-            containerClass="comp-details-edit-input"
-            formClass="comp-details-form-row"
-            inputClass="comp-form-control"
-            error={geoPointXMsg}
-            step="any"
-            onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Longitude)}
+          <CompCoordinateInput
+            id="create-complaint-coordinates"
+            utmZones={bcUtmZoneNumbers.map((zone: string) => {
+              return { value: zone, label: zone } as Option;
+            })}
+            initXCoordinate={longitude}
+            initYCoordinate={latitude}
+            syncCoordinates={syncCoordinates}
+            throwError={throwError}
+            enableCopyCoordinates={false}
           />
 
           <div
diff --git a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx
index 422d2ed52..427ad85a2 100644
--- a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx
+++ b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
-import { bcBoundaries, getSelectedOfficer } from "../../../../common/methods";
+import { bcUtmZoneNumbers, getSelectedOfficer, formatLatLongCoordinate } from "../../../../common/methods";
 import { Coordinates } from "../../../../types/app/coordinate-type";
 import {
   setComplaint,
@@ -73,8 +73,10 @@ import { AgencyType } from "../../../../types/app/agency-types";
 import { CeebOutcomeReport } from "../outcomes/ceeb/ceeb-outcome-report";
 import { FEATURE_TYPES } from "../../../../constants/feature-flag-types";
 import { FeatureFlag } from "../../../common/feature-flag";
+import { CompCoordinateInput } from "../../../common/comp-coordinate-input";
 import { ExternalFileReference } from "../outcomes/external-file-reference";
 
+
 export type ComplaintParams = {
   id: string;
   complaintType: string;
@@ -172,8 +174,7 @@ export const ComplaintDetailsEdit: FC = () => {
   const [complaintDescriptionError, setComplaintDescriptionError] = useState<string>("");
   const [attractantsErrorMsg, setAttractantsErrorMsg] = useState<string>("");
   const [communityError, setCommunityError] = useState<string>("");
-  const [geoPointXMsg, setGeoPointXMsg] = useState<string>("");
-  const [geoPointYMsg, setGeoPointYMsg] = useState<string>("");
+  const [coordinateErrorsInd, setCoordinateErrorsInd] = useState<boolean>(false);
   const [emailMsg, setEmailMsg] = useState<string>("");
   const [primaryPhoneMsg, setPrimaryPhoneMsg] = useState<string>("");
   const [secondaryPhoneMsg, setSecondaryPhoneMsg] = useState<string>("");
@@ -264,8 +265,6 @@ export const ComplaintDetailsEdit: FC = () => {
     setComplaintDescriptionError("");
     setAttractantsErrorMsg("");
     setCommunityError("");
-    setGeoPointXMsg("");
-    setGeoPointYMsg("");
     setEmailMsg("");
     setPrimaryPhoneMsg("");
     setSecondaryPhoneMsg("");
@@ -310,8 +309,7 @@ export const ComplaintDetailsEdit: FC = () => {
       complaintDescriptionError === "" &&
       attractantsErrorMsg === "" &&
       communityError === "" &&
-      geoPointXMsg === "" &&
-      geoPointYMsg === "" &&
+      coordinateErrorsInd === false &&
       emailMsg === "" &&
       primaryPhoneMsg === "" &&
       secondaryPhoneMsg === "" &&
@@ -367,7 +365,6 @@ export const ComplaintDetailsEdit: FC = () => {
 
   const handleMarkerMove = async (lat: number, lng: number) => {
     await updateCoordinates(lat, lng);
-    await updateValidation(lat, lng);
   };
 
   const updateCoordinates = async (lat: number, lng: number) => {
@@ -375,9 +372,6 @@ export const ComplaintDetailsEdit: FC = () => {
     setLongitude(lng.toString());
   };
 
-  const updateValidation = async (lat: number, lng: number) => {
-    handleGeoPointChange(lat.toString(), lng.toString());
-  };
   //-- general incident complaint updates
   const handleGirTypeChange = (selected: Option | null) => {
     if (selected) {
@@ -565,49 +559,6 @@ export const ComplaintDetailsEdit: FC = () => {
     applyComplaintUpdate(updatedComplaint);
   };
 
-  const handleCoordinateChange = (input: string, type: Coordinates) => {
-    if (type === Coordinates.Latitude) {
-      setLatitude(input);
-      handleGeoPointChange(input, longitude);
-    } else {
-      setLongitude(input);
-      handleGeoPointChange(latitude, input);
-    }
-  };
-
-  const handleGeoPointChange = (latitude: string, longitude: string) => {
-    //-- clear errors
-    setGeoPointXMsg("");
-    setGeoPointYMsg("");
-
-    //-- verify latitude and longitude
-    if (latitude && !Number.isNaN(latitude)) {
-      const item = parseFloat(latitude);
-      if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
-        setGeoPointYMsg(`Value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`);
-      }
-    }
-
-    if (longitude && !Number.isNaN(longitude)) {
-      const item = parseFloat(longitude);
-      if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
-        setGeoPointXMsg(`Value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`);
-      }
-    }
-
-    if (latitude && longitude && !Number.isNaN(latitude) && !Number.isNaN(longitude)) {
-      const location = { type: "point", coordinates: [parseFloat(longitude), parseFloat(latitude)] };
-
-      const updatedComplaint = { ...complaintUpdate, location } as ComplaintDto;
-      applyComplaintUpdate(updatedComplaint);
-    } else if (latitude === "" && longitude === "") {
-      const location = { type: "point", coordinates: [0, 0] };
-
-      const updatedComplaint = { ...complaintUpdate, location } as ComplaintDto;
-      applyComplaintUpdate(updatedComplaint);
-    }
-  };
-
   const handleCommunityChange = (selectedOption: Option | null) => {
     if (!selectedOption) {
       return;
@@ -723,6 +674,33 @@ export const ComplaintDetailsEdit: FC = () => {
 
   const maxDate = new Date();
 
+  const syncCoordinates = (yCoordinate: string | undefined, xCoordinate: string | undefined) => {
+    setLongitude(xCoordinate ?? "0");
+    setLatitude(yCoordinate ?? "0");
+
+    if (yCoordinate && xCoordinate && !Number.isNaN(yCoordinate) && !Number.isNaN(xCoordinate)) {
+      const location = {
+        type: "point",
+        coordinates: [
+          parseFloat(formatLatLongCoordinate(xCoordinate) ?? ""),
+          parseFloat(formatLatLongCoordinate(yCoordinate) ?? ""),
+        ],
+      };
+
+      const updatedComplaint = { ...complaintUpdate, location } as ComplaintDto;
+      applyComplaintUpdate(updatedComplaint);
+    } else if (yCoordinate === "" && xCoordinate === "") {
+      const location = { type: "point", coordinates: [0, 0] };
+
+      const updatedComplaint = { ...complaintUpdate, location } as ComplaintDto;
+      applyComplaintUpdate(updatedComplaint);
+    }
+  };
+
+  const throwError = (hasError: boolean) => {
+    setCoordinateErrorsInd(hasError);
+  };
+
   return (
     <div className="comp-complaint-details">
       <ToastContainer />
@@ -1051,34 +1029,17 @@ export const ComplaintDetailsEdit: FC = () => {
                 />
               </div>
 
-              {/* Latitude / Longitude */}
-              <CompInput
-                id="comp-details-edit-y-coordinate-input"
-                divid="comp-details-edit-y-coordinate-input-div"
-                type="input"
-                label="Latitude"
-                containerClass="comp-details-edit-input"
-                formClass="comp-details-form-row"
-                inputClass="comp-form-control"
-                value={latitude}
-                error={geoPointYMsg}
-                step="any"
-                onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Latitude)}
+              <CompCoordinateInput
+                id="edit-complaint-coordinates"
+                utmZones={bcUtmZoneNumbers.map((zone: string) => {
+                  return { value: zone, label: zone } as Option;
+                })}
+                initXCoordinate={longitude}
+                initYCoordinate={latitude}
+                syncCoordinates={syncCoordinates}
+                throwError={throwError}
+                enableCopyCoordinates={false}
               />
-              <CompInput
-                id="comp-details-edit-x-coordinate-input"
-                divid="comp-details-edit-x-coordinate-input-div"
-                type="input"
-                label="Longitude"
-                containerClass="comp-details-edit-input"
-                formClass="comp-details-form-row"
-                inputClass="comp-form-control"
-                value={longitude}
-                error={geoPointXMsg}
-                step="any"
-                onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Longitude)}
-              />
-
               <div
                 className="comp-details-form-row"
                 id="area-community-pair-id"
diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx
index b7993684d..049dde626 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx
@@ -13,13 +13,12 @@ import {
 } from "../../../../../store/reducers/complaints";
 import { CompSelect } from "../../../../common/comp-select";
 import { ToggleError } from "../../../../../common/toast";
-import { bcBoundaries, getSelectedItem } from "../../../../../common/methods";
+import { bcUtmZoneNumbers, getSelectedItem, formatLatLongCoordinate } from "../../../../../common/methods";
 
 import Option from "../../../../../types/app/option";
 import { Officer } from "../../../../../types/person/person";
 
 import "react-toastify/dist/ReactToastify.css";
-import { Coordinates } from "../../../../../types/app/coordinate-type";
 import { ValidationDatePicker } from "../../../../../common/validation-date-picker";
 import { openModal } from "../../../../../store/reducers/app";
 import { CANCEL_CONFIRM } from "../../../../../types/modal/modal-types";
@@ -29,6 +28,7 @@ import { CASE_ACTION_CODE } from "../../../../../constants/case_actions";
 import { upsertEquipment } from "../../../../../store/reducers/case-thunks";
 import { CompRadioGroup } from "../../../../common/comp-radiogroup";
 import { BsExclamationCircleFill } from "react-icons/bs";
+import { CompCoordinateInput } from "../../../../common/comp-coordinate-input";
 
 export interface EquipmentFormProps {
   equipment?: EquipmentDetailsDto;
@@ -117,55 +117,6 @@ export const EquipmentForm: FC<EquipmentFormProps> = ({ equipment, assignedOffic
     setWasAnimalCaptured(equipment?.wasAnimalCaptured ?? "U");
   }, [equipment]);
 
-  const handleCoordinateChange = (input: string, type: Coordinates) => {
-    if (type === Coordinates.Latitude) {
-      setYCoordinate(input);
-      if (xCoordinate) {
-        handleGeoPointChange(input, xCoordinate);
-      }
-    } else {
-      setXCoordinate(input);
-      if (yCoordinate) {
-        handleGeoPointChange(yCoordinate, input);
-      }
-    }
-  };
-
-  const handleGeoPointChange = async (latitude: string, longitude: string) => {
-    setYCoordinateErrorMsg("");
-    setXCoordinateErrorMsg("");
-    const regex = /^[a-zA-Z]+$/;
-    let hasErrors = false;
-    if (regex.exec(latitude)) {
-      setYCoordinateErrorMsg("Value must be a number");
-      hasErrors = true;
-    }
-    if (regex.exec(longitude)) {
-      setXCoordinateErrorMsg("Value must be a number");
-      hasErrors = true;
-    }
-    if (latitude && !Number.isNaN(latitude)) {
-      const item = parseFloat(latitude);
-      if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
-        setYCoordinateErrorMsg(
-          `Value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`,
-        );
-        hasErrors = true;
-      }
-    }
-
-    if (longitude && !Number.isNaN(longitude)) {
-      const item = parseFloat(longitude);
-      if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
-        setXCoordinateErrorMsg(
-          `Value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`,
-        );
-        hasErrors = true;
-      }
-    }
-    setCoordinateErrorsInd(hasErrors);
-  };
-
   // Reset error messages
   const resetValidationErrors = () => {
     setOfficerSetErrorMsg("");
@@ -275,8 +226,8 @@ export const EquipmentForm: FC<EquipmentFormProps> = ({ equipment, assignedOffic
         typeCode: type.value,
         activeIndicator: true,
         address: address,
-        xCoordinate: xCoordinate,
-        yCoordinate: yCoordinate,
+        xCoordinate: formatLatLongCoordinate(xCoordinate),
+        yCoordinate: formatLatLongCoordinate(yCoordinate),
         actions: actions,
         wasAnimalCaptured: wasAnimalCaptured,
       } as EquipmentDetailsDto;
@@ -339,6 +290,15 @@ export const EquipmentForm: FC<EquipmentFormProps> = ({ equipment, assignedOffic
     }
   };
 
+  const syncCoordinates = (yCoordinate: string | undefined, xCoordinate: string | undefined) => {
+    setXCoordinate(xCoordinate);
+    setYCoordinate(yCoordinate);
+  };
+
+  const throwError = (hasError: boolean) => {
+    setCoordinateErrorsInd(hasError);
+  };
+
   return (
     <div>
       <ToastContainer />
@@ -419,87 +379,19 @@ export const EquipmentForm: FC<EquipmentFormProps> = ({ equipment, assignedOffic
               </div>
             </div>
 
-            {/* COORDINATES */}
-            <fieldset className="comp-details-form-row">
-              <legend>Latitude / Longitude</legend>
-              <div
-                id="equipment-coordinate-div"
-                className="comp-details-input full-width"
-              >
-                <div className="comp-lat-long-input">
-                  <div>
-                    <input
-                      placeholder="Latitude"
-                      aria-label="Latitude"
-                      type="text"
-                      id="equipment-y-coordinate"
-                      className={yCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
-                      onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Latitude)}
-                      value={yCoordinate ?? ""}
-                      maxLength={120}
-                    />
-                    <label
-                      className="comp-form-label-below"
-                      htmlFor="equipment-y-coordinate"
-                      hidden
-                    >
-                      Latitude
-                    </label>
-                  </div>
-                  <div>
-                    <input
-                      placeholder="Longitude"
-                      aria-label="Longitude"
-                      type="text"
-                      id="equipment-x-coordinate"
-                      className={xCoordinateErrorMsg ? "comp-form-control error-border" : "comp-form-control"}
-                      onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Longitude)}
-                      value={xCoordinate ?? ""}
-                      maxLength={120}
-                    />
-                    <label
-                      className="comp-form-label-below"
-                      htmlFor="equipment-x-coordinate"
-                      hidden
-                    >
-                      Longitude
-                    </label>
-                  </div>
-                </div>
-                <div className="error-message">{yCoordinateErrorMsg}</div>
-                <div className="error-message">{xCoordinateErrorMsg}</div>
-                {hasCoordinates && (
-                  <Button
-                    variant="outline-primary"
-                    size="sm"
-                    className="btn-txt svg-icon mt-2"
-                    id="equipment-copy-coordinates-button"
-                    onClick={() => {
-                      const xCoordinate = complaintData?.location?.coordinates[0].toString() ?? "";
-                      const yCoordinate = complaintData?.location?.coordinates[1].toString() ?? "";
-                      setXCoordinate(xCoordinate);
-                      setYCoordinate(yCoordinate);
-                      handleGeoPointChange(yCoordinate, xCoordinate);
-                    }}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      fill="currentColor"
-                      className="bi bi-copy"
-                      viewBox="0 0 16 16"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
-                      />
-                    </svg>
-                    <span>Copy coordinates from complaint details</span>
-                  </Button>
-                )}
-              </div>
-            </fieldset>
+            <CompCoordinateInput
+              id="equipment-coordinates"
+              utmZones={bcUtmZoneNumbers.map((zone: string) => {
+                return { value: zone, label: zone } as Option;
+              })}
+              initXCoordinate={equipment?.xCoordinate}
+              initYCoordinate={equipment?.yCoordinate}
+              syncCoordinates={syncCoordinates}
+              throwError={throwError}
+              sourceXCoordinate={complaintData?.location?.coordinates[0].toString() ?? ""}
+              sourceYCoordinate={complaintData?.location?.coordinates[1].toString() ?? ""}
+              enableCopyCoordinates={true}
+            />
 
             {/* SET BY */}
             <div
diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-item.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-item.tsx
index 921d0ec8d..b8954af8b 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-item.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-item.tsx
@@ -13,6 +13,7 @@ import Option from "../../../../../types/app/option";
 import { selectEquipmentDropdown } from "../../../../../store/reducers/code-table";
 import { CASE_ACTION_CODE } from "../../../../../constants/case_actions";
 import { deleteEquipment } from "../../../../../store/reducers/case-thunks";
+import { CompLocationInfo } from "../../../../common/comp-location-info";
 
 interface EquipmentItemProps {
   equipment: EquipmentDetailsDto;
@@ -23,7 +24,6 @@ export const EquipmentItem: FC<EquipmentItemProps> = ({ equipment, isEditDisable
   const dispatch = useAppDispatch();
 
   const [showModal, setShowModal] = useState(false);
-
   const handleEdit = (equipment: EquipmentDetailsDto) => {
     if (equipment.id) {
       onEdit(equipment.id);
@@ -135,14 +135,11 @@ export const EquipmentItem: FC<EquipmentItemProps> = ({ equipment, isEditDisable
               <dt>Address</dt>
               <dd>{equipment.address}</dd>
             </div>
-            <div>
-              <dt>Latitude/Longitude</dt>
-              <dd>
-                {equipment.yCoordinate && equipment.xCoordinate
-                  ? `${equipment.yCoordinate}, ${equipment.xCoordinate}`
-                  : ""}
-              </dd>
-            </div>
+            <CompLocationInfo
+              xCoordinate={equipment.xCoordinate}
+              yCoordinate={equipment.yCoordinate}
+            />
+            <br />
             <div>
               <dt>Set by</dt>
               <dd>
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
index 6ed1388de..27a07dca4 100644
--- a/frontend/src/assets/sass/complaint.scss
+++ b/frontend/src/assets/sass/complaint.scss
@@ -611,7 +611,6 @@
 
     & span:first-of-type {
       &::after {
-        content: ",";
         display: inline-block;
       }
     }
@@ -1887,3 +1886,7 @@ p {
   cursor: not-allowed;
   pointer-events: all;
 }
+
+.coordinate-zone-select .comp-select__control {
+  min-width: auto;
+}
diff --git a/frontend/src/assets/sass/form.scss b/frontend/src/assets/sass/form.scss
index 7053158ba..f37c5336a 100644
--- a/frontend/src/assets/sass/form.scss
+++ b/frontend/src/assets/sass/form.scss
@@ -77,4 +77,26 @@
   grid-template-columns: auto auto;
   gap: 8px;
   max-width: 500px;
+  margin-top: 0.8rem;
+}
+
+// LAT/LONG UTM INPUTS
+.comp-lat-long-utm-input {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  gap: 8px;
+  max-width: 500px;
+  margin-top: 0.8rem;
+}
+
+@media screen and (max-width: 768px) {
+  .comp-lat-long-utm-input {
+    grid-template-columns: auto;
+  }
+}
+
+.comp-coordinate-type-radio-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }