diff --git a/templates/base.html b/templates/base.html
index e481190..ed4abc7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -27,9 +27,27 @@
                 <a id="adminBtn" class="navbar-brand ml-auto" href="/admin" aria-hidden="true" style="display: none;">Espace admin</a>
                 <a id="connexionBtn" class="navbar-brand ml-auto">Connexion</a>
 
+                <div id="userInfo" class="dropdown">
+                    <button class="btn btn-primary btn-floating dropdown-toggle hidden-arrow bg-dark" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false">
+                      <i class="fas fa-ellipsis-v fa-lg"></i>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                      <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalUserInfo" data-bs-whatever="@getbootstrap" href="#"> <i class="fas fa-user-alt pe-2"></i>My Profile</a></li>
+                      <li><a id="logoutLink" class="dropdown-item" onclick="logout()"> <i class="fas fa-door-open pe-2"></i>Déconnexion</a></li>
+                    </ul>
+                </div>
+                <div class="modal-dialog modal-sm">
+                    <p class="dropdown-item" id="tt-email">Email: </p>
+                    <p class="dropdown-item" id="tt-name">Name: </p>
+                    <p class="dropdown-item" id="tt-surname">Surname: </p>
+                    <p class="dropdown-item" id="tt-role">Role: </p>
+                    <p class="dropdown-item" id="tt-id">ID: </p>
+                </div>
+
+
                 <div class="dropdown">
                     <a class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                        <img src="{{ url_for('static', filename='icons/compte.png' ) }}" alt="Info" style="width: 20px; height: 20px; cursor: pointer;">
+                        <img src="{{ url_for('static', filename='icons/user.png' ) }}" alt="Info" style="width: 20px; height: 20px; cursor: pointer;">
                     </a>
                     <ul class="dropdown-menu">
                       <li><p class="dropdown-item" id="tt-email">Email: </p></li>
@@ -201,11 +219,11 @@ <h5 class="modal-title" id="alertModalLabel"></h5>
 
             function updateConnectionStatus(isConnected) {
                 if (isConnected) {
-                    $('#connexionBtn').text('Déconnexion');
-                    $('#connexionBtn').attr('onclick', 'logout()');
+                    $('#connexionBtn').hide();
+                    $('#userInfo').show();
                 } else {
-                    $('#connexionBtn').text('Connexion');
-                    $('#connexionBtn').attr('onclick', 'redirectToLogin()');
+                    $('#connexionBtn').show();
+                    $('#userInfo').hide();
                 }
             }
 
@@ -263,21 +281,6 @@ <h5 class="modal-title" id="alertModalLabel"></h5>
             $(document).ready(function () {
                 getUserProfile();
             });
-
-            $(function () {
-                $('[data-toggle="tooltip"]').tooltip({
-                    html: true,
-                    title: $('#tooltip-content').html()
-                });
-            });
-            $('#infoTooltip').hover(
-                function () {
-                    $('#tooltip-content').removeClass('d-none');
-                },
-                function () {
-                    $('#tooltip-content').addClass('d-none');
-                }
-            );
         </script>
 
         <style>