diff --git a/components/modal/auth/InputField.tsx b/components/modal/auth/InputField.tsx
index e4e5fbd..2d5c43b 100644
--- a/components/modal/auth/InputField.tsx
+++ b/components/modal/auth/InputField.tsx
@@ -1,41 +1,15 @@
-import { Input } from "@chakra-ui/react";
-
-/**
- * @param {string} name - Name of the input field
- * @param {string} placeholder - Placeholder text
- * @param {string} type - Type of the input field
- * @param {React.ChangeEventHandler<HTMLInputElement>} onChange - On change event handler
- */
-interface InputFieldProps {
-  name: string;
-  placeholder: string;
-  type: string;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-}
+import { Input, InputProps } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
 
 /**
  * Input field for various forms used in the Auth modal component.
- * @param {string} name - Name of the input field
- * @param {string} placeholder - Placeholder text
- * @param {string} type - Type of the input field
- * @param {React.ChangeEventHandler<HTMLInputElement>} onChange - On change event handler
- *
- * @returns {React.FC} - Input field component
  */
-const InputField: React.FC<InputFieldProps> = ({
-  name,
-  placeholder,
-  type,
-  onChange,
-}) => {
+const InputField = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   return (
     <Input
-      required
-      name={name}
-      placeholder={placeholder}
-      type={type}
+      {...props}
+      ref={ref}
       mb={2}
-      onChange={onChange}
       fontSize="10pt"
       bg={{ base: "gray.50", _dark: "gray.800" }}
       borderColor={{ base: "gray.200", _dark: "gray.600" }}
@@ -53,6 +27,8 @@ const InputField: React.FC<InputFieldProps> = ({
       }}
     />
   );
-};
+});
+
+InputField.displayName = "InputField";
 
 export default InputField;
diff --git a/components/modal/auth/Login.tsx b/components/modal/auth/Login.tsx
index 0c93424..c60fa5a 100644
--- a/components/modal/auth/Login.tsx
+++ b/components/modal/auth/Login.tsx
@@ -1,12 +1,15 @@
-import { Button, Flex, Input, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
-import React, { useState } from "react";
+import React from "react";
 import { useSignInWithEmailAndPassword } from "react-firebase-hooks/auth";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { authModalStateAtom } from "../../../atoms/authModalAtom";
 import { auth } from "../../../firebase/clientApp";
 import { FIREBASE_ERRORS } from "../../../firebase/errors";
 import InputField from "./InputField";
 import { PasswordInput } from "@/components/ui/password-input";
+import { loginSchema, LoginInput } from "@/schema/auth";
 
 type LoginProps = {};
 
@@ -25,66 +28,34 @@ type LoginProps = {};
  */
 const Login: React.FC<LoginProps> = () => {
   const setAuthModalState = useSetAtom(authModalStateAtom); // Set global state
-  const [loginForm, setLoginForm] = useState({
-    email: "", // Initially empty email
-    password: "", // Initially empty password
-  });
-
   const [signInWithEmailAndPassword, user, loading, error] =
     useSignInWithEmailAndPassword(auth);
 
-  /**
-   * This function is used as the event handler for a form submission.
-   * It will prevent the page from refreshing.
-   * Automatically checks if the user with the email exists and if the password is correct.
-   * @param {React.FormEvent<HTMLFormElement>} event - the submit event triggered by the form
-   */
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault(); // Prevent page from reloading
-
-    signInWithEmailAndPassword(loginForm.email, loginForm.password); // Sign in with email and password
-  }; // Function to execute when the form is submitted
-
-  /**
-   * Function to execute when the form is changed (when email and password are typed).
-   * Multiple inputs use the same `onChange` function.
-   * @param event (React.ChangeEvent<HTMLInputElement>) - the event that is triggered when the form is changed
-   */
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // Update form state
-    setLoginForm((prev) => ({
-      ...prev, // Spread previous state because we don't want to lose the other input's value
-      [event.target.name]: event.target.value, // Catch the name of the input that was changed and update the corresponding state
-    }));
-  };
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+    mode: "onChange",
+  });
 
-  /**
-   * Determines whether the button is disabled or not.
-   * The button is disabled if the email or password is empty.
-   * @returns {boolean} - Whether the button is disabled or not
-   */
-  const isButtonDisabled = () => {
-    return (
-      !loginForm.email || !loginForm.password
-      // signUpForm.confirmPassword !== signUpForm.password
-    );
+  const onSubmit = (data: LoginInput) => {
+    signInWithEmailAndPassword(data.email, data.password);
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      <InputField
-        name="email"
-        placeholder="Email"
-        type="email"
-        onChange={onChange}
-      />
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <InputField placeholder="Email" type="email" {...register("email")} />
+      {errors.email && (
+        <Text color="red.500" fontSize="10pt" mt={1}>
+          {errors.email.message}
+        </Text>
+      )}
 
       <PasswordInput
-        name="password"
         placeholder="Password"
-        onChange={onChange}
-        required
-        rootProps={{ mb: 2 }}
+        rootProps={{ mb: 2, mt: 2 }}
         fontSize="10pt"
         bg={{ base: "gray.50", _dark: "gray.800" }}
         borderColor={{ base: "gray.200", _dark: "gray.600" }}
@@ -100,13 +71,20 @@ const Login: React.FC<LoginProps> = () => {
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register("password")}
       />
+      {errors.password && (
+        <Text color="red.500" fontSize="10pt" mt={1}>
+          {errors.password.message}
+        </Text>
+      )}
 
       <Text
         textAlign="center"
         color={{ base: "red.500", _dark: "red.400" }}
         fontSize="10pt"
         fontWeight="800"
+        mt={2}
       >
         {FIREBASE_ERRORS[error?.code as keyof typeof FIREBASE_ERRORS]}
       </Text>
@@ -118,7 +96,7 @@ const Login: React.FC<LoginProps> = () => {
         mb={2}
         type="submit"
         loading={loading}
-        disabled={isButtonDisabled()}
+        disabled={!isValid}
       >
         {" "}
         {/* When the form is submitted, execute onSubmit function */}
diff --git a/components/modal/auth/ResetPassword.tsx b/components/modal/auth/ResetPassword.tsx
index d786148..e68e7e5 100644
--- a/components/modal/auth/ResetPassword.tsx
+++ b/components/modal/auth/ResetPassword.tsx
@@ -2,61 +2,52 @@ import { Button, Flex, Icon, Image, Input, Text } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
 import React, { useState } from "react";
 import { useSendPasswordResetEmail } from "react-firebase-hooks/auth";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { BsDot } from "react-icons/bs";
 import { authModalStateAtom } from "../../../atoms/authModalAtom";
 import { auth } from "../../../firebase/clientApp";
+import { resetPasswordSchema, ResetPasswordInput } from "@/schema/auth";
 
-/**
- * Allows the user to reset their password.
- * Takes the email as the input and sends the user an email from Firebase to reset the password.
- * Once the email is submitted, a new view is shown telling the user to check their email.
- * @returns {React.FC} - Reset Password view in the authentication modal
- *
- * @see https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth
- */
 const ResetPassword: React.FC = () => {
   const setAuthModalState = useSetAtom(authModalStateAtom);
-  const [email, setEmail] = useState("");
   const [success, setSuccess] = useState(false);
   const [sendPasswordResetEmail, sending, error] =
     useSendPasswordResetEmail(auth);
 
-  /**
-   * This function is used as the event handler for a form submission.
-   * It will prevent the page from refreshing.
-   * Sends the email from Firebase to the email that was inputted in the form.
-   * @param {React.FormEvent<HTMLFormElement>} event - the submit event triggered by the form
-   */
-  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault(); // Prevent page from reloading
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<ResetPasswordInput>({
+    resolver: zodResolver(resetPasswordSchema),
+    mode: "onChange",
+  });
 
-    await sendPasswordResetEmail(email); // try to send email
-    setSuccess(true); // once the email is successfully send
+  const onSubmit = async (data: ResetPasswordInput) => {
+    await sendPasswordResetEmail(data.email);
+    setSuccess(true);
   };
+
   return (
     <Flex direction="column" alignItems="center" width="100%">
       <Image src="/images/logo.svg" height="40px" mb={2} alt="Website logo" />
       <Text fontWeight={700} mb={2}>
         Reset your password
       </Text>
-      {/* Go to next page once the email is successfully sent */}
       {success ? (
         <Text mb={4}>Check your email</Text>
       ) : (
-        // While the email has not been sent, show the form
         <>
           <Text fontSize="sm" textAlign="center" mb={2}>
             Enter the email associated with your account and we will send you a
             reset link
           </Text>
-          <form onSubmit={onSubmit} style={{ width: "100%" }}>
+          <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
             <Input
-              required
-              name="email"
               placeholder="Email"
               type="email"
               mb={2}
-              onChange={(event) => setEmail(event.target.value)}
               fontSize="10pt"
               _placeholder={{ color: "gray.500" }}
               _hover={{
@@ -71,7 +62,13 @@ const ResetPassword: React.FC = () => {
                 borderColor: "blue.500",
               }}
               bg={{ base: "gray.50", _dark: "gray.800" }}
+              {...register("email")}
             />
+            {errors.email && (
+              <Text color="red.500" fontSize="10pt" mt={1}>
+                {errors.email.message}
+              </Text>
+            )}
             <Text
               textAlign="center"
               fontSize="10pt"
@@ -86,6 +83,7 @@ const ResetPassword: React.FC = () => {
               mt={2}
               type="submit"
               loading={sending}
+              disabled={!isValid}
             >
               Reset Password
             </Button>
diff --git a/components/modal/auth/Signup.tsx b/components/modal/auth/Signup.tsx
index 28c0cba..9b4b530 100644
--- a/components/modal/auth/Signup.tsx
+++ b/components/modal/auth/Signup.tsx
@@ -1,98 +1,46 @@
-import { validateSignupForm } from "@/lib/validation";
 import { Button, Flex, Text } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
-import React, { useState } from "react";
+import React from "react";
 import { useCreateUserWithEmailAndPassword } from "react-firebase-hooks/auth";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { authModalStateAtom } from "../../../atoms/authModalAtom";
 import { auth } from "../../../firebase/clientApp";
 import { FIREBASE_ERRORS } from "../../../firebase/errors";
 import InputField from "./InputField";
 import { PasswordInput } from "@/components/ui/password-input";
+import { signUpSchema, SignUpInput } from "@/schema/auth";
 
-/**
- * Allows the user to create an account by inputting the required credentials (email and password).
- * There are 2 password fields to ensure that the user inputs the correct password.
- * If the 2 passwords do not match, the account is not created and an error is displayed.
- * If the email already exists, the account is not created and an error is displayed.
- *
- * A button to log in instead is available which would switch the modal to the log in view when clicked.
- * @returns {React.FC} - Sign up components view for modal.
- *
- * @see https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth
- */
 const SignUp = () => {
-  const setAuthModalState = useSetAtom(authModalStateAtom); // Set global state
-  const [signUpForm, setSignUpForm] = useState({
-    email: "", // Initially empty email
-    password: "", // Initially empty password
-    confirmPassword: "", // Initially empty confirm password
-  });
-  const [error, setError] = useState(""); // Initially empty error
-  const [
-    createUserWithEmailAndPassword, // returns a function that returns the user, loading or error
-    user,
-    loading,
-    userError,
-  ] = useCreateUserWithEmailAndPassword(auth);
-
-  /**
-   * This function is used as the event handler for a form submission.
-   * It will prevent the page from refreshing.
-   * Checks if the password and confirm password fields match and the password requirements are met:
-   *  - If they do not match, an error message is set and the function returns without creating a new user.
-   *  - If the password does not meet the requirements, an error message is set and the function returns without creating a new user.
-   *  - If the passwords match and the password meets the requirements, a new user is created using the email and password provided in the form.
-   * @param {React.FormEvent<HTMLFormElement>} event - the submit event triggered by the form
-   *
-   * @returns exit if there is an error or the passwords do not match
-   */
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault(); // Prevent the page from refreshing
-    if (error) setError(""); // If there is an error, clear it
-
-    const validationError = validateSignupForm(signUpForm);
-    if (validationError) {
-      setError(validationError);
-      return;
-    }
+  const setAuthModalState = useSetAtom(authModalStateAtom);
+  const [createUserWithEmailAndPassword, user, loading, userError] =
+    useCreateUserWithEmailAndPassword(auth);
 
-    createUserWithEmailAndPassword(signUpForm.email, signUpForm.password); // Create user with email and password
-  }; // Function to execute when the form is submitted
-
-  /**
-   * Function to execute when the form is changed (when email and password are typed).
-   * Multiple inputs use the same onChange function.
-   * @param {React.ChangeEvent<HTMLInputElement>} event - the change event triggered by the input
-   */
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // Update form state
-    setSignUpForm((prev) => ({
-      ...prev, // Spread previous state because we don't want to lose the other input's value
-      [event.target.name]: event.target.value, // Catch the name of the input that was changed and update the corresponding state
-    }));
-  };
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SignUpInput>({
+    resolver: zodResolver(signUpSchema),
+    mode: "onChange",
+  });
 
-  const isButtonDisabled = () => {
-    return (
-      !signUpForm.email || !signUpForm.password || !signUpForm.confirmPassword
-    );
+  const onSubmit = (data: SignUpInput) => {
+    createUserWithEmailAndPassword(data.email, data.password);
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      <InputField
-        name="email"
-        placeholder="Email"
-        type="email"
-        onChange={onChange}
-      />
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <InputField placeholder="Email" type="email" {...register("email")} />
+      {errors.email && (
+        <Text color="red.500" fontSize="10pt" mt={1}>
+          {errors.email.message}
+        </Text>
+      )}
 
       <PasswordInput
-        name="password"
         placeholder="Password"
-        onChange={onChange}
-        required
-        rootProps={{ mb: 2 }}
+        rootProps={{ mb: 2, mt: 2 }}
         fontSize="10pt"
         bg={{ base: "gray.50", _dark: "gray.800" }}
         borderColor={{ base: "gray.200", _dark: "gray.600" }}
@@ -108,14 +56,17 @@ const SignUp = () => {
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register("password")}
       />
+      {errors.password && (
+        <Text color="red.500" fontSize="10pt" mt={1}>
+          {errors.password.message}
+        </Text>
+      )}
 
       <PasswordInput
-        name="confirmPassword"
         placeholder="Confirm Password"
-        onChange={onChange}
-        required
-        rootProps={{ mb: 2 }}
+        rootProps={{ mb: 2, mt: 2 }}
         fontSize="10pt"
         bg={{ base: "gray.50", _dark: "gray.800" }}
         borderColor={{ base: "gray.200", _dark: "gray.600" }}
@@ -131,17 +82,22 @@ const SignUp = () => {
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register("confirmPassword")}
       />
-
-      {/* If there is error than the error is shown */}
+      {errors.confirmPassword && (
+        <Text color="red.500" fontSize="10pt" mt={1}>
+          {errors.confirmPassword.message}
+        </Text>
+      )}
 
       <Text
         textAlign="center"
         color={{ base: "red.500", _dark: "red.400" }}
         fontSize="10pt"
         fontWeight="800"
+        mt={2}
       >
-        {error ||
+        {userError &&
           FIREBASE_ERRORS[userError?.code as keyof typeof FIREBASE_ERRORS]}
       </Text>
 
@@ -151,11 +107,9 @@ const SignUp = () => {
         mt={2}
         mb={2}
         type="submit"
-        loading={loading} // If loading (from Firebase) is true, show loading spinner
-        disabled={isButtonDisabled()}
+        loading={loading}
+        disabled={!isValid}
       >
-        {" "}
-        {/* When the form is submitted, execute onSubmit function */}
         Sign Up
       </Button>
 
diff --git a/components/modal/community-settings/AdminManager.tsx b/components/modal/community-settings/AdminManager.tsx
index d222c73..1eb19ed 100644
--- a/components/modal/community-settings/AdminManager.tsx
+++ b/components/modal/community-settings/AdminManager.tsx
@@ -18,6 +18,9 @@ import React, { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { AdminUser } from "@/types/adminUser";
 import ConfirmationDialog from "@/components/modal/ConfirmationDialog";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { addAdminSchema, AddAdminInput } from "@/schema/admin";
 
 type AdminManagerProps = {
   communityData: Community;
@@ -34,7 +37,21 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
   const { searchUsers, findUser } = useAdminSearch();
   const { handleAddAdmin } = useAddAdmin();
   const { handleRemoveAdmin } = useRemoveAdmin();
-  const [newAdminEmail, setNewAdminEmail] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+    reset,
+  } = useForm<AddAdminInput>({
+    resolver: zodResolver(addAdminSchema),
+    defaultValues: { email: "" },
+  });
+
+  const emailValue = watch("email");
+
   const [addingAdmin, setAddingAdmin] = useState(false);
   const [searchResults, setSearchResults] = useState<AdminUser[]>([]);
   const [showResults, setShowResults] = useState(false);
@@ -55,12 +72,11 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
     );
   }, [communityData, loadAdmins, showToast]);
 
-  const onAddAdmin = async () => {
-    if (!newAdminEmail) return;
+  const onAddAdmin = async (data: AddAdminInput) => {
     setAddingAdmin(true);
     try {
       // 1. Find user by email
-      const newUser = await findUser(newAdminEmail);
+      const newUser = await findUser(data.email);
 
       if (!newUser) {
         showToast({
@@ -91,7 +107,7 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
         setAdmins
       );
 
-      setNewAdminEmail("");
+      reset();
 
       showToast({
         title: "Admin added",
@@ -137,13 +153,13 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
 
   useEffect(() => {
     const searchUsersAsync = async () => {
-      if (newAdminEmail.length < 3) {
+      if (!emailValue || emailValue.length < 3) {
         setSearchResults([]);
         setShowResults(false);
         return;
       }
       try {
-        const results = await searchUsers(newAdminEmail);
+        const results = await searchUsers(emailValue);
         // Filter out existing admins
         const filtered = results.filter(
           (u) => !admins.some((a) => a.uid === u.uid)
@@ -157,7 +173,7 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
 
     const timer = setTimeout(searchUsersAsync, 300);
     return () => clearTimeout(timer);
-  }, [newAdminEmail, admins, searchUsers]);
+  }, [emailValue, admins, searchUsers]);
 
   return (
     <Stack gap={4}>
@@ -166,22 +182,30 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
       </Text>
 
       <Box position="relative">
-        <Flex gap={2}>
-          <Input
-            placeholder="Enter email to add admin"
-            value={newAdminEmail}
-            onChange={(e) => setNewAdminEmail(e.target.value)}
-            onFocus={() => newAdminEmail.length >= 3 && setShowResults(true)}
-            onBlur={() => setTimeout(() => setShowResults(false), 200)}
-            borderRadius={"xl"}
-          />
-          <Button
-            onClick={onAddAdmin}
-            loading={addingAdmin}
-            disabled={!newAdminEmail}
-          >
-            Add
-          </Button>
+        <Flex gap={2} direction="column">
+          <Flex gap={2}>
+            <Input
+              placeholder="Enter email to add admin"
+              {...register("email")}
+              onFocus={() =>
+                emailValue && emailValue.length >= 3 && setShowResults(true)
+              }
+              onBlur={() => setTimeout(() => setShowResults(false), 200)}
+              borderRadius={"xl"}
+            />
+            <Button
+              onClick={handleSubmit(onAddAdmin)}
+              loading={addingAdmin}
+              disabled={!emailValue}
+            >
+              Add
+            </Button>
+          </Flex>
+          {errors.email && (
+            <Text color="red.500" fontSize="xs">
+              {errors.email.message}
+            </Text>
+          )}
         </Flex>
         {showResults && searchResults.length > 0 && (
           <Box
@@ -208,7 +232,7 @@ const AdminManager: React.FC<AdminManagerProps> = ({ communityData }) => {
                 cursor="pointer"
                 _hover={{ bg: "gray.100", _dark: { bg: "gray.600" } }}
                 onClick={() => {
-                  setNewAdminEmail(user.email);
+                  setValue("email", user.email);
                   setShowResults(false);
                 }}
               >
diff --git a/components/modal/create-community/CommunityNameSection.tsx b/components/modal/create-community/CommunityNameSection.tsx
index d48ac97..48659bf 100644
--- a/components/modal/create-community/CommunityNameSection.tsx
+++ b/components/modal/create-community/CommunityNameSection.tsx
@@ -1,26 +1,25 @@
 import React from "react";
-import { Box, Text, Input } from "@chakra-ui/react";
+import { Box, Text, Input, InputProps } from "@chakra-ui/react";
+import { UseFormRegisterReturn } from "react-hook-form";
 
-interface CommunityNameSectionProps {
-  communityName: string;
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  charRemaining: number;
-  error: string;
+interface CommunityNameSectionProps extends InputProps {
+  charRemaining?: number;
+  error?: string;
+  register?: UseFormRegisterReturn;
 }
 
 /**
  * Input block for community name entry with character counter and errors.
- * @param communityName - Current name value.
- * @param handleChange - Change handler enforced by the modal.
  * @param charRemaining - Remaining characters allowed.
  * @param error - Validation error message to display.
+ * @param register - React Hook Form register object.
  * @returns Form section for naming a community.
  */
 const CommunityNameSection: React.FC<CommunityNameSectionProps> = ({
-  communityName,
-  handleChange,
   charRemaining,
   error,
+  register,
+  ...rest
 }) => {
   return (
     <Box>
@@ -32,9 +31,7 @@ const CommunityNameSection: React.FC<CommunityNameSectionProps> = ({
       </Text>
       <Input
         mt={2}
-        value={communityName}
         placeholder="Community Name"
-        onChange={handleChange}
         fontSize="10pt"
         borderRadius={"xl"}
         bg={{ base: "gray.50", _dark: "gray.800" }}
@@ -51,11 +48,13 @@ const CommunityNameSection: React.FC<CommunityNameSectionProps> = ({
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register}
+        {...rest}
       />
       <Text
         fontSize="9pt"
-        mt={1}
         color={charRemaining === 0 ? "red" : "gray.500"}
+        pt={2}
       >
         {charRemaining} Characters remaining
       </Text>
diff --git a/components/modal/create-community/CreateCommunityModal.tsx b/components/modal/create-community/CreateCommunityModal.tsx
index 2caebd3..7909367 100644
--- a/components/modal/create-community/CreateCommunityModal.tsx
+++ b/components/modal/create-community/CreateCommunityModal.tsx
@@ -2,10 +2,6 @@ import { useCreateCommunity } from "@/hooks/community/useCreateCommunity";
 import {
   Box,
   Button,
-  CheckboxControl,
-  CheckboxIndicator,
-  CheckboxLabel,
-  CheckboxRoot,
   DialogBackdrop,
   DialogBody,
   DialogCloseTrigger,
@@ -15,19 +11,21 @@ import {
   DialogPositioner,
   DialogRoot,
   DialogTitle,
-  Flex,
-  Icon,
-  Input,
   Separator,
   Stack,
   Text,
 } from "@chakra-ui/react";
-import React, { FC, useState } from "react";
-import { IconType } from "react-icons";
+import React, { FC } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { BsFillEyeFill, BsFillPersonFill } from "react-icons/bs";
 import { HiLockClosed } from "react-icons/hi";
 import CommunityTypeOptions from "./CommunityTypeOptions";
 import CommunityNameSection from "./CommunityNameSection";
+import {
+  createCommunitySchema,
+  CreateCommunityInput,
+} from "@/schema/community";
 
 const COMMUNITY_TYPE_OPTIONS = [
   {
@@ -55,33 +53,32 @@ type CreateCommunityModalProps = {
   handleClose: () => void;
 };
 
-/**
- * Modal for creating communities with name validation and privacy selection.
- * @param props - Open state and close handler provided by the parent.
- * @returns Dialog that submits creation through `useCreateCommunity`.
- */
 const CreateCommunityModal: React.FC<CreateCommunityModalProps> = ({
   open,
   handleClose,
 }) => {
-  const communityNameLengthLimit = 25; // community names are 25 characters long
-  const [communityName, setCommunityName] = useState("");
-  const [charRemaining, setCharRemaining] = useState(communityNameLengthLimit);
-  const [communityType, setCommunityType] = useState("public");
-  const { createCommunity, loading, error, setError } = useCreateCommunity();
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.value.length > communityNameLengthLimit) return; // community is not created if the name is above the limit
-    setCommunityName(event.target.value); // updates the state of `communityName`
-    setCharRemaining(communityNameLengthLimit - event.target.value.length); // computing remaining characters for community names
-  };
+  const { createCommunity, loading } = useCreateCommunity();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<CreateCommunityInput>({
+    resolver: zodResolver(createCommunitySchema),
+    defaultValues: {
+      type: "public",
+      name: "",
+    },
+    mode: "onChange",
+  });
 
-  const onCommunityTypeChange = (value: string) => {
-    setCommunityType(value);
-  };
+  const communityName = watch("name");
+  const communityType = watch("type");
+  const charRemaining = 21 - (communityName?.length || 0);
 
-  const handleCreateCommunity = async () => {
-    const success = await createCommunity(communityName, communityType);
+  const onSubmit = async (data: CreateCommunityInput) => {
+    const success = await createCommunity(data.name, data.type);
     if (success) {
       handleClose();
     }
@@ -112,24 +109,27 @@ const CreateCommunityModal: React.FC<CreateCommunityModalProps> = ({
               flexDirection="column"
               padding="10px 0px"
             >
-              <CommunityNameSection
-                communityName={communityName}
-                handleChange={handleChange}
-                charRemaining={charRemaining}
-                error={error}
-              />
-              <Separator mt={3} />
-              <Box mt={4} mb={4}>
-                <Text fontWeight={600} fontSize={15}>
-                  Community Type
-                </Text>
-
-                <CommunityTypeOptions
-                  options={COMMUNITY_TYPE_OPTIONS}
-                  communityType={communityType}
-                  onCommunityTypeChange={onCommunityTypeChange}
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <CommunityNameSection
+                  charRemaining={charRemaining}
+                  error={errors.name?.message}
+                  register={register("name")}
                 />
-              </Box>
+                <Separator mt={3} />
+                <Box mt={4} mb={4}>
+                  <Text fontWeight={600} fontSize={15}>
+                    Community Type
+                  </Text>
+
+                  <CommunityTypeOptions
+                    options={COMMUNITY_TYPE_OPTIONS}
+                    communityType={communityType}
+                    onCommunityTypeChange={(value) =>
+                      setValue("type", value as any)
+                    }
+                  />
+                </Box>
+              </form>
             </DialogBody>
           </Box>
 
@@ -149,7 +149,7 @@ const CreateCommunityModal: React.FC<CreateCommunityModalProps> = ({
               <Button
                 height="30px"
                 flex={1}
-                onClick={handleCreateCommunity}
+                onClick={handleSubmit(onSubmit)}
                 loading={loading}
               >
                 Create Community
diff --git a/components/modal/profile/ProfileModal.tsx b/components/modal/profile/ProfileModal.tsx
index b75e7af..e0535d4 100644
--- a/components/modal/profile/ProfileModal.tsx
+++ b/components/modal/profile/ProfileModal.tsx
@@ -14,10 +14,13 @@ import {
   DialogTitle,
   Stack,
 } from "@chakra-ui/react";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import UserImageSection from "./UserImageSection";
 import UserInfoSection from "./UserInfoSection";
+import { editProfileSchema, EditProfileInput } from "@/schema/profile";
 
 type ProfileModalProps = {
   open: boolean;
@@ -33,12 +36,27 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ open, handleClose }) => {
   );
   const selectFileRef = useRef<HTMLInputElement>(null);
   const [deleteImage, setDeleteImage] = useState(false);
-  const [userName, setUserName] = useState(user?.displayName || "");
   const [isEditing, setIsEditing] = useState(false);
 
-  /**
-   * Closes the modal and resets the states.
-   */
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<EditProfileInput>({
+    resolver: zodResolver(editProfileSchema),
+    defaultValues: {
+      displayName: user?.displayName || "",
+    },
+    mode: "onChange",
+  });
+
+  useEffect(() => {
+    if (user?.displayName) {
+      setValue("displayName", user.displayName);
+    }
+  }, [user, setValue]);
+
   const closeModal = () => {
     setSelectedFile("");
     setDeleteImage(false);
@@ -46,62 +64,15 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ open, handleClose }) => {
     handleClose();
   };
 
-  /**
-   * Update profile image of the currently logged in user.
-   * Exists if the user is not logged in or no image is selected.
-   */
-  const onUpdateImage = async () => {
+  const onUpdateProfile = async (data: EditProfileInput) => {
     if (selectedFile) {
       await updateImage(selectedFile);
     }
-  };
-
-  /**
-   * Deletes the profile image of the currently logged in user.
-   * Exists if the user is not logged in.
-   */
-  const onDeleteImage = async () => {
-    await removeImage();
-  };
-
-  /**
-   * Update profile name of the currently logged in user.
-   * Updates:
-   *  - `displayName` in `users` collection
-   *  - `creatorDisplayText` in `comments` collection
-   *  - `creatorUsername` in `posts` collection
-   * Updates values in multiple places as they are repeated in different collections.
-   */
-  const onUpdateUserName = async () => {
-    if (userName) {
-      await updateName(userName);
-    }
-  };
-
-  /**
-   * Updates the state which tracks the name of the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event - event of the input field
-   */
-  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setUserName(event.target.value);
-  };
-
-  /**
-   * Saves the changes made to the profile.
-   * If the profile image is changed, it is updated.
-   * If the profile image is deleted, it is deleted.
-   * If the profile name is changed, it is updated.
-   * Closes the modal after saving.
-   */
-  const handleSaveButtonClick = () => {
-    if (selectedFile) {
-      onUpdateImage();
-    }
     if (deleteImage) {
-      onDeleteImage();
+      await removeImage();
     }
-    if (userName && userName !== user?.displayName) {
-      onUpdateUserName();
+    if (data.displayName !== user?.displayName) {
+      await updateName(data.displayName);
     }
     closeModal();
   };
@@ -139,8 +110,8 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ open, handleClose }) => {
               <UserInfoSection
                 user={user}
                 isEditing={isEditing}
-                userName={userName}
-                handleNameChange={handleNameChange}
+                register={register}
+                errors={errors}
               />
             </Stack>
           </DialogBody>
@@ -158,7 +129,12 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ open, handleClose }) => {
                 Cancel
               </Button>
               {isEditing ? (
-                <Button height="30px" flex={1} onClick={handleSaveButtonClick}>
+                <Button
+                  height="30px"
+                  flex={1}
+                  onClick={handleSubmit(onUpdateProfile)}
+                  loading={loading}
+                >
                   Save
                 </Button>
               ) : (
diff --git a/components/modal/profile/UserInfoSection.tsx b/components/modal/profile/UserInfoSection.tsx
index a2d3b01..1bdb8c7 100644
--- a/components/modal/profile/UserInfoSection.tsx
+++ b/components/modal/profile/UserInfoSection.tsx
@@ -1,27 +1,29 @@
 import { Flex, Input, Text } from "@chakra-ui/react";
 import { User } from "firebase/auth";
 import React from "react";
+import { UseFormRegister, FieldErrors } from "react-hook-form";
+import { EditProfileInput } from "@/schema/profile";
 
 type UserInfoSectionProps = {
   user: User | null | undefined;
   isEditing: boolean;
-  userName: string;
-  handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  register: UseFormRegister<EditProfileInput>;
+  errors: FieldErrors<EditProfileInput>;
 };
 
 /**
  * Profile info block that toggles between read-only and editable username.
  * @param user - Firebase user for email and current display name.
  * @param isEditing - Whether to show the input.
- * @param userName - Controlled input value for the name.
- * @param handleNameChange - Change handler for the name field.
+ * @param register - React Hook Form register function.
+ * @param errors - React Hook Form errors object.
  * @returns Email and name display with optional edit input.
  */
 const UserInfoSection: React.FC<UserInfoSectionProps> = ({
   user,
   isEditing,
-  userName,
-  handleNameChange,
+  register,
+  errors,
 }) => {
   return (
     <>
@@ -52,7 +54,7 @@ const UserInfoSection: React.FC<UserInfoSectionProps> = ({
         </Flex>
       )}
       {isEditing && (
-        <Flex direction="column">
+        <Flex direction="column" width="100%">
           <Text
             fontSize="sm"
             color={{ base: "gray.500", _dark: "gray.400" }}
@@ -61,23 +63,31 @@ const UserInfoSection: React.FC<UserInfoSectionProps> = ({
             User Name
           </Text>
           <Input
-            name="displayName"
             placeholder="User Name"
-            value={userName}
             type="text"
-            onChange={handleNameChange}
+            mb={2}
+            fontSize="10pt"
+            _placeholder={{ color: "gray.500" }}
             _hover={{
               bg: { base: "white", _dark: "gray.700" },
               border: "1px solid",
-              borderColor: { base: "red.500", _dark: "red.400" },
+              borderColor: "blue.500",
             }}
             _focus={{
+              outline: "none",
               bg: { base: "white", _dark: "gray.700" },
               border: "1px solid",
-              borderColor: { base: "red.500", _dark: "red.400" },
+              borderColor: "blue.500",
             }}
+            bg={{ base: "gray.50", _dark: "gray.800" }}
             borderRadius={10}
+            {...register("displayName")}
           />
+          {errors.displayName && (
+            <Text color="red.500" fontSize="10pt">
+              {errors.displayName.message}
+            </Text>
+          )}
         </Flex>
       )}
     </>
diff --git a/components/posts/comments/CommentInput.tsx b/components/posts/comments/CommentInput.tsx
index 45d99f3..f26b88a 100644
--- a/components/posts/comments/CommentInput.tsx
+++ b/components/posts/comments/CommentInput.tsx
@@ -4,53 +4,46 @@ import { Flex, Textarea, Button, Text, Stack, Icon } from "@chakra-ui/react";
 import { LuSend, LuTrash } from "react-icons/lu";
 import { User } from "firebase/auth";
 import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  commentSchema,
+  CommentInput as CommentInputType,
+} from "@/schema/comment";
 
-/**
- * Required props for CommentInput component
- * @param {string} commentText - text of the comment
- * @param {setCommentText} setCommentText - function to set the comment text
- * @param {User} user - User object from firebase
- * @param {boolean} createLoading - is the comment being created
- * @param {onCreateComment} onCreateComment - function to handle creating comment
- */
 type CommentInputProps = {
-  commentText: string;
-  setCommentText: (value: string) => void;
   user?: User | null;
   createLoading: boolean;
   onCreateComment: (commentText: string) => void;
 };
 
-/**
- * Input box for creating a comment by inputting text.
- * The component displays:
- *  - Textarea for inputting comment text
- *  - Button for creating the comment
- *
- * If the user is not logged in, the component displays:
- *  - Text prompting the user to log in or sign up
- *  - AuthButtons component
- *
- * @param {string} commentText - text of the comment
- * @param {setCommentText} setCommentText - function to set the comment text
- * @param {User} user - User object from firebase
- * @param {boolean} createLoading - is the comment being created
- * @param {onCreateComment} onCreateComment - function to handle creating comment
- *
- * @returns {React.FC<CommentInputProps>} - input box for creating a comment
- */
 const CommentInput: React.FC<CommentInputProps> = ({
-  commentText,
-  setCommentText,
   user,
   createLoading,
   onCreateComment,
 }) => {
   const [isProfileModalOpen, setProfileModalOpen] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors, isValid },
+  } = useForm<CommentInputType>({
+    resolver: zodResolver(commentSchema),
+    mode: "onChange",
+  });
+
+  const commentText = watch("text");
+
+  const onSubmit = (data: CommentInputType) => {
+    onCreateComment(data.text);
+    reset();
+  };
+
   return (
     <Flex direction="column" position="relative">
       {user ? (
-        // If the user is logged in, display the comment input box
         <>
           <ProfileModal
             handleClose={() => setProfileModalOpen(false)}
@@ -74,70 +67,75 @@ const CommentInput: React.FC<CommentInputProps> = ({
             </Text>
           </Stack>
 
-          <Flex
-            direction="column"
-            bg={{ base: "white", _dark: "gray.800" }}
-            borderRadius="xl"
-            border="1px solid"
-            borderColor={{ base: "gray.200", _dark: "gray.600" }}
-            overflow="hidden"
-            _focusWithin={{
-              borderColor: { base: "black", _dark: "gray.200" },
-              boxShadow: {
-                base: "0 0 0 1px black",
-                _dark: "0 0 0 1px gray.200",
-              },
-            }}
-          >
-            <Textarea
-              value={commentText}
-              onChange={(event) => setCommentText(event.target.value)}
-              placeholder="What are your thoughts?"
-              fontSize="11pt"
-              minHeight="100px"
-              border="none"
-              _focus={{ outline: "none", border: "none", boxShadow: "none" }}
-              p={4}
-              bg="transparent"
-              _placeholder={{ color: "gray.500" }}
-            />
-
+          <form onSubmit={handleSubmit(onSubmit)}>
             <Flex
-              bg={{ base: "gray.50", _dark: "gray.700" }}
-              p={2}
-              justify="flex-end"
-              align="center"
-              borderTop="1px solid"
-              borderColor={{ base: "gray.100", _dark: "gray.600" }}
+              direction="column"
+              bg={{ base: "white", _dark: "gray.800" }}
+              borderRadius="xl"
+              border="1px solid"
+              borderColor={{ base: "gray.200", _dark: "gray.600" }}
+              overflow="hidden"
+              _focusWithin={{
+                borderColor: { base: "black", _dark: "gray.200" },
+                boxShadow: {
+                  base: "0 0 0 1px black",
+                  _dark: "0 0 0 1px gray.200",
+                },
+              }}
             >
-              <Stack direction="row" gap={2} align="center">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setCommentText("")}
-                  disabled={!commentText.length}
-                  height={"36px"}
-                >
-                  <Icon as={LuTrash} mr={2} />
-                  Clear
-                </Button>
+              <Textarea
+                placeholder="What are your thoughts?"
+                fontSize="11pt"
+                minHeight="100px"
+                border="none"
+                _focus={{ outline: "none", border: "none", boxShadow: "none" }}
+                p={4}
+                bg="transparent"
+                _placeholder={{ color: "gray.500" }}
+                {...register("text")}
+              />
+              {errors.text && (
+                <Text color="red.500" fontSize="10pt" p={2}>
+                  {errors.text.message}
+                </Text>
+              )}
+
+              <Flex
+                bg={{ base: "gray.50", _dark: "gray.700" }}
+                p={2}
+                justify="flex-end"
+                align="center"
+                borderTop="1px solid"
+                borderColor={{ base: "gray.100", _dark: "gray.600" }}
+              >
+                <Stack direction="row" gap={2} align="center">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => reset()}
+                    disabled={!commentText?.length}
+                    height={"36px"}
+                  >
+                    <Icon as={LuTrash} mr={2} />
+                    Clear
+                  </Button>
 
-                <Button
-                  disabled={!commentText.length}
-                  loading={createLoading}
-                  borderRadius={"xl"}
-                  onClick={() => onCreateComment(commentText)}
-                  height={"36px"}
-                >
-                  <Icon as={LuSend} mr={2} />
-                  Comment
-                </Button>
-              </Stack>
+                  <Button
+                    disabled={!isValid}
+                    loading={createLoading}
+                    borderRadius={"xl"}
+                    type="submit"
+                    height={"36px"}
+                  >
+                    <Icon as={LuSend} mr={2} />
+                    Comment
+                  </Button>
+                </Stack>
+              </Flex>
             </Flex>
-          </Flex>
+          </form>
         </>
       ) : (
-        // If the user is not logged in, display the login/signup prompt
         <Flex
           align="center"
           justify="space-between"
diff --git a/components/posts/comments/CommentItem.tsx b/components/posts/comments/CommentItem.tsx
index fef7d1e..2b0bc9b 100644
--- a/components/posts/comments/CommentItem.tsx
+++ b/components/posts/comments/CommentItem.tsx
@@ -64,21 +64,14 @@ const CommentItem: React.FC<CommentItemProps> = ({
   canComment = true,
 }) => {
   const [isReplying, setIsReplying] = useState(false);
-  const [replyText, setReplyText] = useState("");
   const [replyLoading, setReplyLoading] = useState(false);
   const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
 
-  const handleReply = async () => {
+  const handleReply = async (text: string) => {
     if (!user) return;
     setReplyLoading(true);
-    await onCreateComment(
-      user,
-      replyText,
-      comment.id,
-      (comment.depth || 0) + 1
-    );
+    await onCreateComment(user, text, comment.id, (comment.depth || 0) + 1);
     setReplyLoading(false);
-    setReplyText("");
     setIsReplying(false);
   };
 
@@ -175,8 +168,6 @@ const CommentItem: React.FC<CommentItemProps> = ({
           borderColor={{ base: "gray.100", _dark: "gray.600" }}
         >
           <CommentInput
-            commentText={replyText}
-            setCommentText={setReplyText}
             user={user}
             createLoading={replyLoading}
             onCreateComment={handleReply}
diff --git a/components/posts/comments/Comments.tsx b/components/posts/comments/Comments.tsx
index 9d198c3..da8eeb6 100644
--- a/components/posts/comments/Comments.tsx
+++ b/components/posts/comments/Comments.tsx
@@ -43,7 +43,6 @@ const Comments: React.FC<CommentsProps> = ({
   communityId,
   isCommunityAdmin,
 }) => {
-  const [commentText, setCommentText] = useState("");
   const { comments, setComments, commentFetchLoading } =
     useCommentList(selectedPost);
   const { createComment, createLoading } = useCreateComment(
@@ -61,7 +60,6 @@ const Comments: React.FC<CommentsProps> = ({
 
   const handleCreateComment = async (text: string) => {
     await createComment(user!, text);
-    setCommentText("");
   };
 
   const collection = useMemo(() => {
@@ -118,8 +116,6 @@ const Comments: React.FC<CommentsProps> = ({
       >
         {canComment && (
           <CommentInput
-            commentText={commentText}
-            setCommentText={setCommentText}
             user={user}
             createLoading={createLoading}
             onCreateComment={handleCreateComment}
diff --git a/components/posts/new-post-form/NewPostForm.tsx b/components/posts/new-post-form/NewPostForm.tsx
index 468cbd7..6cb86d2 100644
--- a/components/posts/new-post-form/NewPostForm.tsx
+++ b/components/posts/new-post-form/NewPostForm.tsx
@@ -5,16 +5,15 @@ import { Flex, Icon, Tabs, Text } from "@chakra-ui/react";
 import { User } from "firebase/auth";
 import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { IoDocumentText, IoImageOutline } from "react-icons/io5";
 import BackToCommunityButton from "./BackToCommunityButton";
 import PostCreateError from "./PostCreateError";
 import TextInputs from "../post-form/TextInputs";
 import ImageUpload from "../post-form/ImageUpload";
+import { createPostSchema, CreatePostInput } from "@/schema/post";
 
-/**
- * Props for NewPostForm component.
- * @param {user} - user object
- */
 type NewPostFormProps = {
   user: User; // parent component checks user so additional checks aer not needed ut
   communityImageURL?: string;
@@ -70,49 +69,42 @@ const NewPostForm: React.FC<NewPostFormProps> = ({
   const router = useRouter();
   const params = useParams();
   const [selectedTab, setSelectedTab] = useState(formTabs[0].title); // formTabs[0] = Post
-  const [textInputs, setTextInputs] = useState({
-    title: "",
-    body: "",
-  });
   const { selectedFile, setSelectedFile, onSelectFile } = useSelectFile(
     3000,
     3000
   );
   const { handleCreatePost, loading, error } = useCreatePost();
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CreatePostInput>({
+    resolver: zodResolver(createPostSchema),
+    defaultValues: {
+      title: "",
+      body: "",
+    },
+    mode: "onChange",
+  });
+
   /**
    * Handles the creation of a new post.
    * Uploads the posts contents to Firestore including any optional image.
    *
    * @async
    */
-  const onCreatePost = async () => {
+  const onCreatePost = async (data: CreatePostInput) => {
     const communityId = params?.communityId as string;
     await handleCreatePost(
       user,
       communityId,
       communityImageURL,
-      textInputs,
+      { title: data.title, body: data.body || "" },
       selectedFile
     );
   };
 
-  /**
-   * Keeps track of the text inputs in the form and updates the state.
-   * @param {React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>} event - event object from the input
-   */
-  const onTextChange = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const {
-      target: { name, value },
-    } = event;
-    setTextInputs((prev) => ({
-      ...prev,
-      [name]: value,
-    })); // update the state
-  };
-
   return (
     <Flex
       direction="column"
@@ -166,9 +158,9 @@ const NewPostForm: React.FC<NewPostFormProps> = ({
         <BackToCommunityButton communityId={currentCommunity?.id} />
         <Tabs.Content value="Post" p={4}>
           <TextInputs
-            textInputs={textInputs}
-            handleCreatePost={onCreatePost}
-            onChange={onTextChange}
+            register={register}
+            errors={errors}
+            handleCreatePost={handleSubmit(onCreatePost)}
             loading={loading}
           />
         </Tabs.Content>
diff --git a/components/posts/post-form/TextInputs.tsx b/components/posts/post-form/TextInputs.tsx
index 8d1f861..0a96f56 100644
--- a/components/posts/post-form/TextInputs.tsx
+++ b/components/posts/post-form/TextInputs.tsx
@@ -1,20 +1,11 @@
-import { Button, Flex, Input, Stack, Textarea } from "@chakra-ui/react";
+import { Button, Flex, Input, Stack, Text, Textarea } from "@chakra-ui/react";
 import React from "react";
+import { UseFormRegister, FieldErrors } from "react-hook-form";
+import { CreatePostInput } from "@/schema/post";
 
-/**
- * @param {object} textInputs - object containing title and body of the post
- * @param {event} onChange - function to handle change in the input fields
- * @param {handleCreatePost} handleCreatePost - function to handle creating post
- * @param {boolean} loading - is the post being created
- */
 type TextInputsProps = {
-  textInputs: {
-    title: string;
-    body: string;
-  };
-  onChange: (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => void;
+  register: UseFormRegister<CreatePostInput>;
+  errors: FieldErrors<CreatePostInput>;
   handleCreatePost: () => void;
   loading: boolean;
 };
@@ -22,16 +13,16 @@ type TextInputsProps = {
 /**
  * Sub-component of `NewPostForm` component.
  * Allows user to enter the title and body of the post.
- * @param {object} textInputs - object containing title and body of the post
- * @param {event} onChange - function to handle change in the input fields
- * @param {handleCreatePost} handleCreatePost - function to handle creating post
- * @param {boolean} loading - is the post being created
+ * @param register - React Hook Form register function
+ * @param errors - React Hook Form errors object
+ * @param handleCreatePost - function to handle creating post
+ * @param loading - is the post being created
  *
  * @returns {React.FC<TextInputsProps>} - input fields for title and body of the post
  */
 const TextInputs: React.FC<TextInputsProps> = ({
-  textInputs,
-  onChange,
+  register,
+  errors,
   handleCreatePost,
   loading,
 }) => {
@@ -39,10 +30,7 @@ const TextInputs: React.FC<TextInputsProps> = ({
     <Stack gap={3} width="100%">
       {/* Title  of the post*/}
       <Input
-        name="title"
         placeholder="Title"
-        value={textInputs.title}
-        onChange={onChange}
         fontSize="10pt"
         borderRadius={10}
         bg={{ base: "gray.50", _dark: "gray.800" }}
@@ -59,13 +47,16 @@ const TextInputs: React.FC<TextInputsProps> = ({
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register("title")}
       />
+      {errors.title && (
+        <Text color="red.500" fontSize="10pt">
+          {errors.title.message}
+        </Text>
+      )}
       {/* Body of the post */}
       <Textarea
-        name="body"
         placeholder="Text (Optional)"
-        value={textInputs.body}
-        onChange={onChange}
         fontSize="10pt"
         height="120px"
         borderRadius={10}
@@ -83,13 +74,13 @@ const TextInputs: React.FC<TextInputsProps> = ({
           border: "1px solid",
           borderColor: { base: "red.500", _dark: "red.400" },
         }}
+        {...register("body")}
       />
       <Flex justify="flex-end">
         {/* Button for creating a new post */}
         <Button
           height="34px"
           padding="0px 30px"
-          disabled={!textInputs.title} // if there is no text in the title field button is disabled
           loading={loading}
           onClick={handleCreatePost}
           shadow="md"
diff --git a/package.json b/package.json
index 497d040..b09de2a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/open-sans": "^5.0.28",
+    "@hookform/resolvers": "^5.2.2",
     "@types/node": "20.14.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
@@ -34,9 +35,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-firebase-hooks": "^5.1.1",
+    "react-hook-form": "^7.69.0",
     "react-icons": "^5.5.0",
     "safe-json-stringify": "^1.2.0",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "zod": "^4.2.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
diff --git a/schema/admin.ts b/schema/admin.ts
new file mode 100644
index 0000000..1c092df
--- /dev/null
+++ b/schema/admin.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const addAdminSchema = z.object({
+  email: z
+    .string()
+    .email("Invalid email address")
+    .min(3, "Email must be at least 3 characters"),
+});
+
+export type AddAdminInput = z.infer<typeof addAdminSchema>;
diff --git a/schema/auth.ts b/schema/auth.ts
new file mode 100644
index 0000000..45584be
--- /dev/null
+++ b/schema/auth.ts
@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+export const signUpSchema = z
+  .object({
+    email: z.string().email("Invalid email address"),
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string().min(1, "Confirm Password is required"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+
+export const resetPasswordSchema = z.object({
+  email: z.string().email("Invalid email address"),
+});
+
+export type LoginInput = z.infer<typeof loginSchema>;
+export type SignUpInput = z.infer<typeof signUpSchema>;
+export type ResetPasswordInput = z.infer<typeof resetPasswordSchema>;
diff --git a/schema/comment.ts b/schema/comment.ts
new file mode 100644
index 0000000..85f01d7
--- /dev/null
+++ b/schema/comment.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const commentSchema = z.object({
+  text: z.string().min(1, "Comment cannot be empty"),
+});
+
+export type CommentInput = z.infer<typeof commentSchema>;
diff --git a/schema/community.ts b/schema/community.ts
new file mode 100644
index 0000000..534af21
--- /dev/null
+++ b/schema/community.ts
@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const createCommunitySchema = z.object({
+  name: z
+    .string()
+    .min(3, "Name must be at least 3 characters")
+    .max(21, "Name must be at most 21 characters")
+    .regex(/^[a-zA-Z0-9]+$/, "Name can only contain letters and numbers"),
+  type: z.enum(["public", "restricted", "private"]),
+});
+
+export type CreateCommunityInput = z.infer<typeof createCommunitySchema>;
diff --git a/schema/post.ts b/schema/post.ts
new file mode 100644
index 0000000..5a0d794
--- /dev/null
+++ b/schema/post.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const createPostSchema = z.object({
+  title: z
+    .string()
+    .min(1, "Title is required")
+    .max(300, "Title cannot exceed 300 characters"),
+  body: z.string().optional(),
+});
+
+export type CreatePostInput = z.infer<typeof createPostSchema>;
diff --git a/schema/profile.ts b/schema/profile.ts
new file mode 100644
index 0000000..f502b00
--- /dev/null
+++ b/schema/profile.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const editProfileSchema = z.object({
+  displayName: z
+    .string()
+    .min(1, "Display name is required")
+    .max(50, "Display name cannot exceed 50 characters"),
+});
+
+export type EditProfileInput = z.infer<typeof editProfileSchema>;
diff --git a/yarn.lock b/yarn.lock
index a3bd435..e526c99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1137,6 +1137,13 @@
     protobufjs "^7.5.3"
     yargs "^17.7.2"
 
+"@hookform/resolvers@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-5.2.2.tgz#5ac16cd89501ca31671e6e9f0f5c5d762a99aa12"
+  integrity sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==
+  dependencies:
+    "@standard-schema/utils" "^0.3.0"
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
@@ -1630,6 +1637,11 @@
   resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.0.0.tgz#f193b73dc316c4170f2e82a881da0f550d551b9c"
   integrity sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==
 
+"@standard-schema/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/utils/-/utils-0.3.0.tgz#3d5e608f16c2390c10528e98e59aef6bf73cae7b"
+  integrity sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==
+
 "@swc/helpers@0.5.15":
   version "0.5.15"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
@@ -5784,6 +5796,11 @@ react-firebase-hooks@^5.1.1:
   resolved "https://registry.yarnpkg.com/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz#fc92bb4b860c6753c806583f64d7f069b6ee6785"
   integrity sha512-y2UpWs82xs+39q5Rc/wq316ca52QsC0n8m801V+yM4IC4hbfOL4yQPVSh7w+ydstdvjN9F+lvs1WrO2VYxpmdA==
 
+react-hook-form@^7.69.0:
+  version "7.69.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.69.0.tgz#40f5e5ba2a436c2eee12b75ab30da5bb743744e7"
+  integrity sha512-yt6ZGME9f4F6WHwevrvpAjh42HMvocuSnSIHUGycBqXIJdhqGSPQzTpGF+1NLREk/58IdPxEMfPcFCjlMhclGw==
+
 react-icons@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
@@ -6939,3 +6956,8 @@ yocto-queue@^0.1.0:
   version "4.1.13"
   resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.13.tgz#93699a8afe937ba96badbb0ce8be6033c0a4b6b1"
   integrity sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==
+
+zod@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.2.1.tgz#07f0388c7edbfd5f5a2466181cb4adf5b5dbd57b"
+  integrity sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==