Index: sources/client/src/components/user/Session/Buttons/index.js
===================================================================
--- sources/client/src/components/user/Session/Buttons/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/Buttons/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,38 @@
+import { sessionStatus } from '../../../../config/enums';
+
+import { RoundWrapper, FuncText, HelperText, PayButton } from './styles';
+
+const RoundButton = ({ text, bgColor, onClick }) => (
+    <RoundWrapper style={{ backgroundColor: bgColor }} onClick={onClick}>
+        <FuncText>{text}</FuncText>
+        <HelperText>Double-Tap</HelperText>
+    </RoundWrapper>
+);
+
+const Buttons = ({ status, handlePayButton, onClick }) => {
+    switch (status) {
+        case null:
+            return (
+                <RoundButton
+                    text='Започни'
+                    bgColor='#01a66f'
+                    onClick={onClick}
+                />
+            );
+        case sessionStatus.idle:
+        case sessionStatus.active:
+            return (
+                <RoundButton
+                    text='Заврши'
+                    bgColor='#d51e00'
+                    onClick={onClick}
+                />
+            );
+        case sessionStatus.over:
+            return <PayButton onClick={handlePayButton}>Плати</PayButton>;
+        default:
+            return null;
+    }
+};
+
+export default Buttons;
Index: sources/client/src/components/user/Session/Buttons/styles.js
===================================================================
--- sources/client/src/components/user/Session/Buttons/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/Buttons/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+
+export const RoundWrapper = styled(Button).attrs({})`
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 1px dashed black;
+    box-shadow: 0 0 7px 3px black;
+    flex-direction: column;
+    color: black;
+    text-align: center;
+`;
+
+export const FuncText = styled.h2`
+    font-style: italic;
+    font-weight: 600;
+    margin: 0;
+    margin-top: 20px;
+`;
+
+export const HelperText = styled.h6`
+    text-decoration: underline;
+    margin: 0;
+    margin-top: 40px;
+`;
+
+export const PayButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `#008080
+        `,
+        width: '200px',
+    },
+}))`
+    font-size: 25px;
+    font-style: italic;
+    box-shadow: 1px 1px 5px 1px black;
+    margin-top: 5vh;
+    :hover {
+        background-color: #007070;
+    }
+`;
Index: sources/client/src/components/user/Session/SessionGuest/index.js
===================================================================
--- sources/client/src/components/user/Session/SessionGuest/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/SessionGuest/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,100 @@
+import { useContext, useEffect } from 'react';
+import {
+    SessionInfo,
+    Input,
+    PersonIcon,
+    PhoneIcon,
+    PlateAndZoneWrapper,
+    ZoneSelectInput,
+    DropdownItem,
+} from './styles';
+
+import { sessionStatus as enumsSessionStatus } from '../../../../config/enums';
+import useGetData from '../../../../hooks/useGetData';
+import { UserContext } from '../../../../context/UserContext';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            height: 150,
+            width: '35px',
+        },
+    },
+};
+
+const SessionGuest = ({
+    sessionStatus,
+    sessionInfo,
+    zones,
+    data,
+    onFormChange,
+    setNewData,
+}) => {
+    const { user } = useContext(UserContext);
+    const { data: guest, isLoading: isGuestLoading } = useGetData({
+        url: `/guest/${user.id}`,
+    });
+
+    useEffect(() => {
+        if (!guest) return;
+        setNewData({ plate: guest.plate.plate, zone: data.zone });
+    }, [guest]);
+    console.log(sessionStatus);
+    return (
+        !isGuestLoading && <SessionInfo>
+            <Input
+                disabled
+                name='mobile'
+                placeholder='Телефонски број'
+                value={guest.mobile}
+                InputProps={{
+                    startAdornment: <PhoneIcon />,
+                }}
+            />
+            <Input
+                disabled
+                name='email'
+                placeholder='Емаил адреса'
+                value={guest.email}
+                InputProps={{
+                    startAdornment: <PersonIcon />,
+                }}
+            />
+            <PlateAndZoneWrapper>
+                <Input
+                    disabled
+                    name='plate'
+                    placeholder='Таблица...'
+                    style={{
+                        width: '49%',
+                        textAlign: 'center',
+                    }}
+                    value={guest.plate.plate}
+                />
+                <ZoneSelectInput
+                    MenuProps={MenuProps}
+                    name='zone'
+                    onChange={onFormChange}
+                    value={data.zone}
+                    inputProps={{
+                        readOnly:
+                            sessionStatus !== null
+                                
+                    }}
+                    $show={sessionStatus === null}
+                >
+                    <DropdownItem value='NONE'>
+                        <em>NONE</em>
+                    </DropdownItem>
+                    {zones.map((z, ind) => (
+                        <DropdownItem key={ind} value={z}>
+                            {z}
+                        </DropdownItem>
+                    ))}
+                </ZoneSelectInput>
+            </PlateAndZoneWrapper>
+        </SessionInfo>
+    );
+};
+
+export default SessionGuest;
Index: sources/client/src/components/user/Session/SessionGuest/styles.js
===================================================================
--- sources/client/src/components/user/Session/SessionGuest/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/SessionGuest/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+import TextField from '@mui/material/TextField';
+import PhoneI from '@mui/icons-material/Phone';
+import PersonI from '@mui/icons-material/Person';
+import { MenuItem, Select } from '@mui/material';
+
+export const SessionInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+    fullWidth: true,
+    sx: {
+        marginTop: '20px',
+    },
+})`
+    > div {
+        padding-left: 10px;
+    }
+    input {
+        color: white !important;
+        font-size: 1.2rem;
+        padding-left: 10px;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PersonIcon = styled(PersonI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PhoneIcon = styled(PhoneI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PlateAndZoneWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+`;
+
+export const ZoneSelectInput = styled(Select).attrs({})`
+    text-align: center;
+    position: relative;
+    width: 49%;
+    #mui-component-select-zone {
+        font-size: 1.5rem;
+        padding: 25px 30px 0 15px;
+        color: white !important;
+        font-size: 1.2rem;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    svg {
+        top: 40px;
+        right: 10px;
+        color: white !important;
+        display: ${(props) => (!props.$show ? 'none' : '')};
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const DropdownItem = styled(MenuItem).attrs({})`
+    justify-content: center;
+    border-top: 1px solid grey;
+    :first-of-type {
+        border: 0;
+    }
+`;
Index: sources/client/src/components/user/Session/SessionUser/index.js
===================================================================
--- sources/client/src/components/user/Session/SessionUser/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/SessionUser/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import {
+    SessionInfo,
+    PlateSelectInput,
+    PlateAndAddPlateBtnWrapper,
+    ZoneSelectInput,
+    DropdownItem,
+    AddIcon,
+    AddPlate,
+    Input,
+    SavePlate,
+    SaveIcon,
+    PlateDropdownItem,
+    RemoveIcon,
+} from './styles';
+
+import { sessionStatus as enumsSessionStatus } from '../../../../config/enums';
+import useForm from '../../../../hooks/useForm';
+import useSaveUserPlate from '../../../../hooks/useSaveUserPlate';
+import useDeleteUserPlate from '../../../../hooks/useDeleteUserPlate';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+import { IconButton } from '@mui/material';
+import useGetData from '../../../../hooks/useGetData';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 150,
+            width: '35px',
+        },
+    },
+};
+
+const SessionUser = ({
+    sessionStatus,
+    zones,
+    data,
+    onFormChange,
+    setNewData,
+}) => {
+    const { data: plates, isLoading: isLoadingPlates, setData: setPlates } = useGetData({
+        url: '/registiranParkirac/tablici',
+    });
+    const [newPlate, setNewPlate] = useState('');
+    const [toggleAddPlate, setToggleAddPlate] = useState(false);
+    const { saveUserPlate } = useSaveUserPlate();
+    const { deleteUserPlate } = useDeleteUserPlate();
+    const [isLoadingSavePlate, setIsLoadingSavePlate] = useState(false);
+    const [isLoadingDeletePlate, setIsLoadingDeletePlate] = useState({
+        state: false,
+        itemInd: null,
+    });
+    const savePlate = (plate) => {
+        setPlates(prevState => [...prevState, plate]);
+        setToggleAddPlate(false);
+        setNewData({ ...data, plate: newPlate });
+        setNewPlate('');
+    };
+
+    const handleSavePlate = () => {
+        saveUserPlate({
+            savePlate,
+            plate: newPlate,
+            setIsLoadingSavePlate,
+        });
+    };
+
+    const deletePlate = (plate) => {
+        let index = plates.indexOf(plate);
+        let _plates = [...plates];
+        _plates.splice(index, 1);
+        if (_plates.length > index) {
+            setNewData({ ...data, plate: _plates[index] });
+        } else {
+            index--;
+            if (_plates.length !== 0) {
+                setNewData({
+                    ...data,
+                    plate: _plates[_plates.length - 1],
+                });
+            } else {
+                setNewData({ ...data, plate: 'NONE' });
+            }
+        }
+        setPlates(_plates);
+    };
+
+    const handleDeletePlate = (e, plate) => {
+        e.stopPropagation();
+        let ind = plates.indexOf(plate);
+        deleteUserPlate({ deletePlate, plate, ind, setIsLoadingDeletePlate });
+    };
+
+    return (
+        <SessionInfo>
+            <PlateAndAddPlateBtnWrapper
+                center={sessionStatus !== null}
+            >
+                {!toggleAddPlate ? (
+                    <PlateSelectInput
+                        MenuProps={MenuProps}
+                        name='plate'
+                        onChange={onFormChange}
+                        value={data.plate}
+                        renderValue={(v) => v}
+                        inputProps={{
+                            readOnly:
+                                sessionStatus === null
+                                    ? false
+                                    : true,
+                        }}
+                        $show={sessionStatus === null}
+                    >
+                        <DropdownItem value='NONE'>
+                            <em>NONE</em>
+                        </DropdownItem>
+                        {!isLoadingPlates &&
+                            plates.map((p, ind) => (
+                                <PlateDropdownItem key={ind} value={p}>
+                                    {p}
+                                    {isLoadingDeletePlate.state &&
+                                    isLoadingDeletePlate.itemInd === ind ? (
+                                        <AbsoluteLoader
+                                            containerStyle={{
+                                                width: '41.19px',
+                                                height: '41.19px',
+                                            }}
+                                        />
+                                    ) : (
+                                        <IconButton
+                                            style={{
+                                                padding: '3px',
+                                                zIndex: 100,
+                                            }}
+                                            onClick={(e) =>
+                                                handleDeletePlate(e, p, ind)
+                                            }
+                                        >
+                                            <RemoveIcon />
+                                        </IconButton>
+                                    )}
+                                </PlateDropdownItem>
+                            ))}
+                    </PlateSelectInput>
+                ) : (
+                    <Input
+                        autoFocus
+                        disabled={
+                            sessionStatus === null
+                                ? false
+                                : true
+                        }
+                        name='newPlate'
+                        style={{
+                            width: '49%',
+                            textAlign: 'center',
+                        }}
+                        value={newPlate}
+                        onChange={(e) => setNewPlate(e.target.value)}
+                    />
+                )}
+                {sessionStatus === null ? (
+                    !toggleAddPlate ? (
+                        <AddPlate onClick={() => setToggleAddPlate(true)}>
+                            <AddIcon />
+                            таблица
+                        </AddPlate>
+                    ) : isLoadingSavePlate ? (
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '59.44px',
+                                height: '59.44px',
+                                margin: 'auto',
+                            }}
+                        />
+                    ) : (
+                        <SavePlate onClick={handleSavePlate}>
+                            <SaveIcon />
+                            сочувај
+                        </SavePlate>
+                    )
+                ) : null}
+            </PlateAndAddPlateBtnWrapper>
+            <ZoneSelectInput
+                MenuProps={MenuProps}
+                name='zone'
+                onChange={onFormChange}
+                value={data.zone}
+                inputProps={{
+                    readOnly:
+                        sessionStatus === null
+                            ? false
+                            : true,
+                }}
+                $show={sessionStatus === null}
+            >
+                <DropdownItem value='NONE'>
+                    <em>NONE</em>
+                </DropdownItem>
+                {zones.map((z, ind) => (
+                    <DropdownItem key={ind} value={z}>
+                        {z}
+                    </DropdownItem>
+                ))}
+            </ZoneSelectInput>
+        </SessionInfo>
+    );
+};
+
+export default SessionUser;
Index: sources/client/src/components/user/Session/SessionUser/styles.js
===================================================================
--- sources/client/src/components/user/Session/SessionUser/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/SessionUser/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,162 @@
+import styled from 'styled-components';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import SaveI from '@mui/icons-material/Save';
+import { MenuItem, Select } from '@mui/material';
+
+export const SessionInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5vh 25px 15px 25px;
+    margin-bottom: 6.5vh;
+`;
+
+export const Input = styled(TextField).attrs({
+    fullWidth: true,
+})`
+    height: 59.44px;
+    input {
+        text-align: center;
+        color: white !important;
+        font-size: 1.2rem;
+        padding-left: 10px;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PlateAndAddPlateBtnWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: ${(props) => (props.center ? 'center' : 'space-between')};
+    align-items: flex-end;
+    width: 100%;
+    margin-bottom: 5vh;
+    .MuiCircularProgress-svg {
+        color: ${(props) => props.theme.palette.third.main};
+    }
+`;
+
+export const ZoneSelectInput = styled(Select).attrs({})`
+    text-align: center;
+    position: relative;
+    width: 49%;
+    color: white;
+    #mui-component-select-zone {
+        font-size: 1.5rem;
+        padding: 16.5px 30px 16.5px 10px;
+        color: white !important;
+        font-size: 1.2rem;
+
+        ::placeholder {
+            opacity: 0.6;
+        }
+        :disabled {
+            -webkit-text-fill-color: white;
+        }
+    }
+    svg {
+        right: 10px;
+        color: white !important;
+        display: ${(props) => (!props.$show ? 'none' : '')};
+    }
+    fieldset {
+        border: 0;
+        border-bottom: 4px solid white !important;
+        border-radius: 25px;
+        padding: 0 10px;
+    }
+`;
+
+export const PlateSelectInput = styled(ZoneSelectInput)`
+    color: white;
+    font-weight: 500;
+    font-size: 1.15rem;
+`;
+
+export const DropdownItem = styled(MenuItem).attrs({})`
+    justify-content: center;
+    border-top: 1px solid grey;
+    :first-of-type {
+        border: 0;
+    }
+`;
+
+export const PlateDropdownItem = styled(MenuItem).attrs({})`
+    justify-content: space-between;
+    border-top: 1px solid grey;
+    padding-right: 5px;
+    padding-left: 10px;
+    :first-of-type {
+        border: 0;
+    }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon).attrs({
+    sx: {
+        fontSize: '2.5rem',
+    },
+})`
+    margin-right: 11px;
+`;
+
+export const RemoveIcon = styled(RemoveCircleIcon).attrs({
+    sx: {
+        fontSize: '2.2rem',
+        color: 'red',
+    },
+})``;
+
+export const SaveIcon = styled(SaveI).attrs({
+    sx: {
+        fontSize: '2.5rem',
+    },
+})`
+    margin-right: 11px;
+`;
+
+export const AddPlate = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'small',
+    sx: {
+        backgroundColor: `whiteSmoke`,
+        color: `${props.theme.palette.primary.main}`,
+        fontWeight: 600,
+        fontSize: 16,
+        height: 59.44,
+    },
+}))`
+    :hover {
+        background-color: #dcdcdc;
+    }
+`;
+
+export const SavePlate = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'small',
+    sx: {
+        backgroundColor: `whiteSmoke`,
+        color: `${props.theme.palette.third.main}`,
+        fontWeight: 600,
+        fontSize: 16,
+        height: 59.44,
+    },
+}))`
+    :hover {
+        background-color: #dcdcdc;
+    }
+`;
Index: sources/client/src/components/user/Session/index.js
===================================================================
--- sources/client/src/components/user/Session/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,386 @@
+import { useState, useEffect, useContext, useRef, useMemo } from 'react';
+import moment from 'moment';
+
+import SessionGuest from './SessionGuest';
+import SessionUser from './SessionUser';
+import Buttons from './Buttons';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+import { IconButton, Slide } from '@mui/material';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import {
+    Wrapper,
+    ButtonWrapper,
+    ModalContainer,
+    CloseIcon,
+    KeyValueWrapper,
+    Key,
+    Value,
+    PaymentMethodWrapper,
+    PayWithText,
+    PaymentMethodsWrapper,
+    PayButtonWrapper,
+    ModalPayButton,
+    CardDetails,
+    DateAndCCVWrapper,
+    ModalInput,
+    CreditCard,
+    ModalInputCardNumber,
+} from './styles';
+import Modal from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+
+import {
+    roles,
+    sessionStatus as enumsSessionStatus,
+} from '../../../config/enums';
+import theme from '../../../theme';
+import { UserContext } from '../../../context/UserContext';
+import useUserStartSession from '../../../hooks/useUserStartSession';
+import useForm from '../../../hooks/useForm';
+import useUserFinishedSession from '../../../hooks/useUserFinishedSession';
+import useUserPayForSession from '../../../hooks/useUserPayForSession';
+import useGetSessionOverInfo from '../../../hooks/useGetSessionOverInfo';
+import useGetData from '../../../hooks/useGetData';
+
+import { convertMinutesToString } from '../../../utils/convertMinToString';
+
+const normalizeSesionData = session => ({
+    plate: session?.plate?.plate ?? '',
+    zone: session?.parkingZone?.pzName ?? ''
+});
+
+const defaultTime = 15000;
+const Session = () => {
+    // const [timer, setTimer] = useState(10000);
+    // let timer = 10000;
+    // const timerInterval = setInterval(() => {
+    //     console.log('VIKTOR', timer);
+    //     // setTimer(defaultTime);
+    //     timer = 15000;
+    // }, timer);
+    // useEffect(() => {
+    //     return () => {
+    //         clearInterval(timerInterval);
+    //     }
+    // })
+    const { data: fetchedSelectZones, isLoading: isLoadingSelectZones } =
+        useGetData({ url: '/parkingZone/parkingZoneNames' });
+    const { user } = useContext(UserContext);
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [paymentMethod, setPaymentMethod] = useState('');
+    const [cardNumber, setCardNumber] = useState('');
+    const [cardExpDate, setCardExpDate] = useState('');
+    const [cardCCV, setCardCCV] = useState('');
+    const { data: session, isLoading: isLoadingSession, setData: setSession } = useGetData({
+        url: '/parkingSession',
+    });
+    console.log('SESSION', session);
+    const {
+        data: userSessionInfo,
+        onFormChange: onFormChangeUserSessionInfo,
+        setNewData: setNewUserSessionData,
+    } = useForm({
+        plate: 'NONE',
+        zone: 'NONE',
+    });
+    const { userFinishedSession } = useUserFinishedSession();
+    const timerRef = useRef(0);
+    const { userStartSession } = useUserStartSession();
+    const { userPayForSession, isLoading: isLoadingPayForSession } =
+        useUserPayForSession();
+    const {
+        getSessionInfoOver,
+        isLoading: isLoadingSessionInfoOver,
+        totalPrice,
+    } = useGetSessionOverInfo();
+    const cardNumberHandler = (e) => {
+        const newVal = e.target.value.replace(/\s+/g, '');
+        let parts = [];
+        for (let i = 0; i < newVal.length; i += 4) {
+            parts.push(newVal.substring(i, i + 4));
+        }
+        console.log(parts);
+        if (parts.length) {
+            setCardNumber(parts.join(' '));
+        } else {
+            setCardNumber(newVal);
+        }
+    };
+
+    const cardExpDateHandler = (e) => {
+        const newVal = e.target.value.replace(/[^0-9]/, '');
+        let first = newVal.substring(0, 2);
+        let second = newVal.substring(2, 4);
+        if (second !== '') {
+            setCardExpDate([first, second].join('/'));
+        } else {
+            setCardExpDate(newVal);
+        }
+    };
+
+    const handleStartSession = () => {
+        userStartSession({ sessionData: userSessionInfo, setSession });
+    };
+
+    const handleEndSession = () => {
+        userFinishedSession({ setSession });
+    };
+
+    const handlePayForSession = () => {
+        if (paymentMethod) {
+            if (
+                paymentMethod === 'card' &&
+                (cardNumber === '' || cardCCV === '' || cardExpDate === '')
+            ) {
+                return;
+            }
+            let paymentCredentials = null;
+            if (paymentMethod === 'card') {
+                paymentCredentials = {
+                    cardNumber: cardNumber,
+                    cardExpDate: cardExpDate,
+                    cardCCV: cardCCV,
+                };
+            }
+            userPayForSession({
+                method: paymentMethod,
+                paymentCredentials,
+            });
+        }
+    };
+
+    const checkForDoubleClick = (e) => {
+        timerRef.current++;
+        setTimeout(() => {
+            if (timerRef.current !== 0) {
+                timerRef.current = 0;
+            }
+        }, 500);
+        if (timerRef.current >= 2) {
+            timerRef.current = 0;
+            if (!session) {
+                handleStartSession();
+            } else if (
+                session.status === enumsSessionStatus.active ||
+                session.status === enumsSessionStatus.idle
+            ) {
+                handleEndSession();
+            }
+        }
+    };
+
+    const handlePayButton = () => {
+        setModalOpen(true);
+        if (totalPrice) return; // don't send request if they are already set
+        getSessionInfoOver();
+    };
+
+    useEffect(() => {
+        if(session) {
+            setNewUserSessionData(normalizeSesionData(session));
+        }
+    }, [session])
+
+    const totalTime = useMemo(() => {
+        if(session?.timeEnd && session?.timeStart) {
+            const start = moment(session.timeStart);
+            const end = moment(session.timeEnd);
+            const diffMin = Math.round(end.diff(start) / 60000);
+            return convertMinutesToString(diffMin);
+        }
+        return null;
+    }, [session])
+
+    return (
+        <>
+            <Modal
+                open={isModalOpen}
+                onClose={() => {
+                    setModalOpen(false);
+                }}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Slide in={isModalOpen}>
+                    <ModalContainer>
+                        <IconButton
+                            style={{
+                                marginLeft: 295,
+                            }}
+                            onClick={() => {
+                                setModalOpen(false);
+                            }}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                        {isLoadingSessionInfoOver ? ( // TODO FETCH SESSION DATA
+                            <AbsoluteLoader
+                                containerStyle={{
+                                    width: '200px',
+                                    height: '200px',
+                                    margin: 'auto',
+                                    marginTop: '50px',
+                                }}
+                            />
+                        ) : (
+                            <>
+                                <KeyValueWrapper>
+                                    <Key>Време:</Key>
+                                    <Value>{totalTime}</Value>
+                                </KeyValueWrapper>
+                                <KeyValueWrapper>
+                                    <Key>Вкупна сума:</Key>
+                                    <Value>{totalPrice} ден.</Value>
+                                </KeyValueWrapper>
+                                <PaymentMethodWrapper>
+                                    <PayWithText>Плати со:</PayWithText>
+                                    <PaymentMethodsWrapper>
+                                        <RadioGroup
+                                            aria-label='payment-methods'
+                                            name='payment-method'
+                                            value={paymentMethod}
+                                            onChange={(e) =>
+                                                setPaymentMethod(e.target.value)
+                                            }
+                                        >
+                                            <FormControlLabel
+                                                value='mobile'
+                                                control={
+                                                    <Radio
+                                                        sx={{
+                                                            color: theme.palette
+                                                                .primary.main,
+                                                            '&.Mui-checked': {
+                                                                color: theme
+                                                                    .palette
+                                                                    .primary
+                                                                    .main,
+                                                            },
+                                                        }}
+                                                    />
+                                                }
+                                                label='Мобилен'
+                                                labelPlacement='start'
+                                            />
+                                            <FormControlLabel
+                                                value='card'
+                                                control={
+                                                    <Radio
+                                                        sx={{
+                                                            color: theme.palette
+                                                                .primary.main,
+                                                            '&.Mui-checked': {
+                                                                color: theme
+                                                                    .palette
+                                                                    .primary
+                                                                    .main,
+                                                            },
+                                                        }}
+                                                    />
+                                                }
+                                                label='Картичка'
+                                                labelPlacement='start'
+                                            />
+                                        </RadioGroup>
+                                    </PaymentMethodsWrapper>
+                                </PaymentMethodWrapper>
+                                {paymentMethod === 'card' ? (
+                                    <CardDetails>
+                                        <ModalInputCardNumber
+                                            InputProps={{
+                                                startAdornment: <CreditCard />,
+                                            }}
+                                            onChange={cardNumberHandler}
+                                            value={cardNumber}
+                                        />
+                                        <DateAndCCVWrapper>
+                                            <ModalInput
+                                                InputProps={{
+                                                    placeholder: 'Exp: 11/21',
+                                                }}
+                                                style={{
+                                                    width: '45%',
+                                                }}
+                                                onChange={cardExpDateHandler}
+                                                value={cardExpDate}
+                                            />
+                                            <ModalInput
+                                                InputProps={{
+                                                    placeholder: 'CCV',
+                                                }}
+                                                style={{ width: '35%' }}
+                                                value={cardCCV}
+                                                onChange={(e) =>
+                                                    setCardCCV(e.target.value)
+                                                }
+                                            />
+                                        </DateAndCCVWrapper>
+                                    </CardDetails>
+                                ) : null}
+                                <PayButtonWrapper>
+                                    {isLoadingPayForSession ? (
+                                        <AbsoluteLoader
+                                            containerStyle={{
+                                                width: '51px',
+                                                height: '51px',
+                                                margin: 'auto',
+                                            }}
+                                        />
+                                    ) : (
+                                        <ModalPayButton
+                                            onClick={handlePayForSession}
+                                        >
+                                            Плати
+                                        </ModalPayButton>
+                                    )}
+                                </PayButtonWrapper>
+                            </>
+                        )}
+                    </ModalContainer>
+                </Slide>
+            </Modal>
+            {!isLoadingSession && (
+                <Wrapper>
+                    {user.role === roles.user ? (
+                        <SessionUser
+                            sessionStatus={session?.status ?? null}
+                            sessionInfo={normalizeSesionData(session)}
+                            zones={fetchedSelectZones ?? []}
+                            data={userSessionInfo}
+                            onFormChange={onFormChangeUserSessionInfo}
+                            setNewData={setNewUserSessionData}
+                        />
+                    ) : (
+                        <SessionGuest
+                            sessionStatus={session?.status ?? null}
+                            sessionInfo={normalizeSesionData(session)}
+                            zones={fetchedSelectZones ?? []}
+                            data={userSessionInfo}
+                            onFormChange={onFormChangeUserSessionInfo}
+                            setNewData={setNewUserSessionData}
+                        />
+                    )}
+                    <ButtonWrapper>
+                        <Buttons
+                            status={session?.status ?? null}
+                            handlePayButton={handlePayButton}
+                            onClick={checkForDoubleClick}
+                        />
+                    </ButtonWrapper>
+                </Wrapper>
+            )}
+        </>
+    );
+};
+
+export default Session;
Index: sources/client/src/components/user/Session/styles.js
===================================================================
--- sources/client/src/components/user/Session/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/Session/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,170 @@
+import styled from 'styled-components';
+import CIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import { Button, TextField } from '@mui/material';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100%;
+    max-width: 500px;
+    border-radius: 10px;
+    position: relative;
+`;
+
+export const ButtonWrapper = styled.div`
+    bottom: 0;
+    margin: auto;
+    margin-top: 5vh;
+`;
+
+export const ModalContainer = styled(Box).attrs({
+    width: 350,
+    minHeight: 421,
+    bgcolor: '#2b7878fa',
+    boxShadow: 24,
+    zIndex: 100,
+    marginBottom: '10%',
+    color: 'whiteSmoke',
+})`
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    position: relative;
+`;
+
+export const CloseIcon = styled(CIcon).attrs({
+    sx: {
+        color: 'red',
+        fontSize: '2.5rem',
+    },
+})``;
+
+export const KeyValueWrapper = styled.div`
+    text-align: center;
+    margin-bottom: 20px;
+`;
+
+export const Key = styled.p`
+    margin: 0;
+    margin-bottom: 10px;
+    font-size: 1.15rem;
+`;
+
+export const Value = styled.p`
+    margin: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+`;
+
+export const PaymentMethodWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+`;
+
+export const PayWithText = styled.p`
+    margin: 0;
+    display: inline-block;
+    font-size: 1.15rem;
+    margin-right: 40px;
+`;
+
+export const PaymentMethodsWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    span {
+        font-size: 1.15rem;
+        font-weight: 600;
+    }
+`;
+
+export const PayButtonWrapper = styled.div`
+    width: 100%;
+    text-align: center;
+    margin-top: 50px;
+`;
+
+export const ModalPayButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    sx: {
+        backgroundColor: `${props.theme.palette.primary.main}`,
+        fontSize: '1.25rem',
+    },
+}))`
+    :hover {
+        background-color: ${(props) => props.theme.palette.primary.dark};
+    }
+`;
+
+export const CardDetails = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0 30px;
+`;
+
+export const DateAndCCVWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    padding-right: 5%;
+`;
+
+export const ModalInput = styled(TextField).attrs({
+    fullWidth: true,
+    sx: {
+        marginTop: '10px',
+        padding: 0,
+    },
+})`
+    input {
+        text-align: center;
+        font-size: 1.15rem;
+        font-weight: 500;
+        border: 2px solid ${(props) => props.theme.palette.primary.main};
+        border-radius: 10px;
+        width: 100%;
+        color: whiteSmoke;
+        :focus {
+            border: 2px dashed ${(props) => props.theme.palette.primary.main};
+        }
+        ::placeholder {
+            opacity: 0.6;
+        }
+    }
+    > div {
+        padding: 0;
+    }
+    fieldset,
+    .Mui-focused {
+        border: 0;
+    }
+`;
+
+export const ModalInputCardNumber = styled(ModalInput)`
+    input {
+        padding-left: 42px;
+    }
+    fieldset {
+        position: relative;
+    }
+`;
+
+export const CreditCard = styled(CreditCardIcon).attrs((props) => ({
+    sx: {
+        fontSize: '2rem',
+        color: `${props.theme.palette.primary.main}`,
+        position: 'absolute',
+        marginLeft: '10px',
+    },
+}))``;
