diff --git a/package.json b/package.json
index 5ba0d58c..79cea7ee 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@date-io/date-fns": "1.x",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@hookform/resolvers": "^2.8.1",
     "@mdi/js": "^5.9.55",
     "@monaco-editor/react": "^4.1.0",
     "@mui/icons-material": "^5.0.0",
@@ -51,7 +52,7 @@
     "react-element-scroll-hook": "^1.1.0",
     "react-firebaseui": "^5.0.2",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6",
+    "react-hook-form": "^7.16.1",
     "react-image": "^4.0.3",
     "react-joyride": "^2.3.0",
     "react-json-view": "^1.19.1",
diff --git a/src/components/SideDrawer/Form/Autosave.tsx b/src/components/SideDrawer/Form/Autosave.tsx
index de996ad7..7dc6854f 100644
--- a/src/components/SideDrawer/Form/Autosave.tsx
+++ b/src/components/SideDrawer/Form/Autosave.tsx
@@ -4,7 +4,7 @@ import _isEqual from "lodash/isEqual";
 import _pick from "lodash/pick";
 import _pickBy from "lodash/pickBy";
 
-import { Control, UseFormMethods, useWatch } from "react-hook-form";
+import { Control, UseFormReturn, useWatch } from "react-hook-form";
 import { Values } from "./utils";
 
 import { useProjectContext } from "contexts/ProjectContext";
@@ -14,8 +14,8 @@ export interface IAutosaveProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   row: any;
-  reset: UseFormMethods["reset"];
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
 }
 
 const getEditables = (values: Values, tableState?: TableState) =>
diff --git a/src/components/SideDrawer/Form/Reset.tsx b/src/components/SideDrawer/Form/Reset.tsx
index eef61568..fd75d038 100644
--- a/src/components/SideDrawer/Form/Reset.tsx
+++ b/src/components/SideDrawer/Form/Reset.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { UseFormMethods } from "react-hook-form";
+import { UseFormReturn } from "react-hook-form";
 import _pickBy from "lodash/pickBy";
 import _isEqual from "lodash/isEqual";
 
@@ -7,9 +7,9 @@ import { Values } from "./utils";
 
 export interface IResetProps {
   defaultValues: Values;
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
-  reset: UseFormMethods["reset"];
-  getValues: UseFormMethods["getValues"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  getValues: UseFormReturn["getValues"];
 }
 
 /**
@@ -38,7 +38,7 @@ export default function Reset({
       const diff = _pickBy(getValues(), (v, k) => !_isEqual(v, resetValues[k]));
       // Reset if needed & keep the current dirty fields
       if (Object.keys(diff).length > 0) {
-        reset(resetValues, { isDirty: true, dirtyFields: true });
+        reset(resetValues, { keepDirty: true });
       }
     },
     // `defaultValues` is the `initialValue` of each field type +
diff --git a/src/components/SideDrawer/Form/index.tsx b/src/components/SideDrawer/Form/index.tsx
index 65f639f8..729342d2 100644
--- a/src/components/SideDrawer/Form/index.tsx
+++ b/src/components/SideDrawer/Form/index.tsx
@@ -38,10 +38,8 @@ export default function Form({ values }: IFormProps) {
   const { ref: docRef, ...rowValues } = values;
   const defaultValues = { ...initialValues, ...rowValues };
 
-  const { control, reset, formState, getValues } = useForm({
-    mode: "onBlur",
-    defaultValues,
-  });
+  const methods = useForm({ mode: "onBlur", defaultValues });
+  const { control, reset, formState, getValues } = methods;
   const { dirtyFields } = formState;
 
   // const { sideDrawerRef } = useProjectContext();
@@ -105,6 +103,7 @@ export default function Form({ values }: IFormProps) {
                 control,
                 docRef,
                 disabled: field.editable === false,
+                useFormMethods: methods,
               })}
             </FieldWrapper>
           );
diff --git a/src/components/fields/Action/SideDrawerField.tsx b/src/components/fields/Action/SideDrawerField.tsx
index 663620ee..f6d0dd60 100644
--- a/src/components/fields/Action/SideDrawerField.tsx
+++ b/src/components/fields/Action/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function Action({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const hasRan = value && value.status;
 
         return (
diff --git a/src/components/fields/Checkbox/SideDrawerField.tsx b/src/components/fields/Checkbox/SideDrawerField.tsx
index 9a4ae4be..2e8550e0 100644
--- a/src/components/fields/Checkbox/SideDrawerField.tsx
+++ b/src/components/fields/Checkbox/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Checkbox({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
           onChange(event.target.checked);
         };
diff --git a/src/components/fields/Code/SideDrawerField.tsx b/src/components/fields/Code/SideDrawerField.tsx
index 67e9e571..5a443701 100644
--- a/src/components/fields/Code/SideDrawerField.tsx
+++ b/src/components/fields/Code/SideDrawerField.tsx
@@ -30,7 +30,7 @@ export default function Code({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <CodeEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/Color/SideDrawerField.tsx b/src/components/fields/Color/SideDrawerField.tsx
index 71bae526..9c40bb29 100644
--- a/src/components/fields/Color/SideDrawerField.tsx
+++ b/src/components/fields/Color/SideDrawerField.tsx
@@ -52,7 +52,7 @@ export default function Color({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         console.log(value);
         return (
           <>
diff --git a/src/components/fields/ConnectService/SideDrawerField.tsx b/src/components/fields/ConnectService/SideDrawerField.tsx
index 09c824a1..9237a0c3 100644
--- a/src/components/fields/ConnectService/SideDrawerField.tsx
+++ b/src/components/fields/ConnectService/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function ConnectService({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(
diff --git a/src/components/fields/ConnectTable/SideDrawerField.tsx b/src/components/fields/ConnectTable/SideDrawerField.tsx
index 3ccaaa58..f7fc12d3 100644
--- a/src/components/fields/ConnectTable/SideDrawerField.tsx
+++ b/src/components/fields/ConnectTable/SideDrawerField.tsx
@@ -1,7 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { useTheme, Grid, Chip } from "@mui/material";
+import { Grid, Chip } from "@mui/material";
 
 import ConnectTableSelect from "./ConnectTableSelect";
 
@@ -9,16 +9,15 @@ export default function ConnectTable({
   column,
   control,
   disabled,
+  useFormMethods,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
 
   return (
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(value.filter((v) => v.snapshot.objectID !== hit.objectID));
@@ -29,7 +28,7 @@ export default function ConnectTable({
           <>
             {!disabled && (
               <ConnectTableSelect
-                row={control.getValues()}
+                row={useFormMethods.getValues()}
                 column={column}
                 config={(config as any) ?? {}}
                 value={value}
diff --git a/src/components/fields/Date/SideDrawerField.tsx b/src/components/fields/Date/SideDrawerField.tsx
index 7bc9a02d..65663ea4 100644
--- a/src/components/fields/Date/SideDrawerField.tsx
+++ b/src/components/fields/Date/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/DateTime/SideDrawerField.tsx b/src/components/fields/DateTime/SideDrawerField.tsx
index 5f0e1924..f2b9aefb 100644
--- a/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/src/components/fields/DateTime/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/Duration/SideDrawerField.tsx b/src/components/fields/Duration/SideDrawerField.tsx
index 555b948f..f1a536b8 100644
--- a/src/components/fields/Duration/SideDrawerField.tsx
+++ b/src/components/fields/Duration/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function Duration({ column, control }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (
           !value ||
           !value.start ||
diff --git a/src/components/fields/Email/SideDrawerField.tsx b/src/components/fields/Email/SideDrawerField.tsx
index abe9e262..0dffb133 100644
--- a/src/components/fields/Email/SideDrawerField.tsx
+++ b/src/components/fields/Email/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Email({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index e462cf5c..5cea9319 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -169,7 +169,7 @@ export default function File_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledFileUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index a8c541f9..d5275205 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -272,7 +272,7 @@ export default function Image_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledImageUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx
index 757a5439..46c3f761 100644
--- a/src/components/fields/Json/SideDrawerField.tsx
+++ b/src/components/fields/Json/SideDrawerField.tsx
@@ -29,7 +29,7 @@ export default function Json({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         if (disabled)
           return (
             <div
diff --git a/src/components/fields/LongText/SideDrawerField.tsx b/src/components/fields/LongText/SideDrawerField.tsx
index 6b02f235..cae11594 100644
--- a/src/components/fields/LongText/SideDrawerField.tsx
+++ b/src/components/fields/LongText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function LongText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/MultiSelect/SideDrawerField.tsx b/src/components/fields/MultiSelect/SideDrawerField.tsx
index 3f1fd0cf..64314c3d 100644
--- a/src/components/fields/MultiSelect/SideDrawerField.tsx
+++ b/src/components/fields/MultiSelect/SideDrawerField.tsx
@@ -19,7 +19,7 @@ export default function MultiSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (index: number) => () => {
           const newValues = [...value];
           newValues.splice(index, 1);
diff --git a/src/components/fields/Number/SideDrawerField.tsx b/src/components/fields/Number/SideDrawerField.tsx
index 58382147..998e58f5 100644
--- a/src/components/fields/Number/SideDrawerField.tsx
+++ b/src/components/fields/Number/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Number_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value));
 
         return (
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 6fb2f1f7..661890dc 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -39,7 +39,7 @@ export default function Percentage({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value) / 100);
 
         return (
diff --git a/src/components/fields/Phone/SideDrawerField.tsx b/src/components/fields/Phone/SideDrawerField.tsx
index afa99aaa..ee3806bb 100644
--- a/src/components/fields/Phone/SideDrawerField.tsx
+++ b/src/components/fields/Phone/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Phone({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/Rating/SideDrawerField.tsx b/src/components/fields/Rating/SideDrawerField.tsx
index ea813bb4..80ad86e0 100644
--- a/src/components/fields/Rating/SideDrawerField.tsx
+++ b/src/components/fields/Rating/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Rating({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <MuiRating
             name={column.key}
diff --git a/src/components/fields/RichText/SideDrawerField.tsx b/src/components/fields/RichText/SideDrawerField.tsx
index a1907cca..f38f4e30 100644
--- a/src/components/fields/RichText/SideDrawerField.tsx
+++ b/src/components/fields/RichText/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function RichText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <RichTextEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/ShortText/SideDrawerField.tsx b/src/components/fields/ShortText/SideDrawerField.tsx
index 91858dd4..90e32f58 100644
--- a/src/components/fields/ShortText/SideDrawerField.tsx
+++ b/src/components/fields/ShortText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function ShortText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/SingleSelect/SideDrawerField.tsx b/src/components/fields/SingleSelect/SideDrawerField.tsx
index 912e7e67..3d4dd8c1 100644
--- a/src/components/fields/SingleSelect/SideDrawerField.tsx
+++ b/src/components/fields/SingleSelect/SideDrawerField.tsx
@@ -15,7 +15,7 @@ export default function SingleSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => (
+      render={({ field: { onChange, onBlur, value } }) => (
         <>
           <MultiSelect
             value={sanitiseValue(value)}
diff --git a/src/components/fields/Slider/SideDrawerField.tsx b/src/components/fields/Slider/SideDrawerField.tsx
index f772addd..8ac3ca8c 100644
--- a/src/components/fields/Slider/SideDrawerField.tsx
+++ b/src/components/fields/Slider/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Slider({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (_: any, value: number | number[]) => {
           onChange(value);
           onBlur();
diff --git a/src/components/fields/Status/SideDrawerField.tsx b/src/components/fields/Status/SideDrawerField.tsx
index a64d833f..be34c2c9 100644
--- a/src/components/fields/Status/SideDrawerField.tsx
+++ b/src/components/fields/Status/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Rating({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => (
+      render={({ field: { value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <>{value}</>
         </Grid>
diff --git a/src/components/fields/Url/SideDrawerField.tsx b/src/components/fields/Url/SideDrawerField.tsx
index 4729a251..8d87377a 100644
--- a/src/components/fields/Url/SideDrawerField.tsx
+++ b/src/components/fields/Url/SideDrawerField.tsx
@@ -13,7 +13,7 @@ export default function Url({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <Stack direction="row">
             <TextField
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index e7be0ebb..d560be1c 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -14,7 +14,7 @@ export default function User({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (!value || !value.displayName || !value.timestamp)
           return <div className={fieldClasses.root} />;
         const dateLabel = format(
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 8bb9a56a..7f944ed3 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -1,7 +1,7 @@
 import { FieldType } from "constants/fields";
 
 import { FormatterProps, EditorProps } from "react-data-grid";
-import { Control } from "react-hook-form";
+import { Control, UseFormReturn } from "react-hook-form";
 import { PopoverProps } from "@mui/material";
 
 export { FieldType };
@@ -49,6 +49,7 @@ export interface ISideDrawerFieldProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   disabled: boolean;
+  useFormMethods: UseFormReturn;
 }
 
 export interface ISettingsProps {
diff --git a/yarn.lock b/yarn.lock
index 56b0093b..79cd48a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2153,6 +2153,11 @@
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.0.tgz#32e82b072ff71c71e62fb2901b129642a0c5897e"
   integrity sha512-ALlr0Bg6zDHdRsdqkwfWGPMnIxP4hqMRPvFDHp7lWXQeA7rKykto3cWqQQh1s0PzX043RHwMB6OHVPMwFJqwxg==
 
+"@hookform/resolvers@^2.8.1":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.1.tgz#0d4fdd25bdeb4b98bf4e177c63fc4efa173454dd"
+  integrity sha512-U5lgaCkvD+0e5X8iQmCHiF+jOqjTX6OHUA7zPdeIHI6xdAOoi3rH9MKNuwMwv5Hly2LL6XtDgDkS/k+YG9hOew==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -13569,16 +13574,16 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6:
-  version "6.15.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
-
 react-hook-form@^7.10.0:
   version "7.15.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.15.2.tgz#c4d4fa44a5df755648ab19034062ae37087536b0"
   integrity sha512-tPcLlsTXaOtZkyc1IGGaJfQ6amo2sJiM6DDufE7WG+S4N8s5Wr60HGtnKS7gPnnZL93pFPQYrSj7WDB5An2VVw==
 
+react-hook-form@^7.16.1:
+  version "7.16.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.16.1.tgz#669046df378a71949e5cf8a2398cbe20d5cb27bc"
+  integrity sha512-kcLDmSmlyLUFx2UU5bG/o4+3NeK753fhKodJa8gkplXohGkpAq0/p+TR24OWjZmkEc3ES7ppC5v5d6KUk+fJTA==
+
 react-image@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"