diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm
index 3db083e40f9..5d2385f59a7 100644
--- a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm
+++ b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm
@@ -25,7 +25,7 @@ displayModals model =
             EditAccount a -> ( String.isEmpty account.name , String.isEmpty account.name , (a.name/=account.name && List.member account.name (List.map .name model.accounts)) )
             _ -> ( False , False , False )
 
-    modalClass = if model.ui.modalState == NoModal then "" else " in"
+    modalClass = if model.ui.modalState == NoModal then "" else " show"
 
     (modalTitle, btnTxt, btnClass) = case model.ui.modalState of
        NoModal       -> ( "" , "Save", "default")
@@ -120,14 +120,12 @@ displayModals model =
               )
   in
     div [class ("modal fade " ++ modalClass)]
-    [ div [class "modal-backdrop fade in", onClick (ToggleEditPopup NoModal)][]
+    [ div [class "modal-backdrop fade show", onClick (ToggleEditPopup NoModal)][]
     , div [class "modal-dialog"]
       [ div [class "modal-content"]
         [ div [class "modal-header"]
-          [ div [class "close", attribute "data-bs-dismiss" "modal", onClick (ToggleEditPopup NoModal)]
-            [ span[][text (String.fromChar (Char.fromCode 215))]
-            ]
-          , h4 [class "modal-title"] [text modalTitle]
+          [ h5 [class "modal-title"] [text modalTitle]
+          , button [type_ "button", class "btn-close", attribute "data-bs-dismiss" "modal", attribute "aria-label" "Close"][]
           ]
         , div [class "modal-body"]
           [ popupBody
@@ -152,17 +150,15 @@ displayCopy model =
       t = case model.ui.copyState of
           NoCopy -> ""
           Token string -> string
-      modalClass = if model.ui.copyState == NoCopy then "" else " in"
+      modalClass = if model.ui.copyState == NoCopy then "" else " show"
     in
         div [class ("modal fade" ++ modalClass)]
-        [ div [class "modal-backdrop fade in", onClick (CloseCopyPopup)][]
+        [ div [class "modal-backdrop fade show", onClick (CloseCopyPopup)][]
         , div [class "modal-dialog"]
           [ div [class "modal-content"]
             [ div [class "modal-header"]
-              [ div [class "close", attribute "data-bs-dismiss" "modal", onClick (CloseCopyPopup)]
-                [ span[][text (String.fromChar (Char.fromCode 215))]
-                ]
-              , h4 [class "modal-title"] [text "Copy the token"]
+              [ h5 [class "modal-title"] [text "Copy the token"]
+              , button [type_ "button", class "btn-close", attribute "data-bs-dismiss" "modal", attribute "aria-label" "Close"][]
               ]
             , div [class "modal-body"]
               [ div[]
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
index dfd312e07c1..282d0dacb63 100755
--- a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
+++ b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
@@ -406,7 +406,7 @@ view model =
             div [ class "modal-dialog" ] [
               div [ class "modal-content" ]  [-- uib-modal-transclude="">
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text "Delete Technique"]
+                  h5 [ class "modal-title" ] [ text "Delete Technique"]
                 ]
               , div [ class "modal-body" ] [
                   text ("Are you sure you want to Delete Technique '")
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm
index a01e057a7b5..49e6d03c228 100644
--- a/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm
+++ b/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm
@@ -249,12 +249,12 @@ modalDelete model =
   case model.ui.modalState of
     NoModal -> text ""
     Deletion name ->
-      div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-      [ div [class "modal-backdrop fade in"][]
+      div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+      [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
       , div [ class "modal-dialog" ]
         [ div [ class "modal-content" ]
           [ div [ class "modal-header ng-scope" ]
-            [ h3 [ class "modal-title" ] [ text "Delete property"] ]
+            [ h5 [ class "modal-title" ] [ text "Delete property"] ]
           , div [ class "modal-body" ]
             [ text ("Are you sure you want to delete property '"++ name ++"'?") ]
           , div [ class "modal-footer" ]
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm
index c893459c63d..309623f7601 100644
--- a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm
+++ b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm
@@ -167,12 +167,12 @@ view model =
               , False
               )
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ] [
               div [ class "modal-content" ] [
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text "Delete Rule"]
+                  h5 [ class "modal-title" ] [ text "Delete Rule"]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"][text ("Are you sure you want to Delete rule '"++ rule.name ++"'?")]
@@ -203,12 +203,12 @@ view model =
               )
 
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ] [
               div [ class "modal-content" ]  [
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text (txtDisable ++" Rule")]
+                  h5[ class "modal-title" ] [ text (txtDisable ++" Rule")]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"][text ("Are you sure you want to "++ String.toLower txtDisable ++" rule '"++ rule.name ++"'?")]
@@ -228,12 +228,12 @@ view model =
             ]
           ]
       DeletionValidationCat category ->
-        div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-         [ div [class "modal-backdrop fade in"][]
+        div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+         [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
          , div [ class "modal-dialog" ] [
              div [ class "modal-content" ] [
                div [ class "modal-header ng-scope" ] [
-                 h3 [ class "modal-title" ] [ text "Delete category"]
+                 h5 [ class "modal-title" ] [ text "Delete category"]
                ]
              , div [ class "modal-body" ] [
                  h4 [class "text-center"][text ("Are you sure you want to delete category '"++ category.name ++"'?")]
@@ -253,12 +253,12 @@ view model =
         let
           action = if creation then "Create" else "Update"
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ]
             [ div [ class "modal-content" ]
               [ div [ class "modal-header ng-scope" ]
-                [ h3 [ class "modal-title" ] [ text (action ++" Rule")]
+                [ h5 [ class "modal-title" ] [ text (action ++" Rule")]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"]
diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
index 828f397a045..18abf01250c 100644
--- a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
+++ b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
@@ -60,11 +60,7 @@ function escapeHTML (string) {
 }
 
 function callPopupWithTimeout(timeout, popupName){
-  setTimeout("createPopup('"+popupName+"')", timeout);
-}
-
-function createPopup(popupName){
-  $('#'+popupName).bsModal('show');
+  setTimeout("initBsModal('"+popupName+"')", timeout);
 }
 
 function reverseErrorDetails(){
@@ -146,14 +142,6 @@ function jqCheckAll( id, name )
     });
   });
 
-  // Logout
-  $(function() {
-    $('#logout').click(function() {
-      $('#ModalLogOut').bsModal('show');
-      return false;
-    });
-  });
-
 function processKey(e , buttonId){
     if (null == e)
         e = window.event ;
@@ -853,7 +841,18 @@ function initBsTooltips(){
 function removeBsTooltips(){
   document.querySelectorAll(".tooltip").forEach(e => e.remove());
 }
-//tooltip.hide()
+function initBsModal(modalName){
+  var selector = document.querySelector('#' + modalName);
+  var modal    = bootstrap.Modal.getInstance(selector);
+  var instance = (modal === null || modal === undefined) ? new bootstrap.Modal('#'+modalName) : modal;
+  instance.show();
+}
+function hideBsModal(modalName){
+  var selector = document.querySelector('#' + modalName);
+  var modal    = bootstrap.Modal.getInstance(selector);
+  if(modal === null || modal === undefined) return false;
+  modal.hide();
+}
 function initBsTabs(){
   var triggerTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
   triggerTabList.forEach(function (triggerEl) {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala
index c242084877d..a367e2fc932 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala
@@ -166,7 +166,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
               }
             }
 
-            val callback = JsRaw("$('#errorDetailsDialog').bsModal('show');") & SetHtml("errorDetailsMessage", popupContent)
+            val callback = JsRaw("initBsModal('errorDetailsDialog');") & SetHtml("errorDetailsMessage", popupContent)
 
             commonStatement(
               start,
@@ -185,7 +185,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
   }
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#generatePoliciesDialog').hide();""")
+    JsRaw("""hideBsModal('generatePoliciesDialog')""")
   }
 
   private[this] def fullPolicyGeneration:      NodeSeq = {
@@ -207,7 +207,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
     </lift:authz>
   }
   private[this] def showGeneratePoliciesPopup: NodeSeq = {
-    val callback = JsRaw("$('#generatePoliciesDialog').bsModal('show');")
+    val callback = JsRaw("initBsModal('generatePoliciesDialog')")
     <lift:authz role="deployment_write"> {
       SHtml.a(
         Text("Regenerate all policies"),
@@ -239,16 +239,12 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
   }
 
   private[this] def errorPopup = {
-    <div class="modal fade" data-keyboard="true" tabindex="-1" id="errorDetailsDialog">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div class="modal fade" tabindex="-1" id="errorDetailsDialog" data-bs-backdrop="false">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-bs-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                    <span class="visually-hidden">Close</span>
-                    </div>
-                    <h4 class="modal-title">Error</h4>
+                    <h5 class="modal-title">Error</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row space-bottom">
@@ -265,22 +261,18 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                 </div>
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
+            </div>
+        </div>
       </div>
   }
 
   private[this] def generatePoliciesPopup = {
-    <div class="modal fade" data-keyboard="true" tabindex="-1" id="generatePoliciesDialog">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div class="modal fade" tabindex="-1" id="generatePoliciesDialog" aria-hidden="true" data-bs-backdrop="false" data-bs-dismiss="modal">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <div class="close" data-bs-dismiss="modal">
-              <span aria-hidden="true">&times;</span>
-              <span class="visually-hidden">Close</span>
-            </div>
-            <h4 class="modal-title">Regenerate Policies</h4>
+            <h5 class="modal-title">Regenerate Policies</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <div class="row space-bottom">
@@ -295,8 +287,8 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
             <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
             {fullPolicyGeneration}
           </div>
-        </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
+        </div>
+      </div>
     </div>
   }
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
index 46ba69b7f21..5177aba3c5a 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
@@ -383,7 +383,7 @@ class DirectiveEditForm(
 
   private[this] def clonePopup(): JsCmd = {
     SetHtml("basePopup", newCreationPopup(technique, activeTechnique)) &
-    JsRaw(s""" createPopup("basePopup"); """)
+    JsRaw(s""" initBsModal("basePopup"); """)
   }
 
   ////////////// Callbacks //////////////
@@ -805,23 +805,23 @@ class DirectiveEditForm(
             if (workflowService.needExternalValidation()) {
               (
                 (crId: ChangeRequestId) => onSuccessCallback(Right(crId)),
-                (xml: NodeSeq) => JsRaw("$('#basePopup').bsModal('hide');") & onFailure()
+                (xml: NodeSeq) => JsRaw("hideBsModal('basePopup');") & onFailure()
               )
             } else {
               val success = {
                 if (action == DGModAction.Delete) {
                   val nSeq = <style>#policyConfiguration{{height: initial !important;}}</style>
                   (_: ChangeRequestId) =>
-                    JsRaw("$('#basePopup').bsModal('hide');") & onRemoveSuccessCallBack() & SetHtml(htmlId_policyConf, nSeq) &
+                    JsRaw("hideBsModal('basePopup');") & onRemoveSuccessCallBack() & SetHtml(htmlId_policyConf, nSeq) &
                     successNotification("Directive successfully deleted")
                 } else { (_: ChangeRequestId) =>
-                  JsRaw("$('#basePopup').bsModal('hide');") & successNotification("") & onSuccessCallback(Left(newDirective))
+                  JsRaw("hideBsModal('basePopup');") & successNotification("") & onSuccessCallback(Left(newDirective))
                 }
               }
 
               (
                 success,
-                (xml: NodeSeq) => JsRaw("$('#basePopup').bsModal('hide');") & onFailure()
+                (xml: NodeSeq) => JsRaw("hideBsModal('basePopup');") & onFailure()
               )
             }
           }
@@ -842,7 +842,7 @@ class DirectiveEditForm(
             popup.onSubmit()
           case Some(_) =>
             SetHtml("basePopup", popup.popupContent()) &
-            JsRaw("""createPopup("basePopup")""")
+            JsRaw("""initBsModal("basePopup")""")
         }
     }
   }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
index c2520660a47..f64c5a0d7b2 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
@@ -176,17 +176,13 @@ class NodeGroupCategoryForm(
 
     if (parentCategory.isDefined && _nodeGroupCategory.children.isEmpty && _nodeGroupCategory.items.isEmpty) {
       val popupContent = {
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
-           <div class="modal-dialog">
+        <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
-                 <div class="close" data-bs-dismiss="modal">
-                   <span aria-hidden="true">&times;</span>
-                   <span class="visually-hidden">Close</span>
-                 </div>
-                 <h4 class="modal-title text-start">
+                 <h5 class="modal-title text-start">
                    Delete a group category
-                 </h4>
+                 </h5>
+                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
@@ -206,7 +202,7 @@ class NodeGroupCategoryForm(
       }
       SHtml.ajaxSubmit(
         "Delete",
-        () => SetHtml("basePopup", popupContent) & JsRaw("""createPopup("basePopup")"""),
+        () => SetHtml("basePopup", popupContent) & JsRaw("""initBsModal("basePopup")"""),
         ("class", "btn btn-danger")
       )
     } else {
@@ -226,7 +222,7 @@ class NodeGroupCategoryForm(
       )
       .toBox match {
       case Full(id) =>
-        JsRaw("""$('#basePopup').bsModal('hide');""") &
+        JsRaw("""hideBsModal('basePopup');""") &
         SetHtml(htmlIdCategory, NodeSeq.Empty) &
         onSuccessCallback(nodeGroupCategory.id.value) &
         successPopup
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
index 912aa1ffb12..e4fa91afd63 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
@@ -540,8 +540,8 @@ class NodeGroupForm(
           new ModificationValidationPopup(
             Right(change),
             workflowService,
-            crId => JsRaw("$('#confirmUpdateActionDialog').bsModal('hide');") & successCallback(crId),
-            xml => JsRaw("$('#confirmUpdateActionDialog').bsModal('hide');") & onFailure,
+            crId => JsRaw("hideBsModal('confirmUpdateActionDialog');") & successCallback(crId),
+            xml => JsRaw("hideBsModal('confirmUpdateActionDialog');") & onFailure,
             parentFormTracker = formTracker
           )
         }
@@ -551,13 +551,13 @@ class NodeGroupForm(
             popup.onSubmit()
           case Some(_) =>
             SetHtml("confirmUpdateActionDialog", popup.popupContent()) &
-            JsRaw("""createPopup("confirmUpdateActionDialog")""")
+            JsRaw("""initBsModal("confirmUpdateActionDialog")""")
         }
     }
   }
 
   def createPopup(name: String):           JsCmd = {
-    JsRaw(s"""createPopup("${name}");""")
+    JsRaw(s"""initBsModal("${name}");""")
   }
   private[this] def showCloneGroupPopup(): JsCmd = {
 
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala
index 97274b1e719..3025bb62601 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala
@@ -399,7 +399,7 @@ class RuleDisplayer(
       }
     }
     SetHtml(htmlId_popup, popupHtml) &
-    JsRaw(s""" createPopup("${htmlId_popup}") """)
+    JsRaw(s""" initBsModal("${htmlId_popup}") """)
   }
 
   /**
@@ -422,6 +422,6 @@ class RuleDisplayer(
       }
     }
     SetHtml(htmlId_popup, popupHtml) &
-    JsRaw(s"""createPopup("${htmlId_popup}");""")
+    JsRaw(s"""initBsModal("${htmlId_popup}");""")
   }
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueCategoryEditForm.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueCategoryEditForm.scala
index 5a80d8ad189..90d88311de4 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueCategoryEditForm.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueCategoryEditForm.scala
@@ -80,18 +80,14 @@ class TechniqueCategoryEditForm(
         {categoryDetailsForm}
     </div>
     <div>
-    <div id="removeCategoryActionDialog" class="modal fade" data-keyboard="true" tabindex="-1">
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div id="removeCategoryActionDialog" class="modal fade" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">
-                    Delete a category
-                </h4>
+              <h5 class="modal-title">
+                Delete a category
+              </h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div class="row">
@@ -104,8 +100,8 @@ class TechniqueCategoryEditForm(
                 <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                 {SHtml.ajaxButton(<span>Delete</span>, deleteCategory _) % ("class" -> "btn btn-danger")}
             </div>
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
     </div>
     </div>
   }
@@ -121,7 +117,7 @@ class TechniqueCategoryEditForm(
       .toBox match {
       case Full(id) =>
         // update UI
-        JsRaw("$('#removeCategoryActionDialog').bsModal('hide');") &
+        JsRaw("hideBsModal('removeCategoryActionDialog');") &
         onSuccessCallback() & // Replace(htmlId_activeTechniquesTree, userLibrary) &
         SetHtml(htmlId_form, <span class="greenscala">Category successfully deleted</span>) &
         successPopup
@@ -243,7 +239,7 @@ class TechniqueCategoryEditForm(
         if (currentCategory.id != rootCategoryId && currentCategory.children.isEmpty && currentCategory.items.isEmpty) {
           {
             Script(OnLoad(JsRaw("""$( "#deleteCategoryButton" ).click(function() {
-                $("#removeCategoryActionDialog").bsModal('show');
+                iniBsModal("removeCategoryActionDialog");
                 return false;
               })""")))
           } ++ {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala
index f52a6290de2..c43ecab3b0f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala
@@ -240,12 +240,12 @@ class TechniqueEditForm(
     )(crForm) ++
     Script(OnLoad(JsRaw("""
       $('#deleteButton').click(function() {
-        createPopup("deleteActionDialog");
+        initBsModal("deleteActionDialog");
         return false;
       });
 
       $('#disableButton').click(function() {
-        createPopup("disableActionDialog");
+        initBsModal("disableActionDialog");
         return false;
       });
 
@@ -343,13 +343,13 @@ class TechniqueEditForm(
   }
 
   private[this] def updateRemoveFormClientSide(): JsCmd = {
-    val jsDisplayRemoveDiv = JsRaw("""$("#deleteActionDialog").bsModal('show')""")
+    val jsDisplayRemoveDiv = JsRaw("""initBsModal("deleteActionDialog");""")
     Replace("deleteActionDialog", this.showRemovePopupForm()) &
     jsDisplayRemoveDiv
   }
 
   private[this] def updateDisableFormClientSide(): JsCmd = {
-    val jsDisplayRemoveDiv = JsRaw("""$("#disableActionDialog").bsModal('show')""")
+    val jsDisplayRemoveDiv = JsRaw("""initBsModal("disableActionDialog")""")
     Replace("disableActionDialog", this.showDisactivatePopupForm()) &
     jsDisplayRemoveDiv
   }
@@ -362,7 +362,7 @@ class TechniqueEditForm(
       if (formTrackerRemovePopup.hasErrors) {
         onFailureRemovePopup()
       } else {
-        JsRaw("$('#deleteActionDialog').bsModal('hide');") & {
+        JsRaw("hideBsModal('deleteActionDialog');") & {
           val modId = ModificationId(uuidGen.newUuid)
           (for {
             deleted <- dependencyService.cascadeDeleteTechnique(id, modId, CurrentUser.actor, crReasonsRemovePopup.map(_.get))
@@ -405,7 +405,7 @@ class TechniqueEditForm(
         onFailureDisablePopup()
       } else {
         currentActiveTechnique = currentActiveTechnique.map(activeTechnique => activeTechnique.copy(_isEnabled = status))
-        JsRaw("$('#disableActionDialog').bsModal('hide');") &
+        JsRaw("hideBsModal('disableActionDialog');") &
         statusAndDeployTechnique(activeTechnique.id, status)
       }
     }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateActiveTechniqueCategoryPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateActiveTechniqueCategoryPopup.scala
index 6a8bd81abe4..9c6d96f465f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateActiveTechniqueCategoryPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateActiveTechniqueCategoryPopup.scala
@@ -126,7 +126,7 @@ class CreateActiveTechniqueCategoryPopup(
   private[this] def error(msg: String) = Text(msg)
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#createActiveTechniqueCategoryPopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createActiveTechniqueCategoryPopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCategoryOrGroupPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCategoryOrGroupPopup.scala
index 28a8d3df85c..a76940f5ffb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCategoryOrGroupPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCategoryOrGroupPopup.scala
@@ -238,7 +238,7 @@ class CreateCategoryOrGroupPopup(
   private[this] def error(msg: String) = Text(msg)
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#createGroupPopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createGroupPopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneDirectivePopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneDirectivePopup.scala
index 830eb9a1d20..2c52e4c841f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneDirectivePopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneDirectivePopup.scala
@@ -61,15 +61,11 @@ object CreateCloneDirectivePopup {
   val htmlId_popupContainer = "createCloneDirectiveContainer"
   val htmlId_popup          = "createCloneDirectivePopup"
   val html                  = SHtml.ajaxForm(
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
     <div id="createCloneDirectiveContainer" class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Clone directive</h4>
+              <h5 class="modal-title">Clone directive</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div id="notifications">Here comes validation messages</div>
@@ -82,8 +78,8 @@ object CreateCloneDirectivePopup {
                 <button id="save" class="btn btn-success">Clone</button>
             </div>
         <!-- TODO: migration-scala3 - bug: https://github.com/lampepfl/dotty/issues/16458 -->
-        </div> //<!-- /.modal-content -->
-    </div> // <!-- /.modal-dialog -->
+        </div>
+    </div>
   )
 }
 
@@ -178,7 +174,7 @@ class CreateCloneDirectivePopup(
   private[this] def error(msg: String) = Text(msg)
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#basePopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('basePopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneGroupPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneGroupPopup.scala
index 2384d913da0..180fe3b89be 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneGroupPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateCloneGroupPopup.scala
@@ -80,7 +80,7 @@ class CreateCloneGroupPopup(
   )
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#createCloneGroupPopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createCloneGroupPopup');""")
   }
 
   private[this] def onFailure(): JsCmd = {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateOrUpdateGlobalParameterPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateOrUpdateGlobalParameterPopup.scala
index d29a38af701..71d3bd300d2 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateOrUpdateGlobalParameterPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateOrUpdateGlobalParameterPopup.scala
@@ -184,7 +184,7 @@ class CreateOrUpdateGlobalParameterPopup(
   }
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#createGlobalParameterPopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createGlobalParameterPopup');""")
   }
 
   /**
@@ -402,15 +402,11 @@ class CreateOrUpdateGlobalParameterPopup(
   }
   private[this] def formXml(): NodeSeq = {
     SHtml.ajaxForm(
-      <div id="paramForm" class="modal-backdrop fade in" style="height: 100%;"></div>
-    <div class="modal-dialog">
+      <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title" id="title">Here come title</h4>
+              <h5 class="modal-title" id="title">Here come title</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div class="notifications">Here comes validation messages</div>
@@ -431,8 +427,8 @@ class CreateOrUpdateGlobalParameterPopup(
                 <div id="save"/>
             </div>
         <!-- TODO: migration-scala3 - bug: https://github.com/lampepfl/dotty/issues/16458 -->
-        </div>//<!-- /.modal-content -->
-    </div> // <!-- /.modal-dialog -->
+        </div>
+    </div>
     )
   }
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateRulePopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateRulePopup.scala
index 60a08aacc9c..f5414cf4be3 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateRulePopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/CreateRulePopup.scala
@@ -193,7 +193,7 @@ class CreateOrCloneRulePopup(
   private[this] def error(msg: String) = <span class="col-lg-12 errors-container">{msg}</span>
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#createRulePopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createRulePopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ExpectedPolicyPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ExpectedPolicyPopup.scala
index f4b91a45aca..76262a051d2 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ExpectedPolicyPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ExpectedPolicyPopup.scala
@@ -96,7 +96,6 @@ class ExpectedPolicyPopup(
       & "#dependentRulesGrid" #> rulesGrid
       & "expectedpolicypopup-node" #> displayNode(nodeSrv)
       & "expectedpolicypopup-os" #> displayNodeOs(nodeSrv)
-      & "expectedpolicypopup:close" #> <button onClick="$.modal.close(); return false;">Close</button>
     )(expectedTechnique)
   }
 
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/GiveReasonPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/GiveReasonPopup.scala
index e11bb333fef..e280282e03b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/GiveReasonPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/GiveReasonPopup.scala
@@ -133,7 +133,7 @@ class GiveReasonPopup(
   private[this] def error(msg: String) = <span class="col-lg-12 errors-container">{msg}</span>
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#createActiveTechniquePopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createActiveTechniquePopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ModificationValidationPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ModificationValidationPopup.scala
index ead3a780c9d..3acfb00e2c0 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ModificationValidationPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/ModificationValidationPopup.scala
@@ -426,8 +426,8 @@ class ModificationValidationPopup(
   private[this] def error(msg: String) = <span class="col-lg-12 errors-container">{msg}</span>
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#confirmUpdateActionDialog').bsModal('hide');
-            |$('#basePopup').bsModal('hide');""".stripMargin)
+    JsRaw("""hideBsModal('confirmUpdateActionDialog');
+            |hideBsModal('basePopup');""".stripMargin)
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleCategoryPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleCategoryPopup.scala
index 2adae987173..53853052c5e 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleCategoryPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleCategoryPopup.scala
@@ -191,7 +191,7 @@ class RuleCategoryPopup(
   private[this] def error(msg: String) = <span class="col-lg-12 errors-container">{msg}</span>
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('#createRuleCategoryPopup').bsModal('hide');""")
+    JsRaw("""hideBsModal('createRuleCategoryPopup');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleModificationValidationPopup.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleModificationValidationPopup.scala
index 566ca27e634..1fd65255c0b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleModificationValidationPopup.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/popup/RuleModificationValidationPopup.scala
@@ -213,7 +213,7 @@ class RuleModificationValidationPopup(
   private[this] def error(msg: String) = <span>{msg}</span>
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#confirmUpdateActionDialog').bsModal('hide');""")
+    JsRaw("""hideBsModal('confirmUpdateActionDialog');""")
   }
 
   /**
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
index 4e6ac10e2c7..5b792b87fa7 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -411,9 +411,9 @@ object DisplayNode extends Loggable {
       sm.node.main.status match {
         case AcceptedInventory =>
           <div>
-              <div id={deleteNodePopupHtmlId}  class="modal fade" data-keyboard="true" tabindex="-1" />
-              <div id={errorPopupHtmlId}  class="modal fade" data-keyboard="true" tabindex="-1" />
-              <div id={successPopupHtmlId}  class="modal fade" data-keyboard="true" tabindex="-1" />
+              <div id={deleteNodePopupHtmlId}  class="modal fade" tabindex="-1" />
+              <div id={errorPopupHtmlId}  class="modal fade" tabindex="-1" />
+              <div id={successPopupHtmlId}  class="modal fade" tabindex="-1" />
           </div>
           <lift:authz role="node_write">
             {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
index b3bc04709a1..ebf7db16d5e 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
@@ -842,9 +842,9 @@ class TechniqueLibraryManagement extends DispatchSnippet with Loggable {
     setCreationPopup
 
     // update UI
-    SetHtml("createActiveTechniquesCategoryContainer", createPopup) &
-    JsRaw("""createPopup("createActiveTechniqueCategoryPopup")
-     """)
+    SetHtml("createActiveTechniquesCategoryContainer", createPopup) & JsRaw(
+      """initBsModal("createActiveTechniqueCategoryPopup")"""
+    )
 
   }
 
@@ -857,7 +857,7 @@ class TechniqueLibraryManagement extends DispatchSnippet with Loggable {
     // update UI
 
     SetHtml("createActiveTechniquesContainer", createReasonPopup) &
-    JsRaw("""createPopup("createActiveTechniquePopup")""")
+    JsRaw("""initBsModal("createActiveTechniquePopup")""")
   }
 
   private[this] def reloadTechniqueLibrary(isTechniqueLibraryPage: Boolean): NodeSeq = {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
index 57a0dbcf09f..a0c0a812b55 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
@@ -253,7 +253,7 @@ class ParameterManagement extends DispatchSnippet with Loggable {
         )
         val popupHtml = createPopup
         SetHtml(CreateOrUpdateGlobalParameterPopup.htmlId_popupContainer, popupHtml) &
-        JsRaw(""" createPopup("%s",300,600) """.format(CreateOrUpdateGlobalParameterPopup.htmlId_popup))
+        JsRaw(""" initBsModal("%s",300,600) """.format(CreateOrUpdateGlobalParameterPopup.htmlId_popup))
     }
   }
 
@@ -297,7 +297,7 @@ class ParameterManagement extends DispatchSnippet with Loggable {
   }
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw(""" $('.modal').bsModal('hide');""")
+    JsRaw(s"""hideBsModal('${CreateOrUpdateGlobalParameterPopup.htmlId_popupContainer}');""")
   }
 
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/AcceptNode.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/AcceptNode.scala
index 152aa794fbf..9c0ce9048fb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/AcceptNode.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/AcceptNode.scala
@@ -224,7 +224,7 @@ class AcceptNode extends Loggable {
             "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
             "pageLength": 25
           });""") & JsRaw(s"""
-              createPopup("${popupId}");
+              initBsModal("${popupId}");
         $$('#pendingNodeConfirm_info').remove();""")
       )
     }
@@ -282,7 +282,7 @@ class AcceptNode extends Loggable {
             & "servergrid-close" #>
             SHtml.ajaxButton(
               "Cancel",
-              () => JsRaw(" $('#confirmPopup').bsModal('hide');$('#refusePopup').bsModal('hide');"): JsCmd,
+              () => JsRaw(" $('#confirmPopup')hideBsModal;$('#refusePopup')hideBsModal;"): JsCmd,
               ("class", "btn btn-default")
             )
           )(template)
@@ -311,7 +311,7 @@ class AcceptNode extends Loggable {
    */
   def showExpectedPolicyPopup(node: Srv) = {
     SetHtml("expectedPolicyZone", (new ExpectedPolicyPopup("expectedPolicyZone", node)).display) &
-    OnLoad(JsRaw("""createPopup("expectedPolicyPopup")"""))
+    OnLoad(JsRaw("""initBsModal("expectedPolicyPopup")"""))
   }
 
   def display(html: NodeSeq, nodes: Seq[CoreNodeFact]): NodeSeq = {
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala
index d493f9edb88..602f81b6e1e 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala
@@ -502,7 +502,7 @@ class Groups extends StatefulSnippet with DefaultExtendableSnippet[Groups] with
 
         // update UI
         SetHtml("createGroupContainer", createPopup) &
-        JsRaw(""" createPopup("createGroupPopup")""")
+        JsRaw("""initBsModal("createGroupPopup")""")
     }
   }
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/SearchNodes.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/SearchNodes.scala
index f6e80376722..15c7d412022 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/SearchNodes.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/SearchNodes.scala
@@ -235,7 +235,7 @@ class SearchNodes extends StatefulSnippet with Loggable {
         setCreationPopup(r.getQuery(), r.getSrvList())
         // update UI
         SetHtml("createGroupContainer", createPopup) &
-        JsRaw(""" createPopup("createGroupPopup") """)
+        JsRaw(""" initBsModal("createGroupPopup") """)
 
       case eb: EmptyBox => Alert("Error when trying to retrieve the request, please try again")
     }
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-main.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-main.css
index ff378aa9540..54bfaed39ab 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-main.css
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-main.css
@@ -150,10 +150,6 @@ pre.json-beautify code.elmsh {
   background: transparent !important;
 }
 /* - MODAL 4.0 - */
-body > .modal-backdrop.fade.in{
-  display :none;
-}
-
 .modal .modal-content {
   border-radius: 0;
   border: none;
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss
index 03f783fbe1f..30c04535753 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss
@@ -61,6 +61,14 @@ $navbar-hover-color : #F4F4F4;
   background-color: #fff;
   box-shadow: 4px 4px 10px #dce3efb0;
 }
+
+.modal-open {
+  .main-header > .navbar,
+  .main-header > .logo{
+    z-index: -1;
+  }
+}
+
 .main-header .form-control::-moz-placeholder {
   color: #36474eaa;
   opacity: 1
@@ -771,7 +779,7 @@ header.main-header .logo-lg img{
  }
  aside.main-sidebar.fixed {
   position:fixed;
-  z-index: 1030;
+  z-index: 1020;
   height: calc(100% - 50px);
   min-height: calc(100% - 50px);
   margin-top: 50px;
@@ -866,6 +874,7 @@ header.main-header .logo-lg img{
     }
     & > a {
       color: #36474e;
+      cursor: pointer;
 
       &:hover{
         color: #041922;
@@ -892,9 +901,7 @@ header.main-header .logo-lg img{
 #logout:hover > i{
   color: #36474E;
 }
-.navbar .navbar-nav>li> a#logout{
-  max-height:50px;
-}
+
 .notifications-menu .rudder-badge {
   position: relative;
   left: 7px;
@@ -1183,4 +1190,11 @@ header.main-header .logo-lg img{
 }
 .content-wrapper label > .icon-info:hover{
   color: #286090;
+}
+
+// MODALS
+
+.modal.fade.show[data-bs-backdrop="false"] {
+  background-color: rgba(0,0,0,0.5);
+  position: fixed;
 }
\ No newline at end of file
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css
index f9768b2752e..c3a7c32d11b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css
@@ -36,12 +36,6 @@
 */
 
 /* =====  GENERAL  ===== */
-.fade.modal-backdrop.in {
-  opacity: .3;
-}
-.modal.fade .modal-dialog{
-  transform: initial !important;
-}
 .btn.btn-dsc.active{
   color: #fff !important;
   background-color: #440f62 !important;
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.css
index 2f00233fb95..7de70fa20b7 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.css
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.css
@@ -1327,35 +1327,11 @@ label > .warning-info{
   border: none;
   color: #ef9600;
 }
-/* === MODAL === */
-.rudder-template .modal {
-  height: 0;
-  display: block;
-  background: none;
-  background-color: transparent !important;
-}
-.rudder-template .modal.in {
-  height: auto;
-}
-.rudder-template .modal > .modal-backdrop{
-  transition: opacity .4s ease-out;
-  height: 0;
-  opacity: 0;
-  background-color: #202e34;
-}
-.rudder-template .modal.in  > .modal-backdrop{
-  opacity: .4;
-  height: auto;
-}
-.rudder-template .modal .form-group + .form-group{
-  margin-top: 12px;
-}
 
 .rudder-template .clipboard-list > li:hover .btn-goto{
   opacity: 1;
 }
 
-
 /* === SECTION WITH DOC === */
 .rudder-template .section-with-doc{
   display: flex;
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder.css
index 146c34900c2..5c2e668bc87 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder.css
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder.css
@@ -48,12 +48,6 @@
   fieldset { display: table-cell; }
 }
 
-* {
-  margin:0;
-  padding: 0;
-  list-style: none;
-}
-
 html {
   height:100%;
 }
@@ -1297,11 +1291,6 @@ input[type="number"] {
     margin-top:-5px;
 }
 
-* {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-}
-
 .c3-tooltip td.name {
     padding-right: 3px;
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/techniqueLibraryManagement.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/techniqueLibraryManagement.html
index 5941d4e42fb..ff2cdf1702c 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/techniqueLibraryManagement.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/techniqueLibraryManagement.html
@@ -93,14 +93,14 @@
 
 <div data-lift="administration.TechniqueLibraryManagement.bottomPanel" ></div>
 
-<div id="createActiveTechniqueCategoryPopup" class="modal fade" data-keyboard="true" tabindex="-1">
+<div id="createActiveTechniqueCategoryPopup" class="modal fade" tabindex="-1">
   <lift:ignore>
     This div gets the content of the createActiveTechniqueCategoryPopup injected within
   </lift:ignore>
   <div id="createActiveTechniquesCategoryContainer"></div>
 </div>
 
-<div id="createActiveTechniquePopup" class="modal fade" data-keyboard="true" tabindex="-1">
+<div id="createActiveTechniquePopup" class="modal fade" tabindex="-1">
   <lift:ignore>
     This div gets the content of the createActiveTechniqueCategoryPopup injected within
   </lift:ignore>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
index 504275cbf0e..68f6da6d4a4 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
@@ -97,7 +97,7 @@ <h1>
         </div>
       </div>
     </div>
-    <div id="createGlobalParameterPopup" class="modal fade" data-keyboard="true" tabindex="-1">
+    <div id="createGlobalParameterPopup" class="modal fade" tabindex="-1">
       <lift:ignore>
         This div gets the content of the CreateOrUpdateGlobalParameterPopup injected within
       </lift:ignore>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/groups.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/groups.html
index fd95c7b83f1..47e665d8ad1 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/groups.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/groups.html
@@ -52,7 +52,7 @@ <h1>Groups</h1>
 </div>
 
 
-<div id="createGroupPopup" class="modal fade" data-keyboard="true" tabindex="-1">
+<div id="createGroupPopup" class="modal fade" tabindex="-1">
   <div id="createGroupContainer"></div>
 </div>
 
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/searchNodes.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/searchNodes.html
index e53243ca721..65d4c65ae87 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/searchNodes.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/nodeManager/searchNodes.html
@@ -49,7 +49,7 @@ <h1>
       </div>
     </div>
   </div>
-  <div id="createGroupPopup" class="modal fade" data-keyboard="true" tabindex="-1">
+  <div id="createGroupPopup" class="modal fade" tabindex="-1">
     <lift:ignore>
       This div gets the content of the createCategoryOrGroup injected within
     </lift:ignore>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/ModificationValidationPopup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/ModificationValidationPopup.html
index 02d280cda18..868870f1e2f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/ModificationValidationPopup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/ModificationValidationPopup.html
@@ -12,17 +12,13 @@
     <component-validationpopup>
         <div id="validationContainer">
             <div id="validationForm">
-                <div class="modal-backdrop fade in" style="height: 100%;"></div>
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <div class="close" data-bs-dismiss="modal">
-                            <span aria-hidden="true">&times;</span>
-                            <span class="visually-hidden">Close</span>
-                            </div>
-                            <h4 id="dialogTitle" class="modal-title">
+                            <h5 id="dialogTitle" class="modal-title">
                                 [Some modification on item]
-                            </h4>
+                            </h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
                             <div id="explanationMessageZone">
@@ -42,8 +38,8 @@ <h4 id="dialogTitle" class="modal-title">
                             <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                             <button id="saveStartWorkflow" class="btn">[Submit Draft]</button>
                         </div>  
-                    </div><!-- /.modal-content -->
-                </div><!-- /.modal-dialog -->
+                    </div>
+                </div>
             </div>
         </div>
     </component-validationpopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleCategoryPopup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleCategoryPopup.html
index 69165115ffc..528341deb46 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleCategoryPopup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleCategoryPopup.html
@@ -2,16 +2,12 @@
 <xml:group>
 <component-creationpopup>  
     <div id="RuleCategoryCreationContainer">
-        <div id="creationForm"> 
-            <div class="modal-backdrop fade in" style="height: 100%;"></div>
+        <div id="creationForm">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <div class="close" data-bs-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="visually-hidden">Close</span>
-                        </div>
-                        <h4 id="dialogTitle" class="modal-title">Create new Rule categorie</h4>
+                        <h5 id="dialogTitle" class="modal-title">Create new Rule categorie</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div id="createANewItemContentForm">
@@ -26,24 +22,20 @@ <h4 id="dialogTitle" class="modal-title">Create new Rule categorie</h4>
                         <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                         <button id="saveCategory" class="btn btn-success">[Submit new Category]</button>
                     </div>  
-                </div><!-- /.modal-content -->
-            </div><!-- /.modal-dialog -->
+                </div>
+            </div>
         </div>
     </div>
 </component-creationpopup>
 
 <component-deletePopup>
     <div id="RuleCategoryCreationContainer">
-        <div id="creationForm"> 
-            <div class="modal-backdrop fade in" style="height: 100%;"></div>
+        <div id="creationForm">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <div class="close" data-bs-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="visually-hidden">Close</span>
-                        </div>
-                        <h4 id="dialogTitle" class="modal-title">Delete category</h4>
+                        <h5 id="dialogTitle" class="modal-title">Delete category</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div class="row">
@@ -57,8 +49,8 @@ <h4 id="text" class="text-center col-lg-12 col-sm-12 col-xs-12">
                         <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                         <button id="deleteCategoryButton" class="btn">[Submit new Category]</button>
                     </div>  
-                </div><!-- /.modal-content -->
-            </div><!-- /.modal-dialog -->
+                </div>
+            </div>
         </div>
     </div>
 </component-deletePopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleModificationValidationPopup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleModificationValidationPopup.html
index 57ec828fd47..2a9d7d6b47e 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleModificationValidationPopup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/RuleModificationValidationPopup.html
@@ -11,17 +11,13 @@
 <component-validationpopup>
     <div id="validationContainer">
         <div id="validationForm">
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <div class="close" data-bs-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="visually-hidden">Close</span>
-                        </div>
-                        <h4 id="dialogTitle" class="modal-title">
+                        <h5 id="dialogTitle" class="modal-title">
                             [Some modification on item]
-                        </h4>
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div class="notifications"></div>
@@ -39,8 +35,8 @@ <h4 id="dialogTitle" class="modal-title">
                             [Submit Draft]
                         </button>
                     </div>  
-                </div><!-- /.modal-content -->
-            </div><!-- /.modal-dialog -->
+                </div>
+            </div>
         </div>
     </div>
 </component-validationpopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
index 74055ba12a1..4b97c9c394b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
@@ -6,16 +6,12 @@
  -->
 
 <accept_new_server-template>
-<div class="modal fade" data-keyboard="true" tabindex="-1" id="confirmPopup">
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
+<div class="modal fade" tabindex="-1" id="confirmPopup">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Accept nodes in Rudder</h4>
+                <h5 class="modal-title">Accept nodes in Rudder</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <h4 class="text-center">
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createActiveTechniqueCategory.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createActiveTechniqueCategory.html
index 361e295b3fe..3ed45883099 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createActiveTechniqueCategory.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createActiveTechniqueCategory.html
@@ -1,18 +1,14 @@
 S<!--
   This is the content of the create active technique category
  -->
-<technique-createcategorypopup>  
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
+<technique-createcategorypopup>
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">
+                <h5 class="modal-title">
                     Create a new Active Technique category
-                </h4>
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <item-notifications ></item-notifications>
@@ -24,6 +20,6 @@ <h4 class="modal-title">
                 <item-cancel></item-cancel>
                 <item-save></item-save>
             </div>  
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
  </technique-createcategorypopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCategoryOrGroup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCategoryOrGroup.html
index 82332e87ff5..40323518b20 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCategoryOrGroup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCategoryOrGroup.html
@@ -3,15 +3,11 @@
   It get called to be injected within the group.html
  -->
 <groups-creategrouppopup>
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Create a new item</h4>
+                <h5 class="modal-title">Create a new item</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body" id="createANewItemContentForm">
                 <item-notifications></item-notifications>
@@ -29,6 +25,6 @@ <h4 class="col-lg-12 col-xs-12 col-sm-12 audit-title">New <span id="itemTitle"><
                 <item-cancel></item-cancel>
                 <item-save></item-save>
             </div>  
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
 </groups-creategrouppopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCloneGroupPopup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCloneGroupPopup.html
index b271c9017c8..c86d57d68ce 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCloneGroupPopup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createCloneGroupPopup.html
@@ -1,13 +1,9 @@
 <groups-createCloneGroupPopup>
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Clone Group</h4>
+                <h5 class="modal-title">Clone Group</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <item-notifications ></item-notifications>
@@ -23,6 +19,6 @@ <h4 class="modal-title">Clone Group</h4>
                 <item-cancel></item-cancel>
                 <item-save></item-save>
             </div>  
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
 </groups-createCloneGroupPopup>
\ No newline at end of file
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createRule.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createRule.html
index 195efa09658..dc25c70c9a4 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createRule.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/createRule.html
@@ -3,15 +3,11 @@
   It get called to be injected within the  ruleManagement
  -->
 <rule-createrulepopup>
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title"><item-title></item-title></h4>
+                <h5 class="modal-title"><item-title></item-title></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <item-clonenotice></item-clonenotice>
@@ -25,6 +21,6 @@ <h4 class="modal-title"><item-title></item-title></h4>
                 <item-cancel></item-cancel>
                 <item-save></item-save>
             </div>  
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
  </rule-createrulepopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
index 5459a33de1d..0df2dd6b5ac 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
@@ -6,16 +6,12 @@
  -->
 
 <expectedpolicypopup-template>
-    <div id="expectedPolicyPopup" class="modal fade" data-keyboard="true" tabindex="-1">
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div id="expectedPolicyPopup" class="modal fade" tabindex="-1">
         <div class="modal-dialog modal-lg">
             <div id="expectedPolicyContent" class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-bs-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                    <span class="visually-hidden">Close</span>
-                    </div>
-                    <h4 class="modal-title">Rules to be applied</h4>
+                    <h5 class="modal-title">Rules to be applied</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                      <h4 class="text-center">The following Rules will be applied to this node as it joins Rudder, based on criteria from dynamic groups it would become a member of.</h4>
@@ -58,9 +54,7 @@ <h4 class="text-center">The following Rules will be applied to this node as it j
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">
-                        Close
-                    </button>
+                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                 </div>  
             </div>
         </div>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/giveReason.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/giveReason.html
index fdef4341da9..908ec2b5635 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/giveReason.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/giveReason.html
@@ -3,15 +3,11 @@
   It get called to be injected within the  ruleManagement
  -->
 <reason-givereasonpopup>
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Reason for this change</h4>
+                <h5 class="modal-title">Reason for this change</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <item-reason></item-reason>
@@ -20,6 +16,6 @@ <h4 class="modal-title">Reason for this change</h4>
                 <item-cancel></item-cancel>
                 <item-save></item-save>
             </div>  
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
+        </div>
+    </div>
  </reason-givereasonpopup>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
index 34de7af305b..36570eb3514 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
@@ -6,16 +6,12 @@
  -->
 
 <refuse_new_server-template>
-<div class="modal fade" data-keyboard="true" tabindex="-1" id="refusePopup">
-    <div class="modal-backdrop fade in" style="height: 100%;"></div>
+<div class="modal fade" tabindex="-1" id="refusePopup">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="close" data-bs-dismiss="modal">
-                <span aria-hidden="true">&times;</span>
-                <span class="visually-hidden">Close</span>
-                </div>
-                <h4 class="modal-title">Refuse nodes in Rudder</h4>
+                <h5 class="modal-title">Refuse nodes in Rudder</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <h4 class="text-center">
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
index a1574e91da4..834412b9b7f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
@@ -155,7 +155,9 @@
 
               <!-- Log out -->
               <li class="nav-item">
-                <a id="logout" href="#" data-bs-toggle="control-sidebar"><i class="fa fa-sign-out"></i></a>
+                <a id="logout" data-bs-toggle="modal" data-bs-target="#ModalLogout">
+                  <i class="fa fa-sign-out"></i>
+                </a>
               </li>
 
             </ul>
@@ -179,24 +181,19 @@
         </section>
       </aside>
     </div>
-    <div id="basePopup" class="modal fade" data-keyboard="true" tabindex="-1">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div id="basePopup" class="modal fade" tabindex="-1">
       <div class="modal-dialog">
         <div class="modal-content">
 
-        </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
+        </div>
+      </div>
     </div>
-    <div id="sendMetricsPopup" class="modal fade" data-keyboard="true" tabindex="-1">
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div id="sendMetricsPopup" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-bs-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="visually-hidden">Close</span>
-                    </div>
-                    <h4 class="modal-title">Participate in usage survey?</h4>
+                  <h5 class="modal-title">Participate in usage survey?</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <p>Thanks for using Rudder! We hope you are enjoying it.</p>
@@ -213,28 +210,24 @@ <h4 class="modal-title">Participate in usage survey?</h4>
                     <button type="button" id="laterSendMetrics" class="btn btn-default"  data-bs-dismiss="modal">Ask again later</button>
                     <button type="button" id="yesSendMetrics" class="btn btn-default pull-right">Yes</button>
                 </div>
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
+            </div>
+        </div>
+    </div>
 
-    <div class="modal fade" id="ModalLogOut" tabindex="-1" role="dialog">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
-        <div class="modal-dialog" role="document">
+    <div class="modal fade" id="ModalLogout" tabindex="-1" aria-hidden="true">
+      <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <div class="close" data-bs-dismiss="modal">
-            <span aria-hidden="true">&times;</span>
-            <span class="visually-hidden">Close</span>
-            </div>
-            <h4 class="modal-title" id="myModalLabel">Log out</h4>
+            <h5 class="modal-title fs-5">Log out</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
-            <h4 class="row text-center">
-               You are about to log out
-            </h4>
-            <h5 class="row text-center">
-               Do you want to proceed?
+            <h5 class="text-center">
+              You are about to log out
             </h5>
+            <h6 class="text-center">
+              Do you want to proceed?
+            </h6>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
@@ -246,6 +239,7 @@ <h5 class="row text-center">
       </div>
     </div>
 
+
     <img alt="" id="ajax-loader" class="ajaxloader svg-loader" data-lift="with-cached-resource" src="/images/ajax-loader.svg"/>
 
     <div class="content-wrapper">
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html
index 9ff1cc6ca9f..f0813f76edb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html
@@ -223,10 +223,10 @@ <h4>Technique version deprecated</h4>
   <lift:ignore>
     This div gets the content of the createDirective injected within
   </lift:ignore>
-  <div id="removeActionDialog"        class="modal fade" data-keyboard="true" tabindex="-1"></div>
-  <div id="disableActionDialog"       class="modal fade" data-keyboard="true" tabindex="-1"></div>
-  <div id="confirmUpdateActionDialog" class="modal fade" data-keyboard="true" tabindex="-1"></div>
-  <div id="createCloneDirectivePopup" class="modal fade" data-keyboard="true" tabindex="-1"></div>
+  <div id="removeActionDialog"        class="modal fade" tabindex="-1"></div>
+  <div id="disableActionDialog"       class="modal fade" tabindex="-1"></div>
+  <div id="confirmUpdateActionDialog" class="modal fade" tabindex="-1"></div>
+  <div id="createCloneDirectivePopup" class="modal fade" tabindex="-1"></div>
 </component-form>
 
 <component-informationTab>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentTechniqueEditForm.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentTechniqueEditForm.html
index 84b2da476b2..49bc625e257 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentTechniqueEditForm.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/ComponentTechniqueEditForm.html
@@ -90,16 +90,12 @@ <h4><span id="techniqueDescription">[technique.description]</span></h4>
 
 <component-popupremoveform>
     <div>
-        <div id="deleteActionDialog" class="modal fade" data-keyboard="true" tabindex="-1">
-            <div class="modal-backdrop fade in" style="height: 100%;"></div>
+        <div id="deleteActionDialog" class="modal fade" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <div class="close" data-bs-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="visually-hidden">Close</span>
-                        </div>
-                        <h4 class="modal-title">Delete a Technique</h4>
+                        <h5 class="modal-title">Delete a Technique</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <div class="row space-bottom">
@@ -131,28 +127,25 @@ <h4 class="col-lg-12 col-sm-12 col-xs-12 audit-title">Change Audit Log</h4>
                         <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                         <button id="dialogDeleteButton" class="btn btn-danger">[Delete]</button>
                     </div>  
-                </div><!-- /.modal-content -->
-            </div><!-- /.modal-dialog -->
+                </div>
+            </div>
         </div>
     </div>
 </component-popupremoveform>
 
 <component-popupdisableform>    
 <div>
-    <div id="disableActionDialog" class="modal fade" data-keyboard="true" tabindex="-1">
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div id="disableActionDialog" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-bs-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                    <span class="visually-hidden">Close</span>
-                    </div>
-                    <h4 class="modal-title">
+                    <h5 class="modal-title">
                         <span id="dialogDisableTitle">
                             Disable 
                         </span> 
-                        a Technique</h4>
+                        a Technique
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row space-bottom">
@@ -181,8 +174,8 @@ <h4 class="col-lg-12 col-sm-12 col-xs-12 audit-title">Change Audit Log</h4>
                     <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                     <button id="dialogDisableButton" class="btn btn-primary">[Delete]</button>
                 </div>  
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
+            </div>
+        </div>
     </div>
 </div>
 </component-popupdisableform>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html
index ae3e941508b..baf1b21c7a0 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html
@@ -18,13 +18,13 @@
 
 <component-staticbody>
 <div>
-  <div id="createCloneGroupPopup" class="modal fade" data-keyboard="true" tabindex="-1">
+  <div id="createCloneGroupPopup" class="modal fade" tabindex="-1">
     <div id="createCloneGroupContainer" ></div>
   </div>
 </div>
 
 <div>
-  <div id="confirmUpdateActionDialog" class="modal fade" data-keyboard="true" tabindex="-1" ></div>
+  <div id="confirmUpdateActionDialog" class="modal fade" tabindex="-1" ></div>
 </div>
 </component-staticbody>