diff --git a/Client/package-lock.json b/Client/package-lock.json
index 27f3e8c28..ff72ed199 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -1317,9 +1317,15 @@
       }
     },
     "node_modules/@mui/x-charts": {
+<<<<<<< HEAD
       "version": "7.6.1",
       "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.6.1.tgz",
       "integrity": "sha512-LuAVQX4lzhmsqk2NRdWCP+aQZ8kRwG7KOy8ulf8hR5NI5J1VsiOtH41J+qgV3uAC6hDMWL7fTgffrRDFTMci/g==",
+=======
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.6.2.tgz",
+      "integrity": "sha512-oG22NRno1+HSLV/9jVLThnHAKN4g+MXOO6GqaQxN9LM0hjt1tgRsrNAlfcJndmj/dVwqFtynkFB5qWnTEBZs7Q==",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
       "dependencies": {
         "@babel/runtime": "^7.24.6",
         "@mui/base": "^5.0.0-beta.40",
@@ -2235,9 +2241,15 @@
       }
     },
     "node_modules/caniuse-lite": {
+<<<<<<< HEAD
       "version": "1.0.30001628",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
       "integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
+=======
+      "version": "1.0.30001629",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
+      "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
       "dev": true,
       "funding": [
         {
@@ -2607,9 +2619,15 @@
       }
     },
     "node_modules/electron-to-chromium": {
+<<<<<<< HEAD
       "version": "1.4.790",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.790.tgz",
       "integrity": "sha512-eVGeQxpaBYbomDBa/Mehrs28MdvCXfJmEFzaMFsv8jH/MJDLIylJN81eTJ5kvx7B7p18OiPK0BkC06lydEy63A==",
+=======
+      "version": "1.4.792",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.792.tgz",
+      "integrity": "sha512-rkg5/N3L+Y844JyfgPUyuKK0Hk0efo3JNxUDKvz3HgP6EmN4rNGhr2D8boLsfTV/hGo7ZGAL8djw+jlg99zQyA==",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
       "dev": true
     },
     "node_modules/error-ex": {
diff --git a/Client/src/Components/TextFields/Description/DescriptionTextField.jsx b/Client/src/Components/TextFields/Description/DescriptionTextField.jsx
index 7f3ba908a..dd4011da9 100644
--- a/Client/src/Components/TextFields/Description/DescriptionTextField.jsx
+++ b/Client/src/Components/TextFields/Description/DescriptionTextField.jsx
@@ -7,11 +7,12 @@ import { useTheme } from "@mui/material";
 /**
  * @component
  * @param {Object} props
+ * @param {function} props.onChange - The function to call when the text field changes (optional)
  * @param {string} props.hintText - The hint text displayed within the text field (required)
  * @param {boolean} props.hasError - A flag indicating if the text field has an error (required)
  * @returns {JSX.Element} - Renders the description text field component
  */
-const DescriptionTextField = ({ hintText, hasError }) => {
+const DescriptionTextField = ({ onChange, hintText, hasError }) => {
   const theme = useTheme();
 
   const fontLookup = {
@@ -27,6 +28,7 @@ const DescriptionTextField = ({ hintText, hasError }) => {
     >
       <div className="text-field-title">Description</div>
       <TextField
+        onChange={onChange}
         id="description-field-area"
         error={hasError}
         className="description-field-area"
diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx
index 5273ba74b..64189b395 100644
--- a/Client/src/Components/TextFields/Email/EmailTextField.jsx
+++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx
@@ -10,6 +10,7 @@ import { useTheme } from "@mui/material";
  *
  * @component
  * @param {Object} props - The properties that define the `EmailTextField` component.
+ * @param {function} props.onChange - The function to call when the text field changes.
  * @param {string} props.id - The id of the text field.
  * @param {string} [props.label="Email"] - The label of the text field.
  * @param {string} props.variant - The variant of the text field.
@@ -26,6 +27,7 @@ import { useTheme } from "@mui/material";
  */
 
 const EmailTextField = ({
+  onChange,
   id,
   label = "Email",
   variant,
@@ -52,6 +54,7 @@ const EmailTextField = ({
       <div className="email-text-field-title">{label}</div>
       <div className="email-text-field">
         <TextField
+          onChange={onChange}
           error={error}
           className="email-text-field-input"
           id={id}
diff --git a/Client/src/Components/TextFields/Password/PasswordTextField.jsx b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
index 64a35bafb..e5aa07a96 100644
--- a/Client/src/Components/TextFields/Password/PasswordTextField.jsx
+++ b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
@@ -8,6 +8,7 @@ import { useTheme } from "@mui/material";
 /**
  * @component
  * @param {Object} props
+ * @param {function} props.onChange - The function to call when the text field changes (optional)
  * @param {string} props.id - Unique ID for the text field (optional)
  * @param {string} props.label - The label text displayed above the text field (optional)
  * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional)
@@ -18,6 +19,7 @@ import { useTheme } from "@mui/material";
  * @returns {JSX.Element} - Renders the password text field component with dynamic icon display
  */
 const PasswordTextField = ({
+  onChange,
   id,
   label = "Password",
   variant,
@@ -44,6 +46,7 @@ const PasswordTextField = ({
       <div className="password-text-field-title">{label}</div>
       <div className="password-text-field">
         <TextField
+          onChange={onChange}
           type="password"
           error={error}
           className="password-text-field-input"
diff --git a/Client/src/Components/TextFields/Text/TextField.jsx b/Client/src/Components/TextFields/Text/TextField.jsx
index f1d7b415b..40e9fcbee 100644
--- a/Client/src/Components/TextFields/Text/TextField.jsx
+++ b/Client/src/Components/TextFields/Text/TextField.jsx
@@ -7,6 +7,7 @@ import { useTheme } from "@mui/material";
 
 /**
  * @param {Object} props - The component props.
+ * @param {function} props.onChange - The function to call when the text field changes.
  * @param {string} props.id - The ID of the text field.
  * @param {string} props.label - The label text for the text field.
  * @param {string} props.variant - The variant of the text field.
@@ -17,6 +18,7 @@ import { useTheme } from "@mui/material";
  * @returns {JSX.Element} The rendered component.
  */
 const StringTextField = ({
+  onChange,
   id,
   label,
   variant,
@@ -43,6 +45,7 @@ const StringTextField = ({
       <div className="email-text-field-title">{label}</div>
       <div className="email-text-field">
         <TextField
+          onChange={onChange}
           error={error}
           className="email-text-field-input"
           id={id}
diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 4a621e889..19edcf6f0 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
@@ -9,6 +9,24 @@ import Google from "../../assets/Images/Google.png";
 import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 
 const Login = () => {
+  const idMap = {
+    "login-email-input": "email",
+    "login-password-input": "password",
+  };
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({
+      ...form,
+      [fieldName]: e.target.value,
+    });
+  };
+
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
@@ -25,15 +43,17 @@ const Login = () => {
         <div className="login-form-v3-spacing" />
         <div className="login-form-inputs">
           <EmailTextField
+            onChange={handleInput}
             error={false}
             placeholder="Enter your email"
             id="login-email-input"
           />
           <div className="login-form-v2-spacing" />
           <PasswordTextField
+            onChange={handleInput}
             error={false}
             placeholder="Password"
-            id="login-email-input"
+            id="login-password-input"
           />
         </div>
         <div className="login-form-v3-spacing" />
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index c533190be..f357f2b6b 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
@@ -10,6 +10,28 @@ import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
 
 const Register = () => {
+  const idMap = {
+    "register-firstname-input": "firstname",
+    "register-lastname-input": "lastname",
+    "register-email-input": "email",
+    "register-password-input": "password",
+  };
+
+  const [form, setForm] = useState({
+    firstname: "",
+    lastname: "",
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({
+      ...form,
+      [idMap[e.target.id]]: e.target.value,
+    });
+  };
+
   return (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
@@ -27,6 +49,7 @@ const Register = () => {
         <div className="register-form-v-spacing-40px" />
         <div className="register-form-inputs">
           <StringTextField
+            onChange={handleInput}
             error={false}
             label="First name*"
             placeholder="Enter your first name"
@@ -34,6 +57,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <StringTextField
+            onChange={handleInput}
             error={false}
             label="Last name*"
             placeholder="Enter your last name"
@@ -41,6 +65,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <EmailTextField
+            onChange={handleInput}
             label="Email*"
             error={false}
             placeholder="Enter your email"
@@ -48,6 +73,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <PasswordTextField
+            onChange={handleInput}
             label="Password*"
             error={false}
             placeholder="Create a password"