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 5ea90e8c051..479fc8a36d9 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
@@ -449,7 +449,7 @@ view model =
 
                 TechniqueDetails technique state uiInfo editInfo ->
                   showTechnique model technique state uiInfo editInfo
-    classes = "rudder-template " ++ if model.genericMethodsOpen then "show-methods" else "show-techniques"
+    classes = "rudder-template " ++ if model.genericMethodsOpen then "show-right" else "show-left"
 
 
   in
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss
index 7c345f07a61..63def915cdd 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss
@@ -53,8 +53,13 @@ $rudder-txt-light     : #36474E;
 $rudder-txt-link      : #1295C2;
 
 // --- BACKGROUNDS
-$rudder-bg-gray : #F8F9FC;
+$rudder-bg-light-gray : #F8F9FC;
+$rudder-bg-gray       : #EEF1F9;
+$rudder-bg-dark-gray  : #E1E5EB;
 
 // --- BORDERS
 $rudder-border-color-default : #D6DEEF;
 $rudder-border-color-danger  : #AC2925;
+
+// --- BOX-SHADOWS
+$rudder-box-shadow-color: #DCE3EF;
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss
index e941f9532d0..ccb9eeb01eb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss
@@ -88,7 +88,7 @@ $modal-md: 600px;
   }
   &.btn-danger,
   &.btn-default {
-    background-color: $rudder-bg-gray;
+    background-color: $rudder-bg-light-gray;
     border: 1px solid $rudder-border-color-default;
     color: $rudder-txt-primary;
     .fa{
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss
index 6cc9c36ed6c..bd325b441ce 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss
@@ -83,7 +83,7 @@
 
   & > li{
     padding: 8px;
-    background-color: $rudder-bg-gray;
+    background-color: $rudder-bg-light-gray;
     border-radius: 5px;
     margin-bottom: 6px;
     font-size: 14px;
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 1a4a829da0c..f483cbdfc7e 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
@@ -35,6 +35,8 @@
 *************************************************************************************
 */
 
+@use 'rudder-variables' as *;
+
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
@@ -101,7 +103,7 @@ $navbar-hover-color : #F4F4F4;
   height: 50px;
   border-radius: 0;
   background-color: #fff;
-  box-shadow: 4px 4px 10px #dce3efb0;
+  box-shadow: 4px 4px 10px $rudder-box-shadow-color;
 }
 
 .modal-open {
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss
index 061c6712901..2179ad0eb81 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss
@@ -101,7 +101,7 @@
   padding: 15px 15px 10px !important;
   margin: 0;
   font-size: 1.3rem;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   border-bottom: 1px solid $rudder-border-color-default;
 }
 
@@ -256,7 +256,7 @@ pre.display-keys{
   border-top-left-radius: 0;
   border: 1px solid $rudder-border-color-default;
   border-radius: 0px 4px 4px 4px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   display: inline-block;
 }
 pre.display-keys > label:first-child{
@@ -297,7 +297,7 @@ pre.display-keys > label{
   & > .nav-item {
     & > button {
       transition-duration: .2s;
-      background-color: $rudder-bg-gray;
+      background-color: $rudder-bg-light-gray;
       border: 1px solid $rudder-border-color-default;
       padding: 6px 10px;
       color: $rudder-txt-secondary;
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.scss
similarity index 93%
rename from webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css
rename to webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.scss
index 4070f73f8ca..5db1889c43c 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.scss
@@ -1,6 +1,6 @@
 /*
 *************************************************************************************
-* Copyright 2020 Normation SAS
+* Copyright 2024 Normation SAS
 *************************************************************************************
 *
 * This file is part of Rudder.
@@ -35,6 +35,9 @@
 *************************************************************************************
 */
 
+// --- MODULES
+@use 'rudder-variables' as *;
+
 /* =====  GENERAL  ===== */
 .btn.btn-dsc.active{
   color: #fff !important;
@@ -152,12 +155,7 @@
 body > .container-fluid {
 	padding: 0 !important;
 }
-.col-techniques,
-.col-methods {
-  transition-duration: .15s;
-  transition-timing-function: ease;
-  overflow: hidden;
-}
+
 .label-checkbox{
   color: #041922;
   cursor: pointer;
@@ -198,98 +196,6 @@ body > .ng-toast {
 }
 
 /* ===== TECHNIQUES & METHODS ===== */
-.show-methods .col-techniques,
-.show-techniques .col-methods{
-  -ms-flex: 0 0 50px;
-  flex: 0 0 50px;
-  background-color: #dedada;
-  cursor: pointer;
-}
-.show-methods .col-techniques::before,
-.show-techniques .col-methods::before{
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .2s;
-  z-index: -1;
-  box-shadow: 2px 0px 8px 0px #00000010;
-}
-.show-methods .col-techniques:hover::before,
-.show-techniques .col-methods:hover::before{
-  opacity: 1;
-}
-.show-methods .col-techniques::after,
-.show-techniques .col-methods::after{
-  content: "\f0c9";
-  display: inline-block;
-  font: normal normal normal 14px/1 inherit;
-  font-family: "Font Awesome 5 Free";
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
-  font-weight: 900;
-  display: block;
-  position: absolute;
-  top: 15px;
-  right: 16.25px;
-  opacity: .5;
-  font-size: 20px;
-  transition-duration: .2s;
-  transition-property: opacity;
-  font-weight: 900;
-}
-.show-techniques .col-techniques:hover::after,
-.show-methods .col-methods:hover::after{
-  opacity: .8;
-}
-.col-techniques > .row,
-.col-methods > .row,
-.methods .method {
-  margin: 0;
-  transition-duration: .4s;
-  transition-property: transform, opacity;
-  transition-timing-function: ease;
-}
-.col-methods .filters-container{
-  flex-direction: column;
-  padding: 10px;
-}
-
-.col-methods .filters-container .input-group > .input-group-text:first-child{
-  border-top-left-radius : 4px;
-  border-bottom-left-radius : 4px;
-  background-color: #ededed;
-  border-color: #D6DEEF;
-}
-.col-methods .filters-container .input-group > .input-group-text + .form-control {
-  display: flex;
-  align-items: center;
-}
-
-.show-methods .col-techniques > div,
-.show-techniques .col-methods > div{
-  opacity: 0;
-}
-.col-techniques .input-group,
-.col-methods .input-group{
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 100%;
-}
-.show-techniques .col-methods .input-group .btn{
-  margin-left: 15px;
-}
-.show-methods .col-techniques > div{
-  transform: translateX(-50px);
-  pointer-events: none;
-}
 .dndPlaceholder{
   margin: 10px 0;
   padding: 15px;
@@ -299,9 +205,6 @@ body > .ng-toast {
   background-color: #F8F9FC;
 }
 /* ===== TECHNIQUES ===== */
-.col-techniques{
-  box-shadow: 2px 0px 8px 0px #00000024;
-}
 .col-techniques label.btn{
   margin-bottom: 0;
 }
@@ -967,7 +870,7 @@ button.btn.clipboard:hover {
   padding-top: 10px;
 }
 
-.show-techniques .col-methods > div{
+.show-left .col-methods > div{
   transform: translateX(50px);
 }
 
@@ -1102,7 +1005,7 @@ ul li.hide-method {
   word-break: keep-all;
 }
 .method .cursorMove {
-  background-color: #e1e5eb;
+  background-color: $rudder-bg-dark-gray;
   padding: 0 10px;
   color: #04192299;
   display: flex;
@@ -1627,7 +1530,7 @@ ul li.hide-method {
 .gm-labels .gm-label.gm-label-name,
 .gm-labels .gm-label.gm-label-default{
   color: #041922;
-  background-color:#e1e5eb;
+  background-color: $rudder-bg-dark-gray;
 }
 
 
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.scss
index 6566d350451..c5889911e0b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-template.scss
@@ -35,7 +35,6 @@
 */
 
 // --- MODULES
-
 @use 'rudder-variables' as *;
 
 /* === RESET === */
@@ -107,7 +106,7 @@ ul {
 }
 .main-details .well{
   padding: 6px 12px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   border: 1px solid #d6deef;
   box-shadow: none !important;
 }
@@ -154,9 +153,9 @@ ul {
   justify-content: space-between;
 }
 .rudder-template .header-title .title-icon{
-  opacity: .4;
   font-size: 0.8em;
   margin-right: 8px;
+  color: $rudder-txt-secondary;
 }
 .rudder-template .header-title h1{
   padding: 0;
@@ -191,7 +190,7 @@ ul {
     }
 
     &:hover{
-      background-color: $rudder-bg-gray;
+      background-color: $rudder-bg-light-gray;
 
       .ion-clipboard{
         opacity: 1;
@@ -252,7 +251,7 @@ ul {
 .header-buttons .dropdown-menu > li > a:hover,
 .gm-labels .dropdown-menu > li > a:hover {
   color: #041922;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 .header-buttons .dropdown-menu > li > a.action-success,
 .gm-labels .dropdown-menu > li > a.action-success {
@@ -331,7 +330,7 @@ ul {
 
 .header-buttons .dropdown-menu.dropdown-message {
   padding: 10px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   border: 1px solid $rudder-border-color-default;
   width: 450px;
   font-size: 14px;
@@ -393,12 +392,12 @@ ul {
 .badge-resources > .nb-resources.del:before {
   content: "-";
 }
-.col-techniques .badge-resources{
+.sidebar-left .badge-resources{
   margin-left: 4px;
   position: relative;
   top: -2px;
 }
-.col-techniques .badge-resources > span {
+.sidebar-left .badge-resources > span {
   font-size: 10px;
   padding: 4px;
   min-width: 22px;
@@ -419,18 +418,126 @@ ul {
   background-color: #fff;
   position: relative;
   z-index: 1;
-  box-shadow: 8px 0px 10px -10px #00000050;
+  box-shadow: -8px 0px 10px 10px $rudder-box-shadow-color;
 }
 .rudder-template .template-sidebar.sidebar-right{
-  box-shadow: 8px 0px 10px 10px #00000050;
+  box-shadow: 8px 0px 10px 10px $rudder-box-shadow-color;
 }
 #headerBar ~ .content-wrapper .rudder-template .template-sidebar{
   height: calc(100VH - 80px);
 }
 .rudder-template .template-sidebar .sidebar-header{
-  padding: 15px 15px 0 15px;
+  padding: 15px;
   border-bottom: 2px solid #d6deef;
 }
+
+/* ============================== */
+.template-sidebar {
+  transition-duration: .15s;
+  transition-timing-function: ease;
+  overflow: hidden;
+}
+
+.show-right .sidebar-left,
+.show-left .sidebar-right,
+.hide-right .sidebar-right{
+  -ms-flex: 0 0 50px;
+  flex: 0 0 50px;
+  background-color: $rudder-bg-dark-gray;
+  cursor: pointer;
+}
+.show-right .sidebar-left::before,
+.show-left .sidebar-right::before,
+.hide-right .sidebar-right::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: .2s;
+  z-index: -1;
+  box-shadow: 2px 0px 8px 0px #00000010;
+}
+.show-right .sidebar-left:hover::before,
+.show-left .sidebar-right:hover::before,
+.hide-right .sidebar-right:hover::before{
+  opacity: 1;
+}
+.show-right .sidebar-left::after,
+.show-left .sidebar-right::after,
+.hide-right .sidebar-right::after{
+  content: "\f0c9";
+  display: inline-block;
+  font: normal normal normal 14px/1 inherit;
+  font-family: "Font Awesome 5 Free";
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  font-weight: 900;
+  display: block;
+  position: absolute;
+  top: 15px;
+  right: 16.25px;
+  opacity: .5;
+  font-size: 20px;
+  transition-duration: .2s;
+  transition-property: opacity;
+  font-weight: 900;
+}
+.show-left .sidebar-left:hover::after,
+.show-right .sidebar-right:hover::after{
+  opacity: .8;
+}
+.sidebar-left > .row,
+.sidebar-right > .row,
+.methods .method {
+  margin: 0;
+  transition-duration: .4s;
+  transition-property: transform, opacity;
+  transition-timing-function: ease;
+}
+.sidebar-right .filters-container{
+  flex-direction: column;
+  padding: 10px;
+}
+
+.sidebar-right .filters-container .input-group > .input-group-text:first-child{
+  border-top-left-radius : 4px;
+  border-bottom-left-radius : 4px;
+  background-color: #ededed;
+  border-color: #D6DEEF;
+}
+.sidebar-right .filters-container .input-group > .input-group-text + .form-control {
+  display: flex;
+  align-items: center;
+}
+
+.show-right .sidebar-left > div,
+.show-left .sidebar-right > div,
+.hide-right .sidebar-right > div{
+  opacity: 0;
+}
+.sidebar-left .input-group,
+.sidebar-right .input-group{
+  padding-bottom: 10px;
+  width: 100%;
+}
+.show-left .sidebar-right .input-group .btn,
+.hide-right .sidebar-right .input-group .btn{
+  margin-left: 15px;
+}
+.show-right .sidebar-left > div{
+  transform: translateX(-50px);
+  pointer-events: none;
+}
+
+/* ============================== */
+
 .rudder-template .header-filter{
   margin: 10px 0;
   display: flex;
@@ -461,7 +568,7 @@ ul {
   margin: 0 -15px;
   padding: 15px;
   border-top: 1px solid #d6deef;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   position: relative;
   display: flex;
 }
@@ -481,7 +588,7 @@ ul {
   transform: rotate(45deg);
   top: -6px;
   right: 24px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 .rudder-template .sidebar-navbar + .filters-container:before,
 .rudder-template .filters-container.hidden:before{
@@ -815,7 +922,7 @@ ul {
 }
 .rudder-template .dataTable > tbody > tr:nth-child(even),
 .filemanager-container .dataTable > tbody > tr:nth-child(even){
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 .rudder-template .dataTable > tbody > tr:nth-child(even):hover,
 .filemanager-container .dataTable > tbody > tr:nth-child(even):hover{
@@ -1011,7 +1118,7 @@ ul {
   cursor: default;
 }
 .tree-container .tree-heading {
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   color: #738195;
   margin: 0 calc(var(--bs-gutter-x)*-0.5);
   padding: 15px;
@@ -1044,7 +1151,7 @@ ul {
   margin: 15px -15px 0 -15px;
   width: calc(100% + 30px);
   padding: 15px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   border-top: 2px solid #d6deef;
   justify-content: space-between;
 }
@@ -1101,7 +1208,7 @@ ul {
       cursor: ns-resize;
       border-top: 1px $rudder-border-color-default solid;
       text-align: center;
-      background-color: $rudder-bg-gray;
+      background-color: $rudder-bg-light-gray;
 
       &:active {
         cursor: ns-resize;
@@ -1169,7 +1276,7 @@ ul {
   background-color: #fff;
 }
 .rudder-template .template-main .main-table > .table-container.skeleton-loading .dataTable > tbody > tr:nth-child(even):hover {
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 .rudder-template ul.skeleton-loading li > i,
 .rudder-template ul.skeleton-loading li > span,
@@ -1333,7 +1440,7 @@ $nbRows: 20;
   align-items: baseline;
 }
 .rudder-template .toggle-checkbox:checked + .callout-fade ul li:nth-child(even){
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 .rudder-template .toggle-checkbox:checked + .callout-fade ul li:hover{
   background-color: #e2f2ff !important;
@@ -1555,7 +1662,7 @@ ul.applied-list > li {
   box-shadow: 0px 5px 4px -3px rgba(0,0,0,.1);
 }
 ul.applied-list > li.is-disabled{
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
 }
 
 ul.applied-list > li > .border{