diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
index 619dca9..ccfc01e 100644
--- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
+++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
 import { readTodoTasks } from "../../api/TaskApi";
 import axiosInstance from "src/api/AxiosConfig";
diff --git a/frontend/src/components/ProfileUpdateComponent.jsx b/frontend/src/components/ProfileUpdateComponent.jsx
index 74da41f..627ba9e 100644
--- a/frontend/src/components/ProfileUpdateComponent.jsx
+++ b/frontend/src/components/ProfileUpdateComponent.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef } from "react";
 import { ApiUpdateUserProfile } from "../api/UserProfileApi";
 
 function ProfileUpdateComponent() {
@@ -15,7 +15,7 @@ function ProfileUpdateComponent() {
     }
   };
 
-  const handleFileChange = e => {
+  const handleFileChange = (e) => {
     const selectedFile = e.target.files[0];
     if (selectedFile) {
       setFile(selectedFile);
@@ -66,7 +66,7 @@ function ProfileUpdateComponent() {
           placeholder="Enter your username"
           className="input w-full"
           value={username}
-          onChange={e => setUsername(e.target.value)}
+          onChange={(e) => setUsername(e.target.value)}
         />
       </div>
 
@@ -78,7 +78,7 @@ function ProfileUpdateComponent() {
           placeholder="Enter your full name"
           className="input w-full"
           value={fullName}
-          onChange={e => setFullName(e.target.value)}
+          onChange={(e) => setFullName(e.target.value)}
         />
       </div>
 
@@ -89,7 +89,7 @@ function ProfileUpdateComponent() {
           placeholder="Tell us about yourself"
           className="textarea w-full h-32"
           value={about}
-          onChange={e => setAbout(e.target.value)}
+          onChange={(e) => setAbout(e.target.value)}
         />
       </div>
 
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 6bcc8dc..0139867 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
 import { useCallback } from "react";
@@ -6,16 +6,13 @@ import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
 import { FcGoogle } from "react-icons/fc";
 import { useGoogleLogin } from "@react-oauth/google";
-
+import { useAuth } from "src/hooks/AuthHooks";
 
 function Copyright(props) {
   return (
     <div className="text-center text-sm text-gray-500" {...props}>
       {"Copyright © "}
-      <a
-        href="https://github.com/TurTaskProject/TurTaskWeb"
-        className="text-blue-500 hover:underline"
-      >
+      <a href="https://github.com/TurTaskProject/TurTaskWeb" className="text-blue-500 hover:underline">
         TurTask
       </a>{" "}
       {new Date().getFullYear()}
@@ -26,6 +23,7 @@ function Copyright(props) {
 
 export default function SignUp() {
   const Navigate = useNavigate();
+  const { setIsAuthenticated } = useAuth;
 
   const [formData, setFormData] = useState({
     email: "",
@@ -91,10 +89,7 @@ export default function SignUp() {
   });
 
   return (
-    <div
-      data-theme="night"
-      className="h-screen flex items-center justify-center"
-    >
+    <div data-theme="night" className="h-screen flex items-center justify-center">
       {/* Particles Container */}
       <div style={{ width: "0%", height: "100vh" }}>
         <Particles
@@ -179,13 +174,7 @@ export default function SignUp() {
                 Email<span className="text-red-500 text-bold">*</span>
               </p>
             </label>
-            <input
-              className="input"
-              type="email"
-              id="email"
-              placeholder="Enter your email"
-              onChange={handleChange}
-            />
+            <input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
           </div>
           {/* Username Input */}
           <div className="form-control">
@@ -225,17 +214,13 @@ export default function SignUp() {
           </button>
           <div className="divider">OR</div>
           {/* Login with Google Button */}
-          <button
-            className="btn btn-outline btn-secondary w-full "
-            onClick={() => googleLoginImplicit()}
-          >
-            <FcGoogle className="rounded-full bg-white"/>Login with Google
+          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
+            <FcGoogle className="rounded-full bg-white" />
+            Login with Google
           </button>
           {/* Already have an account? */}
           <div className="text-blue-500 flex justify-center text-sm">
-            <a href="login">
-              Already have an account?
-            </a>
+            <a href="login">Already have an account?</a>
           </div>
           <Copyright />
         </div>
diff --git a/frontend/src/components/profilePage.jsx b/frontend/src/components/profilePage.jsx
index 4b0d0b4..35c260e 100644
--- a/frontend/src/components/profilePage.jsx
+++ b/frontend/src/components/profilePage.jsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import ProfileUpdateComponent from "./ProfileUpdateComponent";
 
 function ProfileUpdatePage() {
@@ -47,7 +46,7 @@ function ProfileUpdatePage() {
             </div>
           </div>
           <div className="stat-desc py-2">3213/321312321 points</div>
-          <progress class="progress progress-info w-36" value="10" max="100"></progress>
+          <progress className="progress progress-info w-36" value="10" max="100"></progress>
         </div>
 
         <div className="stat">
@@ -75,10 +74,10 @@ function ProfileUpdatePage() {
       </div>
 
       <div className="card bg-base-100 shadow">
-        <div class="card-body">
-          <h2 class="card-title">About me</h2>
-          <div class="card-actions justify-end"></div>
-          <textarea class="textarea textarea-bordered textarea-lg w-full" disabled>
+        <div className="card-body">
+          <h2 className="card-title">About me</h2>
+          <div className="card-actions justify-end"></div>
+          <textarea className="textarea textarea-bordered textarea-lg w-full" disabled>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolores recusandae, officiis consequuntur
             nam, non ab commodi totam mollitia iusto nemo voluptatum error aliquam similique perspiciatis, eligendi
             nulla. Animi, sit?
@@ -89,31 +88,31 @@ function ProfileUpdatePage() {
       <div className="grid grid-cols-2 grid-rows-2 gap-4 my-2">
         <div className="col-span-full">
           <div className="card bg-base-100 shadow">
-            <div class="card-body">
-              <h2 class="card-title">Overall Statistics</h2>
-              <div class="card-actions justify-end"></div>
+            <div className="card-body">
+              <h2 className="card-title">Overall Statistics</h2>
+              <div className="card-actions justify-end"></div>
             </div>
           </div>
         </div>
         <div className="col-start-2 row-start-2">
           <div className="card bg-base-100 shadow">
-            <div class="card-body">
-              <h2 class="card-title">Achievements</h2>
-              <div class="card-actions justify-end"></div>
+            <div className="card-body">
+              <h2 className="card-title">Achievements</h2>
+              <div className="card-actions justify-end"></div>
             </div>
           </div>
         </div>
         <div className="col-start-1 row-start-2">
           <div className="card bg-base-100 shadow">
-            <div class="card-body">
-              <h2 class="card-title">Friends</h2>
-              <div class="card-actions justify-end"></div>
+            <div className="card-body">
+              <h2 className="card-title">Friends</h2>
+              <div className="card-actions justify-end"></div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="fixed bottom-4 right-4">
+      <div className="fixed bottom-4 right-4">
         <ul className="menu menu-horizontal bg-base-200 rounded-box">
           <li>
             <a onClick={() => document.getElementById("my_modal_4").showModal()}>
@@ -136,7 +135,7 @@ function ProfileUpdatePage() {
         <div className="modal-box w-11/12 max-w-5xl flex flex-col">
           <form method="dialog">
             <ProfileUpdateComponent />
-            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
           </form>
         </div>
       </dialog>
diff --git a/frontend/src/components/signup.jsx b/frontend/src/components/signup.jsx
index aba1642..e047627 100644
--- a/frontend/src/components/signup.jsx
+++ b/frontend/src/components/signup.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import axiosapi from "../api/axiosapi";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
@@ -7,7 +7,7 @@ import Container from "@material-ui/core/Container";
 import Button from "@material-ui/core/Button";
 import { makeStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   // Styles for various elements
   paper: {
     marginTop: theme.spacing(8),
@@ -38,7 +38,7 @@ const Signup = () => {
   const [error, setError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async e => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setIsSubmitting(true);
     setError(null);
@@ -53,7 +53,7 @@ const Signup = () => {
     }
   };
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
diff --git a/frontend/src/components/testAuth.jsx b/frontend/src/components/testAuth.jsx
index 1edf44a..f57ea49 100644
--- a/frontend/src/components/testAuth.jsx
+++ b/frontend/src/components/testAuth.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import axiosapi from "../api/AuthenticationApi";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
@@ -12,11 +12,11 @@ function TestAuth() {
     // Fetch the "hello" data from the server when the component mounts
     axiosapi
       .getGreeting()
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         setMessage(res.data.user);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setMessage("");
       });
@@ -32,14 +32,14 @@ function TestAuth() {
     <div>
       {message !== "" && (
         <div>
-          <h1 class="text-xl font-bold">Login! Hello!</h1>
+          <h1 className="text-xl font-bold">Login! Hello!</h1>
           <h2>{message}</h2>
           <Button variant="contained" onClick={logout}>
             Logout
           </Button>
         </div>
       )}
-      {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
+      {message === "" && <h1 className="text-xl font-bold">Need to sign in, No authentication found</h1>}
     </div>
   );
 }