diff --git a/front/src/shared/components/actionsItem.jsx b/front/src/shared/components/actionsItem.jsx
index 950c44a7..1470279c 100644
--- a/front/src/shared/components/actionsItem.jsx
+++ b/front/src/shared/components/actionsItem.jsx
@@ -52,6 +52,7 @@ class ActionsItem extends Component {
         meta = (
           <ListItemMeta
             icon="add"
+            className="actionItemIcon"
             onClick={() => {
               this.props.onAddAction(action, isCondition);
             }}
@@ -60,7 +61,11 @@ class ActionsItem extends Component {
       }
     } else {
       meta = (
-        <ListItemMeta icon="remove" onClick={this.props.onDeleteActionClick} />
+        <ListItemMeta
+          icon="remove"
+          className="actionItemIcon"
+          onClick={this.props.onDeleteActionClick}
+        />
       );
     }
     let cl = " onFocusAction actionItem";
@@ -79,8 +84,9 @@ class ActionsItem extends Component {
           this.handleActionsEditableSelected(this.actionsEditableRef, index);
         }}
       >
+        <React.Fragment>{this.props.toolbox}</React.Fragment>
         <div
-          style={{ width: "100%" }}
+          style={{ width: "calc(100% - 28px)" }}
           ref={(r) => {
             this.ref = r;
           }}
@@ -145,6 +151,7 @@ ActionsItem.propTypes = {
   onDeleteActionClick: PropTypes.func,
   style: PropTypes.shape({}),
   className: PropTypes.string,
+  toolbox: PropTypes.node,
 };
 
 export default ActionsItem;
diff --git a/front/src/shared/components/actionsList.jsx b/front/src/shared/components/actionsList.jsx
index 2af74fd7..98a587eb 100644
--- a/front/src/shared/components/actionsList.jsx
+++ b/front/src/shared/components/actionsList.jsx
@@ -71,23 +71,23 @@ class ActionsList extends Component {
     this.props.onDeleteActionClick(this.props.name, index);
   };
 
-  updateToolboxDisplay = () => {
-    if (this.selectedItemRef && this.selectedItemRef.ref && this.toolboxRef) {
-      const {
-        left,
-        top,
-        width,
-      } = this.selectedItemRef.ref.parentNode.getBoundingClientRect();
-      let adjustedLeft = left - 8;
-      if (adjustedLeft < 0) {
-        adjustedLeft = 0;
-      }
-      const adjustedTop = top - 36;
-      const adjustedWidth = width - 2;
-      const style = `left: ${adjustedLeft}px; top: ${adjustedTop}px; width: ${adjustedWidth}px;`;
-      this.toolboxRef.style = style;
-    }
-  };
+  // updateToolboxDisplay = () => {
+  //   if (this.selectedItemRef && this.selectedItemRef.ref && this.toolboxRef) {
+  //     const {
+  //       left,
+  //       top,
+  //       width,
+  //     } = this.selectedItemRef.ref.parentNode.getBoundingClientRect();
+  //     let adjustedLeft = left - 8;
+  //     if (adjustedLeft < 0) {
+  //       adjustedLeft = 0;
+  //     }
+  //     const adjustedTop = top - 36;
+  //     const adjustedWidth = width - 2;
+  //     const style = `left: ${adjustedLeft}px; top: ${adjustedTop}px; width: ${adjustedWidth}px;`;
+  //     this.toolboxRef.style = style;
+  //   }
+  // };
 
   render() {
     const {
@@ -108,21 +108,38 @@ class ActionsList extends Component {
       actions[0].type === "condition";
     // const isActionsString = !isActionsEmpty && !isActionsCondition;
     const editable = true;
-    let addContentClassname = "";
-    let isSelected = false;
+
+    const isInput = name === "input";
+    const isIntentOutputEmpty = !isInput && !(actions && actions.length > 0);
+    const toolbox = (
+      <div
+        className="actionstoolbox"
+        // ref={(r) => {
+        //   this.toolboxRef = r;
+        //   this.updateToolboxDisplay();
+        // }}
+      >
+        <ActionsToolbox
+          onChange={onChangeToolbox}
+          isInput={isInput}
+          condition={isIntentOutputEmpty}
+        />
+      </div>
+    );
+
+    let addContentClassname = "addActionItem";
+    let isAddContentSelected = false;
     if (this.props.selected === 0) {
-      addContentClassname = "selectedActionItem";
-      isSelected = true;
+      addContentClassname += " selectedActionItem";
+      isAddContentSelected = true;
     }
-    const selected = this.props.selected - 1;
-    addContentClassname = `addActionItem ${addContentClassname}`;
     const addContent = (
       <ActionsItem
         className={addContentClassname}
         containerName={name}
         action={newAction}
         editable={editable}
-        isSelected={isSelected}
+        isSelected={isAddContentSelected}
         onAddAction={(content, isCondition = false) => {
           this.handleAddNewAction(content, isCondition);
         }}
@@ -138,14 +155,15 @@ class ActionsList extends Component {
         ref={(r) => {
           if (this.props.selected === 0) {
             this.selectedItemRef = r;
-            this.updateToolboxDisplay();
+            // this.updateToolboxDisplay();
           }
         }}
+        toolbox={isAddContentSelected && toolbox}
       />
     );
+
     const s = {
-      overflowX: "hidden",
-      overflowY: "auto",
+      overflow: "hidden",
       margin: "0 8px 16px 8px",
     };
     if (actions && actions.length > 0) {
@@ -155,7 +173,7 @@ class ActionsList extends Component {
       contentList = (
         <List style={s}>
           {actionsDisplayed.map((action, index) => {
-            isSelected = isSelected || index === selected;
+            const selected = index === this.props.selected - 1;
             return (
               <ActionsItem
                 containerName={name}
@@ -175,14 +193,15 @@ class ActionsList extends Component {
                   this.handleDeleteClick(index);
                 }}
                 isCondition={isActionsCondition}
-                isSelected={index === selected}
-                className={index === selected ? "selectedActionItem" : null}
+                isSelected={selected}
+                className={selected ? "selectedActionItem" : null}
                 ref={(r) => {
                   if (index === selected) {
                     this.selectedItemRef = r;
-                    this.updateToolboxDisplay();
+                    // this.updateToolboxDisplay();
                   }
                 }}
+                toolbox={selected && toolbox}
               />
             );
           })}
@@ -218,34 +237,13 @@ class ActionsList extends Component {
         />
       </div>
     );
-    let toolbox = "";
-    if (isSelected) {
-      const isInput = name === "input";
-      const isIntentOutputEmpty = !isInput && !(actions && actions.length > 0);
-      toolbox = (
-        <div
-          className="actionstoolbox"
-          ref={(r) => {
-            this.toolboxRef = r;
-            this.updateToolboxDisplay();
-          }}
-        >
-          <ActionsToolbox
-            onChange={onChangeToolbox}
-            isInput={isInput}
-            condition={isIntentOutputEmpty}
-          />
-        </div>
-      );
-    }
     return (
       <ExpansionPanel
         label={title}
-        className="zui-color--white"
+        className="zui-color--white editItemContainer"
         style={{ margin: "12px" }}
         elevation={0}
       >
-        {toolbox}
         {addContent}
         {contentList}
       </ExpansionPanel>
diff --git a/front/src/shared/components/actionsToolbox.jsx b/front/src/shared/components/actionsToolbox.jsx
index 094be1a5..2a19e98e 100644
--- a/front/src/shared/components/actionsToolbox.jsx
+++ b/front/src/shared/components/actionsToolbox.jsx
@@ -384,7 +384,7 @@ class ActionsToolbox extends Component {
         <div style={styleToolbarRight}>
           <Button
             onClick={(e) => {
-              e.preventDefault();
+              e.stopPropagation();
               this.props.onChange("unfocus");
             }}
           >
diff --git a/front/src/stylesheets/_all.scss b/front/src/stylesheets/_all.scss
index 39d3f943..fb841f5c 100644
--- a/front/src/stylesheets/_all.scss
+++ b/front/src/stylesheets/_all.scss
@@ -4,11 +4,11 @@
  * This source code is licensed under the GPL v2.0+ license found in the
  * LICENSE file in the root directory of this source tree.
  */
- 
+
 html {
   cursor: default;
 }
- 
+
 .zui-panel-header-title {
   font-weight: 400;
 }
@@ -39,7 +39,6 @@ html {
   padding-top: 16px;
 }
 
-
 .opla-home > div > * {
   margin-top: 40px;
 }
@@ -48,7 +47,7 @@ html {
   background-color: $color_primary;
 }
 
-.opla-assistants  .zap-panel_header {
+.opla-assistants .zap-panel_header {
   padding-left: 24px;
 }
 
@@ -60,7 +59,7 @@ html {
   border: 1px solid $color_primary;
 }
 
-.opla-assistants  .mdc-card__horizontal-block {
+.opla-assistants .mdc-card__horizontal-block {
   padding: 0;
   flex-direction: row-reverse;
 }
@@ -95,7 +94,7 @@ html {
   height: 62px;
   margin-right: 8px;
   border-radius: 50%;
-  border: 1px solid #AEB2B4;
+  border: 1px solid #aeb2b4;
 }
 
 .opla-dashboard_icon .zrmc-icon {
@@ -107,10 +106,11 @@ html {
 .opla-dashboard_icon .zrmc-icon > * {
   width: 48px;
   height: 48px;
-  fill: #AEB2B4;
+  fill: #aeb2b4;
 }
 
-.opla-dashboard_title .mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box):not(.mdc-text-field--textarea):not(.mdc-text-field--outlined) {
+.opla-dashboard_title
+  .mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box):not(.mdc-text-field--textarea):not(.mdc-text-field--outlined) {
   margin: 0;
   height: 64px;
 }
@@ -122,7 +122,9 @@ html {
   font-weight: 300;
 }
 
-.opla-dashboard_title .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input {
+.opla-dashboard_title
+  .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
+  .mdc-text-field__input {
   border: none;
 }
 
@@ -195,7 +197,7 @@ html {
 .opla-analytics_value {
   font-size: 46px;
   font-weight: 200;
-  color: #1C252C;
+  color: #1c252c;
 }
 
 .opla-analytics_unit {
@@ -206,20 +208,20 @@ html {
 .opla-analytics_metric {
   font-size: 46px;
   font-weight: 200;
-  color: #1C252C;
+  color: #1c252c;
   width: 30%;
 }
 
 .opla-analytics_legend {
   font-size: 16px;
   font-weight: 400;
-  color: #AEB2B4;
+  color: #aeb2b4;
   padding-top: 16px;
 }
 
 .opla-analytics_error {
   font-weight: 500;
-  color: #F44336;
+  color: #f44336;
   padding: 16px 0;
 }
 
@@ -236,485 +238,527 @@ html {
   font-weight: 300;
   margin-top: 30px;
 }
- 
+
 .intent_toolbar .zui-panel-header__actions {
   padding-top: 36px;
 }
- .intent_title:hover .intent_title_edit {
-   opacity: 1;
- }
- 
- .intent_title_edit {
-   margin-top: 6px;
-   margin-left: 8px;
-   opacity: 0;
- }
- 
- .actionstoolbox {
-   position: fixed;
-   z-index: 2;
-   height: 34px;
-   margin: 0 8px;
- }
- 
- .actionstoolbox-icon {
-   cursor: pointer;
-   margin: 0 4px;
-   font-size: 18px;
- }
- 
- .intent_detail .mdc-list {
-  border-left: 1px solid #EEEEEE;
-  border-bottom: 1px solid #EEEEEE;
- }
-
- .mdc-list {
-    padding: 0px;
-  }
-  
-  .mdc-list-item {
-   /* dense */
-   padding-top: 4px;
-   padding-bottom: 4px;
-   font-size: .812rem;
-  }
- 
-  .item_notsaved {
-    width: 5px;
-    height: 36px;
-    position: fixed;
-    left: 0px;
-    background: #e23f3f;
-    margin-top: -4px;
-  }
- 
-  .gray_dot {
-    height: 12px;
-    width: 12px;
-    background-color: #757575;
-    border-radius: 50%;
-    margin-right: 8px;
-    display: inline-block;
-  }
-  
-  .red_dot {
-   height: 12px;
-   width: 12px;
-   background-color: $color_error;
-   border-radius: 50%;
-   margin-right: 8px;
-   display: inline-block;
- }
- 
- .help_icon {
-   margin-top: 12px;
-   margin-left: 8px;
-   height: 24px;
-   cursor: pointer;
-   opacity: 0;
- }
- 
- .zui-expansion-header:hover .help_icon {
-   opacity: 1;
- }
- 
+.intent_title:hover .intent_title_edit {
+  opacity: 1;
+}
+
+.intent_title_edit {
+  margin-top: 6px;
+  margin-left: 8px;
+  opacity: 0;
+}
+
+.intent_detail .mdc-list {
+  border-left: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.mdc-list {
+  padding: 0px;
+}
+
+.mdc-list-item {
+  /* dense */
+  padding-top: 4px;
+  padding-bottom: 4px;
+  font-size: 0.812rem;
+}
+
+.item_notsaved {
+  width: 5px;
+  height: 36px;
+  position: fixed;
+  left: 0px;
+  background: #e23f3f;
+  margin-top: -4px;
+}
+
+.gray_dot {
+  height: 12px;
+  width: 12px;
+  background-color: #757575;
+  border-radius: 50%;
+  margin-right: 8px;
+  display: inline-block;
+}
+
+.red_dot {
+  height: 12px;
+  width: 12px;
+  background-color: $color_error;
+  border-radius: 50%;
+  margin-right: 8px;
+  display: inline-block;
+}
+
+.help_icon {
+  margin-top: 12px;
+  margin-left: 8px;
+  height: 24px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.zui-expansion-header:hover .help_icon {
+  opacity: 1;
+}
 
 .zui-expansion-content {
-  background-color: fbfbfb;  
-}
-
- .help_panel {
-   height: 260px;
-   background: #e0f7fa;
-   margin: 12px;
- }
- 
- .help_panel_header {
-   display: flex;
-   padding: 8px;
-   flex-direction: row-reverse;
- }
- 
- .help_panel_bubble {
-   width: 22px;
-   height: 22px;
-   background-color: rgba(0,0,0,.87);
-   color: white;
-   border-radius: 50%;
-   text-align: center;
-   margin-left: -6px;
-   margin-right: 4px;
- }
- 
- .help_panel_title {
-   display: flex;
-   margin-right: auto;
-   margin-left: 8px;
-   line-height: 24px;
-   font-size: 15px;
-   font-weight: 900;
-   color: rgba(0,0,0,.87);
- }
- 
- .help_panel_title > i {
-   padding-right: 4px;
-   margin-left: -8px;
- }
- 
- .help_panel_header > div {
-   height: 24px;
- }
- 
- .help_panel_header > div > i {
-   height: 24px;
-   color: rgba(0,0,0,.54);
-   cursor: pointer;
- }
- 
- .help_panel_header > div > i:hover {
-   color: rgb(85,38,130);
- }
- 
- .fileInput {
-   overflow: hidden;
-   position: relative;
- }
-  
-  .fileInput [type=file] {
-    cursor: inherit;
-    display: block;
-    font-size: 999px;
-    filter: alpha(opacity=0);
-    min-height: 100%;
-    min-width: 100%;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    top: 0;
-  }
-  
-  .zui-button--file input {
-    cursor: pointer;
-    height: 100%;
-    right: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 4;
-  }
-  
-  .fileInput {
-    background: #bbb;
-    border-radius: 40px;
-    padding: 20px;
-    margin: 30px 60px;
-    width: 40px;
-    height: 40px;
-  }
-  
-  .fileInput [type=file] {
-    cursor: pointer;
-  }
- 
-  a {
-   color: rgba(34, 190, 196, 1);
-   font-weight: 500;
-  }
- 
-  :focus {
-   outline: 0px solid transparent;
-  }
- 
-  [contenteditable]:focus {
-    outline: 0px solid transparent;
-  }
- 
-  .zui-chip:focus {
-   border: 1px solid;
-  }
- 
-  .zui-chip {
-    height: 24px;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    line-height: 24px;
-    padding: 0 6px;
-    border: 0;
-    border-radius: 4px;
-    background-color: #dedede;
-    display: inline-block;
-    color: rgba(0,0,0, 0.87);
-    margin: 2px 1px;
-    font-size: 0;
-    white-space: nowrap;
-  }
-  
-  .zui-chip__text_ex {
-    font-size: 13px;
-    vertical-align: inherit;
-    display: inline-block;
-  }
-  
-  .zui-chip__text {
-    font-size: 13px;
-    vertical-align: initial;
-  }
- 
-  .messenger-box-test {
-    width: 100%;
-    margin: 0px;
-  }
-  
-  .zui-action-button {
-    min-width: 320px;
-  }
-  
-  .zui-action-button-mid {
-    min-width: 200px;
-  }
+  overflow-x: visible !important;
+  overflow-y: hidden !important;  
+}
 
- 
-  .mdc-list-item .mdc-list-item__secondary-text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  
-  .mdc-list-item--two-line .zui-list__item-primary-content {
-    height: initial;
-  }
- 
- .explorer_header {
-   display: flex;
-   display: flex;
-   margin-top: 6px;
-   line-height: 24px;
- }
- 
- .explorer_header > div {
-   margin-right: 8px;
-   cursor: pointer;
-   color: var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38));
- }
- 
- .explorer_header > div:hover {
-   margin-right: 8px;
-   cursor: pointer;
-   color: rgba(2, 206, 204, 0.54);
- }
- 
- .explorer_view_selected {
-   color: var(--mdc-theme-secondary, #018786);
-   border-bottom: 2px solid;
-   padding-bottom: 6px;
- }
-
- 
-  .explorer .zui-expansion-arrow {
-   margin-left: -12px;
-  }
- 
-  .explorer .zui-expansion-title {
-    margin-left: -24px;
-    width: 100%;
-  }
- 
-  .explorer .zui-expansion-title > div {
-   flex-direction: row-reverse;
-   justify-content: space-between;
- }
- 
- .explorer .zui-expansion-title > div i {
-   margin-right: -20px;
- }
- 
- .explorer .mdc-list-item > div {
-   max-width: 160px;
-   overflow: hidden;
-   white-space: nowrap;
-   text-overflow: ellipsis;
- }
- 
-  .explorer .mdc-list-item__meta {
-    min-width: 48px;
-  }
- 
- .zui-panel-header__actions i {
-   cursor: pointer;
-   color: var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38));
- }
- 
-  .actionConditional {
-    height: auto;
-  }
-  
- 
- .actionItem {
-   height: 100%;
-   padding: 5px 16px;
- }
- 
- 
- .actionItem.selectedActionItem  {
-   opacity: 1;
-   padding: 2px 14px 2px 14px;
- }
- 
- .actionItem:hover {
-   opacity: 1;
-   cursor: pointer;
- }
- 
- .addActionItem {
-   margin: 8px;
-   padding: 3px 15px 3px 15px;
-   min-height: 40px;
- }
- 
-  /* .selectedActionItem {
-   overflow: visible;
-  } */
- 
- 
-  .addActionItem.selectedActionItem {
-   min-height: 30px;
-   opacity: 1;
-  }
- 
-  
-  .selectedListItem span {
-    overflow: hidden;
-  }
-  
-  .selectedListItem:hover {
-    cursor: pointer;
-  }
-  
-  .selectableListItem:hover {
-    cursor: pointer;
-  }
-  
- .selectableListItem > .mdc-list-item__meta {
-   opacity: 0;
- }
- 
- .selectableListItem:hover > .mdc-list-item__meta {
-   opacity: 1;
- }
- 
- .selectedListItem > .mdc-list-item__meta {
-   opacity: 0;
- }
- 
- .selectedListItem:hover > .mdc-list-item__meta {
-   opacity: 1;
- }
- 
-  .onFocusAction > .mdc-list-item__meta {
-    opacity: 0;
+.help_panel {
+  height: 260px;
+  background: #e0f7fa;
+  margin: 12px;
+}
+
+.help_panel_header {
+  display: flex;
+  padding: 8px;
+  flex-direction: row-reverse;
+}
+
+.help_panel_bubble {
+  width: 22px;
+  height: 22px;
+  background-color: rgba(0, 0, 0, 0.87);
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  margin-left: -6px;
+  margin-right: 4px;
+}
+
+.help_panel_title {
+  display: flex;
+  margin-right: auto;
+  margin-left: 8px;
+  line-height: 24px;
+  font-size: 15px;
+  font-weight: 900;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.help_panel_title > i {
+  padding-right: 4px;
+  margin-left: -8px;
+}
+
+.help_panel_header > div {
+  height: 24px;
+}
+
+.help_panel_header > div > i {
+  height: 24px;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: pointer;
+}
+
+.help_panel_header > div > i:hover {
+  color: rgb(85, 38, 130);
+}
+
+.fileInput {
+  overflow: hidden;
+  position: relative;
+}
+
+.fileInput [type="file"] {
+  cursor: inherit;
+  display: block;
+  font-size: 999px;
+  filter: alpha(opacity=0);
+  min-height: 100%;
+  min-width: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+}
+
+.zui-button--file input {
+  cursor: pointer;
+  height: 100%;
+  right: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 4;
+}
+
+.fileInput {
+  background: #bbb;
+  border-radius: 40px;
+  padding: 20px;
+  margin: 30px 60px;
+  width: 40px;
+  height: 40px;
+}
+
+.fileInput [type="file"] {
+  cursor: pointer;
+}
+
+a {
+  color: rgba(34, 190, 196, 1);
+  font-weight: 500;
+}
+
+:focus {
+  outline: 0px solid transparent;
+}
+
+[contenteditable]:focus {
+  outline: 0px solid transparent;
+}
+
+.zui-chip:focus {
+  border: 1px solid;
+}
+
+.zui-chip {
+  height: 24px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  line-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background-color: #dedede;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.87);
+  margin: 2px 1px;
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.zui-chip__text_ex {
+  font-size: 13px;
+  vertical-align: inherit;
+  display: inline-block;
+}
+
+.zui-chip__text {
+  font-size: 13px;
+  vertical-align: initial;
+}
+
+.messenger-box-test {
+  width: 100%;
+  margin: 0px;
+}
+
+.zui-action-button {
+  min-width: 320px;
+}
+
+.zui-action-button-mid {
+  min-width: 200px;
+}
+
+.mdc-list-item .mdc-list-item__secondary-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mdc-list-item--two-line .zui-list__item-primary-content {
+  height: initial;
+}
+
+.explorer_header {
+  display: flex;
+  display: flex;
+  margin-top: 6px;
+  line-height: 24px;
+}
+
+.explorer_header > div {
+  margin-right: 8px;
+  cursor: pointer;
+  color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38));
+}
+
+.explorer_header > div:hover {
+  margin-right: 8px;
+  cursor: pointer;
+  color: rgba(2, 206, 204, 0.54);
+}
+
+.explorer_view_selected {
+  color: var(--mdc-theme-secondary, #018786);
+  border-bottom: 2px solid;
+  padding-bottom: 6px;
+}
+
+.explorer .zui-expansion-arrow {
+  margin-left: -12px;
+}
+
+.explorer .zui-expansion-title {
+  margin-left: -24px;
+  width: 100%;
+}
+
+.explorer .zui-expansion-title > div {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.explorer .zui-expansion-title > div i {
+  margin-right: -20px;
+}
+
+.explorer .mdc-list-item > div {
+  max-width: 160px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.explorer .mdc-list-item__meta {
+  min-width: 48px;
+}
+
+.zui-panel-header__actions i {
+  cursor: pointer;
+  color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38));
+}
+
+.editItemContainer .zui-expansion-content,
+.editItemContainer .zui-expansion-content ul {
+  overflow-x: visible !important;
+
+}
+
+.actionConditional {
+  height: auto;
+}
+
+.actionItem {
+  height: 100%;
+  padding: 5px 16px;
+  flex-wrap: wrap;
+  overflow: visible;
+  will-change: unset !important;
+
+  &:before,
+  &:after {
+    content: none !important;
+    // width: 100% !important;
+    // height: 100% !important;
+    // top: 0 !important;
+    // left: 0 !important;
+    // border-radius: 0 !important;
   }
-   
-  .onFocusAction:hover > .mdc-list-item__meta {
-    /* display: block; */
+
+  &:hover {
     opacity: 1;
+    cursor: pointer;
   }
-  
-  .zui-sublist .zui-list {
-    margin: 0px;
-    padding: 0px;
-  }
- 
- 
- .zui-expansion-title {
-   overflow: visible;
- }
-  
-  .explorer .mdc-list-item {
-   height: 34px;
-   padding: 0px 16px;
-   margin: 0px;
- }
- 
-  /* TODO put this in Zoapp-front */
-  .zui-subheader-right {
-   font-size: .875rem;
-  }
-  
-  .zui-sublist h4 {
-   font-size: 15px;
-   font-weight: 900;
+}
 
-   line-height: 36px;
-   height: 36px;
-  }
-  
-  .zui-dialog-extended {
-    width: 550px;
-  }
-  
-  .zui-dialog-list {
-    width: 320px;
-  }
-  
-  dialog {
-    padding: 0px;
-  }
-  
-  hr {
-    /* For white theme */
-    border-top: 1px solid #e1e1e1;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-  }
-  
-  .mdc-list-item--two-line .mdc-list-item__secondary-text .zui-list__item-icon {
-    height: 100%;
-  }
- 
-  .mdc-list-item .mdc-list-item__text {
-    width: 80%;
-  }
-  
-  .bear-icon {
-    background-image: url(../images/bear.png);
-    background-size: 80%;
-    background-position: 3px;
-    background-repeat: no-repeat;
-    margin-left: 10px;
-  }
-  
-  .opla-icon {
-    background-image: url(../images/opla-bubble.svg);
-    background-size: 80%;
-    background-position: 5px;
-    background-repeat: no-repeat;
-    margin-left: 10px;
-  }
-  
-  .list-box {
-    height:100%;
-  }
-  
-  .list-content {
-    position: relative;
-    overflow-x: hidden;
-    overflow-y: auto;
-    width: 100%;
-  }
+.actionItemIcon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
 
-  .intent_detail .list-content {
-    height: calc(100vh - 122px - 41px);
-  }
+.actionItem.selectedActionItem {
+  opacity: 1;
+  padding: 2px 14px 2px 14px;
 
-  .explorer .list-content {
-    height: calc(100vh - 27px - 41px);
+  .actionItemIcon {
+    top: calc(50% + 18px);
   }
+}
+
+.addActionItem {
+  margin: 8px;
+  padding: 3px 15px 3px 15px;
+  min-height: 40px;
+}
+
+.selectedActionItem {
+  padding-top: 0 !important;
+}
 
-  .intent_toolbar {
-    height: 96px;
+.selectedActionItem {
+  .contenteditable {
+    padding: 6px 0 2px 0;
   }
-   
+}
+
+.addActionItem.selectedActionItem {
+  min-height: 30px;
+  opacity: 1;
+}
+
+.actionstoolbox {
+  position: relative;
+  z-index: 2;
+  height: 34px;
+  margin: 0px -14px;
+  width: calc(100% + 26px);
+
+  // .mdc-tooltype {
+  //   position: relative;
+
+  //   span {
+  //     position: absolute;
+  //     top: 22px !important;
+  //     left: 50% !important;
+  //     transform: translate(-50%, 0);
+  //     white-space: nowrap;
+  //   }
+  // }
+}
+
+.actionstoolbox-icon {
+  cursor: pointer;
+  margin: 0 4px;
+  font-size: 18px;
+}
+
+.selectedListItem span {
+  overflow: hidden;
+}
+
+.selectedListItem:hover {
+  cursor: pointer;
+}
+
+.selectableListItem:hover {
+  cursor: pointer;
+}
+
+.selectableListItem > .mdc-list-item__meta {
+  opacity: 0;
+}
+
+.selectableListItem:hover > .mdc-list-item__meta {
+  opacity: 1;
+}
+
+.selectedListItem > .mdc-list-item__meta {
+  opacity: 0;
+}
+
+.selectedListItem:hover > .mdc-list-item__meta {
+  opacity: 1;
+}
+
+.onFocusAction > .mdc-list-item__meta {
+  opacity: 0;
+}
+
+.onFocusAction:hover > .mdc-list-item__meta {
+  /* display: block; */
+  opacity: 1;
+}
+
+.zui-sublist .zui-list {
+  margin: 0px;
+  padding: 0px;
+}
+
+.zui-expansion-title {
+  overflow: visible;
+}
+
+.explorer .mdc-list-item {
+  height: 34px;
+  padding: 0px 16px;
+  margin: 0px;
+}
+
+/* TODO put this in Zoapp-front */
+.zui-subheader-right {
+  font-size: 0.875rem;
+}
+
+.zui-sublist h4 {
+  font-size: 15px;
+  font-weight: 900;
+
+  line-height: 36px;
+  height: 36px;
+}
+
+.zui-dialog-extended {
+  width: 550px;
+}
+
+.zui-dialog-list {
+  width: 320px;
+}
+
+dialog {
+  padding: 0px;
+}
+
+hr {
+  /* For white theme */
+  border-top: 1px solid #e1e1e1;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+
+.mdc-list-item--two-line .mdc-list-item__secondary-text .zui-list__item-icon {
+  height: 100%;
+}
+
+.mdc-list-item .mdc-list-item__text {
+  width: 80%;
+}
+
+.bear-icon {
+  background-image: url(../images/bear.png);
+  background-size: 80%;
+  background-position: 3px;
+  background-repeat: no-repeat;
+  margin-left: 10px;
+}
+
+.opla-icon {
+  background-image: url(../images/opla-bubble.svg);
+  background-size: 80%;
+  background-position: 5px;
+  background-repeat: no-repeat;
+  margin-left: 10px;
+}
+
+.list-box {
+  height: 100%;
+}
+
+.list-content {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.intent_detail .list-content {
+  height: calc(100vh - 122px - 41px);
+}
+
+.explorer .list-content {
+  height: calc(100vh - 27px - 41px);
+}
+
+.intent_toolbar {
+  height: 96px;
+}
+
 /* templatesList (.opla_template) Component Style */
 .opla_assistant_card-box {
   position: relative;
@@ -722,38 +766,38 @@ html {
   outline: 5px solid transparent;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
- 
+
 .opla_assistant_card-container {
-  color: #FFF;
+  color: #fff;
   height: 170px;
   opacity: 0.6;
   filter: alpha(opacity=60); /* For IE8 and earlier */
 }
- 
- .opla_assistant_card-imgContainer {
-   position: relative;
-   width: 100%;
-   height: 170px;
-   background-color: #FBFBFB;
- }
- 
- .opla_assistant_card-background {
-   background-size: 10000%; /* Not very beautiful but work */
-   background-position: center right; 
-   width: 100%;
-   height: 100%;
- }
- 
- .opla_assistant_card-imgMask {
-   background-color: rgba(255, 255, 255, 0.2);
-   width: 100%;
-   height: 100%;
- }
- 
+
+.opla_assistant_card-imgContainer {
+  position: relative;
+  width: 100%;
+  height: 170px;
+  background-color: #fbfbfb;
+}
+
+.opla_assistant_card-background {
+  background-size: 10000%; /* Not very beautiful but work */
+  background-position: center right;
+  width: 100%;
+  height: 100%;
+}
+
+.opla_assistant_card-imgMask {
+  background-color: rgba(255, 255, 255, 0.2);
+  width: 100%;
+  height: 100%;
+}
+
 .opla_assistant_card-img {
-  position: absolute;  
+  position: absolute;
   width: 120px;
   height: 120px;
   padding: 0;
@@ -766,10 +810,10 @@ html {
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
 }
- 
+
 .opla_assistant_card-img.zrmc-icon > * {
-  color: #AEB2B4;
-  fill: #AEB2B4;
+  color: #aeb2b4;
+  fill: #aeb2b4;
   width: 120px;
   height: 120px;
 }
@@ -790,22 +834,22 @@ html {
   line-height: 1.1em;
   overflow: hidden;
   padding: 1rem;
-  background-color: #FFFFFF;
-  color: #AEB2B4;
+  background-color: #ffffff;
+  color: #aeb2b4;
 }
- 
+
 .opla_assistant_card-box .opla_assistant_card-container.selectedListItem {
   opacity: 1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
 }
- 
+
 .opla_assistant_card-box .opla_assistant_card-container.selectedListItem .opla_assistant_card-text {
   color: $color_secondary;
 }
 
- /* Override fileInput */
+/* Override fileInput */
 .opla_assistant_card-box .fileInput {
-  position: absolute;  
+  position: absolute;
   text-align: center;
   top: 50%;
   left: 50%;
@@ -818,7 +862,7 @@ html {
   height: 120px;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.6);
 }
- 
+
 .opla_assistant_card-box .fileInput > i {
   font-size: 56px;
   margin: 32px;
@@ -826,38 +870,38 @@ html {
 
 .opla-conditional {
   background: transparent;
-  width: 345px;
+  width: 385px;
   padding: 0px;
   margin-bottom: 8px;
   border: #56002759 1px solid;
   border-radius: 2px;
   display: flex;
-  margin-left: -12px;
+  margin: 5px 0 2px 0;
 }
- 
+
 .opla-conditional-name {
   margin-right: 8px;
 }
- 
- .opla-conditional-value {
-   margin-left: 8px;
- }
- 
- .opla-conditional-field {
-   background: transparent;
-   padding: 4px 8px;
-   width: 160px;
-   height: 16px;
-   line-height: 16px;
- }
- 
- .opla-conditional-field > input {
-   border-bottom: none;
-   padding: 0px;
-   height: 16px;
-   line-height: 16px;
- }
- 
+
+.opla-conditional-value {
+  margin-left: 8px;
+}
+
+.opla-conditional-field {
+  background: transparent;
+  padding: 4px 8px;
+  width: 180px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.opla-conditional-field > input {
+  border-bottom: none;
+  padding: 0px;
+  height: 16px;
+  line-height: 16px;
+}
+
 .opla-conditional-op {
   color: #ba2d65;
   font-weight: 900;
@@ -865,4 +909,4 @@ html {
   line-height: 16px;
   font-size: 16px;
   padding: 4px;
-}
\ No newline at end of file
+}
diff --git a/front/tests/shared/components/__snapshots__/actionsList.test.js.snap b/front/tests/shared/components/__snapshots__/actionsList.test.js.snap
index 99585a49..9a33a5ca 100644
--- a/front/tests/shared/components/__snapshots__/actionsList.test.js.snap
+++ b/front/tests/shared/components/__snapshots__/actionsList.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`components/actionsList can be rendered with array of actions typed as shapes 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -96,9 +96,8 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -107,7 +106,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -177,8 +176,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     >
@@ -192,7 +190,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -244,7 +242,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -264,7 +262,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -316,7 +314,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -336,7 +334,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -388,7 +386,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -408,7 +406,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -460,7 +458,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -480,7 +478,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -532,7 +530,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -552,7 +550,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -604,7 +602,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -624,7 +622,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -676,7 +674,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -693,7 +691,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
 
 exports[`components/actionsList can be rendered with array of actions typed as strings 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -787,9 +785,8 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -798,7 +795,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -868,8 +865,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     >
@@ -883,7 +879,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -935,7 +931,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -955,7 +951,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1007,7 +1003,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1027,7 +1023,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1079,7 +1075,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1099,7 +1095,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1151,7 +1147,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1171,7 +1167,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1223,7 +1219,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1243,7 +1239,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1295,7 +1291,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1315,7 +1311,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
         <div
           style={
             Object {
-              "width": "100%",
+              "width": "calc(100% - 28px)",
             }
           }
         >
@@ -1367,7 +1363,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
           </div>
         </div>
         <i
-          className="mdc-list-item__meta material-icons"
+          className="actionItemIcon mdc-list-item__meta material-icons"
           href={null}
           onClick={[Function]}
           onKeyUp={[Function]}
@@ -1384,7 +1380,7 @@ exports[`components/actionsList can be rendered with array of actions typed as s
 
 exports[`components/actionsList can have an unique id 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -1478,9 +1474,8 @@ exports[`components/actionsList can have an unique id 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -1489,7 +1484,7 @@ exports[`components/actionsList can have an unique id 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -1559,8 +1554,7 @@ exports[`components/actionsList can have an unique id 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
@@ -1570,7 +1564,7 @@ exports[`components/actionsList can have an unique id 1`] = `
 
 exports[`components/actionsList can have different behavior on action 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -1664,9 +1658,8 @@ exports[`components/actionsList can have different behavior on action 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -1675,7 +1668,7 @@ exports[`components/actionsList can have different behavior on action 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -1745,8 +1738,7 @@ exports[`components/actionsList can have different behavior on action 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
@@ -1756,7 +1748,7 @@ exports[`components/actionsList can have different behavior on action 1`] = `
 
 exports[`components/actionsList can have different behavior on drop 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -1850,9 +1842,8 @@ exports[`components/actionsList can have different behavior on drop 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -1861,7 +1852,7 @@ exports[`components/actionsList can have different behavior on drop 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -1931,8 +1922,7 @@ exports[`components/actionsList can have different behavior on drop 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
@@ -1942,7 +1932,7 @@ exports[`components/actionsList can have different behavior on drop 1`] = `
 
 exports[`components/actionsList can have different behavior on edit 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -2036,9 +2026,8 @@ exports[`components/actionsList can have different behavior on edit 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -2047,7 +2036,7 @@ exports[`components/actionsList can have different behavior on edit 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -2117,8 +2106,7 @@ exports[`components/actionsList can have different behavior on edit 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
@@ -2128,7 +2116,7 @@ exports[`components/actionsList can have different behavior on edit 1`] = `
 
 exports[`components/actionsList can have different behavior on select 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -2222,9 +2210,8 @@ exports[`components/actionsList can have different behavior on select 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -2233,7 +2220,7 @@ exports[`components/actionsList can have different behavior on select 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -2303,8 +2290,7 @@ exports[`components/actionsList can have different behavior on select 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
@@ -2314,7 +2300,7 @@ exports[`components/actionsList can have different behavior on select 1`] = `
 
 exports[`components/actionsList renders correctly 1`] = `
 <div
-  className="zui-expansion zui-color--white"
+  className="zui-expansion zui-color--white editItemContainer"
   style={
     Object {
       "margin": "12px",
@@ -2408,9 +2394,8 @@ exports[`components/actionsList renders correctly 1`] = `
       }
     }
   >
-    
     <li
-      className="addActionItem  onFocusAction actionItem mdc-list-item"
+      className="addActionItem onFocusAction actionItem mdc-list-item"
       onClick={[Function]}
       onKeyPress={[Function]}
       role="menuitem"
@@ -2419,7 +2404,7 @@ exports[`components/actionsList renders correctly 1`] = `
       <div
         style={
           Object {
-            "width": "100%",
+            "width": "calc(100% - 28px)",
           }
         }
       >
@@ -2489,8 +2474,7 @@ exports[`components/actionsList renders correctly 1`] = `
       style={
         Object {
           "margin": "0 8px 16px 8px",
-          "overflowX": "hidden",
-          "overflowY": "auto",
+          "overflow": "hidden",
         }
       }
     />
diff --git a/front/tests/shared/components/__snapshots__/intentDetail.test.js.snap b/front/tests/shared/components/__snapshots__/intentDetail.test.js.snap
index 7e619987..a8783afb 100644
--- a/front/tests/shared/components/__snapshots__/intentDetail.test.js.snap
+++ b/front/tests/shared/components/__snapshots__/intentDetail.test.js.snap
@@ -9,7 +9,7 @@ exports[`components/intentDetail can render intent with special characters corre
   >
     
     <div
-      className="zui-expansion zui-color--white"
+      className="zui-expansion zui-color--white editItemContainer"
       style={
         Object {
           "margin": "12px",
@@ -103,9 +103,8 @@ exports[`components/intentDetail can render intent with special characters corre
           }
         }
       >
-        
         <li
-          className="addActionItem  onFocusAction actionItem mdc-list-item"
+          className="addActionItem onFocusAction actionItem mdc-list-item"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="menuitem"
@@ -114,7 +113,7 @@ exports[`components/intentDetail can render intent with special characters corre
           <div
             style={
               Object {
-                "width": "100%",
+                "width": "calc(100% - 28px)",
               }
             }
           >
@@ -184,15 +183,14 @@ exports[`components/intentDetail can render intent with special characters corre
           style={
             Object {
               "margin": "0 8px 16px 8px",
-              "overflowX": "hidden",
-              "overflowY": "auto",
+              "overflow": "hidden",
             }
           }
         />
       </div>
     </div>
     <div
-      className="zui-expansion zui-color--white"
+      className="zui-expansion zui-color--white editItemContainer"
       style={
         Object {
           "margin": "12px",
@@ -292,9 +290,8 @@ exports[`components/intentDetail can render intent with special characters corre
           }
         }
       >
-        
         <li
-          className="addActionItem  onFocusAction actionItem mdc-list-item"
+          className="addActionItem onFocusAction actionItem mdc-list-item"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="menuitem"
@@ -303,7 +300,7 @@ exports[`components/intentDetail can render intent with special characters corre
           <div
             style={
               Object {
-                "width": "100%",
+                "width": "calc(100% - 28px)",
               }
             }
           >
@@ -373,8 +370,7 @@ exports[`components/intentDetail can render intent with special characters corre
           style={
             Object {
               "margin": "0 8px 16px 8px",
-              "overflowX": "hidden",
-              "overflowY": "auto",
+              "overflow": "hidden",
             }
           }
         />
@@ -561,7 +557,7 @@ exports[`components/intentDetail renders correctly 1`] = `
   >
     
     <div
-      className="zui-expansion zui-color--white"
+      className="zui-expansion zui-color--white editItemContainer"
       style={
         Object {
           "margin": "12px",
@@ -655,9 +651,8 @@ exports[`components/intentDetail renders correctly 1`] = `
           }
         }
       >
-        
         <li
-          className="addActionItem  onFocusAction actionItem mdc-list-item"
+          className="addActionItem onFocusAction actionItem mdc-list-item"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="menuitem"
@@ -666,7 +661,7 @@ exports[`components/intentDetail renders correctly 1`] = `
           <div
             style={
               Object {
-                "width": "100%",
+                "width": "calc(100% - 28px)",
               }
             }
           >
@@ -736,15 +731,14 @@ exports[`components/intentDetail renders correctly 1`] = `
           style={
             Object {
               "margin": "0 8px 16px 8px",
-              "overflowX": "hidden",
-              "overflowY": "auto",
+              "overflow": "hidden",
             }
           }
         />
       </div>
     </div>
     <div
-      className="zui-expansion zui-color--white"
+      className="zui-expansion zui-color--white editItemContainer"
       style={
         Object {
           "margin": "12px",
@@ -844,9 +838,8 @@ exports[`components/intentDetail renders correctly 1`] = `
           }
         }
       >
-        
         <li
-          className="addActionItem  onFocusAction actionItem mdc-list-item"
+          className="addActionItem onFocusAction actionItem mdc-list-item"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="menuitem"
@@ -855,7 +848,7 @@ exports[`components/intentDetail renders correctly 1`] = `
           <div
             style={
               Object {
-                "width": "100%",
+                "width": "calc(100% - 28px)",
               }
             }
           >
@@ -925,8 +918,7 @@ exports[`components/intentDetail renders correctly 1`] = `
           style={
             Object {
               "margin": "0 8px 16px 8px",
-              "overflowX": "hidden",
-              "overflowY": "auto",
+              "overflow": "hidden",
             }
           }
         />