diff --git a/components/form/Textarea.js b/components/form/Textarea.js
index 695d71fe2ff..6291c380d69 100644
--- a/components/form/Textarea.js
+++ b/components/form/Textarea.js
@@ -1,10 +1,12 @@
+import { forwardRef } from "react";
 import Label from "./Label";
 
-export default function Textarea({ name, value, label, ...restProps }) {
+const Textarea = forwardRef(({ name, value, label, ...restProps },ref) => {
   return (
     <div>
       <Label htmlFor={name}>{label}</Label>
       <textarea
+      ref={ref}
         rows={4}
         name={name}
         id={name}
@@ -14,4 +16,8 @@ export default function Textarea({ name, value, label, ...restProps }) {
       />
     </div>
   );
-}
+});
+
+Textarea.displayName="Textarea";
+
+export default Textarea;
\ No newline at end of file
diff --git a/components/user/UserMilestone.js b/components/user/UserMilestone.js
index 06f34f4af2d..e7c32ab9d25 100644
--- a/components/user/UserMilestone.js
+++ b/components/user/UserMilestone.js
@@ -8,9 +8,8 @@ import Edit from "@components/account/manage/Edit";
 import Markdown from "@components/Markdown";
 import { shortenDate } from "@services/utils/dateFormat";
 
-export default function UserMilestone({ milestone, isGoal, manage }) {
+export default function UserMilestone({ milestone,  manage }) {
   const [date, setDate] = useState(milestone.date);
-
   useEffect(() => {
     if (milestone.date) {
       const formattedDate = shortenDate({
@@ -22,11 +21,10 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
   }, [milestone.date, milestone.dateFormat]);
 
   const DisplayIcon = getIcon(milestone.icon);
-  const item = (milestone, isGoal) => {
-    const colors = isGoal
+  const item = () => {
+    const colors = milestone.isGoal
       ? "text-primary-medium/70 dark:text-primary-low-medium/[.83]"
       : "text-primary-medium dark:text-primary-low-medium";
-
     return (
       <div className="flex space-x-3 grow">
         {milestone.icon && (
@@ -38,7 +36,7 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
           <div className="flex items-center justify-between">
             <h2
               className={classNames(
-                isGoal && "opacity-70",
+                milestone.isGoal && "opacity-70",
                 "text-sm font-medium",
               )}
             >
@@ -65,17 +63,18 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
     );
   };
 
-  const edit = (milestone, isGoal) => (
+  const edit = () => (
     <Edit
       href={`/account/manage/milestone/${milestone._id}`}
       label={`${milestone.title} Milestone`}
     >
-      {item(milestone, isGoal)}
+      {item(milestone.isGoal)}
     </Edit>
   );
+
   return (
     <li className="flex flex-row gap-8 py-4 border-primary-low-medium">
-      {manage ? edit(milestone, isGoal) : item(milestone, isGoal)}
+      {manage ? edit() : item()}
     </li>
   );
 }
diff --git a/components/user/UserMilestones.js b/components/user/UserMilestones.js
index 28f835b6ad0..fc43b8395bc 100644
--- a/components/user/UserMilestones.js
+++ b/components/user/UserMilestones.js
@@ -17,7 +17,6 @@ export default function UserMilestones({ milestones, manage = false }) {
           historicMilestones.map((milestone, key) => (
             <UserMilestone
               milestone={milestone}
-              isGoal={false}
               key={key}
               manage={manage}
             />
@@ -34,7 +33,6 @@ export default function UserMilestones({ milestones, manage = false }) {
         {futureMilestones.map((goal, key) => (
           <UserMilestone
             milestone={goal}
-            isGoal={true}
             key={key}
             manage={manage}
           />
diff --git a/package-lock.json b/package-lock.json
index cc762c73571..801cf269ac3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,12 +6,13 @@
   "packages": {
     "": {
       "name": "biodrop",
-      "version": "2.87.3",
+      "version": "2.90.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
+        "@hookform/resolvers": "^3.3.2",
         "@mdx-js/loader": "^3.0.0",
         "@mdx-js/react": "^3.0.0",
         "@next/mdx": "^14.0.1",
@@ -38,6 +39,7 @@
         "react": "^18.2.0",
         "react-children-utilities": "^2.9.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.48.2",
         "react-icons": "^4.11.0",
         "react-leaflet": "^4.2.1",
         "react-markdown": "^9.0.0",
@@ -2665,6 +2667,14 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.2.tgz",
+      "integrity": "sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -20121,6 +20131,21 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
+    "node_modules/react-hook-form": {
+      "version": "7.48.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz",
+      "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
diff --git a/package.json b/package.json
index 8540c96b520..6c99798da7c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@hookform/resolvers": "^3.3.2",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.1",
@@ -35,6 +36,7 @@
     "react": "^18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-icons": "^4.11.0",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^9.0.0",
diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
index a11e413af45..22f05bc576a 100644
--- a/pages/account/manage/milestone/[[...data]].js
+++ b/pages/account/manage/milestone/[[...data]].js
@@ -1,7 +1,10 @@
 import Router from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { authOptions } from "../../../api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
 
 import { clientEnv } from "@config/schemas/clientSchema";
 import logger from "@config/logger";
@@ -63,30 +66,11 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     message: "",
     additionalMessage: "",
   });
-  const [title, setTitle] = useState(milestone.title || "");
-  const [description, setDescription] = useState(milestone.description || "");
-  const [url, setUrl] = useState(milestone.url || "");
-  const [icon, setIcon] = useState(milestone.icon || "");
-  const [date, setDate] = useState(milestone.date || "");
-  const [isGoal, setIsGoal] = useState(milestone.isGoal ? true : false);
-  const [dateFormat, setdateFormat] = useState(
-    milestone.dateFormat || options[0].value,
-  );
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
 
+  const onSubmit = async (data) => {
     let alert = "created";
-    let putMilestone = {
-      title,
-      description,
-      url,
-      icon,
-      date,
-      isGoal,
-      dateFormat,
-    };
     let apiUrl = `${BASE_URL}/api/account/manage/milestone/`;
+    let putMilestone = data;
     if (milestone._id) {
       alert = "updated";
       putMilestone = { ...putMilestone, _id: milestone._id };
@@ -100,7 +84,6 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
       body: JSON.stringify(putMilestone),
     });
     const update = await res.json();
-
     if (update.message) {
       return setShowNotification({
         show: true,
@@ -139,12 +122,46 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     return Router.push(`${BASE_URL}/account/manage/milestones?alert=deleted`);
   };
 
+  const mileStoneClientSchema = z.object({
+    url: z.string().optional(),
+    date: z.string().optional(),
+    dateFormat: z.string().default("dd/mm/yyyy"),
+    isGoal: z.boolean().optional(),
+    title: z.string().min(2).max(256),
+    icon: z.string().min(2).max(32).optional(),
+    description: z.string().min(2).max(512),
+
+  })
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+    control,
+    watch
+  } = useForm({
+    resolver: zodResolver(mileStoneClientSchema),
+    defaultValues: useMemo(() => ({
+      title: milestone.title || "",
+      description: milestone.description || "",
+      url: milestone.url || "",
+      icon: milestone.icon || "",
+      date: milestone.date || "",
+      isGoal: milestone.isGoal || false,
+      dateFormat: milestone.dateFormat || options[0].value
+    }), [milestone])
+  })
+
+  const milestoneWatch = watch(['title', 'description', 'url', 'icon', 'date', 'isGoal', 'dateFormat']);
+
   useEffect(() => {
-    const parse = Date.parse(date);
+    const parse = Date.parse(getValues("date"));
     if (!isNaN(parse)) {
-      setDate(new Date(parse).toISOString().split("T")[0]);
+      setValue("date", new Date(parse).toISOString().split("T")[0]);
     }
-  }, [date, milestone.date]);
+  }, [getValues("data"), milestone.date]);
 
   return (
     <>
@@ -152,10 +169,8 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
         title="Manage Milestone"
         description={`Here you can manage your ${PROJECT_NAME} milestone`}
       />
-
       <Page>
         <Navigation />
-
         <Notification
           show={showNotification.show}
           type={showNotification.type}
@@ -169,7 +184,8 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
         <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
           <form
             className="space-y-8 divide-y divide-primary-low-medium/30"
-            onSubmit={handleSubmit}
+            onSubmit={handleSubmit(onSubmit)}
+            def
           >
             <div className="space-y-8 divide-y divide-primary-low-medium/30 sm:space-y-5">
               <div className="space-y-6 sm:space-y-5">
@@ -182,15 +198,13 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                 <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-primary-low-medium/30 sm:pt-5">
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
+                      {...register("title")
+                      }
                       name="title"
                       label="Milestone Title"
-                      onChange={(e) => setTitle(e.target.value)}
-                      value={title}
                       placeholder="Title of your Milestone"
-                      required
-                      minLength="2"
-                      maxLength="256"
                     />
+                    {errors.title && <p className=" text-red-500 ">{errors.title.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       For example: <i>GitHub Star</i>
                     </p>
@@ -198,59 +212,62 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
 
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Textarea
+                      {...register("description")
+                      }
                       name="description"
                       placeholder="Description of your Milestone"
-                      onChange={(e) => setDescription(e.target.value)}
-                      value={description}
-                      required
-                      minLength="2"
-                      maxLength="512"
                     />
+                    {errors.description && <p className="text-red-500">{errors.description.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Describe this Milestone
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
-                      type="url"
+                      {...register("url")
+                      }
                       name="url"
                       label="URL"
-                      onChange={(e) => setUrl(e.target.value)}
-                      value={url}
                       placeholder="https://www.example.com"
-                      minLength="2"
-                      maxLength="256"
                     />
+                    {errors.url && <p className=" text-red-500 ">{errors.url.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Link to more information (optional)
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
+                      {...register("date")}
                       type="date"
                       name="date"
                       label="Date"
-                      onChange={(e) => setDate(e.target.value)}
-                      value={date}
-                      required
                       min="1970-01-01"
                     />
+                    {errors.date && <p className=" text-red-500 ">{errors.date.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       For example: <i>DD / MM / YYYY</i>
                     </p>
                     <Select
+                      {...register("dateFormat")
+                      }
                       name="layout"
                       label="Select format"
-                      value={dateFormat}
                       options={options}
-                      onChange={(e) => setdateFormat(e.target.value)}
                     />
+                    {errors.dateFormat && <p className=" text-red-500 ">{errors.dateFormat.message}</p>}
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
-                    <IconSearch
-                      handleSelectedIcon={setIcon}
-                      selectedIcon={icon}
+                    <Controller
+                      name="icon"
+                      control={control}
+                      render={({ field }) => (
+                        <IconSearch
+                          handleSelectedIcon={field.onChange}
+                          selectedIcon={field.value}
+                        />
+                      )}
                     />
+                    {errors.icon && <p className=" text-red-500 ">{errors.icon.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Search for available{" "}
                       <Link href="/icons" target="_blank">
@@ -259,11 +276,17 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
-                    <Toggle
-                      text1="Is this a future goal?"
-                      text2="Future Milestone"
-                      enabled={isGoal}
-                      setEnabled={setIsGoal}
+                    <Controller
+                      name="isGoal"
+                      control={control}
+                      render={({ field }) => (
+                        <Toggle
+                          text1="Is this a future goal?"
+                          text2="Future Milestone"
+                          enabled={field.value}
+                          setEnabled={field.onChange}
+                        />
+                      )}
                     />
                   </div>
                 </div>
@@ -282,17 +305,17 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
             </div>
           </form>
           <div>
+
             <UserMilestone
               milestone={{
-                title,
-                description,
-                url,
-                icon,
-                date,
-                isGoal,
-                dateFormat,
+                title: milestoneWatch[0],
+                description: milestoneWatch[1],
+                url: milestoneWatch[2],
+                icon: milestoneWatch[3],
+                date: milestoneWatch[4],
+                isGoal: milestoneWatch[5] || false,
+                dateFormat: milestoneWatch[6] || options[0].value
               }}
-              isGoal={isGoal}
             />
           </div>
         </div>