diff --git a/pairent_backend/requirements.txt b/pairent_backend/requirements.txt
index fb3ac95..d495564 100644
--- a/pairent_backend/requirements.txt
+++ b/pairent_backend/requirements.txt
@@ -3,4 +3,5 @@ django
djangorestframework
django-cors-headers
Pillow
-requests
\ No newline at end of file
+requests
+oidc-client
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/avatar-test.jpg b/pairent_frontend_react/public/images/avatar-test.jpg
new file mode 100644
index 0000000..88a0230
Binary files /dev/null and b/pairent_frontend_react/public/images/avatar-test.jpg differ
diff --git a/pairent_frontend_react/public/images/icons/camera.svg b/pairent_frontend_react/public/images/icons/camera.svg
new file mode 100644
index 0000000..e76a820
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/camera.svg
@@ -0,0 +1,3 @@
+
diff --git a/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx b/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx
new file mode 100644
index 0000000..02a6c37
--- /dev/null
+++ b/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx
@@ -0,0 +1,360 @@
+import React, { useEffect, useState }from 'react';
+import styled, { keyframes } from 'styled-components';
+import SVGIcon from "../../components/UI/Icon/SVGIcon";
+import { User } from '../../API/User';
+
+import { useFetching } from '../../hooks/useFetching';
+
+import { Row, Col, Stack } from 'react-bootstrap';
+
+const BackButton = styled.button`
+ border: 1px solid #c2c4c2;
+ display: inline-block;
+ padding: 12px 16px;
+ border-radius: 14px;
+
+ background: #ffffff;
+ color: gray;
+ box-shadow: 0 2px 1px #00000010;
+
+ font-size: 12pt;
+ float: left;
+
+ & ${SVGIcon} {
+ transform: translate(-4px, 2px)
+ }
+`;
+
+const Title = styled.div`
+ height: 100px;
+ padding-top: 32px;
+ z-index: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ top: 0;
+
+ & h2 {
+ margin-left: 28px;
+ font-weight: 600;
+ padding: 0;
+ display: inline-block;
+ transform: translateY(4px);
+ }
+
+ & span {
+ margin-left: 14px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 19px;
+ }
+`;
+
+const CabinetSection = styled.div`
+ width: 1270px;
+ height: 650px;
+
+ background: #FFFFFF;
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
+ border-radius: 20px;
+ margin: 27px auto;
+`;
+
+const CabinetContainer = styled(Row)`
+ padding: 30px 26px 30px 36px;
+`;
+
+const Avatar = styled.img`
+ width: 256px;
+ height: 256px;
+
+ margin: 25px 0px 0px 65px;
+
+ border-radius: 50%;
+ box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.34);
+`;
+
+const UploadPhoto = styled.button`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 192px;
+ height: 32px;
+
+ margin: 16px auto 0px;
+
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #FFFFFF;
+
+ background: #007EFF;
+ border-radius: 12px;
+`;
+
+const WelcomeText = styled.p`
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 24px;
+`;
+
+const MainText = styled.p`
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 24px;
+`;
+
+const InputBlock = styled.input`
+ border: 1px solid #CCCCCC;
+ border-radius: 12px;
+
+ width: ${props => props.width}px;
+ height: ${props => props.height}px;
+
+ padding-left: 10px;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 18px;
+ color: #000000;
+
+ &::placeholder {
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 24px;
+ color: #CCCCCC;
+ }
+`;
+
+const TextAreaBlock = styled.textarea`
+ border: 1px solid #CCCCCC;
+ border-radius: 12px;
+
+ margin: 16px 0px 0px 55px;
+ resize: none;
+
+ padding: 8px;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 18px;
+ color: #000000;
+
+ &::placeholder {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 24px;
+ color: #CCCCCC;
+ }
+`;
+
+const CharacterTraitBlock = styled.div`
+ width: calc(100% + 15px);
+ height: 28px;
+
+ padding: 0;
+
+ font-size: 14px;
+ line-height: 28px;
+ display: inline-block;
+ align-items: center;
+ text-align: center;
+ color: #FFFFFF;
+
+ background: ${props => props.background};
+ border-radius: 20px;
+`;
+
+const ButtonCircleChangeTrait = styled.button`
+ width: 28px;
+ height: 28px;
+
+ padding: 0px;
+
+ font-weight: 700;
+ font-size: 20px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 70%;
+
+ color: #FFFFFF;
+ background: #D9D9D9;
+`;
+
+const ButtonChangeTrait = styled.button`
+ margin-top: 14px;
+
+ width: auto;
+ height: 27px;
+
+ padding: 0;
+
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 17px;
+
+ text-align: left;
+
+ color: #007EFF;
+ background: none;
+`;
+
+const InformationBlock = (props) => {
+ return (
+ <>
+
+
+ {props.title}
+
+
+ {props.text}
+
+
+
+ );
+}
+
+const InformationBlockInput = (props) => {
+ return (
+ <>
+
+
+ {props.title}
+
+
+
+
+
+
+ );
+}
+
+const TraitsBlock = (props) => {
+ const list = props.list;
+
+ if (list.length == 0) return (
+ <>
+ Вы ничего не указали
+
+ );
+
+ return (
+ <>
+
+ {
+ list.map((el, i) => {
+ return (
+
+
+ {el.text}
+
+
+ );
+ })
+ }
+ {props.button
+ ?
+ <>
+
+
+ +
+
+
+
+ :
+ <>
+ Изменить..
+
+ }
+
+
+ );
+}
+
+
+const PersonalCabinet = function () {
+
+ const [user, setUser] = useState()
+ const userID = 1;
+
+ const [fetchUser, isUserLoading, userError] = useFetching(async (userID) => {
+ const response = await User.getById(userID);
+ setUser(response)
+ console.log(user.name)
+ })
+
+ useEffect(() => {
+ fetchUser(userID)
+ }, [])
+
+ const TraitsListOne = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'},
+ {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}]
+
+ const TraitsListTwo = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'},
+ {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}, {text: 'Мудрость', color: '#FF5923'},
+ {text: 'Адекватность', color: '#2196F4'}, {text: 'Щедрость', color: '#FFC308'}, {text: 'Вежливость', color: '#9D28B2'}]
+
+ const TraitsListThree = [{text: 'Курит', color: '#94740B'}, {text: 'Равнодушие', color: '#D9B8B0'}, {text: 'Эгоист', color: '#6E3F58'}, {text: 'Лень', color: '#9F6844'},
+ {text: 'Лживость', color: '#AD9029'}, {text: 'Диструктивность', color: '#9A150C'}, {text: 'Токсичность', color: '#608426'}]
+
+ return (
+ <>
+
+ <BackButton>
+ <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>
+ Вернуться назад
+ </BackButton>
+ <h2>Личный кабинет<span>/ Мои данные</span></h2>
+
+
+
+
+
+ Добрый день, Александр!
+ Ваш статус - Студент
+
+
+
+ Загрузить фото
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ваши личностные характеристики
+
+ Желаемые черты соседа
+
+ Нежелаемые черты соседа
+
+
+
+
+
+
+ );
+};
+
+export default PersonalCabinet;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/router/index.jsx b/pairent_frontend_react/src/router/index.jsx
index 86ad7a6..3101195 100644
--- a/pairent_frontend_react/src/router/index.jsx
+++ b/pairent_frontend_react/src/router/index.jsx
@@ -6,6 +6,7 @@ import PsychTest from "../pages/PsychTest";
import Tinder from "../pages/Tinder";
import LoginPage from "../pages/LoginPage";
import LoggedIn from "../pages/LoggedIn";
+import PersonalCabinet from "../pages/PersonalCabinet";
// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
// export const privateRoutes = [
@@ -25,6 +26,7 @@ export default Object.freeze({
{ path: "/login", component: , exact: true },
{ path: "/sign-in", component: , exact: true },
{ path: "/psych_test", component: , exact: true },
+ { path: "/personal_cabinet", component: , exact: true },
],
privateRoutes: [],
});