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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ResponsiblePersonsSectorEdit/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/mockData.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoEdit/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ParkingSpacesSector/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ResponsiblePersonsSector/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/ZoneSector/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/admin/ParkingZoneInfoViewer/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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 bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -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',
+    },
+})``;
