diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecce4a8c4..ce367c56d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Updated the style of bulk edit form.
 - Hide the `help` button in the navigation bar in read-only mode.
 - Hide the `original_name` field in the borehole detail view in read-only mode.
+- Updated the style of the coordinates and elevation segment in the location tab.
 
 ### Fixed
 
diff --git a/src/client/cypress/e2e/detailPage/boreholeform.cy.js b/src/client/cypress/e2e/detailPage/boreholeform.cy.js
index 412047e9c..fea44273f 100644
--- a/src/client/cypress/e2e/detailPage/boreholeform.cy.js
+++ b/src/client/cypress/e2e/detailPage/boreholeform.cy.js
@@ -1,3 +1,4 @@
+import { evaluateSelect, setSelect } from "../helpers/formHelpers";
 import { createBorehole, goToRouteAndAcceptTerms, newEditableBorehole } from "../helpers/testHelpers";
 
 describe("Test for the borehole form.", () => {
@@ -5,9 +6,9 @@ describe("Test for the borehole form.", () => {
     // create boreholes
     newEditableBorehole().as("borehole_id");
 
-    // fill all dropdowns on location tab
+    // fill all legacy dropdowns on location tab
     cy.get('[data-cy="domain-dropdown"]')
-      .should("have.length", 5)
+      .should("have.length", 2)
       .each(el => cy.wrap(el).click().find('[role="option"]').last().click());
 
     const locationDropdownValues = [];
@@ -17,15 +18,22 @@ describe("Test for the borehole form.", () => {
         locationDropdownValues.push(value);
       })
       .then(() => {
-        expect(locationDropdownValues).to.deep.eq([
-          "ID Kernlager",
-          "not specified",
-          "not specified",
-          "not specified",
-          "kelly bushing",
-        ]);
+        expect(locationDropdownValues).to.deep.eq(["ID Kernlager", "not specified"]);
       });
 
+    // fills and evaluates all mui dropdowns on location tab
+    setSelect("spatial_reference_system", 0);
+    setSelect("location_precision", 2);
+    setSelect("elevation_precision", 2);
+    setSelect("qt_reference_elevation", 2);
+    setSelect("reference_elevation_type", 4);
+
+    evaluateSelect("spatial_reference_system", "20104001");
+    evaluateSelect("location_precision", "20113002");
+    evaluateSelect("elevation_precision", "20114002");
+    evaluateSelect("qt_reference_elevation", "20114002");
+    evaluateSelect("reference_elevation_type", "20117004");
+
     // fill all dropdowns on borehole tab
     cy.get('[data-cy="borehole-menu-item"]').click();
     cy.get('[data-cy="domain-dropdown"]')
diff --git a/src/client/cypress/e2e/detailPage/coordinates.cy.js b/src/client/cypress/e2e/detailPage/coordinates.cy.js
index 67571916d..e92939857 100644
--- a/src/client/cypress/e2e/detailPage/coordinates.cy.js
+++ b/src/client/cypress/e2e/detailPage/coordinates.cy.js
@@ -1,5 +1,5 @@
 import { setSelect } from "../helpers/formHelpers";
-import { delayedType, newEditableBorehole } from "../helpers/testHelpers";
+import { delayedType, newEditableBorehole, returnToOverview } from "../helpers/testHelpers";
 
 function checkDecimalPlaces(inputAlias, expectedDecimalPlaces) {
   cy.get(inputAlias)
@@ -136,6 +136,14 @@ describe("Tests for editing coordinates of a borehole.", () => {
     checkDecimalPlaces("@LV95Y-input", 2);
     checkDecimalPlaces("@LV03X-input", 2);
     checkDecimalPlaces("@LV03Y-input", 2);
+
+    returnToOverview();
+    newEditableBorehole();
+    // verify input are cleared for new borehole
+    cy.get("@LV95X-input").should("have.value", "");
+    cy.get("@LV95Y-input").should("have.value", "");
+    cy.get("@LV03X-input").should("have.value", "");
+    cy.get("@LV03Y-input").should("have.value", "");
   });
 
   it("displays correct decimal precision", () => {
diff --git a/src/client/src/api-lib/ReduxStateInterfaces.ts b/src/client/src/api-lib/ReduxStateInterfaces.ts
index 814072897..0a2ccbb59 100644
--- a/src/client/src/api-lib/ReduxStateInterfaces.ts
+++ b/src/client/src/api-lib/ReduxStateInterfaces.ts
@@ -1,3 +1,5 @@
+import { ReferenceSystemCode } from "../pages/detail/form/location/coordinateSegmentInterfaces.ts";
+
 export interface ReduxRootState {
   filters: Filters;
   editor: EditorStore;
@@ -58,7 +60,7 @@ interface BoreholeAttributes {
   workgroup: Workgroup;
   workflow: Workflow;
   id: number;
-  spatial_reference_system: number;
+  spatial_reference_system: ReferenceSystemCode;
   role: Role;
   lock: {
     id: number;
diff --git a/src/client/src/components/form/formContainer.tsx b/src/client/src/components/form/formContainer.tsx
index e4145f8ff..da92aed95 100644
--- a/src/client/src/components/form/formContainer.tsx
+++ b/src/client/src/components/form/formContainer.tsx
@@ -9,7 +9,7 @@ interface FormContainerProps extends StackProps {
 export const FormContainer = forwardRef<ReactNode, FormContainerProps>((props, ref) => {
   const width = props.width || "100%";
   return (
-    <Stack component={props.component || "div"} ref={ref} {...props} spacing={1} gap={1} sx={{ width: width }}>
+    <Stack component={props.component || "div"} ref={ref} {...props} rowGap={3} columnGap={2} sx={{ width: width }}>
       {props.children}
     </Stack>
   );
diff --git a/src/client/src/components/form/formCoordinate.tsx b/src/client/src/components/form/formCoordinate.tsx
index 258973480..7b0090371 100644
--- a/src/client/src/components/form/formCoordinate.tsx
+++ b/src/client/src/components/form/formCoordinate.tsx
@@ -5,9 +5,9 @@ import { SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { boundingBox } from "../../pages/detail/form/location/coordinateSegmentConstants.ts";
 import { Direction, ReferenceSystemKey } from "../../pages/detail/form/location/coordinateSegmentInterfaces.ts";
-import { NumericFormatForCoordinates } from "../../pages/detail/form/location/NumericFormatForCoordinates.tsx";
 import { parseFloatWithThousandsSeparator } from "../legacyComponents/formUtils.ts";
 import { getFormFieldError } from "./form";
+import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
 const inLV95XBounds = (value: string): boolean => {
   const coordinate = parseFloatWithThousandsSeparator(value);
@@ -84,7 +84,7 @@ export const FormCoordinate: FC<FormCoordinateProps> = ({
       data-cy={fieldName + "-formCoordinate"}
       InputProps={{
         /* eslint-disable  @typescript-eslint/no-explicit-any */
-        inputComponent: NumericFormatForCoordinates as any,
+        inputComponent: NumericFormatWithThousandSeparator as any,
         readOnly: readonly,
         disabled: disabled,
       }}
diff --git a/src/client/src/components/form/formInput.tsx b/src/client/src/components/form/formInput.tsx
index 3607da259..deea454b4 100644
--- a/src/client/src/components/form/formInput.tsx
+++ b/src/client/src/components/form/formInput.tsx
@@ -5,6 +5,7 @@ import { InputProps, SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { isValid } from "date-fns";
 import { FormValueType, getFormFieldError } from "./form";
+import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
 export interface FormInputProps {
   fieldName: string;
@@ -20,6 +21,7 @@ export interface FormInputProps {
   className?: string;
   inputProps?: InputProps;
   onUpdate?: (value: string) => void;
+  withThousandSeparator?: boolean;
 }
 
 export const FormInput: FC<FormInputProps> = ({
@@ -36,6 +38,7 @@ export const FormInput: FC<FormInputProps> = ({
   className,
   inputProps,
   onUpdate,
+  withThousandSeparator,
 }) => {
   const { t } = useTranslation();
   const { formState, register, setValue } = useFormContext();
@@ -84,7 +87,12 @@ export const FormInput: FC<FormInputProps> = ({
       defaultValue={getDefaultValue(value)}
       disabled={disabled || false}
       data-cy={fieldName + "-formInput"}
-      InputProps={{ ...inputProps, readOnly: readonly, disabled: disabled }}
+      InputProps={{
+        ...inputProps /* eslint-disable  @typescript-eslint/no-explicit-any */,
+        ...(withThousandSeparator && { inputComponent: NumericFormatWithThousandSeparator as any }),
+        readOnly: readonly,
+        disabled: disabled,
+      }}
     />
   );
 };
diff --git a/src/client/src/components/form/formSelect.tsx b/src/client/src/components/form/formSelect.tsx
index 6cd68bc42..0f4f70ac9 100644
--- a/src/client/src/components/form/formSelect.tsx
+++ b/src/client/src/components/form/formSelect.tsx
@@ -11,7 +11,7 @@ export interface FormSelectProps {
   required?: boolean;
   disabled?: boolean;
   readonly?: boolean;
-  selected?: number[];
+  selected?: number;
   values?: FormSelectValue[];
   sx?: SxProps;
   className?: string;
diff --git a/src/client/src/pages/detail/form/location/NumericFormatForCoordinates.tsx b/src/client/src/components/form/numericFormatWithThousandSeparator.tsx
similarity index 81%
rename from src/client/src/pages/detail/form/location/NumericFormatForCoordinates.tsx
rename to src/client/src/components/form/numericFormatWithThousandSeparator.tsx
index 5b0e3559b..159acc067 100644
--- a/src/client/src/pages/detail/form/location/NumericFormatForCoordinates.tsx
+++ b/src/client/src/components/form/numericFormatWithThousandSeparator.tsx
@@ -7,8 +7,8 @@ interface CustomProps {
   value: number | string;
 }
 
-export const NumericFormatForCoordinates = React.forwardRef<NumericFormatProps, CustomProps>(
-  function NumericFormatForCoordinates(props, ref) {
+export const NumericFormatWithThousandSeparator = React.forwardRef<NumericFormatProps, CustomProps>(
+  function NumericFormatWithThousandSeparator(props, ref) {
     const { onChange, value, ...other } = props;
 
     return (
diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx
index 9f7b4df7a..b416d104a 100644
--- a/src/client/src/components/map/pointComponent.jsx
+++ b/src/client/src/components/map/pointComponent.jsx
@@ -309,11 +309,11 @@ class PointComponent extends React.Component {
           style={{
             padding: "0px",
             flex: "1 1 100%",
-            height: 670,
+            height: 579,
           }}
         />
         <MapControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
-        <Box sx={{ position: "absolute", right: 0, top: 645 }}>
+        <Box sx={{ position: "absolute", right: 0, top: 554 }}>
           <BasemapSelector marginBottom="0px" />
         </Box>
         <Box
diff --git a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx
index cbc979a8a..539a2d8de 100644
--- a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx
+++ b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx
@@ -118,9 +118,9 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
   // --- Utility functions ---
   const updateFormValues = useCallback(
     (refSystem: string, locationX: number, locationY: number, precisionX: number, precisionY: number) => {
-      if (locationX && locationY) {
-        setValuesForReferenceSystem(refSystem, locationX.toFixed(precisionX), locationY.toFixed(precisionY));
-      }
+      const locationXString = (locationX && locationX?.toFixed(precisionX)) || "";
+      const locationYString = (locationY && locationY?.toFixed(precisionY)) || "";
+      setValuesForReferenceSystem(refSystem, locationXString, locationYString);
     },
     [setValuesForReferenceSystem],
   );
@@ -409,13 +409,13 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
                 )
               }
             />
-            <CardContent sx={{ pl: 4, pr: 4 }}>
+            <CardContent sx={{ pt: 4, px: 3 }}>
               <FormContainer>
                 <FormSelect
                   required={true}
                   fieldName={`spatial_reference_system`}
                   label="spatial_reference_system"
-                  selected={[currentReferenceSystem ?? referenceSystems.LV95.code]}
+                  selected={currentReferenceSystem ?? referenceSystems.LV95.code}
                   readonly={!editingEnabled}
                   className={isCoordinateExtraction ? "ai" : ""}
                   onUpdate={e => onReferenceSystemChange(e)}
@@ -478,8 +478,8 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
                   fieldName={`location_precision`}
                   label="location_precision"
                   readonly={!editingEnabled}
-                  onUpdate={e => updateChange("location_precision", e, false)}
-                  selected={[borehole.data.location_precision]}
+                  onUpdate={e => updateChange("location_precision", e ?? null, false)}
+                  selected={borehole.data.location_precision}
                   schemaName={"location_precision"}
                 />
               </FormContainer>
diff --git a/src/client/src/pages/detail/form/location/elevationSegment.tsx b/src/client/src/pages/detail/form/location/elevationSegment.tsx
index 3e8af076c..4f3f11c74 100644
--- a/src/client/src/pages/detail/form/location/elevationSegment.tsx
+++ b/src/client/src/pages/detail/form/location/elevationSegment.tsx
@@ -1,10 +1,12 @@
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { NumericFormat } from "react-number-format";
-import { Form } from "semantic-ui-react";
+import { FC, useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Card } from "@mui/material";
+import { CardContent } from "@mui/material/";
 import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces.ts";
-import DomainText from "../../../../components/legacyComponents/domain/domainText.jsx";
-import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx";
+import { useDomains } from "../../../../api/fetchApiV2";
+import { FormContainer, FormInput, FormValueType } from "../../../../components/form/form.ts";
+import { FormDomainSelect } from "../../../../components/form/formDomainSelect.tsx";
+import { Codelist } from "../../../../components/legacyComponents/domain/domainInterface.ts";
 import { parseFloatWithThousandsSeparator } from "../../../../components/legacyComponents/formUtils.js";
 import { FormSegmentBox } from "../../../../components/styledComponents.ts";
 
@@ -20,107 +22,93 @@ interface ElevationSegmentProps {
 }
 
 const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateChange, updateNumber }) => {
-  const { t } = useTranslation();
+  const { data: domains } = useDomains();
 
+  const formMethods = useForm({
+    mode: "all",
+    defaultValues: borehole.data,
+  });
   // --- Derived states ---
   const isEditable: boolean =
     borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id;
 
+  useEffect(() => {
+    formMethods.reset(borehole.data);
+  }, [borehole, formMethods]);
+
   return (
     <FormSegmentBox>
-      <Form>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.elevation_z == null} required>
-            <label>{t("elevation_z")}</label>
-            <NumericFormat
-              type="text"
-              autoCapitalize="off"
-              autoComplete="off"
-              autoCorrect="off"
-              onChange={e => {
-                updateNumber(
-                  "elevation_z",
-                  e.target.value === "" ? null : parseFloatWithThousandsSeparator(e.target.value),
-                );
-              }}
-              fixedDecimalScale
-              spellCheck="false"
-              value={borehole.data.elevation_z ?? ""}
-              thousandSeparator="'"
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("elevation_precision")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string }) => {
-                updateChange("elevation_precision", selected.id, false);
-              }}
-              schema="elevation_precision"
-              selected={borehole.data.elevation_precision}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-        </Form.Group>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.reference_elevation == null} required>
-            <label>{t("reference_elevation")}</label>
-            <NumericFormat
-              autoCapitalize="off"
-              type="text"
-              autoComplete="off"
-              autoCorrect="off"
-              onChange={e => {
-                updateNumber(
-                  "reference_elevation",
-                  e.target.value === "" ? null : parseFloatWithThousandsSeparator(e.target.value),
-                );
-              }}
-              spellCheck="false"
-              value={borehole.data.reference_elevation ?? ""}
-              thousandSeparator="'"
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("reference_elevation_qt")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string | number }) => {
-                updateChange("qt_reference_elevation", selected.id, false);
-              }}
-              schema="elevation_precision"
-              selected={borehole.data.qt_reference_elevation}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-        </Form.Group>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.reference_elevation_type === null} required>
-            <label>{t("reference_elevation_type")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string }) => {
-                updateChange("reference_elevation_type", selected.id, false);
-              }}
-              schema="reference_elevation_type"
-              selected={borehole.data.reference_elevation_type}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("height_reference_system")}</label>
-            <div
-              style={{
-                height: "36px",
-                display: "flex",
-                alignItems: "center",
-              }}>
-              <div>
-                <DomainText id={borehole.data.height_reference_system} schema="height_reference_system" />
-              </div>
-            </div>
-          </Form.Field>
-        </Form.Group>
-      </Form>
+      <FormProvider {...formMethods}>
+        <Card>
+          <CardContent sx={{ pt: 4, px: 3 }}>
+            <FormContainer>
+              <FormContainer direction="row">
+                <FormInput
+                  fieldName={"elevation_z"}
+                  label="elevation_z"
+                  value={borehole.data.elevation_z ?? ""}
+                  type={FormValueType.Text}
+                  readonly={!isEditable}
+                  withThousandSeparator={true}
+                  onUpdate={e => updateNumber("elevation_z", e === "" ? null : parseFloatWithThousandsSeparator(e))}
+                />
+                <FormDomainSelect
+                  fieldName={"elevation_precision"}
+                  label={"elevation_precision"}
+                  schemaName={"elevation_precision"}
+                  readonly={!isEditable}
+                  selected={borehole.data.elevation_precision}
+                  onUpdate={e => {
+                    updateChange("elevation_precision", e ?? null, false);
+                  }}
+                />
+              </FormContainer>
+              <FormContainer direction="row">
+                <FormInput
+                  fieldName={"reference_elevation"}
+                  label="reference_elevation"
+                  value={borehole.data.reference_elevation ?? ""}
+                  type={FormValueType.Text}
+                  readonly={!isEditable}
+                  withThousandSeparator={true}
+                  onUpdate={e =>
+                    updateNumber("reference_elevation", e === "" ? null : parseFloatWithThousandsSeparator(e))
+                  }
+                />
+                <FormDomainSelect
+                  fieldName={"qt_reference_elevation"}
+                  label={"reference_elevation_qt"}
+                  readonly={!isEditable}
+                  schemaName={"elevation_precision"}
+                  selected={borehole.data.qt_reference_elevation}
+                  onUpdate={e => {
+                    updateChange("qt_reference_elevation", e ?? null, false);
+                  }}
+                />
+              </FormContainer>
+              <FormContainer direction="row">
+                <FormDomainSelect
+                  fieldName={"reference_elevation_type"}
+                  label={"reference_elevation_type"}
+                  readonly={!isEditable}
+                  schemaName={"reference_elevation_type"}
+                  selected={borehole.data.reference_elevation_type}
+                  onUpdate={e => {
+                    updateChange("reference_elevation_type", e ?? null, false);
+                  }}
+                />
+                <FormInput
+                  readonly={true}
+                  fieldName={`height_reference_system`}
+                  label="height_reference_system"
+                  value={domains?.find((d: Codelist) => d.id === borehole.data.height_reference_system)?.code}
+                  type={FormValueType.Text}
+                />
+              </FormContainer>
+            </FormContainer>
+          </CardContent>
+        </Card>
+      </FormProvider>
     </FormSegmentBox>
   );
 };
diff --git a/src/client/src/pages/detail/form/location/locationSegment.tsx b/src/client/src/pages/detail/form/location/locationSegment.tsx
index 257ab08c6..9c8dae12d 100644
--- a/src/client/src/pages/detail/form/location/locationSegment.tsx
+++ b/src/client/src/pages/detail/form/location/locationSegment.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import _ from "lodash";
 import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces.ts";
 import PointComponent from "../../../../components/map/pointComponent.jsx";
+import { FormSegmentBox } from "../../../../components/styledComponents.ts";
 import CantonMunicipalitySegment from "./cantonMunicipalitySegment.jsx";
 import CoordinatesSegment from "./coordinatesSegment.tsx";
 import ElevationSegment from "./elevationSegment";
@@ -45,7 +46,7 @@ const LocationSegment = ({
           />
           <ElevationSegment borehole={borehole} user={user} updateChange={updateChange} updateNumber={updateNumber} />
         </Stack>
-        <Box sx={{ flexGrow: 1, minWidth: 600 }}>
+        <FormSegmentBox sx={{ flexGrow: 1 }}>
           <PointComponent
             setMapPointChange={setMapPointChange}
             //@ts-expect-error legacy component method not typed
@@ -57,7 +58,7 @@ const LocationSegment = ({
             x={_.isNil(borehole.data.location_x) ? null : _.toNumber(borehole.data.location_x)}
             y={_.isNil(borehole.data.location_y) ? null : _.toNumber(borehole.data.location_y)}
           />
-        </Box>
+        </FormSegmentBox>
       </Stack>
       <CantonMunicipalitySegment
         country={borehole.data.custom.country}