diff --git a/client/src/components/CreateTaskForm.tsx b/client/src/components/CreateTaskForm.tsx
index 4bf026e..87ff344 100644
--- a/client/src/components/CreateTaskForm.tsx
+++ b/client/src/components/CreateTaskForm.tsx
@@ -6,7 +6,7 @@ import { useAppContext } from "~/hooks";
 
 export function CreateTaskForm() {
   const { userId } = useAppContext();
-  
+
   const [taskTitle, setTaskTitle] = useState("");
 
   async function handleCreateTask(e: FormEvent<HTMLFormElement>) {
@@ -16,8 +16,8 @@ export function CreateTaskForm() {
       return;
     }
 
-    await createTask(userId, taskTitle);
     setTaskTitle("");
+    await createTask(userId, taskTitle);
   }
 
   return (
@@ -25,6 +25,7 @@ export function CreateTaskForm() {
       <div className="flex gap-2">
         <Input
           name="new-task"
+          value={taskTitle}
           placeholder="New task..."
           onChange={(e) => setTaskTitle(e.target.value)}
         />
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
index df0c43d..e7677fa 100644
--- a/client/src/components/ui/Input.tsx
+++ b/client/src/components/ui/Input.tsx
@@ -3,17 +3,19 @@ import { cn } from "~/utils";
 
 interface InputProps {
   name: string;
+  value?: string;
   placeholder: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   classes?: string;
 }
 
 export function Input(props: InputProps) {
-  const { name, placeholder, onChange, classes } = props;
+  const { name, value, placeholder, onChange, classes } = props;
 
   return (
     <input
       name={name}
+      value={value}
       placeholder={placeholder}
       onChange={onChange}
       className={cn("h-10 w-full rounded-md border px-4", classes || "")}