diff --git a/.anima/.gitignore b/.anima/.gitignore
new file mode 100644
index 0000000..5e46596
--- /dev/null
+++ b/.anima/.gitignore
@@ -0,0 +1 @@
+cache
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 405c44c..8636b6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,8 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
@@ -3598,104 +3598,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.3",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
-      "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-      "peer": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -14586,9 +14488,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -14735,15 +14637,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-error-overlay": {
@@ -15433,9 +15335,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -16835,19 +16737,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 210ac3c..abf316e 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
diff --git a/src/Pages/CSS/LoginSignup.css b/src/Pages/CSS/LoginSignup.css
index fb6f356..1d036f6 100644
--- a/src/Pages/CSS/LoginSignup.css
+++ b/src/Pages/CSS/LoginSignup.css
@@ -65,4 +65,14 @@
     color: #5c5c5c;
     font-size: 18px;
     font-weight: 500;
-}
\ No newline at end of file
+}
+
+.input-error {
+    border: 1px solid red;
+  }
+  
+  .error-message {
+    color: red;
+    font-size: 12px;
+  }
+  
\ No newline at end of file
diff --git a/src/Pages/LoginSignup.jsx b/src/Pages/LoginSignup.jsx
index bd38449..8f7ea06 100644
--- a/src/Pages/LoginSignup.jsx
+++ b/src/Pages/LoginSignup.jsx
@@ -10,9 +10,9 @@ const LoginSignup = () => {
           <Components.SignUpContainer signinIn={signIn}>
               <Components.Form>
                   <Components.Title>Create Account</Components.Title>
-                  <Components.Input type='text' placeholder='Name' />
-                  <Components.Input type='email' placeholder='Email' />
-                  <Components.Input type='password' placeholder='Password' />
+                  <Components.Input type='text' placeholder='Name' required />
+                  <Components.Input type='email' placeholder='Email' required/>
+                  <Components.Input type='password' placeholder='Password' required />
                   <Components.Button>Sign Up</Components.Button>
               </Components.Form>
           </Components.SignUpContainer>
@@ -20,8 +20,8 @@ const LoginSignup = () => {
           <Components.SignInContainer signinIn={signIn}>
                <Components.Form>
                    <Components.Title>Sign in</Components.Title>
-                   <Components.Input type='email' placeholder='Email' />
-                   <Components.Input type='password' placeholder='Password' />
+                   <Components.Input type='email' placeholder='Email' required />
+                   <Components.Input type='password' placeholder='Password' required  />
                    <Components.Anchor href='#'>Forgot your password?</Components.Anchor>
                    <Components.Button>Sigin In</Components.Button>
                </Components.Form>
@@ -60,3 +60,104 @@ const LoginSignup = () => {
 }
 
 export default LoginSignup
+
+
+// import React from 'react';
+// import * as Components from './Components';
+// import { Formik, Form, Field, ErrorMessage } from 'formik';
+// import * as Yup from 'yup';
+
+// const LoginSignup = () => {
+//   const [signIn, toggle] = React.useState(true);
+
+//   const SignupSchema = Yup.object().shape({
+//     name: Yup.string().required('Name is required'),
+//     email: Yup.string().email('Invalid email').required('Email is required'),
+//     password: Yup.string().min(6, 'Password is too short - should be 6 chars minimum.').required('Password is required')
+//   });
+
+//   const SigninSchema = Yup.object().shape({
+//     email: Yup.string().email('Invalid email').required('Email is required'),
+//     password: Yup.string().min(6, 'Password is too short - should be 6 chars minimum.').required('Password is required')
+//   });
+
+//   return (
+//     <Components.div>
+//       <Components.Container>
+//         <Components.SignUpContainer signinIn={signIn}>
+//           <Formik
+//             initialValues={{ name: '', email: '', password: '' }}
+//             validationSchema={SignupSchema}
+//             onSubmit={values => {
+//               console.log(values);
+//               // Handle signup form submission
+//             }}
+//           >
+//             {({ errors, touched }) => (
+//               <Form>
+//                 <Components.Title>Create Account</Components.Title>
+//                 <Field name="name" type="text" placeholder="Name" className={errors.name && touched.name ? 'input-error' : ''} />
+//                 <ErrorMessage name="name" component="div" className="error-message" />
+//                 <Field name="email" type="email" placeholder="Email" className={errors.email && touched.email ? 'input-error' : ''} />
+//                 <ErrorMessage name="email" component="div" className="error-message" />
+//                 <Field name="password" type="password" placeholder="Password" className={errors.password && touched.password ? 'input-error' : ''} />
+//                 <ErrorMessage name="password" component="div" className="error-message" />
+//                 <Components.Button type="submit">Sign Up</Components.Button>
+//               </Form>
+//             )}
+//           </Formik>
+//         </Components.SignUpContainer>
+
+//         <Components.SignInContainer signinIn={signIn}>
+//           <Formik
+//             initialValues={{ email: '', password: '' }}
+//             validationSchema={SigninSchema}
+//             onSubmit={values => {
+//               console.log(values);
+//               // Handle signin form submission
+//             }}
+//           >
+//             {({ errors, touched }) => (
+//               <Form>
+//                 <Components.Title>Sign in</Components.Title>
+//                 <Field name="email" type="email" placeholder="Email" className={errors.email && touched.email ? 'input-error' : ''} />
+//                 <ErrorMessage name="email" component="div" className="error-message" />
+//                 <Field name="password" type="password" placeholder="Password" className={errors.password && touched.password ? 'input-error' : ''} />
+//                 <ErrorMessage name="password" component="div" className="error-message" />
+//                 <Components.Anchor href="#">Forgot your password?</Components.Anchor>
+//                 <Components.Button type="submit">Sign In</Components.Button>
+//               </Form>
+//             )}
+//           </Formik>
+//         </Components.SignInContainer>
+
+//         <Components.OverlayContainer signinIn={signIn}>
+//           <Components.Overlay signinIn={signIn}>
+//             <Components.LeftOverlayPanel signinIn={signIn}>
+//               <Components.Title>Welcome Back!</Components.Title>
+//               <Components.Paragraph>
+//                 To keep connected with us please login with your personal info
+//               </Components.Paragraph>
+//               <Components.GhostButton onClick={() => toggle(true)}>
+//                 Sign In
+//               </Components.GhostButton>
+//             </Components.LeftOverlayPanel>
+
+//             <Components.RightOverlayPanel signinIn={signIn}>
+//               <Components.Title>Hello, Friend!</Components.Title>
+//               <Components.Paragraph>
+//                 Enter Your personal details and start journey with us
+//               </Components.Paragraph>
+//               <Components.GhostButton onClick={() => toggle(false)}>
+//                 Sign Up
+//               </Components.GhostButton>
+//             </Components.RightOverlayPanel>
+//           </Components.Overlay>
+//         </Components.OverlayContainer>
+
+//       </Components.Container>
+//     </Components.div>
+//   )
+// }
+
+// export default LoginSignup;