diff --git a/package-lock.json b/package-lock.json
index 70de9dc..c07ec28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,6 +92,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -1441,6 +1442,7 @@
       "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1492,6 +1494,7 @@
       "integrity": "sha512-67kYYShjBR0jNI5vsf/c3WG4u+zDnCTHTPqVMQguffaWWFs7artgwKmfwdifl+r6XyM5LYLas/dInj2T0SgJyw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.31.0",
         "@typescript-eslint/types": "8.31.0",
@@ -1701,6 +1704,7 @@
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1918,6 +1922,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -2327,6 +2332,7 @@
       "integrity": "sha512-E6Mtz9oGQWDCpV12319d59n4tx9zOTXSTmc8BLVxBx+G/0RdM5MvEEJLU9c0+aleoePYYgVTOsRblx433qmhWQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3558,6 +3564,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -3740,6 +3747,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3752,6 +3760,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -3765,6 +3774,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.1.tgz",
       "integrity": "sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -4291,6 +4301,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4376,6 +4387,7 @@
       "integrity": "sha512-1oDcnEp3lVyHCuQ2YFelM4Alm2o91xNoMncRm1U7S+JdYfYOvbiGZ3/CxGttrOu2M/KcGz7cRC2DoNUA6urmMA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/server/package-lock.json b/server/package-lock.json
index 481e8ee..be69a21 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -727,6 +727,7 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
       "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..e107bb8 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,26 +1,143 @@
-// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
 
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { noteSchema } from "../schema/notes";
 import { Save } from "lucide-react";
 
 const CreateNoteForm = () => {
-  // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
-
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
 
-  // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = 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);
+      reset();
+      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 className="max-w-xl mx-auto bg-white p-6 rounded-lg shadow">
+
+      <h1 className="text-2xl font-bold mb-6 text-gray-800">Create Note</h1>
+
+      <form onSubmit={handleSubmit(sendToTheServer)} className="space-y-6">
+    
+        <div>
+
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+
+            Title
+
+          </label>
+
+          <input
+
+            type="text"
+
+            placeholder="Note Title"
+
+            {...register("title")}
+
+            className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-400"
+          />
+          {errors.title && (
+
+            <p className="text-red-500 text-sm mt-1">
+
+              {errors.title.message}
+
+            </p>
+
+          )}
+
+        </div>
+
+     
+        <div>
+
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+
+            Content
+
+          </label>
+
+          <textarea
+
+            rows={6}
+
+            placeholder="Write your note here..."
+
+            {...register("content")}
+
+            className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-400"
+          />
+          {errors.content && (
+
+            <p className="text-red-500 text-sm mt-1">
+
+              {errors.content.message}
+
+            </p>
+          )}
+
+        </div>
+
+      
+        <button
+
+          type="submit"
+
+          disabled={isSubmitting}
+
+          className="w-full inline-flex justify-center items-center gap-2 px-4 py-3 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition disabled:opacity-50"
+        >
+          <Save size={18} />
+
+          {isSubmitting ? "Saving..." : "Save Note"}
+
+        </button>
+
+      </form>
+
+    </div>
+
   );
 };
 
 export default 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
+
+  
+    // 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
+
+
+  
+
+
diff --git a/src/components/NoteCard.jsx b/src/components/NoteCard.jsx
index 48a5647..88b475a 100644
--- a/src/components/NoteCard.jsx
+++ b/src/components/NoteCard.jsx
@@ -32,7 +32,7 @@ const NoteCard = ({ note, onDelete }) => {
             {title}
           </h3>
           <button
-            onClick={() => onDelete(id)}
+            onClick={() => onDelete(note._id)}
             aria-label="Delete note"
             className="text-gray-500 hover:text-red-500 p-1 rounded-full hover:bg-red-50 transition-colors"
           >
diff --git a/src/schema/notes.js b/src/schema/notes.js
index 4621c8c..4e16bc2 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -1,8 +1,22 @@
 import { z } from "zod";
 
 export const noteSchema = z.object({
+
+
+   title: z
+   .string()
+   .min(1, "title is required")
+   .max(50, "title must be at most 50 characters"),
+
+   content: z
+   .string()
+   .min(1, "Content is required")
+   .max(500, "title must be at most 500 characters"),
+
+    });
+
+    
   //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