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