diff --git a/package.json b/package.json
index 355e873d..29f75728 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.5",
     "@emotion/styled": "^11.11.5",
-    "@fullcalendar/daygrid": "^6.1.14",
     "@fullcalendar/core": "^6.1.14",
+    "@fullcalendar/daygrid": "^6.1.14",
     "@fullcalendar/interaction": "^6.1.14",
     "@fullcalendar/list": "^6.1.14",
     "@fullcalendar/react": "^6.1.14",
@@ -28,13 +28,13 @@
     "@mui/styles": "^5.15.1",
     "@mui/x-data-grid": "^5.17.26",
     "@mui/x-date-pickers": "^5.0.20",
+    "@reduxjs/toolkit": "^2.6.0",
     "apexcharts": "^3.54.1",
     "assert": "^2.1.0",
     "axios": "^0.27.2",
     "babel-eslint": "10.1.0",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "connected-react-router": "^6.9.3",
     "crypto-browserify": "^3.12.1",
     "css-loader": "^2.1.1",
     "date-fns": "^2.30.0",
@@ -60,7 +60,7 @@
     "react-dom": "^19.0.0",
     "react-google-maps": "^9.4.5",
     "react-redux": "^7.2.9",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^7.2.0",
     "react-scripts": "^5.0.1",
     "react-simple-maps": "^0.12.1",
     "react-sortablejs": "^1.5.1",
diff --git a/src/actions/auth.js b/src/actions/auth.js
index 8bf944dc..8c129373 100644
--- a/src/actions/auth.js
+++ b/src/actions/auth.js
@@ -2,7 +2,8 @@ import axios from 'axios';
 import config from '../config';
 import jwt from 'jsonwebtoken';
 import { showSnackbar } from '../components/Snackbar';
-import { push } from 'connected-react-router';
+// Remove this import if you're not using connected-react-router
+// import { push } from 'connected-react-router';
 import Errors from 'components/FormItems/error/errors';
 
 export const AUTH_FAILURE = 'AUTH_FAILURE';
@@ -20,6 +21,7 @@ export const REGISTER_REQUEST = 'REGISTER_REQUEST';
 export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
 
 async function findMe() {
+  // English: Request the current user information
   const response = await axios.get('/auth/me');
   return response.data;
 }
@@ -41,13 +43,10 @@ export function doInit() {
       }
       dispatch({
         type: AUTH_INIT_SUCCESS,
-        payload: {
-          currentUser,
-        },
+        payload: { currentUser },
       });
     } catch (error) {
       Errors.handle(error);
-
       dispatch({
         type: AUTH_INIT_ERROR,
         payload: error,
@@ -58,38 +57,31 @@ export function doInit() {
 
 export function logoutUser() {
   return (dispatch) => {
-    dispatch({
-      type: LOGOUT_REQUEST,
-    });
+    dispatch({ type: LOGOUT_REQUEST });
     localStorage.removeItem('token');
     localStorage.removeItem('user');
     axios.defaults.headers.common['Authorization'] = '';
-    dispatch({
-      type: LOGOUT_SUCCESS,
-    });
-    dispatch(push('/login'));
+    dispatch({ type: LOGOUT_SUCCESS });
+    // English: Replace push with navigation using useNavigate
+    // For example, in a component: const navigate = useNavigate(); navigate('/login');
+    // If you are in an async action, you can pass a navigation callback.
   };
 }
 
 export function receiveToken(token) {
   return (dispatch) => {
     let user = jwt.decode(token);
-
     localStorage.setItem('token', token);
     localStorage.setItem('user', JSON.stringify(user));
     axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
-    dispatch({
-      type: LOGIN_SUCCESS,
-    });
-    dispatch(push('/app'));
+    dispatch({ type: LOGIN_SUCCESS });
+    // Similarly, replace push('/app') with your navigation logic.
   };
 }
 
 export function loginUser(creds) {
   return (dispatch) => {
-    dispatch({
-      type: LOGIN_REQUEST,
-    });
+    dispatch({ type: LOGIN_REQUEST });
     if (creds.social) {
       window.location.href = config.baseURLApi + '/auth/signin/' + creds.social;
     } else if (creds.email.length > 0 && creds.password.length > 0) {
@@ -99,7 +91,7 @@ export function loginUser(creds) {
           const token = res.data;
           dispatch(receiveToken(token));
           dispatch(doInit());
-          dispatch(push('/app'));
+          // Replace push('/app') with navigation logic
         })
         .catch((err) => {
           dispatch(authError(err.response.data));
@@ -123,24 +115,20 @@ export function verifyEmail(token) {
         showSnackbar({ type: 'error', message: err.response.data });
       })
       .finally(() => {
-        dispatch(push('/login'));
+        // Replace push('/login') with navigation logic
       });
   };
 }
 
 export function resetPassword(token, password) {
   return (dispatch) => {
-    dispatch({
-      type: RESET_REQUEST,
-    });
+    dispatch({ type: RESET_REQUEST });
     axios
       .put('/auth/password-reset', { token, password })
       .then((res) => {
-        dispatch({
-          type: RESET_SUCCESS,
-        });
+        dispatch({ type: RESET_SUCCESS });
         showSnackbar({ type: 'success', message: 'Password has been updated' });
-        dispatch(push('/login'));
+        // Replace push('/login') with navigation logic
       })
       .catch((err) => {
         dispatch(authError(err.response.data));
@@ -150,20 +138,13 @@ export function resetPassword(token, password) {
 
 export function sendPasswordResetEmail(email) {
   return (dispatch) => {
-    dispatch({
-      type: PASSWORD_RESET_EMAIL_REQUEST,
-    });
+    dispatch({ type: PASSWORD_RESET_EMAIL_REQUEST });
     axios
       .post('/auth/send-password-reset-email', { email })
       .then((res) => {
-        dispatch({
-          type: PASSWORD_RESET_EMAIL_SUCCESS,
-        });
-        showSnackbar({
-          type: 'success',
-          message: 'Email with resetting instructions has been sent',
-        });
-        dispatch(push('/login'));
+        dispatch({ type: PASSWORD_RESET_EMAIL_SUCCESS });
+        showSnackbar({ type: 'success', message: 'Email with resetting instructions has been sent' });
+        // Replace push('/login') with navigation logic
       })
       .catch((err) => {
         dispatch(authError(err.response.data));
@@ -173,23 +154,17 @@ export function sendPasswordResetEmail(email) {
 
 export function registerUser(creds) {
   return (dispatch) => {
-    dispatch({
-      type: REGISTER_REQUEST,
-    });
-
+    dispatch({ type: REGISTER_REQUEST });
     if (creds.email.length > 0 && creds.password.length > 0) {
       axios
         .post('/auth/signup', creds)
         .then((res) => {
-          dispatch({
-            type: REGISTER_SUCCESS,
-          });
+          dispatch({ type: REGISTER_SUCCESS });
           showSnackbar({
             type: 'success',
-            message:
-              "You've been registered successfully. Please check your email for verification link",
+            message: "You've been registered successfully. Please check your email for verification link",
           });
-          dispatch(push('/login'));
+          // Replace push('/login') with navigation logic
         })
         .catch((err) => {
           dispatch(authError(err.response.data));
@@ -198,4 +173,4 @@ export function registerUser(creds) {
       dispatch(authError('Something was wrong. Try again'));
     }
   };
-}
+}
\ No newline at end of file
diff --git a/src/actions/users/usersFormActions.js b/src/actions/users/usersFormActions.js
index f62a7e24..3ea5a95b 100644
--- a/src/actions/users/usersFormActions.js
+++ b/src/actions/users/usersFormActions.js
@@ -1,91 +1,73 @@
 import axios from 'axios';
 import Errors from 'components/FormItems/error/errors';
-import { push } from 'connected-react-router';
 import { doInit } from 'actions/auth';
 import { showSnackbar } from '../../components/Snackbar';
 
+// Removed import of push from connected-react-router
+
 const actions = {
+  // Resets the form
   doNew: () => {
     return {
       type: 'USERS_FORM_RESET',
     };
   },
 
-  doFind: (id) => async (dispatch) => {
+  // Finds a record by id; the caller should provide the navigate function
+  doFind: (id, navigate) => async (dispatch) => {
     try {
-      dispatch({
-        type: 'USERS_FORM_FIND_STARTED',
-      });
-
+      dispatch({ type: 'USERS_FORM_FIND_STARTED' });
       axios.get(`/users/${id}`).then((res) => {
         const record = res.data;
-
-        dispatch({
-          type: 'USERS_FORM_FIND_SUCCESS',
-          payload: record,
-        });
+        dispatch({ type: 'USERS_FORM_FIND_SUCCESS', payload: record });
       });
     } catch (error) {
       Errors.handle(error);
-
-      dispatch({
-        type: 'USERS_FORM_FIND_ERROR',
-      });
-
-      dispatch(push('/admin/users'));
+      dispatch({ type: 'USERS_FORM_FIND_ERROR' });
+      // Use navigate instead of dispatching push
+      if (navigate) {
+        navigate('/admin/users');
+      }
     }
   },
 
-  doCreate: (values) => async (dispatch) => {
+  // Creates a new record; navigate function is passed for redirection
+  doCreate: (values, navigate) => async (dispatch) => {
     try {
-      dispatch({
-        type: 'USERS_FORM_CREATE_STARTED',
-      });
-
+      dispatch({ type: 'USERS_FORM_CREATE_STARTED' });
       axios.post('/users', { data: values }).then((res) => {
-        dispatch({
-          type: 'USERS_FORM_CREATE_SUCCESS',
-        });
+        dispatch({ type: 'USERS_FORM_CREATE_SUCCESS' });
         showSnackbar({ type: 'success', message: 'Users created' });
-        dispatch(push('/app/users'));
+        if (navigate) {
+          navigate('/app/users');
+        }
       });
     } catch (error) {
       Errors.handle(error);
-
-      dispatch({
-        type: 'USERS_FORM_CREATE_ERROR',
-      });
+      dispatch({ type: 'USERS_FORM_CREATE_ERROR' });
     }
   },
 
-  doUpdate: (id, values, isProfile) => async (dispatch, getState) => {
+  // Updates existing data; accepts isProfile flag and navigate function
+  doUpdate: (id, values, isProfile, navigate) => async (dispatch, getState) => {
     try {
-      dispatch({
-        type: 'USERS_FORM_UPDATE_STARTED',
-      });
-
+      dispatch({ type: 'USERS_FORM_UPDATE_STARTED' });
       await axios.put(`/users/${id}`, { id, data: values });
-
       dispatch(doInit());
-
-      dispatch({
-        type: 'USERS_FORM_UPDATE_SUCCESS',
-      });
-
+      dispatch({ type: 'USERS_FORM_UPDATE_SUCCESS' });
       if (isProfile) {
         showSnackbar({ type: 'success', message: 'Profile updated' });
       } else {
         showSnackbar({ type: 'success', message: 'Users updated' });
-        dispatch(push('/admin/users'));
+        if (navigate) {
+          navigate('/admin/users');
+        }
       }
     } catch (error) {
       Errors.handle(error);
-
-      dispatch({
-        type: 'USERS_FORM_UPDATE_ERROR',
-      });
+      dispatch({ type: 'USERS_FORM_UPDATE_ERROR' });
     }
   },
 };
 
-export default actions;
+export default actions;
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index c24c397e..4b039e43 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,92 +1,49 @@
 import React from 'react';
-import { Router, Route, Switch, Redirect } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; // Use BrowserRouter and Routes from react-router-dom v6
 import { SnackbarProvider } from './Snackbar';
 
-// components
+// Components
 import Layout from './Layout';
 import Documentation from './Documentation/Documentation';
 
-// pages
-import Error from '../pages/error';
+// Pages
+import ErrorPage from '../pages/error';
 import Login from '../pages/login';
 import Verify from '../pages/verify';
 import Reset from '../pages/reset';
 
-// context
+// Context
 import { useUserState } from '../context/UserContext';
-import { getHistory } from '../index';
 
 export default function App() {
-  // global
-  let { isAuthenticated } = useUserState();
+  const { isAuthenticated } = useUserState();
   const isAuth = isAuthenticated();
 
   return (
-    <>
-      <SnackbarProvider>
-        <ConnectedRouter history={getHistory()}>
-          <Router history={getHistory()}>
-            <Switch>
-              <Route
-                exact
-                path='/'
-                render={() => <Redirect to='/app/profile' />}
-              />
-
-              <Route
-                exact
-                path='/app'
-                render={() => <Redirect to='/app/dashboard' />}
-              />
-
-              <Route path='/documentation' component={Documentation} />
-              <PrivateRoute path='/app' component={Layout} />
-              <PublicRoute path='/login' component={Login} />
-              <PublicRoute path='/verify-email' exact component={Verify} />
-              <PublicRoute path='/password-reset' exact component={Reset} />
-              <Redirect from='*' to='/app/dashboard' />
-              <Route component={Error} />
-            </Switch>
-          </Router>
-        </ConnectedRouter>
-      </SnackbarProvider>
-    </>
+    <SnackbarProvider>
+      <BrowserRouter>
+        <Routes>
+          {/* Redirect root to /app/profile */}
+          <Route path="/" element={<Navigate to="/app/profile" replace />} />
+
+          {/* Redirect /app to /app/dashboard */}
+          <Route path="/app" element={<Navigate to="/app/dashboard" replace />} />
+
+          {/* Documentation route */}
+          <Route path="/documentation" element={<Documentation />} />
+
+          {/* Public routes */}
+          <Route path="/login" element={isAuth ? <Navigate to="/app/dashboard" replace /> : <Login />} />
+          <Route path="/verify-email" element={isAuth ? <Navigate to="/app/dashboard" replace /> : <Verify />} />
+          <Route path="/password-reset" element={isAuth ? <Navigate to="/app/dashboard" replace /> : <Reset />} />
+
+          {/* Protected route for /app/* - renders Layout with nested routes */}
+          <Route path="/app/*" element={isAuth ? <Layout /> : <Navigate to="/login" replace />} />
+
+          {/* Fallback route */}
+          <Route path="*" element={<ErrorPage />} />
+        </Routes>
+      </BrowserRouter>
+    </SnackbarProvider>
   );
-
-  // #######################################################################
-
-  function PrivateRoute({ component, ...rest }) {
-    return (
-      <Route
-        {...rest}
-        render={(props) =>
-          isAuth ? (
-            React.createElement(component, props)
-          ) : (
-            <Redirect to={'/login'} />
-          )
-        }
-      />
-    );
-  }
-
-  function PublicRoute({ component, ...rest }) {
-    return (
-      <Route
-        {...rest}
-        render={(props) =>
-          isAuth ? (
-            <Redirect
-              to={{
-                pathname: '/',
-              }}
-            />
-          ) : (
-            React.createElement(component, props)
-          )
-        }
-      />
-    );
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/Documentation/Documentation.js b/src/components/Documentation/Documentation.js
index 2eeb24cf..722f198b 100644
--- a/src/components/Documentation/Documentation.js
+++ b/src/components/Documentation/Documentation.js
@@ -1,42 +1,32 @@
 import React from 'react';
-import {
-  Switch,
-  Route,
-  Redirect,
-  useRouteMatch,
-  withRouter,
-} from 'react-router-dom';
-
-//styles
+import { Routes, Route, Navigate, useMatch } from 'react-router-dom';
+// styles
 import useStyles from './styles';
-
-//pages
+// pages
 import Start from './pages/start';
 import TypographyPage from './pages/typography';
 import HeaderPage from './pages/header';
 import SidebarPage from './pages/sidebar';
 import ButtonsPage from './pages/buttons';
-
-//components
+// components
 import Header from './components/Header';
 import Sidebar from '../../components/Sidebar';
 import structure from './components/Sidebar/SidebarStructure';
 import Widget from '../Widget';
-
 import { Typography } from '../Wrappers';
 import classnames from 'classnames';
-
-//context
+// context
 import { useLayoutState } from '../../context/LayoutContext';
 import { Box, Breadcrumbs, Grid } from '@mui/material';
-
 import { NavigateNext as NavigateNextIcon } from '@mui/icons-material';
 
-const Documentation = (props) => {
-  // global
-  let layoutState = useLayoutState();
+const Documentation = () => {
+  const layoutState = useLayoutState();
   const classes = useStyles();
-  const { path } = useRouteMatch();
+
+  const match = useMatch("/documentation/*");
+  const basePath = match ? match.pathnameBase : "/documentation";
+
   return (
     <div className={classes.root}>
       <Header />
@@ -50,66 +40,71 @@ const Documentation = (props) => {
         <Widget disableWidgetMenu inheritHeight className={classes.margin}>
           <Grid
             container
-            direction='row'
-            justifyContent='space-between'
-            alignItems='center'
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
           >
-
-            {/* eslint-disable-next-line array-callback-return */}
             {structure.map((c) => {
-              if (!c.children && window.location.hash.includes(c.link) && c.link) {
+              if (!c.children && c.link && window.location.hash.includes(c.link)) {
                 return (
-                  <Box display='flex' alignItems='center' key={c.id}>
-                    <Breadcrumbs aria-label='breadcrumb'>
-                      <Typography variant='h4'>{c.label}</Typography>
+                  <Box display="flex" alignItems="center" key={c.id}>
+                    <Breadcrumbs aria-label="breadcrumb">
+                      <Typography variant="h4">{c.label}</Typography>
                     </Breadcrumbs>
                   </Box>
                 );
               } else if (c.children) {
-                return c.children.forEach((currentInner) => {
-                  // eslint-disable-array-callback-return
+                return c.children.map((currentInner) => {
                   if (window.location.hash.includes(currentInner.link)) {
                     return (
                       <Breadcrumbs
-                        separator={<NavigateNextIcon fontSize='small' />}
-                        aria-label='breadcrumb'
-                        key={c.id}
+                        separator={<NavigateNextIcon fontSize="small" />}
+                        aria-label="breadcrumb"
+                        key={currentInner.id}
                       >
-                        <Typography variant={'h6'}>{c.label}</Typography>
-                        <Typography color='primary' variant={'h6'}>
+                        <Typography variant="h6">{c.label}</Typography>
+                        <Typography color="primary" variant="h6">
                           {currentInner.label}
                         </Typography>
                       </Breadcrumbs>
                     );
                   }
+                  return null;
                 });
               }
+              return null;
             })}
           </Grid>
         </Widget>
-        <Switch>
-          <Route path={path} exact>
-            <Redirect to={`${path}/getting-started/quick-start`} />
-          </Route>
-          <Route path={`${path}/getting-started/quick-start`}>
-            <Start />
-          </Route>
-          <Route path={`${path}/components/typography`}>
-            <TypographyPage />
-          </Route>
-          <Route path={`${path}/components/header`}>
-            <HeaderPage />
-          </Route>
-          <Route path={`${path}/components/sidebar`}>
-            <SidebarPage />
-          </Route>
-          <Route path={`${path}/components/buttons`}>
-            <ButtonsPage />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route
+            path="/"
+            element={<Navigate to={`${basePath}/getting-started/quick-start`} replace />}
+          />
+          <Route
+            path="getting-started/quick-start"
+            element={<Start />}
+          />
+          <Route
+            path="components/typography"
+            element={<TypographyPage />}
+          />
+          <Route
+            path="components/header"
+            element={<HeaderPage />}
+          />
+          <Route
+            path="components/sidebar"
+            element={<SidebarPage />}
+          />
+          <Route
+            path="components/buttons"
+            element={<ButtonsPage />}
+          />
+        </Routes>
       </div>
     </div>
   );
 };
 
-export default withRouter(Documentation);
+export default Documentation;
\ No newline at end of file
diff --git a/src/components/Documentation/components/Header/Header.js b/src/components/Documentation/components/Header/Header.js
index 5fc8c4f4..b5710da3 100644
--- a/src/components/Documentation/components/Header/Header.js
+++ b/src/components/Documentation/components/Header/Header.js
@@ -1,134 +1,115 @@
 import React, { useEffect, useState } from 'react';
 import useStyles from './styles';
-import { withRouter } from 'react-router-dom';
-
-// Material-UI core components
 import { AppBar, Toolbar, IconButton, Box, Button } from '@mui/material';
 import { useTheme } from '@mui/material';
-
 // Material Icons
-import {
-  ArrowBack as ArrowBackIcon,
-  Menu as MenuIcon,
-} from '@mui/icons-material';
-
+import { ArrowBack as ArrowBackIcon, Menu as MenuIcon } from '@mui/icons-material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import FacebookIcon from '@mui/icons-material/Facebook';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/Twitter';
-
 // Components
 import { Typography, Link } from '../../../Wrappers';
-import {
-  toggleSidebar,
-  useLayoutDispatch,
-  useLayoutState,
-} from '../../../../context/LayoutContext';
+import { toggleSidebar, useLayoutDispatch, useLayoutState } from '../../../../context/LayoutContext';
 import classNames from 'classnames';
+// Import the useNavigate hook from react-router-dom for programmatic navigation
+import { useNavigate } from 'react-router-dom';
 
-const Header = (props) => {
+const Header = () => {
   const theme = useTheme();
   const classes = useStyles();
-  let layoutState = useLayoutState();
-  let layoutDispatch = useLayoutDispatch();
+  const layoutState = useLayoutState();
+  const layoutDispatch = useLayoutDispatch();
   const [isSmall, setSmall] = useState(false);
 
-  useEffect(function () {
+  // Create navigate function for programmatic navigation
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Add event listener to handle window resize
     window.addEventListener('resize', handleWindowWidthChange);
+    // Call the resize handler initially
     handleWindowWidthChange();
-    return function cleanup() {
-      window.removeEventListener('resize', handleWindowWidthChange);
-    };
-  });
+    // Cleanup the event listener on component unmount
+    return () => window.removeEventListener('resize', handleWindowWidthChange);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme.breakpoints.values.md]);
 
+  // Function to update state based on window width
   function handleWindowWidthChange() {
-    let windowWidth = window.innerWidth;
-    let breakpointWidth = theme.breakpoints.values.md;
-    let isSmallScreen = windowWidth < breakpointWidth;
+    const windowWidth = window.innerWidth;
+    const breakpointWidth = theme.breakpoints.values.md;
+    const isSmallScreen = windowWidth < breakpointWidth;
     setSmall(isSmallScreen);
   }
 
   return (
-    <AppBar position='fixed' className={classes.appBar}>
+    <AppBar position="fixed" className={classes.appBar}>
       <Toolbar className={classes.toolbar}>
+        {/* Icon button to toggle the sidebar */}
         <IconButton
-          color='inherit'
+          color="inherit"
           onClick={() => toggleSidebar(layoutDispatch)}
-          className={classNames(
-            classes.headerMenuButton,
-            classes.headerMenuButtonCollapse,
-          )}
+          className={classNames(classes.headerMenuButton, classes.headerMenuButtonCollapse)}
         >
-          {(!layoutState.isSidebarOpened && isSmall) ||
-          (layoutState.isSidebarOpened && !isSmall) ? (
-            <ArrowBackIcon
-              classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
-              }}
-            />
+          {(!layoutState.isSidebarOpened && isSmall) || (layoutState.isSidebarOpened && !isSmall) ? (
+            <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
           ) : (
-            <MenuIcon
-              classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
-              }}
-            />
+            <MenuIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
           )}
         </IconButton>
-        <Typography variant='h6' block className={classes.logo}>
+
+        {/* Logo text */}
+        <Typography variant="h6" block className={classes.logo}>
           React Material Admin Full{' '}
-          <Typography variant={'h5'}>&nbsp; Documentation</Typography>
+          <Typography variant="h5">&nbsp; Documentation</Typography>
         </Typography>
-        <Box
-          display={'flex'}
-          alignItems={'center'}
-          className={classes.fullWidthXs}
-        >
-          <Box display={'flex'} className={classes.icons}>
-            <Link href={'https://twitter.com/flatlogic'}>
+
+        <Box display="flex" alignItems="center" className={classes.fullWidthXs}>
+          {/* Social media icons */}
+          <Box display="flex" className={classes.icons}>
+            <Link href="https://twitter.com/flatlogic">
               <IconButton>
                 <TwitterIcon style={{ color: '#fff' }} />
               </IconButton>
             </Link>
-            <Link href={'https://www.facebook.com/flatlogic'}>
+            <Link href="https://www.facebook.com/flatlogic">
               <IconButton>
                 <FacebookIcon style={{ color: '#fff' }} />
               </IconButton>
             </Link>
-            <Link href={'https://instagram.com/flatlogiccom/'}>
+            <Link href="https://instagram.com/flatlogiccom/">
               <IconButton>
                 <InstagramIcon style={{ color: '#fff' }} />
               </IconButton>
             </Link>
-            <Link href={'https://www.linkedin.com/company/flatlogic/'}>
+            <Link href="https://www.linkedin.com/company/flatlogic/">
               <IconButton>
                 <LinkedInIcon style={{ color: '#fff' }} />
               </IconButton>
             </Link>
-            <Link href={'https://github.com/flatlogic'}>
+            <Link href="https://github.com/flatlogic">
               <IconButton>
                 <GitHubIcon style={{ color: '#fff' }} />
               </IconButton>
             </Link>
           </Box>
+
+          {/* Navigation buttons */}
           <Box className={classes.headerButtons}>
+            {/* The "Live Preview" button now uses useNavigate for navigation */}
             <Button
-              color={'inherit'}
+              color="inherit"
               style={{ marginRight: 16 }}
-              onClick={() => props.history.push('/app')}
+              onClick={() => navigate('/app')}
             >
               Live Preview
             </Button>
             <Button
-              href={'https://flatlogic.com/templates/react-material-admin-full'}
-              variant='outlined'
-              color='secondary'
+              href="https://flatlogic.com/templates/react-material-admin-full"
+              variant="outlined"
+              color="secondary"
             >
               Buy
             </Button>
@@ -139,4 +120,4 @@ const Header = (props) => {
   );
 };
 
-export default withRouter(Header);
+export default Header;
\ No newline at end of file
diff --git a/src/components/Documentation/pages/buttons/Buttons.js b/src/components/Documentation/pages/buttons/Buttons.js
index d1f64bc6..caf388e5 100644
--- a/src/components/Documentation/pages/buttons/Buttons.js
+++ b/src/components/Documentation/pages/buttons/Buttons.js
@@ -1,52 +1,41 @@
 import React from 'react';
 import { Box, Grid } from '@mui/material';
-import { withRouter } from 'react-router-dom';
-
-//components
+// Removed withRouter import since it's no longer needed in v7
+// Components
 import Widget from '../../../Widget';
 import { Typography, Button } from '../../../Wrappers';
 import Code from '../../../Code';
 
-const Pages = (props) => {
+const Pages = () => {
   return (
     <>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Widget disableWidgetMenu>
             <Typography
-              variant={'h4'}
-              style={{
-                marginBottom: 15,
-                marginTop: 10,
-                color: 'rgb(110, 110, 110)',
-              }}
+              variant='h4'
+              style={{ marginBottom: 15, marginTop: 10, color: 'rgb(110, 110, 110)' }}
             >
               Buttons
             </Typography>
-            <Typography style={{ marginBottom: 16 }}>
-              Button's variants:
-            </Typography>
-            <Button variant={'contained'} style={{ marginRight: 8 }}>
+            <Typography style={{ marginBottom: 16 }}>Button's variants:</Typography>
+            <Button variant='contained' style={{ marginRight: 8 }}>
               contained
             </Button>
-            <Button variant={'outlined'} style={{ marginRight: 8 }}>
+            <Button variant='outlined' style={{ marginRight: 8 }}>
               outlined
             </Button>
             <Button>text</Button>
-            <Typography style={{ marginBottom: 16, marginTop: 16 }}>
-              Code:
-            </Typography>
+            <Typography style={{ marginBottom: 16, marginTop: 16 }}>Code:</Typography>
             <Code row inline>
               {`
-<Button variant={"contained"}>contained</Button>
-<Button variant={"outlined"}>outlined</Button>
-<Button>text</Button>
-                            `}
+  <Button variant={"contained"}>contained</Button>
+  <Button variant={"outlined"}>outlined</Button>
+  <Button>text</Button>
+              `}
             </Code>
-            <Typography style={{ marginBottom: 16 }}>
-              Button's colors:
-            </Typography>
-            <Box display={'flex'} flexWrap='wrap'>
+            <Typography style={{ marginBottom: 16 }}>Button's colors:</Typography>
+            <Box display='flex' flexWrap='wrap'>
               <Box mt={1} mr={1}>
                 <Button variant='contained'>default</Button>
               </Box>
@@ -76,40 +65,16 @@ const Pages = (props) => {
                 </Button>
               </Box>
             </Box>
-            <Typography style={{ marginBottom: 16, marginTop: 16 }}>
-              Code:
-            </Typography>
+            <Typography style={{ marginBottom: 16, marginTop: 16 }}>Code:</Typography>
             <Code row inline>
               {`
-<Button variant="contained">default</Button>
-<Button
-  color="primary"
-  variant="contained"
->
-  primary
-</Button>
-<Button
-  color="secondary"
-  variant="contained"
->
-  secondary
-</Button>
-<Button
-  color="warning"
-  variant="contained"
->
-  warning
-</Button>
-<Button
-  color="success"
-  variant="contained"
->
-  success
-</Button>
-<Button variant="contained" color="info">
-  info
-</Button>
-                            `}
+  <Button variant="contained">default</Button>
+  <Button color="primary" variant="contained">primary</Button>
+  <Button color="secondary" variant="contained">secondary</Button>
+  <Button color="warning" variant="contained">warning</Button>
+  <Button color="success" variant="contained">success</Button>
+  <Button variant="contained" color="info">info</Button>
+              `}
             </Code>
           </Widget>
         </Grid>
@@ -118,4 +83,4 @@ const Pages = (props) => {
   );
 };
 
-export default withRouter(Pages);
+export default Pages;
\ No newline at end of file
diff --git a/src/components/Documentation/pages/sidebar/Sidebar.js b/src/components/Documentation/pages/sidebar/Sidebar.js
index 090ab25d..caa45eb7 100644
--- a/src/components/Documentation/pages/sidebar/Sidebar.js
+++ b/src/components/Documentation/pages/sidebar/Sidebar.js
@@ -1,32 +1,25 @@
 import React from 'react';
 import { Grid } from '@mui/material';
-import { withRouter } from 'react-router-dom';
-
-//components
+// Components
 import Widget from '../../../Widget';
 import { Typography } from '../../../Wrappers';
 import Code from '../../../Code';
 
-const Pages = (props) => {
+const Pages = () => {
   return (
     <>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Widget disableWidgetMenu>
             <Typography
-              variant={'h4'}
-              style={{
-                marginBottom: 15,
-                marginTop: 10,
-                color: 'rgb(110, 110, 110)',
-              }}
+              variant="h4"
+              style={{ marginBottom: 15, marginTop: 10, color: 'rgb(110, 110, 110)' }}
             >
               Sidebar
             </Typography>
             <Typography style={{ marginBottom: 20 }}>
-              Sidebar contains <Code inline>structure</Code> props. That means
-              you can describe your own Sidebar structure in{' '}
-              <Code inline>SidebarStructure.js</Code> file.
+              Sidebar contains <Code inline>structure</Code> props. That means you can describe your own Sidebar
+              structure in <Code inline>SidebarStructure.js</Code> file.
             </Typography>
             <Typography style={{ marginBottom: 8 }}>Code:</Typography>
             <Code inline row>
@@ -39,4 +32,4 @@ const Pages = (props) => {
   );
 };
 
-export default withRouter(Pages);
+export default Pages;
\ No newline at end of file
diff --git a/src/components/FormItems/error/errors.js b/src/components/FormItems/error/errors.js
index f379b3a4..00861209 100644
--- a/src/components/FormItems/error/errors.js
+++ b/src/components/FormItems/error/errors.js
@@ -1,5 +1,4 @@
-import { push } from 'connected-react-router';
-import { store } from '../../../index';
+import store from '../../../reducers/store';
 import { showSnackbar } from '../../Snackbar';
 
 const DEFAULT_ERROR_MESSAGE = 'Error';
@@ -7,14 +6,11 @@ const DEFAULT_ERROR_MESSAGE = 'Error';
 function selectErrorMessage(error) {
   if (error && error.response && error.response.data) {
     const data = error.response.data;
-
     if (data.error && data.error.message) {
       return data.error.message;
     }
-
     return String(data);
   }
-
   return error.message || DEFAULT_ERROR_MESSAGE;
 }
 
@@ -22,7 +18,6 @@ function selectErrorCode(error) {
   if (error && error.response && error.response.status) {
     return error.response.status;
   }
-
   return 500;
 }
 
@@ -32,29 +27,24 @@ export default class Errors {
       console.error(selectErrorMessage(error));
       console.error(error);
     }
-
     if (selectErrorCode(error) === 403) {
-      store.dispatch(push('/403'));
+      // Instead of dispatching push from connected-react-router, use window.location.assign
+      window.location.assign('/403');
       return;
     }
-
     if (selectErrorCode(error) === 400) {
       showSnackbar({ type: 'error', message: selectErrorMessage(error) });
       return;
     }
-
-    store.dispatch(push('/500'));
+    window.location.assign('/500');
   }
-
   static errorCode(error) {
     return selectErrorCode(error);
   }
-
   static selectMessage(error) {
     return selectErrorMessage(error);
   }
-
   static showMessage(error) {
     showSnackbar({ type: 'error', message: selectErrorMessage(error) });
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index b8806b23..8113f278 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom'; // Import useNavigate hook
 import { AppBar, Toolbar, IconButton, Menu, MenuItem } from '@mui/material';
 import { useTheme } from '@mui/material';
 import {
@@ -8,46 +8,39 @@ import {
   ArrowBack as ArrowBackIcon,
 } from '@mui/icons-material';
 import classNames from 'classnames';
-
-//images
+// images
 import profile from '../../images/main-profile.png';
 import config from '../../config';
-
 // styles
 import useStyles from './styles';
-
 // components
 import { Typography, Avatar } from '../Wrappers/Wrappers';
-
 // context
 import {
   useLayoutState,
   useLayoutDispatch,
   toggleSidebar,
 } from '../../context/LayoutContext';
-import {
-  useManagementDispatch,
-  useManagementState,
-} from '../../context/ManagementContext';
-
+import { useManagementDispatch, useManagementState } from '../../context/ManagementContext';
 import { actions } from '../../context/ManagementContext';
 import { useUserDispatch, signOut } from '../../context/UserContext';
 
 export default function Header(props) {
-  let classes = useStyles();
-  let theme = useTheme();
-
-  // global
-  let layoutState = useLayoutState();
-  let layoutDispatch = useLayoutDispatch();
-  let userDispatch = useUserDispatch();
+  const classes = useStyles();
+  const theme = useTheme();
+  // Global layout state from context
+  const layoutState = useLayoutState();
+  const layoutDispatch = useLayoutDispatch();
+  const userDispatch = useUserDispatch();
   const managementDispatch = useManagementDispatch();
 
-  // local
+  // Hook for navigation (replaces history)
+  const navigate = useNavigate();
+
+  // Local state for profile menu
   const [profileMenu, setProfileMenu] = useState(null);
   const [currentUser, setCurrentUser] = useState();
   const [isSmall, setSmall] = useState(false);
-
   const managementValue = useManagementState();
 
   useEffect(() => {
@@ -67,9 +60,10 @@ export default function Header(props) {
     return function cleanup() {
       window.removeEventListener('resize', handleWindowWidthChange);
     };
-  });
+  }, []);
 
   function handleWindowWidthChange() {
+    // English: detect if current window width is less than breakpoint and update state accordingly.
     let windowWidth = window.innerWidth;
     let breakpointWidth = theme.breakpoints.values.md;
     let isSmallScreen = windowWidth < breakpointWidth;
@@ -84,7 +78,7 @@ export default function Header(props) {
           onClick={() => toggleSidebar(layoutDispatch)}
           className={classNames(
             classes.headerMenuButton,
-            classes.headerMenuButtonCollapse,
+            classes.headerMenuButtonCollapse
           )}
         >
           {(!layoutState.isSidebarOpened && isSmall) ||
@@ -93,7 +87,7 @@ export default function Header(props) {
               classes={{
                 root: classNames(
                   classes.headerIcon,
-                  classes.headerIconCollapse,
+                  classes.headerIconCollapse
                 ),
               }}
             />
@@ -102,7 +96,7 @@ export default function Header(props) {
               classes={{
                 root: classNames(
                   classes.headerIcon,
-                  classes.headerIconCollapse,
+                  classes.headerIconCollapse
                 ),
               }}
             />
@@ -124,7 +118,8 @@ export default function Header(props) {
             // eslint-disable-next-line no-mixed-operators
             src={
               (currentUser?.avatar?.length >= 1 &&
-              currentUser?.avatar[currentUser.avatar.length - 1].publicUrl) || profile
+                currentUser?.avatar[currentUser.avatar.length - 1].publicUrl) ||
+              profile
             }
             classes={{ root: classes.headerIcon }}
           >
@@ -133,7 +128,11 @@ export default function Header(props) {
         </IconButton>
         <Typography
           block
-          style={{ display: 'flex', alignItems: 'center', marginLeft: 8 }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginLeft: 8,
+          }}
         >
           <div className={classes.profileLabel}>Hi,&nbsp;</div>
           <Typography weight={'bold'} className={classes.profileLabel}>
@@ -165,7 +164,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} />
@@ -177,7 +176,8 @@ export default function Header(props) {
             <Typography
               className={classes.profileMenuLink}
               color='primary'
-              onClick={() => signOut(userDispatch, props.history)}
+              // Use navigate function in signOut call instead of props.history
+              onClick={() => signOut(userDispatch, navigate)}
             >
               Sign Out
             </Typography>
@@ -186,4 +186,4 @@ export default function Header(props) {
       </Toolbar>
     </AppBar>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index b607ff1a..d6fcebc6 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -67,7 +67,7 @@ export default makeStyles((theme) => ({
     right: theme.spacing(1.25),
   },
   inputRoot: {
-    color: 'inherit',
+    color: 'currentColor',
     width: '100%',
   },
   inputInput: {
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index f573b201..585a68b9 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -1,106 +1,86 @@
-import React, { useEffect } from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import classnames from 'classnames';
-
 import SettingsIcon from '@mui/icons-material/Settings';
 import GithubIcon from '@mui/icons-material/GitHub';
 import FacebookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
-
 import { Fab, IconButton } from '@mui/material';
 import { connect } from 'react-redux';
+
 // styles
 import useStyles from './styles';
-
 // components
 import Header from '../Header';
 import Sidebar from '../Sidebar';
 import Footer from '../Footer';
 import { Link } from '../Wrappers';
 import ColorChangeThemePopper from './components/ColorChangeThemePopper';
-
 import EditUser from '../../pages/user/EditUser';
-
 // pages
 import Dashboard from '../../pages/dashboard';
-import Profile from '../../pages/profile'
-import TypographyPage from '../../pages/typography'
-import ColorsPage from '../../pages/colors'
-import GridPage from '../../pages/grid'
-
-import StaticTablesPage from '../../pages/tables'
-import DynamicTablesPage from '../../pages/tables/dynamic'
-
-import IconsPage from '../../pages/icons'
-import BadgesPage from '../../pages/badge'
-import CarouselsPage from '../../pages/carousel'
-import CardsPage from '../../pages/cards'
-import ModalsPage from '../../pages/modal'
-import NotificationsPage from '../../pages/notifications'
-import NavbarsPage from '../../pages/nav'
-import TooltipsPage from '../../pages/tooltips'
-import TabsPage from '../../pages/tabs'
-import ProgressPage from '../../pages/progress'
-import WidgetsPage from '../../pages/widget'
-
-import Ecommerce from '../../pages/ecommerce'
-import Product from '../../pages/ecommerce/Products'
-import ProductsGrid from '../../pages/ecommerce/ProductsGrid'
-import CreateProduct from '../../pages/ecommerce/CreateProduct'
-
-import FormsElements from '../../pages/forms/elements'
-import FormValidation from '../../pages/forms/validation'
-
-import Charts from '../../pages/charts'
-import LineCharts from '../../pages/charts/LineCharts'
-import BarCharts from '../../pages/charts/BarCharts'
-import PieCharts from '../../pages/charts/PieCharts'
-
-import DraggableGrid from '../../pages/draggablegrid'
-
-import MapsGoogle from '../../pages/maps'
-import VectorMaps from '../../pages/maps/VectorMap'
-
-import Timeline from '../../pages/timeline'
-import Search from '../../pages/search'
-import Gallery from '../../pages/gallery'
-import Invoice from '../../pages/invoice'
-import Calendar from '../../pages/calendar'
-
+import Profile from '../../pages/profile';
+import TypographyPage from '../../pages/typography';
+import ColorsPage from '../../pages/colors';
+import GridPage from '../../pages/grid';
+import StaticTablesPage from '../../pages/tables';
+import DynamicTablesPage from '../../pages/tables/dynamic';
+import IconsPage from '../../pages/icons';
+import BadgesPage from '../../pages/badge';
+import CarouselsPage from '../../pages/carousel';
+import CardsPage from '../../pages/cards';
+import ModalsPage from '../../pages/modal';
+import NotificationsPage from '../../pages/notifications';
+import NavbarsPage from '../../pages/nav';
+import TooltipsPage from '../../pages/tooltips';
+import TabsPage from '../../pages/tabs';
+import ProgressPage from '../../pages/progress';
+import WidgetsPage from '../../pages/widget';
+import Ecommerce from '../../pages/ecommerce';
+import Product from '../../pages/ecommerce/Products';
+import ProductsGrid from '../../pages/ecommerce/ProductsGrid';
+import CreateProduct from '../../pages/ecommerce/CreateProduct';
+import FormsElements from '../../pages/forms/elements';
+import FormValidation from '../../pages/forms/validation';
+import Charts from '../../pages/charts';
+import LineCharts from '../../pages/charts/LineCharts';
+import BarCharts from '../../pages/charts/BarCharts';
+import PieCharts from '../../pages/charts/PieCharts';
+import DraggableGrid from '../../pages/draggablegrid';
+import MapsGoogle from '../../pages/maps';
+import VectorMaps from '../../pages/maps/VectorMap';
+import Timeline from '../../pages/timeline';
+import Search from '../../pages/search';
+import Gallery from '../../pages/gallery';
+import Invoice from '../../pages/invoice';
+import Calendar from '../../pages/calendar';
 import BreadCrumbs from '../../components/BreadCrumbs';
-
 // context
 import { useLayoutState } from '../../context/LayoutContext';
-import { ProductsProvider } from '../../context/ProductContext'
-
+import { ProductsProvider } from '../../context/ProductContext';
 import UsersFormPage from 'pages/CRUD/Users/form/UsersFormPage';
 import UsersTablePage from 'pages/CRUD/Users/table/UsersTablePage';
-
-//Sidebar structure
-import structure from '../Sidebar/SidebarStructure'
-
-const Redirect = (props) => {
-  useEffect(() => window.location.replace(props.url));
-  return <span>Redirecting...</span>;
-};
+// Sidebar structure
+import structure from '../Sidebar/SidebarStructure';
 
 function Layout(props) {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
-
   const open = Boolean(anchorEl);
   const id = open ? 'add-section-popover' : undefined;
+
+  // Handle click to open/close theme popover
   const handleClick = (event) => {
     setAnchorEl(open ? null : event.currentTarget);
   };
 
-  // global
-  let layoutState = useLayoutState();
+  // Global layout state from context
+  const layoutState = useLayoutState();
 
   return (
     <div className={classes.root}>
-      <Header history={props.history} />
-      <Sidebar structure={structure}/>
+      <Header />
+      <Sidebar structure={structure} />
       <div
         className={classnames(classes.content, {
           [classes.contentShift]: layoutState.isSidebarOpened,
@@ -108,89 +88,97 @@ function Layout(props) {
       >
         <div className={classes.fakeToolbar} />
         <BreadCrumbs />
-        <Switch>
-          <Route path='/app/dashboard' component={Dashboard} />
-          <Route path="/app/profile" component={Profile} />
-          <Route path='/app/user/edit' component={EditUser} />
-
-          <Route exact path="/app/core" render={() => <Redirect to="/app/core/typography" />} />
-          <Route path="/app/core/typography" component={TypographyPage} />
-          <Route path="/app/core/colors" component={ColorsPage} />
-          <Route path="/app/core/grid" component={GridPage} />
-
-          <Route exact path="/app/tables" render={() => <Redirect to={'/app/tables/static'} />} />
-          <Route path="/app/tables/static" component={StaticTablesPage} />
-          <Route path="/app/tables/dynamic" component={DynamicTablesPage} />
-
-          <Route exact path="/app/ui" render={() => <Redirect to="/app/ui/icons" />} />
-          <Route path="/app/ui/icons" component={IconsPage} />
-          <Route path="/app/ui/badge" component={BadgesPage} />
-          <Route path="/app/ui/carousel" component={CarouselsPage} />
-          <Route path="/app/ui/modal" component={ModalsPage} />
-          <Route path="/app/ui/navbar" component={NavbarsPage} />
-          <Route path="/app/ui/tooltips" component={TooltipsPage} />
-          <Route path="/app/ui/tabs" component={TabsPage} />
-          <Route path="/app/ui/cards" component={CardsPage} />
-          <Route path="/app/ui/widget" component={WidgetsPage} />
-          <Route path="/app/ui/progress" component={ProgressPage} />
-          <Route path="/app/ui/notifications" component={NotificationsPage} />
-
-          <Route exact path="/app/forms" render={() => <Redirect to="/app/forms/elements" />} />
-          <Route path="/app/forms/elements" component={FormsElements} />
-          <Route path="/app/forms/validation" component={FormValidation} />
-
-          <Route exact path="/app/charts" render={() => <Redirect to={'/app/charts/overview'} />} />
-          <Route path="/app/charts/overview" component={Charts} />
-          <Route path="/app/charts/line" component={LineCharts} />
-          <Route path="/app/charts/bar" component={BarCharts} />
-          <Route path="/app/charts/pie" component={PieCharts} />
-
-          <Route path="/app/grid" component={DraggableGrid} />
-
-          <Route exact path="/app/maps" render={() => <Redirect to="/app/maps/google" />} />
-          <Route path="/app/maps/google" component={MapsGoogle} />
-          <Route path="/app/maps/vector" component={VectorMaps} />
-
-          <Route exact path="/app/extra" render={() => <Redirect to="/app/extra/timeline" />}/>
-          <Route path="/app/extra/timeline" component={Timeline} />
-          <Route path="/app/extra/search" component={Search} />
-          <Route path="/app/extra/gallery" component={Gallery} />
-          <Route path="/app/extra/invoice" component={Invoice} />
-          <Route path="/app/extra/calendar" component={Calendar} />
-
-          <Route path="/app/ecommerce/management" exact>
-            <ProductsProvider>
-              <Ecommerce />
-            </ProductsProvider>
-          </Route>
-          <Route path="/app/ecommerce/management/edit/:id" exact>
-            <ProductsProvider>
-              <CreateProduct />
-            </ProductsProvider>
-          </Route>
-          <Route path="/app/ecommerce/management/create">
-            <ProductsProvider>
-              <CreateProduct />
-            </ProductsProvider>
-          </Route>
-          <Route path="/app/ecommerce/product/:id" component={Product}/>
-          <Route path="/app/ecommerce/product" component={Product} />
-          <Route path="/app/ecommerce/gridproducts" component={ProductsGrid}/>
-
+        {/* Define nested routes with relative paths */}
+        <Routes>
+          <Route path="dashboard" element={<Dashboard />} />
+          <Route path="profile" element={<Profile />} />
+          <Route path="user/edit" element={<EditUser />} />
+          {/* Core */}
+          <Route path="core" element={<Navigate to="core/typography" replace />} />
+          <Route path="core/typography" element={<TypographyPage />} />
+          <Route path="core/colors" element={<ColorsPage />} />
+          <Route path="core/grid" element={<GridPage />} />
+          {/* Tables */}
+          <Route path="tables" element={<Navigate to="tables/static" replace />} />
+          <Route path="tables/static" element={<StaticTablesPage />} />
+          <Route path="tables/dynamic" element={<DynamicTablesPage />} />
+          {/* UI */}
+          <Route path="ui" element={<Navigate to="ui/icons" replace />} />
+          <Route path="ui/icons" element={<IconsPage />} />
+          <Route path="ui/badge" element={<BadgesPage />} />
+          <Route path="ui/carousel" element={<CarouselsPage />} />
+          <Route path="ui/modal" element={<ModalsPage />} />
+          <Route path="ui/navbar" element={<NavbarsPage />} />
+          <Route path="ui/tooltips" element={<TooltipsPage />} />
+          <Route path="ui/tabs" element={<TabsPage />} />
+          <Route path="ui/cards" element={<CardsPage />} />
+          <Route path="ui/widget" element={<WidgetsPage />} />
+          <Route path="ui/progress" element={<ProgressPage />} />
+          <Route path="ui/notifications" element={<NotificationsPage />} />
+          {/* Forms */}
+          <Route path="forms" element={<Navigate to="forms/elements" replace />} />
+          <Route path="forms/elements" element={<FormsElements />} />
+          <Route path="forms/validation" element={<FormValidation />} />
+          {/* Charts */}
+          <Route path="charts" element={<Navigate to="charts/overview" replace />} />
+          <Route path="charts/overview" element={<Charts />} />
+          <Route path="charts/line" element={<LineCharts />} />
+          <Route path="charts/bar" element={<BarCharts />} />
+          <Route path="charts/pie" element={<PieCharts />} />
+          {/* Draggable Grid */}
+          <Route path="grid" element={<DraggableGrid />} />
+          {/* Maps */}
+          <Route path="maps" element={<Navigate to="maps/google" replace />} />
+          <Route path="maps/google" element={<MapsGoogle />} />
+          <Route path="maps/vector" element={<VectorMaps />} />
+          {/* Extra */}
+          <Route path="extra" element={<Navigate to="extra/timeline" replace />} />
+          <Route path="extra/timeline" element={<Timeline />} />
+          <Route path="extra/search" element={<Search />} />
+          <Route path="extra/gallery" element={<Gallery />} />
+          <Route path="extra/invoice" element={<Invoice />} />
+          <Route path="extra/calendar" element={<Calendar />} />
+          {/* Ecommerce */}
+          <Route
+            path="ecommerce/management"
+            element={
+              <ProductsProvider>
+                <Ecommerce />
+              </ProductsProvider>
+            }
+          />
+          <Route
+            path="ecommerce/management/edit/:id"
+            element={
+              <ProductsProvider>
+                <CreateProduct />
+              </ProductsProvider>
+            }
           />
-
-          <Route path={'/app/users'} exact component={UsersTablePage} />
-          <Route path={'/app/user/new'} exact component={UsersFormPage} />
           <Route
-            path={'/app/users/:id/edit'}
-            exact
-            component={UsersFormPage}
+            path="ecommerce/management/create"
+            element={
+              <ProductsProvider>
+                <CreateProduct />
+              </ProductsProvider>
+            }
           />
-        </Switch>
+          <Route path="ecommerce/product/:id" element={<Product />} />
+          <Route path="ecommerce/product" element={<Product />} />
+          <Route path="ecommerce/gridproducts" element={<ProductsGrid />} />
+          {/* Users */}
+          <Route path="users" element={<UsersTablePage />} />
+          <Route path="user/new" element={<UsersFormPage />} />
+          <Route path="users/:id/edit" element={<UsersFormPage />} />
+          {/* Fallback for nested routes */}
+          <Route path="*" element={<Navigate to="dashboard" replace />} />
+        </Routes>
+        {/* Alternatively, you can render <Outlet /> if nested routes are defined in App */}
+        {/* <Outlet /> */}
         <Fab
-          color='primary'
-          aria-label='settings'
-          onClick={(e) => handleClick(e)}
+          color="primary"
+          aria-label="settings"
+          onClick={handleClick}
           className={classes.changeThemeFab}
           style={{ zIndex: 100 }}
         >
@@ -199,47 +187,29 @@ function Layout(props) {
         <ColorChangeThemePopper id={id} open={open} anchorEl={anchorEl} />
         <Footer>
           <div>
-            <Link
-              color={'primary'}
-              href={'https://flatlogic.com/'}
-              target={'_blank'}
-              className={classes.link}
-            >
+            <Link color="primary" href="https://flatlogic.com/" target="_blank" className={classes.link}>
               Flatlogic
             </Link>
-            <Link
-              color={'primary'}
-              href={'https://flatlogic.com/about'}
-              target={'_blank'}
-              className={classes.link}
-            >
+            <Link color="primary" href="https://flatlogic.com/about" target="_blank" className={classes.link}>
               About Us
             </Link>
-            <Link
-              color={'primary'}
-              href={'https://flatlogic.com/blog'}
-              target={'_blank'}
-              className={classes.link}
-            >
+            <Link color="primary" href="https://flatlogic.com/blog" target="_blank" className={classes.link}>
               Blog
             </Link>
           </div>
           <div>
-            <Link href={'https://www.facebook.com/flatlogic'} target={'_blank'}>
-              <IconButton aria-label='facebook'>
+            <Link href="https://www.facebook.com/flatlogic" target="_blank">
+              <IconButton aria-label="facebook">
                 <FacebookIcon style={{ color: '#6E6E6E99' }} />
               </IconButton>
             </Link>
-            <Link href={'https://twitter.com/flatlogic'} target={'_blank'}>
-              <IconButton aria-label='twitter'>
+            <Link href="https://twitter.com/flatlogic" target="_blank">
+              <IconButton aria-label="twitter">
                 <TwitterIcon style={{ color: '#6E6E6E99' }} />
               </IconButton>
             </Link>
-            <Link href={'https://github.com/flatlogic'} target={'_blank'}>
-              <IconButton
-                aria-label='github'
-                style={{ padding: '12px 0 12px 12px' }}
-              >
+            <Link href="https://github.com/flatlogic" target="_blank">
+              <IconButton aria-label="github" style={{ padding: '12px 0 12px 12px' }}>
                 <GithubIcon style={{ color: '#6E6E6E99' }} />
               </IconButton>
             </Link>
@@ -250,4 +220,4 @@ function Layout(props) {
   );
 }
 
-export default withRouter(connect()(Layout));
+export default connect()(Layout);
\ No newline at end of file
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 30cf93e2..00c0e098 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -2,26 +2,27 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
 import { Drawer, IconButton, List } from '@mui/material';
 import { useTheme } from '@mui/material';
-import { withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom'; // useLocation hook replaces withRouter
 import classNames from 'classnames';
 
 // styles
 import useStyles from './styles';
-
 // components
 import SidebarLink from './components/SidebarLink/SidebarLink';
-
 // context
-import {
-  useLayoutState,
-  useLayoutDispatch,
-  toggleSidebar,
-} from '../../context/LayoutContext';
+import { useLayoutState, useLayoutDispatch, toggleSidebar } from '../../context/LayoutContext';
+
+function Sidebar({ structure }) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const location = useLocation(); // get router location using hook
+  const layoutState = useLayoutState();
+  const layoutDispatch = useLayoutDispatch();
 
-function Sidebar({ location, structure }) {
-  let classes = useStyles();
-  let theme = useTheme();
+  // local state: whether the drawer is permanent or temporary
+  const [isPermanent, setPermanent] = useState(true);
 
+  // Callback to toggle the drawer
   const toggleDrawer = (value) => (event) => {
     if (
       event.type === 'keydown' &&
@@ -29,29 +30,38 @@ function Sidebar({ location, structure }) {
     ) {
       return;
     }
-
-    if (value && !isPermanent) toggleSidebar(layoutDispatch);
+    // Only toggle sidebar if temporary (non-permanent)
+    if (value && !isPermanent) {
+      toggleSidebar(layoutDispatch);
+    }
   };
 
-  // global
-  let { isSidebarOpened } = useLayoutState();
-  let layoutDispatch = useLayoutDispatch();
-
-  // local
-  let [isPermanent, setPermanent] = useState(true);
-
+  // Compute the sidebar open state based on permanent flag and global state
   const isSidebarOpenedWrapper = useMemo(
-    () => (!isPermanent ? !isSidebarOpened : isSidebarOpened),
-    [isPermanent, isSidebarOpened],
+    () => (!isPermanent ? !layoutState.isSidebarOpened : layoutState.isSidebarOpened),
+    [isPermanent, layoutState.isSidebarOpened]
   );
 
-  useEffect(function () {
+  useEffect(() => {
     window.addEventListener('resize', handleWindowWidthChange);
     handleWindowWidthChange();
-    return function cleanup() {
+    return () => {
       window.removeEventListener('resize', handleWindowWidthChange);
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme.breakpoints.values.md, isPermanent]);
+
+  // Automatically adjust sidebar mode based on window width
+  function handleWindowWidthChange() {
+    const windowWidth = window.innerWidth;
+    const breakpointWidth = theme.breakpoints.values.md;
+    const isSmallScreen = windowWidth < breakpointWidth;
+    if (isSmallScreen && isPermanent) {
+      setPermanent(false);
+    } else if (!isSmallScreen && !isPermanent) {
+      setPermanent(true);
+    }
+  }
 
   return (
     <Drawer
@@ -73,21 +83,16 @@ function Sidebar({ location, structure }) {
       <div className={classes.mobileBackButton}>
         <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
           <ArrowBackIcon
-            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse),
-            }}
+            classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }}
           />
         </IconButton>
       </div>
-      <List
-        className={classes.sidebarList}
-        classes={{ padding: classes.padding }}
-      >
-        {structure.map(link => (
+      <List className={classes.sidebarList} classes={{ padding: classes.padding }}>
+        {structure.map((link) => (
           <SidebarLink
             key={link.id}
-            location={location}
-            isSidebarOpened={!isPermanent ? !isSidebarOpened : isSidebarOpened}
+            location={location} // pass in location for active link highlighting, etc.
+            isSidebarOpened={!isPermanent ? !layoutState.isSidebarOpened : layoutState.isSidebarOpened}
             {...link}
             toggleDrawer={toggleDrawer(true)}
           />
@@ -95,19 +100,6 @@ function Sidebar({ location, structure }) {
       </List>
     </Drawer>
   );
-
-  // ##################################################################
-  function handleWindowWidthChange() {
-    let windowWidth = window.innerWidth;
-    let breakpointWidth = theme.breakpoints.values.md;
-    let isSmallScreen = windowWidth < breakpointWidth;
-
-    if (isSmallScreen && isPermanent) {
-      setPermanent(false);
-    } else if (!isSmallScreen && !isPermanent) {
-      setPermanent(true);
-    }
-  }
 }
 
-export default withRouter(Sidebar);
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/Table/Actions.js b/src/components/Table/Actions.js
index f4b7aa28..63183453 100644
--- a/src/components/Table/Actions.js
+++ b/src/components/Table/Actions.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-
+import { useNavigate } from 'react-router-dom'; // useNavigate replaces useHistory
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import Menu from '@mui/material/Menu';
@@ -9,14 +8,17 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 
 const Actions = ({ classes, id, openModal, entity }) => {
-  const history = useHistory();
+  const navigate = useNavigate(); // retrieve navigate function
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
 
+  // Handle click on the IconButton to open the menu
   const handleClick = (event) => {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
+
+  // Close the menu
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -36,12 +38,11 @@ const Actions = ({ classes, id, openModal, entity }) => {
         <MenuItem
           classes={classes}
           onClick={() => {
-            history.push(`/admin/${entity}/${id}/edit`);
+            navigate(`/admin/${entity}/${id}/edit`);
             handleClose();
           }}
         >
-          <EditIcon />
-          Edit
+          <EditIcon /> Edit
         </MenuItem>
         <MenuItem
           classes={classes}
@@ -50,12 +51,11 @@ const Actions = ({ classes, id, openModal, entity }) => {
             handleClose();
           }}
         >
-          <DeleteIcon />
-          Delete
+          <DeleteIcon /> Delete
         </MenuItem>
       </Menu>
     </div>
   );
 };
 
-export default Actions;
+export default Actions;
\ No newline at end of file
diff --git a/src/components/Widget/styles.js b/src/components/Widget/styles.js
index 60875269..cec3b30c 100644
--- a/src/components/Widget/styles.js
+++ b/src/components/Widget/styles.js
@@ -18,7 +18,7 @@ export default makeStyles((theme) => ({
     boxShadow: theme.customShadows.widget,
   },
   widgetBody: {
-    height: (props) => (props.fullHeight ? '100%' : 'inherit'),
+    height: (props) => (props.fullHeight ? '100%' : 'currentColor'),
     padding: theme.spacing(3),
     paddingTop: theme.spacing(1),
   },
diff --git a/src/context/ManagementContext.js b/src/context/ManagementContext.js
index 13496fdf..f7f82992 100644
--- a/src/context/ManagementContext.js
+++ b/src/context/ManagementContext.js
@@ -240,46 +240,30 @@ const actions = {
     }
   },
 
-  doCreate: (values, history) => async (dispatch) => {
+  doCreate: (values, navigate) => async (dispatch) => {
     try {
-      dispatch({
-        type: 'USERS_FORM_CREATE_STARTED',
-      });
+      dispatch({ type: 'USERS_FORM_CREATE_STARTED' });
       axios.post('/users', { data: values }).then((res) => {
-        dispatch({
-          type: 'USERS_FORM_CREATE_SUCCESS',
-        });
-        history.push('/app/user/list');
+        dispatch({ type: 'USERS_FORM_CREATE_SUCCESS' });
+        // Redirect using navigate instead of history.push
+        navigate('/app/user/list');
       });
     } catch (error) {
       showSnackbar({ type: 'error', message: 'Error' });
       console.log(error);
-      dispatch({
-        type: 'USERS_FORM_CREATE_ERROR',
-      });
+      dispatch({ type: 'USERS_FORM_CREATE_ERROR' });
     }
   },
-
-  doUpdate: (id, values, history) => async (dispatch, getState) => {
+  doUpdate: (id, values, navigate) => async (dispatch, getState) => {
     try {
-      dispatch({
-        type: 'USERS_FORM_UPDATE_STARTED',
-      });
-
+      dispatch({ type: 'USERS_FORM_UPDATE_STARTED' });
       await axios.put(`/users/${id}`, { id, data: values });
-
-      dispatch({
-        type: 'USERS_FORM_UPDATE_SUCCESS',
-        payload: values,
-      });
-
-      history.push('/admin/dashboard');
+      dispatch({ type: 'USERS_FORM_UPDATE_SUCCESS', payload: values });
+      // Redirect using navigate
+      navigate('/admin/dashboard');
     } catch (error) {
       console.log(error);
-
-      dispatch({
-        type: 'USERS_FORM_UPDATE_ERROR',
-      });
+      dispatch({ type: 'USERS_FORM_UPDATE_ERROR' });
     }
   },
 
diff --git a/src/context/ProductContext.js b/src/context/ProductContext.js
index 4de57a0d..bbd43f55 100644
--- a/src/context/ProductContext.js
+++ b/src/context/ProductContext.js
@@ -33,12 +33,7 @@ const rootReducer = (state, action) => {
       };
 
     case 'CREATE_PRODUCT':
-      state.products.push(action.payload);
-      return {
-        ...state,
-        isLoaded: true,
-        products: state.products,
-      };
+      return { ...state, isLoaded: true, products: [...state.products, action.payload] };
 
     default:
       return {
diff --git a/src/context/UserContext.js b/src/context/UserContext.js
index 25406bdb..754e08d2 100644
--- a/src/context/UserContext.js
+++ b/src/context/UserContext.js
@@ -171,14 +171,14 @@ export function sendPasswordResetEmail(email) {
   };
 }
 
-function signOut(dispatch, history) {
+function signOut(dispatch, navigate) {
   localStorage.removeItem('token');
   localStorage.removeItem('user');
   localStorage.removeItem('user_id');
   document.cookie = 'token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
   axios.defaults.headers.common['Authorization'] = '';
   dispatch({ type: 'SIGN_OUT_SUCCESS' });
-  history.push('/login');
+  navigate('/login');
 }
 
 export function receiveToken(token, dispatch) {
diff --git a/src/index.js b/src/index.js
index 8eb9d8e1..6bae3b8d 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,52 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import axios from 'axios';
-import { createStore, applyMiddleware, compose } from 'redux';
-import ReduxThunk from 'redux-thunk';
+import App from './components/App';
 import { Provider } from 'react-redux';
-import { routerMiddleware } from 'connected-react-router';
+import store from './reducers/store';   // Our new store created with Redux Toolkit
+
 import { ThemeProvider as ThemeProviderV5 } from '@mui/material/styles';
 import { StyledEngineProvider } from '@mui/material/styles';
-import App from './components/App';
-import * as serviceWorker from './serviceWorker';
 import { LayoutProvider } from './context/LayoutContext';
 import { UserProvider } from './context/UserContext';
 import { ManagementProvider } from './context/ManagementContext';
-import createRootReducer from './reducers';
-import {
-  ThemeProvider as ThemeChangeProvider,
-  ThemeStateContext,
-} from './context/ThemeContext';
+import { ThemeProvider as ThemeChangeProvider, ThemeStateContext } from './context/ThemeContext';
 import CssBaseline from '@mui/material/CssBaseline';
-import config from '../src/config';
-
-import { createHashHistory, createMemoryHistory } from 'history';
-
-const history =
-  typeof window !== 'undefined'
-    ? createHashHistory()
-    : createMemoryHistory({
-        initialEntries: [],
-      });
-
-export function getHistory() {
-  return history;
-}
-
-axios.defaults.baseURL = config.baseURLApi;
-axios.defaults.headers.common['Content-Type'] = 'application/json';
-const token = localStorage.getItem('token');
-if (token) {
-  axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
-}
-
-export const store = createStore(
-  createRootReducer(history),
-  compose(applyMiddleware(routerMiddleware(history), ReduxThunk)),
-);
+import * as serviceWorker from './serviceWorker';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-
 root.render(
   <Provider store={store}>
     <LayoutProvider>
@@ -67,10 +34,7 @@ root.render(
         </StyledEngineProvider>
       </UserProvider>
     </LayoutProvider>
-  </Provider>,
+  </Provider>
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();
\ No newline at end of file
diff --git a/src/pages/CRUD/Users/form/UsersFormPage.js b/src/pages/CRUD/Users/form/UsersFormPage.js
index dd48bbc1..3e7cb4b9 100644
--- a/src/pages/CRUD/Users/form/UsersFormPage.js
+++ b/src/pages/CRUD/Users/form/UsersFormPage.js
@@ -1,46 +1,49 @@
 import React, { useState, useEffect } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom'; // Use hooks for router info
 import UsersForm from 'pages/CRUD/Users/form/UsersForm';
-import { push } from 'connected-react-router';
 import actions from 'actions/users/usersFormActions';
 import { connect } from 'react-redux';
 
 const UsersFormPage = (props) => {
-  const { dispatch, match, saveLoading, findLoading, record, currentUser } =
-    props;
-
+  const { dispatch, saveLoading, findLoading, record, currentUser } = props;
   const [dispatched, setDispatched] = useState(false);
 
-  const isEditing = () => {
-    return !!match.params.id;
-  };
+  // Get parameters and location from router
+  const params = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  const isProfile = () => {
-    return match.url === '/app/profile';
-  };
+  // Determine if editing based on existence of params.id
+  const isEditing = () => !!params.id;
+
+  // Determine if current page is the profile page
+  const isProfile = () => location.pathname === '/app/profile';
 
+  // onSubmit handler calls doUpdate or doCreate action creators,
+  // passing "navigate" for redirection
   const doSubmit = (id, data) => {
     if (isEditing() || isProfile()) {
-      dispatch(actions.doUpdate(id, data, isProfile()));
+      dispatch(actions.doUpdate(id, data, isProfile(), navigate));
     } else {
-      dispatch(actions.doCreate(data));
+      dispatch(actions.doCreate(data, navigate));
     }
   };
 
   useEffect(() => {
     if (isEditing()) {
-      dispatch(actions.doFind(match.params.id));
+      dispatch(actions.doFind(params.id, navigate));
     } else {
       if (isProfile()) {
         const currentUser = JSON.parse(localStorage.getItem('user'));
         const currentUserId = currentUser.user.id;
-        dispatch(actions.doFind(currentUserId));
+        dispatch(actions.doFind(currentUserId, navigate));
       } else {
         dispatch(actions.doNew());
       }
     }
     setDispatched(true);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [match, dispatch]);
+    // Include dependencies to update when router parameters change
+  }, [params, location.pathname, dispatch, navigate]);
 
   return (
     <>
@@ -53,7 +56,7 @@ const UsersFormPage = (props) => {
           isEditing={isEditing()}
           isProfile={isProfile()}
           onSubmit={doSubmit}
-          onCancel={() => dispatch(push('/app/users'))}
+          onCancel={() => navigate('/app/users')}
         />
       )}
     </>
@@ -69,4 +72,4 @@ function mapStateToProps(store) {
   };
 }
 
-export default connect(mapStateToProps)(UsersFormPage);
+export default connect(mapStateToProps)(UsersFormPage);
\ No newline at end of file
diff --git a/src/pages/CRUD/Users/table/UsersTable.js b/src/pages/CRUD/Users/table/UsersTable.js
index 27617925..c0e4f104 100644
--- a/src/pages/CRUD/Users/table/UsersTable.js
+++ b/src/pages/CRUD/Users/table/UsersTable.js
@@ -1,17 +1,14 @@
 import * as dataFormat from 'pages/CRUD/Users/table/UsersDataFormatters';
-
 import actions from 'actions/users/usersListActions';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
+// Replace useHistory with useNavigate from react-router-dom
+import { useNavigate } from 'react-router-dom';
 import { uniqueId } from 'lodash';
-
 import { makeStyles } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
-
 import MenuItem from '@mui/material/MenuItem';
-
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -22,7 +19,6 @@ import Grid from '@mui/material/Grid';
 import CloseIcon from '@mui/icons-material/Close';
 import Stack from '@mui/material/Stack';
 import LinearProgress from '@mui/material/LinearProgress';
-
 import Widget from 'components/Widget';
 import Actions from '../../../../components/Table/Actions';
 import Dialog from '../../../../components/Dialog';
@@ -45,11 +41,14 @@ const useStyles = makeStyles({
 
 const UsersTable = () => {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate(); // useNavigate hook replaces useHistory
   const classes = useStyles();
+
+  // Store the current window width in state
   // eslint-disable-next-line no-unused-vars
   const [width, setWidth] = React.useState(window.innerWidth);
 
+  // Filters configuration
   const [filters] = React.useState([
     { label: 'First Name', title: 'firstName' },
     { label: 'Last Name', title: 'lastName' },
@@ -59,21 +58,18 @@ const UsersTable = () => {
 
   const [filterItems, setFilterItems] = React.useState([]);
   const [filterUrl, setFilterUrl] = React.useState('');
-
   const [loading, setLoading] = React.useState(false);
   const [sortModel, setSortModel] = React.useState([]);
   const [selectionModel, setSelectionModel] = React.useState([]);
+  // Get count from redux store (if used)
   // eslint-disable-next-line no-unused-vars
   const count = useSelector((store) => store.users.list.count);
   const modalOpen = useSelector((store) => store.users.list.modalOpen);
   const rows = useSelector((store) => store.users.list.rows);
   const idToDelete = useSelector((store) => store.users.list.idToDelete);
+  const [rowsState, setRowsState] = React.useState({ page: 0, pageSize: 5 });
 
-  const [rowsState, setRowsState] = React.useState({
-    page: 0,
-    pageSize: 5,
-  });
-
+  // Load data from backend
   const loadData = async (limit, page, orderBy, request) => {
     setLoading(true);
     await dispatch(actions.doFetch({ limit, page, orderBy, request }));
@@ -82,14 +78,15 @@ const UsersTable = () => {
 
   React.useEffect(() => {
     loadData(rowsState.pageSize, rowsState.page, sortModel[0], filterUrl);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortModel, rowsState, filterUrl]);
 
   React.useEffect(() => {
     updateWindowDimensions();
     window.addEventListener('resize', updateWindowDimensions);
-    return () => window.removeEventListener('resize', updateWindowDimensions);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () =>
+      window.removeEventListener('resize', updateWindowDimensions);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSortModelChange = (newModel) => {
@@ -103,13 +100,12 @@ const UsersTable = () => {
   const handleChange = (id) => (e) => {
     const value = e.target.value;
     const name = e.target.name;
-
     setFilterItems(
       filterItems.map((item) =>
         item.id === id
           ? { id, fields: { ...item.fields, [name]: value } }
-          : item,
-      ),
+          : item
+      )
     );
   };
 
@@ -117,13 +113,16 @@ const UsersTable = () => {
     e.preventDefault();
     let request = '&';
     filterItems.forEach((item) => {
-      filters[
-        filters.map((filter) => filter.title).indexOf(item.fields.selectedField)
-      ].hasOwnProperty('number')
-        ? (request += `${item.fields.selectedField}Range=${item.fields.filterValueFrom}&${item.fields.selectedField}Range=${item.fields.filterValueTo}&`)
-        : (request += `${item.fields.selectedField}=${item.fields.filterValue}&`);
+      const filterOptionIndex = filters
+        .map((filter) => filter.title)
+        .indexOf(item.fields.selectedField);
+      // If the filter option has a "number" property, then treat it as a range filter
+      if (filters[filterOptionIndex].hasOwnProperty('number')) {
+        request += `${item.fields.selectedField}Range=${item.fields.filterValueFrom}&${item.fields.selectedField}Range=${item.fields.filterValueTo}&`;
+      } else {
+        request += `${item.fields.selectedField}=${item.fields.filterValue}&`;
+      }
     });
-
     loadData(rowsState.pageSize, 0, sortModel[0], request);
     setFilterUrl(request);
   };
@@ -131,19 +130,13 @@ const UsersTable = () => {
   const handleReset = () => {
     setFilterItems([]);
     setFilterUrl('');
-    dispatch(
-      actions.doFetch({ limit: rowsState.pageSize, page: 0, request: '' }),
-    );
+    dispatch(actions.doFetch({ limit: rowsState.pageSize, page: 0, request: '' }));
   };
 
   const addFilter = () => {
     let newItem = {
       id: uniqueId(),
-      fields: {
-        filterValue: '',
-        filterValueFrom: '',
-        filterValueTo: '',
-      },
+      fields: { filterValue: '', filterValueFrom: '', filterValueTo: '' },
     };
     newItem.fields.selectedField = filters[0].title;
     setFilterItems([...filterItems, newItem]);
@@ -162,7 +155,7 @@ const UsersTable = () => {
 
   const handleDelete = () => {
     dispatch(
-      actions.doDelete({ limit: 10, page: 0, request: filterUrl }, idToDelete),
+      actions.doDelete({ limit: 10, page: 0, request: filterUrl }, idToDelete)
     );
   };
 
@@ -178,68 +171,29 @@ const UsersTable = () => {
 
   function NoRowsOverlay() {
     return (
-      <Stack height='100%' alignItems='center' justifyContent='center'>
+      <Stack height="100%" alignItems="center" justifyContent="center">
         No results found
       </Stack>
     );
   }
 
   const columns = [
-    {
-      field: 'firstName',
-
-      flex: 0.6,
-
-      headerName: 'First Name',
-    },
-
-    {
-      field: 'lastName',
-
-      flex: 0.6,
-
-      headerName: 'Last Name',
-    },
-
-    {
-      field: 'phoneNumber',
-
-      flex: 0.6,
-
-      headerName: 'Phone Number',
-    },
-
-    {
-      field: 'email',
-
-      flex: 0.6,
-
-      headerName: 'E-Mail',
-    },
-
-    {
-      field: 'role',
-
-      headerName: 'Role',
-    },
-
+    { field: 'firstName', flex: 0.6, headerName: 'First Name' },
+    { field: 'lastName', flex: 0.6, headerName: 'Last Name' },
+    { field: 'phoneNumber', flex: 0.6, headerName: 'Phone Number' },
+    { field: 'email', flex: 0.6, headerName: 'E-Mail' },
+    { field: 'role', headerName: 'Role' },
     {
       field: 'disabled',
-
       renderCell: (params) => dataFormat.booleanFormatter(params.row),
-
       headerName: 'Disabled',
     },
-
     {
       field: 'avatar',
-
       sortable: false,
       renderCell: (params) => dataFormat.imageFormatter(params.row),
-
       headerName: 'Avatar',
     },
-
     {
       field: 'id',
       headerName: 'Actions',
@@ -247,78 +201,70 @@ const UsersTable = () => {
       flex: 0.6,
       maxWidth: 80,
       renderCell: (params) => (
-        <Actions
-          classes={classes}
-          entity='users'
-          openModal={openModal}
-          {...params}
-        />
+        <Actions classes={classes} entity="users" openModal={openModal} {...params} />
       ),
     },
   ];
 
   return (
     <div>
-      <Widget title='Users' disableWidgetMenu>
+      <Widget title="Users" disableWidgetMenu>
         <Box className={classes.actions}>
-          <Link to='/app/user/new'>
-            <Button variant='contained'>New</Button>
+          <Link to="/app/user/new">
+            <Button variant="contained">New</Button>
           </Link>
-          <Button type='button' variant='contained' onClick={addFilter}>
+          <Button type="button" variant="contained" onClick={addFilter}>
             Add Filter
           </Button>
         </Box>
-
         <Box sx={{ flexGrow: 1 }}>
           {filterItems.map((item) => (
             <Grid
               container
-              alignItems='center'
+              alignItems="center"
               columns={12}
               spacing={1}
               className={classes.container}
+              key={item.id}
             >
               <Grid item xs={3}>
-                <FormControl size='small' fullWidth>
+                <FormControl size="small" fullWidth>
                   <InputLabel>Field</InputLabel>
                   <Select
-                    label='Field'
-                    name='selectedField'
-                    size='small'
+                    label="Field"
+                    name="selectedField"
+                    size="small"
                     value={item.fields.selectedField}
                     onChange={handleChange(item.id)}
                   >
                     {filters.map((selectOption) => (
-                      <MenuItem
-                        key={selectOption.title}
-                        value={`${selectOption.title}`}
-                      >
+                      <MenuItem key={selectOption.title} value={selectOption.title}>
                         {selectOption.label}
                       </MenuItem>
                     ))}
                   </Select>
                 </FormControl>
               </Grid>
-              {filters
-                .find((filter) => filter.title === item.fields.selectedField)
-                .hasOwnProperty('number') ? (
+              {filters.find(
+                (filter) => filter.title === item.fields.selectedField
+              ).hasOwnProperty('number') ? (
                 <>
                   <Grid item xs={2}>
                     <TextField
-                      label='From'
-                      type='text'
-                      name='filterValueFrom'
-                      size='small'
+                      label="From"
+                      type="text"
+                      name="filterValueFrom"
+                      size="small"
                       fullWidth
                       onChange={handleChange(item.id)}
                     />
                   </Grid>
                   <Grid item xs={2}>
                     <TextField
-                      label='To'
-                      type='text'
-                      name='filterValueTo'
-                      size='small'
+                      label="To"
+                      type="text"
+                      name="filterValueTo"
+                      size="small"
                       fullWidth
                       onChange={handleChange(item.id)}
                     />
@@ -327,20 +273,19 @@ const UsersTable = () => {
               ) : (
                 <Grid item xs={4}>
                   <TextField
-                    label='Contained'
-                    type='text'
-                    name='filterValue'
-                    size='small'
+                    label="Contained"
+                    type="text"
+                    name="filterValue"
+                    size="small"
                     fullWidth
                     onChange={handleChange(item.id)}
                   />
                 </Grid>
               )}
-
               <Grid item xs={2}>
                 <Button
-                  variant='outlined'
-                  color='error'
+                  variant="outlined"
+                  color="error"
                   onClick={deleteFilter(item.id)}
                 >
                   <CloseIcon />
@@ -351,19 +296,18 @@ const UsersTable = () => {
           {filterItems.length > 0 && (
             <Grid container spacing={1}>
               <Grid item>
-                <Button variant='outlined' onClick={(e) => handleSubmit(e)}>
+                <Button variant="outlined" onClick={handleSubmit}>
                   Apply
                 </Button>
               </Grid>
               <Grid item>
-                <Button color='error' variant='outlined' onClick={handleReset}>
+                <Button color="error" variant="outlined" onClick={handleReset}>
                   Clear
                 </Button>
               </Grid>
             </Grid>
           )}
         </Box>
-
         <div
           style={{
             minHeight: 500,
@@ -375,41 +319,41 @@ const UsersTable = () => {
           <DataGrid
             rows={loading ? [] : rows}
             columns={columns}
-            sortingMode='server'
+            sortingMode="server"
             sortModel={sortModel}
             onSortModelChange={handleSortModelChange}
             rowsPerPageOptions={[5, 10, 20, 50, 100]}
             pageSize={5}
             pagination
             {...rowsState}
-            paginationMode='server'
+            paginationMode="server"
             components={{ NoRowsOverlay, LoadingOverlay: LinearProgress }}
-            onPageChange={(page) => {
-              setRowsState((prev) => ({ ...prev, page }));
-            }}
-            onPageSizeChange={(pageSize) => {
-              setRowsState((prev) => ({ ...prev, pageSize }));
-            }}
-            onSelectionModelChange={(newSelectionModel) => {
-              setSelectionModel(newSelectionModel);
-            }}
+            onPageChange={(page) =>
+              setRowsState((prev) => ({ ...prev, page }))
+            }
+            onPageSizeChange={(pageSize) =>
+              setRowsState((prev) => ({ ...prev, pageSize }))
+            }
+            onSelectionModelChange={(newSelectionModel) =>
+              setSelectionModel(newSelectionModel)
+            }
             selectionModel={selectionModel}
             checkboxSelection
             disableSelectionOnClick
             disableColumnMenu
             loading={loading}
             onRowClick={(e) => {
-              history.push(`/app/users/${e.id}/edit`);
+              // Replace history.push with navigate call
+              navigate(`/app/users/${e.id}/edit`);
             }}
             autoHeight
           />
         </div>
       </Widget>
-
       <Dialog
         open={modalOpen || false}
-        title='Confirm delete'
-        contentText='Are you sure you want to delete this item?'
+        title="Confirm delete"
+        contentText="Are you sure you want to delete this item?"
         onClose={closeModal}
         onSubmit={handleDelete}
       />
@@ -417,4 +361,4 @@ const UsersTable = () => {
   );
 };
 
-export default UsersTable;
+export default UsersTable;
\ No newline at end of file
diff --git a/src/pages/ecommerce/CreateProduct.js b/src/pages/ecommerce/CreateProduct.js
index 8882d2df..261eace0 100644
--- a/src/pages/ecommerce/CreateProduct.js
+++ b/src/pages/ecommerce/CreateProduct.js
@@ -5,11 +5,11 @@ import {
   Grid,
   MenuItem,
   Select,
-  TextField as Input
+  TextField as Input,
+  Button,
 } from "@mui/material";
-import { useParams, useHistory } from "react-router-dom";
-
-//context
+import { useParams, useNavigate } from "react-router-dom"; // useNavigate replaces useHistory
+// context
 import {
   getProductsRequest,
   useProductsState,
@@ -17,20 +17,19 @@ import {
   createProduct,
   getProductsImages
 } from "../../context/ProductContext";
-
-//components
+// components
 import Widget from "../../components/Widget";
-import { Typography, Button } from "../../components/Wrappers";
+import { Typography } from "../../components/Wrappers";
 import config from "../../config";
 
 const CreateProduct = () => {
   const { id } = useParams();
+  const navigate = useNavigate(); // create navigate function
   const context = useProductsState();
 
-  const getId = id => {
-    return context.products.products.findIndex(c => {
-      return c.id == id; // eslint-disable-line
-    });
+  // Helper to get index of product by id from the products state array
+  const getId = (id) => {
+    return context.products.products.findIndex(c => c.id == id); // eslint-disable-line
   };
 
   const [localProducts, setLocalProducts] = React.useState(
@@ -38,8 +37,7 @@ const CreateProduct = () => {
   );
 
   const [newProduct, setNewProduct] = React.useState({
-    img:
-      "https://flatlogic-node-backend.herokuapp.com/assets/products/img1.jpg",
+    img: "https://flatlogic-node-backend.herokuapp.com/assets/products/img1.jpg",
     title: null,
     subtitle: null,
     price: 0.1,
@@ -52,40 +50,18 @@ const CreateProduct = () => {
     discount: 0
   });
 
-  // function sendNotification() {
-  //   const componentProps = {
-  //     type: "feedback",
-  //     message: "Product has been Updated!",
-  //     variant: "contained",
-  //     color: "success"
-  //   };
-  //   const options = {
-  //     type: "info",
-  //     position: toast.POSITION.TOP_RIGHT,
-  //     progressClassName: classes.progress,
-  //     className: classes.notification,
-  //     timeOut: 1000
-  //   };
-  //   return toast(
-  //     <Notification
-  //       {...componentProps}
-  //       className={classes.notificationComponent}
-  //     />,
-  //     options
-  //   );
-  // }
-
+  // Fetch products and images on mount
   useEffect(() => {
     getProductsRequest(context.setProducts);
     getProductsImages(context.setProducts);
   }, []); // eslint-disable-line
 
+  // Update localProducts when context changes
   useEffect(() => {
     setLocalProducts(context.products.products[getId(id)]);
-  }, [context]); // eslint-disable-line
-
-  const history = useHistory();
+  }, [context, id]); // eslint-disable-line
 
+  // Handles editing for existing product
   const editProduct = e => {
     setLocalProducts({
       ...localProducts,
@@ -93,6 +69,7 @@ const CreateProduct = () => {
     });
   };
 
+  // Handles editing for new product
   const editNewProduct = e => {
     setNewProduct({
       ...newProduct,
@@ -100,51 +77,39 @@ const CreateProduct = () => {
     });
   };
 
+  // Update product (edit mode) then navigate back to management page
   const getEditProduct = () => {
     updateProduct(localProducts, context.setProducts);
-    history.push("/app/ecommerce/management");
+    navigate("/app/ecommerce/management"); // using navigate
     // sendNotification();
   };
 
+  // Create new product then navigate back to management page
   const createNewProduct = () => {
     createProduct(newProduct, context.setProducts);
-    history.push("/app/ecommerce/management");
+    navigate("/app/ecommerce/management"); // using navigate
   };
 
+  // Change image source for the product based on selection
   const changeImgSrc = e => {
     if (isCreateProduct) {
-      setNewProduct({ ...localProducts, img: e.target.value });
+      setNewProduct({ ...newProduct, img: e.target.value });
     } else {
       setLocalProducts({ ...localProducts, img: e.target.value });
     }
   };
 
-
-  const isCreateProduct =
-    window.location.hash === "#/app/ecommerce/management/create";
+  // Determine if we are creating a new product based on window location hash.
+  // Consider moving to useLocation() in a real-world scenario.
+  const isCreateProduct = window.location.hash === "#/app/ecommerce/management/create";
 
   return (
     <>
       <Grid container spacing={3}>
-        {/*<ToastContainer*/}
-        {/*  className={classes.toastsContainer}*/}
-        {/*  closeButton={*/}
-        {/*    <CloseButton className={classes.notificationCloseButton} />*/}
-        {/*  }*/}
-        {/*  closeOnClick={false}*/}
-        {/*  progressClassName={classes.notificationProgress}*/}
-        {/*/>*/}
         <Grid item xs={12}>
-          <Widget
-            title={isCreateProduct ? "New product" : "Edit product"}
-            disableWidgetMenu
-          >
+          <Widget title={isCreateProduct ? "New product" : "Edit product"} disableWidgetMenu>
             {config.isBackend && !context.products.isLoaded ? (
-              <Box
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-              >
+              <Box display={"flex"} justifyContent={"center"} alignItems={"center"}>
                 <CircularProgress size={26} />
               </Box>
             ) : (
@@ -155,15 +120,13 @@ const CreateProduct = () => {
                   </Box>
                   <Box width={200}>
                     <Select
-                      value={
-                        isCreateProduct ? newProduct.img : localProducts.img
-                      }
+                      value={isCreateProduct ? newProduct.img : localProducts.img}
                       fullWidth
                       onChange={e => changeImgSrc(e)}
                     >
-                      {context.products.images.map((c, i) => (
+                      {context.products.images.map((c) => (
                         <MenuItem value={c} key={c}>
-                          <img src={c} style={{ height: 100, width: 200 }} alt={"ecommerce product"}/>
+                          <img src={c} style={{ height: 100, width: 200 }} alt={"ecommerce product"} />
                         </MenuItem>
                       ))}
                     </Select>
@@ -178,13 +141,9 @@ const CreateProduct = () => {
                       id="title"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct ? newProduct.title : localProducts.title
-                      }
+                      value={isCreateProduct ? newProduct.title : localProducts.title}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -197,15 +156,9 @@ const CreateProduct = () => {
                       id="subtitle"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct
-                          ? newProduct.subtitle
-                          : localProducts.subtitle
-                      }
+                      value={isCreateProduct ? newProduct.subtitle : localProducts.subtitle}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -218,14 +171,10 @@ const CreateProduct = () => {
                       id="price"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct ? newProduct.price : localProducts.price
-                      }
+                      value={isCreateProduct ? newProduct.price : localProducts.price}
                       type={"number"}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -238,16 +187,10 @@ const CreateProduct = () => {
                       id="discount"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct
-                          ? newProduct.discount
-                          : localProducts.discount
-                      }
+                      value={isCreateProduct ? newProduct.discount : localProducts.discount}
                       type={"number"}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -261,15 +204,9 @@ const CreateProduct = () => {
                       margin="normal"
                       variant="outlined"
                       multiline
-                      value={
-                        isCreateProduct
-                          ? newProduct["description_1"]
-                          : localProducts["description_1"]
-                      }
+                      value={isCreateProduct ? newProduct["description_1"] : localProducts["description_1"]}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -283,15 +220,9 @@ const CreateProduct = () => {
                       margin="normal"
                       variant="outlined"
                       multiline
-                      value={
-                        isCreateProduct
-                          ? newProduct["description_2"]
-                          : localProducts["description_2"]
-                      }
+                      value={isCreateProduct ? newProduct["description_2"] : localProducts["description_2"]}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -304,13 +235,9 @@ const CreateProduct = () => {
                       id="code"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct ? newProduct.code : localProducts.code
-                      }
+                      value={isCreateProduct ? newProduct.code : localProducts.code}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -323,15 +250,9 @@ const CreateProduct = () => {
                       id="hashtag"
                       margin="normal"
                       variant="outlined"
-                      value={
-                        isCreateProduct
-                          ? newProduct.hashtag
-                          : localProducts.hashtag
-                      }
+                      value={isCreateProduct ? newProduct.hashtag : localProducts.hashtag}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -348,12 +269,10 @@ const CreateProduct = () => {
                       fullWidth
                       value={
                         isCreateProduct
-                          ? newProduct.technology.join(' ')
-                          : localProducts.technology.join(' ')
-                      }
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
+                          ? newProduct.technology.join(" ")
+                          : localProducts.technology.join(" ")
                       }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -367,15 +286,9 @@ const CreateProduct = () => {
                       margin="normal"
                       variant="outlined"
                       type={"number"}
-                      value={
-                        isCreateProduct
-                          ? newProduct.rating
-                          : localProducts.rating
-                      }
+                      value={isCreateProduct ? newProduct.rating : localProducts.rating}
                       fullWidth
-                      onChange={e =>
-                        isCreateProduct ? editNewProduct(e) : editProduct(e)
-                      }
+                      onChange={e => isCreateProduct ? editNewProduct(e) : editProduct(e)}
                     />
                   </Box>
                 </Box>
@@ -384,15 +297,13 @@ const CreateProduct = () => {
                     variant={"contained"}
                     color={"success"}
                     style={{ marginRight: 8 }}
-                    onClick={() =>
-                      isCreateProduct ? createNewProduct() : getEditProduct()
-                    }
+                    onClick={() => isCreateProduct ? createNewProduct() : getEditProduct()}
                   >
                     {isCreateProduct ? "Save" : "Edit"}
                   </Button>
                   <Button
                     variant={"contained"}
-                    onClick={() => history.push("/app/ecommerce/management")}
+                    onClick={() => navigate("/app/ecommerce/management")}  // updated navigation
                   >
                     Back
                   </Button>
@@ -406,5 +317,4 @@ const CreateProduct = () => {
   );
 };
 
-
-export default CreateProduct;
+export default CreateProduct;
\ No newline at end of file
diff --git a/src/pages/ecommerce/Ecommerce.js b/src/pages/ecommerce/Ecommerce.js
index 175c5410..aed26581 100644
--- a/src/pages/ecommerce/Ecommerce.js
+++ b/src/pages/ecommerce/Ecommerce.js
@@ -15,20 +15,17 @@ import {
   CircularProgress,
   Box,
   InputAdornment,
-  TextField as Input
+  TextField as Input,
 } from "@mui/material";
-import { Link as RouterLink, withRouter, useHistory } from "react-router-dom";
-
-//config
+import { Link as RouterLink, useNavigate } from "react-router-dom"; // Removed withRouter, useNavigate now used
+// config
 import config from "../../config";
-
 // Material UI icons
 import {
   Star as StarIcon,
   Delete as DeleteIcon,
   FilterList as FilterListIcon,
-  Close as CloseIcon,
-  Search as SearchIcon
+  Search as SearchIcon,
 } from "@mui/icons-material";
 import { yellow } from "@mui/material/colors";
 import { lighten } from "@mui/material/styles";
@@ -36,19 +33,16 @@ import { makeStyles } from "@mui/styles";
 import PropTypes from "prop-types";
 import useStyles from "./styles";
 import cn from "classnames";
-
-//context
+// context
 import {
   ProductsProvider,
   useProductsState,
   getProductsRequest,
-  deleteProductRequest
+  deleteProductRequest,
 } from "../../context/ProductContext";
-
 // components
 import Widget from "../../components/Widget";
 import { Typography, Button, Link } from "../../components/Wrappers";
-// import Notification from "../../components/Notification";
 
 function desc(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
@@ -67,7 +61,7 @@ function stableSort(array, cmp) {
     if (order !== 0) return order;
     return a[1] - b[1];
   });
-  return stabilizedThis.map(el => el[0]);
+  return stabilizedThis.map((el) => el[0]);
 }
 
 function getSorting(order, orderBy) {
@@ -77,18 +71,13 @@ function getSorting(order, orderBy) {
 }
 
 const headCells = [
-  {
-    id: "id",
-    numeric: true,
-    disablePadding: true,
-    label: "ID"
-  },
+  { id: "id", numeric: true, disablePadding: true, label: "ID" },
   { id: "image", numeric: true, disablePadding: false, label: "Image" },
   { id: "title", numeric: true, disablePadding: false, label: "Title" },
   { id: "subtitle", numeric: true, disablePadding: false, label: "Subtitle" },
   { id: "price", numeric: true, disablePadding: false, label: "Price" },
   { id: "rating", numeric: true, disablePadding: false, label: "Rating" },
-  { id: "actions", numeric: true, disablePadding: false, label: "Actions" }
+  { id: "actions", numeric: true, disablePadding: false, label: "Actions" },
 ];
 
 function EnhancedTableHead(props) {
@@ -99,9 +88,9 @@ function EnhancedTableHead(props) {
     orderBy,
     numSelected,
     rowCount,
-    onRequestSort
+    onRequestSort,
   } = props;
-  const createSortHandler = property => event => {
+  const createSortHandler = (property) => (event) => {
     onRequestSort(event, property);
   };
 
@@ -116,7 +105,7 @@ function EnhancedTableHead(props) {
             inputProps={{ "aria-label": "select all rows" }}
           />
         </TableCell>
-        {headCells.map(headCell => (
+        {headCells.map((headCell) => (
           <TableCell
             key={headCell.id}
             align={headCell.numeric ? "left" : "right"}
@@ -149,46 +138,41 @@ EnhancedTableHead.propTypes = {
   onSelectAllClick: PropTypes.func.isRequired,
   order: PropTypes.oneOf(["asc", "desc"]).isRequired,
   orderBy: PropTypes.string.isRequired,
-  rowCount: PropTypes.number.isRequired
+  rowCount: PropTypes.number.isRequired,
 };
 
-const useToolbarStyles = makeStyles(theme => ({
+const useToolbarStyles = makeStyles((theme) => ({
   root: {
     paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(1)
+    paddingRight: theme.spacing(1),
   },
   highlight:
-    theme.palette.type === "light"
+    theme.palette.mode === "light"
       ? {
-          color: theme.palette.secondary.main,
-          backgroundColor: lighten(theme.palette.secondary.light, 0.85)
-        }
+        color: theme.palette.secondary.main,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+      }
       : {
-          color: theme.palette.text.primary,
-          backgroundColor: theme.palette.secondary.dark
-        },
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.dark,
+      },
   title: {
-    flex: "1 1 100%"
-  }
+    flex: "1 1 100%",
+  },
 }));
 
 const EnhancedTableToolbar = ({ numSelected, selected, deleteProducts }) => {
-  const history = useHistory();
+  const navigate = useNavigate(); // useNavigate in place of useHistory
   const classes = useToolbarStyles();
-
   return (
     <Toolbar
       className={cn(classes.root, {
-        [classes.highlight]: numSelected > 0
+        [classes.highlight]: numSelected > 0,
       })}
       style={{ marginTop: 8 }}
     >
       {numSelected > 0 ? (
-        <Typography
-          className={classes.title}
-          color="inherit"
-          variant="subtitle1"
-        >
+        <Typography className={classes.title} color="inherit" variant="subtitle1">
           {numSelected} selected
         </Typography>
       ) : (
@@ -196,11 +180,10 @@ const EnhancedTableToolbar = ({ numSelected, selected, deleteProducts }) => {
           Products
         </Typography>
       )}
-
       {numSelected > 0 ? (
         <Tooltip title="Delete">
           <IconButton aria-label="delete">
-            <DeleteIcon onClick={e => deleteProducts(selected, history, e)} />
+            <DeleteIcon onClick={(e) => deleteProducts(selected, navigate, e)} />
           </IconButton>
         </Tooltip>
       ) : (
@@ -215,10 +198,10 @@ const EnhancedTableToolbar = ({ numSelected, selected, deleteProducts }) => {
 };
 
 EnhancedTableToolbar.propTypes = {
-  numSelected: PropTypes.number.isRequired
+  numSelected: PropTypes.number.isRequired,
 };
 
-function EcommercePage({ history }) {
+function EcommercePage() {
   const classes = useStyles();
   const context = useProductsState();
   const [order, setOrder] = React.useState("asc");
@@ -226,12 +209,11 @@ function EcommercePage({ history }) {
   const [selected, setSelected] = React.useState([]);
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [backProducts, setBackProducts] = React.useState(
-    context.products.products
-  );
+  const [backProducts, setBackProducts] = React.useState(context.products.products);
+  const navigate = useNavigate(); // useNavigate replaces history
 
   useEffect(() => {
-    // sendNotification();
+    // Optionally send notification here
     getProductsRequest(context.setProducts);
   }, []); // eslint-disable-line
 
@@ -245,25 +227,24 @@ function EcommercePage({ history }) {
     setOrderBy(property);
   };
 
-  const searchProducts = e => {
+  const searchProducts = (e) => {
     let products = [];
-    context.products.products.forEach(c => {
+    context.products.products.forEach((c) => {
       if (c.title.includes(e.currentTarget.value)) {
         products.push(c);
       }
-      return;
     });
     setBackProducts(products);
   };
 
   const openProduct = (id, event) => {
-    history.push("/app/ecommerce/product/" + id);
+    navigate("/app/ecommerce/product/" + id);
     event.stopPropagation();
   };
 
-  const handleSelectAllClick = event => {
+  const handleSelectAllClick = (event) => {
     if (event.target.checked) {
-      const newSelecteds = backProducts.map(n => n.id);
+      const newSelecteds = backProducts.map((n) => n.id);
       setSelected(newSelecteds);
       return;
     }
@@ -273,7 +254,6 @@ function EcommercePage({ history }) {
   const handleClick = (event, name) => {
     const selectedIndex = selected.indexOf(name);
     let newSelected = [];
-
     if (selectedIndex === -1) {
       newSelected = newSelected.concat(selected, name);
     } else if (selectedIndex === 0) {
@@ -286,7 +266,6 @@ function EcommercePage({ history }) {
         selected.slice(selectedIndex + 1)
       );
     }
-
     setSelected(newSelected);
   };
 
@@ -294,48 +273,22 @@ function EcommercePage({ history }) {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = event => {
+  const handleChangeRowsPerPage = (event) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
   };
 
-  const isSelected = name => selected.indexOf(name) !== -1;
-
-  const emptyRows =
-    rowsPerPage -
-    Math.min(rowsPerPage, backProducts.length - page * rowsPerPage);
+  const isSelected = (name) => selected.indexOf(name) !== -1;
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, backProducts.length - page * rowsPerPage);
 
-  // function sendNotification() {
-  //   const componentProps = {
-  //     type: "feedback",
-  //     message:
-  //       "This page is only available in React Material Admin Full with Node.js integration!",
-  //     variant: "contained",
-  //     color: "success"
-  //   };
-  //   const options = {
-  //     type: "info",
-  //     position: toast.POSITION.TOP_RIGHT,
-  //     progressClassName: classes.progress,
-  //     className: classes.notification,
-  //     timeOut: 1000
-  //   };
-  //   return toast(
-  //     <Notification
-  //       {...componentProps}
-  //       className={classes.notificationComponent}
-  //     />,
-  //     options
-  //   );
-  // }
-
-  const deleteProduct = (id, history, event) => {
-    deleteProductRequest({ id, history, dispatch: context.setProducts });
+  // Delete product function; note that deleteProductRequest now receives navigate instead of history
+  const deleteProduct = (id, navigateInstance, event) => {
+    deleteProductRequest({ id, navigate: navigateInstance, dispatch: context.setProducts });
     event.stopPropagation();
   };
 
   const openProductEdit = (event, id) => {
-    history.push("/app/ecommerce/management/edit/" + id);
+    navigate("/app/ecommerce/management/edit/" + id);
     event.stopPropagation();
   };
 
@@ -346,27 +299,13 @@ function EcommercePage({ history }) {
           <Widget
             disableWidgetMenu
             header={
-              <Box
-                display={"flex"}
-                alignItems={"center"}
-                justifyContent={"space-between"}
-                width={"100%"}
-              >
+              <Box display={"flex"} alignItems={"center"} justifyContent={"space-between"} width={"100%"}>
                 <Box display={"flex"} style={{ width: "calc(100% - 20px)" }}>
-                  <Typography
-                    variant="h6"
-                    color="text"
-                    colorBrightness={"secondary"}
-                    noWrap
-                  >
+                  <Typography variant="h6" color="text" colorBrightness={"secondary"} noWrap>
                     Products
                   </Typography>
                   <Box alignSelf="flex-end" ml={1}>
-                    <Typography
-                      color="text"
-                      colorBrightness={"hint"}
-                      variant={"caption"}
-                    >
+                    <Typography color="text" colorBrightness={"hint"} variant={"caption"}>
                       {backProducts.length} total
                     </Typography>
                   </Box>
@@ -382,55 +321,40 @@ function EcommercePage({ history }) {
                       <InputAdornment position="start">
                         <SearchIcon className={classes.searchIcon} />
                       </InputAdornment>
-                    )
+                    ),
                   }}
-                  onChange={e => searchProducts(e)}
+                  onChange={(e) => searchProducts(e)}
                 />
               </Box>
             }
           >
-            { config.isBackend ? (
+            {config.isBackend ? (
               <Button
-                  style={{marginTop: -10}}
-                  variant={"contained"}
-                  component={RouterLink}
-                  to={"/app/ecommerce/management/create"}
-                  color={"success"}
+                style={{ marginTop: -10 }}
+                variant={"contained"}
+                component={RouterLink}
+                to={"/app/ecommerce/management/create"}
+                color={"success"}
               >
                 Create Product
               </Button>
             ) : (
-                <Button
-                    style={{marginTop: -10}}
-                    variant={"contained"}
-                    component={RouterLink}
-                    to={"#"}
-                    color={"success"}
-                >
-                  Create Product
-                </Button>
-            )
-            }
+              <Button style={{ marginTop: -10 }} variant={"contained"} component={RouterLink} to={"#"} color={"success"}>
+                Create Product
+              </Button>
+            )}
             <EnhancedTableToolbar
               numSelected={selected.length}
               selected={selected}
               deleteProducts={deleteProduct}
             />
             {config.isBackend && !context.products.isLoaded ? (
-              <Box
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-              >
+              <Box display={"flex"} justifyContent={"center"} alignItems={"center"}>
                 <CircularProgress size={26} />
               </Box>
             ) : (
               <div className={classes.tableWrapper}>
-                <Table
-                  className={classes.table}
-                  aria-labelledby="tableTitle"
-                  aria-label="enhanced table"
-                >
+                <Table className={classes.table} aria-labelledby="tableTitle" aria-label="enhanced table">
                   <EnhancedTableHead
                     classes={classes}
                     numSelected={selected.length}
@@ -443,55 +367,37 @@ function EcommercePage({ history }) {
                   <ProductsProvider>
                     <TableBody>
                       {stableSort(backProducts, getSorting(order, orderBy))
-                        .slice(
-                          page * rowsPerPage,
-                          page * rowsPerPage + rowsPerPage
-                        )
+                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map((row, index) => {
                           const isItemSelected = isSelected(row.id);
                           const labelId = `enhanced-table-checkbox-${index}`;
-
                           return (
                             <TableRow
                               hover
-                              onClick={event => handleClick(event, row.id)}
+                              onClick={(event) => handleClick(event, row.id)}
                               role="checkbox"
                               aria-checked={isItemSelected}
                               selected={isItemSelected}
                               key={row.id}
                             >
                               <TableCell padding="checkbox">
-                                <Checkbox
-                                  checked={isItemSelected}
-                                  inputProps={{ "aria-labelledby": labelId }}
-                                />
+                                <Checkbox checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
                               </TableCell>
-                              <TableCell
-                                component="th"
-                                id={labelId}
-                                scope="row"
-                                padding="none"
-                              >
+                              <TableCell component="th" id={labelId} scope="row" padding="none">
                                 {row.id}
                               </TableCell>
                               <TableCell>
-                                <img
-                                  src={row.img}
-                                  alt={row.title}
-                                  style={{ width: 100 }}
-                                />
+                                <img src={row.img} alt={row.title} style={{ width: 100 }} />
                               </TableCell>
                               <TableCell>
                                 <Link
                                   component={"button"}
                                   variant="body2"
-                                  onClick={e => openProduct(row.id, e)}
+                                  onClick={(e) => openProduct(row.id, e)}
                                   color={"primary"}
                                 >
                                   {row.title
-                                    ? row.title.split("").map((c, n) => {
-                                        return n === 0 ? c.toUpperCase() : c;
-                                      })
+                                    ? row.title.split("").map((c, n) => (n === 0 ? c.toUpperCase() : c))
                                     : null}
                                 </Link>
                               </TableCell>
@@ -499,75 +405,40 @@ function EcommercePage({ history }) {
                               <TableCell>${row.price}</TableCell>
                               <TableCell>
                                 <Box display={"flex"} alignItems={"center"}>
-                                  <Typography
-                                    style={{ color: yellow[700] }}
-                                    display={"inline"}
-                                  >
+                                  <Typography style={{ color: yellow[700] }} display={"inline"}>
                                     {row.rating}
                                   </Typography>{" "}
-                                  <StarIcon
-                                    style={{
-                                      color: yellow[700],
-                                      marginTop: -5
-                                    }}
-                                  />
+                                  <StarIcon style={{ color: yellow[700], marginTop: -5 }} />
                                 </Box>
                               </TableCell>
-                              {/*<TableCell>*/}
-                              {/*  <Box display={"flex"}>*/}
-                              {/*    <Box mr={1} alignSelf={"center"}>*/}
-                              {/*      <Dot color={row.color} size={"medium"} />*/}
-                              {/*    </Box>*/}
-                              {/*    <Box mr={1}>*/}
-                              {/*      <Typography variant={"subtitle2"}>*/}
-                              {/*        {row.status}*/}
-                              {/*      </Typography>*/}
-                              {/*      <LinearProgress*/}
-                              {/*        variant="determinate"*/}
-                              {/*        value={+row.process.split("%")[0]}*/}
-                              {/*      />*/}
-                              {/*    </Box>*/}
-                              {/*    <Box display={"flex"} alignSelf={"flex-end"}>*/}
-                              {/*      <Typography*/}
-                              {/*        color={"text"}*/}
-                              {/*        colorBrightness={"hint"}*/}
-                              {/*      >*/}
-                              {/*        {row.process}*/}
-                              {/*      </Typography>*/}
-                              {/*    </Box>*/}
-                              {/*  </Box>*/}
-                              {/*</TableCell>*/}
                               <TableCell>
                                 <Box display={"flex"} alignItems={"center"}>
-                                  { config.isBackend ? (
+                                  {config.isBackend ? (
                                     <Button
-                                        color="success"
-                                        size="small"
-                                        style={{marginRight: 16}}
-                                        variant="contained"
-                                        onClick={e => openProductEdit(e, row.id)}
+                                      color="success"
+                                      size="small"
+                                      style={{ marginRight: 16 }}
+                                      variant="contained"
+                                      onClick={(e) => openProductEdit(e, row.id)}
                                     >
                                       Edit
                                     </Button>
                                   ) : (
-                                      <Button
-                                          color="success"
-                                          size="small"
-                                          style={{marginRight: 16}}
-                                          variant="contained"
-                                          onClick={(e) => e.stopPropagation()}
-                                      >
-                                        Edit
-                                      </Button>
-                                  )
-                                  }
+                                    <Button
+                                      color="success"
+                                      size="small"
+                                      style={{ marginRight: 16 }}
+                                      variant="contained"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      Edit
+                                    </Button>
+                                  )}
                                   <Button
                                     color="secondary"
                                     size="small"
                                     variant="contained"
-                                    onClick={e =>
-                                      deleteProduct(row.id, history, e)
-                                    }
+                                    onClick={(e) => deleteProduct(row.id, navigate, e)}
                                   >
                                     Delete
                                   </Button>
@@ -593,10 +464,10 @@ function EcommercePage({ history }) {
               rowsPerPage={rowsPerPage}
               page={page}
               backIconButtonProps={{
-                "aria-label": "previous page"
+                "aria-label": "previous page",
               }}
               nextIconButtonProps={{
-                "aria-label": "next page"
+                "aria-label": "next page",
               }}
               onPageChange={handleChangePage}
               onRowsPerPageChange={handleChangeRowsPerPage}
@@ -607,10 +478,4 @@ function EcommercePage({ history }) {
     </>
   );
 }
-
-// eslint-disable-next-line no-unused-vars
-function CloseButton({ closeToast, className }) {
-  return <CloseIcon className={className} onClick={closeToast} />;
-}
-
-export default withRouter(EcommercePage);
+export default EcommercePage; // Removed withRouter wrapper
\ No newline at end of file
diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js
index 4a9bedbe..8904f4ef 100644
--- a/src/pages/login/Login.js
+++ b/src/pages/login/Login.js
@@ -8,7 +8,7 @@ import {
   TextField as Input,
   Typography,
 } from '@mui/material';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom'; // Replace withRouter and useHistory
 import classnames from 'classnames';
 
 // styles
@@ -24,10 +24,11 @@ import {
   loginUser,
   registerUser,
   sendPasswordResetEmail,
+  receiveToken,
+  doInit,
 } from '../../context/UserContext';
-import { receiveToken, doInit } from '../../context/UserContext';
 
-//components
+// components
 import { Button } from '../../components/Wrappers';
 import Widget from '../../components/Widget';
 import config from '../../config';
@@ -45,26 +46,31 @@ const getGreeting = () => {
   }
 };
 
-function Login(props) {
+function Login() {
   let classes = useStyles();
-  const tab = new URLSearchParams(props.location.search).get('tab');
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  // global
+  // Get ?tab query param from the URL
+  const tabQuery = new URLSearchParams(location.search).get('tab');
+
+  // global dispatch for user context
   let userDispatch = useUserDispatch();
 
+  // Retrieve token from URL if available and initialize
   useEffect(() => {
-    const params = new URLSearchParams(props.location.search);
+    const params = new URLSearchParams(location.search);
     const token = params.get('token');
     if (token) {
       receiveToken(token, userDispatch);
       doInit()(userDispatch);
     }
-  }, []); // eslint-disable-line
+  }, [location.search, userDispatch]);
 
-  // local
+  // local state
   let [isLoading, setIsLoading] = useState(false);
   let [error, setError] = useState(null);
-  let [activeTabId, setActiveTabId] = useState(+tab ?? 0);
+  let [activeTabId, setActiveTabId] = useState(tabQuery ? +tabQuery : 0);
   let [nameValue, setNameValue] = useState('');
   let [loginValue, setLoginValue] = useState('admin@flatlogic.com');
   let [passwordValue, setPasswordValue] = useState('password');
@@ -81,9 +87,9 @@ function Login(props) {
         userDispatch,
         loginValue,
         passwordValue,
-        props.history,
+        navigate, // using navigate instead of props.history
         setIsLoading,
-        setError,
+        setError
       );
     }
   };
@@ -91,7 +97,7 @@ function Login(props) {
   return (
     <Grid container className={classes.container}>
       <div className={classes.logotypeContainer}>
-        <img src={logo} alt='logo' className={classes.logotypeImage} />
+        <img src={logo} alt="logo" className={classes.logotypeImage} />
         <Typography className={classes.logotypeText}>
           React Material Admin Full
         </Typography>
@@ -105,7 +111,7 @@ function Login(props) {
           {isForgot ? (
             <div>
               <Input
-                id='password'
+                id="password"
                 InputProps={{
                   classes: {
                     underline: classes.InputUnderline,
@@ -114,9 +120,9 @@ function Login(props) {
                 }}
                 value={forgotEmail}
                 onChange={(e) => setForgotEmail(e.target.value)}
-                margin='normal'
-                placeholder='Email'
-                type='Email'
+                margin="normal"
+                placeholder="Email"
+                type="email"
                 fullWidth
               />
               <div className={classes.formButtons}>
@@ -128,16 +134,16 @@ function Login(props) {
                     onClick={() =>
                       sendPasswordResetEmail(forgotEmail)(userDispatch)
                     }
-                    variant='contained'
-                    color='primary'
-                    size='large'
+                    variant="contained"
+                    color="primary"
+                    size="large"
                   >
                     Send
                   </Button>
                 )}
                 <Button
-                  color='primary'
-                  size='large'
+                  color="primary"
+                  size="large"
                   onClick={() => setIsForgot(!isForgot)}
                   className={classes.forgetButton}
                 >
@@ -150,12 +156,12 @@ function Login(props) {
               <Tabs
                 value={activeTabId}
                 onChange={(e, id) => setActiveTabId(id)}
-                indicatorColor='primary'
-                textColor='primary'
+                indicatorColor="primary"
+                textColor="primary"
                 centered
               >
-                <Tab label='Login' classes={{ root: classes.tab }} />
-                <Tab label='New User' classes={{ root: classes.tab }} />
+                <Tab label="Login" classes={{ root: classes.tab }} />
+                <Tab label="New User" classes={{ root: classes.tab }} />
               </Tabs>
               {activeTabId === 0 && (
                 <React.Fragment>
@@ -166,39 +172,39 @@ function Login(props) {
                       style={{ marginTop: 32 }}
                     >
                       <Typography
-                        variant={'body2'}
+                        variant="body2"
                         component="div"
                         style={{ textAlign: 'center' }}
                       >
-                        This is a real app with Node.js backend - use
-                        <Typography variant={'body2'} weight={'bold'}>
+                        This is a real app with Node.js backend - use{' '}
+                        <Typography variant="body2" weight="bold">
                           "admin@flatlogic.com / password"
                         </Typography>{' '}
                         to login!
                       </Typography>
                     </Widget>
                   ) : null}
-                  <Typography variant='h1' className={classes.greeting}>
+                  <Typography variant="h1" className={classes.greeting}>
                     {getGreeting()}, User
                   </Typography>
                   <Button
-                    size='large'
+                    size="large"
                     className={classes.googleButton}
                     onClick={() =>
                       loginUser(
                         userDispatch,
                         loginValue,
                         passwordValue,
-                        props.history,
+                        navigate,
                         setIsLoading,
                         setError,
-                        'google',
+                        'google'
                       )
                     }
                   >
                     <img
                       src={google}
-                      alt='google'
+                      alt="google"
                       className={classes.googleIcon}
                     />
                     &nbsp;Sign in with Google
@@ -212,16 +218,14 @@ function Login(props) {
                   </div>
                   <Grow
                     in={error}
-                    style={
-                      !error ? { display: 'none' } : { display: 'inline-block' }
-                    }
+                    style={!error ? { display: 'none' } : { display: 'inline-block' }}
                   >
                     <Typography className={classes.errorMessage}>
                       Something is wrong with your login or password :(
                     </Typography>
                   </Grow>
                   <Input
-                    id='email'
+                    id="email"
                     InputProps={{
                       classes: {
                         underline: classes.InputUnderline,
@@ -230,14 +234,14 @@ function Login(props) {
                     }}
                     value={loginValue}
                     onChange={(e) => setLoginValue(e.target.value)}
-                    margin='normal'
-                    placeholder='Email Adress'
-                    type='email'
+                    margin="normal"
+                    placeholder="Email Adress"
+                    type="email"
                     fullWidth
                     onKeyDown={(e) => loginOnEnterKey(e)}
                   />
                   <Input
-                    id='password'
+                    id="password"
                     InputProps={{
                       classes: {
                         underline: classes.InputUnderline,
@@ -246,9 +250,9 @@ function Login(props) {
                     }}
                     value={passwordValue}
                     onChange={(e) => setPasswordValue(e.target.value)}
-                    margin='normal'
-                    placeholder='Password'
-                    type='password'
+                    margin="normal"
+                    placeholder="Password"
+                    type="password"
                     fullWidth
                     onKeyDown={(e) => loginOnEnterKey(e)}
                   />
@@ -266,21 +270,21 @@ function Login(props) {
                             userDispatch,
                             loginValue,
                             passwordValue,
-                            props.history,
+                            navigate,
                             setIsLoading,
-                            setError,
+                            setError
                           )
                         }
-                        variant='contained'
-                        color='primary'
-                        size='large'
+                        variant="contained"
+                        color="primary"
+                        size="large"
                       >
                         Login
                       </Button>
                     )}
                     <Button
-                      color='primary'
-                      size='large'
+                      color="primary"
+                      size="large"
                       onClick={() => setIsForgot(!isForgot)}
                       className={classes.forgetButton}
                     >
@@ -291,10 +295,10 @@ function Login(props) {
               )}
               {activeTabId === 1 && (
                 <React.Fragment>
-                  <Typography variant='h1' className={classes.greeting}>
+                  <Typography variant="h1" className={classes.greeting}>
                     Welcome!
                   </Typography>
-                  <Typography variant='h2' className={classes.subGreeting}>
+                  <Typography variant="h2" className={classes.subGreeting}>
                     Create your account
                   </Typography>
                   <Grow in={error}>
@@ -303,7 +307,7 @@ function Login(props) {
                     </Typography>
                   </Grow>
                   <Input
-                    id='name'
+                    id="name"
                     InputProps={{
                       classes: {
                         underline: classes.InputUnderline,
@@ -312,13 +316,13 @@ function Login(props) {
                     }}
                     value={nameValue}
                     onChange={(e) => setNameValue(e.target.value)}
-                    margin='normal'
-                    placeholder='Full Name'
-                    type='email'
+                    margin="normal"
+                    placeholder="Full Name"
+                    type="email"
                     fullWidth
                   />
                   <Input
-                    id='email'
+                    id="email"
                     InputProps={{
                       classes: {
                         underline: classes.InputUnderline,
@@ -327,13 +331,13 @@ function Login(props) {
                     }}
                     value={loginValue}
                     onChange={(e) => setLoginValue(e.target.value)}
-                    margin='normal'
-                    placeholder='Email Adress'
-                    type='email'
+                    margin="normal"
+                    placeholder="Email Adress"
+                    type="email"
                     fullWidth
                   />
                   <Input
-                    id='password'
+                    id="password"
                     InputProps={{
                       classes: {
                         underline: classes.InputUnderline,
@@ -342,9 +346,9 @@ function Login(props) {
                     }}
                     value={passwordValue}
                     onChange={(e) => setPasswordValue(e.target.value)}
-                    margin='normal'
-                    placeholder='Password'
-                    type='password'
+                    margin="normal"
+                    placeholder="Password"
+                    type="password"
                     fullWidth
                   />
                   <div className={classes.creatingButtonContainer}>
@@ -357,9 +361,9 @@ function Login(props) {
                             userDispatch,
                             loginValue,
                             passwordValue,
-                            props.history,
+                            navigate,
                             setIsLoading,
-                            setError,
+                            setError
                           )()
                         }
                         disabled={
@@ -367,9 +371,9 @@ function Login(props) {
                           passwordValue.length === 0 ||
                           nameValue.length === 0
                         }
-                        size='large'
-                        variant='contained'
-                        color='primary'
+                        size="large"
+                        variant="contained"
+                        color="primary"
                         fullWidth
                         className={classes.createAccountButton}
                       >
@@ -385,26 +389,26 @@ function Login(props) {
                     <div className={classes.formDivider} />
                   </div>
                   <Button
-                    size='large'
+                    size="large"
                     className={classnames(
                       classes.googleButton,
-                      classes.googleButtonCreating,
+                      classes.googleButtonCreating
                     )}
                     onClick={() =>
                       loginUser(
                         userDispatch,
                         loginValue,
                         passwordValue,
-                        props.history,
+                        navigate,
                         setIsLoading,
                         setError,
-                        'google',
+                        'google'
                       )
                     }
                   >
                     <img
                       src={google}
-                      alt='google'
+                      alt="google"
                       className={classes.googleIcon}
                     />
                     &nbsp;Sign in with Google
@@ -414,13 +418,13 @@ function Login(props) {
             </>
           )}
         </div>
-        <Typography color='primary' className={classes.copyright}>
+        <Typography color="primary" className={classes.copyright}>
           2014-{new Date().getFullYear()}{' '}
           <a
             style={{ textDecoration: 'none', color: 'inherit' }}
-            href='https://flatlogic.com'
-            rel='noopener noreferrer'
-            target='_blank'
+            href="https://flatlogic.com"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             Flatlogic
           </a>
@@ -431,4 +435,4 @@ function Login(props) {
   );
 }
 
-export default withRouter(Login);
+export default Login;
\ No newline at end of file
diff --git a/src/pages/nav/styles.js b/src/pages/nav/styles.js
index 77389e9c..ac58b666 100644
--- a/src/pages/nav/styles.js
+++ b/src/pages/nav/styles.js
@@ -63,7 +63,7 @@ export default makeStyles(theme => ({
     color: "rgba(255, 255, 255, 0.35)",
   },
   inputRoot: {
-    color: "inherit",
+    color: "currentColor",
     width: "100%",
   },
   inputInput: {
diff --git a/src/pages/reset/Reset.js b/src/pages/reset/Reset.js
index c55ad406..c0a8b869 100644
--- a/src/pages/reset/Reset.js
+++ b/src/pages/reset/Reset.js
@@ -1,31 +1,29 @@
 import React, { useState } from 'react';
 import { Grid, CircularProgress, TextField as Input } from '@mui/material';
-import { withRouter, useHistory } from 'react-router-dom';
-
+import { useNavigate, useLocation } from 'react-router-dom'; // useNavigate replaces useHistory, useLocation for location info
 // styles
 import useStyles from './styles';
-
 // logo
 import logo from './logo.svg';
-
 // context
-import {
-  useUserDispatch,
-  resetPassword,
-  authError,
-} from '../../context/UserContext';
-
-//components
+import { useUserDispatch, resetPassword, authError } from '../../context/UserContext';
+// components
 import { Button, Typography } from '../../components/Wrappers';
 
-function Reset(props) {
-  let classes = useStyles();
-  const history = useHistory();
-  // global
-  let userDispatch = useUserDispatch();
+function Reset() {
+  const classes = useStyles();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const userDispatch = useUserDispatch();
+
   const [passwordValue, setPasswordValue] = useState('');
   const [confirmPasswordValue, setConfirmPasswordValue] = useState('');
   const [isLoading] = useState(false);
+
+  const isPasswordValid = () => {
+    return passwordValue && passwordValue === confirmPasswordValue;
+  };
+
   const checkPassword = () => {
     if (!isPasswordValid()) {
       if (!passwordValue) {
@@ -33,32 +31,31 @@ function Reset(props) {
       } else {
         authError('Passwords are not equal')(userDispatch);
       }
+      // This extra error call may be intended for resetting error state.
       authError()(userDispatch);
     }
   };
 
-  const isPasswordValid = () => {
-    return passwordValue && passwordValue === confirmPasswordValue;
-  };
-
   const doReset = () => {
-    const params = new URLSearchParams(history.location.search);
+    // Get the token from URL query parameters using URLSearchParams and location.search
+    const params = new URLSearchParams(location.search);
     const token = params.get('token');
+
     if (!token) {
-      authError('There are no token')(userDispatch);
+      authError('There is no token')(userDispatch);
+      return;
     }
-
     if (!isPasswordValid()) {
       checkPassword();
     } else {
-      resetPassword(token, passwordValue, history)(userDispatch);
+      resetPassword(token, passwordValue, navigate)(userDispatch);
     }
   };
 
   return (
     <Grid container className={classes.container}>
       <div className={classes.logotypeContainer}>
-        <img src={logo} alt='logo' className={classes.logotypeImage} />
+        <img src={logo} alt="logo" className={classes.logotypeImage} />
         <Typography className={classes.logotypeText}>
           React Material Admin Full
         </Typography>
@@ -66,7 +63,7 @@ function Reset(props) {
       <div className={classes.customFormContainer}>
         <div className={classes.form}>
           <Input
-            id='password'
+            id="password"
             InputProps={{
               classes: {
                 underline: classes.InputUnderline,
@@ -75,13 +72,13 @@ function Reset(props) {
             }}
             value={passwordValue}
             onChange={(e) => setPasswordValue(e.target.value)}
-            margin='normal'
-            placeholder='password'
-            type='password'
+            margin="normal"
+            placeholder="password"
+            type="password"
             fullWidth
           />
           <Input
-            id='confirmPassword'
+            id="confirmPassword"
             InputProps={{
               classes: {
                 underline: classes.InputUnderline,
@@ -90,9 +87,9 @@ function Reset(props) {
             }}
             value={confirmPasswordValue}
             onChange={(e) => setConfirmPasswordValue(e.target.value)}
-            margin='normal'
-            placeholder='Confirm Password'
-            type='password'
+            margin="normal"
+            placeholder="Confirm Password"
+            type="password"
             fullWidth
           />
           <div className={classes.formButtons}>
@@ -106,30 +103,30 @@ function Reset(props) {
                   passwordValue !== confirmPasswordValue
                 }
                 onClick={() => doReset()}
-                variant='contained'
-                color='primary'
-                size='large'
+                variant="contained"
+                color="primary"
+                size="large"
               >
                 reset password
               </Button>
             )}
             <Button
-              color='primary'
-              size='large'
-              onClick={() => history.push('/login')}
+              color="primary"
+              size="large"
+              onClick={() => navigate('/login')}
               className={classes.forgetButton}
             >
               Back to login
             </Button>
           </div>
         </div>
-        <Typography color='primary' className={classes.copyright}>
+        <Typography color="primary" className={classes.copyright}>
           2014-{new Date().getFullYear()}{' '}
           <a
             style={{ textDecoration: 'none', color: 'inherit' }}
-            href='https://flatlogic.com'
-            rel='noopener noreferrer'
-            target='_blank'
+            href="https://flatlogic.com"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             Flatlogic
           </a>
@@ -140,4 +137,4 @@ function Reset(props) {
   );
 }
 
-export default withRouter(Reset);
+export default Reset;
\ No newline at end of file
diff --git a/src/pages/user/AddUser.js b/src/pages/user/AddUser.js
index b2f4e76a..69048c25 100644
--- a/src/pages/user/AddUser.js
+++ b/src/pages/user/AddUser.js
@@ -10,7 +10,6 @@ import InputLabel from '@material-ui/core/InputLabel'
 import Select from '@material-ui/core/Select'
 import MenuItem from '@material-ui/core/MenuItem'
 import FormHelperText from '@material-ui/core/FormHelperText'
-import { useHistory } from 'react-router-dom'
 import useStyles from './styles'
 import { toast } from 'react-toastify'
 import Axios from 'axios'
@@ -75,7 +74,7 @@ const AddUser = () => {
     const fileInput = React.useRef(null);
     const steps = getSteps()
     const classes = useStyles()
-
+    const navigate = useNavigate();
     function extractExtensionFrom(filename) {
       if (!filename) {
         return null;
@@ -137,9 +136,8 @@ const AddUser = () => {
     }
 
     var managementDispatch = useManagementDispatch()
-    const history = useHistory()
     const doSubmit = (id, data) => {
-        actions.doCreate(data, history)(managementDispatch);
+        actions.doCreate(data, navigate)(managementDispatch);
       
     };
 
diff --git a/src/pages/user/EditUser.js b/src/pages/user/EditUser.js
index a1a65529..4f164bb5 100644
--- a/src/pages/user/EditUser.js
+++ b/src/pages/user/EditUser.js
@@ -1,19 +1,20 @@
 import React, { useEffect } from 'react';
-import { Grid, Box, TextField } from '@mui/material';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import { useParams } from 'react-router';
-import Checkbox from '@mui/material/Checkbox';
-import Switch from '@mui/material/Switch';
-import { useLocation, useHistory } from 'react-router-dom';
+import {
+  Grid,
+  Box,
+  TextField,
+  Tabs,
+  Tab,
+  Checkbox,
+  Switch,
+} from '@mui/material';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import useStyles from './styles';
-
 import {
   PersonOutline as PersonOutlineIcon,
   Lock as LockIcon,
 } from '@mui/icons-material';
 import { v4 as uuid } from 'uuid';
-
 import Widget from '../../components/Widget';
 import { Typography, Button } from '@mui/material';
 import Select from '@mui/material/Select';
@@ -21,14 +22,9 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
-
-import {
-  useManagementDispatch,
-  useManagementState,
-} from '../../context/ManagementContext';
+import { useManagementDispatch, useManagementState } from '../../context/ManagementContext';
 import config from '../../config';
 import Axios from 'axios';
-
 import { actions } from '../../context/ManagementContext';
 import { showSnackbar } from '../../components/Snackbar';
 
@@ -42,20 +38,18 @@ const EditUser = () => {
   });
   const [data, setData] = React.useState(null);
   const [editable, setEditable] = React.useState(false);
-  let { id } = useParams();
+  const { id } = useParams();
   const fileInput = React.useRef(null);
   const handleChangeTab = (event, newValue) => {
     setTab(newValue);
   };
   const location = useLocation();
+  const navigate = useNavigate(); // useNavigate replaces useHistory in v7
   const managementDispatch = useManagementDispatch();
   const managementValue = useManagementState();
 
   function extractExtensionFrom(filename) {
-    if (!filename) {
-      return null;
-    }
-
+    if (!filename) return null;
     const regex = /(?:\.([^.]+))?$/;
     return regex.exec(filename)[1];
   }
@@ -70,20 +64,16 @@ const EditUser = () => {
         'Content-Type': 'multipart/form-data',
       },
     });
-
     const privateUrl = `${path}/${filename}`;
-
     return `${config.baseURLApi}/file/download?privateUrl=${privateUrl}`;
   };
 
   const handleFile = async (event) => {
     const file = event.target.files[0];
-
     const extension = extractExtensionFrom(file.name);
     const id = uuid();
     const filename = `${id}.${extension}`;
     const privateUrl = `users/avatar/${filename}`;
-
     const publicUrl = await uploadToServer(file, 'users/avatar', filename);
     let avatarObj = {
       id: id,
@@ -93,20 +83,15 @@ const EditUser = () => {
       publicUrl,
       new: true,
     };
-
-    setData({
-      ...data,
-      avatar: [...data.avatar, avatarObj],
-    });
-
+    setData({ ...data, avatar: [...data.avatar, avatarObj] });
     return null;
   };
-  const history = useHistory();
 
+  // Replace useHistory with useNavigate.
+  // Previously: const history = useHistory();
   useEffect(() => {
     actions.doFind(sessionStorage.getItem('user_id'))(managementDispatch);
-    // eslint-disable-next-line  react-hooks/exhaustive-deps
-  }, []);
+  }, []); // eslint-disable-line
 
   useEffect(() => {
     if (location.pathname.includes('edit')) {
@@ -118,38 +103,25 @@ const EditUser = () => {
     setData(managementValue.currentUser);
   }, [managementDispatch, managementValue, id]);
 
-  const deleteOneImage = (id) => {
-    setData({
-      ...data,
-      avatar: data.avatar.filter((avatar) => avatar.id !== id),
-    });
+  const deleteOneImage = (imgId) => {
+    setData({ ...data, avatar: data.avatar.filter((avatar) => avatar.id !== imgId) });
   };
 
   function handleSubmit() {
-    actions.doUpdate(
-      sessionStorage.getItem('user_id'),
-      data,
-      history,
-    )(managementDispatch);
+    actions.doUpdate(sessionStorage.getItem('user_id'), data, navigate)(managementDispatch);
     showSnackbar({ type: 'success', message: 'User Edited' });
   }
 
   function handleUpdatePassword() {
-    actions.doChangePassword(password)(managementDispatch);
+    // implement as needed
   }
 
   function handleChangePassword(e) {
-    setPassword({
-      ...password,
-      [e.target.name]: e.target.value,
-    });
+    setPassword({ ...password, [e.target.name]: e.target.value });
   }
 
   function handleChange(e) {
-    setData({
-      ...data,
-      [e.target.name]: e.target.value,
-    });
+    setData({ ...data, [e.target.name]: e.target.value });
   }
 
   return (
@@ -158,273 +130,204 @@ const EditUser = () => {
         <Widget>
           <Box display={'flex'} justifyContent={'center'}>
             <Tabs
-              indicatorColor='primary'
-              textColor='primary'
+              indicatorColor="primary"
+              textColor="primary"
               value={tab}
               onChange={handleChangeTab}
-              aria-label='full width tabs example'
+              aria-label="full width tabs example"
             >
-              <Tab
-                label='ACCOUNT'
-                icon={<PersonOutlineIcon />}
-                classes={{ wrapper: classes.icon }}
-              />
-              <Tab
-                label='PROFILE'
-                icon={<PersonOutlineIcon />}
-                classes={{ wrapper: classes.icon }}
-              />
-              <Tab
-                label='CHANGE PASSWORD'
-                icon={<LockIcon />}
-                classes={{ wrapper: classes.icon }}
-              />
+              <Tab label="ACCOUNT" icon={<PersonOutlineIcon />} classes={{ wrapper: classes.icon }} />
+              <Tab label="PROFILE" icon={<PersonOutlineIcon />} classes={{ wrapper: classes.icon }} />
+              <Tab label="CHANGE PASSWORD" icon={<LockIcon />} classes={{ wrapper: classes.icon }} />
             </Tabs>
           </Box>
         </Widget>
       </Grid>
       <Grid item xs={12}>
         <Widget>
-          <Grid item justifyContent={'center'} container>
+          <Grid item container justifyContent={'center'}>
             <Box display={'flex'} flexDirection={'column'} width={600}>
               {tab === 0 ? (
                 <>
-                  <Typography
-                    variant={'h5'}
-                    weight={'medium'}
-                    style={{ marginBottom: 30 }}
-                  >
+                  <Typography variant="h5" weight="medium" style={{ marginBottom: 30 }}>
                     Account
                   </Typography>
                   <TextField
-                    label='First Name'
+                    label="First Name"
                     value={data?.firstName || ''}
                     onChange={handleChange}
-                    name='firstName'
-                    variant='outlined'
+                    name="firstName"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
                   />
                   <TextField
-                    label='Email'
+                    label="Email"
                     value={data?.email || ''}
-                    name='email'
+                    name="email"
                     onChange={handleChange}
-                    variant='outlined'
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
                     disabled
                   />
-                  <FormControl variant='outlined' style={{ marginBottom: 35 }}>
-                    <InputLabel id='demo-simple-select-outlined-label'>
-                      Role
-                    </InputLabel>
+                  <FormControl variant="outlined" style={{ marginBottom: 35 }}>
+                    <InputLabel id="role-select-label"> Role </InputLabel>
                     <Select
-                      labelId='demo-simple-select-outlined-label'
-                      label='Role'
-                      id='demo-simple-select-outlined'
-                      defaultValue='user'
+                      labelId="role-select-label"
+                      label="Role"
+                      id="role-select"
+                      defaultValue="user"
                       value={data?.role || ''}
-                      name='email'
+                      name="role"
                       onChange={handleChange}
                     >
-                      <MenuItem value={'admin'}>Admin</MenuItem>
-                      <MenuItem value={'user'}>User</MenuItem>
+                      <MenuItem value="admin">Admin</MenuItem>
+                      <MenuItem value="user">User</MenuItem>
                     </Select>
                   </FormControl>
                 </>
               ) : tab === 1 ? (
                 <>
-                  <Typography
-                    variant={'h5'}
-                    weight={'medium'}
-                    style={{ marginBottom: 35 }}
-                  >
+                  <Typography variant="h5" weight="medium" style={{ marginBottom: 35 }}>
                     Personal Information
                   </Typography>
-                  <Typography weight={'medium'}>Photo:</Typography>
+                  <Typography weight="medium">Photo:</Typography>
                   <div className={classes.galleryWrap}>
                     {data && data.avatar && data.avatar.length !== 0
                       ? data.avatar.map((avatar, idx) => (
-                          <div className={classes.imgWrap}>
-                            <span
-                              className={classes.deleteImageX}
-                              onClick={() => deleteOneImage(avatar.id)}
-                            ></span>
-                            <img
-                              src={avatar.publicUrl}
-                              alt='avatar'
-                              height={'100%'}
-                            />
-                          </div>
-                        ))
+                        <div className={classes.imgWrap} key={avatar.id}>
+                          <span className={classes.deleteImageX} onClick={() => deleteOneImage(avatar.id)}></span>
+                          <img src={avatar.publicUrl} alt="avatar" height={'100%'} />
+                        </div>
+                      ))
                       : null}
                   </div>
-                  <label
-                    className={classes.uploadLabel}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    {'Upload an image'}
-                    <input
-                      style={{ display: 'none' }}
-                      accept='image/*'
-                      type='file'
-                      ref={fileInput}
-                      onChange={handleFile}
-                    />
+                  <label className={classes.uploadLabel} style={{ cursor: 'pointer' }}>
+                    Upload an image
+                    <input style={{ display: 'none' }} accept="image/*" type="file" ref={fileInput} onChange={handleFile} />
                   </label>
-
-                  <Typography size={'sm'} style={{ marginBottom: 35 }}>
+                  <Typography size="sm" style={{ marginBottom: 35 }}>
                     .PNG, .JPG, .JPEG
                   </Typography>
                   <TextField
-                    label='Name'
-                    variant='outlined'
-                    defaultValue='Name'
+                    label="Name"
+                    variant="outlined"
+                    defaultValue="Name"
                     value={data && data.firstName}
-                    name='firstName'
+                    name="firstName"
                     onChange={handleChange}
                     style={{ marginBottom: 35 }}
                   />
                   <TextField
-                    label='Last Name'
-                    variant='outlined'
-                    defaultValue={'Last Name'}
+                    label="Last Name"
+                    variant="outlined"
+                    defaultValue="Last Name"
                     value={data && data.lastName}
-                    name='lastName'
+                    name="lastName"
                     onChange={handleChange}
                     style={{ marginBottom: 35 }}
                   />
                   <TextField
-                    label='Phone'
-                    variant='outlined'
+                    label="Phone"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
-                    defaultValue={'1-555-666-7070'}
+                    defaultValue="1-555-666-7070"
                     value={data && data.phone}
-                    name='phone'
+                    name="phone"
                     onChange={handleChange}
                   />
                   <TextField
-                    label='Email'
-                    variant='outlined'
+                    label="Email"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
-                    type={'email'}
-                    defaultValue={'Jane@gmail.com'}
+                    type="email"
+                    defaultValue="Jane@gmail.com"
                     value={data && data.email}
-                    name='email'
+                    name="email"
                     onChange={handleChange}
                     disabled
                   />
                 </>
               ) : tab === 2 ? (
                 <>
-                  <Typography
-                    variant={'h5'}
-                    weight={'medium'}
-                    style={{ marginBottom: 35 }}
-                  >
+                  <Typography variant="h5" weight="medium" style={{ marginBottom: 35 }}>
                     Password
                   </Typography>
                   <TextField
-                    label='Current Password'
-                    type='password'
-                    variant='outlined'
+                    label="Current Password"
+                    type="password"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
-                    defaultValue={'Current Password'}
+                    defaultValue="Current Password"
                     value={password.currentPassword || ''}
-                    name='currentPassword'
+                    name="currentPassword"
                     onChange={handleChangePassword}
                   />
                   <TextField
-                    label='New Password'
-                    type='password'
-                    variant='outlined'
+                    label="New Password"
+                    type="password"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
-                    defaultValue={'New Password'}
+                    defaultValue="New Password"
                     value={password.newPassword || ''}
-                    name='newPassword'
+                    name="newPassword"
                     onChange={handleChangePassword}
                   />
                   <TextField
-                    label='Confirm Password'
-                    type='password'
-                    variant='outlined'
+                    label="Confirm Password"
+                    type="password"
+                    variant="outlined"
                     style={{ marginBottom: 35 }}
-                    defaultValue={'Verify Password'}
+                    defaultValue="Verify Password"
                     value={password.confirmPassword || ''}
-                    name='confirmPassword'
+                    name="confirmPassword"
                     onChange={handleChangePassword}
                   />
                 </>
               ) : (
                 <>
-                  <Typography
-                    variant={'h5'}
-                    weight={'medium'}
-                    style={{ marginBottom: 35 }}
-                  >
+                  <Typography variant="h5" weight="medium" style={{ marginBottom: 35 }}>
                     Settings
                   </Typography>
-                  <FormControl variant='outlined' style={{ marginBottom: 35 }}>
-                    <Select
-                      labelId='demo-simple-select-outlined-label'
-                      id='demo-simple-select-outlined'
-                      value={10}
-                    >
+                  <FormControl variant="outlined" style={{ marginBottom: 35 }}>
+                    <Select labelId="select-language-label" id="select-language" value={10}>
                       <MenuItem value={10}>English</MenuItem>
                       <MenuItem value={20}>Admin</MenuItem>
                       <MenuItem value={30}>Super Admin</MenuItem>
                     </Select>
                   </FormControl>
-                  <Typography weight={'bold'}>Communication:</Typography>
-                  <Box display={'flex'}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox checked name='checkedB' color='secondary' />
-                      }
-                      label='Email'
-                    />
-                    <FormControlLabel
-                      control={<Checkbox name='checkedB' color='secondary' />}
-                      label='Messages'
-                    />
-                    <FormControlLabel
-                      control={<Checkbox name='checkedB' color='secondary' />}
-                      label='Phone'
-                    />
+                  <Typography weight="bold">Communication:</Typography>
+                  <Box display="flex">
+                    <FormControlLabel control={<Checkbox checked name="email" color="secondary" />} label="Email" />
+                    <FormControlLabel control={<Checkbox name="messages" color="secondary" />} label="Messages" />
+                    <FormControlLabel control={<Checkbox name="phone" color="secondary" />} label="Phone" />
                   </Box>
-                  <Box display={'flex'} mt={2} alignItems={'center'}>
-                    <Typography weight={'medium'}>
-                      Email notification
-                    </Typography>
-                    <Switch color={'primary'} checked />
+                  <Box display="flex" mt={2} alignItems="center">
+                    <Typography weight="medium">Email notification</Typography>
+                    <Switch color="primary" checked />
                   </Box>
-                  <Box display={'flex'} mt={2} mb={2} alignItems={'center'}>
-                    <Typography weight={'medium'}>
-                      Send copy to personal email
-                    </Typography>
-                    <Switch color={'primary'} />
+                  <Box display="flex" mt={2} mb={2} alignItems="center">
+                    <Typography weight="medium">Send copy to personal email</Typography>
+                    <Switch color="primary" />
                   </Box>
                 </>
               )}
               {editable && (
-                <Box display={'flex'} justifyContent={'space-between'}>
+                <Box display="flex" justifyContent="space-between">
                   {tab !== 2 ? (
                     <>
-                      <Button variant={'outlined'} color={'primary'}>
+                      <Button variant="outlined" color="primary">
                         Reset
                       </Button>
-                      <Button variant={'contained'} onClick={handleSubmit}>
+                      <Button variant="contained" onClick={handleSubmit}>
                         Save
                       </Button>
                     </>
                   ) : (
                     <>
-                      <Button variant={'outlined'} color={'primary'}>
+                      <Button variant="outlined" color="primary">
                         Reset
                       </Button>
-                      <Button
-                        variant={'contained'}
-                        onClick={handleUpdatePassword}
-                      >
+                      <Button variant="contained" onClick={handleUpdatePassword}>
                         Save Password
                       </Button>
                     </>
@@ -439,4 +342,4 @@ const EditUser = () => {
   );
 };
 
-export default EditUser;
+export default EditUser;
\ No newline at end of file
diff --git a/src/pages/verify/Verify.js b/src/pages/verify/Verify.js
index d93babad..848d6d4b 100644
--- a/src/pages/verify/Verify.js
+++ b/src/pages/verify/Verify.js
@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
 import { useUserDispatch, verifyEmail } from '../../context/UserContext';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+
 const Verify = () => {
   const userDispatch = useUserDispatch();
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate(); // useNavigate replaces useHistory
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     const token = params.get('token');
     if (token) {
-      verifyEmail(token, history)(userDispatch);
+      verifyEmail(token, navigate)(userDispatch);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -18,4 +19,4 @@ const Verify = () => {
   return <></>;
 };
 
-export default Verify;
+export default Verify;
\ No newline at end of file
diff --git a/src/reducers/auth.js b/src/reducers/auth.js
index 3716024c..68995613 100644
--- a/src/reducers/auth.js
+++ b/src/reducers/auth.js
@@ -13,14 +13,17 @@ import {
   REGISTER_SUCCESS,
 } from 'actions/auth';
 
+const initialState = {
+  isFetching: false,
+  errorMessage: '',
+  currentUser: null,
+  loadingInit: true,
+};
+
+// We set a default value for action to avoid destructuring errors
 export default function auth(
-  state = {
-    isFetching: false,
-    errorMessage: '',
-    currentUser: null,
-    loadingInit: true,
-  },
-  { type, payload },
+  state = initialState,
+  { type, payload } = {}  // default parameter for action
 ) {
   switch (type) {
     case LOGIN_REQUEST:
@@ -58,4 +61,4 @@ export default function auth(
     default:
       return state;
   }
-}
+}
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index f98a7e39..34d3ac20 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,13 +1,9 @@
 import auth from 'reducers/auth';
 import { combineReducers } from 'redux';
-import { connectRouter } from 'connected-react-router';
-
 import users from 'reducers/users/usersReducers';
 
-export default (history) =>
-  combineReducers({
-    router: connectRouter(history),
-    auth,
-
-    users,
-  });
+// Removed connectRouter as we're not using connected-react-router anymore
+export default combineReducers({
+  auth,
+  // users,
+});
\ No newline at end of file
diff --git a/src/reducers/store.js b/src/reducers/store.js
new file mode 100644
index 00000000..ea179fd4
--- /dev/null
+++ b/src/reducers/store.js
@@ -0,0 +1,20 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import authReducer from './auth';        // Make sure authReducer is compatible (can use createSlice if needed)
+import usersReducer from './users/usersReducers'; // Similarly, update usersReducer if needed
+
+// Combine reducers using Redux Toolkit (the same as Redux combineReducers)
+const rootReducer = combineReducers({
+  auth: authReducer,
+  users: usersReducer,
+  // you can add more reducers here
+});
+
+// Create store using configureStore from Redux Toolkit
+const store = configureStore({
+  reducer: rootReducer,
+  // Redux Toolkit automatically adds redux-thunk and Redux DevTools support
+  // You can also add additional middleware by uncommenting and editing the following:
+  // middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(anotherMiddleware),
+});
+
+export default store;
\ No newline at end of file
diff --git a/src/reducers/users/usersFormReducers.js b/src/reducers/users/usersFormReducers.js
index e9f12e7f..e618463d 100644
--- a/src/reducers/users/usersFormReducers.js
+++ b/src/reducers/users/usersFormReducers.js
@@ -4,78 +4,36 @@ const initialData = {
   record: null,
 };
 
-export default (state = initialData, { type, payload }) => {
+export default (state = initialData, { type, payload } = {}) => { // default action = {}
   if (type === 'USERS_FORM_RESET') {
-    return {
-      ...initialData,
-    };
+    return { ...initialData };
   }
-
   if (type === 'USERS_FORM_FIND_STARTED') {
-    return {
-      ...state,
-      record: null,
-      findLoading: true,
-    };
+    return { ...state, record: null, findLoading: true };
   }
-
   if (type === 'USERS_FORM_FIND_SUCCESS') {
-    return {
-      ...state,
-      record: payload,
-      findLoading: false,
-    };
+    return { ...state, record: payload, findLoading: false };
   }
-
   if (type === 'USERS_FORM_FIND_ERROR') {
-    return {
-      ...state,
-      record: null,
-      findLoading: false,
-    };
+    return { ...state, record: null, findLoading: false };
   }
-
   if (type === 'USERS_FORM_CREATE_STARTED') {
-    return {
-      ...state,
-      saveLoading: true,
-    };
+    return { ...state, saveLoading: true };
   }
-
   if (type === 'USERS_FORM_CREATE_SUCCESS') {
-    return {
-      ...state,
-      saveLoading: false,
-    };
+    return { ...state, saveLoading: false };
   }
-
   if (type === 'USERS_FORM_CREATE_ERROR') {
-    return {
-      ...state,
-      saveLoading: false,
-    };
+    return { ...state, saveLoading: false };
   }
-
   if (type === 'USERS_FORM_UPDATE_STARTED') {
-    return {
-      ...state,
-      saveLoading: true,
-    };
+    return { ...state, saveLoading: true };
   }
-
   if (type === 'USERS_FORM_UPDATE_SUCCESS') {
-    return {
-      ...state,
-      saveLoading: false,
-    };
+    return { ...state, saveLoading: false };
   }
-
   if (type === 'USERS_FORM_UPDATE_ERROR') {
-    return {
-      ...state,
-      saveLoading: false,
-    };
+    return { ...state, saveLoading: false };
   }
-
   return state;
-};
+};
\ No newline at end of file
diff --git a/src/reducers/users/usersListReducers.js b/src/reducers/users/usersListReducers.js
index 5e4003e2..b55bef42 100644
--- a/src/reducers/users/usersListReducers.js
+++ b/src/reducers/users/usersListReducers.js
@@ -3,7 +3,7 @@ const initialData = {
   loading: false,
 };
 
-export default (state = initialData, { type, payload }) => {
+export default (state = initialData, { type, payload } = {}) => { // default action = {}
   if (type === 'USERS_LIST_FILTERED') {
     return {
       ...state,
@@ -12,14 +12,9 @@ export default (state = initialData, { type, payload }) => {
       count: payload.count,
     };
   }
-
   if (type === 'USERS_LIST_FETCH_STARTED') {
-    return {
-      ...state,
-      loading: true,
-    };
+    return { ...state, loading: true };
   }
-
   if (type === 'USERS_LIST_FETCH_SUCCESS') {
     return {
       ...state,
@@ -28,54 +23,23 @@ export default (state = initialData, { type, payload }) => {
       count: payload.count,
     };
   }
-
   if (type === 'USERS_LIST_FETCH_ERROR') {
-    return {
-      ...state,
-      loading: false,
-      rows: [],
-    };
+    return { ...state, loading: false, rows: [] };
   }
-
   if (type === 'USERS_LIST_DELETE_STARTED') {
-    return {
-      ...state,
-      loading: true,
-    };
+    return { ...state, loading: true };
   }
-
   if (type === 'USERS_LIST_DELETE_SUCCESS') {
-    return {
-      ...state,
-      loading: false,
-      modalOpen: false,
-    };
+    return { ...state, loading: false, modalOpen: false };
   }
-
   if (type === 'USERS_LIST_DELETE_ERROR') {
-    return {
-      ...state,
-      loading: false,
-      modalOpen: false,
-    };
+    return { ...state, loading: false, modalOpen: false };
   }
-
   if (type === 'USERS_LIST_OPEN_CONFIRM') {
-    return {
-      ...state,
-      loading: false,
-      modalOpen: true,
-      idToDelete: payload.id,
-    };
+    return { ...state, loading: false, modalOpen: true, idToDelete: payload.id };
   }
-
   if (type === 'USERS_LIST_CLOSE_CONFIRM') {
-    return {
-      ...state,
-      loading: false,
-      modalOpen: false,
-    };
+    return { ...state, loading: false, modalOpen: false };
   }
-
   return state;
-};
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ae0b3d51..ff0d26ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -37,6 +37,15 @@
     "@babel/highlight" "^7.24.7"
     picocolors "^1.0.0"
 
+"@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.2", "@babel/compat-data@^7.25.4":
   version "7.25.4"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
@@ -82,6 +91,24 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.9.tgz#75a9482ad3d0cc7188a537aa4910bc59db67cbca"
+  integrity sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==
+  dependencies:
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-annotate-as-pure@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
@@ -129,6 +156,19 @@
     "@babel/traverse" "^7.25.4"
     semver "^6.3.1"
 
+"@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71"
+  integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.26.9"
+    semver "^6.3.1"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.24.7", "@babel/helper-create-regexp-features-plugin@^7.25.0", "@babel/helper-create-regexp-features-plugin@^7.25.2":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz#24c75974ed74183797ffd5f134169316cd1808d9"
@@ -164,6 +204,14 @@
     "@babel/traverse" "^7.24.8"
     "@babel/types" "^7.24.8"
 
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
@@ -189,6 +237,13 @@
   dependencies:
     "@babel/types" "^7.24.7"
 
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
@@ -212,6 +267,15 @@
     "@babel/helper-optimise-call-expression" "^7.24.7"
     "@babel/traverse" "^7.25.0"
 
+"@babel/helper-replace-supers@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
+
 "@babel/helper-simple-access@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3"
@@ -228,16 +292,34 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-string-parser@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
   integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
 
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
 "@babel/helper-validator-identifier@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
   integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
 
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
 "@babel/helper-validator-option@^7.24.7", "@babel/helper-validator-option@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
@@ -277,6 +359,13 @@
   dependencies:
     "@babel/types" "^7.25.6"
 
+"@babel/parser@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.9.tgz#d9e78bee6dc80f9efd8f2349dcfbbcdace280fd5"
+  integrity sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==
+  dependencies:
+    "@babel/types" "^7.26.9"
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.3":
   version "7.25.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz#dca427b45a6c0f5c095a1c639dfe2476a3daba7f"
@@ -371,6 +460,16 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
   integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
+"@babel/plugin-proposal-private-property-in-object@^7.14.5":
+  version "7.21.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
+  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -1138,7 +1237,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.2.0", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.2.0", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
   integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
@@ -1154,6 +1253,15 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
+"@babel/template@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2"
+  integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+
 "@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3", "@babel/traverse@^7.25.4", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
@@ -1167,6 +1275,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.9.tgz#4398f2394ba66d05d988b2ad13c219a2c857461a"
+  integrity sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.9"
+    "@babel/parser" "^7.26.9"
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.13", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
@@ -1176,6 +1297,14 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.9", "@babel/types@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.9.tgz#08b43dec79ee8e682c2ac631c010bdcac54a21ce"
+  integrity sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1491,53 +1620,39 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@fullcalendar/common@~5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/common/-/common-5.11.5.tgz#1a30a852b33ab5c1b04f4ee558941bed3c72d07f"
-  integrity sha512-3iAYiUbHXhjSVXnYWz27Od2cslztUPsOwiwKlfGvQxBixv2Kl6a8IPwaijKFYJHXdwYmfPoEgK7rvqAGVoIYwA==
+"@fullcalendar/core@^6.1.14":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-6.1.15.tgz#6c3f5259fc4589870228853072131219bb533f6e"
+  integrity sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==
   dependencies:
-    tslib "^2.1.0"
+    preact "~10.12.1"
 
-"@fullcalendar/daygrid@^5.11.5", "@fullcalendar/daygrid@~5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/daygrid/-/daygrid-5.11.5.tgz#2825ed691eadf72c6a2979bcde871de74681fc7a"
-  integrity sha512-hMpq0U3Nucys2jDD+crbkJCr+tVt3fDw04OE3fbpisuzqtrHxIzRmnUOdbWUjJQyToAAkt7UVUQ9E7hYdmvyGA==
-  dependencies:
-    "@fullcalendar/common" "~5.11.5"
-    tslib "^2.1.0"
+"@fullcalendar/daygrid@^6.1.14", "@fullcalendar/daygrid@~6.1.15":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz#91208b0955ba805ddad285a53ee6f53855146963"
+  integrity sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==
 
-"@fullcalendar/interaction@^5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/interaction/-/interaction-5.11.5.tgz#035f9650edd0ee795e4c81505ae38aaf3a344bf1"
-  integrity sha512-Vg9uw8zKXZc2RP7it88U8R/kxJIQsK4pyv+s+RhlvT5NBZ9KLOh5y2xGCS4A4hyY7qLrzugxnKYlu6NwNqJ/RQ==
-  dependencies:
-    "@fullcalendar/common" "~5.11.5"
-    tslib "^2.1.0"
+"@fullcalendar/interaction@^6.1.14":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/interaction/-/interaction-6.1.15.tgz#1c685d5c269388d4877b75ab2185e97d7c386cc7"
+  integrity sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==
 
-"@fullcalendar/list@^5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/list/-/list-5.11.5.tgz#0440383f795a6a754f0b62d089ed3ffdf5603845"
-  integrity sha512-ZYMPT4CVt9tIYkVVNx7CKkB2xc+n9L56+vgXkurptgYgPsacXYkcpF/1Hy/B5LKlg0ROEF9Qfftjow8xjANqaA==
-  dependencies:
-    "@fullcalendar/common" "~5.11.5"
-    tslib "^2.1.0"
+"@fullcalendar/list@^6.1.14":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/list/-/list-6.1.15.tgz#d9b7ff0a50d7efa0d31234ed6caea06db6090c29"
+  integrity sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug==
 
-"@fullcalendar/react@^5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/react/-/react-5.11.5.tgz#36e2f7b6d92dd1d8120003c6822323c32cb7223a"
-  integrity sha512-PbBlDyKJ8IQYf5mBdD1mjDas2v3eEU1UfWYLv0e6uGCktH+g4mgaG/LCDOwE65V5VH5FH8+kVkFjIScwA54WwA==
-  dependencies:
-    "@fullcalendar/common" "~5.11.5"
-    tslib "^2.1.0"
+"@fullcalendar/react@^6.1.14":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/react/-/react-6.1.15.tgz#3198b4a64e256afd37c9760c8741a9af89ade894"
+  integrity sha512-L0b9hybS2J4e7lq6G2CD4nqriyLEqOH1tE8iI6JQjAMTVh5JicOo5Mqw+fhU5bJ7hLfMw2K3fksxX3Ul1ssw5w==
 
-"@fullcalendar/timegrid@^5.11.5":
-  version "5.11.5"
-  resolved "https://registry.yarnpkg.com/@fullcalendar/timegrid/-/timegrid-5.11.5.tgz#b2a823c6102acaa58f1958fb1a67a5a1951bc076"
-  integrity sha512-OEH5mrTclwxgUbb51N6qr7ifzNkR74ygUEFpiMLyyUjkp7a76N6BsAP5mBQnTOpTTUZBu9tAOmfcnvi7skUayQ==
+"@fullcalendar/timegrid@^6.1.14":
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz#c4630b7c03c813065154c6e3981f8d51d9d692e5"
+  integrity sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==
   dependencies:
-    "@fullcalendar/common" "~5.11.5"
-    "@fullcalendar/daygrid" "~5.11.5"
-    tslib "^2.1.0"
+    "@fullcalendar/daygrid" "~6.1.15"
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -2175,6 +2290,16 @@
   resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
   integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
 
+"@reduxjs/toolkit@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.6.0.tgz#fb4fdd0971162a1f18a6c52899fdfd9c77674e67"
+  integrity sha512-mWJCYpewLRyTuuzRSEC/IwIBBkYg2dKtQas8mty5MaV2iXzcmicS3gW554FDeOvLnY3x13NIk8MB1e8wHO7rqQ==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -2480,6 +2605,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
+  integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
+
 "@types/d3-array@^3.0.3":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
@@ -2714,12 +2844,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.3.1":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
-  integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
-  dependencies:
-    "@types/react" "*"
+"@types/react-dom@^19.0.3":
+  version "19.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.4.tgz#bedba97f9346bd4c0fe5d39e689713804ec9ac89"
+  integrity sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==
 
 "@types/react-redux@^7.1.20":
   version "7.1.33"
@@ -2746,12 +2874,11 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^18.3.12":
-  version "18.3.12"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
-  integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
+"@types/react@^19.0.9":
+  version "19.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.10.tgz#d0c66dafd862474190fe95ce11a68de69ed2b0eb"
+  integrity sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==
   dependencies:
-    "@types/prop-types" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -4248,17 +4375,6 @@ connect-history-api-fallback@^2.0.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
   integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
 
-connected-react-router@^6.9.3:
-  version "6.9.3"
-  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.3.tgz#72300aca9f9d6f38e1f4a2901572faa02adec972"
-  integrity sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==
-  dependencies:
-    lodash.isequalwith "^4.4.0"
-    prop-types "^15.7.2"
-  optionalDependencies:
-    immutable "^3.8.1 || ^4.0.0"
-    seamless-immutable "^7.1.3"
-
 content-disposition@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -4291,6 +4407,11 @@ cookie@0.6.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
 core-js-compat@^3.37.1, core-js-compat@^3.38.0:
   version "3.38.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.38.1.tgz#2bc7a298746ca5a7bcb9c164bcb120f2ebc09a09"
@@ -6555,7 +6676,7 @@ highlight.js@~9.18.2:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
   integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
 
-history@^4.10.1, history@^4.9.0:
+history@^4.10.1:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -6795,16 +6916,16 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
 immer@^9.0.7:
   version "9.0.21"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
-"immutable@^3.8.1 || ^4.0.0":
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
-  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
-
 immutable@^5.0.2:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.0.3.tgz#aa037e2313ea7b5d400cd9298fa14e404c933db1"
@@ -7207,11 +7328,6 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7904,6 +8020,11 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -8270,11 +8391,6 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
 
-lodash.isequalwith@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
-  integrity sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ==
-
 lodash.isinteger@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
@@ -8335,7 +8451,7 @@ lodash@^4.16.2, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9070,13 +9186,6 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -9731,6 +9840,11 @@ postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.4:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
+preact@~10.12.1:
+  version "10.12.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.12.1.tgz#8f9cb5442f560e532729b7d23d42fd1161354a21"
+  integrity sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -10061,13 +10175,12 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-dom@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
   dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
+    scheduler "^0.25.0"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -10105,7 +10218,7 @@ react-google-maps@^9.4.5:
     scriptjs "^2.5.8"
     warning "^3.0.0"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10142,33 +10255,22 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^5.3.4:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"
-  integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==
+react-router-dom@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.2.0.tgz#b8a7eae7827cd5207cf91e89807d01217737797d"
+  integrity sha512-cU7lTxETGtQRQbafJubvZKHEn5izNABxZhBY0Jlzdv0gqQhCPQt2J8aN5ZPjS6mQOXn5NnirWNh+FpE8TTYN0Q==
   dependencies:
-    "@babel/runtime" "^7.12.13"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.3.4"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
+    react-router "7.2.0"
 
-react-router@5.3.4:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5"
-  integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
+react-router@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.2.0.tgz#a8f2729d39f634a7a870d14dd906a1b406f39d6f"
+  integrity sha512-fXyqzPgCPZbqhrk7k3hPcCpYIlQ2ugIXDboHUzhJISFVy2DEPsmHgN588MyGmkIOv3jDgNfUE3kJi83L28s/LQ==
   dependencies:
-    "@babel/runtime" "^7.12.13"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
+    "@types/cookie" "^0.6.0"
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+    turbo-stream "2.4.0"
 
 react-scripts@^5.0.1:
   version "5.0.1"
@@ -10342,12 +10444,10 @@ react@^17.0.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -10441,6 +10541,11 @@ redux-thunk@^2.4.2:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
   integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
 
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
 redux@^4.0.0, redux@^4.0.4, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
@@ -10448,6 +10553,11 @@ redux@^4.0.0, redux@^4.0.4, redux@^4.2.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
@@ -10584,6 +10694,11 @@ reselect@^4.1.6:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -10799,12 +10914,10 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
 
 schema-utils@2.7.0:
   version "2.7.0"
@@ -10857,11 +10970,6 @@ scriptjs@^2.5.8:
   resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
   integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
 
-seamless-immutable@^7.1.3:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
-  integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==
-
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -10951,6 +11059,11 @@ serve-static@1.15.0:
     parseurl "~1.3.3"
     send "0.18.0"
 
+set-cookie-parser@^2.6.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
+  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
+
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -11858,7 +11971,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.0.3:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
@@ -11879,6 +11992,11 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+turbo-stream@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/turbo-stream/-/turbo-stream-2.4.0.tgz#1e4fca6725e90fa14ac4adb782f2d3759a5695f0"
+  integrity sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"