diff --git a/package.json b/package.json
index cc30b246..d843901e 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@equinor/eds-data-grid-react": "^0.1.0-beta.2",
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/eds-tokens": "^0.9.0",
+    "@hookform/resolvers": "^3.3.2",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-table": "^8.9.1",
@@ -24,11 +25,13 @@
     "openapi-typescript-codegen": "^0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "zod": "^3.22.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -70,4 +73,4 @@
     "openapi-typescript": "^6.3.9",
     "prettier": "^2.8.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
index 8f5b4567..7d750731 100644
--- a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
+++ b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
@@ -19,6 +19,10 @@ export const CoordinateGroup = styled.div`
   display: flex;
   flex-direction: column;
 
+  > .autocomplete-error {
+    color: red;
+  }
+
   > .autocomplete-error {
     > div {
       > div {
@@ -33,6 +37,8 @@ export const CoordinateGroup = styled.div`
         border: solid 2px red;
       }
     }
+
+    color: red;
   }
 `;
 
diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx
index 39f15761..aab0efd1 100644
--- a/src/components/AreaCoordinates/AreaCoordinates.tsx
+++ b/src/components/AreaCoordinates/AreaCoordinates.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable max-lines-per-function */
 import {
   Autocomplete,
@@ -5,259 +6,175 @@ import {
   Button,
   Input,
   Label,
+  Snackbar,
   Typography,
 } from '@equinor/eds-core-react';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { FieldValues, useController, useForm } from 'react-hook-form';
+import { z } from 'zod';
 import { AnalogueModelsService } from '../../api/generated/services/AnalogueModelsService';
 import optionTypes from '../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
 import * as Styled from './AreaCoordinates.styled';
 
-interface CoordinateType {
-  top: {
-    X?: string;
-    Y?: string;
-  };
-  bottom: {
-    X?: string;
-    Y?: string;
-  };
-}
+// const areaSchema = z.object({
+//   id: z.number(),
+//   name: z.string().min(1, { message: 'Ares is required' }),
+// });
+
+const schema = z.object({
+  // area: z.array(
+  //   z.object({
+  //     id: z.number(),
+  //     name: z.string().min(1, { message: 'Ares is required' }),
+  //   }),
+  // ),
+  area: z.string().min(1, { message: 'Ares is required' }),
+
+  topX: z
+    .string()
+    .min(1, { message: 'Coordinate is required' })
+    .max(12, { message: 'Coordinate is too long, max 12 characters' }),
+  topY: z
+    .string()
+    .min(1, { message: 'Coordinate is required' })
+    .max(12, { message: 'Coordinate is too long, max 12 characters' }),
+  bottomX: z
+    .string()
+    .min(1, { message: 'Coordinate is required' })
+    .max(12, { message: 'Coordinate is too long, max 12 characters' }),
+  bottomY: z
+    .string()
+    .min(1, { message: 'Coordinate is required' })
+    .max(12, { message: 'Coordinate is too long, max 12 characters' }),
+});
+
+// type innput = z.input<typeof schema>;
+// type output = z.infer<typeof schema>;
 
-type AreaErrorType = {
-  area?: string;
-  coordinateTop?: string;
-  coordinateBottom?: string;
-};
 export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
-  const [selectedArea, setSelectedArea] = useState<optionTypes>();
-  const [areaCoordinats, setAreaCoordinats] = useState<CoordinateType>({
-    top: {
-      X: undefined,
-      Y: undefined,
-    },
-    bottom: {
-      X: undefined,
-      Y: undefined,
-    },
-  });
-  const [errors, setErrors] = useState<AreaErrorType>({});
-  const [submitting, setSubmitting] = useState(false);
-
+  const [showSaveAlert, setSaveAlert] = useState(false);
   const { data, isLoading } = useQuery({
     queryKey: ['analogue-models', modelId],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels1(modelId),
   });
 
+  function clearStatus() {
+    setSaveAlert(false);
+  }
+
   const modelAreas: optionTypes[] = [
     { id: 10, name: 'Proximal' },
     { id: 11, name: 'Left' },
     { id: 12, name: 'Distal' },
   ];
 
-  const validateValues = (
-    selectedArea?: optionTypes,
-    areaCoordinats?: CoordinateType,
-  ) => {
-    const errors: AreaErrorType = {};
-    if (selectedArea === undefined) {
-      errors.area = 'Area to define coordinates for not selected';
-    }
+  // const selectedArea: optionTypes[] = [{ id: 10, name: 'Proximal' }];
+  const areaCoordinats = {
+    area: '',
+    topX: '43',
+    topY: '4133',
+    bottomX: '89754',
+    bottomY: '53345',
+  };
 
-    if (
-      areaCoordinats?.top.X === undefined ||
-      areaCoordinats?.top.Y === undefined ||
-      areaCoordinats?.top.X.length < 1 ||
-      areaCoordinats?.top.Y.length < 1
-    ) {
-      errors.coordinateTop = 'Top coordinates not selected';
-    }
+  const { control, register, handleSubmit, formState } = useForm({
+    defaultValues: areaCoordinats,
+    resolver: zodResolver(schema),
+  });
+  const { field } = useController({ name: 'area', control });
 
-    if (
-      areaCoordinats?.bottom.X === undefined ||
-      areaCoordinats?.bottom.Y === undefined ||
-      areaCoordinats?.bottom.X.length < 1 ||
-      areaCoordinats?.bottom.Y.length < 1
-    ) {
-      errors.coordinateBottom = 'Bottom coordinates not selected';
-    }
-    console.log(errors);
+  const { errors } = formState;
 
-    return errors;
-  };
+  const handleSelectChange = (changes: AutocompleteChanges<optionTypes>) => {
+    console.log(changes);
+    console.log(changes.selectedItems);
+    console.log(changes.selectedItems[0]);
 
-  const finishSubmit = () => {
-    console.log(selectedArea);
-    console.log(areaCoordinats);
+    field.onChange(changes);
+    console.log(field.onChange);
+    console.log(field.value);
+    console.log(typeof field.value);
+    console.log(field.value);
   };
 
-  useEffect(() => {
-    if (Object.keys(errors).length === 0 && submitting) {
-      finishSubmit();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errors, submitting]);
-
-  const saveChange = () => {
-    setErrors(validateValues(selectedArea, areaCoordinats));
-    setSubmitting(true);
+  const handleSave = (formValues: FieldValues) => {
+    console.log(formValues);
+    setSaveAlert(true);
   };
 
   if (isLoading) <p>Loading.....</p>;
 
   return (
-    <Styled.SideSheet>
-      {data?.success && <Typography variant="h2">{data.data.name}</Typography>}
-      <Typography variant="h3">Set coordinates: </Typography>
-      <Styled.Form>
-        <Styled.CoordinateGroup>
-          <Typography variant="h6">Area to define</Typography>
-
-          <Autocomplete
+    <>
+      <Styled.SideSheet>
+        {data?.success && (
+          <Typography variant="h2">{data.data.name}</Typography>
+        )}
+        <Typography variant="h3">Set coordinates: </Typography>
+        <Styled.Form onSubmit={handleSubmit(handleSave)}>
+          <Styled.CoordinateGroup
             className={errors.area && 'autocomplete-error'}
-            label={'Select area'}
-            options={modelAreas}
-            optionLabel={(option) => option.name}
-            onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
-              setSelectedArea(changes.selectedItems[0])
-            }
-          ></Autocomplete>
-        </Styled.CoordinateGroup>
-
-        <Styled.CoordinateGroup>
-          <Typography variant="h6">Top Left Corner</Typography>
-          <div className={errors.coordinateTop && 'input-error'}>
-            <Label label="X-coordinate" />
-            <Input
-              type="string"
-              value={areaCoordinats.top.X}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setAreaCoordinats({
-                  ...areaCoordinats,
-                  top: { ...areaCoordinats.top, X: e.currentTarget.value },
-                })
-              }
-            />
-          </div>
-          <div className={errors.coordinateTop && 'input-error'}>
-            <Label label="Y-coordinate" />
-            <Input
-              type="string"
-              value={areaCoordinats.top.Y}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setAreaCoordinats({
-                  ...areaCoordinats,
-                  top: { ...areaCoordinats.top, Y: e.currentTarget.value },
-                })
+          >
+            <Typography variant="h6">Area to define</Typography>
+
+            <Autocomplete
+              className={errors.area && 'autocomplete-error'}
+              {
+                ...register('area')
+                // ,
+                // {
+                //   setValueAs: (value: any) => Array(value),
+                // }
               }
-            />
-          </div>
-        </Styled.CoordinateGroup>
-        <Styled.CoordinateGroup>
-          <Typography variant="h6">Bottom Right Corner </Typography>
-          <div className={errors.coordinateBottom && 'input-error'}>
-            <Label label="X-coordinate" />
-            <Input
-              type="string"
-              value={areaCoordinats.bottom.X}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setAreaCoordinats({
-                  ...areaCoordinats,
-                  bottom: {
-                    ...areaCoordinats.bottom,
-                    X: e.currentTarget.value,
-                  },
-                })
-              }
-            />
-          </div>
-          <div className={errors.coordinateBottom && 'input-error'}>
-            <Label label="Y-coordinate" />
-            <Input
-              type="string"
-              value={areaCoordinats.bottom.Y}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setAreaCoordinats({
-                  ...areaCoordinats,
-                  bottom: {
-                    ...areaCoordinats.bottom,
-                    Y: e.currentTarget.value,
-                  },
-                })
-              }
-            />
-          </div>
-        </Styled.CoordinateGroup>
-        {(errors.area || errors.coordinateBottom || errors.coordinateTop) && (
-          <Styled.ErrorMessage variant="h4">
-            Highlighted fields required
-          </Styled.ErrorMessage>
-        )}
-        <Button onClick={saveChange}>Save</Button>
-      </Styled.Form>
-    </Styled.SideSheet>
-  );
-};
-
-/**
- * 
- * <CoordinateSet
-        label="Top Left Corner"
-        position={areaCoordinats.top}
-        areaCoordinats={areaCoordinats}
-        setAreaCoordinats={setAreaCoordinats}
-      ></CoordinateSet>
- * 
-const CoordinateSet = ({
-  label,
-  position,
-  areaCoordinats,
-  setAreaCoordinats,
-}: {
-  label: string;
-  position: {
-    X: string;
-    Y: string;
-  };
-  areaCoordinats: CoordinateType;
-  setAreaCoordinats: (areaCoordinats: CoordinateType) => void;
-}) => {
-  return (
-    <div>
-      <Typography variant="h6">{label}</Typography>
-      <div>
-        <Label label="X-coordinate" />
-        <Input
-          type="string"
-          value={areaCoordinats.top.X}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-            setAreaCoordinats({
-              ...areaCoordinats,
-              [position.X]: {
-                ...[position],
-                X: e.currentTarget.value,
-              },
-            })
-          }
-        />
-      </div>
-      <div>
-        <Label label="Y-coordinate" />
-        <Input
-          type="string"
-          value={areaCoordinats.top.Y}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            setAreaCoordinats({
-              ...areaCoordinats,
-              [position.Y]: {
-                ...[position],
-                Y: e.currentTarget.value,
-              },
-            });
-          }}
-        />
-      </div>
-    </div>
+              label={'Select area'}
+              options={modelAreas}
+              optionLabel={(option) => option.name}
+              onOptionsChange={handleSelectChange}
+            ></Autocomplete>
+            <div className={errors.area && 'autocomplete-error'}>
+              {errors.area && errors.area?.message}
+            </div>
+          </Styled.CoordinateGroup>
+
+          <Styled.CoordinateGroup>
+            <Typography variant="h6">Top Left Corner</Typography>
+            <div className={errors.topX && 'input-error'}>
+              <Label label="X-coordinate" />
+              <Input {...register('topX')} />
+              {errors.topX && errors.topX?.message}
+            </div>
+            <div className={errors.topY && 'input-error'}>
+              <Label label="Y-coordinate" />
+              <Input {...register('topY')} />
+              {errors.topY && errors.topY?.message}
+            </div>
+          </Styled.CoordinateGroup>
+          <Styled.CoordinateGroup>
+            <Typography variant="h6">Bottom Right Corner </Typography>
+            <div className={errors.bottomX && 'input-error'}>
+              <Label label="X-coordinate" />
+              <Input {...register('bottomX')} />
+              {errors.bottomX && errors.bottomX?.message}
+            </div>
+            <div className={errors.bottomY && 'input-error'}>
+              <Label label="Y-coordinate" />
+              <Input {...register('bottomY')} />
+              {errors.bottomY && errors.bottomY?.message}
+            </div>
+          </Styled.CoordinateGroup>
+
+          <Button type="submit">Save</Button>
+        </Styled.Form>
+      </Styled.SideSheet>
+      <Snackbar
+        open={!!showSaveAlert}
+        autoHideDuration={3000}
+        onClose={clearStatus}
+      >
+        {'Area coordinates saved'}
+      </Snackbar>
+    </>
   );
 };
- */
diff --git a/yarn.lock b/yarn.lock
index 788c30ed..c59ade2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1424,6 +1424,11 @@
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz"
   integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==
 
+"@hookform/resolvers@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.2.tgz#5c40f06fe8137390b071d961c66d27ee8f76f3bc"
+  integrity sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz"
@@ -8428,6 +8433,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hook-form@^7.47.0:
+  version "7.47.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"
+  integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -10506,3 +10516,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^3.22.4:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==