Index: sources/client/src/components/user/MyProfile/index.js
===================================================================
--- sources/client/src/components/user/MyProfile/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/MyProfile/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,164 @@
+import { useState, useContext, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useUpdateUserProfile from '../../../hooks/useUpdateUserProfile';
+import useGetData from '../../../hooks/useGetData';
+
+import {
+    CredentialsWrapper,
+    Input,
+    LockIcon,
+    PersonIcon,
+    PhoneIcon,
+    EditButton,
+    FullNameWrapper,
+    Wrapper,
+    ButtonsWrapper,
+    SaveButton,
+    CancelButton,
+    LockOpenIcon,
+} from './styles';
+import { IconButton } from '@mui/material';
+
+import { UserContext } from '../../../context/UserContext';
+
+const normalizeProfile = (profile) => ({
+    firstName: profile.firstName,
+    lastName: profile.lastName,
+    email: profile.email,
+    mobile: profile.mobile,
+    plates: profile.plates
+});
+
+const MyProfile = () => {
+    const { user } = useContext(UserContext);
+    const { data: userProfile, isLoading: isUserProfileLoading } = useGetData({
+        url: `/registriranParkirac/${user.id}`,
+    });
+    const [isEditActivated, setIsEditActivated] = useState(false);
+    const { data, onFormChange, setNewData } = useForm(null);
+    const [password, setPassword] = useState('');
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const { updateUserProfile } = useUpdateUserProfile();
+
+    const handleEditButton = () => {
+        setIsEditActivated(true);
+    };
+
+    const handleOnCancel = () => {
+        setIsEditActivated(false);
+        setNewData(normalizeProfile(userProfile));
+        setPassword('');
+    };
+
+    const successfulSave = () => {
+        setIsEditActivated(false);
+        setPassword('');
+    }
+
+    const handleOnSave = () => {
+        const updatedUserData = {
+            ...data,
+            password,
+        };
+        updateUserProfile({
+            userData: updatedUserData,
+            id: user.id,
+            successfulSave,
+        });
+    };
+
+    useEffect(() => {
+        if(!userProfile) return;
+        setNewData(normalizeProfile(userProfile));
+    }, [userProfile]);
+
+    return (
+        <Wrapper>
+            <CredentialsWrapper>
+                <FullNameWrapper>
+                    <Input
+                        disabled={!isEditActivated}
+                        name='firstName'
+                        placeholder='Име'
+                        style={{
+                            width: '49%',
+                        }}
+                        value={data.firstName}
+                        onChange={onFormChange}
+                    />
+                    <Input
+                        disabled={!isEditActivated}
+                        name='lastName'
+                        placeholder='Презиме'
+                        style={{
+                            width: '49%',
+                        }}
+                        value={data.lastName}
+                        onChange={onFormChange}
+                    />
+                </FullNameWrapper>
+                <Input
+                    disabled={!isEditActivated}
+                    name='mobile'
+                    placeholder='Телефонски број'
+                    value={data.mobile}
+                    onChange={onFormChange}
+                    InputProps={{
+                        startAdornment: <PhoneIcon />,
+                    }}
+                />
+                <Input
+                    disabled={!isEditActivated}
+                    name='email'
+                    placeholder='Емаил адреса'
+                    value={data.email}
+                    onChange={onFormChange}
+                    InputProps={{
+                        startAdornment: <PersonIcon />,
+                    }}
+                />
+                <Input
+                    disabled={!isEditActivated}
+                    name='password'
+                    placeholder='Лозинка'
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    InputProps={{
+                        startAdornment: (
+                            <IconButton
+                                style={{ padding: 0 }}
+                                onClick={() =>
+                                    setIsPasswordVisible(
+                                        !isPasswordVisible && isEditActivated
+                                    )
+                                }
+                            >
+                                {isPasswordVisible ? (
+                                    <LockOpenIcon />
+                                ) : (
+                                    <LockIcon />
+                                )}
+                            </IconButton>
+                        ),
+                    }}
+                    type={
+                        isPasswordVisible && isEditActivated
+                            ? 'text'
+                            : 'password'
+                    }
+                />
+            </CredentialsWrapper>
+            {isEditActivated ? (
+                <ButtonsWrapper>
+                    <CancelButton onClick={handleOnCancel}>Откажи</CancelButton>
+                    <SaveButton onClick={handleOnSave}>Сочувај</SaveButton>
+                </ButtonsWrapper>
+            ) : (
+                <EditButton onClick={handleEditButton}>Уреди</EditButton>
+            )}
+        </Wrapper>
+    );
+};
+
+export default MyProfile;
Index: sources/client/src/components/user/MyProfile/mockData.js
===================================================================
--- sources/client/src/components/user/MyProfile/mockData.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/MyProfile/mockData.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,6 @@
+export const mockProfileData = {
+    firstName: 'Виктор',
+    lastName: 'Тасевски',
+    phoneNumber: '071312312',
+    email: 'viktor-tasevski@hotmail.com'
+};
Index: sources/client/src/components/user/MyProfile/styles.js
===================================================================
--- sources/client/src/components/user/MyProfile/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/user/MyProfile/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,173 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhoneI from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PersonI from '@mui/icons-material/Person';
+import LockI from '@mui/icons-material/Lock';
+import EditI from '@mui/icons-material/Edit';
+import CancelI from '@mui/icons-material/Cancel';
+import SaveI from '@mui/icons-material/Save';
+import LockOpenI from '@mui/icons-material/LockOpen';
+
+export const Wrapper = styled.div`
+    text-align: center;
+`;
+
+export const CredentialsWrapper = 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 ;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LockI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const LockOpenIcon = styled(LockOpenI).attrs({
+    sx: {
+        fontSize: '2rem',
+        color: 'white',
+    },
+})``;
+
+export const PersonIcon = styled(PersonI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhoneI).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+const EditIcon = styled(EditI).attrs({
+    sx: {
+        width: '1.5rem',
+        height: '100%'
+    }
+})``;
+
+const CancelIcon = styled(CancelI).attrs({
+  sx: {
+    width: '1.5rem',
+    height: '100%',
+  },
+})``;
+
+const SaveIcon = styled(SaveI).attrs({
+  sx: {
+    width: '1.5rem',
+    height: '100%',
+  },
+})``;
+
+export const SaveButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    width: '40%',
+    backgroundColor: 'white',
+  },
+  startIcon: <SaveIcon />,
+}))`
+  color: ${(props) => props.theme.palette.primary.main};
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const CancelButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    width: '35%',
+    backgroundColor: 'white',
+  },
+  startIcon: <CancelIcon />,
+}))`
+  color: ${(props) => props.theme.palette.error.main};
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  border-radius: 15px;
+  font-size: 1rem;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const EditButton = styled(Button).attrs((props) => ({
+    variant: 'contained',
+    size: 'large',
+    startIcon: <EditIcon />,
+    sx: {
+        width: '40%',
+        backgroundColor: 'white',
+    },
+}))`
+    margin-top: 5vh;
+    box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+    color: ${(props) => props.theme.palette.third.main};
+    border-radius: 15px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    :hover {
+        background-color: ${(props) =>
+            props.theme.palette.background.whiteSmoke};
+    }
+`;
+
+export const FullNameWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const ButtonsWrapper = styled.div`
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 25px;
+`;
