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 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -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 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -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 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -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 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -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 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -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',
+    },
+})``;
