diff --git a/components/JoinParty.tsx b/components/JoinParty.tsx
index 587ddc1..d5bb805 100644
--- a/components/JoinParty.tsx
+++ b/components/JoinParty.tsx
@@ -1,21 +1,20 @@
 "use client";
 
-import { FormEvent } from "react";
+import { useContext } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
+import { ErrorContext } from "./App";
+
+type Inputs = {
+  code: string;
+};
 
 export default function JoinParty() {
   const { mutate } = useSWRConfig();
+  const { register, handleSubmit } = useForm<Inputs>();
+  const { setError } = useContext(ErrorContext);
 
-  async function onSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    const data = new FormData(event.currentTarget);
-    const value = data.get("code");
-    if (!value) {
-      throw new Error();
-    }
-
-    const code = value.toString().toLowerCase();
+  const onSubmit: SubmitHandler<Inputs> = async ({ code }) => {
     const res = await fetch("/api/party/join", {
       method: "POST",
       headers: {
@@ -25,18 +24,17 @@ export default function JoinParty() {
     });
 
     if (!res.ok) {
-      throw new Error(await res.json());
+      setError(await res.json());
+      return;
     }
 
     mutate("/api/user");
-  }
+  };
 
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <input
-        type="text"
-        id="code"
-        name="code"
+        {...register("code")}
         className="input input-bordered"
         placeholder="Party Code"
         required
diff --git a/package-lock.json b/package-lock.json
index 61e00fc..a8a2255 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "next-themes": "^0.2.1",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.50.1",
         "swr": "^2.2.5"
       },
       "devDependencies": {
@@ -4009,6 +4010,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.50.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
+      "integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
+      "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-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 194e2f9..4b97eb0 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.50.1",
     "swr": "^2.2.5"
   },
   "devDependencies": {