diff --git a/webapp/templates/user/forgot_passord_form.html.twig b/webapp/templates/user/forgot_passord_form.html.twig
index 72e2b661de6e6a47aabd05f3de35e80d739071e0..e679d01b9151d24c5c5f2ae7a6447744ff9a2e2b 100644
--- a/webapp/templates/user/forgot_passord_form.html.twig
+++ b/webapp/templates/user/forgot_passord_form.html.twig
@@ -1,7 +1,7 @@
{% extends 'app_base.html.twig' %}
{% form_theme forgotPasswordForm 'bootstrap_5_layout.html.twig' %}
-{% block title %} {{ 'forgot_password.head.title'|trans }} - {{ appName }}{% endblock %}
+{% block title %} {{ 'forgot_password.head.title'|trans }} - {{ app_name }}{% endblock %}
{% block body %}
<div class="col-md-7">
<h2>
diff --git a/webapp/templates/user/forgot_passord_not_valid_token.html.twig b/webapp/templates/user/forgot_passord_not_valid_token.html.twig
index b0db5eb8064c31345c19188e081506e89628f97d..56412fa3fef75a71a74b2e85966d842ed6703268 100644
--- a/webapp/templates/user/forgot_passord_not_valid_token.html.twig
+++ b/webapp/templates/user/forgot_passord_not_valid_token.html.twig
@@ -1,6 +1,6 @@
{% extends 'app_base.html.twig' %}
-{% block title %} {{ 'forgot_password.not-voalid-token.head.title'|trans }} - {{ appName }}{% endblock %}
+{% block title %} {{ 'forgot_password.not-voalid-token.head.title'|trans }} - {{ app_name }}{% endblock %}
{% block body %}
<div class="col-md-9">
<h2>
diff --git a/webapp/templates/user/forgot_passord_request_form.html.twig b/webapp/templates/user/forgot_passord_request_form.html.twig
index 8fb06b0ef31c4890af74210bb20cc780eb0b09bf..db66ac8bc6a3c55f4c9acdeb95be34349aa4683b 100644
--- a/webapp/templates/user/forgot_passord_request_form.html.twig
+++ b/webapp/templates/user/forgot_passord_request_form.html.twig
@@ -1,7 +1,7 @@
{% extends 'app_base.html.twig' %}
{% form_theme forgotPasswordForm 'bootstrap_5_layout.html.twig' %}
-{% block title %} {{ 'forgot_password.request.head.title'|trans }} - {{ appName }}{% endblock %}
+{% block title %} {{ 'forgot_password.request.head.title'|trans }} - {{ app_name }}{% endblock %}
{% block body %}
<div class="col-md-7">
<h2>
diff --git a/webapp/templates/user/forgot_passord_request_result.html.twig b/webapp/templates/user/forgot_passord_request_result.html.twig
index 5f3dd4ad0d58abcc77039c5a7461b0cae2add273..601349ec1e46fa32084593018e3ed2974f52da17 100644
--- a/webapp/templates/user/forgot_passord_request_result.html.twig
+++ b/webapp/templates/user/forgot_passord_request_result.html.twig
@@ -1,7 +1,7 @@
{% extends 'app_base.html.twig' %}
{% form_theme forgotPasswordForm 'bootstrap_5_layout.html.twig' %}
-{% block title %} {{ 'forgot_password.request.head.title'|trans }} - {{ appName }}{% endblock %}
+{% block title %} {{ 'forgot_password.request.head.title'|trans }} - {{ app_name }}{% endblock %}
{% block body %}
<h2>
diff --git a/webapp/templates/user/login.html.twig b/webapp/templates/user/login.html.twig
index de9f98682f39fcd70bd8d9a67a538c4b9e9f57d2..94179656055e70b1b88f3eb612517fc70b011640 100644
--- a/webapp/templates/user/login.html.twig
+++ b/webapp/templates/user/login.html.twig
@@ -1,6 +1,6 @@
{% extends 'app_base.html.twig' %}
-{% block title %} {{ 'login.head.title'|trans }} - {{ appName }}{% endblock %}
+{% block title %} {{ 'login.head.title'|trans }} - {{ app_name }}{% endblock %}
{% block body %}
<h2>
diff --git a/webapp/templates/user/profile.html.twig b/webapp/templates/user/profile.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b6c19a6fe6b608fe76b2a59fab344c3ed80f6898
--- /dev/null
+++ b/webapp/templates/user/profile.html.twig
@@ -0,0 +1,39 @@
+{% extends 'app_base.html.twig' %}
+
+{% block title %}{{ 'user-profile.head.title'|trans }} - {{ app_name }}{% endblock %}
+
+{% block body %}
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item">
+ <a href="{{ path('app_home') }}">{{ 'breadcrumb.homepage'|trans }}</a>
+ </li>
+ <li class="breadcrumb-item active" aria-current="page">
+ {{ 'breadcrumb.user.profile'|trans }}
+ </li>
+ </ol>
+ </nav>
+
+ <h1> {{ 'user-profile.page.title'|trans }} </h1>
+ <hr class="col-3 col-md-2 mb-5">
+ <div class="col-md-6">
+ <table class="table table-hover table-dark table-striped">
+ <thead>
+ <tr>
+ <th scope="col">{{ 'user-profile.data-title.email'|trans }} </th>
+ <th scope="col">{{ 'user-profile.data-title.roles'|trans }} </th>
+ </tr>
+ </thead>
+ <tbody class="table-group-divider">
+ <tr>
+ <td>{{ app.user.email }}</strong></td>
+ <td> {{ 'common.help.comming-soon'|trans }} </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <a id="user_change-password_link" href="{{ path('app_user_profile_change_password') }}">
+ {{ 'user-profile.link.change_password'|trans }}
+ </a>
+
+{% endblock %}
diff --git a/webapp/templates/user/profile_change-password.html.twig b/webapp/templates/user/profile_change-password.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f2da732823909ad9ed1720a6ddfc39f70fa130f6
--- /dev/null
+++ b/webapp/templates/user/profile_change-password.html.twig
@@ -0,0 +1,63 @@
+{% extends 'app_base.html.twig' %}
+{% form_theme changePasswordForm 'bootstrap_5_layout.html.twig' %}
+
+{% block title %}{{ 'user.change_password.head.title'|trans }} - {{ app_name }}{% endblock %}
+
+{% block body %}
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item">
+ <a href="{{ path('app_home') }}">{{ 'breadcrumb.homepage'|trans }}</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="{{ path('app_user_profile') }}">{{ 'breadcrumb.user.profile'|trans }}</a>
+ </li>
+ <li class="breadcrumb-item active" aria-current="page">
+ {{ 'breadcrumb.user.profile.change_password'|trans }}
+ </li>
+ </ol>
+ </nav>
+
+ {% for label, messages in app.flashes %}
+ {% for message in messages %}
+ <div class="flash-{{ label }}">
+ {{ message }}
+ </div>
+ {% endfor %}
+ {% endfor %}
+
+ <div class="mb-5">
+ <h1> {{ 'user.change_password.page.title'|trans }} </h1>
+ {{ form_start(changePasswordForm) }}
+
+ <div class="my-custom-class-for-errors">
+ {{ form_errors(changePasswordForm) }}
+ </div>
+ <fieldset class="mt-4 mb-4 ">
+ <legend class="text-xl text-bg-dark px-2">
+ {{ 'user.change_password.form.legend.current-password'|trans }}
+ </legend>
+ {% if isInvalidCurrentPassword == true %}
+ {{ form_row(changePasswordForm.currentPlainPassword, {'attr': {'class': 'is-invalid'}}) }}
+ <span class="invalid-feedback d-block">
+ {{ 'common.validator.help.password.error.not-valid-current-password'|trans }}
+ </span>
+ {% else %}
+ {{ form_row(changePasswordForm.currentPlainPassword) }}
+ {% endif %}
+
+ </fieldset>
+ <fieldset class="mt-4 mb-4 ">
+ <legend class="text-xl text-bg-dark px-2">
+ {{ 'user.change_password.form.legend.new-password'|trans }}
+ </legend>
+ {{ form_row(changePasswordForm.newPlainPassword) }}
+ </fieldset>
+ <button id="user-changePasswordForm_submit" class="btn btn-primary">
+ {{ 'user.change_password.form.submit'|trans|raw }}
+ </button>
+ {{ form_end(changePasswordForm) }}
+ </div>
+
+
+{% endblock %}