diff --git a/app/static/css/scodoc.css b/app/static/css/scodoc.css
index 7fede43ed..24e4d1e61 100644
--- a/app/static/css/scodoc.css
+++ b/app/static/css/scodoc.css
@@ -285,7 +285,7 @@ tr.bandeaugtr {
   text-decoration: underline;
 }
 
-.navbar-default .navbar-nav>li.logout a {
+nav li.logout a {
   color: rgb(255, 0, 0);
 }
 
diff --git a/app/templates/base.j2 b/app/templates/base.j2
index 87bda5b78..178726661 100644
--- a/app/templates/base.j2
+++ b/app/templates/base.j2
@@ -12,61 +12,52 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-default">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{{ url_for('scodoc.index') }}">ScoDoc</a>
-        </div>
+<nav class="navbar navbar-expand-md bg-light">
+    <div class="container container-fluid">
+        <a class="navbar-brand me-auto d-flex" href="{{ url_for('scodoc.index') }}">ScoDoc</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#index-nav" aria-controls="index-nav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
 
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
-            <ul class="nav navbar-nav">
+        {# NAVBAR CONTENT #}
+        <div class="collapse navbar-collapse justify-content-center align-items-center" id="index-nav">
+            <ul class="navbar-nav justify-content-center">
                 {% if current_user.is_administrator() %}
-                <li><a href="{{ url_for('scodoc.configuration') }}">Configuration</a></li>
+                <li class="nav-item"><a class="nav-link" href="{{ url_for('scodoc.configuration') }}">Configuration</a></li>
                 {% endif %}
                 {% if g.scodoc_dept %}
-                <li><a href="{{
+                <li class="nav-item"><a class="nav-link" href="{{
                     url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)
                 }}">Dept. {{ g.scodoc_dept }}</a></li>
                 {% endif %}
-                {% if not current_user.is_anonymous and
-                current_user.has_permission(current_user.Permission.RelationsEntrepView, None) and scu and
-                scu.is_entreprises_enabled() %}
-                <li><a href="{{ url_for('entreprises.index') }}">Entreprises</a></li>
+                {% if not current_user.is_anonymous %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{
+                                url_for('scodoc.user_board', user_name=current_user.user_name)
+                            }}">Tableau de bord</a>
+                    </li>
+                    {% if current_user.has_permission(current_user.Permission.RelationsEntrepView, None) and scu and scu.is_entreprises_enabled() %}
+                    <li class="nav-item"><a class="nav-link" href="{{ url_for('entreprises.index') }}">Entreprises</a></li>
+                    {% endif %}
                 {% endif %}
             </ul>
-            {% if not current_user.is_anonymous %}
-            <ul class="nav navbar-nav">
-            <li>
-                <a href="{{
-                            url_for('scodoc.user_board', user_name=current_user.user_name)
-                        }}">Tableau de bord</a>
-            </li>
-            </ul>
-            {% endif %}
-            <ul class="nav navbar-nav navbar-right">
+            <ul class="navbar-nav ms-auto justify-content-end gap-3">
                 {% if current_user.is_anonymous %}
-                <li><a href="{{ url_for('auth.login') }}">connexion</a></li>
+                <li class="nav-item"><a class="nav-link" href="{{ url_for('auth.login') }}">connexion</a></li>
                 {% else %}
-                <li>{% if current_user.dept %}
-                    <a href="{{ url_for('users.user_info_page', scodoc_dept=current_user.dept, user_name=current_user.user_name )
+                <li class="nav-item">{% if current_user.dept %}
+                    <a class="nav-link" href="{{ url_for('users.user_info_page', scodoc_dept=current_user.dept, user_name=current_user.user_name )
                         }}">{{current_user.user_name}} ({{current_user.dept}})</a>
                     {% else %}
-                    <a href="">{{current_user.user_name}}</a>
+                    <a class="nav-link" href="">{{current_user.user_name}}</a>
                     {% endif %}
                 </li>
-                <li class="logout"><a href="{{ url_for('auth.logout') }}">déconnexion</a></li>
+                <li class="nav-item logout"><a class="nav-link" href="{{ url_for('auth.logout') }}">déconnexion</a></li>
                 {% endif %}
             </ul>
         </div>
     </div>
+    
 </nav>
 {% endblock %}