Index: sources/client/src/components/Alert/index.js
===================================================================
--- sources/client/src/components/Alert/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/Alert/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,31 @@
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert from '@mui/material/Alert';
+import Slide from '@mui/material/Slide'
+
+const SlideTransition = props => (
+    <Slide {...props} direction="down" />
+);
+
+const Alert = ({ isOpen, setIsOpen, type, msg }) => {
+    return <Snackbar
+        open={isOpen}
+        autoHideDuration={2000}
+        onClose={() => setIsOpen(false)}
+        anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'center'
+        }}
+        TransitionComponent={SlideTransition}
+    >
+        <MuiAlert
+            onClose={() => setIsOpen(false)}
+            severity={type}
+            sx={{ width: '100%' }}
+            variant="filled"
+        >
+            {msg}
+        </MuiAlert>
+    </Snackbar>
+};
+
+export default Alert;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,46 @@
+import GoogleMapReact from 'google-map-react';
+
+import { Wrapper, Marker } from './styles';
+
+const ParkingSpaceMarker = ({ text, free }) => (
+  <Marker $free={free}>{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>
+  );
+};
+
+export default GoogleMaps;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 69vh;
+  padding: 0 30px;
+`;
+
+export const Marker = styled.div`
+  color: white;
+  width: 30px;
+  height: 25px;
+  background-color: ${(props) =>
+    props.$free
+      ? `${props.theme.palette.success.light}`
+      : `${props.theme.palette.error.main}`}};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+`;
Index: sources/client/src/components/Login/index.js
===================================================================
--- sources/client/src/components/Login/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/Login/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,64 @@
+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)
+++ sources/client/src/components/Login/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,106 @@
+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/admin/EmployeeCreate/index.js
===================================================================
--- sources/client/src/components/admin/EmployeeCreate/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeCreate/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+
+import {
+  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 { employeeStatus } from '../../../config/enums';
+
+import { defaultUser } from '../../../config/defaultUser';
+
+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 onCreateEmployee = () => {
+    const changedEmployee = {
+      ...employeeEditableData,
+      accountActive: accStatus,
+    };
+    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>
+  );
+};
+
+export default EmployeeCreate;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,127 @@
+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};
+`;
+
+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;
+`;
+
+export const LabelAndInputWrapper = styled.div`
+
+`;
+
+export const Label = styled(InputLabel).attrs({
+
+})``;
+
+export const StandardInputField = styled(TextField).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const VisibilityIcon = styled(VIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const VisibilityOffIcon = styled(VOffIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const Dropdown = styled(Select).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const DropdownOption = styled(MenuItem).attrs({
+
+})``;
+
+export const SwitchRowWrapper = styled.div`
+    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;
+`;
+
+export const SwitchLabelAndInputWrapper = styled.div`
+    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 BackButton = styled(Button).attrs({
+    variant: 'outlined'
+})`
+    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}`
+    }
+}))`
+    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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+
+import {
+    EmployeeEditWrapper,
+    Title,
+    RowWrapper,
+    LabelAndInputWrapper,
+    Label,
+    StandardInputField,
+    Dropdown,
+    DropdownOption,
+    SwitchRowWrapper,
+    SwitchTitle,
+    SwitchLabelAndInputWrapper,
+    AccountSwitch,
+    BackAndSaveChangesButtonsWrapper,
+    DeleteButton,
+    BackButton,
+    SaveChangesButton,
+    VisibilityIcon,
+    VisibilityOffIcon
+} from './styles';
+
+import IconButton from '@mui/material/IconButton';
+
+import {
+    employeeStatus
+} from '../../../config/enums';
+
+import {
+    employees
+} from '../EmployeesTable/mockData';
+
+const EmployeeEdit = () => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    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 = [
+        {
+            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 onSaveChanges = () => {
+        const changedEmployee = {
+            ...employeeEditableData,
+            accountActive: accStatus
+        }
+        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}
+                />
+            </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>
+};
+
+export default EmployeeEdit;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,143 @@
+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};
+`;
+
+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;
+`;
+
+export const LabelAndInputWrapper = styled.div`
+
+`;
+
+export const Label = styled(InputLabel).attrs({
+
+})``;
+
+export const StandardInputField = styled(TextField).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const VisibilityIcon = styled(VIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const VisibilityOffIcon = styled(VOffIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const Dropdown = styled(Select).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const DropdownOption = styled(MenuItem).attrs({
+
+})``;
+
+export const SwitchRowWrapper = styled.div`
+    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;
+`;
+
+export const SwitchLabelAndInputWrapper = styled.div`
+    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 BackAndSaveChangesButtonsWrapper = styled.div`
+
+`;
+
+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};
+    }
+`;
+
+export const BackButton = styled(Button).attrs({
+    variant: 'outlined'
+})`
+    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}`
+    }
+}))`
+    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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,122 @@
+import { useHistory } from 'react-router';
+
+import {
+  TableContainer,
+  TableHeaderWrapper,
+  TableTitle,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+  ButtonTableCell,
+  ToggleAccoutStatusButton,
+  CreateEmployeeButton,
+  AddIcon,
+  SearchField,
+  IdentityIcon,
+} from './styles';
+
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { employeeStatus, accountStatus } from '../../../config/enums';
+
+import { employees } from './mockData';
+import { useState } from 'react';
+
+const EmployeesTable = () => {
+  let history = useHistory();
+  const [filteredEmployees, setFilteredEmployees] = useState(employees);
+  const [search, setSearch] = useState('');
+
+  const onRowClick = (id) => {
+    history.push(`/employees/${id}`);
+  };
+
+  const onAccountStatusClick = (event, id) => {
+    event.stopPropagation();
+    console.log(`Disable or activate user acc with id: ${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())
+    );
+
+    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>
+  );
+};
+
+export default EmployeesTable;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +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
+    }
+];
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,148 @@
+import styled from 'styled-components';
+import T from '@mui/material/Table';
+import TH from '@mui/material/TableHead';
+import TContainer from '@mui/material/TableContainer';
+import TR from '@mui/material/TableRow';
+import TB from '@mui/material/TableBody';
+import TC from '@mui/material/TableCell';
+
+import Button from '@mui/material/Button';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import TextField from '@mui/material/TextField';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+
+import Paper from '@mui/material/Paper';
+import { Typography } from '@mui/material';
+
+export const TableContainer = styled(TContainer).attrs({
+  component: Paper,
+})`
+  max-width: 1000px;
+  margin-top: 20px;
+  margin-left: 30px;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const TableHeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  width: 100%;
+  border: 1px solid grey;
+  border-bottom: none;
+  padding: 10px 16px;
+  background-color: ${(props) => props.theme.palette.grey[400]};
+`;
+
+export const TableTitle = styled(Typography).attrs({
+  variant: 'h4',
+})`
+  font-size: 2rem;
+  font-weight: 600;
+`;
+
+export const CreateEmployeeButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
+}))`
+  padding-left: 11px;
+
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon)`
+  margin-right: 11px;
+`;
+
+export const Table = styled(T).attrs({})`
+  th,
+  td {
+    padding: 20px;
+    font-size: 1rem;
+  }
+`;
+
+export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
+  sx: {
+    color: `${props.theme.palette.primary.dark}`,
+  },
+}))``;
+
+export const TableHead = styled(TH).attrs({})`
+  tr {
+    background-color: ${(props) => `${props.theme.palette.grey[900]}`};
+    th {
+      color: white;
+    }
+  }
+`;
+
+export const TableRow = styled(TR).attrs({})``;
+
+export const TableBody = styled(TB).attrs({})`
+  tr:last-child td,
+  tr:last-child th {
+    border: none;
+  }
+
+  tr:nth-of-type(odd) {
+    background-color: ${(props) => `${props.theme.palette.grey[400]}`};
+    :hover {
+      cursor: pointer;
+      background-color: ${(props) => `${props.theme.palette.grey[500]}`};
+    }
+  }
+
+  tr:nth-of-type(even) {
+    background-color: ${(props) => `${props.theme.palette.grey[200]}`};
+    :hover {
+      cursor: pointer;
+      background-color: ${(props) => `${props.theme.palette.grey[300]}`};
+    }
+  }
+`;
+
+export const TableCell = styled(TC).attrs({})``;
+
+export const ButtonTableCell = styled(TC).attrs({
+  sx: {
+    padding: 0,
+  },
+})`
+  z-index: 100;
+`;
+
+export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'medium',
+  sx: {
+    backgroundColor: props.$enabled
+      ? `${props.theme.palette.primary.main}`
+      : `${props.theme.palette.error.main}`,
+  },
+}))`
+  :hover {
+    background-color: ${(props) =>
+      props.$enabled
+        ? `${props.theme.palette.primary.light}`
+        : `${props.theme.palette.error.light}`};
+  }
+`;
+
+export const SearchField = styled(TextField).attrs({
+  variant: 'standard',
+})`
+  > div:before {
+    border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
+  }
+  input {
+    color: ${(props) => props.theme.palette.primary.dark};
+    font-weight: 600;
+  }
+`;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { IconButton } from '@mui/material';
+
+import ParkingZoneInfo from '../ParkingZoneInfo';
+import ParkingZoneSessions from '../ParkingZoneSessions';
+import GoogleMaps from '../../GoogleMaps';
+
+import {
+  NamesWrapper,
+  ParkingAndZoneName,
+  DividerUnderNames,
+  NavigationIconsWrapper,
+  MainSection,
+  MapsIcon,
+  ComponentIcon,
+} from './styles';
+
+import { roles } from '../../../config/enums';
+
+import { parkingZones } from '../ParkingZones/mockData';
+
+const activeComponentEnum = {
+  MAPS: 'maps',
+  INFO: 'info',
+};
+
+const ParkingZone = () => {
+  const { zone_id } = useParams();
+  const [activeComponent, setActiveComponent] = useState(
+    activeComponentEnum.MAPS
+  );
+
+  const user = {
+    role: 'ROLE_ADMIN',
+  };
+
+  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>
+
+      <DividerUnderNames />
+
+      <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>
+        {activeComponent === activeComponentEnum.MAPS ? (
+          <GoogleMaps
+            location={zone.location}
+            parkingSpacesLocation={zone.parkingSpacesLocation}
+            zoneAreaColor={zone.areaColor}
+          />
+        ) : (
+          <Info zone={zone} />
+        )}
+      </MainSection>
+    </>
+  );
+};
+
+export default ParkingZone;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { Typography, Divider } from '@mui/material';
+import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
+import EqualizerOutlinedIcon from '@mui/icons-material/EqualizerOutlined';
+
+export const NamesWrapper = styled.div`
+  margin-bottom: 10px;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 175px;
+`;
+
+export const ParkingAndZoneName = styled(Typography).attrs((props) => ({
+  fontSize: '2rem',
+  fontWeight: '600',
+  margin: 0,
+  color: `${props.theme.palette.primary.main}`,
+}))``;
+
+export const DividerUnderNames = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '0 160px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+  },
+})``;
+
+export const MapsIcon = styled(MapOutlinedIcon).attrs((props) => ({
+  sx: {
+    width: props.$isactive ? '60px' : '50px',
+    height: props.$isactive ? '60px' : '50px',
+    color: props.$isactive ? `${props.theme.palette.primary.main}` : '',
+  },
+}))``;
+
+export const ComponentIcon = styled(EqualizerOutlinedIcon).attrs((props) => ({
+  sx: {
+    width: props.$isactive ? '60px' : '50px',
+    height: props.$isactive ? '60px' : '50px',
+    color: props.$isactive ? `${props.theme.palette.primary.main}` : '',
+  },
+}))``;
+
+export const NavigationIconsWrapper = styled.div`
+  height: 86px;
+  width: 160px;
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+`;
+
+export const MainSection = styled.div`
+  height: 100%;
+`;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,5 @@
+const ParkingZoneInfo = () => {
+    return <h1>PARKING ZONE INFO</h1>
+};
+
+export default ParkingZoneInfo;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,129 @@
+import {
+  Wrapper,
+  SessionChildWrapper,
+  SessionChildTitle,
+  SeessionChildData,
+  InputAndCheckIconWrapper,
+  ParkingSpaceNumberInput,
+  CheckIcon,
+  DeleteButton,
+  ContinueButton,
+} from './styles';
+
+import { sessionStatus } from '../../../../config/enums';
+import { IconButton } from '@mui/material';
+import { useState } from 'react';
+
+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;
+  }
+};
+
+export default SessionCard;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import Button from '@mui/material/Button';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 110px;
+  padding: 10px 30px;
+  border-radius: 50px;
+  color: white;
+  font-size: 1rem;
+  box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const SessionChildWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SessionChildTitle = styled.p`
+  text-align: center;
+  margin: 0;
+  margin-bottom: 5px;
+`;
+
+export const SeessionChildData = styled.p`
+  text-align: center;
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.1rem;
+`;
+
+export const InputAndCheckIconWrapper = styled.div`
+  position: relative;
+
+  button {
+    padding: 0;
+    position: absolute;
+    right: -40px;
+  }
+`;
+
+export const ParkingSpaceNumberInput = styled.input`
+  width: 100px;
+  height: 30px;
+  text-align: center;
+`;
+
+export const CheckIcon = styled(CheckCircleOutlineIcon).attrs({
+  sx: {
+    color: '#2e7d32',
+    fontSize: '2rem',
+  },
+})``;
+
+export const DeleteButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'medium',
+  sx: {
+    backgroundColor: `#ff1919`,
+  },
+}))`
+  :hover {
+    background-color: #e51616;
+  }
+`;
+
+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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import {
+  Wrapper,
+  Title,
+  SessionsWrapper,
+  StatsWrapper,
+  Stats,
+  KeyValueWrapper,
+  StatsKey,
+  StatsValue,
+} from './styles';
+import SessionCard from './SessionCard';
+import { sessionStatus } from '../../../config/enums';
+import { sessionsData } from './mockData';
+
+const ParkingZoneSessions = ({ zone }) => {
+  const [sessions, setSession] = useState(sessionsData);
+  const [stats, setStats] = useState({
+    activeSessions: 0,
+    idleSessions: 0,
+    overSessions: 0,
+  });
+  const setSessionsStats = () => {
+    let aS = 0;
+    let iS = 0;
+    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;
+      }
+    });
+    setStats({
+      activeSessions: aS,
+      idleSessions: iS,
+      overSessions: oS,
+    });
+  };
+
+  useEffect(() => {
+    setSessionsStats();
+  }, [sessions]);
+
+  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>
+  );
+};
+
+export default ParkingZoneSessions;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,26 @@
+import moment from 'moment';
+
+export const sessionsData = [
+  {
+    id: 1,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'SK-8190-AV',
+    status: 'active',
+    parkingSpaceNumber: 'A31',
+  },
+  {
+    id: 2,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'ST-9312-OK',
+    status: 'idle',
+    parkingSpaceNumber: '',
+  },
+  {
+    id: 3,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    end: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'SK-6511-OS',
+    status: 'over',
+    parkingSpaceNumber: 'D4',
+  },
+];
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import { Typography } from '@mui/material';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  padding: 30px 175px 0 175px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h3',
+  fontSize: '2rem',
+  fontWeight: 600,
+})`
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const StatsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  margin: 30px 0 10px 0;
+`;
+
+export const Stats = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const KeyValueWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 220px;
+  justify-content: space-between;
+`;
+
+export const StatsKey = styled.p`
+  margin: 0;
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const StatsValue = styled.p`
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.2rem;
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const SessionsWrapper = styled.div`
+  height: 45vh;
+  width: 100%;
+  overflow: auto;
+  padding-top: 20px;
+
+  > div:not(div:first-of-type) {
+    margin-top: 24px;
+  }
+`;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,47 @@
+import { useHistory } from 'react-router-dom';
+
+import {
+  ParkingZoneWrapper,
+  Container,
+  ZoneName,
+  InfoWrapper,
+  Label,
+  Value,
+  ProgressBar,
+  ProgressBarLabel,
+} from './styles';
+
+const ParkingZoneCard = ({ info }) => {
+  let history = useHistory();
+
+  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>
+  );
+};
+
+export default ParkingZoneCard;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import Grid from '@mui/material/Grid';
+import { Typography } from '@mui/material';
+
+import { LineProgressBar } from '@frogress/line'
+
+
+export const ParkingZoneWrapper = styled(Grid)`
+    height: 350px;
+`;
+
+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;
+`;
+
+export const ZoneName = styled(Typography).attrs({
+    variant: 'h2'
+})`
+    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;
+
+`;
+
+export const Label = styled(Typography).attrs({
+    variant: 'h4'
+})`
+    font-size: 1rem;
+    margin-bottom: 5px;
+`;
+
+export const Value = styled(Typography).attrs({
+    variant: 'h3'
+})`
+    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',
+}))`
+    position: absolute;
+    bottom: 5px;
+`;
+
+export const ProgressBarLabel = styled.p`
+    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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import {
+  FiltersWrapper,
+  SortingArrowsWrapper,
+  SortByTitle,
+  ArrowDown,
+  ArrowUp,
+  ClearSortIcon,
+  ParkingZonesWrapper,
+  AddParkingZoneCard,
+  AddIcon,
+  AddItem,
+  ParkingName,
+  DividerUnderFilters,
+} from './styles';
+
+import ParkingZoneCard from './ParkingZoneCard';
+
+import { roles } from '../../../config/enums';
+
+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;
+    }
+    return a.zoneName - b.zoneName;
+  }
+};
+
+const sortUpDown = (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;
+    }
+    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>
+    </>
+  );
+};
+
+export default ParkingZones;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,81 @@
+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 },
+      ],
+    },
+    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,
+  },
+];
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import Grid from '@mui/material/Grid';
+import Add from '@mui/icons-material/Add';
+import { Typography, Divider } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ClearIcon from '@mui/icons-material/Clear';
+import { ParkingZoneWrapper, Container } from './ParkingZoneCard/styles';
+
+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;
+`;
+
+export const SortingArrowsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+`;
+
+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};
+  }
+`;
+
+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};
+  }
+`;
+
+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;
+  }
+`;
+
+export const DividerUnderFilters = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '0 160px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+  },
+})``;
+
+export const SortByTitle = styled(Typography).attrs((props) => ({
+  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}`,
+}))``;
+
+export const ParkingZonesWrapper = styled(Grid)`
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0 40px 0 0;
+`;
+
+export const AddParkingZoneCard = styled(ParkingZoneWrapper)``;
+
+export const AddItem = styled(Container)`
+  display: flex;
+  align-items: center;
+  justify-content: middle;
+`;
+
+export const AddIcon = styled(Add).attrs({
+  sx: {
+    fontWeight: 500,
+  },
+})`
+  width: 100%;
+  height: 100%;
+  color: ${(props) => props.theme.palette.primary.main};
+`;
