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;
+    }
+`;
