Index: sources/client/package.json
===================================================================
--- sources/client/package.json	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/package.json	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,49 +1,58 @@
 {
-  "name": "my",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@frogress/line": "^1.0.1",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.0.0",
-    "@mui/styled-engine-sc": "^5.0.0",
-    "@mui/styles": "^5.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "google-map-react": "^2.1.10",
-    "moment": "^2.29.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "styled-components": "^5.3.1",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "my",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@frogress/line": "^1.0.1",
+        "@material-ui/core": "^4.12.3",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
+        "@mui/styled-engine-sc": "^5.0.0",
+        "@mui/styles": "^5.0.0",
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "axios": "^0.24.0",
+        "google-map-react": "^2.1.10",
+        "jwt-decode": "^3.1.2",
+        "material-ui-color": "^1.2.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2",
+        "react-dnd": "^14.0.4",
+        "react-dnd-html5-backend": "^14.0.2",
+        "react-dnd-preview": "^6.0.2",
+        "react-dnd-touch-backend": "^14.1.1",
+        "react-dom": "^17.0.2",
+        "react-router-dom": "^5.3.0",
+        "react-scripts": "4.0.3",
+        "styled-components": "^5.3.1",
+        "web-vitals": "^1.0.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "proxy": "http://localhost:8080"
 }
Index: sources/client/src/App.css
===================================================================
--- sources/client/src/App.css	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ 	(revision )
@@ -1,38 +1,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
Index: sources/client/src/App.js
===================================================================
--- sources/client/src/App.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/App.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,54 +1,66 @@
-import './App.css';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import AdminEmployeeHomeScreen from './screens/AdminHomeScreen';
+import UserAndNotAuthScreen from './screens/UserAndNotAuthScreen';
+import Alert from './components/Alert';
+import BackgropLoader from './components/Loaders/BackdropLoader';
+import { roles } from './config/enums';
+import { UserContext } from './context/UserContext';
+import { AccessoriesContext } from './context/AccessoriesContext';
+import useIsMobile from './hooks/useIsMobile';
+import { useState } from 'react';
 
-import DestinationComponent from './utils/DestinationComponent';
-
-import AdminHomeScreen from './screens/AdminHomeScreen';
-import LoginScreenImported from './screens/LoginScreen';
-
-import { roles } from './config/enums';
-
-const LoginScreen = new DestinationComponent('/', LoginScreenImported, true);
-const AdminEmployeeHomeScreen = new DestinationComponent('/', AdminHomeScreen);
-// const UserHomeScreen = new DestinationComponent('/', UserHomeScreen); TODO
-
-const publicRoutes = [LoginScreen];
-
-const userRoutes = [
-  // UserHomeScreen
-];
-
-const adminAndEmployeeRoutes = [AdminEmployeeHomeScreen];
+import useFindUser from './hooks/useFindUser';
+import Sidedrawer from './components/Sidedrawer';
 
 function App(props) {
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
+    const [alertData, setAlertData] = useState({
+        type: 'error',
+        msg: 'Не Сте Логирани!',
+    });
+    const setAlert = ({ type, msg }) => {
+        setAlertData({ type, msg });
+        setIsAlertOpen(true);
+    };
+    const { user, setUser, isLoading: isLoadingUser } = useFindUser({ setAlert });
+    const { isMobile } = useIsMobile();
+    const [isAlertOpen, setIsAlertOpen] = useState(false);
+    const [isBackdropLoaderOpen, setIsBackdropLoaderOpen] = useState(false);
+    const [isOpenDrawer, setIsOpenDrawer] = useState(false);
 
-  // const user = null;
+    let displayScreen;
+    if (user && (user.role === roles.admin || user.role === roles.employee)) {
+        displayScreen = <AdminEmployeeHomeScreen />;
+    } else {
+        displayScreen = <UserAndNotAuthScreen />;
+    }
 
-  let routes = publicRoutes;
-  if (user) {
-    switch (user.role) {
-      case roles.user:
-        routes = userRoutes;
-        break;
-      case roles.admin:
-      case roles.employee:
-        routes = adminAndEmployeeRoutes;
-        break;
-      default:
-        break;
-    }
-  }
-  console.log(publicRoutes);
-  return (
-    <Switch>
-      {routes?.map((route, index) => (
-        <Route key={index} path={route.path} component={route.component} />
-      ))}
-      <Redirect to='/' />
-    </Switch>
-  );
+    return (
+        <UserContext.Provider value={{ user, setUser, isLoadingUser }}>
+            <AccessoriesContext.Provider
+                value={{
+                    isMobile,
+                    setAlert,
+                    setIsBackdropLoaderOpen,
+                    setIsOpenDrawer,
+                }}
+            >
+                <Sidedrawer
+                    isOpen={isOpenDrawer}
+                    setIsOpen={setIsOpenDrawer}
+                    isMobile={isMobile}
+                />
+                <BackgropLoader
+                    isBackdropLoaderOpen={isBackdropLoaderOpen}
+                    isMobile={isMobile}
+                />
+                <Alert
+                    isOpen={isAlertOpen}
+                    setIsOpen={setIsAlertOpen}
+                    type={alertData.type}
+                    msg={alertData.msg}
+                />
+                {displayScreen}
+            </AccessoriesContext.Provider>
+        </UserContext.Provider>
+    );
 }
 
Index: sources/client/src/components/Arrows/index.js
===================================================================
--- sources/client/src/components/Arrows/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Arrows/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,18 @@
+import { Wrapper, Arrow } from './styles';
+
+const arrows_number = 10;
+
+const Arrows = () => {
+  return (
+    <Wrapper>
+      {new Array(arrows_number).fill().map((_, index) => (
+        <Arrow
+          key={index}
+          className={`arrow arrow-${arrows_number - index - 1}`}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+export default Arrows;
Index: sources/client/src/components/Arrows/styles.js
===================================================================
--- sources/client/src/components/Arrows/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Arrows/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,80 @@
+import styled, { keyframes } from 'styled-components';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+
+const flash = keyframes`
+0% { 
+    opacity: 0;
+}
+25% { 
+    opacity: 0.33;
+}
+50% { 
+    opacity: 0.66;
+}
+100% { 
+    opacity: 1;
+}
+`;
+
+const speed = `1.8s`;
+const multipy_by = 30;
+const add = 0;
+const delay = 0.15;
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .arrow-0 {
+    animation: ${flash} ${speed} infinite ${9 * delay}s;
+  }
+  .arrow-1 {
+    top: ${1 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${8 * delay}s;
+  }
+  .arrow-2 {
+    top: ${2 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${7 * delay}s;
+  }
+  .arrow-3 {
+    top: ${3 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${6 * delay}s;
+  }
+  .arrow-4 {
+    top: ${4 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${5 * delay}s;
+  }
+  .arrow-5 {
+    top: ${5 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${4 * delay}s;
+  }
+  .arrow-6 {
+    top: ${6 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${3 * delay}s;
+  }
+  .arrow-7 {
+    top: ${7 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${2 * delay}s;
+  }
+  .arrow-8 {
+    top: ${8 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite ${1 * delay}s;
+  }
+  .arrow-9 {
+    top: ${9 * multipy_by + add}px;
+    animation: ${flash} ${speed} infinite;
+  }
+`;
+
+export const Arrow = styled(ArrowBackIosNewIcon).attrs((props) => ({
+  sx: {
+    fontSize: 80,
+    color: props.theme.palette.primary.dark,
+    transform: 'rotate(90deg)',
+    position: 'absolute',
+    // opacity: 0,
+  },
+}))``;
Index: sources/client/src/components/Auth/Login/index.js
===================================================================
--- sources/client/src/components/Auth/Login/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/Login/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,70 @@
+import { Link, useHistory } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useLogin from '../../../hooks/useLogin';
+
+import {
+  CredentialsWrapper,
+  DividerButtons,
+  DividerText,
+  Input,
+  LockIcon,
+  PersonIcon,
+  SignInButton,
+  ButtonsWrapper,
+  RegisterText,
+} from './styles';
+
+const Login = () => {
+  const { loginUser } = useLogin();
+  const { data, onFormChange } = useForm({
+    email: '',
+    password: '',
+  });
+  let history = useHistory();
+  const handleSignIn = () => {
+    loginUser({ email: data.email, password: data.password });
+  };
+  return (
+    <>
+      <CredentialsWrapper>
+        <Input
+          name='email'
+          placeholder='Емаил'
+          value={data.email}
+          onChange={onFormChange}
+          InputProps={{
+            startAdornment: <PersonIcon />,
+          }}
+        />
+        <Input
+          name='password'
+          value={data.password}
+          placeholder='Лозинка'
+          onChange={onFormChange}
+          InputProps={{
+            startAdornment: <LockIcon />,
+          }}
+          type='password'
+        />
+      </CredentialsWrapper>
+      <ButtonsWrapper>
+        <SignInButton onClick={handleSignIn}>НАЈАВА</SignInButton>
+        <DividerButtons>
+          <DividerText>ИЛИ</DividerText>
+        </DividerButtons>
+        <SignInButton onClick={() => history.push('/login-guest')}>
+          НАЈАВА КАКО ГОСТИН
+        </SignInButton>
+        {/* TODO Neka nosi do '/login-guest'*/}
+      </ButtonsWrapper>
+      <RegisterText>
+        {' '}
+        {/* TODO Neka nosi do '/register' */}
+        Немате Профил?
+        <Link to='/register'>Регистрирај се!</Link>
+      </RegisterText>
+    </>
+  );
+};
+
+export default Login;
Index: sources/client/src/components/Auth/Login/styles.js
===================================================================
--- sources/client/src/components/Auth/Login/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/Login/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,110 @@
+import { Button } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import LIcon from '@mui/icons-material/Lock';
+import styled from 'styled-components';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '25px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      opacity: 0.6;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  padding: 30px 0px;
+`;
+export const SignInButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const DividerButtons = styled(Divider).attrs({
+  sx: {},
+})`
+  align-items: center;
+  // margin-bottom: 15px;
+  ::before,
+  ::after {
+    border-top: 2px solid white;
+  }
+`;
+
+export const DividerText = styled.p`
+  color: white;
+`;
+
+export const RegisterText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/LoginGuest/index.js
===================================================================
--- sources/client/src/components/Auth/LoginGuest/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/LoginGuest/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useLoginGuest from '../../../hooks/useLoginGuest';
+
+import {
+  CredentialsWrapper,
+  Input,
+  PersonIcon,
+  PhoneIcon,
+  CarIcon,
+  SignInButton,
+  LoginText,
+} from './styles';
+
+const LoginGuest = () => {
+  const {loginGuest} = useLoginGuest();
+  const { data, onFormChange } = useForm({
+    mobile: '',
+    email: '',
+    plate: '',
+  });
+  return (
+      <>
+          <CredentialsWrapper>
+              <Input
+                  name='mobile'
+                  placeholder='Телефонски број'
+                  value={data.mobile}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PhoneIcon />,
+                  }}
+              />
+              <Input
+                  name='email'
+                  placeholder='Емаил адреса'
+                  value={data.email}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PersonIcon />,
+                  }}
+              />
+              <Input
+                  name='plate'
+                  placeholder='Таблица...SK-8190-AV'
+                  value={data.plate}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <CarIcon />,
+                  }}
+              />
+          </CredentialsWrapper>
+          <SignInButton onClick={() => loginGuest({ credentials: data })}>
+              НАЈАВА КАКО ГОСТИН
+          </SignInButton>
+          <LoginText>
+              Имате Профил? <Link to='/login'>Најавете се!</Link>
+          </LoginText>
+      </>
+  );
+};
+
+export default LoginGuest;
Index: sources/client/src/components/Auth/LoginGuest/styles.js
===================================================================
--- sources/client/src/components/Auth/LoginGuest/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/LoginGuest/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhIcon from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '25px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      color: white;
+      opacity: 0.6;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const CarIcon = styled(DirectionsCarIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const SignInButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  margin-top: 50px;
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const LoginText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/Register/index.js
===================================================================
--- sources/client/src/components/Auth/Register/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/Register/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useRegisterUser from '../../../hooks/useRegisterUser';
+import {
+  CredentialsWrapper,
+  Input,
+  LockIcon,
+  PersonIcon,
+  PhoneIcon,
+  RegisterButton,
+  FullNameWrapper,
+  LoginText,
+} from './styles';
+
+const Register = () => {
+  const { registerUser } = useRegisterUser();
+  const { data, onFormChange } = useForm({
+    firstName: '',
+    lastName: '',
+    email: '',
+    mobile: '',
+    password: '',
+  });
+  return (
+      <>
+          <CredentialsWrapper>
+              <FullNameWrapper>
+                  <Input
+                      name='firstName'
+                      placeholder='Име'
+                      style={{
+                          width: '49%',
+                      }}
+                      value={data.firstName}
+                      onChange={onFormChange}
+                  />
+                  <Input
+                      name='lastName'
+                      placeholder='Презиме'
+                      style={{
+                          width: '49%',
+                      }}
+                      value={data.lastName}
+                      onChange={onFormChange}
+                  />
+              </FullNameWrapper>
+              <Input
+                  name='mobile'
+                  placeholder='Телефонски број'
+                  value={data.mobile}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PhoneIcon />,
+                  }}
+              />
+              <Input
+                  name='email'
+                  placeholder='Емаил адреса'
+                  value={data.email}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PersonIcon />,
+                  }}
+              />
+              <Input
+                  name='password'
+                  placeholder='Лозинка'
+                  value={data.password}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <LockIcon />,
+                  }}
+                  type='password'
+              />
+          </CredentialsWrapper>
+          <RegisterButton onClick={() => registerUser(data)}>
+              Регистрирај се
+          </RegisterButton>
+          <LoginText>
+              Имате Профил? <Link to='/login'>Најавете се!</Link>
+          </LoginText>
+      </>
+  );
+};
+
+export default Register;
Index: sources/client/src/components/Auth/Register/styles.js
===================================================================
--- sources/client/src/components/Auth/Register/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/Register/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhIcon from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import LIcon from '@mui/icons-material/Lock';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '20px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      opacity: 0.6;
+    }
+  }
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const RegisterButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  margin-top: 30px;
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const FullNameWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const LoginText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/index.js
===================================================================
--- sources/client/src/components/Auth/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,23 @@
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { AuthWrapper } from './styles';
+
+import Login from './Login';
+import LoginGuest from './LoginGuest';
+import Register from './Register';
+import MapUsers from '../user/MapUsers';
+
+const Auth = () => {
+    return (
+        <AuthWrapper>
+            <Switch>
+                <Route exact path='/login' component={Login} />
+                <Route exact path='/login-guest' component={LoginGuest} />
+                <Route exact path='/register' component={Register} />
+                <Route exact path={'/'} component={MapUsers} />
+                <Redirect to='/' />
+            </Switch>
+        </AuthWrapper>
+    );
+};
+
+export default Auth;
Index: sources/client/src/components/Auth/styles.js
===================================================================
--- sources/client/src/components/Auth/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Auth/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import backgroundImage from '../../resources/login_background.jpg';
+import { mobile_max_width } from '../../config/utilities';
+
+export const AuthWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 500px;
+  // background-image: url(${backgroundImage});
+  border-radius: 10px;
+  // height: calc(100vh - 266px);
+  @media (min-width: ${mobile_max_width}px) {
+    max-height: 750px;
+  }
+`;
Index: sources/client/src/components/DropdownViewer/index.js
===================================================================
--- sources/client/src/components/DropdownViewer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/DropdownViewer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,36 @@
+import { Dropdown, DropdownItem } from './styles';
+
+const DropdownViewer = ({ data = [], width }) => {
+    return (
+        <Dropdown
+            value={data[0] ?? ''}
+            displayEmpty
+            renderValue={() => (
+                <DropdownItem>{data[0] ?? <em>NONE</em>}</DropdownItem>
+            )}
+            disabled={data.length < 2}
+            onClick={(e) => {
+                e.stopPropagation();
+            }}
+            MenuProps={{
+                sx: {
+                    textAlign: 'center',
+                    maxHeight: '250px',
+                },
+            }}
+        >
+            {data.slice(1).map((d, index) => (
+                <DropdownItem
+                    key={index}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                >
+                    {d}
+                </DropdownItem>
+            ))}
+        </Dropdown>
+    );
+};
+
+export default DropdownViewer;
Index: sources/client/src/components/DropdownViewer/styles.js
===================================================================
--- sources/client/src/components/DropdownViewer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/DropdownViewer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import Select from '@mui/material/Select';
+import { Typography } from '@mui/material';
+
+export const Dropdown = styled(Select).attrs((props) => ({
+  sx: {
+    width: props.width ?? '70%',
+    textAlign: 'center',
+  },
+}))`
+  > div {
+    padding: 11px 32px 11px 9px;
+  }
+`;
+
+export const DropdownItem = styled(Typography).attrs({
+  variant: 'h4',
+})`
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 5px;
+  padding: 5px;
+`;
Index: sources/client/src/components/GoogleMaps/index.js
===================================================================
--- sources/client/src/components/GoogleMaps/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/GoogleMaps/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,45 +1,64 @@
 import GoogleMapReact from 'google-map-react';
+import { useEffect, useRef } from 'react';
 
 import { Wrapper, Marker } from './styles';
 
-const ParkingSpaceMarker = ({ text, free }) => (
-  <Marker $free={free}>{text}</Marker>
+const ParkingSpaceMarker = ({ text, isTaken }) => (
+    <Marker $isTaken={isTaken}>{text}</Marker>
 );
 
-const GoogleMaps = ({ location, parkingSpacesLocation, zoneAreaColor }) => {
-  const defaultProps = {
-    zoom: 18,
-  };
-  const drawZonePolygon = (map, maps) => {
-    var zoneArea = new maps.Polygon({
-      paths: location.coords,
-      strokeColor: zoneAreaColor,
-      strokeOpacity: 0.8,
-      strokeWeight: 2,
-      fillColor: zoneAreaColor,
-      fillOpacity: 0.2,
-    });
-    zoneArea.setMap(map);
-  };
-  return (
-    <Wrapper>
-      <GoogleMapReact
-        defaultCenter={location.center}
-        defaultZoom={defaultProps.zoom}
-        yesIWantToUseGoogleMapApiInternals={true}
-        onGoogleApiLoaded={({ map, maps }) => drawZonePolygon(map, maps)}
-      >
-        {parkingSpacesLocation.map((p, index) => (
-          <ParkingSpaceMarker
-            key={index}
-            lat={p.lat}
-            lng={p.lng}
-            free={p.free}
-            text={p.parkingSpaceNumber}
-          />
-        ))}
-      </GoogleMapReact>
-    </Wrapper>
-  );
+const GoogleMaps = ({
+    location = {},
+    parkingSpaces = [],
+    zoneAreaColor = '',
+    zoom,
+}) => {
+    let refMap = useRef(null);
+    let refZone = useRef(null);
+    const defaultProps = {
+        zoom: 15,
+    };
+    const drawZonePolygon = (map, maps) => {
+        if (!maps) return;
+        var zoneArea = new maps.Polygon({
+            paths: location?.coords ?? [],
+            strokeColor: zoneAreaColor ?? '',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            fillColor: zoneAreaColor ?? '',
+            fillOpacity: 0.2,
+        });
+        refZone.current = zoneArea;
+        zoneArea.setMap(map);
+    };
+    useEffect(() => {
+        if (refMap.current) {
+            refZone.current.setMap(null);
+            drawZonePolygon(refMap.current.map, refMap.current.maps);
+        }
+    }, [location?.centre]);
+    return (
+        <Wrapper>
+            <GoogleMapReact
+                center={location?.centre}
+                zoom={zoom ?? defaultProps.zoom}
+                yesIWantToUseGoogleMapApiInternals={true}
+                onGoogleApiLoaded={({ map, maps, ref }) => {
+                    refMap.current = { map, maps };
+                    drawZonePolygon(map, maps);
+                }}
+            >
+                {parkingSpaces.map((p, index) => (
+                    <ParkingSpaceMarker
+                        key={index}
+                        lat={p.lat}
+                        lng={p.lng}
+                        isTaken={p.taken}
+                        text={p.psName}
+                    />
+                ))}
+            </GoogleMapReact>
+        </Wrapper>
+    );
 };
 
Index: sources/client/src/components/GoogleMaps/styles.js
===================================================================
--- sources/client/src/components/GoogleMaps/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/GoogleMaps/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,8 +1,13 @@
 import styled from 'styled-components';
+import { mobile_max_width } from '../../config/utilities';
 
 export const Wrapper = styled.div`
-  width: 100%;
-  height: 69vh;
-  padding: 0 30px;
+    width: 100%;
+    height: 69vh;
+    padding: 0 4vh;
+
+    @media (max-width: ${mobile_max_width}px) {
+        height: 50vh;
+    }
 `;
 
@@ -12,10 +17,11 @@
   height: 25px;
   background-color: ${(props) =>
-    props.$free
-      ? `${props.theme.palette.success.light}`
-      : `${props.theme.palette.error.main}`}};
+      props.$isTaken
+          ? `${props.theme.palette.error.main}`
+          : `${props.theme.palette.success.light}`}};
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
+  transform: translate(-50%, -100%);
 `;
Index: sources/client/src/components/HeaderUserAndAuth/index.js
===================================================================
--- sources/client/src/components/HeaderUserAndAuth/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/HeaderUserAndAuth/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,64 @@
+import { useContext } from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import {
+  Header,
+  MenuBurgerIcon,
+  LogoWrapper,
+  Logo,
+  NavBar,
+  NavBarTitles,
+  HeaderLogoWrapper,
+} from './styles';
+import IconButton from '@mui/material/IconButton';
+
+import { roles } from '../../config/enums';
+import { AccessoriesContext } from '../../context/AccessoriesContext';
+import { UserContext } from '../../context/UserContext';
+import logo from '../../resources/logo.jpg';
+import logoImg from '../../resources/logo_2_transparent_bg.png';
+
+const HeaderUserAndAuth = () => {
+  const { user } = useContext(UserContext);
+  const { setIsOpenDrawer, isMobile } = useContext(AccessoriesContext);
+  const path = useLocation().pathname;
+
+  const isUserLandingPage = user && user.role === roles.user && path == '/';
+  return (
+    <>
+      {!isMobile ? null : (
+        <Header>
+          <IconButton onClick={() => setIsOpenDrawer(true)}>
+            <MenuBurgerIcon />
+          </IconButton>
+          {isUserLandingPage ? (
+            <HeaderLogoWrapper>
+              <Logo src={logo} />
+            </HeaderLogoWrapper>
+          ) : null}
+        </Header>
+      )}
+      {isUserLandingPage ? null : (
+        <LogoWrapper>
+          <Logo src={logo} />
+        </LogoWrapper>
+      )}
+      {user || isMobile ? null : (
+        <NavBar>
+          <NavBarTitles $isSelected={path === '/maps'}>
+            <Link to='/maps'>Мапа</Link>
+          </NavBarTitles>
+          <NavBarTitles
+            $isSelected={path === '/login' || path === '/login-guest'}
+          >
+            <Link to='/login'>Најави Се</Link>
+          </NavBarTitles>
+          <NavBarTitles $isSelected={path === '/register'}>
+            <Link to='/register'>Регистрирај Се</Link>
+          </NavBarTitles>
+        </NavBar>
+      )}
+    </>
+  );
+};
+
+export default HeaderUserAndAuth;
Index: sources/client/src/components/HeaderUserAndAuth/styles.js
===================================================================
--- sources/client/src/components/HeaderUserAndAuth/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/HeaderUserAndAuth/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import MenuIcon from '@mui/icons-material/Menu';
+
+export const Header = styled.div`
+  width: 100%;
+  height: 66px;
+  background-color: #f2f2f2;
+  padding-left: 7px;
+  padding-right: 15px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const HeaderLogoWrapper = styled.div`
+  width: 100px;
+  height: 100%;
+`;
+
+export const NavBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 20px;
+  padding-top: 15px;
+  width: 100%;
+`;
+
+export const NavBarTitles = styled.h3`
+  text-align: center;
+  display: inline-block;
+  border-bottom: ${(props) =>
+    props.$isSelected ? `3px solid ${props.theme.palette.third.main}` : 0};
+  padding-bottom: 10px;
+  margin: 0;
+  a {
+    color: ${(props) =>
+      props.$isSelected ? props.theme.palette.third.main : 'whiteSmoke'};
+    text-decoration: none;
+  }
+`;
+
+export const MenuBurgerIcon = styled(MenuIcon).attrs((props) => ({
+  sx: {
+    fontSize: 50,
+    color: `${props.theme.palette.primary.main}`,
+  },
+}))``;
+
+export const LogoWrapper = styled.div`
+  width: 100%;
+  height: 200px;
+`;
+
+export const Logo = styled.img`
+  width: 100%;
+  height: 100%;
+`;
Index: sources/client/src/components/Loaders/AbsoluteLoader/index.js
===================================================================
--- sources/client/src/components/Loaders/AbsoluteLoader/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Loaders/AbsoluteLoader/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,11 @@
+import { Loader, Container } from './styles';
+
+const AbsoluteLoader = ({ containerStyle }) => {
+    return (
+        <Container style={containerStyle}>
+            <Loader />
+        </Container>
+    );
+};
+
+export default AbsoluteLoader;
Index: sources/client/src/components/Loaders/AbsoluteLoader/styles.js
===================================================================
--- sources/client/src/components/Loaders/AbsoluteLoader/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Loaders/AbsoluteLoader/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export const Container = styled.div``;
+
+export const Loader = styled(CircularProgress).attrs({
+    size: '100%',
+})`
+    .MuiCircularProgress-svg {
+        color: ${(props) => props.theme.palette.primary.light};
+    }
+`;
Index: sources/client/src/components/Loaders/BackdropLoader/index.js
===================================================================
--- sources/client/src/components/Loaders/BackdropLoader/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Loaders/BackdropLoader/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,18 @@
+import Backdrop from '@mui/material/Backdrop';
+
+import { Loader } from './styles';
+
+const BackgropLoader = ({ isBackdropLoaderOpen, isMobile }) => {
+  return (
+    <Backdrop
+      open={isBackdropLoaderOpen}
+      sx={{
+        zIndex: 1000,
+      }}
+    >
+      <Loader size={isMobile ? '150px' : '250px'} />
+    </Backdrop>
+  );
+};
+
+export default BackgropLoader;
Index: sources/client/src/components/Loaders/BackdropLoader/styles.js
===================================================================
--- sources/client/src/components/Loaders/BackdropLoader/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Loaders/BackdropLoader/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export const Loader = styled(CircularProgress).attrs({
+  sx: {
+    zIndex: 1001,
+  },
+})`
+  .MuiCircularProgress-svg {
+    color: ${(props) => props.theme.palette.primary.light};
+  }
+`;
Index: sources/client/src/components/Login/index.js
===================================================================
--- sources/client/src/components/Login/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ 	(revision )
@@ -1,64 +1,0 @@
-import { Link } from 'react-router-dom';
-import useForm from '../../hooks/useForm';
-
-import {
-  CredentialsWrapper,
-  DividerButtons,
-  DividerText,
-  Input,
-  LockIcon,
-  PersonIcon,
-  SignInButton,
-  ButtonsWrapper,
-  RegisterText,
-} from './styles';
-
-const Login = () => {
-  const { data, onFormChange } = useForm({
-    email: '',
-    password: '',
-  });
-  const handleSignIn = () => {
-    console.log(`Email: ${data.email}`);
-    console.log(`Password: ${data.password}`);
-  };
-  return (
-    <>
-      <CredentialsWrapper>
-        <Input
-          name='email'
-          value={data.email}
-          onChange={onFormChange}
-          InputProps={{
-            startAdornment: <PersonIcon />,
-          }}
-        />
-        <Input
-          name='password'
-          value={data.password}
-          onChange={onFormChange}
-          InputProps={{
-            startAdornment: <LockIcon />,
-          }}
-          type='password'
-        />
-      </CredentialsWrapper>
-      <ButtonsWrapper>
-        <SignInButton onClick={handleSignIn}>НАЈАВА</SignInButton>
-        <DividerButtons>
-          <DividerText>ИЛИ</DividerText>
-        </DividerButtons>
-        <SignInButton>НАЈАВА КАКО ГОСТИН</SignInButton>{' '}
-        {/* TODO Neka nosi do '/login-guest'*/}
-      </ButtonsWrapper>
-      <RegisterText>
-        {' '}
-        {/* TODO Neka nosi do '/register' */}
-        Немате Сметка?
-        <Link to='#'>Регистрирај се!</Link>
-      </RegisterText>
-    </>
-  );
-};
-
-export default Login;
Index: sources/client/src/components/Login/styles.js
===================================================================
--- sources/client/src/components/Login/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ 	(revision )
@@ -1,106 +1,0 @@
-import { Button } from '@mui/material';
-import Divider from '@mui/material/Divider';
-import TextField from '@mui/material/TextField';
-import PIcon from '@mui/icons-material/Person';
-import LIcon from '@mui/icons-material/Lock';
-import styled from 'styled-components';
-
-export const CredentialsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 25px 15px 25px;
-`;
-
-export const Input = styled(TextField).attrs({
-  fullWidth: true,
-  sx: {
-    marginTop: '35px',
-  },
-})`
-  > div {
-    padding-left: 10px;
-  }
-  input {
-    color: white;
-    font-size: 1.2rem;
-    padding-left: 10px;
-  }
-
-  fieldset {
-    border: 0;
-    border-bottom: 2px solid white;
-    border-radius: 25px;
-    padding: 0 10px;
-  }
-`;
-
-export const LockIcon = styled(LIcon).attrs({
-  sx: {
-    fontSize: '2rem',
-    color: 'white',
-  },
-})``;
-
-export const PersonIcon = styled(PIcon).attrs({
-  sx: {
-    fontSize: '2rem',
-    color: 'white',
-  },
-})``;
-
-export const ButtonsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 30px 25px;
-`;
-export const SignInButton = styled(Button).attrs((props) => ({
-  variant: 'contained',
-  size: 'large',
-  width: '50%',
-  sx: {
-    width: '70%',
-    backgroundColor: 'white',
-  },
-}))`
-  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
-  align-self: center;
-  color: ${(props) => props.theme.palette.primary.main};
-  border-radius: 15px;
-  font-weight: 600;
-  :hover {
-    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
-  }
-`;
-
-export const DividerButtons = styled(Divider).attrs({
-  sx: {},
-})`
-  align-items: flex-start;
-  margin-bottom: 15px;
-  ::before,
-  ::after {
-    border-top: 2px solid white;
-  }
-`;
-
-export const DividerText = styled.p`
-  color: white;
-`;
-
-export const RegisterText = styled.p`
-  position: absolute;
-  bottom: 0;
-  align-self: cetner;
-  width: 100%;
-  text-align: center;
-  color: white;
-
-  a {
-    margin-left: 10px;
-    text-decoration: none;
-    color: #f65026;
-    font-weight: bold;
-    font-size: 1.2rem;
-  }
-`;
Index: sources/client/src/components/Sidedrawer/index.js
===================================================================
--- sources/client/src/components/Sidedrawer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Sidedrawer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,265 @@
+import { useContext } from 'react';
+import { useHistory } from 'react-router';
+import {
+    DrawerContainer,
+    CloseIcon,
+    DividerUnderListItem,
+    DividerUnderList,
+    DashboardIcon,
+    SupervisorAccountIcon,
+    LogoutIcon,
+    UserIcon,
+    MapIcon,
+    CarIcon,
+    TimerIcon,
+    ProfileIcon,
+    LoginIcon,
+    RegistrationIcon,
+} from './styles';
+
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { IconButton } from '@mui/material';
+
+import onClickRouting from '../../utils/onClickRouting';
+import { roles } from '../../config/enums';
+import { UserContext } from '../../context/UserContext';
+import useLogoutUser from '../../hooks/useLogoutUser';
+
+const AdminAndEmployeeContent = ({ user, setIsOpen, history, logoutUser }) => {
+    return (
+        <>
+            <List>
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <DashboardIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Зони' />
+                </ListItem>
+                <DividerUnderListItem />
+                {user.role === roles.admin ? (
+                    <>
+                        <ListItem
+                            onClick={() => {
+                                setIsOpen(false);
+                                onClickRouting('/employees', history);
+                            }}
+                        >
+                            <ListItemIcon>
+                                <SupervisorAccountIcon style={{ margin: 0 }} />
+                            </ListItemIcon>
+                            <ListItemText primary='Вработени' />
+                        </ListItem>
+                        <DividerUnderListItem />
+                    </>
+                ) : null}
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem>
+                    <ListItemIcon>
+                        <UserIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={`${user.firstName} ${user.lastName}`}
+                    />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        logoutUser();
+                    }}
+                >
+                    <ListItemIcon>
+                        <LogoutIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Одјави Се' id='err-color' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const NotAuthContent = ({ setIsOpen, history }) => {
+    return (
+        <>
+            <List>
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <MapIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Мапа' />
+                </ListItem>
+                <DividerUnderListItem />
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/login', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <LoginIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Најави Се' />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/register', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <RegistrationIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Регистрирај Се' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const UserAndGuestContent = ({ user, logoutUser, setIsOpen, history }) => {
+    const isGuest = user.role === roles.guest;
+    const mapUrl = isGuest ? '/' : '/maps';
+    return (
+        <>
+            <List>
+                {isGuest ? null : (
+                    <>
+                        <ListItem
+                            onClick={() => {
+                                setIsOpen(false);
+                                onClickRouting('/', history);
+                            }}
+                        >
+                            <ListItemIcon>
+                                <CarIcon style={{ margin: 0 }} />
+                            </ListItemIcon>
+                            <ListItemText primary='Почетна' />
+                        </ListItem>
+                        <DividerUnderListItem />
+                    </>
+                )}
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting(mapUrl, history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <MapIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Мапа' />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/session', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <TimerIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Сесија' />
+                </ListItem>
+                <DividerUnderListItem />
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem
+                    onClick={() => {
+                        if (isGuest) return;
+                        setIsOpen(false);
+                        onClickRouting('/my-profile', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <UserIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={
+                            isGuest
+                                ? 'Гостин'
+                                : `${user.firstName} ${user.lastName}`
+                        }
+                    />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        logoutUser();
+                    }}
+                >
+                    <ListItemIcon>
+                        <LogoutIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Одјави Се' id='err-color' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const Sidedrawer = ({ isOpen, setIsOpen, isMobile }) => {
+    const { user } = useContext(UserContext);
+    const { logoutUser } = useLogoutUser();
+    const history = useHistory();
+
+    let content;
+
+    if (user) {
+        const props = {
+            user,
+            logoutUser,
+            setIsOpen,
+            history,
+        };
+        if (user.role === roles.admin || user.role === roles.employee) {
+            content = <AdminAndEmployeeContent {...props} />;
+        } else {
+            content = <UserAndGuestContent {...props} />;
+        }
+    } else {
+        content = <NotAuthContent setIsOpen={setIsOpen} history={history} />;
+    }
+
+    return !isMobile ? null : (
+        <SwipeableDrawer
+            open={isOpen}
+            onClose={() => setIsOpen(false)}
+            onOpen={() => setIsOpen(true)}
+        >
+            <DrawerContainer>
+                <IconButton
+                    onClick={() => setIsOpen(false)}
+                    style={{ marginLeft: '190px' }}
+                >
+                    <CloseIcon />
+                </IconButton>
+                {content}
+            </DrawerContainer>
+        </SwipeableDrawer>
+    );
+};
+
+export default Sidedrawer;
Index: sources/client/src/components/Sidedrawer/styles.js
===================================================================
--- sources/client/src/components/Sidedrawer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/Sidedrawer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+import { Divider } from '@mui/material';
+import CloseI from '@mui/icons-material/Close';
+import backgroundImage from '../../resources/login_background.jpg';
+import Box from '@mui/material/Box';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Logout from '@mui/icons-material/Logout';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
+import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCarFilledOutlined';
+import TimerOutlinedIcon from '@mui/icons-material/TimerOutlined';
+import PersonOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';
+import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
+
+export const DrawerContainer = styled(Box).attrs((props) => ({
+  sx: {
+    width: '250px',
+    height: '100%',
+    backgroundImage: `url(${backgroundImage})`,
+  },
+}))`
+  ul:first-of-type {
+    padding-top: 35px;
+    span {
+      font-size: 1.5rem;
+      color: whiteSmoke;
+      font-weight: 600;
+      margin-left: 10px;
+    }
+
+    svg {
+      margin: 0;
+      color: whiteSmoke;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  ul:last-of-type {
+    position: absolute;
+    bottom: 15px;
+    width: 100%;
+
+    span {
+      font-size: 1rem;
+      color: whiteSmoke;
+      font-weight: 600;
+    }
+    li:first-of-type svg {
+      color: whiteSmoke;
+    }
+  }
+  #err-color {
+    span {
+      color: ${(props) => props.theme.palette.error.main};
+    }
+  }
+`;
+
+export const DividerUnderListItem = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '5px 5%',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+    borderColor: 'whiteSmoke',
+  },
+})``;
+
+export const DividerUnderList = styled(Divider).attrs({
+  variant: 'fullWidth',
+  sx: {
+    marginTop: '15px',
+    marginBottom: '25px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+    borderColor: 'whiteSmoke',
+  },
+})``;
+
+export const CloseIcon = styled(CloseI).attrs((props) => ({
+  sx: {
+    fontSize: 50,
+    color: `${props.theme.palette.error.main}`,
+  },
+}))``;
+
+export const DashboardIcon = styled(Dashboard).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))`
+  margin-bottom: 15px;
+`;
+
+export const CarIcon = styled(DirectionsCarIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const ProfileIcon = styled(PersonOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const TimerIcon = styled(TimerOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const MapIcon = styled(MapOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const SupervisorAccountIcon = styled(SupervisorAccount).attrs(
+  (props) => ({
+    sx: {
+      fontSize: 35,
+    },
+  })
+)``;
+
+export const UserIcon = styled(AccountCircleIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+  },
+}))``;
+
+export const LoginIcon = styled(LoginOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+  },
+}))``;
+
+export const RegistrationIcon = styled(AppRegistrationIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: props.theme.palette.background.whiteSmoke,
+  },
+}))``;
+
+export const LogoutIcon = styled(Logout).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: `${props.theme.palette.error.main}`,
+  },
+}))``;
Index: sources/client/src/components/admin/EmployeeCreate/index.js
===================================================================
--- sources/client/src/components/admin/EmployeeCreate/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeCreate/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -4,197 +4,242 @@
 
 import {
-  EmployeeEditWrapper,
-  Title,
-  RowWrapper,
-  LabelAndInputWrapper,
-  Label,
-  StandardInputField,
-  Dropdown,
-  DropdownOption,
-  SwitchRowWrapper,
-  SwitchTitle,
-  SwitchLabelAndInputWrapper,
-  AccountSwitch,
-  BackButton,
-  SaveChangesButton,
-  VisibilityIcon,
-  VisibilityOffIcon,
+    EmployeeEditWrapper,
+    Title,
+    RowWrapper,
+    LabelAndInputWrapper,
+    Label,
+    StandardInputField,
+    Dropdown,
+    DropdownOption,
+    SwitchRowWrapper,
+    SwitchTitle,
+    SwitchLabelAndInputWrapper,
+    AccountSwitch,
+    BackButton,
+    SaveChangesButton,
+    VisibilityIcon,
+    VisibilityOffIcon,
 } from './styles';
 
 import IconButton from '@mui/material/IconButton';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 
 import { employeeStatus } from '../../../config/enums';
+import useGetData from '../../../hooks/useGetData';
+import useCreateEmployee from '../../../hooks/useCreateEmployee';
 
 import { defaultUser } from '../../../config/defaultUser';
 
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 220,
+        },
+    },
+};
+
 const EmployeeCreate = () => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  let history = useHistory();
-
-  const { data: employeeEditableData, onFormChange: setEmployeeEditableData } =
-    useForm({ ...defaultUser, confirmPassword: defaultUser.password });
-  const [accStatus, setAccStatus] = useState(defaultUser.accountActive);
-
-  const zoneOptions = [
-    {
-      text: 'Nitu edna zona',
-      value: 'none',
-    },
-    {
-      text: 'Zona 1',
-      value: 'zone1',
-    },
-    {
-      text: 'Zona 2',
-      value: 'zone2',
-    },
-    {
-      text: 'Zona 3',
-      value: 'zone3',
-    },
-    {
-      text: 'Zona 4',
-      value: 'zone4',
-    },
-    {
-      text: 'Zona 5',
-      value: 'zone5',
-    },
-  ];
-
-  const statusOptions = Object.keys(employeeStatus).map((key) => {
-    return {
-      text: employeeStatus[key],
-      value: key,
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    let history = useHistory();
+    const { data: zoneOptions, isLoading: isLoadingZonesData } = useGetData({
+        url: `/parkingZone/parkingZoneNames`,
+    });
+    const { createEmployee } = useCreateEmployee();
+    const {
+        data: employeeEditableData,
+        onFormChange: setEmployeeEditableData,
+    } = useForm({ ...defaultUser });
+    const [accStatus, setAccStatus] = useState(defaultUser.locked);
+    const {
+        data: { confirmPassword },
+        onFormChange: setConfirmPassword,
+    } = useForm({
+        confirmPassword: defaultUser.password,
+    });
+    const [zones, setZones] = useState(defaultUser.parkingZones); // TODO RENAME ZONE TO ZONES
+    console.log(zones);
+    const statusOptions = Object.keys(employeeStatus).map((key) => {
+        return {
+            text: employeeStatus[key],
+            value: key,
+        };
+    });
+
+    const onCreateEmployee = () => {
+        if (zones.length === 1 && zones[0] === 'NONE') {
+            zones.shift();
+        }
+        console.log(`Confirm password: ${confirmPassword}`);
+        const changedEmployee = {
+            ...employeeEditableData,
+            locked: accStatus,
+            parkingZones: zones,
+            confirmPass: confirmPassword,
+        };
+        createEmployee({ employee: changedEmployee });
     };
-  });
-
-  const onCreateEmployee = () => {
-    const changedEmployee = {
-      ...employeeEditableData,
-      accountActive: accStatus,
+    const handleZonesChange = (event) => {
+        const {
+            target: { value },
+        } = event;
+        if (value.length > 1 && value[0] === 'NONE') {
+            value.shift();
+        }
+        setZones(
+            typeof value === 'string'
+                ? value.split(', ')
+                : value.length === 0
+                ? ['NONE']
+                : value
+        );
     };
-    console.log('Created employee: ', changedEmployee);
-  };
-
-  return (
-    <EmployeeEditWrapper>
-      <Title variant='h5'>Создади вработен</Title>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Име</Label>
-          <StandardInputField
-            value={employeeEditableData.firstName}
-            name='firstName'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Презиме</Label>
-          <StandardInputField
-            value={employeeEditableData.lastName}
-            name='lastName'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Емаил</Label>
-          <StandardInputField
-            value={employeeEditableData.email}
-            name='email'
-            type='email'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Телефон</Label>
-          <StandardInputField
-            value={employeeEditableData.phoneNumber}
-            name='phoneNumber'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Лозинка</Label>
-          <StandardInputField
-            value={employeeEditableData.password}
-            name='password'
-            type={isPasswordVisible ? 'text' : 'password'}
-            $autoComplete={true}
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <IconButton
-          sx={{ marginTop: '23px' }}
-          onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-        >
-          {isPasswordVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-        </IconButton>
-        <LabelAndInputWrapper>
-          <Label>Потврди лозинка</Label>
-          <StandardInputField
-            value={employeeEditableData.confirmPassword}
-            name='confirmPassword'
-            type={isPasswordVisible ? 'text' : 'password'}
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Одговорен за</Label>
-          <Dropdown
-            value={employeeEditableData.zone}
-            name='zone'
-            onChange={setEmployeeEditableData}
-          >
-            {zoneOptions.map((option) => (
-              <DropdownOption value={option.value} key={option.value}>
-                {option.text}
-              </DropdownOption>
-            ))}
-          </Dropdown>
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Статус</Label>
-          <Dropdown
-            value={employeeEditableData.status}
-            name='status'
-            onChange={setEmployeeEditableData}
-          >
-            {statusOptions.map((option) => (
-              <DropdownOption value={option.value} key={option.value}>
-                {option.text}
-              </DropdownOption>
-            ))}
-          </Dropdown>
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <SwitchRowWrapper>
-        <SwitchTitle>Акаунт</SwitchTitle>
-        <SwitchLabelAndInputWrapper>
-          <Label>Активен:</Label>
-          <AccountSwitch
-            checked={accStatus}
-            value={accStatus}
-            name='accountActive'
-            onClick={() => setAccStatus(!accStatus)}
-          />
-        </SwitchLabelAndInputWrapper>
-      </SwitchRowWrapper>
-      <RowWrapper>
-        <BackButton onClick={() => history.push('/employees')}>
-          Врати се назад
-        </BackButton>
-        <SaveChangesButton onClick={onCreateEmployee}>
-          Создади вработен
-        </SaveChangesButton>
-      </RowWrapper>
-    </EmployeeEditWrapper>
-  );
+    return (
+        <EmployeeEditWrapper>
+            <Title variant='h5'>Создади вработен</Title>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Име</Label>
+                    <StandardInputField
+                        value={employeeEditableData.firstName}
+                        name='firstName'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Презиме</Label>
+                    <StandardInputField
+                        value={employeeEditableData.lastName}
+                        name='lastName'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Емаил</Label>
+                    <StandardInputField
+                        value={employeeEditableData.email}
+                        name='email'
+                        type='email'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Телефон</Label>
+                    <StandardInputField
+                        value={employeeEditableData.mobile}
+                        name='mobile'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Лозинка</Label>
+                    <StandardInputField
+                        value={employeeEditableData.password}
+                        name='password'
+                        type={isPasswordVisible ? 'text' : 'password'}
+                        $autoComplete={true}
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <IconButton
+                    sx={{ marginTop: '23px' }}
+                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+                >
+                    {isPasswordVisible ? (
+                        <VisibilityIcon />
+                    ) : (
+                        <VisibilityOffIcon />
+                    )}
+                </IconButton>
+                <LabelAndInputWrapper>
+                    <Label>Потврди лозинка</Label>
+                    <StandardInputField
+                        value={confirmPassword}
+                        name='confirmPassword'
+                        type={isPasswordVisible ? 'text' : 'password'}
+                        onChange={setConfirmPassword}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                {isLoadingZonesData ? (
+                    <AbsoluteLoader
+                        containerStyle={{
+                            position: 'absolute',
+                            left: '310px',
+                            bottom: '5px',
+                            width: '40px',
+                            height: '40px',
+                        }}
+                    />
+                ) : null}
+                <LabelAndInputWrapper>
+                    <Label>Одговорен за</Label>
+                    <Dropdown
+                        multiple
+                        value={zones}
+                        onChange={handleZonesChange}
+                        renderValue={(selected) => {
+                            return selected.join(', ');
+                        }}
+                        MenuProps={MenuProps}
+                    >
+                        {!isLoadingZonesData &&
+                            zoneOptions.map((zone) => (
+                                <DropdownOption value={zone} key={zone}>
+                                    <Checkbox
+                                        checked={zones.indexOf(zone) > -1}
+                                    />
+                                    <ListItemText primary={zone} />
+                                </DropdownOption>
+                            ))}
+                    </Dropdown>
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Статус</Label>
+                    <Dropdown
+                        value={employeeEditableData.status}
+                        name='status'
+                        onChange={setEmployeeEditableData}
+                        MenuProps={MenuProps}
+                    >
+                        {statusOptions.map((option) => (
+                            <DropdownOption
+                                value={option.value}
+                                key={option.value}
+                            >
+                                {option.text}
+                            </DropdownOption>
+                        ))}
+                    </Dropdown>
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <SwitchRowWrapper>
+                <SwitchTitle>Акаунт</SwitchTitle>
+                <SwitchLabelAndInputWrapper>
+                    <Label>Активен:</Label>
+                    <AccountSwitch
+                        checked={!accStatus}
+                        value={accStatus}
+                        name='locked'
+                        onClick={() => setAccStatus(!accStatus)}
+                    />
+                </SwitchLabelAndInputWrapper>
+            </SwitchRowWrapper>
+            <RowWrapper>
+                <BackButton onClick={() => history.push('/employees')}>
+                    Врати се назад
+                </BackButton>
+                <SaveChangesButton onClick={onCreateEmployee}>
+                    Создади вработен
+                </SaveChangesButton>
+            </RowWrapper>
+        </EmployeeEditWrapper>
+    );
 };
 
Index: sources/client/src/components/admin/EmployeeCreate/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeeCreate/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeCreate/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,127 +1,132 @@
-import styled from "styled-components";
-import { Button, InputLabel, MenuItem, Select, Switch, TextField, Typography } from "@mui/material";
+import styled from 'styled-components';
+import {
+  Button,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
 import VIcon from '@mui/icons-material/Visibility';
 import VOffIcon from '@mui/icons-material/VisibilityOff';
 
 export const EmployeeEditWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    max-width: 800px;
-    border: 1px solid whiteSmoke;
-    border-radius: 10px;
-    padding: 10px 20px;
-    margin-top: 20px;
-    margin-left: 30px;
-    background-color: white;
-    box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  border: 1px solid whiteSmoke;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-top: 20px;
+  margin-left: 30px;
+  background-color: white;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
 `;
 
-export const Title = styled(Typography).attrs({
-
-})`
-    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-    padding-bottom: 10px;
-    margin-bottom: 15px;
+export const Title = styled(Typography).attrs({})`
+  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  padding-bottom: 10px;
+  margin-bottom: 15px;
 `;
 
 export const RowWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  position: relative;
 `;
 
-export const LabelAndInputWrapper = styled.div`
+export const LabelAndInputWrapper = styled.div``;
 
-`;
+export const Label = styled(InputLabel).attrs({})``;
 
-export const Label = styled(InputLabel).attrs({
-
-})``;
-
-export const StandardInputField = styled(TextField).attrs({
-
-})`
-    width: 300px;
+export const StandardInputField = styled(TextField).attrs({})`
+  width: 300px;
 `;
 
 export const VisibilityIcon = styled(VIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
 export const VisibilityOffIcon = styled(VOffIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
-export const Dropdown = styled(Select).attrs({
-
-})`
-    width: 300px;
+export const Dropdown = styled(Select).attrs({})`
+  width: 300px;
 `;
 
-export const DropdownOption = styled(MenuItem).attrs({
-
-})``;
+export const DropdownOption = styled(MenuItem).attrs({})`
+  > span {
+    color: ${(props) => props.theme.palette.primary.main};
+    svg {
+      color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+  > div > span {
+    font-size: 1.3rem;
+  }
+`;
 
 export const SwitchRowWrapper = styled.div`
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 50px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 50px;
 `;
 
 export const SwitchTitle = styled.p`
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-    margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 5px;
 `;
 
 export const SwitchLabelAndInputWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 `;
 
-export const AccountSwitch = styled(Switch).attrs(props => ({
-}))`
-    .MuiSwitch-switchBase {
-        color: red;
-    }
-    .MuiSwitch-track {
-        background-color: red;
-    }
-    .MuiSwitch-switchBase.Mui-checked {
-        color: ${props => props.theme.palette.primary.main};
-    }
-    .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
-        background-color: ${props => props.theme.palette.primary.main};
-    }
+export const AccountSwitch = styled(Switch).attrs((props) => ({}))`
+  .MuiSwitch-switchBase {
+    color: red;
+  }
+  .MuiSwitch-track {
+    background-color: red;
+  }
+  .MuiSwitch-switchBase.Mui-checked {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+  .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
+    background-color: ${(props) => props.theme.palette.primary.main};
+  }
 `;
 
 export const BackButton = styled(Button).attrs({
-    variant: 'outlined'
+  variant: 'outlined',
 })`
-    margin-right: 15px;
-    :hover {
-        border: 2px solid;
-        font-weight: 600;
-    }
+  margin-right: 15px;
+  :hover {
+    border: 2px solid;
+    font-weight: 600;
+  }
 `;
 
-export const SaveChangesButton = styled(Button).attrs(props => ({
-    variant: 'contained',
-    sx: {
-        backgroundColor: `${props.theme.palette.primary.main}`
-    }
+export const SaveChangesButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
 }))`
-    padding: 10px 16px;
-    :hover {
-        background-color: ${props => props.theme.palette.primary.dark}
-    }
+  padding: 10px 16px;
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
 `;
Index: sources/client/src/components/admin/EmployeeEdit/index.js
===================================================================
--- sources/client/src/components/admin/EmployeeEdit/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,3 +1,3 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import useForm from '../../../hooks/useForm';
@@ -21,16 +21,24 @@
     SaveChangesButton,
     VisibilityIcon,
-    VisibilityOffIcon
+    VisibilityOffIcon,
 } from './styles';
 
 import IconButton from '@mui/material/IconButton';
-
-import {
-    employeeStatus
-} from '../../../config/enums';
-
-import {
-    employees
-} from '../EmployeesTable/mockData';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+
+import { employeeStatus } from '../../../config/enums';
+import useGetData from '../../../hooks/useGetData';
+import useUpdateEmployee from '../../../hooks/useUpdateEmployee';
+import useDeleteEmployee from '../../../hooks/useDeleteEmployee';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 220,
+        },
+    },
+};
 
 const EmployeeEdit = () => {
@@ -38,175 +46,254 @@
     let history = useHistory();
     let { employeeId } = useParams();
-    employeeId = parseInt(employeeId);
-
-    const employee = employees.find(e => e.id === employeeId);
-    const { data: employeeEditableData, onFormChange: setEmployeeEditableData } = useForm({ ...employee, confirmPassword: employee.password });
-    const [accStatus, setAccStatus] = useState(employee ? employee.accountActive : false);
-
-    const zoneOptions = [
+    const { updateEmployee } = useUpdateEmployee();
+    const { deleteEmployee } = useDeleteEmployee();
+    const { data: employeeData, isLoading: isLoadingEmployeeData } = useGetData(
         {
-            text: 'Nitu edna zona',
-            value: 'none'
-        },
-        {
-            text: 'Zona 1',
-            value: 'zone1'
-        },
-        {
-            text: 'Zona 2',
-            value: 'zone2'
-        },
-        {
-            text: 'Zona 3',
-            value: 'zone3'
-        },
-        {
-            text: 'Zona 4',
-            value: 'zone4'
-        },
-        {
-            text: 'Zona 5',
-            value: 'zone5'
+            url: `/vraboten/${employeeId}`,
         }
-    ];
-
-    const statusOptions = Object.keys(employeeStatus).map(key => {
+    );
+    const { data: zoneOptions, isLoading: isLoadingZonesData } = useGetData({
+        url: `/parkingZone/parkingZoneNames`,
+    });
+
+    const {
+        data: employeeEditableData,
+        setNewData: setNewDataEmployee,
+        onFormChange: setEmployeeEditableData,
+    } = useForm(null);
+    const [accStatus, setAccStatus] = useState(false);
+    const {
+        data: { confirmPassword },
+        onFormChange: setConfirmPassword,
+    } = useForm({ confirmPassword: '' });
+    const [zones, setZones] = useState([]);
+
+    const statusOptions = Object.keys(employeeStatus).map((key) => {
         return {
             text: employeeStatus[key],
-            value: key
+            value: key,
+        };
+    });
+
+    const onSaveChanges = () => {
+        if (zones.length === 1 && zones[0] === 'NONE') {
+            zones.shift();
         }
-    });
-
-    const onSaveChanges = () => {
+        console.log(`Confirm password: ${confirmPassword}`);
+        const mobileNumber = employeeEditableData.mobile;
+        delete employeeEditableData.mobile;
         const changedEmployee = {
             ...employeeEditableData,
-            accountActive: accStatus
+            mobileNumber: mobileNumber,
+            locked: accStatus,
+            parkingZones: zones,
+            confirmPass: confirmPassword,
+        };
+        updateEmployee({ employee: changedEmployee });
+    };
+
+    const onDeleteEmployee = () => {
+        deleteEmployee({ id: employeeData.workerId });
+    };
+
+    const handleZonesChange = (event) => {
+        const {
+            target: { value },
+        } = event;
+        if (value.length > 1 && value[0] === 'NONE') {
+            value.shift();
         }
-        console.log('Changed employee: ', changedEmployee);
-    }
-
-    const onDeleteEmployee = () => {
-        console.log(`Empoyee with ${employee.id} is deleted`);
-    }
-
-    return <EmployeeEditWrapper>
-        <Title variant='h5'>Uredi vraboten</Title>
-        <RowWrapper>
-            <LabelAndInputWrapper>
-                <Label>Ime</Label>
-                <StandardInputField
-                    value={employeeEditableData?.firstName ?? ''}
-                    name='firstName'
-                    onChange={setEmployeeEditableData}
+        setZones(
+            typeof value === 'string'
+                ? value.split(', ')
+                : value.length === 0
+                ? ['NONE']
+                : value
+        );
+    };
+    useEffect(() => {
+        if (!employeeData) return;
+        setNewDataEmployee({...employeeData, password: ''});
+        setAccStatus(employeeData.locked);
+        setZones(
+            employeeData.pzNames.length === 0
+                ? ['NONE']
+                : employeeData.pzNames
+        );
+    }, [employeeData]);
+
+    return (
+        <EmployeeEditWrapper>
+            <Title variant='h5'>Уреди Вработен</Title>
+            {isLoadingEmployeeData ? (
+                <AbsoluteLoader
+                    containerStyle={{
+                        width: '200px',
+                        height: '200px',
+                        margin: 'auto',
+                    }}
                 />
-            </LabelAndInputWrapper>
-            <LabelAndInputWrapper>
-                <Label>Prezime</Label>
-                <StandardInputField
-                    value={employeeEditableData?.lastName ?? ''}
-                    name='lastName'
-                    onChange={setEmployeeEditableData}
-                />
-            </LabelAndInputWrapper>
-        </RowWrapper>
-        <RowWrapper>
-            <LabelAndInputWrapper>
-                <Label>Email</Label>
-                <StandardInputField
-                    value={employeeEditableData?.email ?? ''}
-                    name='email'
-                    type='email'
-                    onChange={setEmployeeEditableData}
-                />
-            </LabelAndInputWrapper>
-            <LabelAndInputWrapper>
-                <Label>Telefon</Label>
-                <StandardInputField
-                    value={employeeEditableData?.phoneNumber ?? ''}
-                    name='phoneNumber'
-                    onChange={setEmployeeEditableData}
-                />
-            </LabelAndInputWrapper>
-        </RowWrapper>
-        <RowWrapper>
-            <LabelAndInputWrapper>
-                <Label>Lozinka</Label>
-                <StandardInputField
-                    value={employeeEditableData?.password ?? ''}
-                    name='password'
-                    type={isPasswordVisible ? 'text' : 'password'}
-                    onChange={setEmployeeEditableData}
-                />
-            </LabelAndInputWrapper>
-            <IconButton sx={{ marginTop: '23px' }} onClick={() => setIsPasswordVisible(!isPasswordVisible)}>
-                {
-                    isPasswordVisible ?
-                        <VisibilityIcon />
-                        :
-                        <VisibilityOffIcon />
-                }
-            </IconButton>
-            <LabelAndInputWrapper>
-                <Label>Potvrdi lozinka</Label>
-                <StandardInputField
-                    value={employeeEditableData?.confirmPassword ?? ''}
-                    name='confirmPassword'
-                    type={isPasswordVisible ? 'text' : 'password'}
-                    onChange={setEmployeeEditableData}
-                />
-            </LabelAndInputWrapper>
-        </RowWrapper>
-        <RowWrapper>
-            <LabelAndInputWrapper>
-                <Label>Odgovoren za</Label>
-                <Dropdown
-                    value={employeeEditableData?.zone !== '' ? employeeEditableData?.zone : zoneOptions[0].value}
-                    name='zone'
-                    onChange={setEmployeeEditableData}
-                >
-                    {
-                        zoneOptions.map(option => <DropdownOption value={option.value} key={option.value}>{option.text}</DropdownOption>)
-                    }
-                </Dropdown>
-            </LabelAndInputWrapper>
-            <LabelAndInputWrapper>
-                <Label>Status</Label>
-                <Dropdown
-                    value={employeeEditableData?.status !== '' ? employeeEditableData?.status : statusOptions[0].value}
-                    name='status'
-                    onChange={setEmployeeEditableData}
-                >
-                    {
-                        statusOptions.map(option => <DropdownOption value={option.value} key={option.value}>{option.text}</DropdownOption>)
-                    }
-                </Dropdown>
-            </LabelAndInputWrapper>
-        </RowWrapper>
-        <SwitchRowWrapper>
-            <SwitchTitle>Akaunt</SwitchTitle>
-            <SwitchLabelAndInputWrapper>
-                <Label>Aktiven:</Label>
-                <AccountSwitch
-                    checked={accStatus}
-                    value={accStatus}
-                    name='accountActive'
-                    onClick={() => setAccStatus(!accStatus)}
-                />
-            </SwitchLabelAndInputWrapper>
-        </SwitchRowWrapper>
-        <RowWrapper>
-            <DeleteButton onClick={onDeleteEmployee}>
-                Izbrisi vraboten
-            </DeleteButton>
-            <BackAndSaveChangesButtonsWrapper>
-                <BackButton onClick={() => history.push('/employees')}>
-                    Vrati se nazad
-                </BackButton>
-                <SaveChangesButton onClick={onSaveChanges}>
-                    Zacuvaj gi promenti
-                </SaveChangesButton>
-            </BackAndSaveChangesButtonsWrapper>
-        </RowWrapper>
-    </EmployeeEditWrapper>
+            ) : (
+                <>
+                    <RowWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Име</Label>
+                            <StandardInputField
+                                value={employeeEditableData?.firstName ?? ''}
+                                name='firstName'
+                                onChange={setEmployeeEditableData}
+                            />
+                        </LabelAndInputWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Презиме</Label>
+                            <StandardInputField
+                                value={employeeEditableData?.lastName ?? ''}
+                                name='lastName'
+                                onChange={setEmployeeEditableData}
+                            />
+                        </LabelAndInputWrapper>
+                    </RowWrapper>
+                    <RowWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Емаил</Label>
+                            <StandardInputField
+                                value={employeeEditableData?.email ?? ''}
+                                name='email'
+                                type='email'
+                                onChange={setEmployeeEditableData}
+                            />
+                        </LabelAndInputWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Телефон</Label>
+                            <StandardInputField
+                                value={employeeEditableData?.mobile ?? ''}
+                                name='mobile'
+                                onChange={setEmployeeEditableData}
+                            />
+                        </LabelAndInputWrapper>
+                    </RowWrapper>
+                    <RowWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Лозинка</Label>
+                            <StandardInputField
+                                value={employeeEditableData?.password ?? ''}
+                                name='password'
+                                type={isPasswordVisible ? 'text' : 'password'}
+                                onChange={setEmployeeEditableData}
+                            />
+                        </LabelAndInputWrapper>
+                        <IconButton
+                            sx={{ marginTop: '23px' }}
+                            onClick={() =>
+                                setIsPasswordVisible(!isPasswordVisible)
+                            }
+                        >
+                            {isPasswordVisible ? (
+                                <VisibilityIcon />
+                            ) : (
+                                <VisibilityOffIcon />
+                            )}
+                        </IconButton>
+                        <LabelAndInputWrapper>
+                            <Label>Потврди Лозинка</Label>
+                            <StandardInputField
+                                value={confirmPassword}
+                                name='confirmPassword'
+                                type={isPasswordVisible ? 'text' : 'password'}
+                                onChange={setConfirmPassword}
+                            />
+                        </LabelAndInputWrapper>
+                    </RowWrapper>
+                    <RowWrapper>
+                        {isLoadingZonesData ? (
+                            <AbsoluteLoader
+                                containerStyle={{
+                                    position: 'absolute',
+                                    left: '310px',
+                                    bottom: '5px',
+                                    width: '40px',
+                                    height: '40px',
+                                }}
+                            />
+                        ) : null}
+                        <LabelAndInputWrapper>
+                            <Label>Одговорен за:</Label>
+                            <Dropdown
+                                multiple
+                                value={zones ?? []}
+                                onChange={handleZonesChange}
+                                renderValue={(selected) => {
+                                    return selected.join(', ');
+                                }}
+                                MenuProps={MenuProps}
+                            >
+                                {!isLoadingZonesData &&
+                                    zoneOptions.map((zone) => (
+                                        <DropdownOption value={zone} key={zone}>
+                                            <Checkbox
+                                                checked={
+                                                    zones.indexOf(zone) > -1
+                                                }
+                                            />
+                                            <ListItemText primary={zone} />
+                                        </DropdownOption>
+                                    ))}
+                            </Dropdown>
+                        </LabelAndInputWrapper>
+                        <LabelAndInputWrapper>
+                            <Label>Статус</Label>
+                            <Dropdown
+                                value={
+                                    employeeEditableData?.status !== '' &&
+                                    employeeEditableData?.status !== null
+                                        ? employeeEditableData?.status
+                                        : statusOptions[0].value
+                                }
+                                name='status'
+                                onChange={setEmployeeEditableData}
+                                MenuProps={MenuProps}
+                            >
+                                {statusOptions.map((option) => (
+                                    <DropdownOption
+                                        value={option.value}
+                                        key={option.value}
+                                    >
+                                        {option.text}
+                                    </DropdownOption>
+                                ))}
+                            </Dropdown>
+                        </LabelAndInputWrapper>
+                    </RowWrapper>
+                    <SwitchRowWrapper>
+                        <SwitchTitle>Акаунт</SwitchTitle>
+                        <SwitchLabelAndInputWrapper>
+                            <Label>Активен:</Label>
+                            <AccountSwitch
+                                checked={!accStatus}
+                                value={accStatus}
+                                name='accountActive'
+                                onClick={() => setAccStatus(!accStatus)}
+                            />
+                        </SwitchLabelAndInputWrapper>
+                    </SwitchRowWrapper>
+                    <RowWrapper>
+                        <DeleteButton onClick={onDeleteEmployee}>
+                            Избриши Вработен
+                        </DeleteButton>
+                        <BackAndSaveChangesButtonsWrapper>
+                            <BackButton
+                                onClick={() => history.push('/employees')}
+                            >
+                                Врати се Назад
+                            </BackButton>
+                            <SaveChangesButton onClick={onSaveChanges}>
+                                Зачувај ги Промените
+                            </SaveChangesButton>
+                        </BackAndSaveChangesButtonsWrapper>
+                    </RowWrapper>
+                </>
+            )}
+        </EmployeeEditWrapper>
+    );
 };
 
Index: sources/client/src/components/admin/EmployeeEdit/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeeEdit/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,143 +1,148 @@
-import styled from "styled-components";
-import { Button, InputLabel, MenuItem, Select, Switch, TextField, Typography } from "@mui/material";
+import styled from 'styled-components';
+import {
+  Button,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
 import VIcon from '@mui/icons-material/Visibility';
 import VOffIcon from '@mui/icons-material/VisibilityOff';
 
 export const EmployeeEditWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    max-width: 800px;
-    border: 1px solid whiteSmoke;
-    border-radius: 10px;
-    padding: 10px 20px;
-    margin-top: 20px;
-    margin-left: 30px;
-    background-color: white;
-    box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  height: 693px;
+  border: 1px solid whiteSmoke;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-top: 20px;
+  margin-left: 30px;
+  background-color: white;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
 `;
 
-export const Title = styled(Typography).attrs({
-
-})`
-    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-    padding-bottom: 10px;
-    margin-bottom: 15px;
+export const Title = styled(Typography).attrs({})`
+  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  padding-bottom: 10px;
+  margin-bottom: 15px;
 `;
 
 export const RowWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  position: relative;
 `;
 
-export const LabelAndInputWrapper = styled.div`
+export const LabelAndInputWrapper = styled.div``;
 
-`;
+export const Label = styled(InputLabel).attrs({})``;
 
-export const Label = styled(InputLabel).attrs({
-
-})``;
-
-export const StandardInputField = styled(TextField).attrs({
-
-})`
-    width: 300px;
+export const StandardInputField = styled(TextField).attrs({})`
+  width: 300px;
 `;
 
 export const VisibilityIcon = styled(VIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
 export const VisibilityOffIcon = styled(VOffIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
-export const Dropdown = styled(Select).attrs({
-
-})`
-    width: 300px;
+export const Dropdown = styled(Select).attrs({})`
+  width: 300px;
 `;
 
-export const DropdownOption = styled(MenuItem).attrs({
+export const DropdownOption = styled(MenuItem).attrs({})`
+  > span {
+    color: ${(props) => props.theme.palette.primary.main};
+    svg {
+      color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+  > div > span {
+    font-size: 1.3rem;
+  }
+`;
 
-})``;
+// export const
 
 export const SwitchRowWrapper = styled.div`
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 50px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 50px;
 `;
 
 export const SwitchTitle = styled.p`
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-    margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 5px;
 `;
 
 export const SwitchLabelAndInputWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 `;
 
-export const AccountSwitch = styled(Switch).attrs(props => ({
-}))`
-    .MuiSwitch-switchBase {
-        color: red;
-    }
-    .MuiSwitch-track {
-        background-color: red;
-    }
-    .MuiSwitch-switchBase.Mui-checked {
-        color: ${props => props.theme.palette.primary.main};
-    }
-    .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
-        background-color: ${props => props.theme.palette.primary.main};
-    }
+export const AccountSwitch = styled(Switch).attrs((props) => ({}))`
+  .MuiSwitch-switchBase {
+    color: red;
+  }
+  .MuiSwitch-track {
+    background-color: red;
+  }
+  .MuiSwitch-switchBase.Mui-checked {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+  .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
+    background-color: ${(props) => props.theme.palette.primary.main};
+  }
 `;
 
+export const BackAndSaveChangesButtonsWrapper = styled.div``;
 
-export const BackAndSaveChangesButtonsWrapper = styled.div`
-
-`;
-
-export const DeleteButton = styled(Button).attrs(props => ({
-    variant: 'contained',
-    sx: {
-        backgroundColor: `${props.theme.palette.error.main}`
-    }
+export const DeleteButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  sx: {
+    backgroundColor: `${props.theme.palette.error.main}`,
+  },
 }))`
-    :hover {
-        background-color: ${props => props.theme.palette.error.dark};
-    }
+  :hover {
+    background-color: ${(props) => props.theme.palette.error.dark};
+  }
 `;
 
 export const BackButton = styled(Button).attrs({
-    variant: 'outlined'
+  variant: 'outlined',
 })`
-    margin-right: 15px;
-    :hover {
-        border: 2px solid;
-        font-weight: 600;
-    }
+  margin-right: 15px;
+  :hover {
+    border: 2px solid;
+    font-weight: 600;
+  }
 `;
 
-export const SaveChangesButton = styled(Button).attrs(props => ({
-    variant: 'contained',
-    sx: {
-        backgroundColor: `${props.theme.palette.primary.main}`
-    }
+export const SaveChangesButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
 }))`
-    padding: 10px 16px;
-    :hover {
-        background-color: ${props => props.theme.palette.primary.dark}
-    }
+  padding: 10px 16px;
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
 `;
Index: sources/client/src/components/admin/EmployeesTable/index.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,121 +1,171 @@
+import { useEffect } from 'react';
 import { useHistory } from 'react-router';
 
 import {
-  TableContainer,
-  TableHeaderWrapper,
-  TableTitle,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-  ButtonTableCell,
-  ToggleAccoutStatusButton,
-  CreateEmployeeButton,
-  AddIcon,
-  SearchField,
-  IdentityIcon,
+    TableContainer,
+    TableHeaderWrapper,
+    TableTitle,
+    Table,
+    TableHead,
+    TableRow,
+    TableBody,
+    TableCell,
+    ButtonTableCell,
+    ToggleAccoutStatusButton,
+    CreateEmployeeButton,
+    AddIcon,
+    SearchField,
+    IdentityIcon,
 } from './styles';
 
 import InputAdornment from '@mui/material/InputAdornment';
+import DropdownViewer from '../../DropdownViewer';
 
 import { employeeStatus, accountStatus } from '../../../config/enums';
+import useGetData from '../../../hooks/useGetData';
+import useToggleAccountStatus from '../../../hooks/useToggleAccountStatus';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 
-import { employees } from './mockData';
+// import { employees } from './mockData';
 import { useState } from 'react';
 
 const EmployeesTable = () => {
-  let history = useHistory();
-  const [filteredEmployees, setFilteredEmployees] = useState(employees);
-  const [search, setSearch] = useState('');
+    let history = useHistory();
+    const { toggleAccountStatus, isLoading: isLoadingAccountStatus } =
+        useToggleAccountStatus();
+    const { data: employees, isLoading: isLoadingEmployees } = useGetData({
+        url: `/vraboten`,
+    });
+    const [filteredEmployees, setFilteredEmployees] = useState([]);
+    const [search, setSearch] = useState('');
+    const onRowClick = (workerId) => {
+        history.push(`/employees/${workerId}`);
+    };
+    const changeAccoutStatusOnEmployee = ({ workerId }) => {
+        const emp = filteredEmployees.find((e) => e.workerId === workerId);
+        emp.accountNonLocked = !emp.accountNonLocked;
+    };
+    const onAccountStatusClick = (event, workerId) => {
+        event.stopPropagation();
+        toggleAccountStatus({ workerId, changeAccoutStatusOnEmployee });
+    };
 
-  const onRowClick = (id) => {
-    history.push(`/employees/${id}`);
-  };
+    const onChangeSearch = (e) => {
+        let newSearchValue = e.target.value;
+        setSearch(newSearchValue);
+        const filteredData = employees.filter((employee) =>
+            employee.firstName
+                .concat(` ${employee.lastName}`)
+                .toLowerCase()
+                .includes(newSearchValue.trim().toLowerCase())
+        );
 
-  const onAccountStatusClick = (event, id) => {
-    event.stopPropagation();
-    console.log(`Disable or activate user acc with id: ${id}`);
-  };
+        setFilteredEmployees(filteredData);
+    };
 
-  const onChangeSearch = (e) => {
-    let newSearchValue = e.target.value;
-    setSearch(newSearchValue);
-    const filteredData = employees.filter((employee) =>
-      employee.firstName
-        .concat(` ${employee.lastName}`)
-        .toLowerCase()
-        .includes(newSearchValue.trim().toLowerCase())
+    useEffect(() => {
+        setFilteredEmployees(employees);
+    }, [employees]);
+
+    return (
+        !isLoadingEmployees && (
+            <TableContainer>
+                <TableHeaderWrapper>
+                    {isLoadingAccountStatus ? (
+                        <AbsoluteLoader
+                            containerStyle={{
+                                position: 'absolute',
+                                left: '65%',
+                                width: '42px',
+                                height: '42px',
+                            }}
+                        />
+                    ) : null}
+                    <TableTitle variant='h5'>Вработени</TableTitle>
+                    <SearchField
+                        value={search}
+                        onChange={(e) => onChangeSearch(e)}
+                        placeholder='Пребарај...'
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position='start'>
+                                    <IdentityIcon />
+                                </InputAdornment>
+                            ),
+                        }}
+                    />
+                    <CreateEmployeeButton
+                        onClick={() => history.push('/employees/create')}
+                    >
+                        <AddIcon />
+                        Додади вработен
+                    </CreateEmployeeButton>
+                </TableHeaderWrapper>
+                <Table aria-label='simple table'>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell align='left'>Емаил</TableCell>
+                            <TableCell align='center'>Име и Презиме</TableCell>
+                            <TableCell align='center'>Зона</TableCell>
+                            <TableCell align='center'>Телефон</TableCell>
+                            <TableCell align='center'>Статус</TableCell>
+                            <TableCell align='center'>Акаунт</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {filteredEmployees.map((employeeData) => (
+                            <TableRow
+                                key={employeeData.workerId}
+                                onClick={() =>
+                                    onRowClick(employeeData.workerId)
+                                }
+                            >
+                                <TableCell align='left'>
+                                    {employeeData.email}
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeData.firstName}{' '}
+                                    {employeeData.lastName}
+                                </TableCell>
+                                <TableCell
+                                    align='center'
+                                    style={{ padding: 0, width: '200px' }}
+                                >
+                                    <DropdownViewer
+                                        data={employeeData.parkingZones.map(
+                                            (z) => z.pzName
+                                        )} // TODO DELETE - after backend fix
+                                        width='200px'
+                                    />
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeData.mobile}
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeStatus[employeeData.status]}
+                                </TableCell>
+                                <ButtonTableCell align='center'>
+                                    <ToggleAccoutStatusButton
+                                        onClick={(event) =>
+                                            onAccountStatusClick(
+                                                event,
+                                                employeeData.workerId
+                                            )
+                                        }
+                                        $enabled={employeeData.accountNonLocked}
+                                    >
+                                        {/* $ added because https://styled-components.com/docs/api#transient-props*/}
+                                        {employeeData.accountNonLocked
+                                            ? accountStatus.enabled
+                                            : accountStatus.disabled}
+                                    </ToggleAccoutStatusButton>
+                                </ButtonTableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        )
     );
-
-    setFilteredEmployees(filteredData);
-  };
-
-  return (
-    <TableContainer>
-      <TableHeaderWrapper>
-        <TableTitle variant='h5'>Вработени</TableTitle>
-        <SearchField
-          value={search}
-          onChange={(e) => onChangeSearch(e)}
-          placeholder='Пребарај...'
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position='start'>
-                <IdentityIcon />
-              </InputAdornment>
-            ),
-          }}
-        />
-        <CreateEmployeeButton onClick={() => history.push('/employees/create')}>
-          <AddIcon />
-          Додади вработен
-        </CreateEmployeeButton>
-      </TableHeaderWrapper>
-      <Table aria-label='simple table'>
-        <TableHead>
-          <TableRow>
-            <TableCell align='left'>Емаил</TableCell>
-            <TableCell align='center'>Име и Презиме</TableCell>
-            <TableCell align='center'>Зона</TableCell>
-            <TableCell align='center'>Телефон</TableCell>
-            <TableCell align='center'>Статус</TableCell>
-            <TableCell align='center'>Акаунт</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {filteredEmployees.map((employeeData) => (
-            <TableRow
-              key={employeeData.id}
-              onClick={() => onRowClick(employeeData.id)}
-            >
-              <TableCell align='left'>{employeeData.email}</TableCell>
-              <TableCell align='center'>
-                {employeeData.firstName} {employeeData.lastName}
-              </TableCell>
-              <TableCell align='center'>{employeeData.zone}</TableCell>
-              <TableCell align='center'>{employeeData.phoneNumber}</TableCell>
-              <TableCell align='center'>
-                {employeeStatus[employeeData.status]}
-              </TableCell>
-              <ButtonTableCell align='center'>
-                <ToggleAccoutStatusButton
-                  onClick={(event) =>
-                    onAccountStatusClick(event, employeeData.id)
-                  }
-                  $enabled={employeeData.accountActive}
-                >
-                  {/* $ added because https://styled-components.com/docs/api#transient-props*/}
-                  {employeeData.accountActive
-                    ? accountStatus.enabled
-                    : accountStatus.disabled}
-                </ToggleAccoutStatusButton>
-              </ButtonTableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
 };
 
Index: sources/client/src/components/admin/EmployeesTable/mockData.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,57 +1,57 @@
 export const employees = [
-    {
-        id: 1,
-        email: 'viktor-tasevski@hotmail.com',
-        password: '123',
-        firstName: 'Viktor',
-        lastName: 'Tasevski',
-        zone: 'zone1',
-        phoneNumber: '072500000',
-        status: 'vacation',
-        accountActive: true
-    },
-    {
-        id: 2,
-        email: 'andrejTav@gmail.com',
-        password: '123',
-        firstName: 'Andrej',
-        lastName: 'Tavcioski',
-        zone: 'zone2',
-        phoneNumber: '070350123',
-        status: 'working',
-        accountActive: true
-    },
-    {
-        id: 3,
-        email: 'david.trajkovski@yahoo.com',
-        password: '123',
-        firstName: 'David',
-        lastName: 'Trajkovski',
-        zone: 'zone3',
-        phoneNumber: '078123321',
-        status: 'working',
-        accountActive: true
-    },
-    {
-        id: 4,
-        email: 'poc@gmail.com',
-        password: '123',
-        firstName: 'Nekoj od',
-        lastName: 'POC',
-        zone: 'zone4',
-        phoneNumber: '223305',
-        status: 'notWorking',
-        accountActive: true
-    },
-    {
-        id: 5,
-        email: 'silbo@outlook.com',
-        password: '123',
-        firstName: 'Nekoj od',
-        lastName: 'Silbo',
-        zone: 'zone5',
-        phoneNumber: '071206205',
-        status: 'notWorking',
-        accountActive: false
-    }
+  {
+    id: 1,
+    email: 'viktor-tasevski@hotmail.com',
+    password: '123',
+    firstName: 'Viktor',
+    lastName: 'Tasevski',
+    zones: ['Zona 1', 'Zona 2', 'Zone 4'],
+    phoneNumber: '072500000',
+    status: 'vacation',
+    accountActive: true,
+  },
+  {
+    id: 2,
+    email: 'andrejTav@gmail.com',
+    password: '123',
+    firstName: 'Andrej',
+    lastName: 'Tavcioski',
+    zones: ['Zona 2', 'Zona 5'],
+    phoneNumber: '070350123',
+    status: 'working',
+    accountActive: true,
+  },
+  {
+    id: 3,
+    email: 'david.trajkovski@yahoo.com',
+    password: '123',
+    firstName: 'David',
+    lastName: 'Trajkovski',
+    zones: ['Zona 3'],
+    phoneNumber: '078123321',
+    status: 'working',
+    accountActive: true,
+  },
+  {
+    id: 4,
+    email: 'poc@gmail.com',
+    password: '123',
+    firstName: 'Nekoj od',
+    lastName: 'POC',
+    zones: ['Zona 4'],
+    phoneNumber: '223305',
+    status: 'notWorking',
+    accountActive: true,
+  },
+  {
+    id: 5,
+    email: 'silbo@outlook.com',
+    password: '123',
+    firstName: 'Nekoj od',
+    lastName: 'Silbo',
+    zones: [],
+    phoneNumber: '071206205',
+    status: 'sick',
+    accountActive: false,
+  },
 ];
Index: sources/client/src/components/admin/EmployeesTable/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -18,5 +18,5 @@
   component: Paper,
 })`
-  max-width: 1000px;
+  max-width: 1100px;
   margin-top: 20px;
   margin-left: 30px;
@@ -33,4 +33,5 @@
   border-bottom: none;
   padding: 10px 16px;
+  position: relative;
   background-color: ${(props) => props.theme.palette.grey[400]};
 `;
Index: sources/client/src/components/admin/ParkingZone/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZone/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZone/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,3 +1,3 @@
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -7,74 +7,133 @@
 import ParkingZoneSessions from '../ParkingZoneSessions';
 import GoogleMaps from '../../GoogleMaps';
-
+import CircularProgress from '@mui/material/CircularProgress';
 import {
-  NamesWrapper,
-  ParkingAndZoneName,
-  DividerUnderNames,
-  NavigationIconsWrapper,
-  MainSection,
-  MapsIcon,
-  ComponentIcon,
+    NamesWrapper,
+    ParkingAndZoneName,
+    DividerUnderNames,
+    NavigationIconsWrapper,
+    MainSection,
+    MapsIcon,
+    ComponentIcon,
+    ZoneNameLoader,
 } from './styles';
 
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 import { roles } from '../../../config/enums';
+import { UserContext } from '../../../context/UserContext';
+import useGetData from '../../../hooks/useGetData';
 
-import { parkingZones } from '../ParkingZones/mockData';
+const defaultLocationObj = {
+    centre: {
+        lat: 42.000629,
+        lng: 21.420525,
+    },
+    coords: []
+};
+
+const mockResponsiblePersons = [
+    // TODO DELTE THIS
+    {
+        id: 1,
+        email: 'viktor-tasevski@hotmail.com',
+        firstName: 'Viktor',
+        lastName: 'Tasevski',
+    },
+    {
+        id: 3,
+        email: 'david_trajkovski@yahoo.com',
+        firstName: 'David',
+        lastName: 'Trajkovski',
+    },
+];
 
 const activeComponentEnum = {
-  MAPS: 'maps',
-  INFO: 'info',
+    MAPS: 'maps',
+    INFO: 'info',
 };
 
 const ParkingZone = () => {
-  const { zone_id } = useParams();
-  const [activeComponent, setActiveComponent] = useState(
-    activeComponentEnum.MAPS
-  );
+    const { user } = useContext(UserContext);
+    const { zone_id } = useParams();
+    const url = `/parkingZone/${zone_id}`;
+    const { data: zoneData, isLoading: isLoadingZoneData } = useGetData({
+        url: url,
+    });
 
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
+    const [zoneState, setZoneState] = useState(null);
+    const [activeComponent, setActiveComponent] = useState(
+        activeComponentEnum.MAPS
+    );
 
-  const zone = parkingZones.find((z) => z.id === parseInt(zone_id));
-  const Info =
-    user.role !== roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
-  return (
-    <>
-      <NamesWrapper>
-        <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
-        <ParkingAndZoneName>{zone?.zoneName}</ParkingAndZoneName>
-      </NamesWrapper>
+    const setZone = (updatedZone) => {
+        setZoneState({ ...updatedZone });
+    };
+    const Info =
+        user.role === roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
 
-      <DividerUnderNames />
+    useEffect(() => {
+        setZoneState({
+            ...zoneData
+        });
+    }, [zoneData]);
+    return (
+        <>
+            <NamesWrapper>
+                <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
+                <ParkingAndZoneName className='zone-name'>
+                    Зона
+                    {isLoadingZoneData ? (
+                        <ZoneNameLoader />
+                    ) : (
+                        ` - ${zoneState?.pzName ?? ''}`
+                    )}
+                </ParkingAndZoneName>
+            </NamesWrapper>
 
-      <NavigationIconsWrapper>
-        <IconButton
-          onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
-        >
-          <MapsIcon $isactive={activeComponent === activeComponentEnum.MAPS} />
-        </IconButton>
-        <IconButton
-          onClick={() => setActiveComponent(activeComponentEnum.INFO)}
-        >
-          <ComponentIcon
-            $isactive={activeComponent === activeComponentEnum.INFO}
-          />
-        </IconButton>
-      </NavigationIconsWrapper>
+            <DividerUnderNames />
 
-      <MainSection>
-        {activeComponent === activeComponentEnum.MAPS ? (
-          <GoogleMaps
-            location={zone.location}
-            parkingSpacesLocation={zone.parkingSpacesLocation}
-            zoneAreaColor={zone.areaColor}
-          />
-        ) : (
-          <Info zone={zone} />
-        )}
-      </MainSection>
-    </>
-  );
+            <NavigationIconsWrapper>
+                <IconButton
+                    onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
+                >
+                    <MapsIcon
+                        $isactive={activeComponent === activeComponentEnum.MAPS}
+                    />
+                </IconButton>
+                <IconButton
+                    onClick={() => setActiveComponent(activeComponentEnum.INFO)}
+                >
+                    <ComponentIcon
+                        $isactive={activeComponent === activeComponentEnum.INFO}
+                    />
+                </IconButton>
+            </NavigationIconsWrapper>
+
+            <MainSection>
+                {isLoadingZoneData ? (
+                    <AbsoluteLoader
+                        containerStyle={{
+                            width: '250px',
+                            height: '250px',
+                            margin: 'auto',
+                            marginTop: '12vw',
+                        }}
+                    />
+                ) : (
+                    <>
+                        {activeComponent === activeComponentEnum.MAPS ? (
+                            <GoogleMaps
+                                location={zoneState.parkingZoneLocation ?? defaultLocationObj}
+                                parkingSpaces={zoneState.parkingSpaces}
+                                zoneAreaColor={zoneState.color}
+                            />
+                        ) : (
+                            <Info zone={zoneState} setZone={setZone} />
+                        )}
+                    </>
+                )}
+            </MainSection>
+        </>
+    );
 };
 
Index: sources/client/src/components/admin/ParkingZone/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZone/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZone/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -3,4 +3,6 @@
 import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
 import EqualizerOutlinedIcon from '@mui/icons-material/EqualizerOutlined';
+import { mobile_max_width } from '../../../config/utilities';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export const NamesWrapper = styled.div`
@@ -11,5 +13,12 @@
   justify-content: space-between;
   align-items: center;
-  padding: 10px 175px;
+  padding: 10px 10%;
+
+  @media (max-width: ${mobile_max_width}px) {
+    flex-direction: column;
+    .zone-name {
+      margin-top: 30px;
+    }
+  }
 `;
 
@@ -19,10 +28,24 @@
   margin: 0,
   color: `${props.theme.palette.primary.main}`,
-}))``;
+}))`
+  display: flex;
+  align-items: center;
+`;
+
+export const ZoneNameLoader = styled(CircularProgress).attrs({
+  size: 40,
+  sx: {
+    marginLeft: '10px',
+  },
+})`
+  .MuiCircularProgress-svg {
+    color: ${(props) => props.theme.palette.primary.light};
+  }
+`;
 
 export const DividerUnderNames = styled(Divider).attrs({
   variant: 'middle',
   sx: {
-    margin: '0 160px',
+    margin: '0 9%',
     borderWidth: '2px',
     borderBottomWidth: 'thin',
Index: sources/client/src/components/admin/ParkingZoneInfo/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfo/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneInfo/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,4 +1,24 @@
-const ParkingZoneInfo = () => {
-    return <h1>PARKING ZONE INFO</h1>
+import { useState } from 'react';
+
+import { Wrapper } from './styles';
+
+import ParkingZoneInfoViewer from '../ParkingZoneInfoViewer';
+import ParkingZoneInfoEdit from '../ParkingZoneInfoEdit';
+
+const ParkingZoneInfo = ({ zone, setZone }) => {
+  const [editMode, setEditMode] = useState(false);
+  return (
+    <Wrapper>
+      {editMode ? (
+        <ParkingZoneInfoEdit
+          zone={zone}
+          setEditMode={setEditMode}
+          setZone={setZone}
+        />
+      ) : (
+        <ParkingZoneInfoViewer zone={zone} setEditMode={setEditMode} />
+      )}
+    </Wrapper>
+  );
 };
 
Index: sources/client/src/components/admin/ParkingZoneInfo/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfo/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneInfo/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1650px;
+  height: 690px;
+  padding: 0 10%;
+  margin: auto;
+  margin-top: 25px;
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,164 @@
+import { IconButton } from '@mui/material';
+import {
+  Wrapper,
+  Title,
+  DividerUnderTitle,
+  ParkingSpacesNumberWrapper,
+  NumberLabel,
+  NumberValue,
+  TableWrapper,
+  TopPartWrapper,
+  AddIcon,
+  DeleteIcon,
+  TableDataInput,
+} from './styles';
+
+const ParkingSpacesSector = ({
+    parkingSpacesNumber = 0,
+  parkingSpaces = [],
+  newParkingSpace = null,
+  setNewParkingSpace,
+  handleParkingSpacesChange,
+}) => {
+  return (
+      <Wrapper>
+          <TopPartWrapper>
+              <Title>Паркинг Места</Title>
+              <DividerUnderTitle />
+              <ParkingSpacesNumberWrapper>
+                  <NumberLabel>Вкупно паркинг места:</NumberLabel>
+                  <NumberValue>{parkingSpacesNumber}</NumberValue>
+              </ParkingSpacesNumberWrapper>
+          </TopPartWrapper>
+          <TableWrapper>
+              <table>
+                  <thead>
+                      <tr>
+                          <th></th>
+                          <th>Латитуда</th>
+                          <th>Лонгитуда</th>
+                          <th>Број</th>
+                          <th></th>
+                      </tr>
+                  </thead>
+                  <tbody>
+                      <tr className='add-row'>
+                          <td></td>
+                          <td className='add-td'>
+                              <TableDataInput
+                                  value={newParkingSpace?.lat ?? ''}
+                                  onChange={(e) =>
+                                      setNewParkingSpace({
+                                          ...newParkingSpace,
+                                          lat: e.target.value,
+                                      })
+                                  }
+                              />
+                          </td>
+                          <td className='add-td'>
+                              <TableDataInput
+                                  value={newParkingSpace?.lng ?? ''}
+                                  onChange={(e) =>
+                                      setNewParkingSpace({
+                                          ...newParkingSpace,
+                                          lng: e.target.value,
+                                      })
+                                  }
+                              />
+                          </td>
+                          <td className='add-td'>
+                              <TableDataInput
+                                  value={newParkingSpace?.psName ?? ''}
+                                  onChange={(e) =>
+                                      setNewParkingSpace({
+                                          ...newParkingSpace,
+                                          psName: e.target.value,
+                                      })
+                                  }
+                              />
+                          </td>
+                          <td>
+                              <IconButton
+                                  style={{ padding: 3.5 }}
+                                  onClick={() =>
+                                      handleParkingSpacesChange({ type: 'add' })
+                                  }
+                              >
+                                  <AddIcon />
+                              </IconButton>
+                          </td>
+                      </tr>
+                      {parkingSpaces &&
+                          parkingSpaces.map(({ lat, lng, psName }, index) => (
+                              <tr key={index}>
+                                  <td>
+                                      <IconButton
+                                          style={{ padding: 3.5 }}
+                                          onClick={() =>
+                                              handleParkingSpacesChange({
+                                                  type: 'delete',
+                                                  payload: {
+                                                      index,
+                                                  },
+                                              })
+                                          }
+                                      >
+                                          <DeleteIcon />
+                                      </IconButton>
+                                  </td>
+                                  <td>
+                                      <TableDataInput
+                                          value={lat}
+                                          onChange={(e) =>
+                                              handleParkingSpacesChange({
+                                                  type: 'update',
+                                                  payload: {
+                                                      index,
+                                                      column: 'lat',
+                                                      value: e.target.value,
+                                                  },
+                                              })
+                                          }
+                                      />
+                                  </td>
+                                  <td>
+                                      <TableDataInput
+                                          value={lng}
+                                          onChange={(e) =>
+                                              handleParkingSpacesChange({
+                                                  type: 'update',
+                                                  payload: {
+                                                      index,
+                                                      column: 'lng',
+                                                      value: e.target.value,
+                                                  },
+                                              })
+                                          }
+                                      />
+                                  </td>
+                                  <td>
+                                      <TableDataInput
+                                          value={psName}
+                                          onChange={(e) =>
+                                              handleParkingSpacesChange({
+                                                  type: 'update',
+                                                  payload: {
+                                                      index,
+                                                      column: 'psName',
+                                                      value: e.target.value,
+                                                  },
+                                              })
+                                          }
+                                      />
+                                  </td>
+                                  <td></td>
+                              </tr>
+                          ))}
+                  </tbody>
+              </table>
+          </TableWrapper>
+      </Wrapper>
+  );
+};
+
+export default ParkingSpacesSector;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,160 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 380px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const TopPartWrapper = styled.div`
+  width: 100%;
+  padding: 10px 20px 0 20px;
+  text-align: center;
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const ParkingSpacesNumberWrapper = styled.div`
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-evenly;
+`;
+
+export const NumberLabel = styled.p`
+  font-size: 1.4rem;
+  margin: 0;
+`;
+
+export const NumberValue = styled.p`
+  font-size: 1.6rem;
+  font-weight: 500;
+  margin: 0;
+`;
+
+export const TableWrapper = styled.div`
+    width: 100%;
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+    table {
+        border-spacing: 0;
+        border-bottom: 0;
+        word-break: break-all;
+        font-size: 1.2rem;
+    }
+
+    table tbody {
+        display: block;
+        max-height: 200px;
+        overflow-y: auto;
+    }
+    tbody::-webkit-scrollbar {
+        display: none;
+    }
+    table thead,
+    table tbody tr {
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+    }
+
+    th {
+        padding: 10px 5px;
+    }
+
+    th {
+        border-bottom: 2px solid black;
+        border-left: 2px solid black;
+        :first-of-type {
+            width: 56px;
+            border: 0;
+        }
+        :nth-of-type(2),
+        :nth-of-type(3),
+        :nth-of-type(4) {
+            border-top: 1px solid black;
+        }
+        :nth-of-type(2) {
+            border-left: 1px solid black;
+        }
+        :nth-of-type(4) {
+            width: 90px;
+            border-right: 1px solid black;
+        }
+        :last-of-type {
+            width: 56px;
+            border: 0;
+        }
+    }
+    td {
+        border-left: 2px solid black;
+        border-bottom: 1px solid black;
+        text-overflow: ellipsis;
+    }
+    tr td:first-of-type {
+        width: 56px;
+        border: 0;
+    }
+    tr td:nth-of-type(2) {
+        border-left: 1px solid black;
+    }
+    tr td:nth-of-type(4) {
+        width: 90px;
+        border-right: 1px solid black;
+    }
+    tr td:last-of-type {
+        border: 0;
+        width: 56px;
+    }
+    tr:last-of-type td {
+        border-bottom: 0;
+    }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.primary.main,
+  },
+}))``;
+
+export const DeleteIcon = styled(HighlightOffIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.error.main,
+  },
+}))``;
+
+export const TableDataInput = styled.input`
+  width: 100%;
+  height: 47px;
+  padding: 3.5px 5px;
+  border: 0;
+  font-size: 1.2rem;
+  text-align: center;
+
+  &:focus {
+    background-color: rgba(0, 173, 124, 0.2);
+    font-weight: 600;
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import {
+  Wrapper,
+  TitleAndDividerWrapper,
+  Title,
+  DividerUnderTitle,
+  TableWrapper,
+  Elipsis,
+  AddIcon,
+  DeleteIcon,
+  ModalContainer,
+  CloseIcon,
+  ModalCard,
+  ModalCardKeyAndValueWrapper,
+  ModalCardKey,
+  ModalCardValue,
+  AddIconCard,
+  ModalCardsContainer,
+  ModalKeyAndValueDivider,
+  ModalNoMoreEmplyees,
+} from './styles';
+import Modal from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+import { IconButton, Slide } from '@mui/material';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+
+const AddEmployeeCard = ({ workerId, email, firstName, lastName, handleChange }) => (
+  <ModalCard>
+    <IconButton
+      style={{
+        position: 'absolute',
+        right: -60,
+      }}
+      onClick={() =>
+        handleChange({
+          type: 'add',
+          person: { workerId, email, firstName, lastName },
+        })
+      }
+    >
+      <AddIconCard />
+    </IconButton>
+    <ModalCardKeyAndValueWrapper style={{ width: '250px' }}>
+      <ModalCardKey>Емаил:</ModalCardKey>
+      <ModalCardValue>{email}</ModalCardValue>
+    </ModalCardKeyAndValueWrapper>
+    <ModalKeyAndValueDivider />
+    <ModalCardKeyAndValueWrapper style={{ width: '130px' }}>
+      <ModalCardKey>Име:</ModalCardKey>
+      <ModalCardValue>{firstName}</ModalCardValue>
+    </ModalCardKeyAndValueWrapper>
+    <ModalKeyAndValueDivider />
+    <ModalCardKeyAndValueWrapper style={{ width: '130px' }}>
+      <ModalCardKey>Презиме:</ModalCardKey>
+      <ModalCardValue>{lastName}</ModalCardValue>
+    </ModalCardKeyAndValueWrapper>
+  </ModalCard>
+);
+
+const ResponsiblePersonsSectorEdit = ({
+    responsiblePersons,
+    employeesDataModal,
+    handleChange,
+    isLoadingResponsiblePersonsData,
+}) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    return (
+        <>
+            <Modal
+                open={isModalOpen}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                    onClick: () => setModalOpen(false),
+                }}
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Slide in={isModalOpen}>
+                    <ModalContainer>
+                        <IconButton
+                            style={{
+                                marginLeft: 640,
+                            }}
+                            onClick={() => setModalOpen(false)}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                        <ModalCardsContainer>
+                            {isLoadingResponsiblePersonsData ? (
+                                <AbsoluteLoader
+                                    containerStyle={{
+                                        width: '200px',
+                                        height: '200px',
+                                        margin: 'auto',
+                                        marginTop: '30px',
+                                    }}
+                                />
+                            ) : (
+                                <>
+                                    {employeesDataModal.length === 0 ? (
+                                        <ModalNoMoreEmplyees>
+                                            Нема Повеќе Вработени
+                                        </ModalNoMoreEmplyees>
+                                    ) : (
+                                        employeesDataModal.map((emp) => (
+                                            <AddEmployeeCard
+                                                {...emp}
+                                                key={emp.workerId}
+                                                handleChange={handleChange}
+                                            />
+                                        ))
+                                    )}
+                                </>
+                            )}
+                        </ModalCardsContainer>
+                    </ModalContainer>
+                </Slide>
+            </Modal>
+            <Wrapper>
+                <TitleAndDividerWrapper>
+                    <Title>Одговорни Лица</Title>
+                    <DividerUnderTitle />
+                </TitleAndDividerWrapper>
+                <TableWrapper>
+                    <IconButton
+                        style={{
+                            position: 'absolute',
+                            right: 5,
+                        }}
+                        onClick={() => setModalOpen(true)}
+                    >
+                        <AddIcon />
+                    </IconButton>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Име</th>
+                                <th>Презиме</th>
+                                <th>Повеќе</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {responsiblePersons.map((person, index) => {
+                                return (
+                                    <tr key={index}>
+                                        <td>
+                                            <IconButton
+                                                onClick={() =>
+                                                    handleChange({
+                                                        type: 'delete',
+                                                        person,
+                                                    })
+                                                }
+                                            >
+                                                <DeleteIcon />
+                                            </IconButton>
+                                        </td>
+                                        <td>{person.firstName}</td>
+                                        <td>{person.lastName}</td>
+                                        <td>
+                                            <Elipsis
+                                                target='_blank'
+                                                to={`/employees/${person.id}`}
+                                            >
+                                                ...
+                                            </Elipsis>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </TableWrapper>
+            </Wrapper>
+        </>
+    );
+};
+
+export default ResponsiblePersonsSectorEdit;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,225 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+import { Link } from 'react-router-dom';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import Box from '@mui/material/Box';
+import CIcon from '@mui/icons-material/Close';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 290px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 8px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const TitleAndDividerWrapper = styled.div`
+  width: 100%;
+  padding: 10px 20px 0 20px;
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  margin: auto;
+  text-align: center;
+  margin-top: 15px;
+  padding-left: 10px;
+  padding-right: 66px;
+  position: relative;
+  table {
+    border-spacing: 0;
+    border-bottom: 0;
+    word-break: break-all;
+    font-size: 1.2rem;
+  }
+
+  table tbody {
+    display: block;
+    max-height: 160px;
+    overflow-y: auto;
+  }
+  tbody::-webkit-scrollbar {
+    display: none;
+  }
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+  th:last-of-type {
+    width: 90px;
+    border-right: 1px solid black;
+  }
+  th:not(:first-of-type) {
+    border-top: 1px solid black;
+  }
+  th,
+  td {
+    padding: 10px 5px;
+  }
+  th:nth-of-type(2),
+  td:nth-of-type(2) {
+    border-left: 1px solid black;
+  }
+  th {
+    border-bottom: 2px solid black;
+    border-left: 2px solid black;
+    :first-of-type {
+      width: 56px;
+      border: 0;
+    }
+  }
+  td {
+    border-left: 2px solid black;
+    border-bottom: 1px solid black;
+  }
+  tr td:first-of-type {
+    width: 56px;
+    border: 0;
+    padding: 0;
+  }
+  tr td:last-of-type {
+    width: 90px;
+    padding-bottom: 0;
+    border-right: 1px solid black;
+  }
+  tr:last-of-type td {
+    border-bottom: 0;
+  }
+`;
+
+export const Elipsis = styled(Link)`
+  text-decoration: none;
+  font-size: 35px;
+  line-height: 0px;
+  font-weight: 900;
+  letter-spacing: 2px;
+  color: ${(props) => props.theme.palette.third.main};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.primary.main,
+  },
+}))``;
+
+export const DeleteIcon = styled(HighlightOffIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.error.main,
+  },
+}))``;
+
+export const ModalContainer = styled(Box).attrs({
+  width: 720,
+  height: 350,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  zIndex: 1000,
+  marginBottom: '10%',
+  position: 'relative',
+  borderRadius: '15px',
+})`
+  padding: 0 25px 16px 25px;
+`;
+
+export const ModalCardsContainer = styled.div`
+  height: 285px;
+  overflow: auto;
+  overflow-x: hidden;
+  > div:not(:first-of-type) {
+    margin-top: 15px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+  }
+  ::-webkit-scrollbar {
+    // display: none;
+    // background-color: red;
+  }
+`;
+export const ModalNoMoreEmplyees = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  width: 100%;
+  text-align: center;
+  color: grey;
+  margin-top: 91px;
+`;
+export const CloseIcon = styled(CIcon).attrs({
+  sx: {
+    color: 'red',
+    fontSize: '2.5rem',
+  },
+})``;
+
+export const ModalCard = styled.div`
+  width: 600px;
+  height: 60px;
+  border-radius: 50px;
+  padding: 5px 10px;
+  background-color: #03c04a;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  color: white;
+  letter-spacing: 0.1px;
+`;
+
+export const ModalCardKeyAndValueWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+`;
+
+export const ModalKeyAndValueDivider = styled(Divider).attrs({
+  orientation: 'vertical',
+  sx: {
+    borderRightWidth: '2px',
+  },
+})``;
+
+export const ModalCardKey = styled.p`
+  font-size: 0.9rem;
+  margin: 0;
+`;
+
+export const ModalCardValue = styled.p`
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0;
+  width: 100%;
+  text-align: center;
+`;
+
+export const AddIconCard = styled(AddCircleIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.primary.main,
+  },
+}))``;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,252 @@
+import MenuItem from '@mui/material/MenuItem';
+import { ColorPicker } from 'material-ui-color';
+import {
+  Wrapper,
+  Title,
+  DividerUnderTitle,
+  Characteristics,
+  KeyValueWrapper,
+  Key,
+  Value,
+  ColorCircleWrapper,
+  ZoneCenterLocation,
+  SmallTitle,
+  LatLngCenter,
+  LabelAndLatLngWrapper,
+  LatLngLabel,
+  LatLngValue,
+  ZoneCornersLocation,
+  TableWrapper,
+  EditedInputAdornment,
+  TimeSelectInputsWrapper,
+  TimeSelectInput,
+  TImeSelectInputsDivider,
+  AddIcon,
+  TableDataInput,
+  DeleteIcon,
+} from './styles';
+import { IconButton } from '@mui/material';
+
+const selectInputValues = Array(24)
+  .fill()
+  .map((_, index) => (
+    <MenuItem value={index + 1} key={index + 1}>
+      {index + 1 < 10 ? `0${index + 1}` : index + 1}
+    </MenuItem>
+  ));
+
+const MenuProps = {
+  PaperProps: {
+    style: {
+      height: 150,
+      width: '35px',
+    },
+  },
+};
+
+const ZoneSector = ({
+  zoneName,
+  hourlyRate,
+  from,
+  to,
+  zoneColor,
+  setZoneColor,
+  lat,
+  lng,
+  setZoneSectorData,
+  newCoord,
+  setNewCoord,
+  coords,
+  handleCoordsChange,
+}) => {
+  return (
+    <Wrapper>
+      <Title>Паркинг Зона</Title>
+      <DividerUnderTitle />
+      <Characteristics>
+        <KeyValueWrapper>
+          <Key>Назив:</Key>
+          <Value
+            name='zoneName'
+            onChange={setZoneSectorData}
+            value={zoneName}
+          />
+        </KeyValueWrapper>
+        <KeyValueWrapper>
+          <Key>Цена од Час:</Key>
+          <Value
+            name='hourlyRate'
+            onChange={setZoneSectorData}
+            value={hourlyRate}
+            InputProps={{
+              endAdornment: (
+                <EditedInputAdornment style={{}} position='end'>
+                  ден.
+                </EditedInputAdornment>
+              ),
+            }}
+          />
+        </KeyValueWrapper>
+        <KeyValueWrapper>
+          <Key>Работни часови:</Key>
+          <TimeSelectInputsWrapper>
+            <TimeSelectInput
+              MenuProps={MenuProps}
+              name='from'
+              onChange={setZoneSectorData}
+              value={from}
+            >
+              <MenuItem value={0} key={0}>
+                <em>NONE</em>
+              </MenuItem>
+              {selectInputValues}
+            </TimeSelectInput>
+            <TImeSelectInputsDivider />
+            <TimeSelectInput
+              MenuProps={MenuProps}
+              name='to'
+              onChange={setZoneSectorData}
+              value={to}
+            >
+              <MenuItem value={0} key={0}>
+                <em>NONE</em>
+              </MenuItem>
+              {selectInputValues}
+            </TimeSelectInput>
+          </TimeSelectInputsWrapper>
+        </KeyValueWrapper>
+        <KeyValueWrapper>
+          <Key>Боја на зона:</Key>
+          <ColorCircleWrapper>
+            <ColorPicker
+              value={zoneColor}
+              onChange={(e) => setZoneColor(`#${e.hex}`)}
+              hideTextfield
+            />
+          </ColorCircleWrapper>
+        </KeyValueWrapper>
+      </Characteristics>
+
+      <ZoneCenterLocation>
+        <SmallTitle>Центар на Зона</SmallTitle>
+        <LatLngCenter>
+          <LabelAndLatLngWrapper>
+            <LatLngLabel htmlFor='lat-value'>Латитуда:</LatLngLabel>
+            <LatLngValue
+              id='lat-value'
+              name='lat'
+              onChange={setZoneSectorData}
+              value={lat}
+            />
+          </LabelAndLatLngWrapper>
+          <LabelAndLatLngWrapper>
+            <LatLngLabel htmlFor='lng-value'>Лонгитуда:</LatLngLabel>
+            <LatLngValue
+              id='lng-value'
+              name='lng'
+              onChange={setZoneSectorData}
+              value={lng}
+            />
+          </LabelAndLatLngWrapper>
+        </LatLngCenter>
+      </ZoneCenterLocation>
+
+      <ZoneCornersLocation>
+        <SmallTitle>Темиња на Зона</SmallTitle>
+        <TableWrapper>
+          <table>
+            <thead>
+              <tr>
+                <th></th>
+                <th>Латитуда</th>
+                <th>Лонгитуда</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className='add-row'>
+                <td></td>
+                <td className='add-td'>
+                  <TableDataInput
+                    name='newLat'
+                    onChange={(e) =>
+                      setNewCoord({ ...newCoord, newLat: e.target.value })
+                    }
+                    value={newCoord.newLat}
+                  />
+                </td>
+                <td className='add-td'>
+                  <TableDataInput
+                    name='newLng'
+                    onChange={(e) =>
+                      setNewCoord({ ...newCoord, newLng: e.target.value })
+                    }
+                    value={newCoord.newLng}
+                  />
+                </td>
+                <td>
+                  <IconButton
+                    style={{ padding: 3.5 }}
+                    onClick={() => handleCoordsChange({ type: 'add' })}
+                  >
+                    <AddIcon />
+                  </IconButton>
+                </td>
+              </tr>
+              {coords.map(({ lat, lng }, index) => (
+                <tr key={index}>
+                  <td>
+                    <IconButton
+                      style={{ padding: 3.5 }}
+                      onClick={() =>
+                        handleCoordsChange({
+                          type: 'delete',
+                          payload: { index },
+                        })
+                      }
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </td>
+                  <td>
+                    <TableDataInput
+                      value={lat}
+                      onChange={(e) =>
+                        handleCoordsChange({
+                          type: 'update',
+                          payload: {
+                            index,
+                            column: 'lat',
+                            value: e.target.value,
+                          },
+                        })
+                      }
+                    />
+                  </td>
+                  <td>
+                    <TableDataInput
+                      value={lng}
+                      onChange={(e) =>
+                        handleCoordsChange({
+                          type: 'update',
+                          payload: {
+                            index,
+                            column: 'lng',
+                            value: e.target.value,
+                          },
+                        })
+                      }
+                    />
+                  </td>
+                  <td></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </TableWrapper>
+      </ZoneCornersLocation>
+    </Wrapper>
+  );
+};
+
+export default ZoneSector;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,265 @@
+import styled from 'styled-components';
+import {
+  Typography,
+  Divider,
+  TextField,
+  InputAdornment,
+  Select,
+} from '@mui/material';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+
+export const Wrapper = styled.div`
+  width: 500px;
+  height: 100%;
+  padding: 10px 20px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const Characteristics = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+`;
+
+export const KeyValueWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+`;
+
+export const Key = styled.p`
+  font-size: 1.4rem;
+  margin: 0;
+`;
+
+export const Value = styled(TextField).attrs({})`
+  margin: 0;
+  width: 50%;
+
+  input {
+    padding: 0 10px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    height: 43px;
+  }
+`;
+
+export const TimeSelectInputsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+  align-items: center;
+  justify-content: space-evenly;
+`;
+
+export const TimeSelectInput = styled(Select).attrs({})`
+  position: relative;
+  > div {
+    width: 35px;
+    font-size: 1.5rem;
+    padding: 8.5px 30px 0 15px;
+  }
+`;
+
+export const TImeSelectInputsDivider = styled.p`
+  height: 2px;
+  width: 30px;
+  border-bottom: 2px solid black;
+`;
+
+export const ColorCircleWrapper = styled.div`
+  width: 50%;
+
+  > div > button {
+    border-radius: 50%;
+    margin: 4px;
+    width: 35px;
+    min-width: 35px;
+    height: 35px;
+    > span {
+      > div {
+        border-radius: 50%;
+        width: 35px;
+        min-width: 35px;
+        height: 35px;
+      }
+    }
+  }
+`;
+
+export const ZoneCenterLocation = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+`;
+
+export const SmallTitle = styled(Typography).attrs({
+  variant: 'h6',
+  textAlign: 'center',
+  marginBottom: '5px',
+  fontWeight: 500,
+  fontSize: '1.4rem',
+})``;
+
+export const LatLngCenter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 60px;
+`;
+
+export const LabelAndLatLngWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const LatLngLabel = styled.label`
+  font-size: 1.1rem;
+`;
+
+export const LatLngValue = styled(TextField)`
+  margin: 0;
+  margin-top: 5px;
+  width: 95%;
+
+  input {
+    font-weight: 500;
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 0 10px;
+    height: 43px;
+  }
+`;
+
+export const ZoneCornersLocation = styled.div`
+  width: 100%;
+  margin-top: 25px;
+`;
+
+export const TableWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  text-align: center;
+  table {
+    border-spacing: 0;
+  }
+
+  table tbody {
+    display: block;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  tbody::-webkit-scrollbar {
+    display: none;
+  }
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+  th,
+  td {
+    padding: 10px 5px;
+    font-size: 1.2rem;
+  }
+  th:first-of-type,
+  th:last-of-type {
+    width: 56px;
+  }
+  tbody tr td:first-of-type {
+    width: 56px;
+    padding-right: 10px;
+    padding: 0;
+    padding-left: 0;
+    border: 0;
+  }
+  tbody tr td:last-of-type {
+    width: 56px;
+    padding: 0;
+    border: 0;
+  }
+  thead th:nth-of-type(2) {
+    border: 1px solid black;
+    border-right: 2px solid black;
+    border-bottom: 2px solid black;
+  }
+  thead th:nth-of-type(3) {
+    border: 1px solid black;
+    border-left: 0;
+    border-bottom: 2px solid black;
+  }
+  tbody tr td:nth-of-type(2) {
+    border-right: 2px solid black;
+    border-left: 1px solid black;
+  }
+  tbody tr td:nth-of-type(3) {
+    border-right: 1px solid black;
+  }
+  tbody tr td {
+    border-bottom: 1px solid black;
+  }
+
+  tbody tr:last-of-type td {
+    border-bottom: 0;
+  }
+
+  td {
+    padding: 0;
+  }
+`;
+
+export const EditedInputAdornment = styled(InputAdornment)`
+  p {
+    font-size: 1.2rem;
+  }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.primary.main,
+  },
+}))``;
+
+export const DeleteIcon = styled(HighlightOffIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2.5rem',
+    color: props.theme.palette.error.main,
+  },
+}))``;
+
+export const TableDataInput = styled.input`
+  width: 100%;
+  height: 47px;
+  padding: 3.5px 5px;
+  border: 0;
+  font-size: 1.2rem;
+  text-align: center;
+
+  &:focus {
+    background-color: rgba(0, 173, 124, 0.2);
+    font-weight: 600;
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,369 @@
+import { useState, useEffect } from 'react';
+import useForm from '../../../hooks/useForm';
+
+import {
+    DeleteButton,
+    RightSideWrapper,
+    ZoneSectorAndDeleteButtonWrapper,
+    SaveButton,
+    CancelButton,
+    CloseIcon,
+    ModalContainer,
+    ModalTitle,
+    ModalDescription,
+    ButtonsWrapper,
+    ModalButton,
+} from './styles';
+
+import ZoneSectorEdit from './ZoneSectorEdit';
+import ResponsiblePersonsSectorEdit from './ResponsiblePersonsSectorEdit';
+import ParkingSpacesSectorEdit from './ParkingSpacesSectorEdit';
+import { IconButton, Fade } from '@mui/material';
+import Modal from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+import useGetData from '../../../hooks/useGetData';
+import useDeleteZone from '../../../hooks/useDeleteZone';
+import useUpdateZone from '../../../hooks/useUpdateZone';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+
+import { employeesAddData } from './mockData';
+
+const ParkingZoneInfoEdit = ({ zone, setEditMode, setZone }) => {
+    const { deleteZone, isLoading: isLoadingDeleteZone } = useDeleteZone();
+    const { updateZone, isLoading: isLoadingUpdateZone } = useUpdateZone();
+    const {
+        data: responsiblePersonsData,
+        isLoading: isLoadingResponsiblePersonsData,
+    } = useGetData({ url: `/vraboten/vrabotenDemo` });
+    const { data: zoneSectorData, onFormChange: setZoneSectorData } = useForm({
+        zoneName: zone?.pzName ?? '',
+        hourlyRate: zone?.price ?? 0,
+        from: zone?.from ?? 0,
+        to: zone?.to ?? 0,
+        lat: zone?.parkingZoneLocation?.centre?.lat ?? '',
+        lng: zone?.parkingZoneLocation?.centre?.lng ?? '',
+    });
+    const [zoneColor, setZoneColor] = useState(zone?.color ?? '');
+    const [newCoord, setNewCoord] = useState({
+        newLat: '',
+        newLng: '',
+    });
+    const [coords, setCoords] = useState(
+        zone?.parkingZoneLocation?.coords ?? []
+    );
+
+    const handleCoordsChange = ({ type, payload }) => {
+        switch (type) {
+            case 'add':
+                const createdCoord = {
+                    lat: parseFloat(newCoord.newLat),
+                    lng: parseFloat(newCoord.newLng),
+                };
+                setNewCoord({
+                    newLat: '',
+                    newLng: '',
+                });
+                setCoords([...coords, createdCoord]);
+                return;
+            case 'delete':
+                const updatedDeleteCoords = [...coords];
+                updatedDeleteCoords.splice(payload.index, 1);
+                setCoords(updatedDeleteCoords);
+                return;
+            case 'update':
+                const updatedCoords = [...coords];
+                updatedCoords[payload.index] = {
+                    ...updatedCoords[payload.index],
+                    [payload.column]: parseFloat(payload.value),
+                };
+                setCoords(updatedCoords);
+                return;
+            default:
+                return;
+        }
+    };
+
+    // ResponsiblePersonSectorEdit
+
+    const [responsiblePersons, setResponsiblePersons] = useState(
+        zone?.responsibleWorkers ?? []
+    );
+    const [employeesDataModal, setEmployeesDataModal] = useState([]);
+    const handleEmployeesAndResponsiblePersonsChange = ({ type, person }) => {
+        switch (type) {
+            case 'delete':
+                setResponsiblePersons(
+                    responsiblePersons.filter(
+                        (p) => p.workerId !== person.workerId
+                    )
+                );
+                setEmployeesDataModal([...employeesDataModal, person]);
+                return;
+            case 'add':
+                setEmployeesDataModal(
+                    employeesDataModal.filter(
+                        (emp) => emp.workerId !== person.workerId
+                    )
+                );
+                setResponsiblePersons([...responsiblePersons, person]);
+                return;
+            default:
+                return;
+        }
+    };
+    // ParkingSpacesSectorEdit
+
+    const [parkingSpacesNumber, setParkingSpacesNumber] = useState(
+        zone?.parkingSpaces?.length ?? 0
+    );
+    const [newParkingSpace, setNewParkingSpace] = useState({
+        lat: '',
+        lng: '',
+        psName: '',
+    });
+    const [parkingSpaces, setParkingSpaces] = useState(
+        zone?.parkingSpaces ?? []
+    );
+    const handleParkingSpacesChange = ({ type, payload }) => {
+        switch (type) {
+            case 'add':
+                const createParkingSpace = {
+                    lat: parseFloat(newParkingSpace.lat),
+                    lng: parseFloat(newParkingSpace.lng),
+                    psName: newParkingSpace.psName,
+                };
+                setNewParkingSpace({
+                    lat: '',
+                    lng: '',
+                    psName: '',
+                });
+                setParkingSpaces([...parkingSpaces, createParkingSpace]);
+                setParkingSpacesNumber(parkingSpacesNumber + 1);
+                return;
+            case 'delete':
+                const updatedDeleteParkingSpaces = [...parkingSpaces];
+                updatedDeleteParkingSpaces.splice(payload.index, 1);
+                setParkingSpaces(updatedDeleteParkingSpaces);
+                setParkingSpacesNumber(parkingSpacesNumber - 1);
+                return;
+            case 'update':
+                const updatedParkingSpaces = [...parkingSpaces];
+                updatedParkingSpaces[payload.index] = {
+                    ...updatedParkingSpaces[payload.index],
+                    [payload.column]:
+                        payload.column !== 'psName'
+                            ? parseFloat(payload.value)
+                            : payload.value,
+                };
+                setParkingSpaces(updatedParkingSpaces);
+                return;
+            default:
+                return;
+        }
+    };
+
+    const [modal, setModal] = useState({
+        open: false,
+        title: '',
+        description: '',
+        btnLeftText: '',
+        btnRightText: '',
+        btnLeftOnClick: null,
+        btnRightOnClick: null,
+    });
+
+    const closeModal = () => {
+        setModal({
+            open: false,
+            title: '',
+            description: '',
+            btnLeftText: '',
+            btnRightText: '',
+            btnLeftOnClick: null,
+            btnRightOnClick: null,
+        });
+    };
+
+    // CANCEL BUTTON MODAL HANDLING
+    const handleCancelLeftClick = () => {
+        setEditMode(false);
+    };
+
+    const handleCancel = () => {
+        setModal({
+            open: true,
+            title: 'Несочувани Измени',
+            description:
+                'Изменетите податоците нема да бидат сочувани. Дали сакате да ги зачувате?',
+            btnLeftText: 'НЕ',
+            btnRightText: 'ДА',
+            btnLeftOnClick: handleCancelLeftClick,
+            btnRightOnClick: handleSaveChangesRightClick,
+        });
+    };
+
+    // SAVE CHANGES BUTTON MODAL HANDLING
+
+    const handleSaveChangesRightClick = () => {
+        const editedZoneN = {
+            ...zone,
+            pzName: zoneSectorData.zoneName,
+            price: zoneSectorData.hourlyRate,
+            from: zoneSectorData.from,
+            to: zoneSectorData.to,
+            color: zoneColor,
+            parkingZoneLocation: {
+                centre: {
+                    lat: zoneSectorData.lat,
+                    lng: zoneSectorData.lng,
+                },
+                coords: coords,
+            },
+            parkingSpaces: parkingSpaces,
+            responsibleWorkers: responsiblePersons ?? [],
+        };
+        console.log(`The new data is saved:`, editedZoneN);
+        updateZone({ zone: editedZoneN, setEditMode, setZone, setModal });
+    };
+
+    const handleSaveChanges = () => {
+        setModal({
+            open: true,
+            title: 'Зачувување Измени',
+            description:
+                'Дали сте сигурни дека сакате да ги сочувате измените?',
+            btnLeftText: 'НЕ',
+            btnRightText: 'ДА',
+            btnLeftOnClick: closeModal,
+            btnRightOnClick: handleSaveChangesRightClick,
+        });
+    };
+
+    // DELETE ZONE BUTTON MODAL HANDLING
+
+    const handleDeleteZoneRightClick = () => {
+        deleteZone({ id: zone.pzId });
+    };
+
+    const handleDeleteZone = () => {
+        setModal({
+            open: true,
+            title: 'Бришење на Зона',
+            description: 'Дали сте сигурни дека сакате да ја избришете зоната?',
+            btnLeftText: 'НЕ',
+            btnRightText: 'ДА',
+            btnLeftOnClick: closeModal,
+            btnRightOnClick: handleDeleteZoneRightClick,
+        });
+    };
+
+    useEffect(() => {
+        if (responsiblePersonsData) {
+            setEmployeesDataModal(() => {
+                const responsiblePersonsId = zone && zone?.responsibleWorkers.map((p) => p.workerId);
+                const filteredEmployees = responsiblePersonsData.filter(
+                    (emp) => !responsiblePersonsId.includes(emp.workerId)
+                );
+                return filteredEmployees;
+            });
+        }
+            
+    }, [responsiblePersonsData ]);
+
+    return (
+        <>
+            <Modal
+                open={modal.open}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                    onClick: closeModal,
+                }}
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Fade in={modal.open}>
+                    <ModalContainer>
+                        <IconButton
+                            style={{
+                                marginLeft: 320,
+                            }}
+                            onClick={closeModal}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                        <ModalTitle>{modal.title}</ModalTitle>
+                        {isLoadingDeleteZone || isLoadingUpdateZone ? (
+                            <AbsoluteLoader
+                                containerStyle={{
+                                    width: '150px',
+                                    height: '150px',
+                                    margin: 'auto',
+                                    marginTop: '60px',
+                                }}
+                            />
+                        ) : (
+                            <>
+                                <ModalDescription>
+                                    {modal.description}
+                                </ModalDescription>
+                                <ButtonsWrapper>
+                                    <ModalButton onClick={modal.btnLeftOnClick}>
+                                        {modal.btnLeftText}
+                                    </ModalButton>
+                                    <ModalButton
+                                        onClick={modal.btnRightOnClick}
+                                    >
+                                        {modal.btnRightText}
+                                    </ModalButton>
+                                </ButtonsWrapper>
+                            </>
+                        )}
+                    </ModalContainer>
+                </Fade>
+            </Modal>
+            <ZoneSectorAndDeleteButtonWrapper>
+                <DeleteButton onClick={handleDeleteZone}>
+                    Избриши Зона
+                </DeleteButton>
+                <ZoneSectorEdit
+                    {...zoneSectorData}
+                    setZoneSectorData={setZoneSectorData}
+                    zoneColor={zoneColor}
+                    setZoneColor={setZoneColor}
+                    newCoord={newCoord}
+                    setNewCoord={setNewCoord}
+                    coords={coords}
+                    handleCoordsChange={handleCoordsChange}
+                />
+            </ZoneSectorAndDeleteButtonWrapper>
+            <RightSideWrapper>
+                <SaveButton onClick={handleSaveChanges}>
+                    Зачувај Промени
+                </SaveButton>
+                <CancelButton onClick={handleCancel}>Откажи</CancelButton>
+                <ResponsiblePersonsSectorEdit
+                    responsiblePersons={responsiblePersons}
+                    employeesDataModal={employeesDataModal}
+                    isLoadingResponsiblePersonsData={
+                        isLoadingResponsiblePersonsData
+                    }
+                    handleChange={handleEmployeesAndResponsiblePersonsChange}
+                />
+                <ParkingSpacesSectorEdit
+                    parkingSpacesNumber={parkingSpacesNumber}
+                    parkingSpaces={parkingSpaces}
+                    newParkingSpace={newParkingSpace}
+                    setNewParkingSpace={setNewParkingSpace}
+                    handleParkingSpacesChange={handleParkingSpacesChange}
+                />
+            </RightSideWrapper>
+        </>
+    );
+};
+
+export default ParkingZoneInfoEdit;
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/mockData.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,32 @@
+export const employeesAddData = [
+  {
+    id: 1,
+    email: 'viktor-tasevski@hotmail.com',
+    firstName: 'Viktor',
+    lastName: 'Tasevski',
+  },
+  {
+    id: 2,
+    email: 'nebite-ponebiten@opera.com',
+    firstName: 'Nebiten',
+    lastName: 'Usteponebiten',
+  },
+  {
+    id: 3,
+    email: 'david_trajkovski@yahoo.com',
+    firstName: 'David',
+    lastName: 'Trajkovski',
+  },
+  {
+    id: 4,
+    email: 'andrej.tavcioski@gamil.com',
+    firstName: 'Andrej',
+    lastName: 'Tavcioski',
+  },
+  {
+    id: 5,
+    email: 'viktor@hotmail.com',
+    firstName: 'Vici',
+    lastName: 'Tas',
+  },
+];
Index: sources/client/src/components/admin/ParkingZoneInfoEdit/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import Box from '@mui/material/Box';
+import { Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CIcon from '@mui/icons-material/Close';
+import SaveIcon from '@mui/icons-material/Save';
+
+export const ZoneSectorAndDeleteButtonWrapper = styled.div`
+    position: relative;
+`;
+
+export const DeleteButton = styled(Button).attrs({
+    variant: 'outlined',
+    startIcon: <DeleteIcon />,
+})`
+    position: absolute;
+    font-size: 1rem;
+    font-weight: 600;
+    color: red;
+    border: 3px solid red;
+    padding: 5px 10px;
+    top: -48px;
+    :hover {
+        border: 3px dashed red;
+        background-color: rgba(255, 0, 0, 0.1);
+    }
+`;
+
+export const RightSideWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    min-width: 500px;
+    width: 500px;
+    position: relative;
+`;
+
+export const SaveButton = styled(Button).attrs({
+    variant: 'contained',
+    startIcon: <SaveIcon />,
+})`
+    position: absolute;
+    font-size: 1rem;
+    font-weight: 600;
+    background-color: ${(props) => props.theme.palette.primary.main};
+    padding: 8px 15px;
+    right: 150px;
+    top: -49px;
+    :hover {
+        background-color: ${(props) => props.theme.palette.primary.dark};
+    }
+`;
+
+export const CancelButton = styled(Button).attrs({
+    variant: 'outlined',
+    startIcon: <CancelIcon />,
+})`
+    position: absolute;
+    font-size: 1rem;
+    font-weight: 600;
+    color: ${(props) => props.theme.palette.third.main};
+    border: 3px solid ${(props) => props.theme.palette.third.main};
+    padding: 5px 10px;
+    right: 0;
+    top: -48px;
+    :hover {
+        border: 3px dashed ${(props) => props.theme.palette.third.main};
+        background-color: rgba(246, 80, 38, 0.1);
+    }
+`;
+
+export const CloseIcon = styled(CIcon).attrs({
+    sx: {
+        color: 'red',
+        fontSize: '2.5rem',
+    },
+})``;
+
+export const ModalContainer = styled(Box).attrs({
+    width: 400,
+    height: 350,
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    zIndex: 1000,
+    marginBottom: '10%',
+    position: 'relative',
+})`
+    padding: 0 25px 16px 25px;
+`;
+
+export const ModalTitle = styled(Typography).attrs({
+    variant: 'h5',
+    fontWeight: 600,
+    marginBottom: '20px',
+})``;
+
+export const ModalDescription = styled(Typography).attrs({
+    variant: 'body1',
+    paddingLeft: '10px',
+})``;
+
+export const ButtonsWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    padding: 0 20px;
+`;
+
+export const ModalButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `${props.theme.palette.primary.main}`,
+        minWidth: '35%',
+        maxWidth: '45%',
+        height: 'auto',
+    },
+}))`
+    :hover {
+        background-color: ${(props) => props.theme.palette.primary.dark};
+    }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,49 @@
+import {
+  Wrapper,
+  Title,
+  DividerUnderTitle,
+  ParkingSpacesNumberWrapper,
+  NumberLabel,
+  NumberValue,
+  TableWrapper,
+} from './styles';
+
+const ParkingSpacesSector = ({
+  parkingSpacesLocation = [],
+}) => {
+  return (
+      <Wrapper>
+          <Title>Паркинг Места</Title>
+          <DividerUnderTitle />
+          <ParkingSpacesNumberWrapper>
+              <NumberLabel>Вкупно паркинг места:</NumberLabel>
+              <NumberValue>{parkingSpacesLocation?.length ?? 0}</NumberValue>
+          </ParkingSpacesNumberWrapper>
+          <TableWrapper>
+              <table>
+                  <thead>
+                      <tr>
+                          <th>Латитуда</th>
+                          <th>Лонгитуда</th>
+                          <th>Број</th>
+                      </tr>
+                  </thead>
+                  <tbody>
+                      {parkingSpacesLocation &&
+                          parkingSpacesLocation.map(
+                              ({ lat, lng, psName }, index) => (
+                                  <tr key={index}>
+                                      <td>{lat}</td>
+                                      <td>{lng}</td>
+                                      <td>{psName}</td>
+                                  </tr>
+                              )
+                          )}
+                  </tbody>
+              </table>
+          </TableWrapper>
+      </Wrapper>
+  );
+};
+
+export default ParkingSpacesSector;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 380px;
+  padding: 10px 20px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const ParkingSpacesNumberWrapper = styled.div`
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-evenly;
+`;
+
+export const NumberLabel = styled.p`
+  font-size: 1.4rem;
+  margin: 0;
+`;
+
+export const NumberValue = styled.p`
+  font-size: 1.6rem;
+  font-weight: 500;
+  margin: 0;
+`;
+
+export const TableWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  text-align: center;
+  margin-top: 15px;
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    border-bottom: 0;
+    word-break: break-all;
+    font-size: 1.2rem;
+  }
+
+  table tbody {
+    display: block;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  tbody::-webkit-scrollbar {
+    display: none;
+  }
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+  th:last-of-type {
+    width: 20%;
+  }
+
+  th,
+  td {
+    padding: 10px 5px;
+    overflow: hidden;
+  }
+  th {
+    border-bottom: 2px solid black;
+    border-left: 2px solid black;
+    :first-of-type {
+      border-left: 0;
+    }
+  }
+  td {
+    border-left: 2px solid black;
+    border-bottom: 1px solid black;
+    text-overflow: ellipsis;
+  }
+  tr td:first-of-type {
+    border-left: 0;
+  }
+  tr td:last-of-type {
+    width: 20%;
+  }
+  tr:last-of-type td {
+    border-bottom: 0;
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,47 @@
+import {
+  Wrapper,
+  Title,
+  DividerUnderTitle,
+  TableWrapper,
+  Elipsis,
+} from './styles';
+
+const ResponsiblePersonsSector = ({ persons }) => {
+  return (
+    <Wrapper>
+      <Title>Одговорни Лица</Title>
+      <DividerUnderTitle />
+      <TableWrapper>
+        <table>
+          <thead>
+            <tr>
+              <th>Име</th>
+              <th>Презиме</th>
+              <th>Повеќе</th>
+            </tr>
+          </thead>
+          <tbody>
+            {persons.map((person, index) => {
+              return (
+                  <tr key={index}>
+                      <td>{person.firstName}</td>
+                      <td>{person.lastName}</td>
+                      <td>
+                          <Elipsis
+                              target='_blank'
+                              to={`/employees/${person.workerId}`}
+                          >
+                              ...
+                          </Elipsis>
+                      </td>
+                  </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </TableWrapper>
+    </Wrapper>
+  );
+};
+
+export default ResponsiblePersonsSector;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 290px;
+  padding: 10px 20px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 8px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const TableWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  text-align: center;
+  margin-top: 15px;
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    border-bottom: 0;
+    word-break: break-all;
+    font-size: 1.2rem;
+  }
+
+  table tbody {
+    display: block;
+    max-height: 160px;
+    overflow-y: auto;
+  }
+  tbody::-webkit-scrollbar {
+    display: none;
+  }
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+  th:last-of-type {
+    width: 23%;
+  }
+
+  th,
+  td {
+    padding: 10px 5px;
+  }
+  th {
+    border-bottom: 2px solid black;
+    border-left: 2px solid black;
+    :first-of-type {
+      border-left: 0;
+    }
+  }
+  td {
+    border-left: 2px solid black;
+    border-bottom: 1px solid black;
+  }
+  tr td:first-of-type {
+    border-left: 0;
+  }
+  tr td:last-of-type {
+    width: 23%;
+    padding-bottom: 0;
+  }
+  tr:last-of-type td {
+    border-bottom: 0;
+  }
+`;
+
+export const Elipsis = styled(Link)`
+  text-decoration: none;
+  font-size: 35px;
+  line-height: 0px;
+  font-weight: 900;
+  letter-spacing: 2px;
+  color: ${(props) => props.theme.palette.third.main};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,109 @@
+import {
+    Wrapper,
+    Title,
+    DividerUnderTitle,
+    Characteristics,
+    KeyValueWrapper,
+    Key,
+    Value,
+    ColorCircleWrapper,
+    ColorCircle,
+    ZoneCenterLocation,
+    SmallTitle,
+    LatLngCenter,
+    LabelAndLatLngWrapper,
+    LatLngLabel,
+    LatLngValue,
+    ZoneCornersLocation,
+    TableWrapper,
+} from './styles';
+
+const ZoneSector = ({
+    name = '',
+    hourlyRate = 0,
+    from = 0,
+    to = 0,
+    color = '',
+    centerLocation = null,
+    coords = [],
+}) => {
+    return (
+        <Wrapper>
+            <Title>Паркинг Зона</Title>
+            <DividerUnderTitle />
+            <Characteristics>
+                <KeyValueWrapper>
+                    <Key>Назив:</Key>
+                    <Value>{name ?? ''}</Value>
+                </KeyValueWrapper>
+                <KeyValueWrapper>
+                    <Key>Цена од Час:</Key>
+                    <Value>{hourlyRate ?? 0} ден.</Value>
+                </KeyValueWrapper>
+                <KeyValueWrapper>
+                    <Key>Работни часови:</Key>
+                    <Value>
+                        {from < 10
+                            ? '0' + from
+                            : from}{' '}
+                        -{' '}
+                        {to < 10
+                            ? '0' + to
+                            : to}
+                    </Value>
+                </KeyValueWrapper>
+                <KeyValueWrapper>
+                    <Key>Боја на зона:</Key>
+                    <ColorCircleWrapper>
+                        <ColorCircle $color={color} />
+                    </ColorCircleWrapper>
+                </KeyValueWrapper>
+            </Characteristics>
+
+            <ZoneCenterLocation>
+                <SmallTitle>Центар на Зона</SmallTitle>
+                <LatLngCenter>
+                    <LabelAndLatLngWrapper>
+                        <LatLngLabel htmlFor='lat-value'>Латитуда:</LatLngLabel>
+                        <LatLngValue id='lat-value'>
+                            {centerLocation?.lat ?? ''}
+                        </LatLngValue>
+                    </LabelAndLatLngWrapper>
+                    <LabelAndLatLngWrapper>
+                        <LatLngLabel htmlFor='lng-value'>
+                            Лонгитуда:
+                        </LatLngLabel>
+                        <LatLngValue id='lng-value'>
+                            {centerLocation?.lat ?? ''}
+                        </LatLngValue>
+                    </LabelAndLatLngWrapper>
+                </LatLngCenter>
+            </ZoneCenterLocation>
+
+            <ZoneCornersLocation>
+                <SmallTitle>Темиња на Зона</SmallTitle>
+                <TableWrapper>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Латитуда</th>
+                                <th>Лонгитуда</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {coords &&
+                                coords.map(({ lat, lng }, index) => (
+                                    <tr key={index}>
+                                        <td>{lat}</td>
+                                        <td>{lng}</td>
+                                    </tr>
+                                ))}
+                        </tbody>
+                    </table>
+                </TableWrapper>
+            </ZoneCornersLocation>
+        </Wrapper>
+    );
+};
+
+export default ZoneSector;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,159 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+
+export const Wrapper = styled.div`
+  width: 500px;
+  height: 100%;
+  padding: 10px 20px;
+  border: 1px solid ${(props) => props.theme.palette.background.shadow};
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h4',
+  textAlign: 'center',
+  marginBottom: '10px',
+  fontSize: '1.7rem',
+  fontWeight: 500,
+})``;
+
+export const DividerUnderTitle = styled(Divider).attrs({
+  sx: {
+    borderBottomWidth: '2px',
+  },
+})``;
+
+export const Characteristics = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+`;
+
+export const KeyValueWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 10px;
+`;
+
+export const Key = styled.p`
+  font-size: 1.4rem;
+  margin: 0;
+`;
+
+export const Value = styled.p`
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin: 0;
+  width: 50%;
+`;
+
+export const ColorCircleWrapper = styled.div`
+  width: 50%;
+`;
+export const ColorCircle = styled.div`
+  width: 2rem;
+  height: 2rem;
+  background-color: ${(props) => props.$color};
+  border-radius: 50%;
+`;
+
+export const ZoneCenterLocation = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+`;
+
+export const SmallTitle = styled(Typography).attrs({
+  variant: 'h6',
+  textAlign: 'center',
+  marginBottom: '5px',
+  fontWeight: 500,
+  fontSize: '1.4rem',
+})``;
+
+export const LatLngCenter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 40px;
+`;
+
+export const LabelAndLatLngWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const LatLngLabel = styled.label`
+  font-size: 1.1rem;
+`;
+
+export const LatLngValue = styled.p`
+  margin: 0;
+  margin-top: 5px;
+  font-size: 1.5rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 150px;
+  border: 1px solid black;
+  padding: 10px 5px;
+`;
+
+export const ZoneCornersLocation = styled.div`
+  width: 100%;
+  margin-top: 25px;
+`;
+
+export const TableWrapper = styled.div`
+  width: 50%;
+  margin: auto;
+  text-align: center;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    border-bottom: 0;
+  }
+
+  table tbody {
+    display: block;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  tbody::-webkit-scrollbar {
+    display: none;
+  }
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+  th,
+  td {
+    padding: 10px 5px;
+    font-size: 1.2rem;
+    text-overflow: ellipsis;
+  }
+  thead th:first-of-type {
+    border-right: 2px solid black;
+    border-bottom: 2px solid black;
+  }
+  thead th:last-of-type {
+    border-bottom: 2px solid black;
+  }
+  tbody tr td:first-of-type {
+    border-right: 2px solid black;
+  }
+  tbody tr td {
+    border-bottom: 1px solid black;
+  }
+
+  tbody tr:last-of-type td {
+    border-bottom: 0;
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,42 @@
+import { RightSideWrapper, EditIcon } from './styles';
+
+import ZoneSector from './ZoneSector';
+import ResponsiblePersonsSector from './ResponsiblePersonsSector';
+import ParkingSpacesSector from './ParkingSpacesSector';
+import { IconButton } from '@mui/material';
+
+const ParkingZoneInfoViewer = ({ zone = {}, setEditMode }) => {
+  return (
+      <>
+          <ZoneSector
+              name={zone?.pzName ?? null}
+              hourlyRate={zone?.price ?? null}
+              from={zone?.from ?? 0}
+              to={zone?.to ?? 0}
+              color={zone?.color ?? ''}
+              centerLocation={zone?.parkingZoneLocation?.centre ?? null}
+              coords={zone?.parkingZoneLocation?.coords ?? null}
+          />
+          <RightSideWrapper>
+              <IconButton
+                  style={{
+                      position: 'absolute',
+                      top: -60,
+                      right: -8,
+                  }}
+                  onClick={() => setEditMode(true)}
+              >
+                  <EditIcon />
+              </IconButton>
+              <ResponsiblePersonsSector
+                  persons={zone?.responsibleWorkers ?? []}
+              />
+              <ParkingSpacesSector
+                  parkingSpacesLocation={zone?.parkingSpaces ?? null}
+              />
+          </RightSideWrapper>
+      </>
+  );
+};
+
+export default ParkingZoneInfoViewer;
Index: sources/client/src/components/admin/ParkingZoneInfoViewer/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneInfoViewer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import EditI from '@mui/icons-material/Edit';
+
+export const RightSideWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 500px;
+  position: relative;
+`;
+
+export const EditIcon = styled(EditI).attrs((props) => ({
+  sx: {
+    fontSize: '3rem',
+    border: `3px solid ${props.theme.palette.third.main}`,
+    color: props.theme.palette.third.main,
+    padding: '5px',
+  },
+}))`
+  :hover {
+    background-color: rgba(246, 80, 38, 0.1);
+    border: 3px dashed ${(props) => props.theme.palette.third.main};
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,128 +1,256 @@
+import { useState } from 'react';
+import moment from 'moment';
+
 import {
-  Wrapper,
-  SessionChildWrapper,
-  SessionChildTitle,
-  SeessionChildData,
-  InputAndCheckIconWrapper,
-  ParkingSpaceNumberInput,
-  CheckIcon,
-  DeleteButton,
-  ContinueButton,
+    Wrapper,
+    SessionChildWrapper,
+    SessionChildTitle,
+    SeessionChildData,
+    InputAndCheckIconWrapper,
+    ParkingSpaceNumberInput,
+    CheckIcon,
+    DeleteButton,
 } from './styles';
 
 import { sessionStatus } from '../../../../config/enums';
+import { dateFormatString } from '../../../../config/utilities';
 import { IconButton } from '@mui/material';
-import { useState } from 'react';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+import useDeleteSession from '../../../../hooks/useDeleteSession';
+
 
 const sessionCardColors = {
-  active: '#389e0d',
-  idle: '#ffa940',
-  over: '#cf1322',
-};
-
-const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? '');
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <InputAndCheckIconWrapper>
-          <ParkingSpaceNumberInput
-            value={parkingSpace}
-            onChange={(event) => setParkingSpace(event.target.value)}
-          />
-          {parkingSpace !== '' ? (
-            <IconButton>
-              <CheckIcon />
-            </IconButton>
-          ) : null}
-        </InputAndCheckIconWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
-      <SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Почеток</SessionChildTitle>
-          <SeessionChildData>{start}</SeessionChildData>
-        </SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Крај</SessionChildTitle>
-          <SeessionChildData>{end}</SeessionChildData>
-        </SessionChildWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-        <ContinueButton>ПРОДОЛЖИ</ContinueButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const SessionCard = (props) => {
-  switch (props.status) {
-    case sessionStatus.active:
-      return <ActiveCard {...props} />;
-    case sessionStatus.idle:
-      return <IdleCard {...props} />;
-    case sessionStatus.over:
-      return <OverCard {...props} />;
-    default:
-      return null;
-  }
+    active: '#389e0d',
+    idle: '#ffa940',
+    over: '#cf1322',
+};
+
+const ActiveCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const IdleCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    handleActivateSession,
+    isLoadingActivateSession,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const [parkingSpaceName, setParkingSpaceName] = useState('');
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <InputAndCheckIconWrapper>
+                    <ParkingSpaceNumberInput
+                        value={parkingSpaceName}
+                        onChange={(event) =>
+                            setParkingSpaceName(event.target.value.trim())
+                        }
+                    />
+                    {parkingSpaceName !== '' ? (
+                        <>
+                            {isLoadingActivateSession ? (
+                                <AbsoluteLoader
+                                    containerStyle={{
+                                        width: '2rem',
+                                        height: '2rem',
+                                        display: 'inline-block',
+                                    }}
+                                />
+                            ) : (
+                                <IconButton
+                                    onClick={() =>
+                                        handleActivateSession({
+                                            pssId,
+                                            parkingSpaceName,
+                                        })
+                                    }
+                                >
+                                    <CheckIcon />
+                                </IconButton>
+                            )}
+                        </>
+                    ) : null}
+                </InputAndCheckIconWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const OverCard = ({
+    pssId,
+    timeStart,
+    timeEnd,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    const formatedTimeEnd = moment(timeEnd).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
+            <SessionChildWrapper>
+                <SessionChildWrapper style={{ margin: 0 }}>
+                    <SessionChildTitle>Почеток</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+                </SessionChildWrapper>
+                <SessionChildWrapper style={{ marginTop: '5px' }}>
+                    <SessionChildTitle>Крај</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeEnd}</SeessionChildData>
+                </SessionChildWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const SessionCard = ({
+    handleActivateSession,
+    isLoadingActivateSession,
+    ...commponProps
+}) => {
+    switch (commponProps.status) {
+        case sessionStatus.active:
+            return <ActiveCard {...commponProps} />;
+        case sessionStatus.idle:
+            return (
+                <IdleCard
+                    {...commponProps}
+                    handleActivateSession={handleActivateSession}
+                    isLoadingActivateSession={isLoadingActivateSession}
+                />
+            );
+        case sessionStatus.over:
+            return <OverCard {...commponProps} />;
+        default:
+            return null;
+    }
 };
 
Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -2,4 +2,5 @@
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import Button from '@mui/material/Button';
+import { mobile_max_width } from '../../../../config/utilities';
 
 export const Wrapper = styled.div`
@@ -15,4 +16,10 @@
   font-size: 1rem;
   box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow};
+
+  @media (max-width: ${mobile_max_width}px) {
+    height: 350px;
+    border-radius: 100px;
+    flex-direction: column;
+  }
 `;
 
@@ -20,4 +27,11 @@
   display: flex;
   flex-direction: column;
+
+  @media (max-width: ${mobile_max_width}px) {
+    margin-top: 15px;
+    :last-of-type {
+      margin-top: 30px;
+    }
+  }
 `;
 
@@ -38,5 +52,6 @@
   position: relative;
 
-  button {
+  button,
+  > div {
     padding: 0;
     position: absolute;
@@ -69,16 +84,2 @@
   }
 `;
-
-export const ContinueButton = styled(Button).attrs((props) => ({
-  variant: 'contained',
-  size: 'small',
-  sx: {
-    backgroundColor: `${props.theme.palette.primary.main}`,
-  },
-}))`
-  margin-top: 20px;
-
-  :hover {
-    background-color: ${(props) => props.theme.palette.primary.dark};
-  }
-`;
Index: sources/client/src/components/admin/ParkingZoneSessions/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,3 +1,3 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Wrapper,
@@ -9,11 +9,56 @@
   StatsKey,
   StatsValue,
+  SearchField,
+  SearchIcon,
 } from './styles';
 import SessionCard from './SessionCard';
 import { sessionStatus } from '../../../config/enums';
-import { sessionsData } from './mockData';
+import useGetSessions from '../../../hooks/useGetSessions';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+
+import useActivateSession from '../../../hooks/useActivateSession';
+
+const sortSessions = (a, b) => {
+  // first - yellow/idle, second - red/finished, third - green/active
+  switch (a.status) {
+    case sessionStatus.active:
+      switch (b.status) {
+        case sessionStatus.active:
+          return -1;
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.over:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+          return -1;
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.idle:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return -1;
+        default:
+          return 1;
+      }
+    default:
+      return -1;
+  }
+};
 
 const ParkingZoneSessions = ({ zone }) => {
-  const [sessions, setSession] = useState(sessionsData);
+  const { isLoading: isLoadingActivateSession, activateSession } =
+    useActivateSession();
+  const { data: sessions, isLoading: isLoadingSessions, setData: setSessions } = useGetSessions(zone.pzId); 
+  const [search, setSearch] = useState('');
   const [stats, setStats] = useState({
     activeSessions: 0,
@@ -21,4 +66,5 @@
     overSessions: 0,
   });
+
   const setSessionsStats = () => {
     let aS = 0;
@@ -26,17 +72,17 @@
     let oS = 0;
     sessions.forEach((s) => {
-      switch (s.status) {
-        case sessionStatus.active:
-          aS += 1;
-          break;
-        case sessionStatus.idle:
-          iS += 1;
-          break;
-        case sessionStatus.over:
-          oS += 1;
-          break;
-        default:
-          break;
-      }
+        switch (s.status) {
+            case sessionStatus.active:
+                aS += 1;
+                break;
+            case sessionStatus.idle:
+                iS += 1;
+                break;
+            case sessionStatus.over:
+                oS += 1;
+                break;
+            default:
+                break;
+        }
     });
     setStats({
@@ -47,4 +93,24 @@
   };
 
+  const onActivateSession = ({ updatedSession  }) => {
+    const updatedSessions = sessions.filter(
+        (s) => s.pssId !== updatedSession.pssId
+    );
+    setSessions([...updatedSessions, updatedSession]);  
+  };
+
+  const handleActivateSession = ({ pssId, parkingSpaceName }) => {
+    activateSession({ pssId, parkingSpaceName, onActivateSession });
+  };
+
+  const onDeleteSession = ({ pssId }) => {
+    setSessions((prevState) => prevState.filter((s) => s.pssId !== pssId));
+  };
+
+  const freeParkingSpaces = useMemo(() => {
+    if(!zone) return 0;
+    return zone.parkingSpaces.length - stats.activeSessions
+  }, [zone?.parkingSpaces, stats])
+
   useEffect(() => {
     setSessionsStats();
@@ -52,46 +118,84 @@
 
   return (
-    <Wrapper>
-      <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
-      <StatsWrapper>
-        <Stats>
-          {/* PARKING SPACES STATS*/}
-          <KeyValueWrapper>
-            <StatsKey>Вкупно паркинг места:</StatsKey>
-            <StatsValue>{zone.parkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Слободни паркинг места:</StatsKey>
-            <StatsValue>
-              {zone.parkingSpaces - zone.takenParkingSpaces}
-            </StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Зафатени паркинг места:</StatsKey>
-            <StatsValue>{zone.takenParkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-        {/* SESSIONS STATS*/}
-        <Stats>
-          <KeyValueWrapper>
-            <StatsKey>Активни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.activeSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Завршени паркинг сесии:</StatsKey>
-            <StatsValue>{stats.overSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Неактивни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.idleSessions}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-      </StatsWrapper>
-      <SessionsWrapper>
-        {sessions.map((session) => (
-          <SessionCard key={session.id} {...session} />
-        ))}
-      </SessionsWrapper>
-    </Wrapper>
+      <Wrapper>
+          <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
+          <StatsWrapper>
+              <Stats>
+                  {/* PARKING SPACES STATS*/}
+                  <KeyValueWrapper>
+                      <StatsKey>Вкупно паркинг места:</StatsKey>
+                      <StatsValue>{zone.parkingSpaces.length}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Слободни паркинг места:</StatsKey>
+                      <StatsValue>{freeParkingSpaces}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Зафатени паркинг места:</StatsKey>
+                      <StatsValue>
+                          {zone.parkingSpaces.length - freeParkingSpaces}
+                      </StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+              {/* SESSIONS STATS*/}
+              <Stats>
+                  <KeyValueWrapper>
+                      <StatsKey>Активни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.activeSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Завршени паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.overSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Неактивни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.idleSessions}</StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+          </StatsWrapper>
+          <SearchField
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              InputProps={{
+                  startAdornment: <SearchIcon />,
+              }}
+          />
+          <SessionsWrapper>
+              {isLoadingSessions ? (
+                  <AbsoluteLoader
+                      containerStyle={{
+                          width: '150px',
+                          height: '150px',
+                          margin: 'auto',
+                          marginTop: '50px',
+                      }}
+                  />
+              ) : (
+                  <>
+                      {sessions
+                          .filter((session) =>
+                              session.plate.plate
+                                  .concat(
+                                      ` ${session.parkingSpace?.psName ?? ''}`
+                                  )
+                                  .toLowerCase()
+                                  .includes(search.trim().toLowerCase())
+                          )
+                          .sort(sortSessions)
+                          .map((session) => (
+                              <SessionCard
+                                  key={session.pssId}
+                                  {...session}
+                                  handleActivateSession={handleActivateSession}
+                                  isLoadingActivateSession={
+                                      isLoadingActivateSession
+                                  }
+                                  onDeleteSession={onDeleteSession}
+                              />
+                          ))}
+                  </>
+              )}
+          </SessionsWrapper>
+      </Wrapper>
   );
 };
Index: sources/client/src/components/admin/ParkingZoneSessions/mockData.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -5,4 +5,5 @@
     id: 1,
     start: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 1',
     plate: 'SK-8190-AV',
     status: 'active',
@@ -12,4 +13,5 @@
     id: 2,
     start: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 2',
     plate: 'ST-9312-OK',
     status: 'idle',
@@ -20,4 +22,5 @@
     start: moment().format('hh:mm - DD.MM.yyyy'),
     end: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 1',
     plate: 'SK-6511-OS',
     status: 'over',
Index: sources/client/src/components/admin/ParkingZoneSessions/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,4 +1,8 @@
 import styled from 'styled-components';
 import { Typography } from '@mui/material';
+import TextField from '@mui/material/TextField';
+import SIcon from '@mui/icons-material/Search';
+
+import { mobile_max_width } from '../../../config/utilities';
 
 export const Wrapper = styled.div`
@@ -6,7 +10,8 @@
   flex-direction: column;
   align-items: center;
-  margin: 0;
-  padding: 30px 175px 0 175px;
+  padding: 30px 12% 0 12%;
   width: 100%;
+  max-width: 1440px;
+  margin: auto;
   height: 100%;
 `;
@@ -20,4 +25,5 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  text-align: center;
 `;
 
@@ -28,4 +34,8 @@
   justify-content: space-between;
   margin: 30px 0 10px 0;
+
+  @media (max-width: ${mobile_max_width}px) {
+    flex-direction: column;
+  }
 `;
 
@@ -33,4 +43,5 @@
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
@@ -38,5 +49,5 @@
   display: flex;
   flex-direction: row;
-  width: 220px;
+  width: 280px;
   justify-content: space-between;
 `;
@@ -47,4 +58,5 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  font-size: 1.2rem;
 `;
 
@@ -52,5 +64,5 @@
   margin: 0;
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   background: -webkit-linear-gradient(#333333, #4cc5a3);
   -webkit-background-clip: text;
@@ -58,12 +70,44 @@
 `;
 
+export const SearchField = styled(TextField).attrs({
+  width: '150px',
+  sx: {
+    marginTop: '10px',
+    marginBottom: '20px',
+  },
+})`
+  border: 1px solid ${(props) => props.theme.palette.primary.main};
+  border-radius: 5px;
+  fieldset {
+    border: 0;
+  }
+  input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 15px 10px;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+export const SearchIcon = styled(SIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2rem',
+    color: `rgba(0,173,124, 0.4)`, // primary.main in rgb with opacity 0.4
+  },
+}))``;
+
 export const SessionsWrapper = styled.div`
-  height: 45vh;
+  height: auto;
+  min-height: 240px;
+  max-height: 380px;
   width: 100%;
   overflow: auto;
-  padding-top: 20px;
-
   > div:not(div:first-of-type) {
     margin-top: 24px;
   }
+
+  @media (max-width: ${mobile_max_width}px) {
+    max-height: 75vh;
+    padding-bottom: 10px;
+  }
 `;
Index: sources/client/src/components/admin/ParkingZones/ParkingZoneCard/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZones/ParkingZoneCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZones/ParkingZoneCard/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -2,45 +2,46 @@
 
 import {
-  ParkingZoneWrapper,
-  Container,
-  ZoneName,
-  InfoWrapper,
-  Label,
-  Value,
-  ProgressBar,
-  ProgressBarLabel,
+    ParkingZoneWrapper,
+    Container,
+    ZoneName,
+    InfoWrapper,
+    Label,
+    Value,
+    ProgressBar,
+    ProgressBarLabel,
 } from './styles';
 
+import DropdownViewer from '../../../DropdownViewer';
+
 const ParkingZoneCard = ({ info }) => {
-  let history = useHistory();
+    let history = useHistory();
+    const takenDividedByTotal = info.takenSpaces / info.capacity;
 
-  return (
-    <ParkingZoneWrapper item xs={11} sm={6} md={3}>
-      <Container onClick={() => history.push(`/zone/${info.id}`)}>
-        <ZoneName>{info.zoneName}</ZoneName>
-        <InfoWrapper>
-          <Label>Одговорни лица:</Label>
-          {info.responsiblePersons.slice(0, 1).map((person, index) => (
-            <Value key={index}>{person}</Value>
-          ))}
-          {info.responsiblePersons.length > 1 ? <Value>...</Value> : null}
-        </InfoWrapper>
-        <InfoWrapper>
-          <Label>Број на паркинг места:</Label>
-          <Value>{info.parkingSpaces}</Value>
-        </InfoWrapper>
-        <ProgressBar
-          percent={Math.floor(
-            (info.takenParkingSpaces / info.parkingSpaces) * 100
-          )}
-          label={() => (
-            <ProgressBarLabel>
-              {info.takenParkingSpaces}/{info.parkingSpaces}
-            </ProgressBarLabel>
-          )}
-        />
-      </Container>
-    </ParkingZoneWrapper>
-  );
+    return (
+        <ParkingZoneWrapper item xs={11} sm={6} md={3}>
+            <Container onClick={() => history.push(`/zone/${info.id}`)}>
+                <ZoneName>{info.pzName}</ZoneName>
+                <InfoWrapper>
+                    <Label>Одговорни лица:</Label>
+                    <DropdownViewer data={info?.responsibleWorkers ?? [] } />
+                </InfoWrapper>
+                <InfoWrapper style={{ marginTop: '30px' }}>
+                    <Label>Број на паркинг места:</Label>
+                    <Value>{info.capacity}</Value>
+                </InfoWrapper>
+                <ProgressBar
+                    percent={Math.floor(
+                        (isNaN(takenDividedByTotal) ? 0 : takenDividedByTotal) *
+                            100
+                    )}
+                    label={() => (
+                        <ProgressBarLabel>
+                            {info.takenSpaces}/{info.capacity}
+                        </ProgressBarLabel>
+                    )}
+                />
+            </Container>
+        </ParkingZoneWrapper>
+    );
 };
 
Index: sources/client/src/components/admin/ParkingZones/ParkingZoneCard/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZones/ParkingZoneCard/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZones/ParkingZoneCard/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -2,72 +2,76 @@
 import Grid from '@mui/material/Grid';
 import { Typography } from '@mui/material';
-
-import { LineProgressBar } from '@frogress/line'
-
+import { LineProgressBar } from '@frogress/line';
+import { mobile_max_width } from '../../../../config/utilities';
 
 export const ParkingZoneWrapper = styled(Grid)`
-    height: 350px;
+  height: 350px;
+
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 15px !important;
+    padding-right: 15px;
+  }
 `;
 
 export const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
-    background-color: ${props => props.theme.palette.background.white};
-    :hover {
-        opacity: 0.8;
-        cursor: pointer;
-    }
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+  background-color: ${(props) => props.theme.palette.background.white};
+  :hover {
+    opacity: 0.8;
+    cursor: pointer;
+  }
+  position: relative;
 `;
 
 export const ZoneName = styled(Typography).attrs({
-    variant: 'h2'
+  variant: 'h2',
 })`
-    font-size: 2rem;
-    font-weight: 600;
-    margin-top: 30px;
-    text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  margin-top: 30px;
+  text-align: center;
 `;
 
 export const InfoWrapper = styled.div`
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
 export const Label = styled(Typography).attrs({
-    variant: 'h4'
+  variant: 'h4',
 })`
-    font-size: 1rem;
-    margin-bottom: 5px;
+  font-size: 1rem;
+  margin-bottom: 5px;
 `;
 
 export const Value = styled(Typography).attrs({
-    variant: 'h3'
+  variant: 'h3',
 })`
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-top: 5px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 5px;
 `;
 
-export const ProgressBar = styled(LineProgressBar).attrs(props => ({
-    stripe: true,
-    progressColor: props.theme.palette.primary.main,
-    height: '30px',
+export const ProgressBar = styled(LineProgressBar).attrs((props) => ({
+  stripe: true,
+  progressColor: props.theme.palette.primary.main,
+  height: '30px',
 }))`
-    position: absolute;
-    bottom: 5px;
+  position: absolute;
+  bottom: 5px;
 `;
 
 export const ProgressBarLabel = styled.p`
-    margin: 0 0 0 42.5%;
-    line-height: 30px;
-    position: absolute;
-    font-weight: 500;
+  margin: 0 0 0 42.5%;
+  line-height: 30px;
+  position: absolute;
+  font-weight: 500;
 `;
Index: sources/client/src/components/admin/ParkingZones/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZones/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZones/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,122 +1,241 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import {
-  FiltersWrapper,
-  SortingArrowsWrapper,
-  SortByTitle,
-  ArrowDown,
-  ArrowUp,
-  ClearSortIcon,
-  ParkingZonesWrapper,
-  AddParkingZoneCard,
-  AddIcon,
-  AddItem,
-  ParkingName,
-  DividerUnderFilters,
+    FiltersWrapper,
+    SortingArrowsWrapper,
+    SortByTitle,
+    ArrowDown,
+    ArrowUp,
+    ClearSortIcon,
+    ParkingZonesWrapper,
+    AddParkingZoneCard,
+    AddIcon,
+    AddItem,
+    ParkingName,
+    DividerUnderFilters,
+    ModalContainer,
+    ModalTitle,
+    ModalInputAndLabelWrapper,
+    ModalInput,
+    ModalInputLabel,
+    ModalButton,
+    ButtonWrapper,
+    CloseIcon,
 } from './styles';
 
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+import Modal from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+import { IconButton, Slide } from '@mui/material';
 import ParkingZoneCard from './ParkingZoneCard';
 
 import { roles } from '../../../config/enums';
+import { UserContext } from '../../../context/UserContext';
+import useGetData from '../../../hooks/useGetData';
+import useCreateZone from '../../../hooks/useCreateZone';
 
 import { parkingZones } from './mockData';
 
 const sortDownUp = (a, b) => {
-  const aPercent = a.takenParkingSpaces / a.parkingSpaces;
-  const bPercent = b.takenParkingSpaces / b.parkingSpaces;
-  if (aPercent > bPercent) {
-    return 1;
-  } else {
-    if (aPercent < bPercent) {
-      return -1;
+    const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
+    const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
+    if (aPercent > bPercent) {
+        return 1;
+    } else {
+        if (aPercent < bPercent) {
+            return -1;
+        }
+        return a.zoneName - b.zoneName;
     }
-    return a.zoneName - b.zoneName;
-  }
 };
 
 const sortUpDown = (a, b) => {
-  const aPercent = a.takenParkingSpaces / a.parkingSpaces;
-  const bPercent = b.takenParkingSpaces / b.parkingSpaces;
-  if (aPercent > bPercent) {
+    const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
+    const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
+    if (aPercent > bPercent) {
+        return -1;
+    } else {
+        if (aPercent < bPercent) {
+            return 1;
+        }
+        return a.zoneName - b.zoneName;
+    }
+};
+
+const sortByName = (a, b) => {
+    if (a.zoneName >= b.zoneName) {
+        return 1;
+    }
     return -1;
-  } else {
-    if (aPercent < bPercent) {
-      return 1;
-    }
-    return a.zoneName - b.zoneName;
-  }
-};
-
-const sortByName = (a, b) => {
-  if (a.zoneName >= b.zoneName) {
-    return 1;
-  }
-  return -1;
 };
 
 const ParkingZones = () => {
-  const [isArrowUpUp, setIsArrowUpUp] = useState(false);
-  const [isArrowDownUp, setIsArrowDownUp] = useState(false);
-
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
-  const sortFunc = isArrowUpUp
-    ? sortDownUp
-    : isArrowDownUp
-    ? sortUpDown
-    : sortByName;
-
-  return (
-    <>
-      <FiltersWrapper>
-        <ParkingName>Паркинг - Дебар Маало</ParkingName>
-        <SortingArrowsWrapper>
-          <SortByTitle>Сортирај:</SortByTitle>
-          <ArrowUp
-            onClick={() => {
-              if (!isArrowUpUp) {
-                setIsArrowUpUp(true);
-                setIsArrowDownUp(false);
-              }
-            }}
-            selected={isArrowUpUp}
-          />
-          <ArrowDown
-            onClick={() => {
-              if (!isArrowDownUp) {
-                setIsArrowDownUp(true);
-                setIsArrowUpUp(false);
-              }
-            }}
-            selected={isArrowDownUp}
-          />
-          {isArrowUpUp || isArrowDownUp ? (
-            <ClearSortIcon
-              onClick={() => {
-                setIsArrowUpUp(false);
-                setIsArrowDownUp(false);
-              }}
-            />
-          ) : null}
-        </SortingArrowsWrapper>
-      </FiltersWrapper>
-
-      <DividerUnderFilters />
-
-      <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}>
-        {user.role === roles.admin ? (
-          <AddParkingZoneCard item xs={11} sm={6} md={3}>
-            <AddItem>
-              <AddIcon />
-            </AddItem>
-          </AddParkingZoneCard>
-        ) : null}
-
-        {parkingZones.sort(sortFunc).map((parkingZone) => (
-          <ParkingZoneCard key={parkingZone.id} info={parkingZone} />
-        ))}
-      </ParkingZonesWrapper>
-    </>
-  );
+    const { user } = useContext(UserContext);
+    const {
+        data: zones,
+        setData: setZones,
+        isLoading: isLoadingZones,
+    } = useGetData({
+        url: '/parkingZone',
+    });
+    const { createZone, isLoading: isCreateZoneLoading } = useCreateZone();
+    const [isArrowUpUp, setIsArrowUpUp] = useState(false);
+    const [isArrowDownUp, setIsArrowDownUp] = useState(false);
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [modalInput, setModalInput] = useState('');
+    const sortFunc = isArrowUpUp
+        ? sortDownUp
+        : isArrowDownUp
+        ? sortUpDown
+        : sortByName;
+
+    const addNewZoneToData = (newZone) => {
+        setZones([...zones, newZone]);
+    };
+    const handleCreateZone = () => {
+        createZone({
+            zoneName: modalInput,
+            setModalInput,
+            setModalOpen,
+            addNewZoneToData,
+        });
+    };
+
+    return (
+        <>
+            <Modal
+                open={isModalOpen}
+                onClose={() => {
+                    setModalInput('');
+                    setModalOpen(false);
+                }}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Slide in={isModalOpen}>
+                    <ModalContainer>
+                        <IconButton
+                            style={{
+                                marginLeft: 345,
+                            }}
+                            onClick={() => {
+                                setModalInput('');
+                                setModalOpen(false);
+                            }}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                        {isCreateZoneLoading ? (
+                            <AbsoluteLoader
+                                containerStyle={{
+                                    width: '200px',
+                                    height: '200px',
+                                    margin: 'auto',
+                                    marginTop: '30px',
+                                }}
+                            />
+                        ) : (
+                            <>
+                                <ModalTitle>НОВА ЗОНА</ModalTitle>
+                                <ModalInputAndLabelWrapper>
+                                    <ModalInputLabel>
+                                        Назив на Зона
+                                    </ModalInputLabel>
+                                    <ModalInput
+                                        value={modalInput}
+                                        onChange={(event) =>
+                                            setModalInput(event.target.value)
+                                        }
+                                    />
+                                </ModalInputAndLabelWrapper>
+                                <ButtonWrapper>
+                                    <ModalButton onClick={handleCreateZone}>
+                                        Креирај Зона
+                                    </ModalButton>
+                                </ButtonWrapper>
+                            </>
+                        )}
+                    </ModalContainer>
+                </Slide>
+            </Modal>
+            <FiltersWrapper>
+                <ParkingName>Паркинг - Дебар Маало</ParkingName>
+                <SortingArrowsWrapper>
+                    <SortByTitle>Сортирај:</SortByTitle>
+                    <ArrowUp
+                        onClick={() => {
+                            if (!isArrowUpUp) {
+                                setIsArrowUpUp(true);
+                                setIsArrowDownUp(false);
+                            }
+                        }}
+                        selected={isArrowUpUp}
+                    />
+                    <ArrowDown
+                        onClick={() => {
+                            if (!isArrowDownUp) {
+                                setIsArrowDownUp(true);
+                                setIsArrowUpUp(false);
+                            }
+                        }}
+                        selected={isArrowDownUp}
+                    />
+                    {isArrowUpUp || isArrowDownUp ? (
+                        <ClearSortIcon
+                            onClick={() => {
+                                setIsArrowUpUp(false);
+                                setIsArrowDownUp(false);
+                            }}
+                        />
+                    ) : null}
+                </SortingArrowsWrapper>
+            </FiltersWrapper>
+
+            <DividerUnderFilters />
+
+            <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}>
+                {isLoadingZones ? (
+                    <AbsoluteLoader
+                        containerStyle={{
+                            width: '250px',
+                            height: '250px',
+                            margin: 'auto',
+                            marginTop: '12vw',
+                        }}
+                    />
+                ) : (
+                    <>
+                        {user.role === roles.admin ? (
+                            <AddParkingZoneCard
+                                item
+                                xs={11}
+                                sm={6}
+                                md={3}
+                                onClick={() => setModalOpen(true)}
+                            >
+                                <AddItem>
+                                    <AddIcon />
+                                </AddItem>
+                            </AddParkingZoneCard>
+                        ) : null}
+
+                        {zones.sort(sortFunc).map((parkingZone) => (
+                            <ParkingZoneCard
+                                key={parkingZone.id}
+                                info={parkingZone}
+                            />
+                        ))}
+                    </>
+                )}
+            </ParkingZonesWrapper>
+        </>
+    );
 };
 
Index: sources/client/src/components/admin/ParkingZones/mockData.js
===================================================================
--- sources/client/src/components/admin/ParkingZones/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZones/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,81 +1,136 @@
 export const parkingZones = [
-  {
-    id: 1,
-    zoneName: 'Zona 1',
-    responsiblePersons: ['Viktor Tasevski', 'Dracevcanec'],
-    parkingSpaces: 69,
-    takenParkingSpaces: 34,
-    areaColor: '#FFD700',
-    location: {
-      center: {
-        lat: 41.937907,
-        lng: 21.51213,
-      },
-      coords: [
-        { lat: 41.937749, lng: 21.511095 },
-        { lat: 41.936971, lng: 21.511534 },
-        { lat: 41.93834, lng: 21.51407 },
-        { lat: 41.939031, lng: 21.511914 },
-      ],
+    {
+        id: 1,
+        zoneName: 'Zona 1',
+        responsiblePersons: ['Viktor Tasevski', 'David Trajkovski'], // THIS SHOULD BE IN THE ParkingZones Call Only for the Card. For the ZoneInfo We need More Data for The Employees. This should be array of employee objects.
+        parkingSpacesNumber: 79,
+        takenParkingSpaces: 34,
+        hourlyRate: 30,
+        workingHours: {
+            from: 5,
+            to: 24,
+        },
+        zoneColor: '#FFD700',
+        location: {
+            center: {
+                lat: 42.000389,
+                lng: 21.423084,
+            },
+            coords: [
+                { lat: 42.00060867305611, lng: 21.424473984198578 },
+                { lat: 42.001509615969574, lng: 21.421609384939654 },
+                { lat: 41.99886654813535, lng: 21.42293439620515 },
+            ],
+        },
+        parkingSpaces: [
+            {
+                lat: '42.00043725326595',
+                lng: '21.42263398879119',
+                parkingSpaceNumber: 'A21',
+                isTaken: true,
+            },
+            {
+                lat: '42.00028576562848',
+                lng: '21.423680050318325',
+                parkingSpaceNumber: 'A1',
+                isTaken: false,
+            },
+            {
+                lat: '41.99959609366812',
+                lng: '21.423374278487316',
+                parkingSpaceNumber: 'B55',
+                isTaken: true,
+            },
+            {
+                lat: '41.99962798617793',
+                lng: '21.42275200598912',
+                parkingSpaceNumber: 'C20',
+                isTaken: false,
+            },
+        ],
     },
-    parkingSpacesLocation: [
-      {
-        lat: '41.938271',
-        lng: '21.512380',
-        parkingSpaceNumber: 'A21',
-        free: true,
-      },
-      {
-        lat: '41.938284',
-        lng: '21.512387',
-        parkingSpaceNumber: 'A1',
-        free: false,
-      },
-      {
-        lat: '41.938292',
-        lng: '21.512365',
-        parkingSpaceNumber: 'B55',
-        free: true,
-      },
-      {
-        lat: '41.938279',
-        lng: '21.512359',
-        parkingSpaceNumber: 'C20',
-        free: false,
-      },
-    ],
-  },
-  {
-    id: 2,
-    zoneName: 'Zona 2',
-    responsiblePersons: ['Andrej Tavcioski', 'Vlaevec', 'Skopjaniste'],
-    parkingSpaces: 100,
-    takenParkingSpaces: 99,
-  },
-  {
-    id: 3,
-    zoneName: 'Zona 3',
-    responsiblePersons: ['David Trajkovski', 'Kumanovecot'],
-    parkingSpaces: 36,
-    takenParkingSpaces: 5,
-  },
-  {
-    id: 4,
-    zoneName: 'Zona 4',
-    responsiblePersons: [
-      'Nekoj od POC',
-      'Nekoj drug od POC',
-      'Nekoj tret od POC',
-      'Nekoj cetvrt od POC',
-    ],
-    parkingSpaces: 150,
-    takenParkingSpaces: 130,
-  },
-  {
-    id: 5,
-    zoneName: 'Zona 5',
-    responsiblePersons: ['Nekoj od Silbo'],
-    parkingSpaces: 360,
-    takenParkingSpaces: 250,
-  },
+    {
+        id: 2,
+        zoneName: 'Zona 2',
+        responsiblePersons: ['Andrej Tavcioski', 'David Trajkovski'], // THIS SHOULD BE IN THE ParkingZones Call Only for the Card. For the ZoneInfo We need More Data for The Employees. This should be array of employee objects.
+        parkingSpacesNumber: 29,
+        takenParkingSpaces: 14,
+        hourlyRate: 30,
+        workingHours: {
+            from: 5,
+            to: 24,
+        },
+        zoneColor: '#FF0000',
+        location: {
+            center: {
+                lat: 42.001097017606455,
+                lng: 21.421317024169447,
+            },
+            coords: [
+                { lat: 42.00048708466677, lng: 21.42135993951415 },
+                { lat: 42.0006784368066, lng: 21.421837372723967 },
+                { lat: 42.00149765665009, lng: 21.42148332113017 },
+                { lat: 42.00134218508192, lng: 21.42078862898779 },
+            ],
+        },
+        parkingSpaces: [
+            {
+                lat: '42.00043725326595',
+                lng: '21.42263398879119',
+                parkingSpaceNumber: 'A21',
+                isTaken: true,
+            },
+            {
+                lat: '42.00028576562848',
+                lng: '21.423680050318325',
+                parkingSpaceNumber: 'A1',
+                isTaken: false,
+            },
+            {
+                lat: '41.99959609366812',
+                lng: '21.423374278487316',
+                parkingSpaceNumber: 'B55',
+                isTaken: true,
+            },
+            {
+                lat: '41.99962798617793',
+                lng: '21.42275200598912',
+                parkingSpaceNumber: 'C20',
+                isTaken: false,
+            },
+        ],
+    },
+    {
+        id: 3,
+        zoneName: 'Zona 3',
+        responsiblePersons: ['David Trajkovski', 'Kumanovecot'],
+        parkingSpacesNumber: 36,
+        takenParkingSpaces: 5,
+        hourlyRate: 10,
+        workingHours: '12:00 - 17:00',
+    },
+    {
+        id: 4,
+        zoneName: 'Zona 4',
+        responsiblePersons: ['Nekoj od POC'],
+        parkingSpacesNumber: 150,
+        takenParkingSpaces: 130,
+        hourlyRate: 100,
+        workingHours: {
+            from: '5',
+            to: '24',
+        },
+    },
+    {
+        id: 5,
+        zoneName: 'Zona 5',
+        responsiblePersons: [],
+        parkingSpacesNumber: 360,
+        takenParkingSpaces: 250,
+        hourlyRate: 30,
+        workingHours: {
+            from: '5',
+            to: '24',
+        },
+    },
 ];
Index: sources/client/src/components/admin/ParkingZones/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZones/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZones/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -7,80 +7,100 @@
 import ClearIcon from '@mui/icons-material/Clear';
 import { ParkingZoneWrapper, Container } from './ParkingZoneCard/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import CIcon from '@mui/icons-material/Close';
+import { mobile_max_width } from '../../../config/utilities';
 
 export const FiltersWrapper = styled.div`
-  margin-bottom: 10px;
-  text-align: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 175px;
+    margin-bottom: 10px;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 10%;
+
+    @media (max-width: ${mobile_max_width}px) {
+        flex-direction: column;
+    }
 `;
 
 export const SortingArrowsWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+
+    @media (max-width: ${mobile_max_width}px) {
+        margin-top: 30px;
+    }
 `;
 
 export const ArrowDown = styled(ArrowDownwardIcon).attrs({})`
-  font-size: 2rem;
-  color: ${(props) => (props.selected ? props.theme.palette.primary.main : '')};
-  :hover {
-    cursor: pointer;
-    color: ${(props) => props.theme.palette.primary.main};
-  }
+    font-size: 2rem;
+    color: ${(props) =>
+        props.selected ? props.theme.palette.primary.main : ''};
+    :hover {
+        cursor: pointer;
+        color: ${(props) => props.theme.palette.primary.main};
+    }
 `;
 
 export const ArrowUp = styled(ArrowUpwardIcon).attrs({})`
-  margin: 0 10px 0 15px;
-  font-size: 2rem;
-  color: ${(props) => (props.selected ? props.theme.palette.primary.main : '')};
-  :hover {
-    cursor: pointer;
-    color: ${(props) => props.theme.palette.primary.main};
-  }
+    margin: 0 10px 0 15px;
+    font-size: 2rem;
+    color: ${(props) =>
+        props.selected ? props.theme.palette.primary.main : ''};
+    :hover {
+        cursor: pointer;
+        color: ${(props) => props.theme.palette.primary.main};
+    }
 `;
 
 export const ClearSortIcon = styled(ClearIcon).attrs({})`
-  color: ${(props) => props.theme.palette.error.main};
-  position: absolute;
-  right: 0;
-  font-size: 2rem;
-  right: -50px;
-  :hover {
-    cursor: pointer;
-  }
+    color: ${(props) => props.theme.palette.error.main};
+    position: absolute;
+    right: 0;
+    font-size: 2rem;
+    right: -50px;
+    :hover {
+        cursor: pointer;
+    }
 `;
 
 export const DividerUnderFilters = styled(Divider).attrs({
-  variant: 'middle',
-  sx: {
-    margin: '0 160px',
-    borderWidth: '2px',
-    borderBottomWidth: 'thin',
-  },
+    variant: 'middle',
+    sx: {
+        margin: '0 9%',
+        borderWidth: '2px',
+        borderBottomWidth: 'thin',
+    },
 })``;
 
 export const SortByTitle = styled(Typography).attrs((props) => ({
-  fontSize: '1rem',
-  fontWeight: '600',
-  margin: 0,
-  color: `${props.theme.palette.primary.main}`,
+    fontSize: '1rem',
+    fontWeight: '600',
+    margin: 0,
+    color: `${props.theme.palette.primary.main}`,
 }))``;
 
 export const ParkingName = styled(Typography).attrs((props) => ({
-  fontSize: '2rem',
-  fontWeight: '600',
-  margin: 0,
-  color: `${props.theme.palette.primary.main}`,
+    fontSize: '2rem',
+    fontWeight: '600',
+    margin: 0,
+    color: `${props.theme.palette.primary.main}`,
 }))``;
 
 export const ParkingZonesWrapper = styled(Grid)`
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  padding: 0 40px 0 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    padding: 0 40px 30px 0;
+
+    @media (max-width: ${mobile_max_width}px) {
+        padding-right: 0;
+        justify-content: center;
+    }
 `;
 
@@ -88,16 +108,90 @@
 
 export const AddItem = styled(Container)`
-  display: flex;
-  align-items: center;
-  justify-content: middle;
+    display: flex;
+    align-items: center;
+    justify-content: middle;
 `;
 
 export const AddIcon = styled(Add).attrs({
-  sx: {
-    fontWeight: 500,
-  },
+    sx: {
+        fontWeight: 500,
+    },
 })`
-  width: 100%;
-  height: 100%;
-  color: ${(props) => props.theme.palette.primary.main};
+    width: 100%;
+    height: 100%;
+    color: ${(props) => props.theme.palette.primary.main};
 `;
+
+export const ModalContainer = styled(Box).attrs({
+    width: 400,
+    height: 366,
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    zIndex: 1000,
+    marginBottom: '10%',
+})`
+    padding-bottom: 16px;
+`;
+
+export const ModalTitle = styled(Typography).attrs({
+    variant: 'h4',
+    fontWeight: 600,
+    textAlign: 'center',
+})``;
+
+export const ModalInputAndLabelWrapper = styled.div`
+    text-align: center;
+    padding: 0 20px;
+    margin-top: 40px;
+    margin-bottom: 70px;
+`;
+
+export const ModalInputLabel = styled(Typography).attrs({
+    variant: 'h6',
+})``;
+
+export const ModalInput = styled(TextField).attrs({
+    fullWidth: true,
+    sx: {
+        marginTop: '10px',
+    },
+})`
+    fieldset {
+        border: 0;
+    }
+    input {
+        text-align: center;
+        font-size: 1.1rem;
+        font-weight: 500;
+        padding: 15px 10px;
+        border: 2px solid ${(props) => props.theme.palette.primary.main};
+
+        :focus {
+            border: 2px dashed ${(props) => props.theme.palette.primary.main};
+        }
+    }
+`;
+
+export const ButtonWrapper = styled.div`
+    width: 100%;
+    text-align: center;
+`;
+
+export const ModalButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `${props.theme.palette.primary.main}`,
+    },
+}))`
+    :hover {
+        background-color: ${(props) => props.theme.palette.primary.dark};
+    }
+`;
+
+export const CloseIcon = styled(CIcon).attrs({
+    sx: {
+        color: 'red',
+        fontSize: '2.5rem',
+    },
+})``;
Index: sources/client/src/components/user/Landing/index.js
===================================================================
--- sources/client/src/components/user/Landing/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Landing/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,93 @@
+import { useContext, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import useGetData from '../../../hooks/useGetData';
+import {
+  Wrapper,
+  ParkingSpace,
+  ParkingSpaceHelper,
+  ParkingIcon,
+  ArrowsWrapper,
+  CarWrapper,
+  Car,
+  PreviewCar,
+  YouAreParkedButton,
+} from './styles';
+
+import car from '../../../resources/car_1.png';
+import Arrows from '../../Arrows';
+
+import { usePreview } from 'react-dnd-preview';
+import { useDrag, useDrop } from 'react-dnd';
+
+const Landing = () => {
+  const { data: sessionStatus, isLoading: isSessionStatusLoading } = useGetData(
+      { url: `/registriranParkirac/session` } 
+  );
+
+  const history = useHistory();
+  const { display, itemType, item, style } = usePreview();
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: 'img',
+    item: 'Car',
+    end: (item, monitor) => {
+      if (monitor.didDrop()) {
+        history.push('/session');
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+      handlerId: monitor.getHandlerId(),
+    }),
+  }));
+  const [{ canDrop, isOver }, drop] = useDrop(() => ({
+    accept: 'img',
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  }));
+
+  const CarPreview =() => {
+    if (!display) {
+      return null;
+    }
+    return <Car className='car-preview' src={car} style={style} />;
+  };
+  return (
+      <Wrapper>
+          <ParkingSpace
+              ref={drop}
+              style={{ backgroundColor: canDrop ? 'rgba(0,255,0,0.3)' : '' }}
+          >
+              <ParkingSpaceHelper style={{ bottom: 0, left: '-12.5%' }} />
+              <ParkingSpaceHelper style={{ bottom: 0, right: '-12.5%' }} />
+              {sessionStatus ? (
+                  <Car
+                      src={car}
+                      style={{
+                          transform: 'translateX(-50%)',
+                          width: '70.5%',
+                          left: '50%',
+                      }}
+                  />
+              ) : (
+                  <ParkingIcon />
+              )}
+          </ParkingSpace>
+          {sessionStatus ? null : (
+              <ArrowsWrapper>
+                  <Arrows />
+              </ArrowsWrapper>
+          )}
+          {isDragging || sessionStatus ? null : <Car src={car} ref={drag} />}
+          {!sessionStatus ? null : (
+              <YouAreParkedButton onClick={() => history.push('/session')}>
+                  Паркирани Сте
+              </YouAreParkedButton>
+          )}
+          <CarPreview />
+      </Wrapper>
+  );
+};
+
+export default Landing;
Index: sources/client/src/components/user/Landing/styles.js
===================================================================
--- sources/client/src/components/user/Landing/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Landing/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,129 @@
+import styled, { keyframes } from 'styled-components';
+import LocalParkingIcon from '@mui/icons-material/LocalParking';
+import Button from '@mui/material/Button';
+
+const breath = keyframes`
+  0% {
+    opacity: 0.4;
+    transform: scale(0.7);
+    transform: translate(-50%, -50%);
+  }
+  25% {
+    opacity: 0.6;
+    transform: scale(0.8);
+    transform: translate(-50%, -50%);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.9);
+    transform: translate(-50%, -50%);
+  }
+  100% {
+    opacity: 0.1;
+    transform: scale(1.1);
+    transform: translate(-50%, -50%);
+  }
+`;
+
+const buttonBreath = keyframes`
+  0% {
+    transform: scale(0.8) ;
+  }
+  25% {
+    transform: scale(0.85) ;
+  }
+  50% {
+    transform: scale(0.9) ;
+  }
+  75% {
+    transform:  scale(0.95) ;
+  }
+  100% {
+    transform: scale(1) ;
+  }
+`;
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: calc(100vh - 66px);
+  padding: 10px 0;
+  position: relative;
+`;
+
+export const ParkingSpace = styled.div`
+  width: 50%;
+  height: 40vh;
+  margin: auto;
+  position: relative;
+  border: 10px solid white;
+  border-bottom: 0;
+`;
+
+export const ParkingIcon = styled(LocalParkingIcon).attrs({
+  sx: {
+    fontSize: 120,
+  },
+})`
+  color: ${(props) => props.theme.palette.primary.dark};
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  animation: ${breath} 2s linear infinite normal;
+`;
+
+export const ParkingSpaceHelper = styled.div`
+  position: absolute;
+  width: 20%;
+  border-bottom: 10px solid white;
+`;
+
+export const ArrowsWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 50vh;
+  bottom: 10vh;
+`;
+
+export const CarWrapper = styled.div`
+  width: 35%;
+  height: 35vh;
+  position: absolute;
+  bottom: 5vh;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+
+export const Car = styled.img`
+  width: 32%;
+  height: 30vh;
+  z-index: 1000;
+  position: absolute;
+  bottom: 5vh;
+  left: 34%;
+  // transform: transalteX(-50%);
+`;
+
+export const PreviewCar = styled.img`
+  width: 35%;
+  height: 30vh;
+  z-index: 1001;
+`;
+
+export const YouAreParkedButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
+}))`
+  position: absolute;
+  left: 20%;
+  bottom: 20vh;
+  width: fit-content;
+  font-size: 25px;
+  animation: ${buttonBreath} 2s linear infinite alternate;
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
+`;
Index: sources/client/src/components/user/MapUsers/index.js
===================================================================
--- sources/client/src/components/user/MapUsers/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/MapUsers/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react';
+
+import {
+    Wrapper,
+    GoogleMapsWrapper,
+    ZoneSelectInput,
+    DropdownItem,
+    ZoneInfoWrapper,
+    KeyValueWrapper,
+    Key,
+    Value,
+    FreeParkingSpacesText,
+} from './styles';
+
+import GoogleMaps from '../../GoogleMaps';
+import useGetData from '../../../hooks/useGetData';
+import useGetZoneByName from '../../../hooks/useGetZoneByName';
+
+const mockParkingSpaces = [
+    {
+        zone: 'Zona 1',
+        lat: '42.00043725326595',
+        lng: '21.42263398879119',
+        psName: 'A33',
+        taken: true,
+    },
+    {
+        zone: 'Zona 1',
+        lat: '42.00028576562848',
+        lng: '21.423680050318325',
+        psName: 'A34',
+        taken: false,
+    },
+    {
+        zone: 'Zona 1',
+        lat: '41.99959609366812',
+        lng: '21.423374278487316',
+        psName: 'A35',
+        taken: false,
+    },
+    {
+        zone: 'Zona 1',
+        lat: '41.99962798617793',
+        lng: '21.42275200598912',
+        psName: 'A36',
+        taken: true,
+    },
+    {
+        zone: 'Zona 2',
+        lat: '42.00075019371071',
+        lng: '21.42124996894335',
+        psName: 'B33',
+        taken: true,
+    },
+    {
+        zone: 'Zona 2',
+        lat: '42.00070634227895',
+        lng: '21.421571834028622',
+        psName: 'B34',
+        taken: false,
+    },
+    {
+        zone: 'Zona 2',
+        lat: '42.00092958561692',
+        lng: '21.421579880655756',
+        psName: 'B35',
+        taken: false,
+    },
+    {
+        zone: 'Zona 2',
+        lat: '42.00115083493807',
+        lng: '21.421402854858854',
+        psName: 'B36',
+        isTaken: true,
+    },
+];
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 150,
+            width: '35px',
+        },
+    },
+};
+
+const defaultZoneInfo = {
+    parkingZoneLocation: {
+        coords: [],
+        centre: {
+            lat: 42.00120992770302,
+            lng: 21.42053372084796,
+        },
+    },
+    color: '',
+};
+
+const MapUsers = () => {
+    const {data: fetchedParkingSpaces, isLoadingParkingSpaces} = useGetData({url: '/parkingSpace'}); 
+    const { data: fetchedSelectZones, isLoading: isLoadingSelectZones } =
+        useGetData({ url: '/parkingZone/parkingZoneNames' });
+    const {
+        zone: zoneInfo,
+        isLoading: isLoadingZoneInfo,
+        fetchZone,
+        setZone: setZoneInfo,
+    } = useGetZoneByName(defaultZoneInfo);
+
+    const [selectedZone, setSelectedZone] = useState('NONE');
+    // const [zoneInfo, setZoneInfo] = useState({ ...defaultZoneInfo });
+    const [parkingSpaces, setParkingSpaces] = useState([]);
+    const [freeParkingSpaces, setFreeParkingSpaces] = useState(0);
+    const handleSelectZone = async (e) => {
+        const _selectedZone = e.target.value;
+        let zone;
+        let _parkingSpaces;
+        let _freeParkingSpaces;
+        if (_selectedZone === 'NONE') {
+            zone = { ...defaultZoneInfo };
+            _parkingSpaces = [...fetchedParkingSpaces ?? []];
+            _freeParkingSpaces =
+                _parkingSpaces.filter((p) => !p.taken).length;
+        setZoneInfo(zone);
+        } else {
+            zone = await fetchZone(_selectedZone);
+            _parkingSpaces = zone.parkingSpaces;
+            _freeParkingSpaces = _parkingSpaces.filter(
+                (p) => !p.taken
+            ).length;
+        }
+        setParkingSpaces(_parkingSpaces);
+        setFreeParkingSpaces(_freeParkingSpaces);
+        setSelectedZone(_selectedZone);
+    };
+
+    useEffect(() => {
+        setParkingSpaces(fetchedParkingSpaces ?? []);
+        fetchedParkingSpaces &&
+            setFreeParkingSpaces(
+                fetchedParkingSpaces.filter((p) => !p.taken).length
+            );
+    }, [fetchedParkingSpaces])
+
+    return (
+        <Wrapper>
+            <FreeParkingSpacesText>
+                Слободни места: {freeParkingSpaces}
+            </FreeParkingSpacesText>
+            <GoogleMapsWrapper>
+                <GoogleMaps
+                    location={zoneInfo.parkingZoneLocation}
+                    parkingSpaces={parkingSpaces}
+                    zoneAreaColor={zoneInfo.color}
+                    zoom={selectedZone === 'NONE' ? 15 : 16}
+                />
+            </GoogleMapsWrapper>
+            <ZoneSelectInput
+                MenuProps={MenuProps}
+                name='zone'
+                onChange={handleSelectZone}
+                value={selectedZone}
+            >
+                <DropdownItem value='NONE'>
+                    <em>NONE</em>
+                </DropdownItem>
+                {fetchedSelectZones &&
+                    fetchedSelectZones.map((z, ind) => (
+                        <DropdownItem key={ind} value={z}>
+                            {z}
+                        </DropdownItem>
+                    ))}
+            </ZoneSelectInput>
+            {selectedZone !== 'NONE' ? (
+                <ZoneInfoWrapper>
+                    <KeyValueWrapper>
+                        <Key>Цена(час):</Key>
+                        <Value>{zoneInfo.price ?? ''} ден.</Value>
+                    </KeyValueWrapper>
+                    <KeyValueWrapper>
+                        <Key>Работни часови:</Key>
+                        <Value>
+                            {zoneInfo?.from ?? ''} - {zoneInfo?.to ?? ''}
+                        </Value>
+                    </KeyValueWrapper>
+                </ZoneInfoWrapper>
+            ) : null}
+        </Wrapper>
+    );
+};
+
+export default MapUsers;
Index: sources/client/src/components/user/MapUsers/styles.js
===================================================================
--- sources/client/src/components/user/MapUsers/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/MapUsers/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+import { MenuItem, Select } from '@mui/material';
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-height: 100%;
+    max-width: 500px;
+    position: relative;
+`;
+
+export const GoogleMapsWrapper = styled.div`
+    height: 40vh;
+    width: 100%;
+    margin-bottom: 10px;
+    > div {
+        padding: 0;
+        height: 100%;
+        border-radius: 15px;
+    }
+`;
+
+export const ZoneSelectInput = styled(Select).attrs({})`
+    text-align: center;
+    position: relative;
+    width: 49%;
+    color: white;
+    #mui-component-select-zone {
+        font-size: 1.5rem;
+        padding: 16.5px 30px 16.5px 10px;
+        color: white !important;
+        font-size: 1.2rem;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    svg {
+        right: 10px;
+        color: white !important;
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const DropdownItem = styled(MenuItem).attrs({})`
+    justify-content: center;
+    border-top: 1px solid grey;
+    :first-of-type {
+        border: 0;
+    }
+`;
+
+export const FreeParkingSpacesText = styled.p`
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: ${(props) => props.theme.palette.primary.light};
+    margin: 0;
+    top: 5px;
+    position: absolute;
+    margin: auto;
+    z-index: 100;
+`;
+
+export const ZoneInfoWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 80%;
+    margin-top: 20px;
+    color: whiteSmoke;
+`;
+
+export const KeyValueWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const Key = styled.p`
+    margin: 0;
+    margin-bottom: 5px;
+    font-size: 1.25rem;
+`;
+
+export const Value = styled.h3`
+    margin: 0;
+    font-size: 1.375rem;
+    font-weight: 600;
+`;
Index: sources/client/src/components/user/MyProfile/index.js
===================================================================
--- sources/client/src/components/user/MyProfile/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/MyProfile/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,164 @@
+import { useState, useContext, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useUpdateUserProfile from '../../../hooks/useUpdateUserProfile';
+import useGetData from '../../../hooks/useGetData';
+
+import {
+    CredentialsWrapper,
+    Input,
+    LockIcon,
+    PersonIcon,
+    PhoneIcon,
+    EditButton,
+    FullNameWrapper,
+    Wrapper,
+    ButtonsWrapper,
+    SaveButton,
+    CancelButton,
+    LockOpenIcon,
+} from './styles';
+import { IconButton } from '@mui/material';
+
+import { UserContext } from '../../../context/UserContext';
+
+const normalizeProfile = (profile) => ({
+    firstName: profile.firstName,
+    lastName: profile.lastName,
+    email: profile.email,
+    mobile: profile.mobile,
+    plates: profile.plates
+});
+
+const MyProfile = () => {
+    const { user } = useContext(UserContext);
+    const { data: userProfile, isLoading: isUserProfileLoading } = useGetData({
+        url: `/registriranParkirac/${user.id}`,
+    });
+    const [isEditActivated, setIsEditActivated] = useState(false);
+    const { data, onFormChange, setNewData } = useForm(null);
+    const [password, setPassword] = useState('');
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const { updateUserProfile } = useUpdateUserProfile();
+
+    const handleEditButton = () => {
+        setIsEditActivated(true);
+    };
+
+    const handleOnCancel = () => {
+        setIsEditActivated(false);
+        setNewData(normalizeProfile(userProfile));
+        setPassword('');
+    };
+
+    const successfulSave = () => {
+        setIsEditActivated(false);
+        setPassword('');
+    }
+
+    const handleOnSave = () => {
+        const updatedUserData = {
+            ...data,
+            password,
+        };
+        updateUserProfile({
+            userData: updatedUserData,
+            id: user.id,
+            successfulSave,
+        });
+    };
+
+    useEffect(() => {
+        if(!userProfile) return;
+        setNewData(normalizeProfile(userProfile));
+    }, [userProfile]);
+
+    return (
+        <Wrapper>
+            <CredentialsWrapper>
+                <FullNameWrapper>
+                    <Input
+                        disabled={!isEditActivated}
+                        name='firstName'
+                        placeholder='Име'
+                        style={{
+                            width: '49%',
+                        }}
+                        value={data.firstName}
+                        onChange={onFormChange}
+                    />
+                    <Input
+                        disabled={!isEditActivated}
+                        name='lastName'
+                        placeholder='Презиме'
+                        style={{
+                            width: '49%',
+                        }}
+                        value={data.lastName}
+                        onChange={onFormChange}
+                    />
+                </FullNameWrapper>
+                <Input
+                    disabled={!isEditActivated}
+                    name='mobile'
+                    placeholder='Телефонски број'
+                    value={data.mobile}
+                    onChange={onFormChange}
+                    InputProps={{
+                        startAdornment: <PhoneIcon />,
+                    }}
+                />
+                <Input
+                    disabled={!isEditActivated}
+                    name='email'
+                    placeholder='Емаил адреса'
+                    value={data.email}
+                    onChange={onFormChange}
+                    InputProps={{
+                        startAdornment: <PersonIcon />,
+                    }}
+                />
+                <Input
+                    disabled={!isEditActivated}
+                    name='password'
+                    placeholder='Лозинка'
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    InputProps={{
+                        startAdornment: (
+                            <IconButton
+                                style={{ padding: 0 }}
+                                onClick={() =>
+                                    setIsPasswordVisible(
+                                        !isPasswordVisible && isEditActivated
+                                    )
+                                }
+                            >
+                                {isPasswordVisible ? (
+                                    <LockOpenIcon />
+                                ) : (
+                                    <LockIcon />
+                                )}
+                            </IconButton>
+                        ),
+                    }}
+                    type={
+                        isPasswordVisible && isEditActivated
+                            ? 'text'
+                            : 'password'
+                    }
+                />
+            </CredentialsWrapper>
+            {isEditActivated ? (
+                <ButtonsWrapper>
+                    <CancelButton onClick={handleOnCancel}>Откажи</CancelButton>
+                    <SaveButton onClick={handleOnSave}>Сочувај</SaveButton>
+                </ButtonsWrapper>
+            ) : (
+                <EditButton onClick={handleEditButton}>Уреди</EditButton>
+            )}
+        </Wrapper>
+    );
+};
+
+export default MyProfile;
Index: sources/client/src/components/user/MyProfile/mockData.js
===================================================================
--- sources/client/src/components/user/MyProfile/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/MyProfile/mockData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,6 @@
+export const mockProfileData = {
+    firstName: 'Виктор',
+    lastName: 'Тасевски',
+    phoneNumber: '071312312',
+    email: 'viktor-tasevski@hotmail.com'
+};
Index: sources/client/src/components/user/MyProfile/styles.js
===================================================================
--- sources/client/src/components/user/MyProfile/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/MyProfile/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,173 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhoneI from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PersonI from '@mui/icons-material/Person';
+import LockI from '@mui/icons-material/Lock';
+import EditI from '@mui/icons-material/Edit';
+import CancelI from '@mui/icons-material/Cancel';
+import SaveI from '@mui/icons-material/Save';
+import LockOpenI from '@mui/icons-material/LockOpen';
+
+export const Wrapper = styled.div`
+    text-align: center;
+`;
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '20px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white !important;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      opacity: 0.6;
+    }
+    :disabled {
+      -webkit-text-fill-color: white;
+    }
+  }
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white ;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LockI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const LockOpenIcon = styled(LockOpenI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PersonIcon = styled(PersonI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhoneI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+const EditIcon = styled(EditI).attrs({
+    sx: {
+        width: '1.5rem',
+        height: '100%'
+    }
+})``;
+
+const CancelIcon = styled(CancelI).attrs({
+  sx: {
+    width: '1.5rem',
+    height: '100%',
+  },
+})``;
+
+const SaveIcon = styled(SaveI).attrs({
+  sx: {
+    width: '1.5rem',
+    height: '100%',
+  },
+})``;
+
+export const SaveButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    width: '40%',
+    backgroundColor: 'white',
+  },
+  startIcon: <SaveIcon />,
+}))`
+  color: ${(props) => props.theme.palette.primary.main};
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const CancelButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    width: '35%',
+    backgroundColor: 'white',
+  },
+  startIcon: <CancelIcon />,
+}))`
+  color: ${(props) => props.theme.palette.error.main};
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  border-radius: 15px;
+  font-size: 1rem;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const EditButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    startIcon: <EditIcon />,
+    sx: {
+        width: '40%',
+        backgroundColor: 'white',
+    },
+}))`
+    margin-top: 5vh;
+    box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+    color: ${(props) => props.theme.palette.third.main};
+    border-radius: 15px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    :hover {
+        background-color: ${(props) =>
+            props.theme.palette.background.whiteSmoke};
+    }
+`;
+
+export const FullNameWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const ButtonsWrapper = styled.div`
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 25px;
+`;
Index: sources/client/src/components/user/Session/Buttons/index.js
===================================================================
--- sources/client/src/components/user/Session/Buttons/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/Buttons/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,38 @@
+import { sessionStatus } from '../../../../config/enums';
+
+import { RoundWrapper, FuncText, HelperText, PayButton } from './styles';
+
+const RoundButton = ({ text, bgColor, onClick }) => (
+    <RoundWrapper style={{ backgroundColor: bgColor }} onClick={onClick}>
+        <FuncText>{text}</FuncText>
+        <HelperText>Double-Tap</HelperText>
+    </RoundWrapper>
+);
+
+const Buttons = ({ status, handlePayButton, onClick }) => {
+    switch (status) {
+        case null:
+            return (
+                <RoundButton
+                    text='Започни'
+                    bgColor='#01a66f'
+                    onClick={onClick}
+                />
+            );
+        case sessionStatus.idle:
+        case sessionStatus.active:
+            return (
+                <RoundButton
+                    text='Заврши'
+                    bgColor='#d51e00'
+                    onClick={onClick}
+                />
+            );
+        case sessionStatus.over:
+            return <PayButton onClick={handlePayButton}>Плати</PayButton>;
+        default:
+            return null;
+    }
+};
+
+export default Buttons;
Index: sources/client/src/components/user/Session/Buttons/styles.js
===================================================================
--- sources/client/src/components/user/Session/Buttons/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/Buttons/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+
+export const RoundWrapper = styled(Button).attrs({})`
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 1px dashed black;
+    box-shadow: 0 0 7px 3px black;
+    flex-direction: column;
+    color: black;
+    text-align: center;
+`;
+
+export const FuncText = styled.h2`
+    font-style: italic;
+    font-weight: 600;
+    margin: 0;
+    margin-top: 20px;
+`;
+
+export const HelperText = styled.h6`
+    text-decoration: underline;
+    margin: 0;
+    margin-top: 40px;
+`;
+
+export const PayButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `#008080
+        `,
+        width: '200px',
+    },
+}))`
+    font-size: 25px;
+    font-style: italic;
+    box-shadow: 1px 1px 5px 1px black;
+    margin-top: 5vh;
+    :hover {
+        background-color: #007070;
+    }
+`;
Index: sources/client/src/components/user/Session/SessionGuest/index.js
===================================================================
--- sources/client/src/components/user/Session/SessionGuest/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/SessionGuest/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,100 @@
+import { useContext, useEffect } from 'react';
+import {
+    SessionInfo,
+    Input,
+    PersonIcon,
+    PhoneIcon,
+    PlateAndZoneWrapper,
+    ZoneSelectInput,
+    DropdownItem,
+} from './styles';
+
+import { sessionStatus as enumsSessionStatus } from '../../../../config/enums';
+import useGetData from '../../../../hooks/useGetData';
+import { UserContext } from '../../../../context/UserContext';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            height: 150,
+            width: '35px',
+        },
+    },
+};
+
+const SessionGuest = ({
+    sessionStatus,
+    sessionInfo,
+    zones,
+    data,
+    onFormChange,
+    setNewData,
+}) => {
+    const { user } = useContext(UserContext);
+    const { data: guest, isLoading: isGuestLoading } = useGetData({
+        url: `/guest/${user.id}`,
+    });
+
+    useEffect(() => {
+        if (!guest) return;
+        setNewData({ plate: guest.plate.plate, zone: data.zone });
+    }, [guest]);
+    console.log(sessionStatus);
+    return (
+        !isGuestLoading && <SessionInfo>
+            <Input
+                disabled
+                name='mobile'
+                placeholder='Телефонски број'
+                value={guest.mobile}
+                InputProps={{
+                    startAdornment: <PhoneIcon />,
+                }}
+            />
+            <Input
+                disabled
+                name='email'
+                placeholder='Емаил адреса'
+                value={guest.email}
+                InputProps={{
+                    startAdornment: <PersonIcon />,
+                }}
+            />
+            <PlateAndZoneWrapper>
+                <Input
+                    disabled
+                    name='plate'
+                    placeholder='Таблица...'
+                    style={{
+                        width: '49%',
+                        textAlign: 'center',
+                    }}
+                    value={guest.plate.plate}
+                />
+                <ZoneSelectInput
+                    MenuProps={MenuProps}
+                    name='zone'
+                    onChange={onFormChange}
+                    value={data.zone}
+                    inputProps={{
+                        readOnly:
+                            sessionStatus !== null
+                                
+                    }}
+                    $show={sessionStatus === null}
+                >
+                    <DropdownItem value='NONE'>
+                        <em>NONE</em>
+                    </DropdownItem>
+                    {zones.map((z, ind) => (
+                        <DropdownItem key={ind} value={z}>
+                            {z}
+                        </DropdownItem>
+                    ))}
+                </ZoneSelectInput>
+            </PlateAndZoneWrapper>
+        </SessionInfo>
+    );
+};
+
+export default SessionGuest;
Index: sources/client/src/components/user/Session/SessionGuest/styles.js
===================================================================
--- sources/client/src/components/user/Session/SessionGuest/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/SessionGuest/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+import TextField from '@mui/material/TextField';
+import PhoneI from '@mui/icons-material/Phone';
+import PersonI from '@mui/icons-material/Person';
+import { MenuItem, Select } from '@mui/material';
+
+export const SessionInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+    fullWidth: true,
+    sx: {
+        marginTop: '20px',
+    },
+})`
+    > div {
+        padding-left: 10px;
+    }
+    input {
+        color: white !important;
+        font-size: 1.2rem;
+        padding-left: 10px;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PersonIcon = styled(PersonI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PhoneIcon = styled(PhoneI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PlateAndZoneWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+`;
+
+export const ZoneSelectInput = styled(Select).attrs({})`
+    text-align: center;
+    position: relative;
+    width: 49%;
+    #mui-component-select-zone {
+        font-size: 1.5rem;
+        padding: 25px 30px 0 15px;
+        color: white !important;
+        font-size: 1.2rem;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    svg {
+        top: 40px;
+        right: 10px;
+        color: white !important;
+        display: ${(props) => (!props.$show ? 'none' : '')};
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const DropdownItem = styled(MenuItem).attrs({})`
+    justify-content: center;
+    border-top: 1px solid grey;
+    :first-of-type {
+        border: 0;
+    }
+`;
Index: sources/client/src/components/user/Session/SessionUser/index.js
===================================================================
--- sources/client/src/components/user/Session/SessionUser/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/SessionUser/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import {
+    SessionInfo,
+    PlateSelectInput,
+    PlateAndAddPlateBtnWrapper,
+    ZoneSelectInput,
+    DropdownItem,
+    AddIcon,
+    AddPlate,
+    Input,
+    SavePlate,
+    SaveIcon,
+    PlateDropdownItem,
+    RemoveIcon,
+} from './styles';
+
+import { sessionStatus as enumsSessionStatus } from '../../../../config/enums';
+import useForm from '../../../../hooks/useForm';
+import useSaveUserPlate from '../../../../hooks/useSaveUserPlate';
+import useDeleteUserPlate from '../../../../hooks/useDeleteUserPlate';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+import { IconButton } from '@mui/material';
+import useGetData from '../../../../hooks/useGetData';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 150,
+            width: '35px',
+        },
+    },
+};
+
+const SessionUser = ({
+    sessionStatus,
+    zones,
+    data,
+    onFormChange,
+    setNewData,
+}) => {
+    const { data: plates, isLoading: isLoadingPlates, setData: setPlates } = useGetData({
+        url: '/registiranParkirac/tablici',
+    });
+    const [newPlate, setNewPlate] = useState('');
+    const [toggleAddPlate, setToggleAddPlate] = useState(false);
+    const { saveUserPlate } = useSaveUserPlate();
+    const { deleteUserPlate } = useDeleteUserPlate();
+    const [isLoadingSavePlate, setIsLoadingSavePlate] = useState(false);
+    const [isLoadingDeletePlate, setIsLoadingDeletePlate] = useState({
+        state: false,
+        itemInd: null,
+    });
+    const savePlate = (plate) => {
+        setPlates(prevState => [...prevState, plate]);
+        setToggleAddPlate(false);
+        setNewData({ ...data, plate: newPlate });
+        setNewPlate('');
+    };
+
+    const handleSavePlate = () => {
+        saveUserPlate({
+            savePlate,
+            plate: newPlate,
+            setIsLoadingSavePlate,
+        });
+    };
+
+    const deletePlate = (plate) => {
+        let index = plates.indexOf(plate);
+        let _plates = [...plates];
+        _plates.splice(index, 1);
+        if (_plates.length > index) {
+            setNewData({ ...data, plate: _plates[index] });
+        } else {
+            index--;
+            if (_plates.length !== 0) {
+                setNewData({
+                    ...data,
+                    plate: _plates[_plates.length - 1],
+                });
+            } else {
+                setNewData({ ...data, plate: 'NONE' });
+            }
+        }
+        setPlates(_plates);
+    };
+
+    const handleDeletePlate = (e, plate) => {
+        e.stopPropagation();
+        let ind = plates.indexOf(plate);
+        deleteUserPlate({ deletePlate, plate, ind, setIsLoadingDeletePlate });
+    };
+
+    return (
+        <SessionInfo>
+            <PlateAndAddPlateBtnWrapper
+                center={sessionStatus !== null}
+            >
+                {!toggleAddPlate ? (
+                    <PlateSelectInput
+                        MenuProps={MenuProps}
+                        name='plate'
+                        onChange={onFormChange}
+                        value={data.plate}
+                        renderValue={(v) => v}
+                        inputProps={{
+                            readOnly:
+                                sessionStatus === null
+                                    ? false
+                                    : true,
+                        }}
+                        $show={sessionStatus === null}
+                    >
+                        <DropdownItem value='NONE'>
+                            <em>NONE</em>
+                        </DropdownItem>
+                        {!isLoadingPlates &&
+                            plates.map((p, ind) => (
+                                <PlateDropdownItem key={ind} value={p}>
+                                    {p}
+                                    {isLoadingDeletePlate.state &&
+                                    isLoadingDeletePlate.itemInd === ind ? (
+                                        <AbsoluteLoader
+                                            containerStyle={{
+                                                width: '41.19px',
+                                                height: '41.19px',
+                                            }}
+                                        />
+                                    ) : (
+                                        <IconButton
+                                            style={{
+                                                padding: '3px',
+                                                zIndex: 100,
+                                            }}
+                                            onClick={(e) =>
+                                                handleDeletePlate(e, p, ind)
+                                            }
+                                        >
+                                            <RemoveIcon />
+                                        </IconButton>
+                                    )}
+                                </PlateDropdownItem>
+                            ))}
+                    </PlateSelectInput>
+                ) : (
+                    <Input
+                        autoFocus
+                        disabled={
+                            sessionStatus === null
+                                ? false
+                                : true
+                        }
+                        name='newPlate'
+                        style={{
+                            width: '49%',
+                            textAlign: 'center',
+                        }}
+                        value={newPlate}
+                        onChange={(e) => setNewPlate(e.target.value)}
+                    />
+                )}
+                {sessionStatus === null ? (
+                    !toggleAddPlate ? (
+                        <AddPlate onClick={() => setToggleAddPlate(true)}>
+                            <AddIcon />
+                            таблица
+                        </AddPlate>
+                    ) : isLoadingSavePlate ? (
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '59.44px',
+                                height: '59.44px',
+                                margin: 'auto',
+                            }}
+                        />
+                    ) : (
+                        <SavePlate onClick={handleSavePlate}>
+                            <SaveIcon />
+                            сочувај
+                        </SavePlate>
+                    )
+                ) : null}
+            </PlateAndAddPlateBtnWrapper>
+            <ZoneSelectInput
+                MenuProps={MenuProps}
+                name='zone'
+                onChange={onFormChange}
+                value={data.zone}
+                inputProps={{
+                    readOnly:
+                        sessionStatus === null
+                            ? false
+                            : true,
+                }}
+                $show={sessionStatus === null}
+            >
+                <DropdownItem value='NONE'>
+                    <em>NONE</em>
+                </DropdownItem>
+                {zones.map((z, ind) => (
+                    <DropdownItem key={ind} value={z}>
+                        {z}
+                    </DropdownItem>
+                ))}
+            </ZoneSelectInput>
+        </SessionInfo>
+    );
+};
+
+export default SessionUser;
Index: sources/client/src/components/user/Session/SessionUser/styles.js
===================================================================
--- sources/client/src/components/user/Session/SessionUser/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/SessionUser/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,162 @@
+import styled from 'styled-components';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import SaveI from '@mui/icons-material/Save';
+import { MenuItem, Select } from '@mui/material';
+
+export const SessionInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5vh 25px 15px 25px;
+    margin-bottom: 6.5vh;
+`;
+
+export const Input = styled(TextField).attrs({
+    fullWidth: true,
+})`
+    height: 59.44px;
+    input {
+        text-align: center;
+        color: white !important;
+        font-size: 1.2rem;
+        padding-left: 10px;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PlateAndAddPlateBtnWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: ${(props) => (props.center ? 'center' : 'space-between')};
+    align-items: flex-end;
+    width: 100%;
+    margin-bottom: 5vh;
+    .MuiCircularProgress-svg {
+        color: ${(props) => props.theme.palette.third.main};
+    }
+`;
+
+export const ZoneSelectInput = styled(Select).attrs({})`
+    text-align: center;
+    position: relative;
+    width: 49%;
+    color: white;
+    #mui-component-select-zone {
+        font-size: 1.5rem;
+        padding: 16.5px 30px 16.5px 10px;
+        color: white !important;
+        font-size: 1.2rem;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    svg {
+        right: 10px;
+        color: white !important;
+        display: ${(props) => (!props.$show ? 'none' : '')};
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PlateSelectInput = styled(ZoneSelectInput)`
+    color: white;
+    font-weight: 500;
+    font-size: 1.15rem;
+`;
+
+export const DropdownItem = styled(MenuItem).attrs({})`
+    justify-content: center;
+    border-top: 1px solid grey;
+    :first-of-type {
+        border: 0;
+    }
+`;
+
+export const PlateDropdownItem = styled(MenuItem).attrs({})`
+    justify-content: space-between;
+    border-top: 1px solid grey;
+    padding-right: 5px;
+    padding-left: 10px;
+    :first-of-type {
+        border: 0;
+    }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon).attrs({
+    sx: {
+        fontSize: '2.5rem',
+    },
+})`
+    margin-right: 11px;
+`;
+
+export const RemoveIcon = styled(RemoveCircleIcon).attrs({
+    sx: {
+        fontSize: '2.2rem',
+        color: 'red',
+    },
+})``;
+
+export const SaveIcon = styled(SaveI).attrs({
+    sx: {
+        fontSize: '2.5rem',
+    },
+})`
+    margin-right: 11px;
+`;
+
+export const AddPlate = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'small',
+    sx: {
+        backgroundColor: `whiteSmoke`,
+        color: `${props.theme.palette.primary.main}`,
+        fontWeight: 600,
+        fontSize: 16,
+        height: 59.44,
+    },
+}))`
+    :hover {
+        background-color: #dcdcdc;
+    }
+`;
+
+export const SavePlate = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'small',
+    sx: {
+        backgroundColor: `whiteSmoke`,
+        color: `${props.theme.palette.third.main}`,
+        fontWeight: 600,
+        fontSize: 16,
+        height: 59.44,
+    },
+}))`
+    :hover {
+        background-color: #dcdcdc;
+    }
+`;
Index: sources/client/src/components/user/Session/index.js
===================================================================
--- sources/client/src/components/user/Session/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,386 @@
+import { useState, useEffect, useContext, useRef, useMemo } from 'react';
+import moment from 'moment';
+
+import SessionGuest from './SessionGuest';
+import SessionUser from './SessionUser';
+import Buttons from './Buttons';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+import { IconButton, Slide } from '@mui/material';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import {
+    Wrapper,
+    ButtonWrapper,
+    ModalContainer,
+    CloseIcon,
+    KeyValueWrapper,
+    Key,
+    Value,
+    PaymentMethodWrapper,
+    PayWithText,
+    PaymentMethodsWrapper,
+    PayButtonWrapper,
+    ModalPayButton,
+    CardDetails,
+    DateAndCCVWrapper,
+    ModalInput,
+    CreditCard,
+    ModalInputCardNumber,
+} from './styles';
+import Modal from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+
+import {
+    roles,
+    sessionStatus as enumsSessionStatus,
+} from '../../../config/enums';
+import theme from '../../../theme';
+import { UserContext } from '../../../context/UserContext';
+import useUserStartSession from '../../../hooks/useUserStartSession';
+import useForm from '../../../hooks/useForm';
+import useUserFinishedSession from '../../../hooks/useUserFinishedSession';
+import useUserPayForSession from '../../../hooks/useUserPayForSession';
+import useGetSessionOverInfo from '../../../hooks/useGetSessionOverInfo';
+import useGetData from '../../../hooks/useGetData';
+
+import { convertMinutesToString } from '../../../utils/convertMinToString';
+
+const normalizeSesionData = session => ({
+    plate: session?.plate?.plate ?? '',
+    zone: session?.parkingZone?.pzName ?? ''
+});
+
+const defaultTime = 15000;
+const Session = () => {
+    // const [timer, setTimer] = useState(10000);
+    // let timer = 10000;
+    // const timerInterval = setInterval(() => {
+    //     console.log('VIKTOR', timer);
+    //     // setTimer(defaultTime);
+    //     timer = 15000;
+    // }, timer);
+    // useEffect(() => {
+    //     return () => {
+    //         clearInterval(timerInterval);
+    //     }
+    // })
+    const { data: fetchedSelectZones, isLoading: isLoadingSelectZones } =
+        useGetData({ url: '/parkingZone/parkingZoneNames' });
+    const { user } = useContext(UserContext);
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [paymentMethod, setPaymentMethod] = useState('');
+    const [cardNumber, setCardNumber] = useState('');
+    const [cardExpDate, setCardExpDate] = useState('');
+    const [cardCCV, setCardCCV] = useState('');
+    const { data: session, isLoading: isLoadingSession, setData: setSession } = useGetData({
+        url: '/parkingSession',
+    });
+    console.log('SESSION', session);
+    const {
+        data: userSessionInfo,
+        onFormChange: onFormChangeUserSessionInfo,
+        setNewData: setNewUserSessionData,
+    } = useForm({
+        plate: 'NONE',
+        zone: 'NONE',
+    });
+    const { userFinishedSession } = useUserFinishedSession();
+    const timerRef = useRef(0);
+    const { userStartSession } = useUserStartSession();
+    const { userPayForSession, isLoading: isLoadingPayForSession } =
+        useUserPayForSession();
+    const {
+        getSessionInfoOver,
+        isLoading: isLoadingSessionInfoOver,
+        totalPrice,
+    } = useGetSessionOverInfo();
+    const cardNumberHandler = (e) => {
+        const newVal = e.target.value.replace(/\s+/g, '');
+        let parts = [];
+        for (let i = 0; i < newVal.length; i += 4) {
+            parts.push(newVal.substring(i, i + 4));
+        }
+        console.log(parts);
+        if (parts.length) {
+            setCardNumber(parts.join(' '));
+        } else {
+            setCardNumber(newVal);
+        }
+    };
+
+    const cardExpDateHandler = (e) => {
+        const newVal = e.target.value.replace(/[^0-9]/, '');
+        let first = newVal.substring(0, 2);
+        let second = newVal.substring(2, 4);
+        if (second !== '') {
+            setCardExpDate([first, second].join('/'));
+        } else {
+            setCardExpDate(newVal);
+        }
+    };
+
+    const handleStartSession = () => {
+        userStartSession({ sessionData: userSessionInfo, setSession });
+    };
+
+    const handleEndSession = () => {
+        userFinishedSession({ setSession });
+    };
+
+    const handlePayForSession = () => {
+        if (paymentMethod) {
+            if (
+                paymentMethod === 'card' &&
+                (cardNumber === '' || cardCCV === '' || cardExpDate === '')
+            ) {
+                return;
+            }
+            let paymentCredentials = null;
+            if (paymentMethod === 'card') {
+                paymentCredentials = {
+                    cardNumber: cardNumber,
+                    cardExpDate: cardExpDate,
+                    cardCCV: cardCCV,
+                };
+            }
+            userPayForSession({
+                method: paymentMethod,
+                paymentCredentials,
+            });
+        }
+    };
+
+    const checkForDoubleClick = (e) => {
+        timerRef.current++;
+        setTimeout(() => {
+            if (timerRef.current !== 0) {
+                timerRef.current = 0;
+            }
+        }, 500);
+        if (timerRef.current >= 2) {
+            timerRef.current = 0;
+            if (!session) {
+                handleStartSession();
+            } else if (
+                session.status === enumsSessionStatus.active ||
+                session.status === enumsSessionStatus.idle
+            ) {
+                handleEndSession();
+            }
+        }
+    };
+
+    const handlePayButton = () => {
+        setModalOpen(true);
+        if (totalPrice) return; // don't send request if they are already set
+        getSessionInfoOver();
+    };
+
+    useEffect(() => {
+        if(session) {
+            setNewUserSessionData(normalizeSesionData(session));
+        }
+    }, [session])
+
+    const totalTime = useMemo(() => {
+        if(session?.timeEnd && session?.timeStart) {
+            const start = moment(session.timeStart);
+            const end = moment(session.timeEnd);
+            const diffMin = Math.round(end.diff(start) / 60000);
+            return convertMinutesToString(diffMin);
+        }
+        return null;
+    }, [session])
+
+    return (
+        <>
+            <Modal
+                open={isModalOpen}
+                onClose={() => {
+                    setModalOpen(false);
+                }}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Slide in={isModalOpen}>
+                    <ModalContainer>
+                        <IconButton
+                            style={{
+                                marginLeft: 295,
+                            }}
+                            onClick={() => {
+                                setModalOpen(false);
+                            }}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                        {isLoadingSessionInfoOver ? ( // TODO FETCH SESSION DATA
+                            <AbsoluteLoader
+                                containerStyle={{
+                                    width: '200px',
+                                    height: '200px',
+                                    margin: 'auto',
+                                    marginTop: '50px',
+                                }}
+                            />
+                        ) : (
+                            <>
+                                <KeyValueWrapper>
+                                    <Key>Време:</Key>
+                                    <Value>{totalTime}</Value>
+                                </KeyValueWrapper>
+                                <KeyValueWrapper>
+                                    <Key>Вкупна сума:</Key>
+                                    <Value>{totalPrice} ден.</Value>
+                                </KeyValueWrapper>
+                                <PaymentMethodWrapper>
+                                    <PayWithText>Плати со:</PayWithText>
+                                    <PaymentMethodsWrapper>
+                                        <RadioGroup
+                                            aria-label='payment-methods'
+                                            name='payment-method'
+                                            value={paymentMethod}
+                                            onChange={(e) =>
+                                                setPaymentMethod(e.target.value)
+                                            }
+                                        >
+                                            <FormControlLabel
+                                                value='mobile'
+                                                control={
+                                                    <Radio
+                                                        sx={{
+                                                            color: theme.palette
+                                                                .primary.main,
+                                                            '&.Mui-checked': {
+                                                                color: theme
+                                                                    .palette
+                                                                    .primary
+                                                                    .main,
+                                                            },
+                                                        }}
+                                                    />
+                                                }
+                                                label='Мобилен'
+                                                labelPlacement='start'
+                                            />
+                                            <FormControlLabel
+                                                value='card'
+                                                control={
+                                                    <Radio
+                                                        sx={{
+                                                            color: theme.palette
+                                                                .primary.main,
+                                                            '&.Mui-checked': {
+                                                                color: theme
+                                                                    .palette
+                                                                    .primary
+                                                                    .main,
+                                                            },
+                                                        }}
+                                                    />
+                                                }
+                                                label='Картичка'
+                                                labelPlacement='start'
+                                            />
+                                        </RadioGroup>
+                                    </PaymentMethodsWrapper>
+                                </PaymentMethodWrapper>
+                                {paymentMethod === 'card' ? (
+                                    <CardDetails>
+                                        <ModalInputCardNumber
+                                            InputProps={{
+                                                startAdornment: <CreditCard />,
+                                            }}
+                                            onChange={cardNumberHandler}
+                                            value={cardNumber}
+                                        />
+                                        <DateAndCCVWrapper>
+                                            <ModalInput
+                                                InputProps={{
+                                                    placeholder: 'Exp: 11/21',
+                                                }}
+                                                style={{
+                                                    width: '45%',
+                                                }}
+                                                onChange={cardExpDateHandler}
+                                                value={cardExpDate}
+                                            />
+                                            <ModalInput
+                                                InputProps={{
+                                                    placeholder: 'CCV',
+                                                }}
+                                                style={{ width: '35%' }}
+                                                value={cardCCV}
+                                                onChange={(e) =>
+                                                    setCardCCV(e.target.value)
+                                                }
+                                            />
+                                        </DateAndCCVWrapper>
+                                    </CardDetails>
+                                ) : null}
+                                <PayButtonWrapper>
+                                    {isLoadingPayForSession ? (
+                                        <AbsoluteLoader
+                                            containerStyle={{
+                                                width: '51px',
+                                                height: '51px',
+                                                margin: 'auto',
+                                            }}
+                                        />
+                                    ) : (
+                                        <ModalPayButton
+                                            onClick={handlePayForSession}
+                                        >
+                                            Плати
+                                        </ModalPayButton>
+                                    )}
+                                </PayButtonWrapper>
+                            </>
+                        )}
+                    </ModalContainer>
+                </Slide>
+            </Modal>
+            {!isLoadingSession && (
+                <Wrapper>
+                    {user.role === roles.user ? (
+                        <SessionUser
+                            sessionStatus={session?.status ?? null}
+                            sessionInfo={normalizeSesionData(session)}
+                            zones={fetchedSelectZones ?? []}
+                            data={userSessionInfo}
+                            onFormChange={onFormChangeUserSessionInfo}
+                            setNewData={setNewUserSessionData}
+                        />
+                    ) : (
+                        <SessionGuest
+                            sessionStatus={session?.status ?? null}
+                            sessionInfo={normalizeSesionData(session)}
+                            zones={fetchedSelectZones ?? []}
+                            data={userSessionInfo}
+                            onFormChange={onFormChangeUserSessionInfo}
+                            setNewData={setNewUserSessionData}
+                        />
+                    )}
+                    <ButtonWrapper>
+                        <Buttons
+                            status={session?.status ?? null}
+                            handlePayButton={handlePayButton}
+                            onClick={checkForDoubleClick}
+                        />
+                    </ButtonWrapper>
+                </Wrapper>
+            )}
+        </>
+    );
+};
+
+export default Session;
Index: sources/client/src/components/user/Session/styles.js
===================================================================
--- sources/client/src/components/user/Session/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/components/user/Session/styles.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,170 @@
+import styled from 'styled-components';
+import CIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import { Button, TextField } from '@mui/material';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100%;
+    max-width: 500px;
+    border-radius: 10px;
+    position: relative;
+`;
+
+export const ButtonWrapper = styled.div`
+    bottom: 0;
+    margin: auto;
+    margin-top: 5vh;
+`;
+
+export const ModalContainer = styled(Box).attrs({
+    width: 350,
+    minHeight: 421,
+    bgcolor: '#2b7878fa',
+    boxShadow: 24,
+    zIndex: 100,
+    marginBottom: '10%',
+    color: 'whiteSmoke',
+})`
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    position: relative;
+`;
+
+export const CloseIcon = styled(CIcon).attrs({
+    sx: {
+        color: 'red',
+        fontSize: '2.5rem',
+    },
+})``;
+
+export const KeyValueWrapper = styled.div`
+    text-align: center;
+    margin-bottom: 20px;
+`;
+
+export const Key = styled.p`
+    margin: 0;
+    margin-bottom: 10px;
+    font-size: 1.15rem;
+`;
+
+export const Value = styled.p`
+    margin: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+`;
+
+export const PaymentMethodWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+`;
+
+export const PayWithText = styled.p`
+    margin: 0;
+    display: inline-block;
+    font-size: 1.15rem;
+    margin-right: 40px;
+`;
+
+export const PaymentMethodsWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    span {
+        font-size: 1.15rem;
+        font-weight: 600;
+    }
+`;
+
+export const PayButtonWrapper = styled.div`
+    width: 100%;
+    text-align: center;
+    margin-top: 50px;
+`;
+
+export const ModalPayButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `${props.theme.palette.primary.main}`,
+        fontSize: '1.25rem',
+    },
+}))`
+    :hover {
+        background-color: ${(props) => props.theme.palette.primary.dark};
+    }
+`;
+
+export const CardDetails = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0 30px;
+`;
+
+export const DateAndCCVWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    padding-right: 5%;
+`;
+
+export const ModalInput = styled(TextField).attrs({
+    fullWidth: true,
+    sx: {
+        marginTop: '10px',
+        padding: 0,
+    },
+})`
+    input {
+        text-align: center;
+        font-size: 1.15rem;
+        font-weight: 500;
+        border: 2px solid ${(props) => props.theme.palette.primary.main};
+        border-radius: 10px;
+        width: 100%;
+        color: whiteSmoke;
+        :focus {
+            border: 2px dashed ${(props) => props.theme.palette.primary.main};
+        }
+        ::placeholder {
+            opacity: 0.6;
+        }
+    }
+    > div {
+        padding: 0;
+    }
+    fieldset,
+    .Mui-focused {
+        border: 0;
+    }
+`;
+
+export const ModalInputCardNumber = styled(ModalInput)`
+    input {
+        padding-left: 42px;
+    }
+    fieldset {
+        position: relative;
+    }
+`;
+
+export const CreditCard = styled(CreditCardIcon).attrs((props) => ({
+    sx: {
+        fontSize: '2rem',
+        color: `${props.theme.palette.primary.main}`,
+        position: 'absolute',
+        marginLeft: '10px',
+    },
+}))``;
Index: sources/client/src/config/defaultUser.js
===================================================================
--- sources/client/src/config/defaultUser.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/config/defaultUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -4,7 +4,7 @@
     firstName: '',
     lastName: '',
-    zone: 'none',
-    phoneNumber: '',
-    status: 'notWorking',
-    accountActive: false
+    parkingZones: ['NONE'],
+    mobile: '',
+    status: 'NOT_WORKING',
+    locked: true,
 };
Index: sources/client/src/config/enums.js
===================================================================
--- sources/client/src/config/enums.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/config/enums.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,22 +1,24 @@
 export const employeeStatus = {
-  notWorking: 'Не работи',
-  working: 'Работи',
-  vacation: 'На одмор',
+    NOT_WORKING: 'Не работи',
+    WORKING: 'Работи',
+    VACATION: 'На одмор',
+    PAID_LEAVE: 'На боледување',
 };
 
 export const accountStatus = {
-  enabled: 'Активен',
-  disabled: 'Неактивен',
+    enabled: 'Активен',
+    disabled: 'Неактивен',
 };
 
 export const sessionStatus = {
-  active: 'active',
-  idle: 'idle',
-  over: 'over',
+    idle: 'STARTED_UNVERIFIED',
+    active: 'STARTED_VERIFIED',
+    over: 'ENDED_UNPAID',
 };
 
 export const roles = {
-  user: 'ROLE_USER',
-  employee: 'ROLE_EMPLOYEE',
-  admin: 'ROLE_ADMIN',
+    user: 'ROLE_REG_USER', 
+    guest: 'ROLE_USER',
+    employee: 'ROLE_WORKER',
+    admin: 'ROLE_ADMIN',
 };
Index: sources/client/src/config/utilities.js
===================================================================
--- sources/client/src/config/utilities.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/config/utilities.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,4 @@
+export const mobile_max_width = 480; // px
+
+export const dateFormatString = 'HH:mm - DD.MM.YYYY';
+
Index: sources/client/src/context/AccessoriesContext.js
===================================================================
--- sources/client/src/context/AccessoriesContext.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/context/AccessoriesContext.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AccessoriesContext = createContext(null);
Index: sources/client/src/context/UserContext.js
===================================================================
--- sources/client/src/context/UserContext.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/context/UserContext.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
Index: sources/client/src/hooks/useActivateSession.js
===================================================================
--- sources/client/src/hooks/useActivateSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useActivateSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,43 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useActivateSession = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+
+  const activateSession = async ({
+    pssId,
+    parkingSpaceName,
+    onActivateSession,
+  }) => {
+    setIsLoading(true);
+    axios
+        .put(
+            `/parkingSession/verify/${pssId}?parkingSpaceName=${parkingSpaceName}`)
+        .then((res) => {
+            // res.data is the new updated active zone
+            setAlert({
+                type: 'success',
+                msg: 'Сесијата е успешно активирана!',
+            });
+            onActivateSession({ updatedSession:res.data });
+        })
+        .catch((err) => {
+          console.log(err);
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!',
+            });
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+  return {
+    activateSession,
+    isLoading,
+  };
+};
+
+export default useActivateSession;
Index: sources/client/src/hooks/useCreateEmployee.js
===================================================================
--- sources/client/src/hooks/useCreateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useCreateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useCreateEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const createEmployee = async ({ employee }) => {
+        setIsBackdropLoaderOpen(true);
+        console.log(employee);
+        await axios
+            .post(`/vraboten`, employee) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот ${employee.firstName} ${employee.lastName} е успешно креирана!`,
+                });
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        createEmployee,
+    };
+};
+
+export default useCreateEmployee;
Index: sources/client/src/hooks/useCreateZone.js
===================================================================
--- sources/client/src/hooks/useCreateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useCreateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,47 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useCreateZone = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+
+    const createZone = async ({
+        zoneName,
+        setModalInput,
+        setModalOpen,
+        addNewZoneToData,
+    }) => {
+        setIsLoading(true);
+        await axios
+            .post(`/parkingZoneName`, zoneName)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Зоната ${zoneName} е успешно креирана!`,
+                });
+                setModalOpen(false);
+                setModalInput('');
+                console.log(res.data);
+                addNewZoneToData({ ...res.data });
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        createZone,
+        isLoading,
+    };
+};
+
+export default useCreateZone;
Index: sources/client/src/hooks/useDeleteEmployee.js
===================================================================
--- sources/client/src/hooks/useDeleteEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useDeleteEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const deleteEmployee = async ({ id }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .delete(`/vraboten/${id}`)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот е успешно избришан!`,
+                });
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                console.log(err);
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        deleteEmployee,
+    };
+};
+
+export default useDeleteEmployee;
Index: sources/client/src/hooks/useDeleteSession.js
===================================================================
--- sources/client/src/hooks/useDeleteSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useDeleteSession = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+
+  const deleteSession = async ({ pssId, onDeleteSession }) => {
+    setIsLoading(true);
+    await axios
+        .delete(`/parkingSession/${pssId}`) 
+        .then((res) => {
+            setAlert({
+                type: 'success',
+                msg: `Сесијата е успешно избришана!`, //
+            });
+
+            onDeleteSession({ pssId });
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+            console.log(err);
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+
+  return {
+    deleteSession,
+    isLoading,
+  };
+};
+
+export default useDeleteSession;
Index: sources/client/src/hooks/useDeleteUserPlate.js
===================================================================
--- sources/client/src/hooks/useDeleteUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useDeleteUserPlate = () => {
+    const { user } = useContext(UserContext);
+    const { setAlert } = useContext(AccessoriesContext);
+    const deleteUserPlate = async ({
+        deletePlate,
+        plate,
+        ind,
+        setIsLoadingDeletePlate,
+    }) => {
+        setIsLoadingDeletePlate({ state: true, itemInd: ind });
+        await axios
+            .delete(`/registriranParkirac/${user.id}/tablici/${plate}`) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Таблицата е успешно избришана!`, // TODO Change MSG
+                });
+                deletePlate(plate); // or res.plate
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoadingDeletePlate({ state: false, itemInd: null });
+            });
+    };
+
+    return {
+        deleteUserPlate,
+    };
+};
+
+export default useDeleteUserPlate;
Index: sources/client/src/hooks/useDeleteZone.js
===================================================================
--- sources/client/src/hooks/useDeleteZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useDeleteZone = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+  const history = useHistory();
+  const deleteZone = async ({ id }) => {
+    setIsLoading(true);
+    await axios
+      .delete(`/parkingZone/${id}`) // TODO CHANGE OBJECT
+      .then((res) => {
+        setAlert({
+          type: 'success',
+          msg: `Зоната е успешно избришана!`, // TODO Change MSG - add the first and last name of the deleted emoloyee
+        });
+        history.push('/');
+      })
+      .catch((err) => {
+        // ALERT FOR ERROR WITH ERROR MSG
+        setAlert({
+          type: 'error',
+          msg: 'Проблеми со серверот!', // TODO change msg to err.message
+        });
+        console.log(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return {
+    deleteZone,
+    isLoading,
+  };
+};
+
+export default useDeleteZone;
Index: sources/client/src/hooks/useFindUser.js
===================================================================
--- sources/client/src/hooks/useFindUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useFindUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,74 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import jwt from 'jwt-decode';
+
+const useFindUser = ({ setAlert }) => {
+    const [user, setUser] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const location = useLocation();
+    const findUser = async () => {
+        let token = localStorage.getItem('token');
+        try {
+            if (!token) throw Error();
+            token = JSON.parse(token);
+        } catch (err) {
+            if (
+                location.state === undefined &&
+                location.pathname !== '/' &&
+                location.pathname !== '/login-guest' &&
+                location.pathname !== '/login' &&
+                location.pathname !== '/register'
+            ) {
+                setAlert({
+                    type: 'error',
+                    msg: 'Не Сте Логирани!', // TODO change msg to err.message
+                });
+            }
+            setIsLoading(false);
+            return;
+        }
+        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        
+        await axios
+            .get(`/testToken`)
+            .then((res) => {
+                if(res.status !== 200) throw new Error('Invalid token!');
+                const user = jwt(token);
+                setUser({
+                    firstName: user.fullName.split(' ')[0] ?? '',
+                    lastName: user.fullName.split(' ')[1] ?? '',
+                    role: user.roles[0] ?? '',
+                    id: user.id,
+                });
+            })
+            .catch((err) => {
+                localStorage.clear();
+                if (
+                    location.state === undefined &&
+                    location.pathname !== '/' &&
+                    location.pathname !== '/login-guest' &&
+                    location.pathname !== '/register'
+                ) {
+                    setAlert({
+                        type: 'error',
+                        msg: 'Не Сте Логирани!', // TODO change msg to err.message
+                    });
+                }
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    useEffect(() => {
+        findUser();
+    }, []);
+
+    return {
+        user,
+        setUser,
+        isLoading,
+    };
+};
+
+export default useFindUser;
Index: sources/client/src/hooks/useForm.js
===================================================================
--- sources/client/src/hooks/useForm.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/hooks/useForm.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -10,8 +10,11 @@
     });
   };
-
+  const setNewData = (newData) => {
+    setData({...newData});
+  }
   return {
     data,
     onFormChange,
+    setNewData
   };
 };
Index: sources/client/src/hooks/useGetData.js
===================================================================
--- sources/client/src/hooks/useGetData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,38 @@
+import { useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useGetData = ({ url }) => {
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const { setAlert } = useContext(AccessoriesContext);
+    const fetchData = async () => {
+        await axios
+            .get(url)
+            .then((res) => {
+                setData(res.data);
+                console.log(res.data);
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    useEffect(() => {
+        fetchData();
+    }, []);
+    return {
+        data,
+        setData,
+        isLoading,
+        fetchData
+    };
+};
+
+export default useGetData;
Index: sources/client/src/hooks/useGetSessionOverInfo.js
===================================================================
--- sources/client/src/hooks/useGetSessionOverInfo.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetSessionOverInfo.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+const useGetSessionOverInfo = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [totalPrice, setTotalPrice] = useState(null);
+
+    const getSessionInfoOver = async () => {
+        setIsLoading(true);
+        await axios
+            .get(`/parkingSession/end/calculate`)
+            .then((res) => {
+                // setTimeAndSessionPrice({totalTime: res.data.totalTime, totalPrice: res.data.totalPrice});
+                setTotalPrice(res.data);
+            })
+            .catch((err) => {
+                // setAlert({
+                //     type: 'error',
+                //     msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                // });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        getSessionInfoOver,
+        isLoading,
+        totalPrice,
+    };
+};
+
+export default useGetSessionOverInfo;
Index: sources/client/src/hooks/useGetSessions.js
===================================================================
--- sources/client/src/hooks/useGetSessions.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetSessions.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,43 @@
+import { useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+// THIS HOOK SHOULD LISTEN ON SOME PORT FOR CHANGES
+
+const useGetSessions = (zoneId) => {
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { setAlert } = useContext(AccessoriesContext);
+  const fetchData = async () => {
+    await axios
+        .get(`/parkingSession/${zoneId}`)
+        .then((res) => {
+            setData(res.data);
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+  useEffect(() => {
+    fetchData();
+    const fetchInterval = setInterval(fetchData, 30000);
+    return () => {
+      clearInterval(fetchInterval);
+    };
+  }, []);
+
+  return {
+    data,
+    isLoading,
+    setData
+  };
+};
+
+export default useGetSessions;
Index: sources/client/src/hooks/useGetZoneByName.js
===================================================================
--- sources/client/src/hooks/useGetZoneByName.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetZoneByName.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,36 @@
+import { useState,useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useGetZoneByName = (defaultZoneInfo) => {
+    const [zone, setZone] = useState(defaultZoneInfo);
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+    const fetchZone = async (pzName) => {
+        setIsLoading(true);
+        return await axios
+            .get(`/parkingZone/name/${pzName}`)
+            .then((res) => {
+                setZone(res.data);
+                return res.data;
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    return {
+        zone,
+        isLoading,
+        fetchZone,
+        setZone
+    };
+};
+
+export default useGetZoneByName;
Index: sources/client/src/hooks/useIsMobile.js
===================================================================
--- sources/client/src/hooks/useIsMobile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useIsMobile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const mobile_max_width = 480;
+
+const useIsMobile = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const [isMobile, setIsMobile] = useState(width < mobile_max_width);
+  function handleWindowSizeChange() {
+    setWidth(window.innerWidth);
+    setIsMobile(window.innerWidth < mobile_max_width);
+  }
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+  }, []);
+
+  return {
+    isMobile,
+  };
+};
+
+export default useIsMobile;
Index: sources/client/src/hooks/useLogin.js
===================================================================
--- sources/client/src/hooks/useLogin.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLogin.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import jwt from 'jwt-decode';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useLogin = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const { setUser } = useContext(UserContext);
+    const loginUser = async ({ email, password }) => {
+        setIsBackdropLoaderOpen(true);
+        const formData = new FormData();
+        formData.append('username', email);
+        formData.append('password', password);
+        await axios
+            .post(`/api/login`, formData)
+            .then((res) => {
+                const token = res.data.access_token;
+                const user = jwt(token);
+                axios.defaults.headers.common['Authorization']= `Bearer ${token}`;
+                localStorage.setItem('token', JSON.stringify(token));
+                setUser({
+                    firstName: user.fullName.split(' ')[0] ?? '',
+                    lastName: user.fullName.split(' ')[1] ?? '',
+                    role: user.roles[0] ?? '',
+                    id: user.id,
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        loginUser,
+    };
+};
+
+export default useLogin;
Index: sources/client/src/hooks/useLoginGuest.js
===================================================================
--- sources/client/src/hooks/useLoginGuest.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLoginGuest.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import jwt from 'jwt-decode';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+import useLogin from './useLogin';
+
+const useLoginGuest = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const { loginUser } = useLogin();
+    const loginGuest = async ({ credentials }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(`/guest`, credentials)
+            .then(async ({ data: guest }) => {
+                await loginUser({
+                    email: guest.email,
+                    password: guest.password,
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        loginGuest,
+    };
+};
+
+export default useLoginGuest;
Index: sources/client/src/hooks/useLogoutUser.js
===================================================================
--- sources/client/src/hooks/useLogoutUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLogoutUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+import { useHistory } from 'react-router-dom';
+
+const useLogoutUser = () => {
+    const { setAlert } = useContext(AccessoriesContext);
+    const { setUser } = useContext(UserContext);
+    const history = useHistory();
+    const logoutUser = async () => {
+        setUser(null);
+        localStorage.clear();
+        setAlert({
+            type: 'success',
+            msg: 'Успешно Сте Одјавени!', // TODO change msg to err.message
+        });
+        history.push('/');
+    };
+    return {
+        logoutUser,
+    };
+};
+
+export default useLogoutUser;
Index: sources/client/src/hooks/useRegisterUser.js
===================================================================
--- sources/client/src/hooks/useRegisterUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useRegisterUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useRegisterUser = () => {
+    const history = useHistory();
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const registerUser = async (data) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(`/registriranParkirac/registration`, data)
+            .then((res) => {
+                history.replace('/login');
+                setAlert({
+                    type: 'success',
+                    msg: 'За активација проверете ја вашата емаил адреса!', // TODO change msg to err.message
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        registerUser,
+    };
+};
+
+export default useRegisterUser;
Index: sources/client/src/hooks/useSaveUserPlate.js
===================================================================
--- sources/client/src/hooks/useSaveUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useSaveUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useSaveUserPlate = () => {
+    const {user} = useContext(UserContext);
+    const { setAlert } = useContext(AccessoriesContext);
+    const saveUserPlate = async ({
+        savePlate,
+        plate,
+        setIsLoadingSavePlate,
+    }) => {
+        setIsLoadingSavePlate(true);
+        console.log(plate);
+        await axios
+            .put(`/registriranParkirac/${user.id}/tablici`, plate, {headers: {"Content-type" : 'application/json'}}) 
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Таблицата е успешно додадена!`,
+                });
+                savePlate(plate); // or res.plate
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoadingSavePlate(false);
+            });
+    };
+
+    return {
+        saveUserPlate,
+    };
+};
+
+export default useSaveUserPlate;
Index: sources/client/src/hooks/useToggleAccountStatus.js
===================================================================
--- sources/client/src/hooks/useToggleAccountStatus.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useToggleAccountStatus.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useToggleAccountStatus = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+
+    const toggleAccountStatus = async ({
+        workerId,
+        changeAccoutStatusOnEmployee,
+    }) => {
+        setIsLoading(true);
+        axios
+            .put(`/vraboten/lock/${workerId}`)
+            .then((res) => {
+                changeAccoutStatusOnEmployee({ workerId });
+                setAlert({
+                    type: 'success',
+                    msg: 'Успешно е променет статусот на акаунтот!',
+                });
+            })
+            .catch((err) => {
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    return {
+        toggleAccountStatus,
+        isLoading,
+    };
+};
+
+export default useToggleAccountStatus;
Index: sources/client/src/hooks/useUpdateEmployee.js
===================================================================
--- sources/client/src/hooks/useUpdateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useUpdateEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const updateEmployee = async ({ employee }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/vraboten/${employee.workerId}`, employee)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот ${employee.firstName} ${employee.lastName} е успешно изменет!`,
+                });
+                console.log(employee);
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                console.log(err);
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        updateEmployee,
+    };
+};
+
+export default useUpdateEmployee;
Index: sources/client/src/hooks/useUpdateUserProfile.js
===================================================================
--- sources/client/src/hooks/useUpdateUserProfile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateUserProfile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useUpdateUserProfile = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const updateUserProfile = async ({ userData, id, successfulSave }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/registriranParkirac/${id}`, userData)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно ажурирање на податоците!`,
+                });
+                successfulSave();
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        updateUserProfile,
+    };
+};
+
+export default useUpdateUserProfile;
Index: sources/client/src/hooks/useUpdateZone.js
===================================================================
--- sources/client/src/hooks/useUpdateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,41 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useUpdateZone = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+  const updateZone = async ({ zone, setEditMode, setZone }) => {
+    setIsLoading(true);
+    console.log(zone);
+    await axios
+        .put(`/parkingZone/${zone.pzId}`, zone) // TODO CHANGE OBJECT
+        .then((res) => {
+            setZone(res.data);
+            console.log(res.data);
+            setAlert({
+                type: 'success',
+                msg: `Зоната е успешно изменета!`,
+            });
+            setEditMode(false);
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+            console.log(err);
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+
+  return {
+    updateZone,
+    isLoading,
+  };
+};
+
+export default useUpdateZone;
Index: sources/client/src/hooks/useUserFinishedSession.js
===================================================================
--- sources/client/src/hooks/useUserFinishedSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserFinishedSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,37 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { sessionStatus } from '../config/enums';
+
+const useUserFinishedSession = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const userFinishedSession = async ({ setSession }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/parkingSession/end`) 
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: 'Успешно завршена сесија!', // TODO change msg
+                });
+                setSession(res.data);
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        userFinishedSession,
+    };
+};
+
+export default useUserFinishedSession;
Index: sources/client/src/hooks/useUserPayForSession.js
===================================================================
--- sources/client/src/hooks/useUserPayForSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserPayForSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,52 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+import { UserContext } from '../context/UserContext';
+import useLogoutUser from './useLogoutUser';
+import { roles } from '../config/enums';
+
+const useUserPayForSession = () => {
+    const {user} = useContext(UserContext);
+    const {logoutUser} = useLogoutUser();
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+    const history = useHistory();
+    const userPayForSession = async ({ method, paymentCredentials }) => {
+        setIsLoading(true);
+        await axios
+            .put(
+                `/parkingSession/pay?expireDate=${paymentCredentials?.cardExpDate ?? ''}`,
+                {
+                    method,
+                    paymentCredentials,
+                }
+            )
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно плаќање!`,
+                });
+                if(user.role === roles.guest) {
+                    logoutUser();
+                } else {
+                    history.push('/');
+                }
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        userPayForSession,
+        isLoading,
+    };
+};
+
+export default useUserPayForSession;
Index: sources/client/src/hooks/useUserStartSession.js
===================================================================
--- sources/client/src/hooks/useUserStartSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserStartSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { sessionStatus } from '../config/enums';
+
+const useUserStartSession = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const userStartSession = async ({ sessionData, setSession }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(
+                `/parkingSession/${sessionData.zone}?tablicka=${sessionData.plate}`
+            ) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно започната сесија!`,
+                });
+                setSession(res.data);
+
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        userStartSession,
+    };
+};
+
+export default useUserStartSession;
Index: sources/client/src/index.css
===================================================================
--- sources/client/src/index.css	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/index.css	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -2,27 +2,32 @@
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 html,
 body,
 #root {
-  height: 100%;
+    height: 100%;
 }
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100%;
+}
+
+td,
+input {
+    overflow: hidden;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
 }
 
 #root {
-  height: 100%;
+    height: 100%;
 }
Index: sources/client/src/index.js
===================================================================
--- sources/client/src/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -4,27 +4,28 @@
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+import axios from 'axios';
 import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
 import { StyledEngineProvider } from '@mui/material/styles';
-
 import theme from './theme/index';
 
+axios.defaults.headers.post['Content-Type'] = 'application/json';
+axios.defaults.headers.post['Content-Type'] = 'application/json';
+axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
+axios.defaults.headers.patch['Access-Control-Allow-Origin'] = '*';
+axios.defaults.headers.delete['Access-Control-Allow-Origin'] = '*';
+
 ReactDOM.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <StyledEngineProvider injectFirst>
-
-        <ThemeProvider theme={theme}>
-
-          <App />
-
-        </ThemeProvider>
-
-      </StyledEngineProvider>
-    </BrowserRouter>
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <BrowserRouter>
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={theme}>
+                    <App />
+                </ThemeProvider>
+            </StyledEngineProvider>
+        </BrowserRouter>
+    </React.StrictMode>,
+    document.getElementById('root')
 );
 
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;
+  }
+`;
Index: sources/client/src/theme/index.js
===================================================================
--- sources/client/src/theme/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/theme/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,29 +1,32 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from '@mui/material';
 
 const theme = createTheme({
-    palette: {
-        primary: {
-            light: '#4cc5a3',
-            main: '#00AD7C',
-            dark: '#007956'
-        },
-        secondary: {
-            light: '#DFDFDF',
-            main: '#B0B0B0',
-            dark: '#8C8C8C'
-        },
-        background: {
-            white: '#FFFFFF',
-            whiteSmoke: '#f4f4f4',
-            shadow: '#aaaaaa'
-        }
+  palette: {
+    primary: {
+      light: '#4cc5a3',
+      main: '#00AD7C',
+      dark: '#007956',
     },
-    // overrides: { TODO
-    //     MuiTypography: {
-    //         h1: {
-    //             fontSize: "5rem"
-    //         }
-    //     }
-    // }
+    secondary: {
+      light: '#DFDFDF',
+      main: '#B0B0B0',
+      dark: '#8C8C8C',
+    },
+    third: {
+      main: '#f65026',
+    },
+    background: {
+      white: '#FFFFFF',
+      whiteSmoke: '#f4f4f4',
+      shadow: '#aaaaaa',
+    },
+  },
+  // overrides: { TODO
+  //     MuiTypography: {
+  //         h1: {
+  //             fontSize: "5rem"
+  //         }
+  //     }
+  // }
 });
 
Index: sources/client/src/utils/convertMinToString.js
===================================================================
--- sources/client/src/utils/convertMinToString.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/utils/convertMinToString.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,16 @@
+export const convertMinutesToString = (min) => {
+    let days = Math.floor(min / 1440);
+    let hours = Math.floor((min - days * 1440) / 60);
+    let minutes = Math.floor(min - (days * 1440 + hours * 60));
+    let daysString = days ? (days > 1 ? `${days} денови` : `${days} ден`) : '';
+    let hoursString = hours
+        ? hours > 1
+            ? `${hours} часови`
+            : `${hours} час`
+        : '';
+    let minutesString = minutes !== 1
+            ? `${minutes} минути`
+            : `${minutes} минута`;
+
+    return `${daysString} ${hoursString} ${minutesString}`.trim();
+};
Index: sources/client/yarn.lock
===================================================================
--- sources/client/yarn.lock	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/yarn.lock	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1164,5 +1164,5 @@
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
@@ -1649,4 +1649,68 @@
   integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
 
+"@material-ui/core@^4.12.3":
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.12.1"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mui/core@5.0.0-alpha.47":
   version "5.0.0-alpha.47"
@@ -1811,4 +1875,19 @@
   integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
 
+"@react-dnd/asap@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
+  integrity sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==
+
+"@react-dnd/invariant@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
+  integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
+
+"@react-dnd/shallowequal@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
+  integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
@@ -2168,5 +2247,5 @@
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.2":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.2":
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688"
@@ -2912,4 +2991,11 @@
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
+
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
 
 axobject-query@^2.2.0:
@@ -3684,5 +3770,5 @@
     wrap-ansi "^6.2.0"
 
-clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@@ -4293,4 +4379,9 @@
     cssom "~0.3.6"
 
+csstype@^2.5.2:
+  version "2.6.18"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
+  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
+
 csstype@^3.0.2, csstype@^3.0.8:
   version "3.0.9"
@@ -4511,4 +4602,13 @@
   dependencies:
     path-type "^4.0.0"
+
+dnd-core@14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-14.0.1.tgz#76d000e41c494983210fb20a48b835f81a203c2e"
+  integrity sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==
+  dependencies:
+    "@react-dnd/asap" "^4.0.0"
+    "@react-dnd/invariant" "^2.0.0"
+    redux "^4.1.1"
 
 dns-equal@^1.0.0:
@@ -5500,4 +5600,9 @@
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
 
+follow-redirects@^1.14.4:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
+  integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
+
 for-in@^1.0.2:
   version "1.0.2"
@@ -7277,4 +7382,13 @@
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.1.tgz#342fd406c2e8781ecdc4ac298a78b892f75581ab"
+  integrity sha512-nOYKsvX9qh/AcUWSSRZHKyUj4RwqnhUSq4EKNFA1nHsNw0VJYwtF1yqtOPvztWEP3LTlNhcwoPINsb/eKVmYqA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.8.1"
+
 jss-plugin-camel-case@^10.7.1:
   version "10.8.0"
@@ -7286,4 +7400,12 @@
     jss "10.8.0"
 
+jss-plugin-default-unit@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.1.tgz#1c35b89cd70ca5b0e01c21d89d908e75c1ea80ad"
+  integrity sha512-W/uwVJNrFtUrVyAPfH/3ZngFYUVilMxgNbuWHYslqv3c5gnBKM6iXeoDzOnB+wtQJoSCTLzD3q77H7OeNK3oxg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.1"
+
 jss-plugin-default-unit@^10.7.1:
   version "10.8.0"
@@ -7294,4 +7416,12 @@
     jss "10.8.0"
 
+jss-plugin-global@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.1.tgz#992a14210c567178eb4cd385edcd267ae8cc6f28"
+  integrity sha512-ERYLzD+L/v3yQL2mM5/PE+3xU/GCXcfXuGIL1kVkiEIpXnWtND/Mphf2iHQaqedx59uhiVHFZaMtv6qv+iNsDw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.1"
+
 jss-plugin-global@^10.7.1:
   version "10.8.0"
@@ -7302,4 +7432,13 @@
     jss "10.8.0"
 
+jss-plugin-nested@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.1.tgz#ac9750f8185725a0fd6ea484860767c53ec3d3dc"
+  integrity sha512-Z15G23Fb8/br23EclH9CAq2UGdi29XgpSWXFTBusMJbWjitFdDCdYMzk7bSUJ6P7L5+WpaIDNxIJ9WrdMRqdXw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.1"
+    tiny-warning "^1.0.2"
+
 jss-plugin-nested@^10.7.1:
   version "10.8.0"
@@ -7311,4 +7450,12 @@
     tiny-warning "^1.0.2"
 
+jss-plugin-props-sort@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.1.tgz#ee07bebf8ebeab01f8d9369973c64891cca53af9"
+  integrity sha512-BNbKYuh4IawWr7cticlnbI+kBx01o39DNHkjAkc2CGKWVboUb2EpktDqonqVN/BjyzDgZXKOmwz36ZFkLQB45g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.1"
+
 jss-plugin-props-sort@^10.7.1:
   version "10.8.0"
@@ -7319,4 +7466,13 @@
     jss "10.8.0"
 
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.1.tgz#40b19406f3cc027d9001de9026750e726c322993"
+  integrity sha512-XrvM4bokyU1xPXr+gVEIlT9WylLQZcdC+1JDxriXDEWmKEjJgtH+w6ZicchTydLqq1qtA4fEevhdMvm4QvgIKw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.1"
+    tiny-warning "^1.0.2"
+
 jss-plugin-rule-value-function@^10.7.1:
   version "10.8.0"
@@ -7328,4 +7484,13 @@
     tiny-warning "^1.0.2"
 
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.1.tgz#362146c2b641aae1d29f279307aec0e2167c7ee2"
+  integrity sha512-77b/iEFmA669s+USru2Y5eg9Hs1C1N0zE/4EaJm/fqKScCTNawHXZv5l5w6j81A9CNa63Ar7jekAIfBkoKFmLw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.8.1"
+
 jss-plugin-vendor-prefixer@^10.7.1:
   version "10.8.0"
@@ -7347,4 +7512,14 @@
     tiny-warning "^1.0.2"
 
+jss@10.8.1, jss@^10.5.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.1.tgz#375797c259ffce417e56ae1a7fe703acde8de9ee"
+  integrity sha512-P4wKxU+2m5ReGl0Mmbf9XYgVjFIVZJOZ9ylXBxdpanX+HHgj5XVaAIgYzYpKbBLPCdkAUsI/Iq1fhQPsMNu0YA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
@@ -7355,4 +7530,9 @@
     object.assign "^4.1.2"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 killable@^1.0.1:
   version "1.0.1"
@@ -7623,4 +7803,9 @@
   dependencies:
     object-visit "^1.0.0"
+
+material-ui-color@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/material-ui-color/-/material-ui-color-1.2.0.tgz#3dde809e9f5f4a29499add83640aeadaaec36f6c"
+  integrity sha512-bD2Rww+hakJxD2/19uxc280Vh292DnRStLke2LDFavVtGd5fzOz09zIrHO3ZHlMkJFsvwx6IwiB4/932ftv0sQ==
 
 md5.js@^1.3.4:
@@ -8631,4 +8816,9 @@
   dependencies:
     ts-pnp "^1.1.6"
+
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
 portfinder@^1.0.26:
@@ -9606,4 +9796,37 @@
     text-table "0.2.0"
 
+react-dnd-html5-backend@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz#25019388f6abdeeda3a6fea835dff155abb2085c"
+  integrity sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==
+  dependencies:
+    dnd-core "14.0.1"
+
+react-dnd-preview@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-dnd-preview/-/react-dnd-preview-6.0.2.tgz#dd34931c270853c80438e1275e6c9e77174f8afe"
+  integrity sha512-F2+uK4Be+q+7mZfNh9kaZols7wp1hX6G7UBTVaTpDsBpMhjFvY7/v7odxYSerSFBShh23MJl33a4XOVRFj1zoQ==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-dnd-touch-backend@^14.1.1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-14.1.1.tgz#d8875ef1cf8dcbf1741a4e03dd5b147c4fbda5e4"
+  integrity sha512-ITmfzn3fJrkUBiVLO6aJZcnu7T8C+GfwZitFryGsXKn5wYcUv+oQBeh9FYcMychmVbDdeUCfvEtTk9O+DKmAaw==
+  dependencies:
+    "@react-dnd/invariant" "^2.0.0"
+    dnd-core "14.0.1"
+
+react-dnd@^14.0.4:
+  version "14.0.4"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-14.0.4.tgz#ffb4ea0e2a3a5532f9c6294d565742008a52b8b0"
+  integrity sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==
+  dependencies:
+    "@react-dnd/invariant" "^2.0.0"
+    "@react-dnd/shallowequal" "^2.0.0"
+    dnd-core "14.0.1"
+    fast-deep-equal "^3.1.3"
+    hoist-non-react-statics "^3.3.2"
+
 react-dom@^17.0.2:
   version "17.0.2"
@@ -9625,13 +9848,13 @@
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
-
-react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-refresh@^0.8.3:
@@ -9735,5 +9958,5 @@
     fsevents "^2.1.3"
 
-react-transition-group@^4.4.2:
+react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -9841,4 +10064,11 @@
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
+
+redux@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
+  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
 
 regenerate-unicode-properties@^8.2.0:
