diff --git a/bun.lockb b/bun.lockb
index e412d77d..ebf79ef3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2c62c8a8..fa5799a1 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "@trpc/server": "next",
     "@vercel/postgres": "^0.7.2",
     "drizzle-orm": "^0.28.5",
-    "formik": "^2.4.5",
     "next": "^14.1.3",
     "postgres": "^3.4.4",
     "react": "18.2.0",
diff --git a/src/views/board/components/List.tsx b/src/views/board/components/List.tsx
index 9907f23f..6c6b8208 100644
--- a/src/views/board/components/List.tsx
+++ b/src/views/board/components/List.tsx
@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import { HiOutlinePlusSmall } from "react-icons/hi2";
 import { Draggable } from "react-beautiful-dnd";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 
 import { api } from "~/utils/api";
 import { useModal } from "~/providers/modal";
@@ -42,20 +42,20 @@ export default function List({
 
   const updateList = api.list.update.useMutation();
 
-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue } = useForm<FormValues>({
+    defaultValues: {
       listPublicId: list.publicId,
       name: list.name,
     },
-    onSubmit: (values: FormValues) => {
-      updateList.mutate({
-        listPublicId: values.listPublicId,
-        name: values.name,
-      });
-    },
-    enableReinitialize: true,
   });
 
+  const onSubmit = (values: FormValues) => {
+    updateList.mutate({
+      listPublicId: values.listPublicId,
+      name: values.name,
+    });
+  };
+
   return (
     <Draggable key={list.publicId} draggableId={list.publicId} index={index}>
       {(provided) => (
@@ -68,17 +68,15 @@ export default function List({
         >
           <div className="flex justify-between">
             <form
-              onSubmit={formik.handleSubmit}
+              onSubmit={handleSubmit(onSubmit)}
               className="focus-visible:outline-none"
             >
               <input
-                type="name"
                 id="name"
-                name="name"
-                value={formik.values.name}
-                onChange={formik.handleChange}
-                onBlur={formik.submitForm}
-                className="font-mediumfocus:ring-0 mb-4 block border-0 bg-transparent px-4 pt-1 text-sm text-neutral-900 focus-visible:outline-none dark:text-dark-1000"
+                type="text"
+                {...register("name")}
+                onBlur={handleSubmit(onSubmit)}
+                className="mb-4 block border-0 bg-transparent px-4 pt-1 text-sm font-medium text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000"
               />
             </form>
             <div>
diff --git a/src/views/board/index.tsx b/src/views/board/index.tsx
index d1fcd4d4..9a36fe7f 100644
--- a/src/views/board/index.tsx
+++ b/src/views/board/index.tsx
@@ -8,7 +8,7 @@ import {
   type DropResult,
   Draggable,
 } from "react-beautiful-dnd";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 
 import { api } from "~/utils/api";
 import { useBoard } from "~/providers/board";
@@ -40,20 +40,20 @@ export default function BoardPage() {
 
   const updateBoard = api.board.update.useMutation();
 
-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue } = useForm<UpdateBoardInput>({
+    values: {
       boardPublicId: boardId ?? "",
-      name: boardData?.name ? boardData.name : "",
+      name: "",
     },
-    onSubmit: (values: UpdateBoardInput) => {
-      updateBoard.mutate({
-        boardPublicId: values.boardPublicId,
-        name: values.name,
-      });
-    },
-    enableReinitialize: true,
   });
 
+  const onSubmit = (values: UpdateBoardInput) => {
+    updateBoard.mutate({
+      boardPublicId: values.boardPublicId,
+      name: values.name,
+    });
+  };
+
   const { data, isSuccess, isLoading } = api.board.byId.useQuery(
     { boardPublicId: boardId ?? "" },
     {
@@ -64,8 +64,9 @@ export default function BoardPage() {
   useEffect(() => {
     if (isSuccess && data) {
       setBoardData(data);
+      setValue("name", data.name || "");
     }
-  }, [isSuccess, data, setBoardData]);
+  }, [isSuccess, data, setBoardData, setValue]);
 
   if (!boardId || !boardData) return <></>;
 
@@ -136,16 +137,14 @@ export default function BoardPage() {
           </div>
         ) : (
           <form
-            onSubmit={formik.handleSubmit}
+            onSubmit={handleSubmit(onSubmit)}
             className="focus-visible:outline-none"
           >
             <input
-              type="name"
               id="name"
-              name="name"
-              value={formik.values.name}
-              onChange={formik.handleChange}
-              onBlur={formik.submitForm}
+              type="text"
+              {...register("name")}
+              onBlur={handleSubmit(onSubmit)}
               className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]"
             />
           </form>
diff --git a/src/views/card/components/LabelSelector.tsx b/src/views/card/components/LabelSelector.tsx
index 0264d76b..76ec0a86 100644
--- a/src/views/card/components/LabelSelector.tsx
+++ b/src/views/card/components/LabelSelector.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
 import { HiMiniPlus } from "react-icons/hi2";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 
 import { useModal } from "~/providers/modal";
 
@@ -33,18 +33,16 @@ export default function LabelSelector({
     },
   });
 
-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        labels?.map((label) => [label.publicId, label.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      labels?.map((label) => [label.publicId, label.selected]) ?? [],
+    ),
   });
 
+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
   const selectedLabels = labels.filter((label) => label.selected);
 
   return (
@@ -99,36 +97,32 @@ export default function LabelSelector({
           >
             <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
               <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                   {labels?.map((label) => (
                     <Menu.Item key={label.publicId}>
                       {() => (
                         <div
                           key={label.publicId}
                           className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={async (e) => {
-                            e.preventDefault();
-                            await formik.setFieldValue(
-                              label.publicId,
-                              !formik.values[label.publicId],
-                            );
+                          onClick={async () => {
+                            const newValue = !watch(label.publicId);
+                            setValue(label.publicId, newValue);
 
                             addOrRemoveLabel.mutate({
                               cardPublicId,
                               labelPublicId: label.publicId,
                             });
 
-                            await formik.submitForm();
+                            handleSubmit(onSubmit)();
                           }}
                         >
                           <input
                             id={label.publicId}
-                            name={label.publicId}
                             type="checkbox"
                             className="h-[14px] w-[14px] rounded bg-transparent"
                             onClick={(event) => event.stopPropagation()}
-                            onChange={formik.handleChange}
-                            checked={formik.values[label.publicId]}
+                            {...register(label.publicId)}
+                            checked={watch(label.publicId)}
                           />
                           <label
                             htmlFor={label.publicId}
diff --git a/src/views/card/components/ListSelector.tsx b/src/views/card/components/ListSelector.tsx
index 51130d00..ceea1f25 100644
--- a/src/views/card/components/ListSelector.tsx
+++ b/src/views/card/components/ListSelector.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 
 interface ListSelectorProps {
   cardPublicId: string;
@@ -28,18 +28,16 @@ export default function ListSelector({
     },
   });
 
-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        lists?.map((list) => [list.publicId, list.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      lists?.map((list) => [list.publicId, list.selected]) ?? [],
+    ),
   });
 
+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
   const selectedList = lists.find((list) => list.selected);
 
   return (
@@ -68,40 +66,41 @@ export default function ListSelector({
           >
             <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
               <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                   {lists?.map((list) => (
                     <Menu.Item key={list.publicId}>
-                      <div
-                        key={list.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            list.publicId,
-                            !formik.values[list.publicId],
-                          );
+                      {() => (
+                        <div
+                          key={list.publicId}
+                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                          onClick={async () => {
+                            const newValue = !watch(list.publicId);
+                            setValue(list.publicId, newValue);
 
-                          updateCardList.mutate({
-                            cardId: cardPublicId,
-                            newListId: list.publicId,
-                          });
+                            updateCardList.mutate({
+                              cardId: cardPublicId,
+                              newListId: list.publicId,
+                            });
 
-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={list.publicId}
-                          name={list.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[list.publicId]}
-                        />
-                        <label htmlFor={list.publicId} className="ml-3 text-sm">
-                          {list.name}
-                        </label>
-                      </div>
+                            handleSubmit(onSubmit)();
+                          }}
+                        >
+                          <input
+                            id={list.publicId}
+                            type="checkbox"
+                            className="h-[14px] w-[14px] rounded bg-transparent"
+                            onClick={(event) => event.stopPropagation()}
+                            {...register(list.publicId)}
+                            checked={watch(list.publicId)}
+                          />
+                          <label
+                            htmlFor={list.publicId}
+                            className="ml-3 text-sm"
+                          >
+                            {list.name}
+                          </label>
+                        </div>
+                      )}
                     </Menu.Item>
                   ))}
                 </form>
diff --git a/src/views/card/components/MemberSelector.tsx b/src/views/card/components/MemberSelector.tsx
index 8dd85e38..dd0c7a8e 100644
--- a/src/views/card/components/MemberSelector.tsx
+++ b/src/views/card/components/MemberSelector.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
 import { HiMiniPlus } from "react-icons/hi2";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 
 interface MemberSelectorProps {
   cardPublicId: string;
@@ -17,7 +17,7 @@ interface MemberSelectorProps {
   isLoading: boolean;
 }
 
-export default function LabelSelector({
+export default function MemberSelector({
   cardPublicId,
   members,
   isLoading,
@@ -32,18 +32,16 @@ export default function LabelSelector({
     },
   });
 
-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        members?.map((member) => [member.publicId, member.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      members?.map((member) => [member.publicId, member.selected]) ?? [],
+    ),
   });
 
+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
   const selectedMembers = members.filter((member) => member.selected);
 
   return (
@@ -95,43 +93,41 @@ export default function LabelSelector({
           >
             <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
               <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                   {members?.map((member) => (
                     <Menu.Item key={member.publicId}>
-                      <div
-                        key={member.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            member.publicId,
-                            !formik.values[member.publicId],
-                          );
+                      {() => (
+                        <div
+                          key={member.publicId}
+                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                          onClick={async () => {
+                            const newValue = !watch(member.publicId);
+                            setValue(member.publicId, newValue);
 
-                          addOrRemoveMember.mutate({
-                            cardPublicId,
-                            workspaceMemberPublicId: member.publicId,
-                          });
+                            addOrRemoveMember.mutate({
+                              cardPublicId,
+                              workspaceMemberPublicId: member.publicId,
+                            });
 
-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={member.publicId}
-                          name={member.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[member.publicId]}
-                        />
-                        <label
-                          htmlFor={member.publicId}
-                          className="ml-3 text-sm"
+                            handleSubmit(onSubmit)();
+                          }}
                         >
-                          {member?.user?.name}
-                        </label>
-                      </div>
+                          <input
+                            id={member.publicId}
+                            type="checkbox"
+                            className="h-[14px] w-[14px] rounded bg-transparent"
+                            onClick={(event) => event.stopPropagation()}
+                            {...register(member.publicId)}
+                            checked={watch(member.publicId)}
+                          />
+                          <label
+                            htmlFor={member.publicId}
+                            className="ml-3 text-sm"
+                          >
+                            {member?.user?.name}
+                          </label>
+                        </div>
+                      )}
                     </Menu.Item>
                   ))}
                 </form>
diff --git a/src/views/card/index.tsx b/src/views/card/index.tsx
index d6000ce1..89517b5d 100644
--- a/src/views/card/index.tsx
+++ b/src/views/card/index.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 import ContentEditable from "react-contenteditable";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
@@ -74,22 +74,22 @@ export default function CardPage() {
 
   const updateCard = api.card.update.useMutation();
 
-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
+    values: {
       cardId: cardId ?? "",
-      title: data?.title ? data.title : "",
-      description: data?.description ? data.description : "",
+      title: data?.title ?? "",
+      description: data?.description ?? "",
     },
-    onSubmit: (values: FormValues) => {
-      updateCard.mutate({
-        cardId: values.cardId,
-        title: values.title,
-        description: values.description,
-      });
-    },
-    enableReinitialize: true,
   });
 
+  const onSubmit = (values: FormValues) => {
+    updateCard.mutate({
+      cardId: values.cardId,
+      title: values.title,
+      description: values.description,
+    });
+  };
+
   if (!cardId) return <></>;
 
   return (
@@ -113,15 +113,16 @@ export default function CardPage() {
                 size={18}
                 className="mx-2 text-light-900 dark:text-dark-900"
               />
-              <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="w-full space-y-6"
+              >
                 <div>
                   <input
                     type="text"
                     id="title"
-                    name="title"
-                    value={formik.values.title}
-                    onChange={formik.handleChange}
-                    onBlur={formik.submitForm}
+                    {...register("title")}
+                    onBlur={handleSubmit(onSubmit)}
                     className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
                   />
                 </div>
@@ -133,16 +134,14 @@ export default function CardPage() {
           )}
         </div>
         <div className="mb-8 flex w-full max-w-2xl justify-between">
-          <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="w-full space-y-6">
             <div className="mt-2">
               <ContentEditable
                 placeholder="Add description..."
-                html={formik.values.description}
+                html={watch("description")}
                 disabled={false}
-                onChange={(e) =>
-                  formik.setFieldValue("description", e.target.value)
-                }
-                onBlur={formik.submitForm}
+                onChange={(e) => setValue("description", e.target.value)}
+                onBlur={handleSubmit(onSubmit)}
                 className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
               />
             </div>