Index: sources/client/src/components/admin/ParkingZone/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZone/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZone/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,3 +1,3 @@
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -7,74 +7,133 @@
 import ParkingZoneSessions from '../ParkingZoneSessions';
 import GoogleMaps from '../../GoogleMaps';
-
+import CircularProgress from '@mui/material/CircularProgress';
 import {
-  NamesWrapper,
-  ParkingAndZoneName,
-  DividerUnderNames,
-  NavigationIconsWrapper,
-  MainSection,
-  MapsIcon,
-  ComponentIcon,
+    NamesWrapper,
+    ParkingAndZoneName,
+    DividerUnderNames,
+    NavigationIconsWrapper,
+    MainSection,
+    MapsIcon,
+    ComponentIcon,
+    ZoneNameLoader,
 } from './styles';
 
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 import { roles } from '../../../config/enums';
+import { UserContext } from '../../../context/UserContext';
+import useGetData from '../../../hooks/useGetData';
 
-import { parkingZones } from '../ParkingZones/mockData';
+const defaultLocationObj = {
+    centre: {
+        lat: 42.000629,
+        lng: 21.420525,
+    },
+    coords: []
+};
+
+const mockResponsiblePersons = [
+    // TODO DELTE THIS
+    {
+        id: 1,
+        email: 'viktor-tasevski@hotmail.com',
+        firstName: 'Viktor',
+        lastName: 'Tasevski',
+    },
+    {
+        id: 3,
+        email: 'david_trajkovski@yahoo.com',
+        firstName: 'David',
+        lastName: 'Trajkovski',
+    },
+];
 
 const activeComponentEnum = {
-  MAPS: 'maps',
-  INFO: 'info',
+    MAPS: 'maps',
+    INFO: 'info',
 };
 
 const ParkingZone = () => {
-  const { zone_id } = useParams();
-  const [activeComponent, setActiveComponent] = useState(
-    activeComponentEnum.MAPS
-  );
+    const { user } = useContext(UserContext);
+    const { zone_id } = useParams();
+    const url = `/parkingZone/${zone_id}`;
+    const { data: zoneData, isLoading: isLoadingZoneData } = useGetData({
+        url: url,
+    });
 
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
+    const [zoneState, setZoneState] = useState(null);
+    const [activeComponent, setActiveComponent] = useState(
+        activeComponentEnum.MAPS
+    );
 
-  const zone = parkingZones.find((z) => z.id === parseInt(zone_id));
-  const Info =
-    user.role !== roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
-  return (
-    <>
-      <NamesWrapper>
-        <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
-        <ParkingAndZoneName>{zone?.zoneName}</ParkingAndZoneName>
-      </NamesWrapper>
+    const setZone = (updatedZone) => {
+        setZoneState({ ...updatedZone });
+    };
+    const Info =
+        user.role === roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
 
-      <DividerUnderNames />
+    useEffect(() => {
+        setZoneState({
+            ...zoneData
+        });
+    }, [zoneData]);
+    return (
+        <>
+            <NamesWrapper>
+                <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
+                <ParkingAndZoneName className='zone-name'>
+                    Зона
+                    {isLoadingZoneData ? (
+                        <ZoneNameLoader />
+                    ) : (
+                        ` - ${zoneState?.pzName ?? ''}`
+                    )}
+                </ParkingAndZoneName>
+            </NamesWrapper>
 
-      <NavigationIconsWrapper>
-        <IconButton
-          onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
-        >
-          <MapsIcon $isactive={activeComponent === activeComponentEnum.MAPS} />
-        </IconButton>
-        <IconButton
-          onClick={() => setActiveComponent(activeComponentEnum.INFO)}
-        >
-          <ComponentIcon
-            $isactive={activeComponent === activeComponentEnum.INFO}
-          />
-        </IconButton>
-      </NavigationIconsWrapper>
+            <DividerUnderNames />
 
-      <MainSection>
-        {activeComponent === activeComponentEnum.MAPS ? (
-          <GoogleMaps
-            location={zone.location}
-            parkingSpacesLocation={zone.parkingSpacesLocation}
-            zoneAreaColor={zone.areaColor}
-          />
-        ) : (
-          <Info zone={zone} />
-        )}
-      </MainSection>
-    </>
-  );
+            <NavigationIconsWrapper>
+                <IconButton
+                    onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
+                >
+                    <MapsIcon
+                        $isactive={activeComponent === activeComponentEnum.MAPS}
+                    />
+                </IconButton>
+                <IconButton
+                    onClick={() => setActiveComponent(activeComponentEnum.INFO)}
+                >
+                    <ComponentIcon
+                        $isactive={activeComponent === activeComponentEnum.INFO}
+                    />
+                </IconButton>
+            </NavigationIconsWrapper>
+
+            <MainSection>
+                {isLoadingZoneData ? (
+                    <AbsoluteLoader
+                        containerStyle={{
+                            width: '250px',
+                            height: '250px',
+                            margin: 'auto',
+                            marginTop: '12vw',
+                        }}
+                    />
+                ) : (
+                    <>
+                        {activeComponent === activeComponentEnum.MAPS ? (
+                            <GoogleMaps
+                                location={zoneState.parkingZoneLocation ?? defaultLocationObj}
+                                parkingSpaces={zoneState.parkingSpaces}
+                                zoneAreaColor={zoneState.color}
+                            />
+                        ) : (
+                            <Info zone={zoneState} setZone={setZone} />
+                        )}
+                    </>
+                )}
+            </MainSection>
+        </>
+    );
 };
 
Index: sources/client/src/components/admin/ParkingZone/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZone/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZone/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -3,4 +3,6 @@
 import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
 import EqualizerOutlinedIcon from '@mui/icons-material/EqualizerOutlined';
+import { mobile_max_width } from '../../../config/utilities';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export const NamesWrapper = styled.div`
@@ -11,5 +13,12 @@
   justify-content: space-between;
   align-items: center;
-  padding: 10px 175px;
+  padding: 10px 10%;
+
+  @media (max-width: ${mobile_max_width}px) {
+    flex-direction: column;
+    .zone-name {
+      margin-top: 30px;
+    }
+  }
 `;
 
@@ -19,10 +28,24 @@
   margin: 0,
   color: `${props.theme.palette.primary.main}`,
-}))``;
+}))`
+  display: flex;
+  align-items: center;
+`;
+
+export const ZoneNameLoader = styled(CircularProgress).attrs({
+  size: 40,
+  sx: {
+    marginLeft: '10px',
+  },
+})`
+  .MuiCircularProgress-svg {
+    color: ${(props) => props.theme.palette.primary.light};
+  }
+`;
 
 export const DividerUnderNames = styled(Divider).attrs({
   variant: 'middle',
   sx: {
-    margin: '0 160px',
+    margin: '0 9%',
     borderWidth: '2px',
     borderBottomWidth: 'thin',
