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;
