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};
+    }
+`;
