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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,47 @@
+import { useHistory } from 'react-router-dom';
+
+import {
+  ParkingZoneWrapper,
+  Container,
+  ZoneName,
+  InfoWrapper,
+  Label,
+  Value,
+  ProgressBar,
+  ProgressBarLabel,
+} from './styles';
+
+const ParkingZoneCard = ({ info }) => {
+  let history = useHistory();
+
+  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>
+  );
+};
+
+export default ParkingZoneCard;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import Grid from '@mui/material/Grid';
+import { Typography } from '@mui/material';
+
+import { LineProgressBar } from '@frogress/line'
+
+
+export const ParkingZoneWrapper = styled(Grid)`
+    height: 350px;
+`;
+
+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;
+`;
+
+export const ZoneName = styled(Typography).attrs({
+    variant: 'h2'
+})`
+    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;
+
+`;
+
+export const Label = styled(Typography).attrs({
+    variant: 'h4'
+})`
+    font-size: 1rem;
+    margin-bottom: 5px;
+`;
+
+export const Value = styled(Typography).attrs({
+    variant: 'h3'
+})`
+    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',
+}))`
+    position: absolute;
+    bottom: 5px;
+`;
+
+export const ProgressBarLabel = styled.p`
+    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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import {
+  FiltersWrapper,
+  SortingArrowsWrapper,
+  SortByTitle,
+  ArrowDown,
+  ArrowUp,
+  ClearSortIcon,
+  ParkingZonesWrapper,
+  AddParkingZoneCard,
+  AddIcon,
+  AddItem,
+  ParkingName,
+  DividerUnderFilters,
+} from './styles';
+
+import ParkingZoneCard from './ParkingZoneCard';
+
+import { roles } from '../../../config/enums';
+
+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;
+    }
+    return a.zoneName - b.zoneName;
+  }
+};
+
+const sortUpDown = (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;
+    }
+    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>
+    </>
+  );
+};
+
+export default ParkingZones;
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,81 @@
+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 },
+      ],
+    },
+    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,
+  },
+];
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 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import Grid from '@mui/material/Grid';
+import Add from '@mui/icons-material/Add';
+import { Typography, Divider } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ClearIcon from '@mui/icons-material/Clear';
+import { ParkingZoneWrapper, Container } from './ParkingZoneCard/styles';
+
+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;
+`;
+
+export const SortingArrowsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+`;
+
+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};
+  }
+`;
+
+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};
+  }
+`;
+
+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;
+  }
+`;
+
+export const DividerUnderFilters = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '0 160px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+  },
+})``;
+
+export const SortByTitle = styled(Typography).attrs((props) => ({
+  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}`,
+}))``;
+
+export const ParkingZonesWrapper = styled(Grid)`
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0 40px 0 0;
+`;
+
+export const AddParkingZoneCard = styled(ParkingZoneWrapper)``;
+
+export const AddItem = styled(Container)`
+  display: flex;
+  align-items: center;
+  justify-content: middle;
+`;
+
+export const AddIcon = styled(Add).attrs({
+  sx: {
+    fontWeight: 500,
+  },
+})`
+  width: 100%;
+  height: 100%;
+  color: ${(props) => props.theme.palette.primary.main};
+`;
