Index: sources/client/src/screens/AdminHomeScreen/index.js
===================================================================
--- sources/client/src/screens/AdminHomeScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/AdminHomeScreen/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,2 +1,3 @@
+import { useContext, useState } from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
@@ -19,12 +20,14 @@
   DividerUnderHeader,
   UserIcon,
+  MenuBurgerIcon,
 } from './styles';
 
 import IconButton from '@mui/material/IconButton';
 
-import logo from '../../resources/logo_2_transparent_bg.jpg';
+import logo from '../../resources/logo_2_transparent_bg.png';
 import { roles } from '../../config/enums';
 import DestinationComponent from '../../utils/DestinationComponent';
 import onClickRouting from '../../utils/onClickRouting';
+import AbsoluteLoader from '../../components/Loaders/AbsoluteLoader';
 
 import ParkingZones from '../../components/admin/ParkingZones';
@@ -33,4 +36,8 @@
 import EmployeeCreate from '../../components/admin/EmployeeCreate';
 import ParkingZone from '../../components/admin/ParkingZone';
+
+import { UserContext } from '../../context/UserContext';
+import { AccessoriesContext } from '../../context/AccessoriesContext';
+import useLogoutUser from '../../hooks/useLogoutUser';
 
 const ToParkingZones = new DestinationComponent('/', ParkingZones, true);
@@ -67,56 +74,83 @@
 
 const AdminHomeScreen = (props) => {
+  const { user, isLoadingUser } = useContext(UserContext);
+  const { isMobile, setIsOpenDrawer } = useContext(AccessoriesContext);
   let history = useHistory();
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
-
+  const { logoutUser } = useLogoutUser();
   let routes = user.role === roles.admin ? adminRoutes : employeeRoutes;
 
   return (
     <Container>
-      <SideMenu>
-        <IconButton onClick={() => onClickRouting('/', history)}>
-          <DashboardIcon />
-        </IconButton>
-        {user.role === roles.admin ? (
-          <IconButton onClick={() => onClickRouting('/employees', history)}>
-            <SupervisorAccountIcon />
-          </IconButton>
-        ) : null}
-      </SideMenu>
+      {isLoadingUser ? (
+        <AbsoluteLoader
+          containerStyle={{
+            width: isMobile ? '150px' : '300px',
+            height: isMobile ? '150px' : '300px',
+            margin: 'auto',
+          }}
+        />
+      ) : (
+        <>
+          {!isMobile ? (
+            <SideMenu>
+              <IconButton onClick={() => onClickRouting('/', history)}>
+                <DashboardIcon />
+              </IconButton>
+              {user.role === roles.admin ? (
+                <IconButton
+                  onClick={() => onClickRouting('/employees', history)}
+                >
+                  <SupervisorAccountIcon />
+                </IconButton>
+              ) : null}
+            </SideMenu>
+          ) : null}
 
-      <HeaderAndMainSectionWrapper>
-        <Header>
-          <TitleAndLogoWrapper>
-            <LogoWrapper>
-              <Logo src={logo} />
-            </LogoWrapper>
-            <HeaderTitle>Park Up</HeaderTitle>
-          </TitleAndLogoWrapper>
+          <HeaderAndMainSectionWrapper>
+            <Header>
+              {isMobile ? (
+                <IconButton
+                  onClick={() => setIsOpenDrawer(true)}
+                  style={{ padding: 0 }}
+                >
+                  <MenuBurgerIcon />
+                </IconButton>
+              ) : null}
+              <TitleAndLogoWrapper>
+                <LogoWrapper>
+                  <Logo src={logo} />
+                </LogoWrapper>
+                <HeaderTitle>Park Up</HeaderTitle>
+              </TitleAndLogoWrapper>
 
-          <UserNameAndLogoutWrapper>
-            <UserIcon />
-            <UserName>Viktor Tasevski</UserName>
-            <IconButton>
-              <LogoutIcon />
-            </IconButton>
-          </UserNameAndLogoutWrapper>
-        </Header>
-        <DividerUnderHeader />
-        <MainSection>
-          <Switch>
-            {routes?.map((route, index) => (
-              <Route
-                key={index}
-                path={route.path}
-                component={route.component}
-                exact={route.exact}
-              />
-            ))}
-            <Redirect to='/' />
-          </Switch>
-        </MainSection>
-      </HeaderAndMainSectionWrapper>
+              {isMobile ? null : (
+                <UserNameAndLogoutWrapper>
+                  <UserIcon />
+                  <UserName>
+                    {user.firstName} {user.lastName}
+                  </UserName>
+                  <IconButton onClick={logoutUser}>
+                    <LogoutIcon />
+                  </IconButton>
+                </UserNameAndLogoutWrapper>
+              )}
+            </Header>
+            <DividerUnderHeader />
+            <MainSection>
+              <Switch>
+                {routes?.map((route, index) => (
+                  <Route
+                    key={index}
+                    path={route.path}
+                    component={route.component}
+                    exact={route.exact}
+                  />
+                ))}
+                <Redirect to='/' />
+              </Switch>
+            </MainSection>
+          </HeaderAndMainSectionWrapper>
+        </>
+      )}
     </Container>
   );
Index: sources/client/src/screens/AdminHomeScreen/styles.js
===================================================================
--- sources/client/src/screens/AdminHomeScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/AdminHomeScreen/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -7,9 +7,14 @@
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Box from '@mui/material/Box';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseI from '@mui/icons-material/Close';
+import { mobile_max_width } from '../../config/utilities';
+import backgroundImage from '../../resources/login_background.jpg';
 
 export const Container = styled.div`
   display: flex;
   flex-direction: row;
-  height: 100%;
+  min-height: 100vh;
   flex: 1;
 `;
@@ -20,5 +25,11 @@
   flex-direction: row;
   justify-content: space-between;
-  padding: 10px 30px;
+  padding: 10px 7%;
+  position: fixed;
+  z-index: 100;
+  background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 15px;
+  }
 `;
 
@@ -26,5 +37,6 @@
   variant: 'middle',
   sx: {
-    margin: '0 25px',
+    margin: '0 5%',
+    marginTop: '75px',
     borderWidth: '2px',
     borderBottomWidth: 'thin',
@@ -75,5 +87,5 @@
   sx: {
     fontSize: 30,
-    color: `${props.theme.palette.error.light}`,
+    color: `${props.theme.palette.error.main}`,
   },
 }))``;
@@ -82,15 +94,20 @@
   display: flex;
   flex-direction: column;
-  height: 100%;
   width: 100%;
+  padding-left: 70px;
   background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 0;
+  }
 `;
 
 export const SideMenu = styled.div`
   flex-direction: column;
-  height: 100%;
   width: 70px;
   padding: 20px 10px 0 10px;
   border-right: 1px solid grey;
+  position: fixed;
+  height: 100%;
   background-color: ${(props) => props.theme.palette.primary.main};
 `;
@@ -124,6 +141,13 @@
   width: 100%;
   height: 100%;
-  padding: 20px 0px;
+  padding-top: 20px;
   display: flex;
   flex-direction: column;
 `;
+
+export const MenuBurgerIcon = styled(MenuIcon).attrs((props) => ({
+  sx: {
+    fontSize: 50,
+    color: `${props.theme.palette.primary.main}`,
+  },
+}))``;
Index: sources/client/src/screens/LoginScreen/index.js
===================================================================
--- sources/client/src/screens/LoginScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ 	(revision )
@@ -1,25 +1,0 @@
-import { Switch, Route, Redirect } from 'react-router-dom';
-import { ScreenWrapper, LoginWrapper, Logo, LogoWrapper } from './styles';
-
-import logo from '../../resources/logo.jpg';
-import Login from '../../components/Login';
-
-const LoginScreen = () => {
-  return (
-    <ScreenWrapper>
-      <LoginWrapper>
-        <LogoWrapper>
-          <Logo src={logo} />
-        </LogoWrapper>
-        <Switch>
-          <Route exact path='/' component={Login} />
-          {/* <Route exact path='/login-guest' component={LoginGuest} /> */}
-          {/* <Route exact path='/register' component={Register} /> */}
-          <Redirect to='/' />
-        </Switch>
-      </LoginWrapper>
-    </ScreenWrapper>
-  );
-};
-
-export default LoginScreen;
Index: sources/client/src/screens/LoginScreen/styles.js
===================================================================
--- sources/client/src/screens/LoginScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ 	(revision )
@@ -1,37 +1,0 @@
-import styled from 'styled-components';
-import backgroundImage from '../../resources/login_background.jpg';
-
-export const ScreenWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props) => props.theme.palette.background.whiteSmoke};
-`;
-
-export const LoginWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 500px;
-  height: 100vh;
-  background-image: url(${backgroundImage});
-  position: relative;
-  border-radius: 10px;
-
-  @media (min-width: 450px) {
-    max-height: 750px;
-  }
-`;
-
-export const LogoWrapper = styled.div`
-  width: 100%;
-  height: 200px;
-  margin-bottom: 40px;
-`;
-
-export const Logo = styled.img`
-  width: 100%;
-  height: 100%;
-`;
Index: sources/client/src/screens/UserAndNotAuthScreen/index.js
===================================================================
--- sources/client/src/screens/UserAndNotAuthScreen/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/screens/UserAndNotAuthScreen/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,75 @@
+import { useContext, useState } from 'react';
+import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
+import HeaderUserAndAuth from '../../components/HeaderUserAndAuth';
+import { AccessoriesContext } from '../../context/AccessoriesContext';
+import { Wrapper, ScreenWrapper } from './styles';
+import { UserContext } from '../../context/UserContext';
+import { roles } from '../../config/enums';
+
+import Landing from '../../components/user/Landing'; //       USER
+import MyProfile from '../../components/user/MyProfile';
+// MapUsers - same as guest and auth but diffrent url         USER
+import Session from '../../components/user/Session'; //       USER and GUEST
+import Auth from '../../components/Auth'; //                  NOT AUTH
+import MapUsers from '../../components/user/MapUsers'; // TODO     GUEST and NOT AUTH
+
+import { DndProvider } from 'react-dnd';
+import { TouchBackend } from 'react-dnd-touch-backend';
+
+const UserAndNotAuthScreen = () => {
+    const { user } = useContext(UserContext);
+    const location = useLocation();
+    const { isMobile } = useContext(AccessoriesContext);
+    const [isUserParked, setIsUserParked] = useState(false); // TODO FETCH
+    const asphaltBg =
+        user && user.role === roles.user && location.pathname === '/';
+    const mapUrl = user && user.role === roles.user ? '/maps' : '/';
+    const options = {
+        enableMouseEvents: true,
+    };
+    const content = (
+        <Wrapper asphaltBg={asphaltBg}>
+            <DndProvider backend={TouchBackend} options={options}>
+                <HeaderUserAndAuth />
+                <Switch>
+                    {!user ? ( // NOT AUTH ROUTES
+                        <Auth />
+                    ) : (
+                        <>
+                            {user.role === roles.user ? ( // USER ROUTES
+                                <>
+                                    <Route
+                                        exact
+                                        path={'/'}
+                                        component={() => (
+                                            <Landing
+                                                isParked={isUserParked}
+                                                setIsParked={setIsUserParked}
+                                            />
+                                        )}
+                                    />
+
+                                    <Route
+                                        exact
+                                        path={'/my-profile'}
+                                        component={MyProfile}
+                                    />
+                                </>
+                            ) : null}
+                            {/* USER AND GUEST ROUTES */}
+                            <Route exact path='/session' component={Session} />
+                            <Route exact path={mapUrl} component={MapUsers} />
+                            <Redirect to='/' />
+                        </>
+                    )}
+                    {/* USER, GUEST AND NOT AUTH ROUTES */}
+                    <Redirect to='/' />
+                </Switch>
+            </DndProvider>
+        </Wrapper>
+    );
+
+    return isMobile ? content : <ScreenWrapper>{content}</ScreenWrapper>;
+};
+
+export default UserAndNotAuthScreen;
Index: sources/client/src/screens/UserAndNotAuthScreen/styles.js
===================================================================
--- sources/client/src/screens/UserAndNotAuthScreen/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/screens/UserAndNotAuthScreen/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import backgroundImage from '../../resources/login_background.jpg';
+import backgroundAsphalt from '../../resources/asphalt_texture1.jfif';
+import { mobile_max_width } from '../../config/utilities';
+
+export const ScreenWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding-top: 8vh;
+`;
+
+export const Wrapper = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  //   background-color: ${(props) =>
+    props.theme.palette.background.whiteSmoke};
+  background-image: url(${(props) =>
+    props.asphaltBg ? backgroundAsphalt : backgroundImage});
+  position: relative;
+
+  @media (min-width: ${mobile_max_width}px) {
+    width: ${mobile_max_width}px;
+    height: 750px;
+    min-height: 0;
+    margin: auto;
+  }
+`;
