diff --git a/frontend/src/components/ProfileSideBar.vue b/frontend/src/components/ProfileSideBar.vue
new file mode 100644
index 0000000..3fbca75
--- /dev/null
+++ b/frontend/src/components/ProfileSideBar.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="sidebar">
+        <div :class="{ active: isActive('/profile/dashboard') }">
+            <router-link to="/profile/dashboard">
+                <p>
+                    Мой профиль
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/rents') }">
+            <router-link to="/profile/rents">
+                <p>
+                    Мои аренды
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/edit') }">
+            <router-link to="/profile/edit">
+                <p>
+                    Редактировать профиль
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/change-password') }">
+            <router-link to="/profile/change-password">
+                <p>
+                    Изменить пароль
+                </p>
+            </router-link>
+        </div>
+        <div @click="logoutUser">
+            <p>
+                Выйти
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import {logoutUser} from "@/services/authService.js";
+
+export default {
+    name: "ProfileSideBar",
+    methods: {
+        logoutUser,
+        isActive(route) {
+            return this.$route.path === route;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.sidebar {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar div {
+    padding: 8px;
+    border-left: 3px solid rgba(0, 0, 0, 0.2);
+}
+
+.sidebar div.active {
+    border-left: 3px solid #6A983C;
+}
+
+p {
+    margin-left: 8px;
+    cursor: pointer;
+    color: black;
+    font-size: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index 27a4ee9..bb1a1af 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -19,7 +19,7 @@ export default {
     },
 
     methods: {
-        openProfile() {
+        openLogin() {
             this.showLoginModal = true
         },
         logout() {
@@ -47,11 +47,11 @@ export default {
             </div>
             <div class="profile-basket">
                 <button v-if="!isAuthenticated">
-                    <img src="../assets/svg/profile.svg" alt="profile" @click="openProfile"/>
-                </button>
-                <button v-if="isAuthenticated" @click="logout">
-                    Выйти
+                    <img src="../assets/svg/profile.svg" alt="profile" @click="openLogin"/>
                 </button>
+                <router-link v-if="isAuthenticated" to="/profile/dashboard">
+                    <img src="../assets/svg/profile.svg" alt="profile"/>
+                </router-link>
                 <button>
                     <img src="../assets/svg/basket.svg" alt="basket"/>
                 </button>
diff --git a/frontend/src/js/router.js b/frontend/src/js/router.js
index 3c16e8e..7afeb9b 100644
--- a/frontend/src/js/router.js
+++ b/frontend/src/js/router.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import {isUserAdmin} from "@/services/authService.js";
+import {isUserAdmin, isUserAuthenticated} from "@/services/authService.js";
 import HomeView from '@/views/HomeView.vue'
 import AdminOrders from "@/views/admin/AdminOrders.vue";
 import AdminEmployees from "@/views/admin/AdminEmployees.vue";
@@ -9,6 +9,10 @@ import AdminReviews from "@/views/admin/AdminReviews.vue";
 import AdminStatistics from "@/views/admin/AdminStatistics.vue";
 import AdminTools from "@/views/admin/AdminTools.vue";
 import AdminCategories from "@/views/admin/AdminCategories.vue";
+import ProfileView from "@/views/profile/ProfileView.vue";
+import MyRents from "@/views/profile/MyRents.vue";
+import EditProfile from "@/views/profile/EditProfile.vue";
+import ChangePassword from "@/views/profile/ChangePassword.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -74,6 +78,38 @@ const router = createRouter({
         requiresAdmin: true,
       },
     },
+    {
+      path: '/profile/dashboard',
+      name: 'profile-dashboard',
+      component: ProfileView,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/rents',
+      name: 'profile-rents',
+      component: MyRents,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/edit',
+      name: 'profile-edit',
+      component: EditProfile,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/change-password',
+      name: 'profile-change-password',
+      component: ChangePassword,
+      meta: {
+        requiresLogin: true
+      }
+    },
   ],
 })
 
@@ -83,6 +119,11 @@ router.beforeEach((to, from, next) => {
   } else {
     next();
   }
+  if (to.meta.requiresLogin && !isUserAuthenticated()){
+    next({ name: 'home' });
+  } else {
+    next();
+  }
 });
 
 export default router
diff --git a/frontend/src/services/authService.js b/frontend/src/services/authService.js
index 16af6ad..eff49b8 100644
--- a/frontend/src/services/authService.js
+++ b/frontend/src/services/authService.js
@@ -47,8 +47,10 @@ export const storeUserInfo = (token) => {
   const decodedToken = jwtDecode(token);
   const isAdmin = (decodedToken.role === "worker") || false;
   const isAuthenticated = true;
+  const id = decodedToken.sub
 
   localStorage.setItem('isAdmin', isAdmin.toString());
+  localStorage.setItem('id', id);
   localStorage.setItem('isAuthenticated', isAuthenticated.toString());
   store.commit('login')
 }
@@ -73,6 +75,10 @@ export const logoutUser = () => {
   localStorage.removeItem('access_token');
   localStorage.removeItem('isAdmin');
   localStorage.removeItem('isAuthenticated');
+  localStorage.removeItem('id')
+  store.dispatch('logout').then(() => {
+    window.location.href = '/'
+  })
 };
 
 export const refreshToken = async () => {
diff --git a/frontend/src/services/profileServices.js b/frontend/src/services/profileServices.js
new file mode 100644
index 0000000..7a6e170
--- /dev/null
+++ b/frontend/src/services/profileServices.js
@@ -0,0 +1,56 @@
+import axios from 'axios';
+import { useToast } from 'vue-toastification'
+
+const toast = useToast()
+
+const API_URL = 'http://localhost:8000/api/clients';
+
+
+export const getProfileData = async (userData) => {
+  try{
+    const response = await axios.get(`${API_URL}/${localStorage.getItem('id')}/private`);
+    return response.data
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+};
+
+export const updateProfileData = async (profileData) => {
+  try{
+    const response = await axios.patch(`${API_URL}/${localStorage.getItem('id')}`, profileData, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    toast.success("Данные успешно обновлены!")
+    return "SUCCESS"
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+}
+
+export const changePassword = async (formData) => {
+  try{
+    const response = await axios.patch(`${API_URL}/${localStorage.getItem('id')}/password`, formData, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    toast.success("Пароль успешно обновлен!")
+    return "SUCCESS"
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 321b540..d15aaae 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -14,7 +14,9 @@ export default{
     },
     beforeMount() {
         getAllCategories().then((res) => {
-            if (res === "ERROR") window.location.href = '/'
+            if (res === "ERROR") {
+                this.isLoading = false
+            }
             else {
                 this.isLoading = false
                 this.categories = res
diff --git a/frontend/src/views/profile/ChangePassword.vue b/frontend/src/views/profile/ChangePassword.vue
new file mode 100644
index 0000000..5ddb4a5
--- /dev/null
+++ b/frontend/src/views/profile/ChangePassword.vue
@@ -0,0 +1,138 @@
+<template>
+    <UploadProgress v-if="isLoading"  />
+    <main>
+        <ProfileSideBar />
+        <div class="content">
+            <h2>Изменить пароль</h2>
+            <form @submit.prevent="handleSubmit" novalidate>
+                <div class="password">
+                    <label for="password">Текущий пароль</label> <br/>
+                    <input id="password" type="password" placeholder="Текущий пароль" v-model="form.current_password" required/>
+                </div>
+                <div class="password">
+                    <label for="new-password">Текущий пароль</label> <br/>
+                    <input id="new-password" type="password" placeholder="Новый пароль" v-model="form.new_password" required/>
+                </div>
+                <div class="password">
+                    <label for="confirm-password">Подтвердите пароль</label> <br/>
+                    <input id="confirm-password" type="password" placeholder="Подтвердите пароль" v-model="confirmPassword" required/>
+                </div>
+                <div class="button-container">
+                    <button type="submit" :disabled="isButtonDisabled">
+                        Обновить пароль
+                    </button>
+                </div>
+
+            </form>
+
+        </div>
+    </main>
+</template>
+
+<script>
+import ProfileSideBar from "@/components/ProfileSideBar.vue";
+import UploadProgress from "@/components/UploadProgress.vue";
+import {changePassword} from "@/services/profileServices.js";
+import {useToast} from "vue-toastification";
+
+export default {
+    name: "ChangePassword",
+    components: {UploadProgress, ProfileSideBar},
+    setup() {
+        const toast = useToast();
+        return {toast}
+    },
+    data(){
+        return {
+            isLoading: false,
+            confirmPassword: "",
+            form: {
+                current_password: "",
+                new_password: "",
+            }
+
+        }
+    },
+    computed: {
+        isButtonDisabled() {
+            return !this.form.current_password || !this.form.new_password || !this.confirmPassword
+        },
+    },
+    methods: {
+        handleSubmit() {
+            if(this.form.new_password !== this.confirmPassword){
+                this.toast.error("Введенные пароли не совпадают!")
+                return
+            }
+            this.isLoading = true
+            changePassword(this.form).then((res) => {
+                this.isLoading = false
+            })
+        }
+    },
+}
+</script>
+
+<style scoped>
+main {
+    padding: 32px 64px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.content{
+    width: 879px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    padding: 32px 64px;
+}
+
+h2 {
+    font-weight: 600;
+    font-size: 20px;
+}
+
+.password {
+    margin-top: 32px;
+}
+
+label {
+    font-size: 16px;
+    color: #575757;
+}
+
+input {
+    margin-top: 8px;
+}
+
+input[type="password"] {
+    width: 350px;
+    padding: 11px 24px;
+    background-color: #F9F9F9;
+    border: 1px solid #D1D1D1;
+    border-radius: 12px;
+}
+
+.button-container {
+    margin-top: 48px;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+form button {
+    width: 194px;
+    padding: 16px;
+    background-color: #6A983C;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 12px;
+    border: 2px solid #46760A;
+}
+
+form button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/profile/EditProfile.vue b/frontend/src/views/profile/EditProfile.vue
new file mode 100644
index 0000000..7b7a841
--- /dev/null
+++ b/frontend/src/views/profile/EditProfile.vue
@@ -0,0 +1,215 @@
+<template>
+    <UploadProgress v-if="isLoading"  />
+    <main>
+        <ProfileSideBar />
+        <div class="content">
+            <h2>Редактировать профиль</h2>
+            <form @submit.prevent="handleSubmit" novalidate>
+                <div class="image-loader">
+                    <label for="image">Загрузите новое изображение профиля</label> <br/>
+                    <input type="file" accept="image/png, image/jpeg" id="image" @change="onFileChange">
+                </div>
+                <div class="img-container">
+                    <img v-if="form.newImage"
+                         :src="form.newImage"
+                         alt="image"
+                         class="img"
+                    />
+                    <div v-else class="no-image"></div>
+                </div>
+                <div class="name-surname">
+                    <div class="name">
+                        <label for="name">Имя</label> <br/>
+                        <input type="text" id="name" v-model="form.newName" />
+                    </div>
+                    <div class="surname">
+                        <label for="surname">Фамилия</label> <br/>
+                        <input type="text" id="surname" v-model="form.newSurname" />
+                    </div>
+                </div>
+                <div class="name-surname">
+                    <div class="phone">
+                        <label for="phone">Телефон</label>
+                        <input type="text" id="phone" v-model="form.newPhone">
+                    </div>
+                    <div class="email">
+                        <label for="email">Электронная почта</label> <br/>
+                        <input type="text" id="email" :placeholder="profile.email" readonly>
+                    </div>
+                </div>
+
+                <div class="button-container">
+                    <button type="submit" :disabled="isButtonDisabled">
+                        Обновить данные
+                    </button>
+                </div>
+
+            </form>
+
+        </div>
+    </main>
+</template>
+
+<script>
+import ProfileSideBar from "@/components/ProfileSideBar.vue";
+import UploadProgress from "@/components/UploadProgress.vue";
+import {getProfileData, updateProfileData} from "@/services/profileServices.js";
+
+export default {
+    name: "EditProfile",
+    components: {UploadProgress, ProfileSideBar},
+    data(){
+        return {
+            isLoading: true,
+            profile: {},
+            form: {
+                newImage: "",
+                newName: "",
+                newSurname: "",
+                newPhone: "",
+            }
+
+        }
+    },
+    beforeMount() {
+        getProfileData().then((data) => {
+            this.profile = data
+            this.form.newName = data.name
+            this.form.newSurname = data.surname
+            this.form.newImage = data.image
+            this.form.newPhone = data.phone
+            this.isLoading = false
+        })
+    },
+    computed: {
+        isButtonDisabled() {
+            return (this.form.newImage === this.profile.image
+                && this.form.newName === this.profile.name
+                && this.form.newSurname === this.profile.surname
+                && this.form.newPhone === this.profile.phone)
+                || !this.form.newName || !this.form.newSurname
+                || (this.form.newPhone && !this.profile.phone)
+        },
+    },
+    methods: {
+        onFileChange(event) {
+            const file = event.target.files[0];
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.form.newImage = e.target.result; // Сохранение base64 строки
+            };
+            reader.readAsDataURL(file);
+        },
+        handleSubmit() {
+            this.isLoading = true
+            const data = {}
+            if(this.form.newImage !== this.profile.image){
+                data.image = this.form.newImage
+            }
+            if(this.form.newName !== this.profile.name){
+                data.name = this.form.newName
+            }
+            if(this.form.newSurname !== this.profile.surname){
+                data.surname = this.form.newSurname
+            }
+            if(this.form.newPhone !== this.profile.phone){
+                data.phone = this.form.newPhone
+            }
+            updateProfileData(data).then((res) => {
+                this.isLoading = false
+            })
+        }
+    },
+}
+</script>
+
+<style scoped>
+main {
+    padding: 32px 64px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.content{
+    width: 879px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    padding: 32px 64px;
+}
+
+h2 {
+    font-weight: 600;
+    font-size: 20px;
+}
+
+.image-loader {
+    margin-top: 16px;
+}
+
+label {
+    font-size: 16px;
+    color: #575757;
+}
+
+input {
+    margin-top: 8px;
+}
+
+.no-image {
+    width: 150px;
+    height: 150px;
+    background-color: #D9D9D9;
+    border-radius: 75px;
+    background-size: cover;
+}
+
+.img {
+    width: 150px;
+    height: 150px;
+    border-radius: 75px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.img-container {
+    margin-top: 16px;
+}
+
+.name-surname {
+    margin-top: 32px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+input[type="text"] {
+    width: 350px;
+    padding: 11px 24px;
+    background-color: #F9F9F9;
+    border: 1px solid #D1D1D1;
+    border-radius: 12px;
+}
+
+.button-container {
+    margin-top: 48px;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+form button {
+    width: 194px;
+    padding: 16px;
+    background-color: #6A983C;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 12px;
+    border: 2px solid #46760A;
+}
+
+form button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/profile/MyRents.vue b/frontend/src/views/profile/MyRents.vue
new file mode 100644
index 0000000..8dd090b
--- /dev/null
+++ b/frontend/src/views/profile/MyRents.vue
@@ -0,0 +1,20 @@
+<template>
+    <main>
+        <ProfileSideBar />
+    </main>
+</template>
+
+<script>
+import ProfileSideBar from "@/components/ProfileSideBar.vue";
+
+export default {
+    name: "MyRents",
+    components: {ProfileSideBar}
+}
+</script>
+
+<style scoped>
+main {
+    padding: 32px 64px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/profile/ProfileView.vue b/frontend/src/views/profile/ProfileView.vue
new file mode 100644
index 0000000..0ff625e
--- /dev/null
+++ b/frontend/src/views/profile/ProfileView.vue
@@ -0,0 +1,89 @@
+<template>
+    <UploadProgress v-if="isLoading"  />
+    <main>
+        <ProfileSideBar />
+        <div class="content">
+            <div class="img-container" :style="backgroundImageStyle"></div>
+            <div class="name-email">
+                <p class="name">
+                    {{profile.surname}} {{profile.name}}
+                </p>
+                <p class="email">
+                    {{profile.email}}
+                </p>
+            </div>
+        </div>
+    </main>
+
+</template>
+
+<script>
+import ProfileSideBar from "@/components/ProfileSideBar.vue";
+import {getProfileData} from "@/services/profileServices.js";
+import UploadProgress from "@/components/UploadProgress.vue";
+
+export default {
+    name: "ProfileView",
+    components: {UploadProgress, ProfileSideBar},
+    data(){
+        return {
+            isLoading: true,
+            profile: {}
+        }
+    },
+    beforeMount() {
+        getProfileData().then((data) => {
+            this.profile = data
+            this.isLoading = false
+        })
+    },
+    computed: {
+        backgroundImageStyle() {
+            return this.profile.image
+                ? { backgroundImage: `url(${this.profile.image})` }
+                : {};
+        }
+    },
+}
+</script>
+
+<style scoped>
+main {
+    padding: 32px 64px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.content{
+    width: 879px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 32px 64px;
+}
+
+.img-container {
+    width: 150px;
+    height: 150px;
+    background-color: #D9D9D9;
+    border-radius: 75px;
+    background-size: cover;
+}
+
+.name-email{
+    margin-left: 36px;
+}
+
+.name {
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.email {
+    font-size: 20px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file