diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c31269ec..78047e3f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import env from '@/config/env.config'
 import { GlobalProvider } from '@/context/GlobalContext'
+import { UserProvider } from '@/context/UserContext'
 import { RecaptchaProvider } from '@/context/RecaptchaContext'
 import { init as initGA } from '@/common/ga4'
 import ScrollToTop from '@/components/ScrollToTop'
@@ -10,6 +11,7 @@ if (env.GOOGLE_ANALYTICS_ENABLED) {
   initGA()
 }
 
+const Header = lazy(() => import('@/components/Header'))
 const SignIn = lazy(() => import('@/pages/SignIn'))
 const SignUp = lazy(() => import('@/pages/SignUp'))
 const Activate = lazy(() => import('@/pages/Activate'))
@@ -35,38 +37,42 @@ const Locations = lazy(() => import('@/pages/Locations'))
 const App = () => (
   <BrowserRouter>
     <GlobalProvider>
-      <RecaptchaProvider>
-        <ScrollToTop />
+      <UserProvider>
+        <RecaptchaProvider>
+          <ScrollToTop />
 
-        <div className="app">
-          <Suspense fallback={<></>}>
-            <Routes>
-              <Route path="/sign-in" element={<SignIn />} />
-              <Route path="/sign-up" element={<SignUp />} />
-              <Route path="/activate" element={<Activate />} />
-              <Route path="/forgot-password" element={<ForgotPassword />} />
-              <Route path="/reset-password" element={<ResetPassword />} />
-              <Route path="/" element={<Home />} />
-              <Route path="/search" element={<Search />} />
-              <Route path="/property" element={<Property />} />
-              <Route path="/checkout" element={<Checkout />} />
-              <Route path="/checkout-session/:sessionId" element={<CheckoutSession />} />
-              <Route path="/bookings" element={<Bookings />} />
-              <Route path="/booking" element={<Booking />} />
-              <Route path="/settings" element={<Settings />} />
-              <Route path="/notifications" element={<Notifications />} />
-              <Route path="/change-password" element={<ChangePassword />} />
-              <Route path="/about" element={<About />} />
-              <Route path="/tos" element={<ToS />} />
-              <Route path="/contact" element={<Contact />} />
-              <Route path="/agencies" element={<Agencies />} />
-              <Route path="/destinations" element={<Locations />} />
+          <div className="app">
+            <Suspense fallback={<></>}>
+              <Header />
 
-              <Route path="*" element={<NoMatch />} />
-            </Routes>
-          </Suspense>
-        </div>
-      </RecaptchaProvider>
+              <Routes>
+                <Route path="/sign-in" element={<SignIn />} />
+                <Route path="/sign-up" element={<SignUp />} />
+                <Route path="/activate" element={<Activate />} />
+                <Route path="/forgot-password" element={<ForgotPassword />} />
+                <Route path="/reset-password" element={<ResetPassword />} />
+                <Route path="/" element={<Home />} />
+                <Route path="/search" element={<Search />} />
+                <Route path="/property" element={<Property />} />
+                <Route path="/checkout" element={<Checkout />} />
+                <Route path="/checkout-session/:sessionId" element={<CheckoutSession />} />
+                <Route path="/bookings" element={<Bookings />} />
+                <Route path="/booking" element={<Booking />} />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/notifications" element={<Notifications />} />
+                <Route path="/change-password" element={<ChangePassword />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/tos" element={<ToS />} />
+                <Route path="/contact" element={<Contact />} />
+                <Route path="/agencies" element={<Agencies />} />
+                <Route path="/destinations" element={<Locations />} />
+
+                <Route path="*" element={<NoMatch />} />
+              </Routes>
+            </Suspense>
+          </div>
+        </RecaptchaProvider>
+      </UserProvider>
     </GlobalProvider>
   </BrowserRouter>
 )
diff --git a/frontend/src/assets/css/contact.css b/frontend/src/assets/css/contact.css
index 544c1dad..75827a97 100644
--- a/frontend/src/assets/css/contact.css
+++ b/frontend/src/assets/css/contact.css
@@ -4,6 +4,7 @@ div.contact {
   flex: 1 0 auto;
   align-items: center;
   transform: translate3d(0, 0, 0);
+  min-height: 100vh;
 }
 
 div.contact .form {
diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
index 2d052727..d2ab0de1 100644
--- a/frontend/src/assets/css/header.css
+++ b/frontend/src/assets/css/header.css
@@ -20,6 +20,14 @@
   margin-right: 10px;
 }
 
+.side-menu li {
+  cursor: pointer;
+}
+
+.side-menu li:hover {
+  background-color: #f1f1f1;
+}
+
 .header-action {
   margin-right: 20px;
 }
@@ -53,11 +61,12 @@
 
 .header .logo {
   text-decoration: none;
+  text-transform: none;
+  background: transparent;
   font-size: 18px;
   font-weight: 500;
   color: #121212;
 }
-
 /* Device width is greater than or equal to 960px */
 
 @media only screen and (width >=960px) {
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d291fdf4..e74b5c67 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, memo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   AppBar,
@@ -11,10 +11,9 @@ import {
   Button,
   Drawer,
   List,
-  ListItemButton,
   ListItemIcon,
   ListItemText,
-  Link
+  ListItem
 } from '@mui/material'
 import {
   Menu as MenuIcon,
@@ -47,27 +46,29 @@ import Avatar from './Avatar'
 import * as langHelper from '@/common/langHelper'
 import * as helper from '@/common/helper'
 import { useGlobalContext, GlobalContextType } from '@/context/GlobalContext'
+import { useUserContext, UserContextType } from '@/context/UserContext'
+import { useInit } from '@/common/customHooks'
 
 import '@/assets/css/header.css'
 
 const flagHeight = 28
 
 interface HeaderProps {
-  user?: movininTypes.User
   hidden?: boolean
   hideSignin?: boolean
 }
 
-const ListItemLink = (props: any) => <ListItemButton component="a" {...props} />
-
 const Header = ({
-  user,
   hidden,
   hideSignin,
 }: HeaderProps) => {
   const navigate = useNavigate()
+
+  const { user, setUser, setUserLoaded } = useUserContext() as UserContextType
   const { notificationCount, setNotificationCount } = useGlobalContext() as GlobalContextType
 
+  const [currentUser, setCurrentUser] = useState<movininTypes.User>()
+
   const [lang, setLang] = useState(helper.getLanguage(env.DEFAULT_LANGUAGE))
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const [langAnchorEl, setLangAnchorEl] = useState<HTMLElement | null>(null)
@@ -75,7 +76,7 @@ const Header = ({
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState<HTMLElement | null>(null)
   const [sideAnchorEl, setSideAnchorEl] = useState<HTMLElement | null>(null)
   const [isSignedIn, setIsSignedIn] = useState(false)
-  const [loading, setIsLoading] = useState(true)
+  const [loading, setLoading] = useState(true)
   const [isLoaded, setIsLoaded] = useState(false)
 
   const isMenuOpen = Boolean(anchorEl)
@@ -104,6 +105,76 @@ const Header = ({
     },
   }
 
+  const exit = async () => {
+    setLoading(false)
+    setUserLoaded(true)
+
+    await UserService.signout(false, false)
+  }
+
+  useInit(async () => {
+    const _currentUser = UserService.getCurrentUser()
+
+    if (_currentUser) {
+      try {
+        const status = await UserService.validateAccessToken()
+
+        if (status === 200) {
+          const _user = await UserService.getUser(_currentUser._id)
+
+          if (_user) {
+            if (_user.blacklisted) {
+              await exit()
+              return
+            }
+            setUser(_user)
+            setCurrentUser(_user)
+            setIsSignedIn(true)
+            setLoading(false)
+            setUserLoaded(true)
+          } else {
+            await exit()
+          }
+        } else {
+          await exit()
+        }
+      } catch {
+        await exit()
+      }
+    } else {
+      await exit()
+    }
+  }, [])
+
+  useEffect(() => {
+    const language = langHelper.getLanguage()
+    setLang(helper.getLanguage(language))
+    langHelper.setLanguage(strings, language)
+  }, [])
+
+  useEffect(() => {
+    if (user) {
+      setCurrentUser(user)
+    }
+  }, [user])
+
+  useEffect(() => {
+    const init = async () => {
+      if (!hidden) {
+        if (currentUser) {
+          const notificationCounter = await NotificationService.getNotificationCounter(currentUser._id as string)
+          setIsSignedIn(true)
+          setNotificationCount(notificationCounter.count)
+          setIsLoaded(true)
+        } else {
+          setIsLoaded(true)
+        }
+      }
+    }
+
+    init()
+  }, [hidden, currentUser]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleAccountMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget)
   }
@@ -187,11 +258,13 @@ const Header = ({
   }
 
   const handleSettingsClick = () => {
+    handleMenuClose()
     navigate('/settings')
   }
 
   const handleSignout = async () => {
-    await UserService.signout()
+    await UserService.signout(true, false)
+    handleMenuClose()
   }
 
   const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
@@ -210,28 +283,6 @@ const Header = ({
     navigate('/notifications')
   }
 
-  useEffect(() => {
-    const language = langHelper.getLanguage()
-    setLang(helper.getLanguage(language))
-    langHelper.setLanguage(strings, language)
-  }, [])
-
-  useEffect(() => {
-    if (!hidden) {
-      if (user) {
-        NotificationService.getNotificationCounter(user._id as string).then((notificationCounter) => {
-          setIsSignedIn(true)
-          setNotificationCount(notificationCounter.count)
-          setIsLoading(false)
-          setIsLoaded(true)
-        })
-      } else {
-        setIsLoading(false)
-        setIsLoaded(true)
-      }
-    }
-  }, [hidden, user, setNotificationCount])
-
   const menuId = 'primary-account-menu'
   const renderMenu = (
     <Menu
@@ -343,47 +394,99 @@ const Header = ({
                 <IconButton edge="start" sx={classes.menuButton} color="inherit" aria-label="open drawer" onClick={handleSideMenuOpen}>
                   <MenuIcon />
                 </IconButton>
-                <Link href="/" className="logo">Movin&#39; In</Link>
+
+                <Button onClick={() => navigate('/')} className="logo">Movin&#39; In</Button>
               </>
             )}
             <>
-              <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose} className="menu">
+              <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose} className="menu side-menu">
                 <List sx={classes.list}>
-                  <ListItemLink href="/">
+                  <ListItem
+                    onClick={() => {
+                      navigate('/')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><HomeIcon /></ListItemIcon>
                     <ListItemText primary={strings.HOME} />
-                  </ListItemLink>
+                  </ListItem>
                   {isSignedIn && (
-                    <ListItemLink href="/bookings">
+                    <ListItem
+                      onClick={() => {
+                        navigate('/bookings')
+                        handleSideMenuClose()
+                      }}
+                    >
                       <ListItemIcon><BookingsIcon /></ListItemIcon>
                       <ListItemText primary={strings.BOOKINGS} />
-                    </ListItemLink>
+                    </ListItem>
                   )}
-                  <ListItemLink href="/agencies">
+                  <ListItem
+                    onClick={() => {
+                      navigate('/agencies')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><AgencyIcon /></ListItemIcon>
                     <ListItemText primary={strings.AGENCIES} />
-                  </ListItemLink>
-                  <ListItemLink href="/destinations">
+                  </ListItem>
+                  <ListItem
+                    onClick={() => {
+                      navigate('/destinations')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><LocationIcon /></ListItemIcon>
                     <ListItemText primary={strings.LOCATIONS} />
-                  </ListItemLink>
-                  <ListItemLink href="/about">
+                  </ListItem>
+                  <ListItem
+                    onClick={() => {
+                      navigate('/about')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><AboutIcon /></ListItemIcon>
                     <ListItemText primary={strings.ABOUT} />
-                  </ListItemLink>
-                  <ListItemLink href="/tos">
+                  </ListItem>
+                  <ListItem
+                    onClick={() => {
+                      navigate('/tos')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><TosIcon /></ListItemIcon>
                     <ListItemText primary={strings.TOS} />
-                  </ListItemLink>
-                  <ListItemLink href="/contact">
+                  </ListItem>
+                  <ListItem
+                    onClick={() => {
+                      navigate('/contact')
+                      handleSideMenuClose()
+                    }}
+                  >
                     <ListItemIcon><MailIcon /></ListItemIcon>
                     <ListItemText primary={strings.CONTACT} />
-                  </ListItemLink>
+                  </ListItem>
                   {env.isMobile && !hideSignin && !isSignedIn && isLoaded && !loading && (
-                    <ListItemLink href="/sign-in">
-                      <ListItemIcon><LoginIcon /></ListItemIcon>
-                      <ListItemText primary={strings.SIGN_IN} />
-                    </ListItemLink>
+                    <>
+                      <ListItem
+                        onClick={() => {
+                          navigate('/sign-in')
+                          handleSideMenuClose()
+                        }}
+                      >
+                        <ListItemIcon><LoginIcon /></ListItemIcon>
+                        <ListItemText primary={strings.SIGN_IN} />
+                      </ListItem>
+                      <ListItem
+                        onClick={() => {
+                          navigate('/sign-up')
+                          handleSideMenuClose()
+                        }}
+                      >
+                        <ListItemIcon><SignUpIcon /></ListItemIcon>
+                        <ListItemText primary={suStrings.SIGN_UP} />
+                      </ListItem>
+                    </>
                   )}
                 </List>
               </Drawer>
@@ -420,7 +523,7 @@ const Header = ({
               )}
               {isSignedIn && (
                 <IconButton edge="end" aria-label="account" aria-controls={menuId} aria-haspopup="true" onClick={handleAccountMenuOpen} color="inherit" className="btn">
-                  <Avatar loggedUser={user} user={user} size="small" readonly />
+                  <Avatar loggedUser={currentUser} user={currentUser} size="small" readonly />
                 </IconButton>
               )}
             </div>
@@ -461,4 +564,4 @@ const Header = ({
   )
 }
 
-export default Header
+export default memo(Header)
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index d7730364..40b27606 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -2,87 +2,39 @@ import React, { useState, useEffect, ReactNode } from 'react'
 import { Button } from '@mui/material'
 import * as movininTypes from ':movinin-types'
 import { strings } from '@/lang/master'
-import Header from './Header'
 import * as UserService from '@/services/UserService'
 import * as helper from '@/common/helper'
-import { useInit } from '@/common/customHooks'
 import { useAnalytics } from '@/common/useAnalytics'
+import { useUserContext, UserContextType } from '@/context/UserContext'
 
 interface LayoutProps {
-  user?: movininTypes.User
   strict?: boolean
-  hideSignin?: boolean
   children: ReactNode
   onLoad?: (user?: movininTypes.User) => void
 }
 
 const Layout = ({
-  user: masterUser,
   strict,
-  hideSignin,
   children,
   onLoad
 }: LayoutProps) => {
   useAnalytics()
 
-  const [user, setUser] = useState<movininTypes.User>()
+  const { user, userLoaded } = useUserContext() as UserContextType
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    if (masterUser && user && user.avatar !== masterUser.avatar) {
-      setUser(masterUser)
-    }
-  }, [masterUser, user])
-
-  useInit(async () => {
-    const exit = async () => {
-      if (strict) {
-        await UserService.signout(false, true)
-      } else {
-        setLoading(false)
-
-        await UserService.signout(false, false)
-
-        if (onLoad) {
-          onLoad()
-        }
-      }
-    }
-
-    const currentUser = UserService.getCurrentUser()
-
-    if (currentUser) {
-      try {
-        const status = await UserService.validateAccessToken()
-
-        if (status === 200) {
-          const _user = await UserService.getUser(currentUser._id)
-
-          if (_user) {
-            if (_user.blacklisted) {
-              await exit()
-              return
-            }
-
-            setUser(_user)
-            setLoading(false)
+    if (userLoaded && !user && strict) {
+      // UserService.signout(false, true)
+      UserService.signout(true, false)
+    } else {
+      setLoading(false)
 
-            if (onLoad) {
-              onLoad(_user)
-            }
-          } else {
-            await exit()
-          }
-        } else {
-          await exit()
-        }
-      } catch {
-        await exit()
+      if (onLoad) {
+        onLoad(user || undefined)
       }
-    } else {
-      await exit()
     }
-  }, [])
+  }, [user, userLoaded, strict]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleResend = async (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
@@ -105,14 +57,13 @@ const Layout = ({
 
   return (
     <>
-      <Header user={user} hidden={loading} hideSignin={hideSignin} />
       {(!user && !loading) || (user && user.verified) ? (
         <div className="content">{children}</div>
       ) : (
         !loading && (
           <div className="validate-email">
             <span>{strings.VALIDATE_EMAIL}</span>
-            <Button type="button" variant="contained" size="small" className="btn-primary btn-resend" onClick={handleResend}>
+            <Button type="button" variant="contained" className="btn-primary btn-resend" onClick={handleResend}>
               {strings.RESEND}
             </Button>
           </div>
diff --git a/frontend/src/context/UserContext.tsx b/frontend/src/context/UserContext.tsx
new file mode 100644
index 00000000..efc8b8a8
--- /dev/null
+++ b/frontend/src/context/UserContext.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { ReactNode, createContext, useContext, useMemo, useState } from 'react'
+import * as movininTypes from ':movinin-types'
+
+// Create context
+export interface UserContextType {
+  user: movininTypes.User | null
+  setUser: React.Dispatch<React.SetStateAction<movininTypes.User | null>>
+  userLoaded: boolean
+  setUserLoaded: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const UserContext = createContext<UserContextType | null>(null)
+
+// Create a provider
+interface UserProviderProps {
+  children: ReactNode
+}
+
+export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<movininTypes.User | null>(null)
+  const [userLoaded, setUserLoaded] = useState(false)
+  const value = useMemo(() => ({ user, setUser, userLoaded, setUserLoaded }), [user, userLoaded])
+
+  return (
+    <UserContext.Provider value={value}>{children}</UserContext.Provider>
+  )
+}
+
+// Create a custom hook to access context
+export const useUserContext = () => useContext(UserContext)
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 93d64d9e..151a8cf7 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -23,13 +23,14 @@ import Backdrop from '@/components/SimpleBackdrop'
 import DatePicker from '@/components/DatePicker'
 import Avatar from '@/components/Avatar'
 import * as helper from '@/common/helper'
+import { useUserContext, UserContextType } from '@/context/UserContext'
 
 import '@/assets/css/settings.css'
 
 const Settings = () => {
   const navigate = useNavigate()
 
-  const [user, setUser] = useState<movininTypes.User>()
+  const { user, setUser } = useUserContext() as UserContextType
   const [fullName, setFullName] = useState('')
   const [phone, setPhone] = useState('')
   const [location, setLocation] = useState('')
@@ -176,7 +177,7 @@ const Settings = () => {
   }
 
   return (
-    <Layout onLoad={onLoad} user={user} strict>
+    <Layout onLoad={onLoad} strict>
       {visible && user && (
         <div className="settings">
           <Paper className="settings-form settings-form-wrapper" elevation={10}>
diff --git a/frontend/src/pages/SignIn.tsx b/frontend/src/pages/SignIn.tsx
index a94674d9..4c5b1e5a 100644
--- a/frontend/src/pages/SignIn.tsx
+++ b/frontend/src/pages/SignIn.tsx
@@ -12,6 +12,7 @@ import * as movininTypes from ':movinin-types'
 import { strings as commonStrings } from '@/lang/common'
 import { strings } from '@/lang/sign-in'
 import * as UserService from '@/services/UserService'
+import { useUserContext, UserContextType } from '@/context/UserContext'
 import Error from '@/components/Error'
 import Layout from '@/components/Layout'
 import SocialLogin from '@/components/SocialLogin'
@@ -20,6 +21,8 @@ import '@/assets/css/signin.css'
 
 const SignIn = () => {
   const navigate = useNavigate()
+
+  const { setUser, setUserLoaded } = useUserContext() as UserContextType
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState(false)
@@ -53,6 +56,10 @@ const SignIn = () => {
         } else {
           setError(false)
 
+          const user = await UserService.getUser(res.data._id)
+          setUser(user)
+          setUserLoaded(true)
+
           const params = new URLSearchParams(window.location.search)
           if (params.has('from')) {
             const from = params.get('from')