Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,129 @@
+import {
+  Wrapper,
+  SessionChildWrapper,
+  SessionChildTitle,
+  SeessionChildData,
+  InputAndCheckIconWrapper,
+  ParkingSpaceNumberInput,
+  CheckIcon,
+  DeleteButton,
+  ContinueButton,
+} from './styles';
+
+import { sessionStatus } from '../../../../config/enums';
+import { IconButton } from '@mui/material';
+import { useState } from 'react';
+
+const sessionCardColors = {
+  active: '#389e0d',
+  idle: '#ffa940',
+  over: '#cf1322',
+};
+
+const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
+  return (
+    <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
+      <SessionChildWrapper>
+        <SessionChildTitle>Почеток</SessionChildTitle>
+        <SeessionChildData>{start}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Број на место</SessionChildTitle>
+        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Регистрација</SessionChildTitle>
+        <SeessionChildData>{plate}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <DeleteButton>ИЗБРИШИ</DeleteButton>
+      </SessionChildWrapper>
+    </Wrapper>
+  );
+};
+
+const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
+  const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? '');
+  return (
+    <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
+      <SessionChildWrapper>
+        <SessionChildTitle>Почеток</SessionChildTitle>
+        <SeessionChildData>{start}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Број на место</SessionChildTitle>
+        <InputAndCheckIconWrapper>
+          <ParkingSpaceNumberInput
+            value={parkingSpace}
+            onChange={(event) => setParkingSpace(event.target.value)}
+          />
+          {parkingSpace !== '' ? (
+            <IconButton>
+              <CheckIcon />
+            </IconButton>
+          ) : null}
+        </InputAndCheckIconWrapper>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Регистрација</SessionChildTitle>
+        <SeessionChildData>{plate}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <DeleteButton>ИЗБРИШИ</DeleteButton>
+      </SessionChildWrapper>
+    </Wrapper>
+  );
+};
+
+const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => {
+  return (
+    <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
+      <SessionChildWrapper>
+        <SessionChildWrapper>
+          <SessionChildTitle>Почеток</SessionChildTitle>
+          <SeessionChildData>{start}</SeessionChildData>
+        </SessionChildWrapper>
+        <SessionChildWrapper>
+          <SessionChildTitle>Крај</SessionChildTitle>
+          <SeessionChildData>{end}</SeessionChildData>
+        </SessionChildWrapper>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Број на место</SessionChildTitle>
+        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <SessionChildTitle>Регистрација</SessionChildTitle>
+        <SeessionChildData>{plate}</SeessionChildData>
+      </SessionChildWrapper>
+
+      <SessionChildWrapper>
+        <DeleteButton>ИЗБРИШИ</DeleteButton>
+        <ContinueButton>ПРОДОЛЖИ</ContinueButton>
+      </SessionChildWrapper>
+    </Wrapper>
+  );
+};
+
+const SessionCard = (props) => {
+  switch (props.status) {
+    case sessionStatus.active:
+      return <ActiveCard {...props} />;
+    case sessionStatus.idle:
+      return <IdleCard {...props} />;
+    case sessionStatus.over:
+      return <OverCard {...props} />;
+    default:
+      return null;
+  }
+};
+
+export default SessionCard;
Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import Button from '@mui/material/Button';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 110px;
+  padding: 10px 30px;
+  border-radius: 50px;
+  color: white;
+  font-size: 1rem;
+  box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const SessionChildWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SessionChildTitle = styled.p`
+  text-align: center;
+  margin: 0;
+  margin-bottom: 5px;
+`;
+
+export const SeessionChildData = styled.p`
+  text-align: center;
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.1rem;
+`;
+
+export const InputAndCheckIconWrapper = styled.div`
+  position: relative;
+
+  button {
+    padding: 0;
+    position: absolute;
+    right: -40px;
+  }
+`;
+
+export const ParkingSpaceNumberInput = styled.input`
+  width: 100px;
+  height: 30px;
+  text-align: center;
+`;
+
+export const CheckIcon = styled(CheckCircleOutlineIcon).attrs({
+  sx: {
+    color: '#2e7d32',
+    fontSize: '2rem',
+  },
+})``;
+
+export const DeleteButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'medium',
+  sx: {
+    backgroundColor: `#ff1919`,
+  },
+}))`
+  :hover {
+    background-color: #e51616;
+  }
+`;
+
+export const ContinueButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'small',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
+}))`
+  margin-top: 20px;
+
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
+`;
Index: sources/client/src/components/admin/ParkingZoneSessions/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import {
+  Wrapper,
+  Title,
+  SessionsWrapper,
+  StatsWrapper,
+  Stats,
+  KeyValueWrapper,
+  StatsKey,
+  StatsValue,
+} from './styles';
+import SessionCard from './SessionCard';
+import { sessionStatus } from '../../../config/enums';
+import { sessionsData } from './mockData';
+
+const ParkingZoneSessions = ({ zone }) => {
+  const [sessions, setSession] = useState(sessionsData);
+  const [stats, setStats] = useState({
+    activeSessions: 0,
+    idleSessions: 0,
+    overSessions: 0,
+  });
+  const setSessionsStats = () => {
+    let aS = 0;
+    let iS = 0;
+    let oS = 0;
+    sessions.forEach((s) => {
+      switch (s.status) {
+        case sessionStatus.active:
+          aS += 1;
+          break;
+        case sessionStatus.idle:
+          iS += 1;
+          break;
+        case sessionStatus.over:
+          oS += 1;
+          break;
+        default:
+          break;
+      }
+    });
+    setStats({
+      activeSessions: aS,
+      idleSessions: iS,
+      overSessions: oS,
+    });
+  };
+
+  useEffect(() => {
+    setSessionsStats();
+  }, [sessions]);
+
+  return (
+    <Wrapper>
+      <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
+      <StatsWrapper>
+        <Stats>
+          {/* PARKING SPACES STATS*/}
+          <KeyValueWrapper>
+            <StatsKey>Вкупно паркинг места:</StatsKey>
+            <StatsValue>{zone.parkingSpaces}</StatsValue>
+          </KeyValueWrapper>
+          <KeyValueWrapper>
+            <StatsKey>Слободни паркинг места:</StatsKey>
+            <StatsValue>
+              {zone.parkingSpaces - zone.takenParkingSpaces}
+            </StatsValue>
+          </KeyValueWrapper>
+          <KeyValueWrapper>
+            <StatsKey>Зафатени паркинг места:</StatsKey>
+            <StatsValue>{zone.takenParkingSpaces}</StatsValue>
+          </KeyValueWrapper>
+        </Stats>
+        {/* SESSIONS STATS*/}
+        <Stats>
+          <KeyValueWrapper>
+            <StatsKey>Активни паркинг сесии:</StatsKey>
+            <StatsValue>{stats.activeSessions}</StatsValue>
+          </KeyValueWrapper>
+          <KeyValueWrapper>
+            <StatsKey>Завршени паркинг сесии:</StatsKey>
+            <StatsValue>{stats.overSessions}</StatsValue>
+          </KeyValueWrapper>
+          <KeyValueWrapper>
+            <StatsKey>Неактивни паркинг сесии:</StatsKey>
+            <StatsValue>{stats.idleSessions}</StatsValue>
+          </KeyValueWrapper>
+        </Stats>
+      </StatsWrapper>
+      <SessionsWrapper>
+        {sessions.map((session) => (
+          <SessionCard key={session.id} {...session} />
+        ))}
+      </SessionsWrapper>
+    </Wrapper>
+  );
+};
+
+export default ParkingZoneSessions;
Index: sources/client/src/components/admin/ParkingZoneSessions/mockData.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,26 @@
+import moment from 'moment';
+
+export const sessionsData = [
+  {
+    id: 1,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'SK-8190-AV',
+    status: 'active',
+    parkingSpaceNumber: 'A31',
+  },
+  {
+    id: 2,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'ST-9312-OK',
+    status: 'idle',
+    parkingSpaceNumber: '',
+  },
+  {
+    id: 3,
+    start: moment().format('hh:mm - DD.MM.yyyy'),
+    end: moment().format('hh:mm - DD.MM.yyyy'),
+    plate: 'SK-6511-OS',
+    status: 'over',
+    parkingSpaceNumber: 'D4',
+  },
+];
Index: sources/client/src/components/admin/ParkingZoneSessions/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import { Typography } from '@mui/material';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  padding: 30px 175px 0 175px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Title = styled(Typography).attrs({
+  variant: 'h3',
+  fontSize: '2rem',
+  fontWeight: 600,
+})`
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const StatsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  margin: 30px 0 10px 0;
+`;
+
+export const Stats = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const KeyValueWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 220px;
+  justify-content: space-between;
+`;
+
+export const StatsKey = styled.p`
+  margin: 0;
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const StatsValue = styled.p`
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.2rem;
+  background: -webkit-linear-gradient(#333333, #4cc5a3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+export const SessionsWrapper = styled.div`
+  height: 45vh;
+  width: 100%;
+  overflow: auto;
+  padding-top: 20px;
+
+  > div:not(div:first-of-type) {
+    margin-top: 24px;
+  }
+`;
