diff --git a/package-lock.json b/package-lock.json
index dc46ca48..918df5f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4513,7 +4513,6 @@
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
       "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
       "requires": {}
-<<<<<<< HEAD
     },
     "react-toastify": {
       "version": "10.0.5",
@@ -4523,8 +4522,6 @@
       "requires": {
         "clsx": "^2.1.0"
       }
-=======
->>>>>>> be9db53b45ec1d45ff6af208cda13aa45c8e503b
     },
     "require-directory": {
       "version": "2.1.1",
diff --git a/src/components/CollegePage/CollegePage.css b/src/components/CollegePage/CollegePage.css
index a49e3ff3..2ea1435b 100644
--- a/src/components/CollegePage/CollegePage.css
+++ b/src/components/CollegePage/CollegePage.css
@@ -14,7 +14,7 @@
 }
 
 .content {
-  background-color: #5cb6f9;
+  background-color: rgb(26, 165, 224);
   width: 50vw;
   overflow: hidden;
   position: relative;
@@ -169,9 +169,10 @@ margin-bottom: 0px;
 }
 .searchCourses {
   border-radius: 15px;
-  width: 30vw;
+  width: 40vw;
+  margin-left: 5vw;
+  margin-top: 120px;
   background-color: #c5d5d4;
-  color: white;
   padding: 10px 20px;
   font-size: 16px;
   border: none;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 57402414..911e85ee 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -43,7 +43,7 @@ const Dashboard = () => {
     setFilteredColleges(results);
   }, [searchTerm]);
 
-  const handleSignOut = () => {
+  const handleSignOut = useCallback(() => {
     signOut(auth)
       .then(() => {
         setTimeout(() => {
@@ -55,7 +55,7 @@ const Dashboard = () => {
           className: "toast-message",
         });
       });
-  };
+  });
 
   const handleCollegeClick = useCallback(
     (college) => {
diff --git a/src/components/ForgotPassword/ForgotPassword.jsx b/src/components/ForgotPassword/ForgotPassword.jsx
index 6d138f27..7173b37a 100644
--- a/src/components/ForgotPassword/ForgotPassword.jsx
+++ b/src/components/ForgotPassword/ForgotPassword.jsx
@@ -9,7 +9,14 @@ function validEmail(email) {
         /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
 }
-
+function onChangeEvent(event){
+    setEmail(event.target.value)
+    if (!validEmail(event.target.value)) {
+        setError("**Enter a valid E-mail!");
+    } else {
+        setError("");
+    }
+}
 function ForgotPassword() {
 
     const [email, setEmail] = useState();
@@ -55,14 +62,7 @@ function ForgotPassword() {
                     <form className='fp-form' onSubmit={handleSubmit}>
                         <label className="forgot_text" htmlFor="Email">Please enter your email address and and we'll send you a link to get back into your account.</label>
                         <input type="email" value={email}
-                            onChange={(event) => {
-                                setEmail(event.target.value)
-                                if (!validEmail(event.target.value)) {
-                                    setError("**Enter a valid E-mail!");
-                                } else {
-                                    setError("");
-                                }
-                            }}
+                            onChange={onChangeEvent}
                             placeholder="Enter your email address" className={`common-input ${error === '**Enter a valid E-mail!' ? 'error' : ''}  ${error === '**Enter a E-mail!' ? 'error' : ''}`}
                         />
                         {error === "**Enter a E-mail!" && (
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 5ee083a3..3a9dbc1e 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -3,6 +3,12 @@ import Typewriter from 'typewriter-effect';
 import MeetingPhoto from '../../assets/meeting.webp';
 import Navbar from '../Navbar/Navbar';
 import './Home.css';
+ function handleOnInit(typewriter){
+  typewriter.typeString("Still Confused with College Choice?")
+ .pauseFor(10)
+ .start();
+    
+}
 
 const Home = () => {
     return (
@@ -10,14 +16,10 @@ const Home = () => {
             <Navbar />
             <div id='homeCircle'/>
             <div id='homeContainer'>
-                <img id='meetingImg' src={MeetingPhoto} alt="Meeting Image" />
+                <img id='meetingImg' src={MeetingPhoto} alt="Meeting Pic" />
                 <div className="MainText">
                     <Typewriter
-                        onInit={(typewriter) => {
-                            typewriter.typeString("Still Confused with College Choice?")
-                                .pauseFor(10)
-                                .start();
-                        }}
+                        onInit={handleOnInit}
                     />
                 </div>
             </div>
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
index 8fea36ab..def714de 100644
--- a/src/components/Login/Login.jsx
+++ b/src/components/Login/Login.jsx
@@ -2,7 +2,7 @@ import {
   signInWithEmailAndPassword,
   signInWithPopup
 } from "firebase/auth";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback} from "react";
 import { Link, useNavigate } from "react-router-dom";
 import meeting2 from "../../assets/meeting2.png";
 
@@ -29,8 +29,8 @@ export default function Login() {
     password: "",
   }); 
 
-  // Function for handelling inputs
-  const handleLoginInfo = (e)=>{
+  // Function for handling inputs
+  const handleLoginInfo = useCallback((e)=>{
     const {name, value} = e.target;
     setLoginInfo((prev)=>{
       return {...prev, [name]: value}
@@ -42,13 +42,13 @@ export default function Login() {
     setError((prev)=>{
       return {...prev, ...errObj}
     })
-  }
+  })
 
-  const passwordToggle = () => {
+  const passwordToggle = useCallback(() => {
     if (passwordType === "password") {
       setPasswordType("text");
     } else setPasswordType("password");
-  };
+  });
 
   const navigate = useNavigate();
   useEffect(() => {
@@ -64,7 +64,7 @@ export default function Login() {
     });
   }, []);
 
-  const genrateCaptcha = ()=>
+  const generateCaptcha = useCallback(()=>
     {
       let captcha = "";
       const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -74,14 +74,14 @@ export default function Login() {
       captcha += charset.charAt(randomIndex);
     }
     setCaptchaText(captcha)
-    }
+    })
 
     useEffect(()=>{
-      genrateCaptcha();
+      generateCaptcha();
     }, [])
 
   // if signin with EmailId/password success then navigate to /dashboard
-  const handleSignIn = (e) => {
+  const handleSignIn = useCallback((e) => {
      e.preventDefault();
      let submitable = true;
      if(captchaVal !== captchaText){
@@ -89,7 +89,7 @@ export default function Login() {
         className: "toast-message",
       })
       setCaptchaVal("");
-      genrateCaptcha();
+      generateCaptcha();
       return;
     }
 
@@ -127,9 +127,9 @@ export default function Login() {
           className: "toast-message",
         })
       }
-  };
+  });
   // Popup Google signin
-  const SignInGoogle = () => {
+  const SignInGoogle = useCallback(() => {
     signInWithPopup(auth, googleAuthProvider)
       .then(() => {
         toast.success("Login successful !",{
@@ -142,7 +142,7 @@ export default function Login() {
       .catch((err) => toast.error(err.message,{
         className: "toast-message",
       }));
-  };
+  });
 
   return (
     <main>
@@ -212,7 +212,7 @@ export default function Login() {
                 <div id="captcha">{captchaText}</div>
                 <FaSyncAlt
                 id="captchaIcon"
-                  onClick={genrateCaptcha}
+                  onClick={generateCaptcha}
                 />
                 <div className="iconContainer">
                 <input
diff --git a/src/components/SignUp/SignUp.jsx b/src/components/SignUp/SignUp.jsx
index 2ed5aa97..17d6ced5 100644
--- a/src/components/SignUp/SignUp.jsx
+++ b/src/components/SignUp/SignUp.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,useCallback } from "react";
 import { Link,useNavigate } from "react-router-dom";
 import {
   FaHome,
@@ -41,7 +41,7 @@ const SignUpForm = () => {
   });
   const [error, setError] = useState({});
   const [passwordType, setPasswordType] = useState("password");
-  const [confrimPasswordType, setConfirmPasswordType] = useState("password");
+  const [confirmPasswordType, setConfirmPasswordType] = useState("password");
   const [registerInformation, setRegisterInformation] = useState({
     email: "",
     password: "",
@@ -49,21 +49,23 @@ const SignUpForm = () => {
   });
   const [captchaVal, setCaptchaVal] = useState("");
   const [captchaText, setCaptchaText] = useState("");
-
+  const handleCaptcha=useCallback((e)=>{
+    setCaptchaVal(e.target.value)
+  });
   //password toggele
-  const passwordToggle = () => {
+  const passwordToggle = useCallback(() => {
     if (passwordType === "password") {
       setPasswordType("text");
     } else setPasswordType("password");
-  };
-  const confirmPasswordToggle = () => {
-    if (confrimPasswordType === "password") {
+  });
+  const confirmPasswordToggle = useCallback(() => {
+    if (confirmPasswordType === "password") {
       setConfirmPasswordType("text");
     } else setConfirmPasswordType("password");
-  };
+  });
 
-  // Functions for handleling inputs
-  const handelUserInfo = (e) => {
+  // Functions for handling inputs
+  const handleUserInfo = useCallback((e) => {
     const { name, value } = e.target;
     setUserInfo((prev) => {
       return { ...prev, [name]: value };
@@ -84,9 +86,9 @@ const SignUpForm = () => {
       });
     }
     console.log(typeof userInfo.age);
-  };
+  });
 
-  const handleRegisterInformation = (e) => {
+  const handleRegisterInformation = useCallback((e) => {
     const { name, value } = e.target;
     setRegisterInformation((prev) => {
       return { ...prev, [name]: value };
@@ -99,7 +101,7 @@ const SignUpForm = () => {
     setError((prev) => {
       return { ...prev, ...errObj };
     });
-  };
+  });
 
   function writeUserData(userId, email, userInfo) {
     const { firstName, surname, dob, gender, age } = userInfo;
@@ -117,7 +119,7 @@ const SignUpForm = () => {
 
   let navigate = useNavigate();
 
-  const genrateCaptcha = () => {
+  const generateCaptcha = useCallback(() => {
     let captcha = "";
     const charset =
       "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -127,19 +129,19 @@ const SignUpForm = () => {
       captcha += charset.charAt(randomIndex);
     }
     setCaptchaText(captcha);
-  };
+  });
 
   useEffect(() => {
-    genrateCaptcha();
+    generateCaptcha();
   }, []);
 
-  const handleRegister = async (e) => {
+  const handleRegister = useCallback(async (e) => {
     e.preventDefault();
     let submitable = true;
     if (captchaVal !== captchaText) {
       alert("Wrong Captcha");
       setCaptchaVal("");
-      genrateCaptcha();
+      generateCaptcha();
       return;
     }
 
@@ -167,7 +169,7 @@ const SignUpForm = () => {
     } else {
       alert("Please fill all Fields with Valid Data.");
     }
-  };
+  });
 
   const ageCalculator = (dob) => {
     const birthDate = new Date(dob);
@@ -208,7 +210,7 @@ const SignUpForm = () => {
                     type="text"
                     name="firstName"
                     value={userInfo.firstName}
-                    onChange={handelUserInfo}
+                    onChange={handleUserInfo}
                     placeholder="First Name"
                     className={`firstname-text  ${
                       error.firstNameError && "inputField"
@@ -226,7 +228,7 @@ const SignUpForm = () => {
                     type="text"
                     name="surname"
                     value={userInfo.surname}
-                    onChange={handelUserInfo}
+                    onChange={handleUserInfo}
                     placeholder="Last Name"
                     className={`surname-text  ${
                       error.surnameError && "inputField"
@@ -290,7 +292,7 @@ const SignUpForm = () => {
               <div className="password-input">
                 <div className="iconContainer">
                   <input
-                    type={confrimPasswordType}
+                    type={confirmPasswordType}
                     name="confirmPassword"
                     value={registerInformation.confirmPassword}
                     onChange={handleRegisterInformation}
@@ -301,7 +303,7 @@ const SignUpForm = () => {
                     }`}
                   />
                   <FaCheckCircle className="icons" />
-                  {confrimPasswordType === "password" ? (
+                  {confirmPasswordType === "password" ? (
                     <FaEyeSlash
                       className="toggle-button1"
                       onClick={confirmPasswordToggle}
@@ -326,7 +328,7 @@ const SignUpForm = () => {
                       type="date"
                       value={userInfo.dob}
                       name="dob"
-                      onChange={handelUserInfo}
+                      onChange={handleUserInfo}
                       required
                     />
                     <FaBirthdayCake className="icons" />
@@ -355,7 +357,7 @@ const SignUpForm = () => {
                   type="gender"
                   name="gender"
                   value={userInfo.gender}
-                  onChange={handelUserInfo}
+                  onChange={handleUserInfo}
                   required
                   className=""
                 >
@@ -381,7 +383,7 @@ const SignUpForm = () => {
                       name="user-type"
                       value="student"
                       id="student-option"
-                      onChange={handelUserInfo}
+                      onChange={handleUserInfo}
                       required
                     />
                   </span>
@@ -400,7 +402,7 @@ const SignUpForm = () => {
                       name="user-type"
                       value="counsellor"
                       id="counsellor-option"
-                      onChange={handelUserInfo}
+                      onChange={handleUserInfo}
                       required
                     />
                   </span>
@@ -414,14 +416,14 @@ const SignUpForm = () => {
                   id="captchaBox"
                 >
                   <div id="captcha">{captchaText}</div>
-                  <FaSyncAlt id="captchaIcon" onClick={genrateCaptcha} />
+                  <FaSyncAlt id="captchaIcon" onClick={generateCaptcha} />
                   <div className="iconContainer">
                     <input
                       type="text"
                       name="captcha"
                       value={captchaVal}
                       placeholder="Enter Captcha Here"
-                      onChange={(e) => setCaptchaVal(e.target.value)}
+                      onChange={handleCaptcha}
                       className="w-[100%] bg-slate-100 py-2 px-4 focus:outline-indigo-500"
                       required
                     />