diff --git a/package-lock.json b/package-lock.json
index 70de9dc..2af3ab4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,14 @@
       "name": "sticky-notes-app",
       "version": "0.0.0",
       "dependencies": {
-        "@hookform/resolvers": "^3.3.4",
-        "axios": "^1.9.0",
+        "@hookform/resolvers": "^3.10.0",
+        "axios": "^1.12.2",
         "lucide-react": "^0.344.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.50.1",
+        "react-hook-form": "^7.64.0",
         "react-router-dom": "^6.22.1",
-        "zod": "^3.22.4"
+        "zod": "^3.25.76"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.1",
@@ -1844,13 +1844,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -2662,14 +2662,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -3761,9 +3762,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.56.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.1.tgz",
-      "integrity": "sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==",
+      "version": "7.64.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.64.0.tgz",
+      "integrity": "sha512-fnN+vvTiMLnRqKNTVhDysdrUay0kUUAymQnFIznmgDvapjveUWOOPqMNzPg+A+0yf9DuE2h6xzBjN1s+Qx8wcg==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -4585,9 +4586,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.24.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz",
-      "integrity": "sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==",
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index cfcfc8e..fb46bd9 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
-    "axios": "^1.9.0",
+    "@hookform/resolvers": "^3.10.0",
+    "axios": "^1.12.2",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.64.0",
     "react-router-dom": "^6.22.1",
-    "zod": "^3.22.4"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..b32f811 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,25 +1,61 @@
-// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
-
 import { Save } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { noteSchema } from "../schema/noteSchema";
 
 const CreateNoteForm = () => {
-  // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
-
-
-  // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: zodResolver(noteSchema),
+  });
 
   const sendToTheServer = async (data) => {
-    // TODO: Send the data to the server
-    // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+    setIsSubmitting(true);
+    try {
+      await axios.post('http://localhost:3001/api/notes', data);
+      navigate('/notes');
+    } catch (error) {
+      console.error('Error creating note:', error);
+      alert('Failed to create note. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
-    {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <div>
+      <h1>Create Note</h1>
+      <form onSubmit={handleSubmit(sendToTheServer)}>
+        <input
+          type="text"
+          placeholder="Title"
+          {...register("title")}
+          className="border p-2 w-full mb-2"
+        />
+        {errors.title && <p className="text-red-500">{errors.title.message}</p>}
+
+        <textarea
+          placeholder="Content"
+          rows="5"
+          {...register("content")}
+          className="border p-2 w-full mb-2"
+        />
+        {errors.content && <p className="text-red-500">{errors.content.message}</p>}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-blue-600 text-white px-4 py-2 flex items-center"
+        >
+          <Save className="w-4 h-4 mr-2" />
+          {isSubmitting ? "Saving..." : "Create"}
+        </button>
+      </form>
+    </div>
   );
 };
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index f193fbe..2593488 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -23,7 +23,7 @@ const Header = () => {
               }`}
             >
               <Plus size={18} />
-              <span>Create</span>
+              <span>Create a New Note</span>
             </Link>
             
             <Link 
diff --git a/src/components/NoteCard.jsx b/src/components/NoteCard.jsx
index 48a5647..aba9274 100644
--- a/src/components/NoteCard.jsx
+++ b/src/components/NoteCard.jsx
@@ -7,8 +7,8 @@ const NoteCard = ({ note, onDelete }) => {
     <div
       className="relative"
       style={{
-        filter: "drop-shadow(0 2px 4px #b266ff)", // lighter purple shadow
-        borderRadius: "6px", // less corner radius
+        filter: "drop-shadow(0 2px 4px #b266ff)", 
+        borderRadius: "6px", 
       }}
     >
       <div
@@ -18,7 +18,7 @@ const NoteCard = ({ note, onDelete }) => {
           color: "#111",
           borderRadius: "6px",
           minHeight: "180px",
-          boxShadow: "0 1px 2px rgba(0,0,0,0.06)", // lighter shadow
+          boxShadow: "0 1px 2px rgba(0,0,0,0.06)", 
           fontFamily: "inherit",
           display: "flex",
           flexDirection: "column",
diff --git a/src/schema/noteSchema.js b/src/schema/noteSchema.js
new file mode 100644
index 0000000..da20104
--- /dev/null
+++ b/src/schema/noteSchema.js
@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const noteSchema = z.object({
+  title: z.string().min(1, 'Title is required').max(50, 'Title must be 50 characters or less'),
+  content: z.string().min(1, 'Content is required').max(500, 'Content must be 500 characters or less'),
+});
diff --git a/src/schema/notes.js b/src/schema/notes.js
index 4621c8c..8eefbb7 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -1,8 +1,24 @@
 import { z } from "zod";
 
 export const noteSchema = z.object({
+  title: z
+    .string()
+    .min(1, 'Title is required')
+    .max(50, 'Title must be 50 characters or less'),
+  content: z
+    .string()
+    .min(1, 'Content is required')
+    .max(500, 'Content must be 500 characters or less'),
+});
+
+
+
+
+
+
+
   //TODO: create the title and content schema, 
   // Make sure the title is required and the content is required
   // Make sure the title is max 50 characters and the content is max 500 characters
 
-  });
\ No newline at end of file
+  
\ No newline at end of file