From d4527070fe61a79c8fa7189bdba2a23ffc6b5ba2 Mon Sep 17 00:00:00 2001
From: Gabriele Panico <gabriele.panico@gmail.com>
Date: Tue, 17 Oct 2023 18:19:52 +0200
Subject: [PATCH] new UI -> action-reply END

---
 package.json                                  |   2 +-
 .../filter/filter.component.html              |   6 +-
 .../filter/filter.component.scss              | 114 ++++---
 .../select/select.component.html              |  22 +-
 .../select/select.component.scss              |  53 +--
 .../cds-action-agent-handoff.component.scss   |   4 +-
 .../cds-action-close.component.scss           |   4 +-
 .../cds-action-description.component.html     |   4 +-
 .../cds-action-description.component.scss     |  16 +-
 .../cds-action-email.component.html           |  19 ++
 .../cds-action-email.component.scss           | 317 +-----------------
 .../cds-action-gpt-task.component.html        |   3 +
 .../cds-action-gpt-task.component.scss        |  33 +-
 .../cds-action-intent.component.scss          | 176 +---------
 .../base-condition-row.component.html         |   2 +-
 .../base-condition-row.component.scss         |  12 +-
 .../base-filter/base-filter.component.html    |  20 +-
 .../base-filter/base-filter.component.scss    |  83 +++--
 .../cds-action-json-condition.component.html  |   4 +-
 .../cds-action-json-condition.component.scss  |  46 +--
 .../variable-list.component.scss              |  19 +-
 .../cds-action-online-agents.component.html   |   2 +-
 .../cds-action-online-agents.component.scss   |   2 +-
 .../cds-action-open-hours.component.html      |   2 +-
 .../cds-action-open-hours.component.scss      |   2 +-
 .../cds-action-replace-bot.component.scss     |  48 +--
 .../cds-action-reply.component.scss           |  14 +-
 .../cds-action-reply-button.component.html    |  34 ++
 .../cds-action-reply-button.component.scss    | 157 +++++++++
 .../cds-action-reply-button.component.spec.ts |  23 ++
 .../cds-action-reply-button.component.ts      |  32 ++
 .../cds-action-reply-frame.component.html     |   8 +-
 .../cds-action-reply-frame.component.scss     |  41 ++-
 .../cds-action-reply-frame.component.ts       |   8 +-
 .../cds-action-reply-gallery.component.html   |  51 +--
 .../cds-action-reply-gallery.component.scss   | 185 +++++-----
 .../cds-action-reply-gallery.component.ts     |  25 +-
 .../cds-action-reply-image.component.html     |  55 ++-
 .../cds-action-reply-image.component.scss     | 192 +++--------
 .../cds-action-reply-image.component.ts       |  31 +-
 .../cds-action-reply-redirect.component.html  |  26 +-
 .../cds-action-reply-redirect.component.scss  |  66 ++--
 .../cds-action-reply-redirect.component.ts    |   7 +
 .../cds-action-reply-text.component.html      |  55 ++-
 .../cds-action-reply-text.component.scss      | 222 +++++-------
 .../cds-action-reply-text.component.ts        |  29 +-
 .../cds-action-reply-tools.component.html     |  13 +-
 .../cds-action-reply-tools.component.scss     |  36 +-
 .../cds-action-wait.component.html            |   2 +-
 .../cds-action-wait.component.scss            |  24 +-
 .../cds-action-web-request-v2.component.html  |   8 +-
 .../cds-action-web-request-v2.component.scss  |  12 +-
 .../cds-action-web-request-v2.component.ts    |  17 +-
 .../list/question/question.component.html     |   4 +-
 .../list/question/question.component.scss     | 217 ++----------
 .../delay-slider/delay-slider.component.scss  |  29 +-
 .../element-from-url.component.scss           |  12 +-
 .../image-upload/image-upload.component.html  |   2 +-
 .../image-upload/image-upload.component.scss  |  17 +-
 .../textarea/textarea.component.html          |   4 +-
 .../textarea/textarea.component.scss          |  65 ++--
 .../textarea/textarea.component.ts            |   2 +-
 .../cds-canvas/cds-canvas.component.scss      |   5 +-
 .../cds-intent/cds-intent.component.scss      |   6 +-
 .../cds-intent/cds-intent.component.ts        |   1 -
 .../cds-panel-action-detail.component.scss    |   9 +-
 .../cds-panel-intent-list.component.html      |   7 +-
 .../cds-panel-intent-list.component.scss      |   4 +
 .../cds-dashboard.component.scss              |   5 +-
 .../cds-dashboard/cds-dashboard.component.ts  |   7 +-
 .../cds-header/cds-header.component.html      |   2 +-
 .../cds-header/cds-header.component.scss      |   8 +-
 .../chatbot-design-studio.module.ts           |   2 +
 .../services/intent.service.ts                |  48 +--
 src/app/models/action-model.ts                |   7 +-
 src/app/services/faq.service.ts               |  57 +---
 src/assets/images/action-reply-types/file.svg |   4 +
 .../images/action-reply-types/gallery.svg     |   8 +
 .../images/action-reply-types/image.svg       |   7 +
 .../images/action-reply-types/redirect.svg    |   6 +
 src/assets/images/action-reply-types/text.svg |   4 +
 .../images/actions_category/integrations.svg  |  59 +++-
 src/assets/images/icons/add_image.svg         |   8 +-
 src/assets/images/icons/if_condition.svg      |  20 +-
 src/assets/sass/cds/_variables.scss           |  21 +-
 src/assets/sass/cds/styles.scss               |  47 +--
 86 files changed, 1378 insertions(+), 1714 deletions(-)
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.html
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.scss
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.spec.ts
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.ts
 create mode 100644 src/assets/images/action-reply-types/file.svg
 create mode 100644 src/assets/images/action-reply-types/gallery.svg
 create mode 100644 src/assets/images/action-reply-types/image.svg
 create mode 100644 src/assets/images/action-reply-types/redirect.svg
 create mode 100644 src/assets/images/action-reply-types/text.svg

diff --git a/package.json b/package.json
index 8b4d8c31..67db0f07 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
     "@ctrl/ngx-emoji-mart": "^7.1.0",
-    "@ncstate/sat-popover": "^10.3.2",
+    "@ncstate/sat-popover": "^10.0.0",
     "@ng-select/ng-select": "^9.0.2",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
diff --git a/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.html b/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.html
index 42e0a9dc..67f5c4bd 100644
--- a/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.html
+++ b/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.html
@@ -1,10 +1,10 @@
-<div class="content element" [class.previewMode]="previewMode" >
+<div class="content element" [class.previewMode]="previewMode" style="width: 100%;">
     
     <div class="filter-row" *ngIf="expression?.conditions.length === 0">
         <div class="add-filter-btn" 
             [satPopoverAnchor]="addConditionFilter" 
             (click)="addConditionFilter.toggle()">
-            <span class="material-icons">filter_alt</span>
+            <span class="material-icons-outlined">filter_alt</span>
             Filter
         </div>
     </div>
@@ -18,7 +18,7 @@
                 (click)="onOpenConditionDetail(i); addConditionFilter.toggle();">
                 <div class="remove" 
                     (click)="$event.stopPropagation(); onDeleteCondition(i, last)">
-                    <span class="material-icons">delete</span>
+                    <span class="material-icons-outlined">delete</span>
                 </div>
                 <div class="filter-icon">
                     <span class="material-icons">data_object</span>
diff --git a/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.scss b/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.scss
index e45b696e..19ea1407 100644
--- a/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.scss
+++ b/src/app/chatbot-design-studio/cds-base-element/filter/filter.component.scss
@@ -1,5 +1,12 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+:host{
+    --textColor: #{$blu};
+    --backGroundColor: #{$blu-light-04};
+    --hoverBackgroundColor: #{$blu-light-03};
+
+    --border-radius-base: 8px
+}
 
 .previewMode{
     .filter-row{
@@ -26,15 +33,10 @@
         }
     }
 }
-.content{
-    // background: $action-item-background;
-    // margin: 0 30px;
-    // padding: 20px;
-    border-radius: 4px;
-}
 
 .filter-row{
     display: grid;
+    width: 100%;
     // grid-template-columns: minmax(0px, 1fr) 100px;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
@@ -64,20 +66,20 @@
         cursor: pointer;
         display: flex;
         justify-content: center;
-        background: rgb(255, 255, 255);
+        background: var(--textColor);
         border-radius: 100%;
         transition: background-color 0.3s ease 0s;
         font-size: 12px;
 
         span.material-icons{
             font-size: 20px;
-            color: $icon-color;
+            color: var(--backGroundColor);
         }
 
         &:hover{
-            background-color: $icon-color;
+            background-color: var(--textColor);
             span.material-icons{
-                color: white;
+                color: var(--backGroundColor);
             }
         }
     }
@@ -89,22 +91,40 @@
     align-items: center;
     justify-content: center;
     gap: 5px;
-    padding: 0px 9px;
     height: 26px;
-    font-size: .9em;
-    font-weight: 400;
-    border-radius: 13px;
+    // padding: 0px 9px;
+    // font-size: .9em;
+    // font-weight: 400;
+    // border-radius: 13px;
     transition: all 0.3s ease 0s;
-    background: rgb(104, 106, 211);
-    color: white;
+    // background: $background-color;
+    // color: $text-color;
 
-    span.material-icons{
+    user-select: none;
+    box-sizing: border-box;
+    outline: none;
+    border: 1px dashed $blu-light-02;
+    border-radius: $button-border-radius-base;
+    color: $blu-light-02;
+    cursor: pointer;
+    font-size: 0.7em;
+    font-weight: 400;
+    line-height: $button-height-base;
+    // margin: 0px 5px 0;
+    order: 1;
+    padding: 0 10px;
+    transition: all .3s;
+    min-width: 100px;
+    text-align: center;
+    width: fit-content;
+
+    span.material-icons-outlined{
         font-size: 20px;
-        color: white;
     }
 
     &:hover{
-        opacity: 0.8;
+        border-color: var(--textColor);
+        color: var(--textColor);
         cursor: pointer;
     }
 }
@@ -123,18 +143,29 @@
         align-items: center;
         justify-content: center;
         width: 100%;
-        font-weight: 600;
-        // padding: 8px 15px;
-        // margin: 5px;
-        // border: 1px solid #c6cdd4;
-        border-radius: 4px;
-        color: #c6cdd4;
+
+        user-select: none;
+        box-sizing: border-box;
+        outline: none;
+        border: 1px dashed $blu-light-02;
+        border-radius: $button-border-radius-base;
+        color: $blu-light-02;
         cursor: pointer;
+        font-size: 0.7em;
+        font-weight: 400;
+        line-height: $button-height-base;
+        // margin: 0px 5px 0;
+        order: 1;
+        padding: 0 10px;
+        transition: all .3s;
+        min-width: 100px;
+        text-align: center;
+        width: fit-content;
 
         
         &:hover{
-            // border-color: white;
-            color: white;
+            border-color: var(--textColor);
+            color: var(--textColor);
         }
     }
     
@@ -187,18 +218,19 @@
     align-items: center;
     display: flex;
     position: relative;
-    border-radius: 4px;
-    padding: 8px 15px;
+    border-radius: var(--border-radius-base);
+    padding: 6px 15px;
     transition: background-color 0.3s ease 0s, border 0.3s ease 0s, opacity 0.3s ease 0s;
     cursor: pointer;
-    background: rgb(245, 245, 245);
+    background: var(--backGroundColor);
     border-width: 1px;
     border-style: solid;
-    border-color: rgb(245, 245, 245);
+    border-color: var(--backGroundColor);
     border-image: initial;
+    font-size: 12px;
     &:hover{
-        background: #c6cdd4;
-        border-color: #c6cdd4;
+        background: var(--hoverBackgroundColor);
+        border-color: var(--textColor);
         div.remove{
             opacity: 1;
         }
@@ -219,19 +251,17 @@
         cursor: pointer;
         display: flex;
         justify-content: center;
-        background: rgb(255, 255, 255);
+        background: white;
         border-radius: 100%;
         transition: background-color 0.3s ease 0s;
         font-size: 12px;
-        span.material-icons {
+        span.material-icons,
+        span.material-icons-outlined {
             font-size: 20px;
-            color: $icon-color;
+            color: var(--textColor);
         }
         &:hover {
-            background-color: $icon-color;
-            span.material-icons{
-                color: white;
-            }
+            background-color: var(--hoverBackgroundColor);
         }
     }
 
@@ -239,9 +269,9 @@
         -webkit-box-align: center;
         -webkit-box-pack: center;
         align-items: center;
-        color: $icon-color;
+        color: var(--textColor);
         display: flex;
-        font-size: 15px;
+        // font-size: 12px;
         justify-content: center;
         margin-right: 10px;
         width: 15px;
diff --git a/src/app/chatbot-design-studio/cds-base-element/select/select.component.html b/src/app/chatbot-design-studio/cds-base-element/select/select.component.html
index d5bf2fed..b0296ea9 100644
--- a/src/app/chatbot-design-studio/cds-base-element/select/select.component.html
+++ b/src/app/chatbot-design-studio/cds-base-element/select/select.component.html
@@ -17,30 +17,26 @@
         (change) = "onChangeActionButton($event)">
 
         <ng-template ng-label-tmp let-item="item">
-            <div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;">
-                <div style="width: 100%; display: flex; flex-direction: column;">
-                    <div style="width: 100%; display: flex; flex-direction: row;">
-                        <span class="material-icons" *ngIf="item['icon']"
-                            [class.intent-start]="item[bindLabelSelect] === 'start'"
-                            [class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
-                        <span class="label-select">{{item[bindLabelSelect]}}</span>
-                        <span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
-                    </div>
-                </div>
+            <div class="select-itme-wrp">
+                <span class="material-icons" *ngIf="item['icon']"
+                    [class.intent-start]="item[bindLabelSelect] === 'start'"
+                    [class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
+                <span class="label-select">{{item[bindLabelSelect]}}</span>
+                <span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
             </div>
         </ng-template>
 
         <ng-template ng-option-tmp let-item="item" let-index="index">
-            <div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;">
+            <div class="select-itme-wrp" style="justify-content: space-between;">
                 <div style="width: 100%; display: flex; flex-direction: column;">
-                    <div style="width: 100%; display: flex; flex-direction: row;">
+                    <div class="select-itme-wrp">
                         <span class="material-icons" *ngIf="item['icon']"
                             [class.intent-start]="item[bindLabelSelect] === 'start'"
                             [class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
                         <span class="label-select">{{item[bindLabelSelect]}}</span>
                         <span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
                     </div>
-                    <div style="width: 100%; display: flex; flex-direction: row;">
+                    <div class="select-itme-wrp">
                         <span *ngIf="optionalBindDescription" class="label-select-option description">{{item[optionalBindDescription]}}</span>
                     </div>
                 </div>
diff --git a/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss b/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss
index b4df8984..fb10a9e2 100644
--- a/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss
+++ b/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss
@@ -1,5 +1,12 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+.select-itme-wrp{
+    width: 100%; 
+    display: flex; 
+    flex-direction: row;
+    align-items: center;
+}
+
 ::ng-deep{
 
     
@@ -12,7 +19,7 @@
             span.material-icons{
                 font-size: 20px;
                 padding: 0px 4px;
-                color: $icon-color;
+                color: $blu-light-02;
 
                 &.intent-start{
                     color: #0aae10;
@@ -24,6 +31,8 @@
 
             span.label-select {
                 margin-right: 4px;
+                color: $blu;
+                line-height: 17px;
             }
 
             span.label-select-option {
@@ -39,21 +48,21 @@
                 text-overflow: ellipsis;
             }
 
-            &.ng-option-marked {
-                background-color: rgba(#545454, .23) !important;
-            }
+            // &.ng-option-marked {
+            //     // background-color: rgba($blu-light-02, .23) !important;
+            // }
 
-            &.ng-option-selected{
-                background-color: rgba(#545454, .43) !important;
+            // &.ng-option-selected{
+            //     // background-color: rgba($blu-light-02, .43) !important;
 
-                span.label-select-option {
-                    color: #848484;
-                }
+            //     // span.label-select-option {
+            //     //     color: #848484;
+            //     // }
 
-                span.description {
-                    color: #848484;
-                }
-            }
+            //     // span.description {
+            //     //     color: #848484;
+            //     // }
+            // }
 
             &:hover {
                 .icon-container {
@@ -75,7 +84,7 @@
             span.material-icons{
                 font-size: 20px;
                 padding: 0px 4px;
-                color: $icon-color;
+                color: $blu-light-03;
 
                 &.intent-start{
                     color: #0aae10;
@@ -88,6 +97,7 @@
 
             span.label-select {
                 margin-right: 4px;
+                color: $blu
             }
 
             span.label-select-option {
@@ -97,21 +107,24 @@
         }
 
         .ng-clear-wrapper{
-            height: 17px;
-            width: 17px;
+            height: 14px;
+            width: 14px;
+            display: flex;
         }
 
     } 
 
     .ng-value-container .ng-input{
         display: flex;
-        top: 0px !important;
-        height: 43px;
+        // top: 0px !important;
+        // height: 43px;
     }
 
     .ng-clear-wrapper{
-        height: 17px;
-        width: 17px;
+        height: 14px;
+        width: 14px;
+        display: flex;
+
     }
 
     .ng-dropdown-panel .ng-dropdown-footer {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-agent-handoff/cds-action-agent-handoff.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-agent-handoff/cds-action-agent-handoff.component.scss
index 873acdf1..5014b5a0 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-agent-handoff/cds-action-agent-handoff.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-agent-handoff/cds-action-agent-handoff.component.scss
@@ -10,7 +10,7 @@
     .action-description {
         // padding: 3px 16px 10px 16px;
         font-size: 12px;
-        color: $brown-85;
+        color: $blu;
         line-height: 1.3;
     }
 }
@@ -18,6 +18,6 @@
 .action-description{
     line-height: 35px;
     font-size: 0.9em;
-    color: #d6d6d6;
+    color: $blu;
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-close/cds-action-close.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-close/cds-action-close.component.scss
index 65b1e83a..0f11ab60 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-close/cds-action-close.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-close/cds-action-close.component.scss
@@ -11,7 +11,7 @@
     .action-description {
         // padding: 3px 16px 10px 16px;
         font-size: 12px;
-        color: $brown-85;
+        color: $blu;
         line-height: 1.3;
     }
 }
@@ -19,5 +19,5 @@
 .action-description{
     line-height: 35px;
     font-size: 0.9em;
-    color: #d6d6d6;
+    color: $blu;
 }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.html
index 3d67a1bb..969e2eeb 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.html
@@ -37,7 +37,7 @@
     <div class="section">
         <div class="action-title">
             <div class="icon-action">
-                <img [src]="element?.src" [title]="element?.name">
+                <img class="active-icon" [src]="element?.src" [title]="element?.name">
             </div>
             <p class="label-action">{{element?.name}}</p>
             <span *ngIf="!previewMode && element?.status ==='beta'" class="trigger-beta-badge">Beta</span>
@@ -47,7 +47,7 @@
             <div *ngIf="element?.description"
                 [satPopoverAnchor]="descriptionTooltip"
                 (click)="descriptionTooltip.toggle()">
-                <em class="material-icons">info</em>
+                <span class="material-icons-outlined">info</span>
             </div>
         
             <div [innerHtml]="tipText"></div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss
index 165cf3e4..8b13eb1a 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss
@@ -7,8 +7,7 @@
     width: 100%;
     justify-content: space-between;
     gap: 10px;
-    padding: 30px 20px 20px;
-    border-bottom: 2px solid $action-item-background;
+    padding: 10px;
 }
 
 .preview {
@@ -20,7 +19,7 @@
     }
 
     .icon-action {
-        background: #6c6859 !important;
+        // background: #6c6859 !important;
 
         img {
             width: 18px;
@@ -91,8 +90,7 @@
         border-radius: 4px;
         // margin-right: 6px;
         // align-self: start;
-        color: #718497;
-        opacity: .85;
+        color: $blu;
         background: none;
 
         display: flex;
@@ -111,8 +109,9 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 14px;
+        font-weight: 500;
         margin: 0;
-        color: #fff;
+        color: $blu;
     }
 }
 
@@ -122,12 +121,11 @@
     align-items: center;
     justify-content: flex-start;
     font-size: 11px;
-    color: $action-item-color;
+    color: $blu-light-02;
     line-height: 1.5;
 
-    em {
+    span {
         display: flex;
-        margin-right: 10px;
     }
 
     &:hover {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.html
index b362bbf7..e0ddfcd2 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.html
@@ -93,6 +93,25 @@
         </div>
     </div>
 
+    <div class="text-editor-wrapper">
+        <div class="text-editor">
+            <div class="email-field-box">
+                <label class="title-label">Reply to</label>
+                <!-- <div class="text-editor-wpr" style="position: relative;"> -->
+                <!-- [limitCharsText]="150"  -->
+                <cds-textarea class="to-text-area" 
+                    [emojiPikerBtn]="false" 
+                    [textLimitBtn]="false" 
+                    [text]="action.replyto"
+                    [minRow]="1" 
+                    [maxRow]="1" 
+                    popoverVerticalAlign="above"
+                    (changeTextarea)="onChangeTextarea($event, 'replyto')">
+                </cds-textarea>
+            </div>
+        </div>
+    </div>
+
     <div class="email-field-box">
         <label class="title-label">Email body</label>
         <cds-textarea class="body-text-area" 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.scss
index 09a5baf4..872c0831 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-email/cds-action-email.component.scss
@@ -1,25 +1,13 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
-.content {
-    padding: 20px 0 30px 0;
-    margin-left: 30px;
-    margin-right: 30px;
-    overflow: auto;
-    max-height: calc(100vh - 200px);
-}
 
 #scrollMe {
     scroll-behavior: smooth;
-    margin-bottom: 30px;
+    overflow-y: scroll;
+    // max-height: calc(100vh - 200px);
 }
 
-.text-editor-wrapper:hover {
-    .text-editor {
-        .response-controls {
-            opacity: 1;
-        }
-    }
-}
+
 .text-editor-wrapper {
     font-size: $font-size-base;
     position: relative;
@@ -33,83 +21,7 @@
         margin: 0;
         padding: 0;
 
-        .response-controls {
-            position: absolute;
-            top: 10px;
-            left: 0px;
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
-            .control-button {
-                cursor: pointer;
-                color: $color-bck-gray-hex;
-                transition: color 0.3s;
-                height: 20px;
-                &.delete {
-                    height: 24px;
-                    width: 24px;
-                    background: $color-bck-gray-hex;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    em {
-                        font-size: 1.15em;
-                        color: $color-withe-hex;
-                        transition: color 0.3s;
-                    }
-                }
-            }
-            .control-button:hover {
-                color: $color-withe-hex;
-                &.delete {
-                    box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
-                    em {
-                        color: $color-red-hex;
-                    }
-                }
-            }
-        }
-
-        .box-textarea {
-            // width: calc(100% - 40px);
-            // margin-left: 20px;
-            input {
-                border-radius: 8px;
-                background: $color-withe-hex;
-                border: 1px solid $color-withe-hex;
-                overflow-x: hidden;
-                overflow-y: auto;
-                width: calc(100% - 2.5em);
-                padding: 20px;
-                color: $color-text-dark-hex;
-                font-size: 1.15em;
-                line-height: 25px;
-                resize: vertical;
-
-                &.customPrefix {
-                    padding-left: 20px;
-                    width: calc(100% - 2.5em - 20px);
-                }
-            }
-
-            .input-prefix {
-                position: absolute;
-                top: 14px;
-                left: 8px;
-                color: #7d7d7d;
-                font-weight: 800;
-            }
-
-            .input-suffix {
-                position: absolute;
-                top: 14px;
-                right: 8px;
-                color: #7d7d7d;
-                font-weight: 800;
-                margin-right: 40px;
-            }
-        }
-
+       
         .text-editor-drop {
             position: absolute;
             display: inline-flex;
@@ -120,110 +32,10 @@
             cursor: grab;
         }
     }
-
-    .editor-utils {
-        position: relative;
-        margin: -20px 50px 0px 0px;
-        float: right;
-        .num-chars {
-            background: $color-light-gray-hex;
-            padding: 0px 8px;
-            border-radius: 12px;
-            font-size: 0.8em;
-            color: $color-text-box-hex;
-            float: right;
-            &.error {
-                background: $color-orange-hex;
-            }
-        }
-        .text-editor-insert-attribute {
-            float: right;
-        }
-        .moji-picker {
-            float: right;
-        }
-    }
-}
-
-.text-editor-wrapper:hover .text-editor {
-    .response-controls {
-        opacity: 1;
-    }
-}
-
-/** TEXT AREA **/
-mat-form-field.mat-focused ::ng-deep {
-    .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            .mat-form-field-infix {
-                input {
-                    border: 1px solid $icon-color !important;
-                    outline: 1px solid $icon-color !important;
-                    transition: border 0.3s;
-                }
-            }
-        }
-    }
 }
 
-mat-form-field.box-textarea ::ng-deep {
-    .mat-form-field-wrapper {
-        padding-bottom: 0;
-        .mat-form-field-flex {
-            border-radius: 4px 4px 0 0;
-            padding: 0px;
-            // padding: 0 0.75em 0 0.75em;
-            margin: 0;
-            background-color: transparent !important;
-        }
-
-        .mat-form-field-infix {
-            padding: 0px;
-            border-top: 0px;
-        }
-    }
-    .mat-form-field-underline {
-        display: none;
-    }
-}
 
-/** box-textarea **/
-// .box-textarea {
-//     // width: calc(100% - 40px);
-//     // margin-left: 20px;
-//     width: 100%;
-//     textarea {
-//         border-radius: 8px;
-//         background: $color-withe-hex;
-//         border: 1px solid $color-withe-hex;
-//         overflow-x: hidden;
-//         overflow-y: auto;
-//         width: calc(100% - 3.5em);
-//         padding: 20px 20px;
-//         color: $color-text-dark-hex;
-//         font-size: 1.15em;
-//         line-height: 25px;
-//         resize: vertical;
-//     }
-// }
 
-.box-textarea {
-    width: 100%;
-    // margin-left: 20px;
-    textarea {
-        border-radius: 8px;
-        background: $color-withe-hex;
-        border: 1px solid $color-withe-hex;
-        overflow-x: hidden;
-        overflow-y: auto;
-        width: calc(100% - 2.5em);
-        padding: 20px 20px;
-        color: $color-text-dark-hex;
-        font-size: 1.15em;
-        line-height: 25px;
-        resize: vertical;
-    }
-}
 
 .email-field-box {
     display: flex;
@@ -235,37 +47,13 @@ mat-form-field.box-textarea ::ng-deep {
 }
 
 .title-label {
-    color: white;
-    font-size: 16px;
+    color: $blu;
+    font-size: 14px;
     margin-bottom: 3px;
     // margin-left: 30px;
     // margin-left: 13px;
 }
 
-.action-title {
-    display: flex;
-    align-items: center;
-    margin-left: 28px;
-    margin-bottom: 40px;
-    justify-content: flex-start;
-}
-
-.custom-icon {
-    color: $icon-color;
-    margin-right: 6px;
-}
-
-.text-action {
-    color: $icon-color;
-    margin-right: 10px;
-    margin-bottom: 0px;
-}
-
-.action-type {
-    margin-bottom: 0px;
-    color: white;
-}
-
 
 cds-textarea.subject-text-area ::ng-deep  {
     textarea {
@@ -279,99 +67,6 @@ cds-textarea.to-text-area ::ng-deep  {
     }
 }
 
-/* 
-/* Text editor utils 
-/* ----------------------------------------- */
-.text-editor-utils {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    bottom: -2px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    position: absolute;
-    right: 164px;
-    z-index: 16;
-}
-
-.insert-attribute-btn {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    align-items: center;
-    background: transparent;
-    border-radius: 100%;
-    cursor: pointer;
-    display: flex;
-    height: 23px;
-    justify-content: center;
-    margin-right: 5px;
-    width: 24px;
-    color: #647283;
-    box-shadow: 0 1px 3px #00000030;
-    border: unset;
-    z-index: 1;
-}
-
-.material-icons-data-object {
-    font-size: 16px;
-    position: absolute;
-    left: 1px;
-    top: 0px;
-    text-align: center;
-    background: #fff;
-    border-radius: 50%;
-    height: 23px;
-    width: 23px;
-    padding: 3px 3px;
-    z-index: 0;
-    box-shadow: 0 1px 3px #00000030;
-}
-
-.insert-attribute-btn:hover {
-    background: rgba(0, 108, 255, 0.3);
-}
-
-.emoji-picker-button {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    align-items: center;
-    background: #fff;
-    border-radius: 100%;
-    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 19%);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 19%);
-    cursor: pointer;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    height: 23px;
-    justify-content: center;
-    margin-right: 5px;
-    width: 23px;
-    color: #647283;
-}
-
-.emoji-picker-button:hover {
-    background: rgba(0, 108, 255, 0.3);
-}
-
-.tpl-text-limit {
-    background: #647283;
-    color: #fff;
-    border-radius: 10px;
-    flex-shrink: 0;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 16px;
-    padding: 0 10px;
-    pointer-events: none;
-    -webkit-transition: background-color 0.3s, color 0.3s;
-    transition: background-color 0.3s, color 0.3s;
-}
 
 ::ng-deep .set-attributes-panel {
     display: flex;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.html
index 7a9f39b9..9cc7051b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.html
@@ -142,6 +142,8 @@
                             </div>
                             <!-- // doesn't work propely -->
                             <!-- <cds-text [text]="action.max_tokens.toString()" [inputType]="'number'" [maxlength]="3" [min]="1" [max]="512" (onChange)="updateSliderValue($event, 'max_tokens')" class="slider-input"></cds-text> -->
+                            <input type="text" class="slider-input gpt-setting-input" value="{{action.max_tokens}}" disabled>
+                            <!-- <cds-text [text]="action.max_tokens" [disabled]="true" class="slider-input"></cds-text> -->
                         </div>
                     </div>
                 </div>
@@ -166,6 +168,7 @@
                             </div>
                             <!-- // doesn't work propely -->
                             <!-- <cds-text [text]="action.temperature.toString()" [inputType]="'number'" [maxlength]="4" [min]="0" [max]="1" (onChange)="updateSliderValue($event, 'temperature')" class="slider-input"></cds-text> -->
+                            <input type="text" class="slider-input gpt-setting-input" value="{{action.temperature}}" disabled>
                         </div>
                     </div>
                 </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.scss
index c740ee71..efc92463 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.scss
@@ -624,6 +624,16 @@ div.value-wrp {
     }
 }
 
+.gpt-setting-input {
+    color: black;
+    text-align: center;
+    width: 45px;
+    border: none;
+    height: 26px;
+    border-radius: 12px;
+    background-color: aliceblue;
+}
+
 mat-expansion-panel ::ng-deep {
     background-color: transparent;
     box-shadow: none;
@@ -694,7 +704,6 @@ mat-expansion-panel ::ng-deep {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 40px;
 
     .close-button {
         cursor: pointer;
@@ -785,6 +794,17 @@ mat-expansion-panel ::ng-deep {
     margin: 0px 0px 0px 6px !important;
 }
 
+.content#variables {
+    // position: absolute;
+    // left: 440px;
+    // transition: all 0.3s ease-in;
+}
+
+// .content#variables .opened {
+//     left: 0px;
+// }
+
+
 
 .variables-content-header {
     display: flex;
@@ -823,4 +843,15 @@ mat-expansion-panel ::ng-deep {
         margin-right: 10px;
     }
 
+}
+
+.usage-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 6px;
+    padding: 0px 4px;
+    color: #a6a6a6;
+    font-size: 11px;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss
index 5f8d145a..e92edeba 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss
@@ -99,192 +99,24 @@
 .field-box {
     display: flex;
     flex-direction: column;
-    // width: 70%;
-    min-width: 90px;
-    gap: 10px;
+    // min-width: 90px;
+    // gap: 10px;
 }
 
 .title-label {
-    color: white;
-    font-size: 18px;
+    color: $blu;
+    font-size: 16px;
     margin-bottom: 0px;
 }
 
 
-/** TEXT AREA **/
-mat-form-field.mat-focused ::ng-deep {
-    .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            .mat-form-field-infix {
-                textarea {
-                    border: 1px solid $color-blue-hex!important;
-                    outline: 1px solid $color-blue-hex!important;
-                    transition: border .3s;
-                }
-            }
-        }
-    }
-}
-mat-form-field.box-textarea ::ng-deep {
-    .mat-form-field-wrapper {
-        padding-bottom:0;
-        .mat-form-field-flex {
-            border-radius: 4px 4px 0 0;
-            //padding: 0 0.75em 0 0.75em;
-            padding: 0px;
-            margin: 0;
-        }
-    }
-    .mat-form-field-underline {
-        display: none;
-    }    
-}
-
-/** box-textarea **/
-.box-textarea {
-    width: calc(100% - 40px);
-    textarea {
-        border-radius: 8px;
-        background: $color-withe-hex;
-        border: 1px solid $color-withe-hex;
-        overflow-x: hidden;
-        overflow-y: auto;
-        width: calc(100% - 2.5em);
-        padding: 20px 20px;
-        color: $color-text-dark-hex;
-        font-size: 1.15em;
-        line-height: 25px;
-        resize: vertical;
-    }
-}
-
-/** editor-utils **/
-.editor-utils {
-    position: relative;
-    margin: -20px 50px 0px 0px;
-    float: right;
-    .num-chars {
-        background: $color-light-gray-hex;
-        padding: 0px 8px;
-        border-radius: 12px;
-        font-size: 0.8em;
-        color: $color-text-box-hex;
-        float: right;
-        &.error {
-            background: $color-orange-hex;
-        }
-    }
-    .text-editor-insert-attribute {
-        float: right;
-    }
-    .moji-picker {
-        float: right;
-    }
-}
-
 /** NG-SELECT **/
 .ng-select.ng-select-focused>.ng-select-container {
     border-color: $color-red-hex;
     box-shadow: inset 0 1px 1px #00000013,0 0 0 3px #007eff1a;
 }
 
-/** FORM GROUP **/
-.form-group {
-    .form-control {
-        background-size: 0 2px,0% 1px;
-    }
-}
-.form-group.is-focused {
-    .form-control {
-        background-size: 100% 2px,100% 1px;
-    }
-}
 
-.form-group.is-error {
-    .form-control {
-        outline: none;
-        background-image: linear-gradient($color-red-hex,$color-red-hex),linear-gradient($color-light-gray-hex,$color-light-gray-hex);
-        background-size: 100% 2px,100% 1px;
-        box-shadow: none;
-        transition-duration: .3s;
-    }
-    .ng-select {
-        &.form-control-select ::ng-deep .ng-select-container  { 
-            display: flex;
-            outline: none;
-            background-image: linear-gradient($color-red-hex,$color-red-hex),linear-gradient($color-light-gray-hex,$color-light-gray-hex);
-            background-size: 100% 2px,100% 1px;
-            box-shadow: none;
-            transition-duration: .3s;
-        }
-    }
-}
 
-.form-group label.control-label {
-    top: -35px; 
-    left: 0;
-    font-size: 0.8em;
-    line-height: normal;
-    position: absolute;
-    pointer-events: none;
-    transition: .3s ease all;
-    color: $color-txt-4-hex;
 
-}
-.form-group.is-empty label.control-label {
-    top: -6px;
-    left: 6px;
-    font-size: 1em;
-    line-height: normal;
-    position: absolute;
-    color: $color-txt-3-hex;
-    z-index:1;
-    pointer-events: none;
-}
-.form-group.is-focused label.control-label {
-    top: -35px; 
-    left: 0;
-    font-size: 0.8em;
-    line-height: normal;
-    position: absolute;
-    pointer-events: none;
-    transition: .3s ease all;
-    color: $color-txt-4-hex;
-}
-
-.select-intent-box {
-    width: 70%;
-    // min-width: 900px;
-}
-
-
-
-// .title-label {
-//     color: white;
-//     margin-bottom: 0px;
-//     // margin-left: 30px;
-// }
-
-.title-label {
-    color: white;
-    font-size: 18px;
-    margin-bottom: 0px;
-    // margin-left: 30px;
-}
-
-.text-action {
-    color: $icon-color;
-    margin-right: 10px;
-    margin-bottom: 0px;
-}
-
-.custom-icon {
-    color: $icon-color;
-    margin-right: 6px;
-}
 
-
-.action-type {
-    margin-bottom: 0px;
-    color: white;
-}
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.html
index f2042968..51c6533b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.html
@@ -32,7 +32,7 @@
             <div>Condition</div>
             <div class="operators-list">
                 <div class="operator" [class.active]="conditionForm.value.operator === item.type" *ngFor="let item of operatorsList" (click)="onClickOperator(item)">
-                    <img *ngIf="item.src" width="10px" [src]="item.src">
+                    <img class="active-icon" *ngIf="item.src" width="10px" [src]="item.src">
                     <div>{{item.name}}</div>
                 </div>
             </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.scss
index 7fe7378d..f8fdecab 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-condition-row/base-condition-row.component.scss
@@ -159,6 +159,7 @@ section.header{
     span.material-icons{
         font-size: 25px;
         cursor: pointer;
+        color: $blu;
     }
 }
 
@@ -236,15 +237,16 @@ section.condition{
         margin: 5px;
         padding: 10px 15px;
         transition: all 0.3s ease 0s;
-        background-color: rgb(240, 244, 247);
+        background-color: $blu-light-01;
+        color: $blu;
         cursor: pointer;
 
         &.active,
         &:hover{
-            background: $light-blue;
-            color: $light-black;
+            background: $blu;
+            color: $blu-light-03;
             img{
-                filter: brightness(0) saturate(100%) invert(10%) sepia(5%) saturate(855%) hue-rotate(188deg) brightness(92%) contrast(92%);
+                filter: brightness(0) saturate(100%) invert(100%) sepia(20%) saturate(7023%) hue-rotate(179deg) brightness(106%) contrast(89%);
             }
         }
 
@@ -350,7 +352,7 @@ section.submit{
 cds-textarea#operand2 ::ng-deep {
     display: flex;
     textarea {
-        border: 1px solid rgb(118, 118, 118) !important;
+        // border: 1px solid rgb(118, 118, 118) !important;
         resize: none !important; 
         padding: 8px 20px !important;
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.html
index 2317f0e6..329f80ea 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.html
@@ -1,15 +1,14 @@
 <div class="content">
 
-    <div class="filter-row">
-        <div *ngFor="let group of expression?.conditions; let i = index; let last = last"
-            class="text-editor-wrapper">
+    <div class="filter-row" *ngFor="let group of expression?.conditions; let i = index; let last = last">
+        <div class="text-editor-wrapper">
             <!-- CONDITION [i]-->
             <div *ngIf="i%2 === 0" 
                 class="filter-condition" 
                 (click)="onOpenConditionDetail(i); addConditionFilter.toggle();">
                 <div class="remove" 
                     (click)="$event.stopPropagation(); onDeleteCondition(i, last)">
-                    <span class="material-icons">delete</span>
+                    <span class="material-icons-outlined">delete</span>
                 </div>
                 <div class="filter-icon">
                     <span class="material-icons">data_object</span>
@@ -35,18 +34,19 @@
         </div>
     </div>
 
-    <div class="basic-filter-wrp">
-        <!-- <div class="add-filter-button" 
-            [satPopoverAnchor]="addConditionFilterBASE" 
+    <div class="basic-filter-wrp" *ngIf="true"> 
+        <div class="add-filter-button" 
+            [satPopoverAnchor]="addConditionFilter" 
             (click)="addConditionFilter.toggle()">
             <span class="material-icons">add</span>
             Add new condition
-        </div> -->
+        </div>
     </div>
+    
 </div>
 
 <!-- verticalAlign="below" -->
-<sat-popover #addConditionFilterBASE 
+<sat-popover #addConditionFilter 
     id="addConditionFilter"
     horizontalAlign="center" 
     verticalAlign="center" 
@@ -59,3 +59,5 @@
         (close)="onDismiss($event)">
     </base-condition-row>
 </sat-popover>
+
+
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.scss
index c2d98830..a92b544d 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/base-filter/base-filter.component.scss
@@ -2,8 +2,14 @@
 
 
 :host{
-    --content-background: rgb(66, 85, 117);
-    --icon-color: #{$icon-color};
+    --icon-color: #{$blu};
+    --textColor: #{$blu};
+    --backGroundColor: #{$blu-light-04};
+    --hoverBackgroundColor: #{$blu-light-03};
+
+    --content-background: rgb(244, 246, 251, 0.4);
+    --border-radius-base: 8px
+    
 
 }
 .base-filter{
@@ -15,10 +21,13 @@
     }
 }
 .content{
-    background: var(--content-background);
-    // margin: 0 30px;
+    background-color: var(--content-background);
+    border: 1px solid $gray-light-02;
     padding: 20px;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .control-buttons{
@@ -45,20 +54,22 @@
         cursor: pointer;
         display: flex;
         justify-content: center;
-        background: rgb(255, 255, 255);
+        background: white;
         border-radius: 100%;
         transition: background-color 0.3s ease 0s;
         font-size: 12px;
 
-        span.material-icons{
+        span.material-icons,
+        span.material-icons-outlined{
             font-size: 20px;
-            color:  var(--icon-color);
+            color: var(--backGroundColor);
         }
 
         &:hover{
-            background-color: var(--icon-color);
-            span.material-icons{
-                color: white;
+            background-color: var(--textColor);
+            span.material-icons,
+            span.material-icons-outlined{
+                color: var(--backGroundColor);
             }
         }
     }
@@ -67,27 +78,40 @@
 .basic-filter-wrp{
     // background: #fff;
     // margin: 0 30px;
-    padding: 20px 0px;
+    // padding: 20px 0px 0px;
     grid-row-gap: 15px;
     border-radius: 4px;
     display: flex;
+    justify-content: center;
 
     .add-filter-button{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        font-weight: 600;
-        padding: 8px 15px;
-        border: 1px solid #c6cdd4;
-        border-radius: 4px;
-        color: #c6cdd4;
+        
+        user-select: none;
+        box-sizing: border-box;
+        outline: none;
+        border: 1px dashed $blu-light-02;
+        border-radius: $button-border-radius-base;
+        color: $blu-light-02;
         cursor: pointer;
+        font-size: 0.7em;
+        font-weight: 400;
+        line-height: $button-height-base;
+        // margin: 0px 5px 0;
+        order: 1;
+        padding: 0 10px;
+        transition: all .3s;
+        min-width: 100px;
+        text-align: center;
+        width: fit-content;
 
         
         &:hover{
-            border-color: white;
-            color: white
+            border-color: var(--textColor);
+            color: var(--textColor);
         }
     }
     
@@ -135,18 +159,18 @@
     align-items: center;
     display: flex;
     position: relative;
-    border-radius: 4px;
-    padding: 8px 15px;
+    border-radius: var(--border-radius-base);
+    padding: 4px 15px;
     transition: background-color 0.3s ease 0s, border 0.3s ease 0s, opacity 0.3s ease 0s;
     cursor: pointer;
-    background: rgb(245, 245, 245);
+    background: var(--backGroundColor);
     border-width: 1px;
     border-style: solid;
-    border-color: rgb(245, 245, 245);
+    border-color: var(--backGroundColor);
     border-image: initial;
     &:hover{
-        background: #c6cdd4;
-        border-color: #c6cdd4;
+        background: var(--hoverBackgroundColor);
+        border-color: var(--textColor);
         div.remove{
             opacity: 1;
         }
@@ -167,19 +191,16 @@
         cursor: pointer;
         display: flex;
         justify-content: center;
-        background: rgb(255, 255, 255);
+        background:white;
         border-radius: 100%;
         transition: background-color 0.3s ease 0s;
         font-size: 12px;
         span.material-icons {
             font-size: 20px;
-            color:  var(--icon-color);
+            color: var(--textColor);
         }
         &:hover {
-            background-color:  var(--icon-color);
-            span.material-icons{
-                color: white;
-            }
+            background-color: var(--hoverBackgroundColor);
         }
     }
 
@@ -187,7 +208,7 @@
         -webkit-box-align: center;
         -webkit-box-pack: center;
         align-items: center;
-        color: $icon-color;
+        color: var(--textColor);
         display: flex;
         font-size: 15px;
         justify-content: center;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
index b99e5bd4..c37d4c39 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
@@ -40,7 +40,7 @@
                     <!-- EXPRESSION [i]-->
                     <div *ngIf="i%2 === 0" class="base-filter">
                         <div class="control-buttons" *ngIf="group?.conditions && group?.conditions.length > 0 || i!==0">
-                            <div class="filter-remove" (click)="onDeleteGroup(i, last)"><span class="material-icons">delete</span></div>
+                            <div class="filter-remove" (click)="onDeleteGroup(i, last)"><span class="material-icons-outlined">delete</span></div>
                         </div>
                         <base-filter *ngIf="i%2 === 0"
                             [expression]="group"
@@ -80,7 +80,7 @@
 
                 <div class="condition-container">
                     <div class="icon-action">
-                        <img src="assets/images/icons/if_condition.svg">
+                        <img class="active-icon" src="assets/images/icons/if_condition.svg">
                     </div>
                     <span class="condition-text">MATCH</span>
                 </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.scss
index 4fcad865..5857c009 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.scss
@@ -1,5 +1,13 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+:host{
+    --textColor: #{$blu};
+    --backGroundColor: #{$blu-light-03};
+    --hoverBackgroundColor: #{$blu-light-03};
+
+    --border-radius-base: 8px
+}
+
 .previewContent{
     position: relative;
     display: flex;
@@ -111,7 +119,7 @@
         margin: 0px 10px;
         transition: opacity 0.3s ease 0s;
         span.text{
-            color: $icon-color;
+            color: var(--textColor);
             font-weight: 600;
         }
     }
@@ -131,7 +139,7 @@
         transition: background-color 0.3s ease 0s;
 
         span.material-icons{
-            color: $icon-color;
+            color: var(--textColor);
             font-size: 20px;
             transition: color 0.6s ease 0s;
         }
@@ -143,7 +151,7 @@
         flex-grow: 1;
         height: 0px;
         width: 0px;
-        border-top: 1px solid rgb(204, 204, 204);
+        border-top: 1px solid var(--textColor);
     }
 
     &::after{
@@ -152,7 +160,11 @@
         flex-grow: 1;
         height: 0px;
         width: 0px;
-        border-top: 1px solid rgb(204, 204, 204);
+        border-top: 1px solid var(--textColor);
+    }
+
+    &:hover{
+        opacity: 0.8;
     }
 }
 .add-conditions-group {
@@ -179,12 +191,10 @@
         position: absolute;
         right: -8px;
         top: -14px;
-        
+        transition: opacity 0.3s ease 0s;
         opacity: 0;
-
         height: 28px;
         width: 28px;
-
         -webkit-box-align: center;
         -webkit-box-pack: center;
         align-items: center;
@@ -192,21 +202,19 @@
         cursor: pointer;
         display: flex;
         justify-content: center;
-        background: rgb(255, 255, 255);
+        background: white;
         border-radius: 100%;
         transition: background-color 0.3s ease 0s;
         font-size: 12px;
 
-        span.material-icons{
+        span.material-icons,
+        span.material-icons-outlined{
             font-size: 20px;
-            color: $icon-color;
+            color: var(--textColor);
         }
 
-        &:hover{
-            background-color: $icon-color;
-            span.material-icons{
-                color: white;
-            }
+        &:hover {
+            background-color: var(--hoverBackgroundColor);
         }
     }
 }
@@ -228,7 +236,7 @@
 .condition-text {
     font-size: 14px;
     font-weight: 600;
-    color: white;
+    color: $blu;;
 }
 
   
@@ -254,15 +262,15 @@
   }
   
   ::ng-deep .mat-checkbox.mat-accent .mat-checkbox-frame {
-      border-color: $icon-color!important;
+      border-color: $blu !important;
   }
   
   // overwrite the checkbox background
   ::ng-deep .mat-checkbox-checked .mat-checkbox-background, 
   .mat-checkbox-indeterminate .mat-checkbox-background {
-      background-color: $icon-color!important;
+      background-color: $blu !important;
       .mat-checkbox-checkmark {
-          background: $icon-color!important;;
+          background: $blu !important;;
           .mat-checkbox-checkmark-path {
             stroke: white;
             stroke-width: 5px;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/variable-list/variable-list.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/variable-list/variable-list.component.scss
index 8369e1ca..47e4659b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/variable-list/variable-list.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/variable-list/variable-list.component.scss
@@ -21,7 +21,7 @@
 }
 
 .material-icons{
-    color: $icon-color;
+    color: $blu-light-02;
     font-size: 18px;
 }
 
@@ -52,20 +52,27 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        height: 32px;
+        height: 30px;
         padding: 0 15px;
         transition: background-color .2s,opacity .2s;
 
         &:hover{
             background: #f0f4f7;
             cursor: pointer;
+
+            .category-row-name {
+                font-weight: 500;
+            }
+            .material-icons {
+                color: $blu;
+            }
         }
     }
 
     .category-row-name{
-        color: #444a51;
+        color: $blu;
         font-size: 16px;
-        font-weight: 500;
+        font-weight: 400;
         line-height: 20px;
         margin-right: 20px;
         margin-bottom: 0px;
@@ -128,12 +135,12 @@
     justify-content: center;
     .material-icons{
         margin-right: 15px;
-        color: $icon-color;
+        color: $blu;
         font-size: 24px;
         font-weight: 500;
     }
     div {
-        color: #22272d;
+        color: $blu;
         font-size: 16px;
         font-weight: 600;
         line-height: 20px;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.html
index d5925604..e68b91df 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.html
@@ -35,7 +35,7 @@
 
             <div class="condition-container">
                 <div class="icon-action">
-                    <img src="assets/images/icons/if_condition.svg">
+                    <img class="active-icon" src="assets/images/icons/if_condition.svg">
                 </div>
                 <span class="condition-text">ONLINE</span>
             </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.scss
index 3a3b8bfc..ac92349b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-online-agents/cds-action-online-agents.component.scss
@@ -48,7 +48,7 @@
 .condition-text {
   font-size: 14px;
   font-weight: 600;
-  color: white;
+  color: $blu;
 }
 
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.html
index e77029f5..8b882208 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.html
@@ -37,7 +37,7 @@
 
             <div class="condition-container">
                 <div class="icon-action">
-                    <img src="assets/images/icons/if_condition.svg">
+                    <img class="active-icon" src="assets/images/icons/if_condition.svg">
                 </div>
                 <span class="condition-text">OPEN</span>
             </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.scss
index fa668181..5cfca09f 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-open-hours/cds-action-open-hours.component.scss
@@ -46,7 +46,7 @@
 .condition-text {
   font-size: 14px;
   font-weight: 600;
-  color: white;
+  color: $blu;
 }
 
 .icon-action {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-replace-bot/cds-action-replace-bot.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-replace-bot/cds-action-replace-bot.component.scss
index 3624d9a6..8f797471 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-replace-bot/cds-action-replace-bot.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-replace-bot/cds-action-replace-bot.component.scss
@@ -6,48 +6,8 @@
     margin-right: 30px;
 }
 
-.action-title {
-    display: flex;
-    align-items: center;
-    //margin-left: 28px;
-    margin-bottom: 40px;
-    justify-content: flex-start;
-}
-
-// #text-condition{
-//     position: relative;
-//     top: -4px;
-//     right: -45px;
-//     width: 88%;
-//     display: block;
-// }
-
-.custom-icon {
-    color: $icon-color;
-    margin-right: 6px;
-}
-
-.text-action {
-    color: $icon-color;
-    margin-right: 10px;
+.title-label {
+    color: $blu;
+    font-size: 16px;
     margin-bottom: 0px;
-}
-
-.action-type {
-    margin-bottom: 0px;
-    color: white;
-}
-
-
-.title-box {
-    width: 100%;
-    text-align: center;
-    color: white;
-    font-size: 20px;
-    padding: 0px 20px;
-    margin-bottom: 40px;
-}
-
-// .select-bot-box {
-//     width: 100%;
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.scss
index ef576353..8a280d8d 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.scss
@@ -69,15 +69,15 @@ $margin-bottom: 15px;
 // }
 
 ::ng-deep .mat-checkbox.mat-accent .mat-checkbox-frame {
-    border-color: $icon-color!important;
+    border-color: $blu !important;
 }
 
 // overwrite the checkbox background
 ::ng-deep .mat-checkbox-checked .mat-checkbox-background, 
 .mat-checkbox-indeterminate .mat-checkbox-background {
-    background-color: $icon-color!important;
+    background-color: $blu !important;
     .mat-checkbox-checkmark {
-        background: $icon-color!important;;
+        background: $blu !important;;
         .mat-checkbox-checkmark-path {
           stroke: white;
           stroke-width: 5px;
@@ -94,7 +94,7 @@ $margin-bottom: 15px;
 .box-up {
     display: flex;
     padding: 5px 10px;
-    background: #dcdcdc;
+    background: $blu-light-04;
     position: relative;
     /* top: 0; */
     width: 100%;
@@ -109,14 +109,14 @@ $margin-bottom: 15px;
     // display: flex;
     margin: 0px 5px;
     .reply-info{
-        color: aliceblue;
+        color: $blu;
         padding: 10px;
         font-size: 14px;
         text-align: center;
-        border: 2px solid #0F172A;
+        border: 1px solid $gray-light-01;
         border-radius: 10px;
         margin: 10px;
-        background: #425575;
+        background: $blu-light-03;
     }
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.html
new file mode 100644
index 00000000..4ce86910
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.html
@@ -0,0 +1,34 @@
+<div class="button-reply-wrp" [class.previewMode]="previewMode">
+    <div class="button-reply" [class.ellips]="!previewMode"> 
+  
+        <span *ngIf="button?.target !== 'self' && button.type === TYPE_BUTTON.URL" class="icon-button-action">
+            <svg style="transform: rotateZ(45deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+            </svg>
+        </span>
+    
+        <span *ngIf="button?.target === 'self' && button.type === TYPE_BUTTON.URL" class="icon-button-action-self">
+            <svg style="transform: rotateZ(90deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+            </svg>
+        </span>
+        {{button?.value}} 
+        <div class="clear"></div>
+    </div> 
+
+    <div class="button-controls">
+        <!-- <div class="buttonsToMove">
+            <div class="control-button" (click)="onMoveLeftButton()">
+                <em class="material-icons">chevron_left</em>
+            </div> 
+            <div class="control-button" (click)="onMoveRightButton()">
+                <em class="material-icons">chevron_right</em>
+            </div>
+        </div> -->
+        <div class="control-button delete" (click)="$event.stopPropagation(); onDeleteButton()">
+            <em class="material-icons">delete</em>
+        </div>
+    </div>
+</div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.scss
new file mode 100644
index 00000000..5dfae931
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.scss
@@ -0,0 +1,157 @@
+@import "./src/assets/sass/cds/_variables.scss";
+
+
+:host{
+    --backgroundColor: #{$color-withe-hex};
+    --textColor: #{$blu};
+    --hoverBackgroundColor: #{$blu};
+    --hoverTextColor: #{$color-withe-hex};
+    --buttonFontSize: 0.7em;
+    --max-width: #{$button-max-width-base};
+}
+.previewMode{
+
+    .content-botton-reply {
+        height: unset;
+    }
+
+    .button-reply{
+        min-width: $button-min-width-preview;
+        max-width: $button-max-width-base;
+        padding: 2px 10px;
+        // max-width: calc(100% - 20px);
+        // margin: auto;
+        // background: transparent;
+
+        // &.connected{
+        //     background: #ffff;
+        //     border-color: #ffff;
+        // }
+    }
+}
+
+.button-reply {
+    // float: right;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    min-width: 100px;
+    text-align: center;
+    // margin: 0px 5px 0px; //10px 5px 0;
+    padding: 0px 10px;
+    user-select: none;
+    box-sizing: border-box;
+    outline: none;
+    background: var(--backgroundColor);
+    border: 1px solid var(--textColor);
+    border-radius: $button-border-radius-base;
+    color: var(--textColor);
+    cursor: pointer;
+    font-size: 0.7em;
+    font-weight: 500;
+    line-height: $button-height-base;
+    transition: all .3s;
+
+    .icon-button-action {
+        position: absolute;
+        top: -1px;
+        right: 5px;
+        svg {
+            fill: var(--textColor);
+        }
+    }
+    .icon-button-action-self{
+        position: absolute;
+        right: 1px;
+        svg {
+            fill: var(--textColor);
+        }
+    }
+    &:focus,
+    &:hover {
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
+        .icon-button-action, .icon-button-action-self {
+            svg {
+                fill: var(--hoverTextColor);
+            }
+        }
+    }
+}
+
+
+.button-reply-wrp:hover {
+    transform: scale(1.05);
+    .button-controls {
+        opacity: 1;
+    }
+}
+
+.button-reply-text {
+    width: 100%;
+    height: 100%;
+    max-width: var(--max-width);
+    user-select: none;
+    color: var(--textColor);
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 500;
+    line-height: $button-height-base;
+    text-align: center;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    overflow: hidden!important;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.button-in-msg{
+    display: flex;
+    width: 100%;
+    position: relative;
+    justify-content: center;
+}
+
+.button-controls {
+    justify-content: space-between;
+    display: inline-flex;
+    position: absolute;
+    left: 0;
+    top: -40%;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    .buttonsToMove{
+        display: inline-flex;
+    }
+    .control-button {
+        cursor: pointer;
+        background: $blu-light-02;
+        color: $blu;
+        transition: color .3s;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        em {
+            font-size: 1.15em;
+            color: $blu;
+            transition: color .3s;
+        }
+    }
+    .control-button:hover{
+        color: var(--backgroundColor);
+        box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
+        em {
+            opacity: 0.8;
+        }
+        &.delete{
+            em {
+                color: $color-red-hex;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.spec.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.spec.ts
new file mode 100644
index 00000000..02900903
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CdsActionReplyButtonComponent } from './cds-action-reply-button.component';
+
+describe('CdsActionReplyButtonComponent', () => {
+  let component: CdsActionReplyButtonComponent;
+  let fixture: ComponentFixture<CdsActionReplyButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CdsActionReplyButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CdsActionReplyButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.ts
new file mode 100644
index 00000000..b73ae26f
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.ts
@@ -0,0 +1,32 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import { TYPE_BUTTON } from '../../../../../../../utils';
+
+@Component({
+  selector: 'cds-action-reply-button',
+  templateUrl: './cds-action-reply-button.component.html',
+  styleUrls: ['./cds-action-reply-button.component.scss']
+})
+export class CdsActionReplyButtonComponent implements OnInit {
+
+  @Input() button: any
+  @Input() previewMode: boolean = true;
+  @Output() onButtonControl = new EventEmitter()
+  
+  TYPE_BUTTON = TYPE_BUTTON
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onDeleteButton(){
+    this.onButtonControl.emit('delete')
+  }
+  onMoveLeftButton(){
+    this.onButtonControl.emit('moveLeft')
+  }
+  onMoveRightButton(){
+    this.onButtonControl.emit('moveRight')
+  }
+
+}
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html
index 98e62e6b..3fb3954f 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html
@@ -23,7 +23,13 @@
             (clickDelayTime)="onClickDelayTime($event)">
         </appdashboard-delay-slider>
     </div>
-    <div class="filter-wrapper" *ngIf="canShowFilter || response._tdJSONCondition?.conditions?.length > 0">
+   <!-- ||  -->
+   <div class="add-filter-btn" *ngIf="canShowFilter && filterConditionExist">
+        <span class="material-icons-outlined">filter_alt</span>
+        Filter
+    </div>
+    <div class="filter-wrapper" *ngIf="canShowFilter"
+        [ngStyle]="{width: filterConditionExist? '100%': 'auto'}">
         <appdashboard-filter
             [expression]="response._tdJSONCondition"
             [booleanOperators]="booleanOperators"
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss
index c050698c..156e44c0 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss
@@ -5,10 +5,10 @@ $max-height: 230px;
 .extensions-response {
     font-size: $font-size-base;
     position: relative;
-    width: 100%;
+    width: calc(100% - 6px);
     height: auto;
-    margin: 27px 0 0 0;
-    padding: 0px 33px;
+    margin: 27px 0px 5px 0px;
+    padding: 0px 30px;
     display: flex;
     flex-wrap: wrap;
     row-gap: 5px;
@@ -29,6 +29,31 @@ $max-height: 230px;
         transition: opacity 0.3s ease-in-out;
         z-index: 1;
     }
+
+    .add-filter-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 0px 9px;
+        height: 26px;
+        font-size: .9em;
+        font-weight: 400;
+        border-radius: 13px;
+        transition: all 0.3s ease 0s;
+        background: $blu;
+        color: $blu-light-01;
+    
+        span.material-icons-outlined{
+            font-size: 20px;
+            color: white;
+        }
+    
+        &:hover{
+            opacity: 0.8;
+            cursor: pointer;
+        }
+    }
 }
 
 .extensions-response:hover{
@@ -218,7 +243,7 @@ $max-height: 230px;
 
 
 .response-frame-panel {
-    border: 2px dashed #eeeef1;
+    border: 2px dashed $blu-light-02;
     border-radius: 6px;
     display: flex;
     justify-content: center;
@@ -227,7 +252,7 @@ $max-height: 230px;
     text-align: center;
     margin-left: 30px;
     // margin-top: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
     position: relative;
     max-width: calc(100% - 66px);
     width: auto;
@@ -336,11 +361,11 @@ $max-height: 230px;
 cds-textarea.text-editable-div ::ng-deep{
     display: block;
     margin-left: 30px;
-    width: calc(100% - 66px);
-    // margin-left: 20px;
+    margin-right: 30px;
+    // width: calc(100% - 66px);
     textarea {
         line-height: 20px !important; 
-        width: calc(100% - 20px) !important;
+        // width: calc(100% - 20px) !important;
         font-size: 0.9em !important;
     }
 }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts
index ae0b6733..b0a8e3b5 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts
@@ -34,6 +34,7 @@ export class CdsActionReplyFrameComponent implements OnInit {
   delayTime: number;
   // Filter // 
   canShowFilter: boolean = true;
+  filterConditionExist: boolean = false;
   booleanOperators=[ { type: 'AND', operator: 'AND'},{ type: 'OR', operator: 'OR'},]
 
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -53,7 +54,11 @@ export class CdsActionReplyFrameComponent implements OnInit {
     this.frameHeight = this.response.metadata.height?this.response.metadata.height:MESSAGE_METADTA_HEIGHT;
     if(this.response.metadata.src){
       this.framePath = this.sanitizer.bypassSecurityTrustResourceUrl(this.response.metadata.src?this.response.metadata.src:null);
-    }     
+    }    
+    
+    if(this.response && this.response._tdJSONCondition && this.response._tdJSONCondition.conditions.length > 0){
+      this.filterConditionExist = true
+    }
   }
 
 
@@ -76,6 +81,7 @@ export class CdsActionReplyFrameComponent implements OnInit {
   /** onChangeExpression */
   onChangeExpression(expression: Expression){
     this.response._tdJSONCondition = expression;
+    this.filterConditionExist = expression && expression.conditions.length > 0? true : false;
     this.changeActionReply.emit();
   }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
index df0dd8d6..44b57e38 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
@@ -23,10 +23,17 @@
             (clickDelayTime)="onClickDelayTime($event)">
         </appdashboard-delay-slider>
     </div>
-    <div class="filter-wrapper" *ngIf="canShowFilter || response._tdJSONCondition?.conditions?.length > 0">
+    <!-- ||  -->
+    <div class="add-filter-btn" *ngIf="canShowFilter && filterConditionExist">
+        <span class="material-icons-outlined">filter_alt</span>
+        Filter
+    </div>
+    <div class="filter-wrapper" *ngIf="canShowFilter"
+        [ngStyle]="{width: filterConditionExist? '100%': 'auto'}">
         <appdashboard-filter
             [expression]="response._tdJSONCondition"
             [booleanOperators]="booleanOperators"
+            [previewMode]="previewMode"
             (onChangeExpression)="onChangeExpression($event)">
         </appdashboard-filter>
     </div>
@@ -196,35 +203,31 @@
             </div>
        </div>
         <div class="buttons-response button-replies">
-            <div *ngFor="let button of galleryEl.buttons; let j= index;" class="content-botton-reply"> 
-                <div class="button-reply">
-                    <div class="button-reply-text single-btn-reply"
-                        (click)="$event.stopPropagation(); onOpenButtonPanel(i, j, button)">
-                        {{button.value}}
-                    </div>
-                    <div class="button-controls">
-                        <!-- <div class="buttonsToMove">
-                            <div class="control-button" (click)="onMoveLeftButton(i)">
-                                <em class="material-icons">chevron_left</em>
-                            </div> 
-                            <div class="control-button" (click)="onMoveRightButton(i)">
-                                <em class="material-icons">chevron_right</em>
-                            </div>
-                        </div> -->
-                        <div class="control-button delete" (click)="$event.stopPropagation(); onDeleteButton(i)">
-                            <em class="material-icons">delete</em>
-                        </div>
-                    </div>
-                </div>
+            <div *ngFor="let button of galleryEl.buttons; let j= index;" style="position: relative;"> 
+                
+                <!-- DRAG PLACEHOLDER -->
+                <!-- <cds-action-reply-button class="custom-placeholder" *cdkDragPlaceholder
+                    (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+                    [button]="button"
+                    [previewMode]="previewMode">
+                </cds-action-reply-button> -->
+
+                <cds-action-reply-button [class.connected]='button.__isConnected' cdkDragHandle
+                    (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+                    [button]="button"
+                    [previewMode]="previewMode"
+                    (onButtonControl)="onButtonControl($event, i, j)">
+                </cds-action-reply-button>
         
-                <cds-connector class="button-connector"
+                <!-- <cds-connector *ngIf="button.type !== TYPE_BUTTON.URL"
+                    class="button-connector"
                     cdkDragDisabled
                     [idConnector]="button.__idConnector"
                     [isConnected]="button.__isConnected">
-                </cds-connector>
+                </cds-connector> -->
         
             </div>
-            <div *ngIf="galleryEl.buttons.length < 3" class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onAddButton(i)">
+            <div *ngIf="galleryEl.buttons.length < 3" class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onButtonControl('new', i, null)">
                 + Add button
             </div>
         </div> 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.scss
index 49748681..15a38996 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.scss
@@ -3,16 +3,18 @@
 :host{
     --cardImageHeight: 150px;
     --cardWidth: 220px;
+    --border-color: #{$blu-light-01};
+    --base-color: #{$blu-light-02};
 }
 
 
 .extensions-response {
     font-size: $font-size-base;
     position: relative;
-    width: 100%;
+    width: calc(100% - 6px);
     height: auto;
-    margin: 27px 0px 0px 0px;
-    padding: 0px 33px;
+    margin: 27px 0px 5px 0px;
+    padding: 0px 30px;
     display: flex;
     flex-wrap: wrap;
     row-gap: 5px;
@@ -32,6 +34,31 @@
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
     }
+
+    .add-filter-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 0px 9px;
+        height: 26px;
+        font-size: .9em;
+        font-weight: 400;
+        border-radius: 13px;
+        transition: all 0.3s ease 0s;
+        background: $blu;
+        color: $blu-light-01;
+    
+        span.material-icons-outlined{
+            font-size: 20px;
+            color: white;
+        }
+    
+        &:hover{
+            opacity: 0.8;
+            cursor: pointer;
+        }
+    }
 }
 
 .extensions-response:hover{
@@ -124,17 +151,6 @@
         
     }
 
-    .button-reply{
-        min-width: 200px;
-        padding: 2px 10px;
-    }
-
-    .content-botton-reply {
-        position:relative;
-        height: 26px;
-    }
-
-
 
     /** BUTTONS **/
     .buttons-response {
@@ -161,25 +177,17 @@
         align-items: flex-end;
 
         .button-reply-add{
-            color: $color-txt-2-hex;
-            border-color: $color-txt-2-hex;
+            color: var(--base-color);
+            border-color: var(--base-color);
         }
     }
 
-    .button-reply {
-        margin: 0px; //10px 5px 0;
-        border: 1px solid $color-blue-hex;
-        font-size: 0.7em;
-        font-weight: 500;
-        line-height: $button-height-base;
-        transition: all .3s;
-        &.custom-placeholder {
-            margin: 10px 5px;
-            background: #dfdfdf;
-            border: dotted 0px #999;
-            height: $button-height-base;
-            transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-        }
+    .custom-placeholder {
+        margin: 10px 5px;
+        background: #dfdfdf;
+        border: dotted 0px #999;
+        height: $button-height-base;
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     }
 
     .button-controls{
@@ -205,20 +213,20 @@
         &.delete{
             height: 24px;
             width: 24px;
-            background: $color-bck-gray-hex;
+            background: var(--base-color);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             em {
                 font-size: 1.15em;
-                color: $color-withe-hex;
+                color: $blu;
                 transition: color .3s;
             }
         }
     }
     .control-button:hover{
-        color: $color-withe-hex;
+        color: var(--base-color);
         &.delete{
             box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
             em {
@@ -261,9 +269,7 @@
     box-sizing: border-box;
     outline: none;
     background: $color-withe-hex;
-    // border: 1px solid $color-blue-hex;
     border-radius: $button-border-radius-base;
-    color: $color-blue-hex;
     cursor: pointer;
     font-size: 1em;
     font-weight: 500;
@@ -312,7 +318,7 @@
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px solid $icon-color;
+        border-top: 1px solid var(--base-color);
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -372,16 +378,16 @@
         flex-direction: row;
 
         .gallery-buttons-add-lines{
-            border-top: 1px dashed #b4c0c7;
-            border-bottom: 1px dashed #b4c0c7;
-            width: 28px;
+            border-top: 1px dashed var(--base-color);
+            border-bottom: 1px dashed var(--base-color);
+            width: 20px;
             height: 0;
         }
     }
 
     .gallery-buttons-add-lines{
-        border-left: 1px dashed #b4c0c7;
-        border-right: 1px dashed #b4c0c7;
+        border-left: 1px dashed var(--base-color);
+        border-right: 1px dashed var(--base-color);
         height: 28px;
         width: 0;
     }
@@ -413,32 +419,26 @@
 
         }
 
-        .cds-add-action-btn > span {
-            font-size: 20px;
-            color: $icon-color;
-            top: 0;
+        .cds-add-action-btn {
+            background-color: var(--base-color);
+            color: white;
         }
 
-        .cds-add-action-btn:hover{
-            background: $icon-color;
-            span {
-                color: white;
-            }
+        .cds-add-action-btn:hover,
+        .action--text:hover{
+            opacity: 0.5;
         }
 
         .action--text {
             position: absolute;
             top: 0;
             left: 30px;
-            color: $icon-color;
+            color: var(--base-color);
             font-size: 14px;
             white-space: nowrap;
             // z-index: 1;
             cursor: pointer;
         }
-        .action--text:hover {
-            color: rgba($icon-color, 0.8);
-        }
 
     }
  
@@ -450,11 +450,12 @@
     height: 100%;
     max-width: var(--cardWidth);
     user-select: none;
-    color: $color-blue-hex;
     cursor: pointer;
     font-size: 1em;
     font-weight: 500;
     line-height: $button-height-base;
+    border: 1px solid var(--border-color);
+    border-radius: $button-border-radius-base;
     text-align: center;
     box-sizing: border-box;
     margin: 0;
@@ -469,7 +470,7 @@
     position: relative;
     -webkit-transition: opacity .3s;
     transition: opacity .3s;
-    width: 220px;
+    width: var(--cardWidth);
 
 }
 
@@ -499,37 +500,36 @@
         bottom: 0;
         right: 0;
         left: 0;
-        background-color: rgba(#b38d27, 0.5);
+        background-color: var(--border-color);
+        display: flex;
 
         &:hover{
             opacity: 0.5;
-            .control-button {
-                &.delete {
-                    // margin-right: -24px;
-                    // margin-top: calc(var(--cardImageHeight)/2);
-                    // margin-right: calc(var(--cardWidth)/2);
-                    opacity: 1;
-                    display: flex;
-                    bottom: 0;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    justify-content: center;
-                    align-items: center;
-                }
+            .control-button{
+                opacity: 1;
             }
         }
 
         .control-button {
-            &.delete {
-                color: $color-withe-hex;
+            cursor: pointer;
+            color: $color-bck-gray-hex;
+            transition: color .3s;
+            height: 20px;
+            opacity: 0;
+            &.delete{
+                height: 24px;
+                width: 24px;
+                background: var(--base-color);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 position: absolute;
-                top: 0px;
-                right: 0px;
-                margin-right: 0px;
-                opacity: 0;
-                cursor: pointer;
-                transition: all .3s ease-in-out;
+                em {
+                    font-size: 1.15em;
+                    color: $blu;
+                    transition: color .3s;
+                }
             }
         }
 
@@ -540,13 +540,11 @@
 cds-image-upload ::ng-deep {
     div.dropUploadImage{
         min-height: unset !important;
+        margin: 10px;
     }
     div.image{
         height: 20px !important;
         width: 20px !important;
-        img{
-            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(187deg) brightness(113%) contrast(117%);
-        }
     }
     div.labelDropUploadImage{
         font-size: 12px;
@@ -571,9 +569,9 @@ cds-image-upload ::ng-deep {
     user-select: none;
     box-sizing: border-box;
     outline: none;
-    border: 1px dashed $color-withe-hex;;
+    border: 1px dashed var(--base-color);
     border-radius: $button-border-radius-base;
-    color: $color-withe-hex;
+    color: var(--base-color);
     cursor: pointer;
     font-size: 0.7em;
     font-weight: 400;
@@ -604,8 +602,8 @@ cds-image-upload ::ng-deep {
     }
     .control-button {
         cursor: pointer;
-        background: $color-bck-gray-hex;
-        color: $color-bck-gray-hex;
+        background: $blu-light-02;
+        color: $blu;
         transition: color .3s;
         height: 24px;
         width: 24px;
@@ -616,7 +614,7 @@ cds-image-upload ::ng-deep {
         margin: 0 2px;
         em {
             font-size: 1.15em;
-            color: $color-withe-hex;
+            color: $blu;
             transition: color .3s;
         }
     }
@@ -624,7 +622,7 @@ cds-image-upload ::ng-deep {
         color: $color-withe-hex;
         box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
         em {
-            color: $color-red-hex;
+            opacity: 0.8;
         }
         &.delete{
             em {
@@ -656,7 +654,8 @@ cds-image-upload ::ng-deep {
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px solid $icon-color;
+        border-top: 1px solid var(--border-color);
+        box-sizing: border-box;
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -739,8 +738,10 @@ cds-textarea#description ::ng-deep {
                 // padding: 0px;
                 .mat-form-field-infix {
                     textarea {
-                        border-bottom: 1px solid rgb(242 205 111)!important;
-                        border-top: 1px solid rgb(242 205 111)!important;
+                        border-left: 0px solid white !important;
+                        border-right: 0px solid white !important;
+                        border-bottom: 1px solid var(--base-color) !important;
+                        border-top: 1px solid var(--base-color) !important;
                         // outline: 0px solid rgb(242 205 111) !important;
                         transition: border 0.3s;
                         
@@ -751,6 +752,8 @@ cds-textarea#description ::ng-deep {
     }
 
     textarea {
+        border-left: 0px solid white !important;
+        border-right: 0px solid white !important;
         border-bottom: 1px solid white!important;
         border-top: 1px solid white!important;
         border-radius: 0px;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.ts
index a52de503..12a53011 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.ts
@@ -35,12 +35,14 @@ export class CdsActionReplyGalleryComponent implements OnInit {
   delayTime: number;
   // Filter // 
   canShowFilter: boolean = true;
+  filterConditionExist: boolean = false;
   booleanOperators=[ { type: 'AND', operator: 'AND'},{ type: 'OR', operator: 'OR'},]
   typeActions = TYPE_ACTION;
   gallery: Array<GalleryElement>;
   // Textarea //
   activateEL: { [key: number]: {title: boolean, description: boolean} } = {};
   // Buttons //
+  TYPE_BUTTON = TYPE_BUTTON;
   buttons: Array<Button>;
 
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -70,6 +72,10 @@ export class CdsActionReplyGalleryComponent implements OnInit {
         this.updateConnector();
       });
       this.idIntent = this.idAction.split('/')[0];
+
+      if(this.response && this.response._tdJSONCondition && this.response._tdJSONCondition.conditions.length > 0){
+        this.filterConditionExist = true
+      }
     } catch (error) {
       this.logger.log('onAddNewResponse ERROR', error);
     }
@@ -247,6 +253,7 @@ export class CdsActionReplyGalleryComponent implements OnInit {
   /** onChangeExpression */
   onChangeExpression(expression: Expression){
     this.response._tdJSONCondition = expression;
+    this.filterConditionExist = expression && expression.conditions.length > 0? true : false;
     this.changeActionReply.emit();
   }
 
@@ -289,12 +296,28 @@ export class CdsActionReplyGalleryComponent implements OnInit {
     this.openButtonPanel.emit(button);
   }
 
-
+  /** onDeleteButton */ 
   onDeleteButton(indexGallery: number, index){
     this.gallery[indexGallery].buttons.splice(index, 1);
     this.changeActionReply.emit();
   }
 
+  /** onButtonControl */
+  onButtonControl(action: string, indexGallery: number, index){
+    switch(action){
+      case 'delete': /** onDeleteButton */
+        this.onDeleteButton(indexGallery, index)
+        break;
+      case 'moveLeft':
+        break;
+      case 'moveRight':
+        break;
+      case 'new': /** onCreateNewButton */
+        this.onAddButton(indexGallery);
+        break;
+    }
+  }
+
   /** dropButtons */
   dropButtons(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.buttons, event.previousIndex, event.currentIndex);
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.html
index 5fb070ce..60364188 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.html
@@ -23,7 +23,13 @@
             (clickDelayTime)="onClickDelayTime($event)">
         </appdashboard-delay-slider>
     </div>
-    <div class="filter-wrapper" *ngIf="canShowFilter || response._tdJSONCondition?.conditions?.length > 0">
+    <!-- ||  -->
+    <div class="add-filter-btn" *ngIf="canShowFilter && filterConditionExist">
+        <span class="material-icons-outlined">filter_alt</span>
+        Filter
+    </div>
+    <div class="filter-wrapper" *ngIf="canShowFilter"
+        [ngStyle]="{width: filterConditionExist? '100%': 'auto'}">
         <appdashboard-filter
             [expression]="response._tdJSONCondition"
             [booleanOperators]="booleanOperators"
@@ -86,38 +92,23 @@
 
 <div class="buttons-response button-replies" [class.previewMode]="previewMode" cdkDropListOrientation="vertical" cdkDropList (cdkDropListDropped)="dropButtons($event)" >
     
-    <div *ngFor="let button of buttons; let i = index;" class="tpl-drop-down content-botton-reply" cdkDragBoundary=".button-replies" cdkDrag> 
+    <div *ngFor="let button of buttons; let i = index;" cdkDragBoundary=".button-replies" cdkDrag style="position: relative;"> 
    
-        <div class="button-reply custom-placeholder" *cdkDragPlaceholder>
-            <div class="button-reply-text">
-                {{button.value}}
-            </div>
-        </div>
-
-        <div class="button-reply" cdkDragHandle>
-            <div class="button-reply-text single-btn-reply"
-                (click)="$event.stopPropagation(); onOpenButtonPanel(button)">
-                {{button.value}}
-            </div>
-            <div class="button-controls">
-                
-                <!-- <div class="buttonsToMove">
-                    <div class="control-button" (click)="onMoveLeftButton(i)">
-                        <em class="material-icons">chevron_left</em>
-                    </div> 
-                    <div class="control-button" (click)="onMoveRightButton(i)">
-                        <em class="material-icons">chevron_right</em>
-                    </div>
-                </div> -->
-
-                <div class="control-button delete" (click)="$event.stopPropagation();onDeleteButton(i)">
-                    <em class="material-icons">delete</em>
-                </div>
-
-           </div>
-        </div>
+        <!-- DRAG PLACEHOLDER -->
+        <cds-action-reply-button class="custom-placeholder" *cdkDragPlaceholder
+            (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+            [button]="button"
+            [previewMode]="previewMode">
+        </cds-action-reply-button>
+
+        <cds-action-reply-button [class.connected]='button.__isConnected' cdkDragHandle
+            (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+            [button]="button"
+            [previewMode]="previewMode"
+            (onButtonControl)="onButtonControl($event, i)">
+        </cds-action-reply-button>
 
-        <cds-connector *ngIf="previewMode"
+        <cds-connector *ngIf="previewMode && button.type !== TYPE_BUTTON.URL"
             class="button-connector"
             cdkDragDisabled
             [idConnector]="button.__idConnector"
@@ -126,7 +117,7 @@
         
     </div>
 
-    <div class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onCreateNewButton()">
+    <div class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onButtonControl('new', index)">
     + Add button
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.scss
index fc8ab537..d03d07be 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.scss
@@ -4,10 +4,10 @@
 .extensions-response {
     font-size: $font-size-base;
     position: relative;
-    width: 100%;
+    width: calc(100% - 6px);
     height: auto;
-    margin: 27px 0 0 0;
-    padding: 0px 33px;
+    margin: 27px 0px 5px 0px;
+    padding: 0px 30px;
     display: flex;
     flex-wrap: wrap;
     row-gap: 5px;
@@ -28,6 +28,31 @@
         transition: opacity 0.3s ease-in-out;
         z-index: 1;
     }
+
+    .add-filter-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 0px 9px;
+        height: 26px;
+        font-size: .9em;
+        font-weight: 400;
+        border-radius: 13px;
+        transition: all 0.3s ease 0s;
+        background: $blu;
+        color: $blu-light-01;
+    
+        span.material-icons-outlined{
+            font-size: 20px;
+            color: white;
+        }
+    
+        &:hover{
+            opacity: 0.8;
+            cursor: pointer;
+        }
+    }
 }
 
 .extensions-response:hover{
@@ -107,7 +132,8 @@
             line-height: 20px;
             font-size: .8em;
             margin: auto;
-    
+            white-space: pre-wrap;
+
             &.no-text{
                 color: rgb(141, 162, 181)
             }
@@ -123,16 +149,11 @@
         flex-wrap: nowrap;
         align-items: flex-end;
         .button-reply-add{
-            color: $color-txt-2-hex;
-            border-color: $color-txt-2-hex;
-            // margin-right: 10px;
+            color: $blu-light-02;
+            border-color: $blu-light-02;
         }
     }
 
-    .button-reply{
-        min-width: 200px;
-        padding: 2px 10px;
-    }
 }
 
 
@@ -163,20 +184,20 @@
         &.delete{
             height: 24px;
             width: 24px;
-            background: $color-bck-gray-hex;
+            background: $blu-light-02;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             em {
                 font-size: 1.15em;
-                color: $color-withe-hex;
+                color: $blu;
                 transition: color .3s;
             }
         }
     }
     .control-button:hover{
-        color: $color-withe-hex;
+        color: $blu-light-02;
         &.delete{
             box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
             em {
@@ -197,29 +218,6 @@
     cursor: grab;
 }
 
-.editor-utils {
-    position: relative;
-    margin: -20px 50px 0px 0px;
-    float: right;
-    .num-chars {
-        background: $color-light-gray-hex;
-        padding: 0px 8px;
-        border-radius: 12px;
-        font-size: 0.8em;
-        color: $color-text-box-hex;
-        float: right;
-        &.error {
-            background: $color-orange-hex;
-        }
-    }
-    .text-editor-insert-attribute {
-        float: right;
-    }
-    .moji-picker {
-        float: right;
-    }
-}
-
 
 .image-panel {
     position: absolute;
@@ -291,7 +289,7 @@
     }
     .control-button {
         &.delete {
-            color: $color-withe-hex;
+            color: $blu;
             position: absolute;
             top: 0px;
             right: 0px;
@@ -312,12 +310,6 @@
 }
 
 
-.content-botton-reply {
-    position:relative;
-    height: 26px;
-}
-
-
 /** BUTTONS **/
 .buttons-response {
     // display: flex;
@@ -342,66 +334,22 @@
     align-items: baseline;
 
 }
-.button-reply {
-    // float: right;
-    display: flex;
-    position: relative;
-    min-width: 100px;
-    text-align: center;
-    // margin: 0px 5px 0px; //10px 5px 0;
-    padding: 0px 10px;
-    user-select: none;
-    box-sizing: border-box;
-    outline: none;
-    background: $color-withe-hex;
-    border: 1px solid $color-blue-hex;
-    border-radius: $button-border-radius-base;
-    color: $color-blue-hex;
-    cursor: pointer;
-    font-size: 0.7em;
-    font-weight: 500;
-    line-height: $button-height-base;
-    transition: all .3s;
-    &.custom-placeholder {
-        margin: 10px 5px;
-        background: #dfdfdf;
-        border: dotted 0px #999;
-        height: $button-height-base;
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
-}
-.button-reply:hover {
-    .button-controls {
-        opacity: 1;
-    }
-}
-.button-reply-text {
-    width: 100%;
-    height: 100%;
-    max-width: $button-max-width-base;
-    user-select: none;
-    color: $color-blue-hex;
-    cursor: pointer;
-    font-size: 1em;
-    font-weight: 500;
-    line-height: $button-height-base;
-    text-align: center;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-    overflow: hidden!important;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.custom-placeholder {
+    margin: 10px 5px;
+    background: #dfdfdf;
+    border: dotted 0px #999;
+    height: $button-height-base;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
 .button-reply-add {
     float: right;
     user-select: none;
     box-sizing: border-box;
     outline: none;
-    border: 1px dashed $color-withe-hex;
+    border: 1px dashed $blu-light-02;
     border-radius: $button-border-radius-base;
-    color: $color-withe-hex;
+    color: $blu-light-02;
     cursor: pointer;
     font-size: 0.7em;
     font-weight: 400;
@@ -415,60 +363,16 @@
     width: fit-content;
     // margin-right: 10px;
 }
-.button-controls {
-    justify-content: space-between;
-    display: inline-flex;
-    width: 28px;
-    height: 24px;
-    position: absolute;
-    left: 0;
-    top: -40%;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-    .buttonsToMove{
-        display: inline-flex;
-    }
-    .control-button {
-        cursor: pointer;
-        background: $color-bck-gray-hex;
-        color: $color-bck-gray-hex;
-        transition: color .3s;
-        height: 24px;
-        width: 24px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 2px;
-        em {
-            font-size: 1.15em;
-            color: $color-withe-hex;
-            transition: color .3s;
-        }
-    }
-    .control-button:hover{
-        color: $color-withe-hex;
-        box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
-        em {
-            color: $color-red-hex;
-        }
-        &.delete{
-            em {
-                color: $color-red-hex;
-            }
-        }
-    }
-}
 
 /** box-textarea **/
 cds-textarea.text-editable-div ::ng-deep{
     display: block;
     margin-left: 30px;
-    width: calc(100% - 66px);
-    // margin-left: 20px;
+    margin-right: 30px;
+    // width: calc(100% - 66px);
     textarea {
         line-height: 20px !important; 
-        width: calc(100% - 20px) !important;
+        // width: calc(100% - 20px) !important;
         font-size: 0.9em !important;
     }
 }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.ts
index 0e8ed49a..d7e060ac 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-image/cds-action-reply-image.component.ts
@@ -43,11 +43,12 @@ export class CdsActionReplyImageComponent implements OnInit {
 
   //Filter //
   canShowFilter: boolean = true;
+  filterConditionExist: boolean = false;
   booleanOperators=[ { type: 'AND', operator: 'AND'},{ type: 'OR', operator: 'OR'},]
   
   // Buttons //
   buttons: Array<Button>;
-
+  TYPE_BUTTON = TYPE_BUTTON;
   private logger: LoggerService = LoggerInstance.getInstance();
   
   constructor( 
@@ -75,6 +76,10 @@ export class CdsActionReplyImageComponent implements OnInit {
     // this.buttons = this.response?.attributes?.attachment?.buttons;
     this.buttons = this.intentService.patchButtons(this.buttons, this.idAction);
     this.idIntent = this.idAction.split('/')[0];
+
+    if(this.response && this.response._tdJSONCondition && this.response._tdJSONCondition.conditions.length > 0){
+      this.filterConditionExist = true
+    }
   }
 
 
@@ -167,6 +172,7 @@ export class CdsActionReplyImageComponent implements OnInit {
   /** onChangeExpression */
   onChangeExpression(expression: Expression){
     this.response._tdJSONCondition = expression;
+    this.filterConditionExist = expression && expression.conditions.length > 0? true : false;
     this.changeActionReply.emit();
   }
   
@@ -204,14 +210,21 @@ export class CdsActionReplyImageComponent implements OnInit {
     this.openButtonPanel.emit(button);
   }
 
-  /** onCreateNewButton */
-  onCreateNewButton(){
-    this.createNewButton.emit(this.index);
-  }
-
-  /** onDeleteButton */
-  onDeleteButton(index: number){
-    this.deleteButton.emit({index: index, buttons: this.buttons});
+  /** onButtonControl */
+  onButtonControl(action: string, index: number ){
+    switch(action){
+
+      case 'delete': /** onDeleteButton */
+        this.deleteButton.emit({index: index, buttons: this.buttons});
+        break;
+      case 'moveLeft':
+        break;
+      case 'moveRight':
+        break;
+      case 'new': /** onCreateNewButton */
+        this.createNewButton.emit(this.index);
+        break;
+    }
   }
 
   /** dropButtons */
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.html
index e99ff070..9665ca86 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.html
@@ -24,7 +24,13 @@
             (clickDelayTime)="onClickDelayTime($event)">
         </appdashboard-delay-slider>
     </div>
-    <div class="filter-wrapper" *ngIf="canShowFilter || response._tdJSONCondition?.conditions?.length > 0">
+    <!-- ||  -->
+    <div class="add-filter-btn" *ngIf="canShowFilter && filterConditionExist">
+        <span class="material-icons-outlined">filter_alt</span>
+        Filter
+    </div>
+    <div class="filter-wrapper" *ngIf="canShowFilter"
+        [ngStyle]="{width: filterConditionExist? '100%': 'auto'}">
         <appdashboard-filter
             [expression]="response._tdJSONCondition"
             [booleanOperators]="booleanOperators"
@@ -57,15 +63,17 @@
 
         <div class="url-wrp">
             <span class="control-label">{{ 'url' | translate }}:</span>
-            <cds-textarea id="url"
-                class="text-editable-div"
-                [text]="metadata.src" 
-                [minRow]="1" [maxRow]="1"
-                popoverVerticalAlign="above"
-                [emojiPikerBtn]="false"
-                [textLimitBtn]="false"
-                (changeTextarea)="onChangeTextarea($event)">
+            <div class="text-editor-wrapper">
+                <cds-textarea id="url"
+                    class="text-editable-div"
+                    [text]="metadata.src" 
+                    [minRow]="1" [maxRow]="1"
+                    popoverVerticalAlign="above"
+                    [emojiPikerBtn]="false"
+                    [textLimitBtn]="false"
+                    (changeTextarea)="onChangeTextarea($event)">
             </cds-textarea>
+            </div>
         </div>
 
         <div class="url-wrp toogle">
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.scss
index 407ae507..786b4731 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.scss
@@ -4,10 +4,10 @@
 .extensions-response {
     font-size: $font-size-base;
     position: relative;
-    width: 100%;
+    width: calc(100% - 6px);
     height: auto;
-    margin: 27px 0px 0px 0px;
-    padding: 0px 33px;
+    margin: 27px 0px 5px 0px;
+    padding: 0px 30px;
     display: flex;
     flex-wrap: wrap;
     row-gap: 5px;
@@ -54,7 +54,6 @@
         .control-label{
             margin: 0px 10px;
             font-size: 0.8em;
-            color: $color-bck-gray-hex;
 
         }
 
@@ -137,20 +136,20 @@
         &.delete{
             height: 24px;
             width: 24px;
-            background: $color-bck-gray-hex;
+            background: $blu-light-02;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             em {
                 font-size: 1.15em;
-                color: $color-withe-hex;
+                color: $blu;
                 transition: color .3s;
             }
         }
     }
     .control-button:hover{
-        color: $color-withe-hex;
+        color: $blu-light-02;
         &.delete{
             box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
             em {
@@ -172,30 +171,6 @@
     cursor: grab;
 }
 
-/** editor-utils **/
-.editor-utils {
-    position: relative;
-    margin: -20px 50px 0px 0px;
-    float: right;
-    .num-chars {
-        // background: $color-light-gray-hex;
-        padding: 0px 8px;
-        border-radius: 12px;
-        font-size: 0.8em;
-        // color: $color-text-box-hex;
-        float: right;
-        &.error {
-            background: $color-orange-hex;
-        }
-    }
-    .text-editor-insert-attribute {
-        float: right;
-    }
-    .moji-picker {
-        float: right;
-    }
-}
-
 .url-wrp{
     display: flex;
     flex-direction: column;
@@ -217,7 +192,7 @@
 
 .control-label{
     font-family: 'Poppins','Roboto',Arial,sans-serif;
-    color: #e8eaed;
+    color: $blu;
     text-align: left;
     line-height: 20px;
     font-size: 14px;
@@ -229,16 +204,24 @@
     // margin-bottom: 10px;
 }
 
-
 /** box-textarea **/
+.text-editor-wrapper {
+    font-size: $font-size-base;
+    position: relative;
+    width: 100%;
+    height: auto;
+    margin: 0px; //5px 0 0 0;
+    // padding: 0px 33px;
+}
+
 cds-textarea.text-editable-div ::ng-deep{
     display: block;
     margin-left: 30px;
-    width: calc(100% - 66px);
-    // margin-left: 20px;
+    margin-right: 30px;
+    // width: calc(100% - 66px);
     textarea {
         line-height: 20px !important; 
-        width: calc(100% - 20px) !important;
+        // width: calc(100% - 20px) !important;
         font-size: 0.9em !important;
 
         resize: none !important; 
@@ -258,10 +241,15 @@ mat-button-toggle ::ng-deep{
 }
 
 mat-button-toggle-group {
-    border: none;
+    border: 1px solid $gray-light-02;
     margin-left: 30px;
+    border-radius: 8px;
 }
 mat-button-toggle.mat-button-toggle-checked{
-    background-color: $icon-color;
-    color: white;
+    background-color: $blu;
+    color: $blu-light-02;
+}
+
+mat-button-toggle.mat-button-toggle{
+    color: $blu-light-02;
 }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts
index c5e3d226..da088570 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts
@@ -27,6 +27,7 @@ export class CdsActionReplyRedirectComponent implements OnInit {
   delayTime: number;
   // Filter // 
   canShowFilter: boolean = true;
+  filterConditionExist: boolean = false;
   booleanOperators=[ { type: 'AND', operator: 'AND'},{ type: 'OR', operator: 'OR'},]
   typeActions = TYPE_ACTION;
   metadata: Metadata;
@@ -44,6 +45,11 @@ export class CdsActionReplyRedirectComponent implements OnInit {
     this.delayTime = (this.wait && this.wait.time)? (this.wait.time/1000) : 500;
     try {
       this.metadata = this.response.metadata;
+
+      if(this.response && this.response._tdJSONCondition && this.response._tdJSONCondition.conditions.length > 0){
+        this.filterConditionExist = true
+      }
+
     } catch (error) {
       this.logger.log("error ", error);
     }
@@ -69,6 +75,7 @@ export class CdsActionReplyRedirectComponent implements OnInit {
   /** onChangeExpression */
   onChangeExpression(expression: Expression){
     this.response._tdJSONCondition = expression;
+    this.filterConditionExist = expression && expression.conditions.length > 0? true : false;
     this.changeActionReply.emit();
   }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.html
index c6b0cc50..ecaab8a9 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.html
@@ -23,7 +23,14 @@
             (clickDelayTime)="onClickDelayTime($event)">
         </appdashboard-delay-slider>
     </div>
-    <div class="filter-wrapper" *ngIf="canShowFilter || response._tdJSONCondition?.conditions?.length > 0">
+    
+    <!-- ||  -->
+    <div class="add-filter-btn" *ngIf="canShowFilter && filterConditionExist">
+        <span class="material-icons-outlined">filter_alt</span>
+        Filter
+    </div>
+    <div class="filter-wrapper" *ngIf="canShowFilter"
+        [ngStyle]="{width: filterConditionExist? '100%': 'auto'}">
         <appdashboard-filter
             [expression]="response._tdJSONCondition"
             [booleanOperators]="booleanOperators"
@@ -56,35 +63,23 @@
 
 <div class="buttons-response button-replies" [class.previewMode]="previewMode" cdkDropListOrientation="vertical" cdkDropList (cdkDropListDropped)="dropButtons($event)" >
     
-    <div *ngFor="let button of buttons; let i = index;" class="content-botton-reply" cdkDragBoundary=".button-replies" cdkDrag> 
-        <!-- tpl-drop-down2 single-btn-reply2 -->
-        <div class="button-reply custom-placeholder" *cdkDragPlaceholder>
-            <div class="button-reply-text">
-                {{button.value}}
-            </div>
-        </div>
-
-        <div class="button-reply" cdkDragHandle>
-            <div class="button-reply-text single-btn-reply"
-                (click)="$event.stopPropagation(); onOpenButtonPanel(button)">
-                {{button.value}}
-            </div>
-            <div class="button-controls">
-                <!-- <div class="buttonsToMove">
-                    <div class="control-button" (click)="onMoveLeftButton(i)">
-                        <em class="material-icons">chevron_left</em>
-                    </div> 
-                    <div class="control-button" (click)="onMoveRightButton(i)">
-                        <em class="material-icons">chevron_right</em>
-                    </div>
-                </div> -->
-                <div class="control-button delete" (click)="$event.stopPropagation(); onDeleteButton(i)">
-                    <em class="material-icons">delete</em>
-                </div>
-            </div>
-        </div>
+    <div *ngFor="let button of buttons; let i = index;" cdkDragBoundary=".button-replies" cdkDrag style="position: relative;"> 
+        
+        <!-- DRAG PLACEHOLDER -->
+        <cds-action-reply-button class="custom-placeholder" *cdkDragPlaceholder
+            (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+            [button]="button"
+            [previewMode]="previewMode">
+        </cds-action-reply-button>
+        
+        <cds-action-reply-button [class.connected]='button.__isConnected' cdkDragHandle
+            (click)="$event.stopPropagation(); onOpenButtonPanel(button)"
+            [button]="button"
+            [previewMode]="previewMode"
+            (onButtonControl)="onButtonControl($event, i)">
+        </cds-action-reply-button>
 
-        <cds-connector *ngIf="previewMode"
+        <cds-connector *ngIf="previewMode && button.type !== TYPE_BUTTON.URL"
             class="button-connector"
             cdkDragDisabled
             [idConnector]="button.__idConnector"
@@ -93,7 +88,7 @@
 
     </div>
 
-    <div class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onCreateNewButton()">
+    <div class="button-reply-add single-btn-reply" (click)="$event.stopPropagation();onButtonControl('new', index)">
     + Add button
     </div>
 </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.scss
index 19adc93b..d74aaf97 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.scss
@@ -12,10 +12,10 @@
 .extensions-response {
     font-size: $font-size-base;
     position: relative;
-    width: 100%;
+    width: calc(100% - 6px);
     height: auto;
-    margin: 27px 0px 0px 0px;
-    padding: 0px 33px;
+    margin: 27px 0px 5px 0px;
+    padding: 0px 30px;
     display: flex;
     flex-wrap: wrap;
     row-gap: 5px;
@@ -38,9 +38,39 @@
         z-index: 1;
     }
 
+    .add-filter-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 0px 9px;
+        height: 26px;
+        font-size: .9em;
+        font-weight: 400;
+        border-radius: 13px;
+        transition: all 0.3s ease 0s;
+        background: $blu;
+        color: $blu-light-01;
+    
+        span.material-icons-outlined{
+            font-size: 20px;
+            color: white;
+        }
+    
+        &:hover{
+            opacity: 0.8;
+            cursor: pointer;
+        }
+    }
+
 
 }
 
+appdashboard-delay-slider,
+appdashboard-filter{
+    display: flex;
+}
+
 .extensions-response:hover{
     .response-controls {
         opacity: 1;
@@ -76,6 +106,7 @@
             line-height: 20px;
             font-size: .8em;
             margin: auto;
+            white-space: pre-wrap;
     
             &.no-text{
                 color: rgb(141, 162, 181)
@@ -90,15 +121,11 @@
         flex-wrap: nowrap;
         align-items: flex-end;
         .button-reply-add{
-            color: $color-txt-2-hex;
-            border-color: $color-txt-2-hex;
+            color: $blu-light-02;
+            border-color: $blu-light-02;
         }
     }
 
-    .button-reply{
-        min-width: 200px;
-        padding: 2px 10px;
-    }
 }
 
 /* ./ Preview mode 
@@ -132,20 +159,20 @@
         &.delete{
             height: 24px;
             width: 24px;
-            background: $color-bck-gray-hex;
+            background: $blu-light-02;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             em {
                 font-size: 1.15em;
-                color: $color-withe-hex;
+                color: $blu;
                 transition: color .3s;
             }
         }
     }
     .control-button:hover{
-        color: $color-withe-hex;
+        color: $blu-light-02;
         &.delete{
             box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
             em {
@@ -190,12 +217,6 @@
 }
 
 
-.content-botton-reply {
-    position:relative;
-    height: 26px;
-}
-
-
 
 /** BUTTONS **/
 .buttons-response {
@@ -221,59 +242,13 @@
     align-items: baseline;
 }
 
-.button-reply {
-    // float: right;
-    display: flex;
-    position: relative;
-    min-width: 100px;
-    text-align: center;
-    // margin: 0px 5px 0px; //10px 5px 0;
-    padding: 0px 10px;
-    user-select: none;
-    box-sizing: border-box;
-    outline: none;
-    background: $color-withe-hex;
-    border: 1px solid $color-blue-hex;
-    border-radius: $button-border-radius-base;
-    color: $color-blue-hex;
-    cursor: pointer;
-    font-size: 0.7em;
-    font-weight: 500;
-    line-height: $button-height-base;
-    transition: all .3s;
-    &.custom-placeholder {
-        margin: 10px 5px;
-        background: #dfdfdf;
-        border: dotted 0px #999;
-        height: $button-height-base;
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.custom-placeholder {
+    margin: 10px 5px;
+    background: #dfdfdf;
+    border: dotted 0px #999;
+    height: $button-height-base;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 
-    }
-}
-.button-reply:hover {
-    .button-controls {
-        opacity: 1;
-    }
-}
-
-.button-reply-text {
-    width: 100%;
-    height: 100%;
-    max-width: $button-max-width-base;
-    user-select: none;
-    color: $color-blue-hex;
-    cursor: pointer;
-    font-size: 1em;
-    font-weight: 500;
-    line-height: $button-height-base;
-    text-align: center;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-    overflow: hidden!important;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .button-reply-add {
@@ -281,9 +256,9 @@
     user-select: none;
     box-sizing: border-box;
     outline: none;
-    border: 1px dashed $color-withe-hex;;
+    border: 1px dashed $blu-light-02;
     border-radius: $button-border-radius-base;
-    color: $color-withe-hex;
+    color: $blu-light-02;
     cursor: pointer;
     font-size: 0.7em;
     font-weight: 400;
@@ -298,89 +273,44 @@
     // margin-right: 10px;
 }
 
-.button-controls {
-    justify-content: space-between;
-    display: inline-flex;
-    width: 28px;
-    height: 24px;
-    position: absolute;
-    left: 0;
-    top: -40%;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-    .buttonsToMove{
-        display: inline-flex;
-    }
-    .control-button {
-        cursor: pointer;
-        background: $color-bck-gray-hex;
-        color: $color-bck-gray-hex;
-        transition: color .3s;
-        height: 24px;
-        width: 24px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 2px;
-        em {
-            font-size: 1.15em;
-            color: $color-withe-hex;
-            transition: color .3s;
-        }
-    }
-    .control-button:hover{
-        color: $color-withe-hex;
-        box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
-        em {
-            color: $color-red-hex;
-        }
-        &.delete{
-            em {
-                color: $color-red-hex;
-            }
-        }
-    }
-}
-
 
 /** box-textarea **/
 cds-textarea.text-editable-div ::ng-deep{
     display: block;
     margin-left: 30px;
-    width: calc(100% - 66px);
-    // margin-left: 20px;
+    margin-right: 30px;
+    // width: calc(100% - 66px);
     textarea {
         line-height: 20px !important; 
-        width: calc(100% - 20px) !important;
+        // width: calc(100% - 20px) !important;
         font-size: 0.9em !important;
     }
 }
 
 /** TEXT AREA **/
-mat-form-field.mat-focused ::ng-deep {
-    .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            .mat-form-field-infix {
-                textarea {
-                    border: 1px solid $color-blue-hex!important;
-                    outline: 1px solid $color-blue-hex!important;
-                    transition: border .3s;
-                }
-            }
-        }
-    }
-}
-mat-form-field.box-textarea ::ng-deep {
-    .mat-form-field-wrapper {
-        padding-bottom:0;
-        .mat-form-field-flex {
-            border-radius: 4px 4px 0 0;
-            padding: 0 0.75em 0 0.75em;
-            margin: 0;
-        }
-    }
-    .mat-form-field-underline {
-        display: none;
-    }    
-}
\ No newline at end of file
+// mat-form-field.mat-focused ::ng-deep {
+//     .mat-form-field-wrapper {
+//         .mat-form-field-flex {
+//             .mat-form-field-infix {
+//                 textarea {
+//                     border: 1px solid $color-blue-hex!important;
+//                     outline: 1px solid $color-blue-hex!important;
+//                     transition: border .3s;
+//                 }
+//             }
+//         }
+//     }
+// }
+// mat-form-field.box-textarea ::ng-deep {
+//     .mat-form-field-wrapper {
+//         padding-bottom:0;
+//         .mat-form-field-flex {
+//             border-radius: 4px 4px 0 0;
+//             padding: 0 0.75em 0 0.75em;
+//             margin: 0;
+//         }
+//     }
+//     .mat-form-field-underline {
+//         display: none;
+//     }    
+// }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts
index 1203c5ca..59db9894 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts
@@ -38,8 +38,10 @@ export class CdsActionReplyTextComponent implements OnInit {
   delayTime: number;
   // Filter // 
   canShowFilter: boolean = true;
+  filterConditionExist: boolean = false;
   booleanOperators = [ { type: 'AND', operator: 'AND'},{ type: 'OR', operator: 'OR'},];
   // Buttons //
+  TYPE_BUTTON = TYPE_BUTTON;
   buttons: Array<Button>;
 
 
@@ -71,6 +73,10 @@ export class CdsActionReplyTextComponent implements OnInit {
     // this.buttons = this.response?.attributes?.attachment?.buttons;
     this.buttons = this.intentService.patchButtons(this.buttons, this.idAction);
     this.idIntent = this.idAction.split('/')[0];
+    
+    if(this.response && this.response._tdJSONCondition && this.response._tdJSONCondition.conditions.length > 0){
+      this.filterConditionExist = true
+    }
   }
 
   private checkButtons(){
@@ -163,6 +169,7 @@ export class CdsActionReplyTextComponent implements OnInit {
   /** onChangeExpression */
   onChangeExpression(expression: Expression){
     this.response._tdJSONCondition = expression;
+    this.filterConditionExist = expression && expression.conditions.length > 0? true : false;
     this.changeActionReply.emit();
   }
 
@@ -199,14 +206,20 @@ export class CdsActionReplyTextComponent implements OnInit {
     this.openButtonPanel.emit(button);
   }
 
-  /** onCreateNewButton */
-  onCreateNewButton(){
-    this.createNewButton.emit(this.index);
-  }
-
-  /** onDeleteButton */
-  onDeleteButton(index: number){
-    this.deleteButton.emit({index: index, buttons: this.buttons});
+  /** onButtonControl */
+  onButtonControl(action: string, index: number ){
+    switch(action){
+      case 'delete': /** onDeleteButton */
+        this.deleteButton.emit({index: index, buttons: this.buttons});
+        break;
+      case 'moveLeft':
+        break;
+      case 'moveRight':
+        break;
+      case 'new': /** onCreateNewButton */
+        this.createNewButton.emit(this.index);
+        break;
+    }
   }
 
   /** dropButtons */
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.html
index 5edd2886..a87bb0cc 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.html
@@ -1,28 +1,31 @@
 <div data-adding-allowed="true" class="add-responses">
     <div class="add-response" (click)="addElement(TypeMessage.TEXT)"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{'Text' | translate}}" #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
-        <i class="material-icons">text_fields</i>
+        <img class="active-icon" src="assets/images/action-reply-types/text.svg"/>
         <!-- <span>{{'Text' | translate}}</span> -->
     </div>
 
     <div class="add-response" (click)="addElement(TypeMessage.IMAGE)"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{'Image' | translate}}" #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
-        <i class="material-icons">image</i>
+        <img class="active-icon" src="assets/images/action-reply-types/image.svg"/>
         <!-- <span>{{'Image' | translate}}</span> -->
     </div>
     <div class="add-response" (click)="addElement(TypeMessage.FRAME)"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{'Frame' | translate}}" #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
-        <i class="material-icons">play_circle</i>
+        <!-- <i class="material-icons">play_circle</i> -->
+        <img class="active-icon" src="assets/images/action-reply-types/file.svg"/>
         <!-- <span>{{'Frame' | translate}}</span> -->
     </div>
     <div data-add-response-type="Type.GALLERY" class="add-response" (click)="addElement(TypeMessage.GALLERY)"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{'Gallery' | translate}}" #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
-        <i class="material-icons">view_carousel</i>
+        <!-- <i class="material-icons">view_carousel</i> -->
+        <img class="active-icon" src="assets/images/action-reply-types/gallery.svg"/>
         <!-- <span>{{'Gallery' | translate}}</span> -->
     </div>
     <div data-add-response-type="Type.REDIRECT" class="add-response" (click)="addElement(TypeMessage.REDIRECT)"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{'Redirect' | translate}}" #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
-        <i class="material-icons">launch</i>
+        <!-- <i class="material-icons">launch</i> -->
+        <img class="active-icon" src="assets/images/action-reply-types/redirect.svg"/>
         <!-- <span>{{'Redirect' | translate}}</span> -->
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.scss
index a6421b6e..3797e024 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-tools/cds-action-reply-tools.component.scss
@@ -1,7 +1,7 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
 .add-responses {
-    grid-gap: 5px;
+    // grid-gap: 5px;
     // display: grid;+
     display: flex;
     float: right;
@@ -11,29 +11,19 @@
         box-sizing: border-box;
         outline: none;
         margin: 0;
-        padding: 0;
-        i {
-
-            align-items: center;
-            border-radius: 4px;
-            display: flex;
-            width: 100%;
-            padding: 3px;
-            justify-content: center;
-            font-size: 1em;
-            background: $color-withe-hex;
-            color: $color-bck-gray-hex;
-            border: 1px solid $color-light-gray-hex;
-            &:hover {
-                outline: 1px solid $action-color-selected!important;
-                border: 1px solid $action-color-selected!important;
-            }
+        padding: 3px 6px;
+        display: flex;
+        
+        &:not(:first-child){
+            border-left: 1px solid white;
         }
-        span {
-            color:$color-bck-gray-hex;
-            font-size: 10px;
-            font-weight: 400;
-            line-height: normal;
+        
+        img{
+            width: 16px;
+            &:hover{
+                filter: brightness(0) saturate(100%) invert(83%) sepia(87%) saturate(3891%) hue-rotate(177deg) brightness(92%) contrast(89%);
+            }
         }
+       
     }
 }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.html
index 48afecab..dc2efad4 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.html
@@ -15,7 +15,7 @@
 
     <div class="text-editor-wrapper">
         <div class="field-box">
-            <label class="title-label">Delay Time: {{delayTime}}s</label>
+            <label class="title-label">Delay Time: <b>{{delayTime}}s</b></label>
             <div class="action-wait-content">
 
                 <!-- tickInterval="1000" -->
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.scss
index 216f1eb4..4f488bf6 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-wait/cds-action-wait.component.scss
@@ -1,5 +1,9 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+
+$background-color: $blu-light-01;
+$text-color: $blu;
+
 .content {
     //padding: 10px 30px;
     padding: 20px 0px;
@@ -25,8 +29,8 @@
 }
 
 .title-label {
-    color: white;
-    font-size: 18px;
+    color: $blu;
+    font-size: 16px;
     margin-bottom: 0px;
     // margin-left: 30px;
 }
@@ -36,7 +40,7 @@
 }
 .action-wait-slider {
     align-items: center;
-    background: #647283;
+    background: $background-color;
     border-radius: 13px;
     display: inline-flex;
     position: relative;
@@ -45,7 +49,7 @@
     width: 100%;
     text-align: center;
     transition: width 0.3s ease-in;
-    font-size: 14px;
+    font-size: $font-size-base;
 }
 
 .action-wait-slider > mat-slider {
@@ -54,7 +58,7 @@
 }
 
 .action-wait-range {
-    color: #e8eaed;
+    color: $text-color;
     font-size: 11px;
     font-weight: 400;
     padding-left: 6px;
@@ -68,14 +72,16 @@
 
 .action-wait-slider ::ng-deep{
     .mat-accent .mat-slider-track-fill {
-        background-color: $icon-color !important;
+        background-color: $text-color !important;
     }
     .mat-slider-thumb-label {
-        background-color: $icon-color !important;
-
+        background-color: $text-color !important;
+    }
+    .mat-slider-thumb-label-text{
+        color: $background-color !important;
     }
     .mat-slider-thumb {
-        background-color: $icon-color !important;
+        background-color: $text-color !important;
     }
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.html
index c8f4c93e..9ff0637a 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.html
@@ -101,7 +101,7 @@
             (changeButtonSelect)="onChangeButtonSelect($event)">
         </cds-radio-buttons>
 
-        <cds-textarea id="body"
+        <cds-textarea id="body" *ngIf="action?.bodyType !== 'none'"
             [ngClass]="{'jsonError': !jsonIsValid}"
             class = "text-editable-div"
             [text]="body"
@@ -113,9 +113,11 @@
             (changeTextarea)="onChangeTextarea($event, 'body')">
         </cds-textarea>
 
+        <div class="cds-web-request-row-body center" *ngIf="action?.bodyType === 'none'">
+            <span>This request does not have a body</span>
+        </div>
 
-        <div class="cds-web-request-row-error center" 
-            [ngClass]="{'json-error-yes': !jsonIsValid}">
+        <div class="cds-web-request-row-body center json-error-yes" *ngIf="!jsonIsValid">
             <span>{{errorMessage}}</span>
         </div>
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
index 3e8a408b..9471c390 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
@@ -154,16 +154,10 @@
     }
 }
 
-.cds-web-request-row-error {
+.cds-web-request-row-body {
     display: flex;
     font-size: 0.8em;
     line-height: normal;
-    border-radius: 4px;
-    color: rgb(209, 47, 25);
-    background: rgb(251, 227, 228);
-    border-color: rgb(251, 194, 196);
-    opacity: 1;
-    height: 0px;
     padding: 0px;
     margin: 0px;
     span{
@@ -181,9 +175,11 @@
     &.json-error-yes {
         transition-delay: 0s;
         transition: all 0.3s;
-        height: auto;
         padding: 10px;
         margin: 10px 0px;
+        color: rgb(209, 47, 25);
+        background: rgb(251, 227, 228);
+        border-color: rgb(251, 194, 196);
     } 
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.ts
index 1470568d..47c0ab98 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.ts
@@ -136,9 +136,9 @@ export class CdsActionWebRequestV2Component implements OnInit {
       return { label: key, value: key }
     })
     this.jsonHeader = this.action.headersString;
-    this.jsonIsValid = this.isValidJson(this.action.body);
-    if(this.jsonIsValid && this.action.body){
-      this.body = this.action.body;
+    this.jsonIsValid = this.isValidJson(this.action.jsonBody);
+    if(this.jsonIsValid && this.action.jsonBody){
+      this.body = this.action.jsonBody;
       this.body = this.formatJSON(this.body, "\t");
     }
     this.assignments = this.action.assignments
@@ -194,22 +194,23 @@ export class CdsActionWebRequestV2Component implements OnInit {
 
   onChangeButtonSelect(event: {label: string, value: string, disabled: boolean, checked: boolean}){
     this.bodyOptions.forEach(el => { el.value ===event.value? el.checked= true: el.checked = false })
+    this.action.bodyType= event.value
     switch (event.value){
       case 'none':
-        this.body = null
+        this.body = JSON.stringify({})
         break;
       case 'json':
-        this.body = JSON.stringify({})
+        this.body = this.action.jsonBody
     }
-    console.log('onChangeButtonSelect-->', event, this.body)
+    console.log('onChangeButtonSelect-->', event, this.body, this.action)
   }
 
   onChangeTextarea(e, type: 'url' | 'body'){
-   console.log('onChangeTextarea:', e, type );
+    console.log('onChangeTextarea:', e, type );
     switch(type){
       case 'body': {
         this.body = e;
-        this.action.body = this.body;
+        this.action.jsonBody = this.body;
         setTimeout(() => {
           this.jsonIsValid = this.isValidJson(this.body);
           this.updateAndSaveAction.emit()
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.html
index ad941062..cf1825ca 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.html
@@ -11,7 +11,7 @@ <h4>
                 </span>
             </span>
             <input [(ngModel)]="newQuestion" (keydown.enter)='onAddQuestion()' type="text"
-                class="cds-add-question-input" aria-label="question"
+                class="cds-question-input" aria-label="question"
                 placeholder="Add user expression and press enter or click ADD">
             <span class="input-group-addon cds-group-addon-question-right" (click)="onAddQuestion()"
                 [ngClass]="{'add-question-btn-disabled': !newQuestion || newQuestion?.length === 0}">
@@ -34,7 +34,7 @@ <h4>
             <input [value]="q" (input)="onChangeText($event.target.value, index)" type="text" class="cds-question-input"
                 aria-label="question">
             <span class="input-group-addon cds-group-addon-right" (click)="onRemoveQuestion(index)">
-                <span class="material-icons cds-group-addon-right-icon">
+                <span class="material-icons-outlined cds-group-addon-right-icon">
                     delete
                 </span>
             </span>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
index bd973572..73327217 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
@@ -2,190 +2,9 @@
 
 h4 {
     font-size: 16px;
-    color: #e8eaed;
+    color: $blu;
 }
 
-.text-editor-wrapper:hover {
-    .text-editor {
-        .response-controls {
-            opacity: 1;
-        }
-    }
-}
-
-.text-editor-wrapper {
-    font-size: $font-size-base;
-    position: relative;
-    width: 100%;
-    height: auto;
-    margin: 0;
-    padding: 50px 0px 20px 0px;
-
-    .text-editor {
-        position: relative;
-        margin: 0;
-        padding: 0;
-
-        .response-controls {
-            position: absolute;
-            top: 10px;
-            left: 0px;
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
-
-            .control-button {
-                cursor: pointer;
-                color: $color-bck-gray-hex;
-                transition: color 0.3s;
-                height: 20px;
-
-                &.delete {
-                    height: 24px;
-                    width: 24px;
-                    background: $color-bck-gray-hex;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    em {
-                        font-size: 1.15em;
-                        color: $color-withe-hex;
-                        transition: color 0.3s;
-                    }
-                }
-            }
-
-            .control-button:hover {
-                color: $color-withe-hex;
-
-                &.delete {
-                    box-shadow: 0 2px 6px 0 rgb(255 255 255 / 15%);
-
-                    em {
-                        color: $color-red-hex;
-                    }
-                }
-            }
-        }
-
-        .box-textarea {
-            width: calc(100% - 40px);
-            margin-left: 20px;
-
-            input {
-                border-radius: 8px;
-                background: $color-withe-hex;
-                border: 1px solid $color-withe-hex;
-                overflow-x: hidden;
-                overflow-y: auto;
-                width: calc(100% - 2.5em);
-                padding: 5px 5px;
-                color: $color-text-dark-hex;
-                font-size: 1.15em;
-                line-height: 25px;
-                resize: vertical;
-
-                &.customPrefix {
-                    padding-left: 20px;
-                    width: calc(100% - 2.5em - 20px);
-                }
-            }
-
-            .input-prefix {
-                position: absolute;
-                top: 14px;
-                left: 8px;
-                color: #7d7d7d;
-                font-weight: 800;
-            }
-
-            .input-suffix {
-                position: absolute;
-                top: 14px;
-                right: 8px;
-                color: #7d7d7d;
-                font-weight: 800;
-                margin-right: 40px;
-            }
-        }
-
-        .text-editor-drop {
-            position: absolute;
-            display: inline-flex;
-            margin: 0;
-            left: 0;
-            top: -30px;
-            color: #dcdcdc;
-            cursor: grab;
-        }
-    }
-
-    .editor-utils {
-        position: relative;
-        margin: -20px 50px 0px 0px;
-        float: right;
-
-        .num-chars {
-            background: $color-light-gray-hex;
-            padding: 0px 8px;
-            border-radius: 12px;
-            font-size: 0.8em;
-            color: $color-text-box-hex;
-            float: right;
-
-            &.error {
-                background: $color-orange-hex;
-            }
-        }
-
-        .text-editor-insert-attribute {
-            float: right;
-        }
-
-        .moji-picker {
-            float: right;
-        }
-    }
-}
-
-.text-editor-wrapper:hover .text-editor {
-    .response-controls {
-        opacity: 1;
-    }
-}
-
-/** TEXT AREA **/
-mat-form-field.mat-focused ::ng-deep {
-    .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            .mat-form-field-infix {
-                input {
-                    border: 1px solid $icon-color !important;
-                    outline: 1px solid $icon-color !important;
-                    transition: border 0.3s;
-                }
-            }
-        }
-    }
-}
-
-mat-form-field.box-textarea ::ng-deep {
-    .mat-form-field-wrapper {
-        padding-bottom: 0;
-
-        .mat-form-field-flex {
-            border-radius: 4px 4px 0 0;
-            padding: 0 0.75em 0 0.75em;
-            margin: 0;
-            background: transparent;
-        }
-    }
-
-    .mat-form-field-underline {
-        display: none;
-    }
-}
 
 .cds-questions-main-content {
     padding: 25px;
@@ -203,39 +22,42 @@ mat-form-field.box-textarea ::ng-deep {
 .cds-input-group {
     margin-bottom: 8px;
     flex-wrap: nowrap;
+    border: 1px solid $gray-light-02;
+    border-radius: 4px;
 }
 
-.cds-add-question-input {
-    border: 1px solid #fff;
-    height: 47px;
-    width: 100%;
-    // border-top-right-radius: 4px;
-    // border-bottom-right-radius: 4px;
-}
+// .cds-add-question-input {
+//     border: none;
+//     height: 47px;
+//     width: 100%;
+//     color: $blu;
+//     // border-top-right-radius: 4px;
+//     // border-bottom-right-radius: 4px;
+// }
 
 .cds-question-input {
-    border: 1px solid #fff;
-    height: 47px;
+    border: none;
+    // height: 47px;
     width: 100%;
     font-weight: 400;
+    color: $blu;
+    font-size: 12px;
+    padding: 4px 0px;
 }
 
 .cds-group-addon-left {
-    background: #fff;
-    height: 47px;
+    // height: 47px;
     border-radius: 0;
     padding-left: 6px;
     padding-right: 6px;
     padding-top: 0px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
     display: flex;
     align-items: center;
 }
 
 .cds-group-addon-question-right {
-    background: #006cff;
-    height: 47px;
+    background: $blu;
+    // height: 47px;
     border-radius: 0;
     // padding-left: 6px;
     // padding-right: 6px;
@@ -267,7 +89,6 @@ mat-form-field.box-textarea ::ng-deep {
 
 .cds-group-addon-right {
     background: #fff;
-    height: 47px;
     border-radius: 0;
     padding-left: 6px;
     padding-right: 6px;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/delay-slider/delay-slider.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/delay-slider/delay-slider.component.scss
index 17ecda4b..312281c6 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/delay-slider/delay-slider.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/delay-slider/delay-slider.component.scss
@@ -1,9 +1,11 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+$background-color: $blu-light-01;
+$text-color: $blu;
 
 .delay {
     align-items: center;
-    background: $color-bck-gray-hex;
+    background: $background-color;
     border-radius: 13px;
     display: inline-flex;
     position: relative;
@@ -13,11 +15,16 @@
     text-align: center;
     transition: width .3s ease-in;
     font-size: $font-size-base;
+
+    &:hover{
+        opacity: 0.8;
+        cursor: pointer;
+    }
     // margin-top: 30px;
     .delay-current{
         display: contents;
         width: auto;
-        color: $color-light-gray-hex;
+        color: $text-color;
         cursor: pointer;
         font-size: 0.8em;
         font-weight: 400;
@@ -32,7 +39,7 @@
     }
     .delay-range {
         display: inline-flex;
-        color: $color-withe-hex;
+        color: $text-color;
         font-size: 0.8em;
         font-weight: 600;
     }
@@ -51,14 +58,14 @@
 
 .delay-button {
     padding-right: 4px;
-    color: $icon-color;
+    color: $text-color;
     cursor: pointer;
 }
 
 
 
 .delay-icon {
-    color: $color-withe-hex;;
+    color: $text-color;
     font-size: 1em;
     font-weight: 700;
     margin-right: 9px;
@@ -84,13 +91,17 @@ mat-slider {
 
 .vue-slider ::ng-deep{
     .mat-accent .mat-slider-track-fill {
-        background-color: $icon-color !important;
+        background-color: $text-color !important;
     }
     .mat-slider-thumb-label {
-        background-color: $icon-color !important;
-
+        background-color: $text-color !important;
+        
+    }
+    .mat-slider-thumb-label-text{
+        color: $background-color !important;
     }
     .mat-slider-thumb {
-        background-color: $icon-color !important;
+        background-color: $text-color !important;
     }
+
 }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.scss
index 11706419..e6211d12 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.scss
@@ -32,6 +32,12 @@
     width: auto;
     padding: 8px;
     display: inline-block;
+    background-color: $blu-02;
+
+    &:hover{
+        background-color: $blu;
+        box-shadow: 0 14px 26px -12px rgba($blu, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba($blu, 0.2);
+    }
 }
 
 .form-group {
@@ -49,7 +55,7 @@
     }
     input {
         border-radius: 8px;
-        background-color: aliceblue;
+        background-color: $blu-light-03;
         line-height: normal;
         padding: 0 10px;
         height: 30px;
@@ -73,7 +79,7 @@
 
 .control-label{
     font-family: 'Poppins','Roboto',Arial,sans-serif;
-    color: #e8eaed;
+    color: $gray-light-01;
     text-align: left;
     line-height: 20px;
     font-size: 14px;
@@ -96,7 +102,7 @@
         display: block;
         width: 100%;
         margin: 0;
-        background: #e8eaed;
+        background: $blu-light-03;
         border: none;
         padding: 5px;
         border-radius: 4px;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
index fcaa8c81..fc4b2f88 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
@@ -6,7 +6,7 @@
     (dragleave)="drag($event)">    
 
     <label class="inputUploadImage" [for]="'uploadImage_'+ uuid">
-        <div class="image"><img src="assets/images/icons/add_image.svg"></div>
+        <div class="image"><img class="base-icon-color" src="assets/images/icons/add_image.svg"></div>
         <input style="display:none" type="file" [id]="'uploadImage_'+ uuid" accept=".jpg, .JPEG, .png, .gif, .webp" (change)="detectFiles($event)" />
     </label>
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
index a4310043..8e88427d 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
@@ -5,7 +5,7 @@
 }
 
 .inputUploadImage {
-    color: white;
+    color: $blu-light-02;;
     cursor: pointer;
     div.image{
         width: 40px;
@@ -21,16 +21,16 @@
     display: block;
     width: 100%;
     height: 100%;
-    color: white;
+    color: $blu-light-02;;
     text-wrap: wrap;
-    
+    font-weight: 300;
     span {
         user-select: none;
     }
 }
 
 .dropUploadImage {
-    border: 2px dashed #eeeef1;
+    border: 2px dashed $blu-light-02;
     border-radius: 6px;
     display: flex;
     flex-direction: column;
@@ -38,11 +38,14 @@
     justify-content: center;
     padding: 30px 20px;
     text-align: center;
-    margin: 15px;
+    // margin: 15px;
     position: relative;
-    width: calc(100% - 30px);
-    height: calc(100% - 30px);
+    // width: calc(100% - 30px);
+    // height: calc(100% - 30px);
     min-height: 210px;
+    &:hover{
+        opacity: 0.5;
+    }
 }
 
 #imageUploaded {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.html
index 6f3db2ec..575ef07a 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.html
@@ -22,14 +22,14 @@
         <div *ngIf="showUtils === true" unselectable="on" tabIndex="-1" class="editor-utils">
 
             <div *ngIf="setAttributeBtn" class="text-editor-insert-attribute" [satPopoverAnchor]="addVariable" (click)="addVariable.toggle(); openSetAttributePopover();">
-                <span class="material-icons " style="font-size: 16px;">
+                <span class="material-icons" style="font-size: 16px;">
                     data_object
                 </span>
             </div>
     
             <div *ngIf="emojiPikerBtn" class="emoji-picker">
                 <div class="emoji-picker-button" aria-expanded="false" [satPopoverAnchor]="emojiPicker" (click)="emojiPicker.toggle();">
-                    <span class="material-icons" style="font-size: 16px;">
+                    <span class="material-icons-outlined" style="font-size: 16px;">
                         emoji_emotions
                     </span>
                 </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss
index 9c17be1f..5fa856be 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss
@@ -22,8 +22,8 @@ mat-form-field.mat-focused ::ng-deep {
             padding: 0px;
             .mat-form-field-infix {
                 textarea {
-                    border: 1px solid rgb(242 205 111) !important;
-                    outline: 0px solid rgb(242 205 111) !important;
+                    border: 1px solid $blu-01 !important;
+                    outline: 0px solid $blu-01 !important;
                     transition: border 0.3s;
                     &.invalid{
                         border: 1px solid red !important;
@@ -64,10 +64,10 @@ mat-form-field.box-textarea ::ng-deep {
     textarea {
         border-radius: 8px;
         background: $color-withe-hex;
-        border: 1px solid $color-withe-hex;
+        border: 1px solid $blu-light-02 !important;
         overflow-x: hidden;
         overflow-y: auto;
-        color: $color-text-dark-hex;
+        color: $gray;
         font-size: 1.15em;
         line-height: 25px;
         resize: vertical;
@@ -99,19 +99,20 @@ mat-form-field.box-textarea ::ng-deep {
         pointer-events: none;
         transition: background-color 0.3s, color 0.3s;
         .num-chars {
-            background: $color-light-gray-hex;
+            background: $blu-light-01;
             flex-shrink: 0;
             padding: 0px 8px;
             border-radius: 10px;
             font-size: 0.8em;
-            color: $color-text-box-hex;
+            color: $blu;
             float: right;
-            line-height: 16px;
+            line-height: 24px;
             font-weight: 700;
             width: 40px;
             text-align: center;
             &.error {
-                background: $color-orange-hex;
+                background: red;
+                color: white;
             }
         }
     }
@@ -130,35 +131,35 @@ mat-form-field.box-textarea ::ng-deep {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-        height: 23px;
+        height: 24px;
+        width: 24px;
         justify-content: center;
-        margin-right: 5px;
-        width: 23px;
-        color: #647283;
+        color: $blu;
+        border: 1px solid $blu-light-02;
         &:hover {
-            background: #006cff;
+            background: $blu;
             color:#fff ;
         }
     }
-    // .emoji-picker {
-    //     .emoji-picker-button {
-    //         align-items: center;
-    //         background: #fff;
-    //         border-radius: 100%;
-    //         box-shadow: 0 1px 3px 0 rgb(0 0 0 / 19%);
-    //         cursor: pointer;
-    //         display: flex;
-    //         height: 23px;
-    //         justify-content: center;
-    //         margin-right: 5px;
-    //         width: 23px;
-    //         color: #647283;
-    //         &:hover {
-    //             background: #006cff;
-    //             color:#fff ;
-    //         }
-    //     }
-    // }
+    .emoji-picker {
+        .emoji-picker-button {
+            align-items: center;
+            background: #fff;
+            border-radius: 100%;
+            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 19%);
+            cursor: pointer;
+            display: flex;
+            height: 24px;
+            width: 24px;
+            justify-content: center;
+            color: $blu;
+            border: 1px solid $blu-light-02;
+            &:hover {
+                background: $blu;
+                color:#fff ;
+            }
+        }
+    }
     
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts
index 5d686888..df4df715 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts
@@ -52,7 +52,7 @@ export class CDSTextareaComponent implements OnInit {
   public isEmojiPickerVisible: boolean = false;
   IS_ON_MOBILE_DEVICE = false;
   emojiPerLine: number = 8;
-  emojiColor: string ="#ac8b2c";
+  emojiColor: string ="#506493";
   emojiiCategories = [ 'recent', 'people', 'nature', 'activity', 'flags'];
 
   private logger: LoggerService = LoggerInstance.getInstance()
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss
index 55458ba6..41de5e60 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss
@@ -5,7 +5,7 @@
 $width-card-tools: 160px;
 $margin-left-card: 30px;
 $margin-top-card: 30px;
-$box-left-width: 250px;
+$box-left-width: 230px;
 $box-left-width-closed: 0px;
 
 
@@ -107,7 +107,8 @@ cds-fulfillment {
     width: $box-left-width;
     max-width: $box-left-width;
     min-width: $box-left-width;
-    background-color: $blu-light-01;
+    background-color: white;
+    border-right: 1px solid $gray-light-02;
     z-index: 10;
     position: relative;
     .panel-intent-list {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
index e36ca440..70a83b51 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
@@ -10,6 +10,8 @@
   --base-border-radius-preview: #{$border-radius-base-preview};
   --base-padding-preview: #{$padding-base-preview};
   --action-selected-color: #{$accent-blue};
+
+  --startIntentMaxWith: 160px;
 }
 
 
@@ -49,6 +51,8 @@
     background-color: unset;
     padding: 0;
     border-radius: unset;
+    max-width: var(--startIntentMaxWith);
+    outline: unset;
   }
 
 
@@ -182,7 +186,7 @@
     box-shadow: #00000052 0 -1px inset;
     background-color: #4b5052;
     border-radius: 22px;
-    max-width: 160px;
+    max-width: var(--startIntentMaxWith);
     right: 0;
     cursor: pointer;
     opacity: 1;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
index ce215524..82e084b2 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
@@ -633,7 +633,6 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges {
     console.log('[CDS-INTENT] onUpdateAndSaveAction:::: ', event, this.intent, this.intent.actions);
     console.log('[CDS-INTENT] onUpdateAndSaveAction:::: intent::: ', this.intent);
     // this.intentService.selectAction(this.intent.intent_id, event);
-
     const response = await this.intentService.updateIntent(this.intent);
     if (response) {
       console.log('updateIntent: ', this.intent);
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.scss
index 522464ac..3ed58ad3 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.scss
@@ -11,11 +11,10 @@ $padding: 10px;
     height: 100%; //auto
     max-height: 100%;
     // border-radius: 16px;
-    // border: 2px solid rgb(178,142,38);
-    // border-left: 2px solid rgb(178,142,38);
     overflow: hidden;
     padding: 0;
-    background-color: #51627e;
+    background-color: white;
+    border-left: 1px solid $gray-light-02;
     // margin: 0 auto 0 auto; // nk
     inset: 0 0 0 200px;
 }
@@ -25,12 +24,12 @@ $padding: 10px;
     top: 0;
     left: 0;
     right: 0;
-    background-color: #51627e;
+    background-color: $blu-light-03;
     z-index: 2;
 }
 .content-panel{
     // height: calc(100% - 73px); // nk
-    height: calc(100% - 100px); // nk
+    // height: calc(100% - 100px); // nk
     // overflow: hidden; // nk
     overflow: hidden auto;
 }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html
index b2646209..705a9529 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html
@@ -21,8 +21,7 @@
                             <p class="intent-display-name truncate">{{intent.intent_display_name}}</p>
                             <div class="icon-list">
                                 <p *ngIf="intent.questions" class="ai-icon icon" style="margin-bottom: 0px">Ai</p>
-                                <span *ngIf="intent.webhook_enabled"
-                                    class="material-icons icon webhook-icon">webhook</span>
+                                <span *ngIf="intent.webhook_enabled" class="material-icons icon webhook-icon">webhook</span>
                                 <span *ngIf="intent.form" class="material-icons icon list-alt-icon">list_alt</span>
                                 <div *ngIf="intent?.actions && intent?.actions?.length > 0" class="actions">
                                     <span class="material-icons icon bolt-icon">bolt</span>
@@ -68,8 +67,8 @@
 
                 <div class="icon-container">
                     <img src="assets/images/icons/block.svg"
-                        class="base-icon-color"
-                        [class.active-icon]="idSelectedIntent === intent.intent_id">
+                        [class.active-icon]="idSelectedIntent === intent.intent_id"
+                        class="base-icon-color">
                 </div>
 
                 <div class="item-box" *ngIf="IS_OPEN">
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss
index 65ae511e..1d6a0f3e 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss
@@ -141,6 +141,10 @@ $icon-color-active: $blu;
     height: 100%;
     align-items: center;
     color: $blu-light-02;
+
+    img.active-icon {
+        filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%);
+    }
 }
 
 .custom-divider {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss
index 3f30f42c..3e78fb45 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss
@@ -8,6 +8,7 @@ cds-header {
   font-size: 21px;
   color: $blu;
   background: white;
+  border-bottom: 1px solid $gray-light-02;
   display: flex;
 }
 
@@ -29,6 +30,7 @@ cds-rules,
 cds-chatbot-details,
 cds-fulfillment {
     width: 100%;
+    overflow-y: scroll;
 }
 
 .is_opened_sidebar {
@@ -39,11 +41,12 @@ cds-fulfillment {
 
 cds-sidebar {
   background-color: $blu-light-01;
-  border-right: 2px solid $blu-light-02;
+  border-right: 1px solid $gray-light-02;
   width: $sidebar-base-width;
   transition: 0.3s;
   display: flex;
   min-width: $sidebar-base-width;
+  overflow-y: hidden;
 }
 
 .cds-content {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.ts
index 2c81c59f..bd6bb208 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.ts
@@ -192,8 +192,11 @@ export class CdsDashboardComponent implements OnInit {
 
   /** Go back to previous page */
   goBack() {
-    this.logger.log('[CDS DSHBRD] goBack ');
-    this.router.navigate(['project/' + this.project._id + '/bots/my-chatbots/all']);
+    let dashbordBaseUrl = this.appConfigService.getConfig().DASHBOARD_BASE_URL + 'dashboard/#/project/'+ this.dashboardService.projectID + '/bots/my-chatbots/all'
+    console.log('[CDS DSHBRD] goBack ', dashbordBaseUrl, this.appConfigService.getConfig().DASHBOARD_BASE_URL);
+    window.open(dashbordBaseUrl, '_self')
+    // this.location.back()
+    // this.router.navigate(['project/' + this.project._id + '/bots/my-chatbots/all']);
     this.hideShowWidget('show');
   }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html
index efdad736..37e4f885 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html
@@ -16,7 +16,7 @@
     <div class="header-go-back"  
         (click)="goToBack()" 
         style="cursor:pointer"
-        matTooltip="Go back my Chatbots" 
+        matTooltip="Go back" 
         matTooltipClass="custom-mat-tooltip"
         matTooltipHideDelay="100"
         matTooltipPosition='below'
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss
index bcb62d1f..15c41cfe 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss
@@ -1,11 +1,6 @@
 @import "./src/assets/sass/cds/_variables.scss";
 @import "./src/assets/sass/cds/styles.scss";
 
-$width-card-tools: 160px;
-$margin-left-card: 30px;
-$margin-top-card: 30px;
-
-
 
 .header-left {
     // border-right: 2px solid #394f5a;
@@ -16,6 +11,7 @@ $margin-top-card: 30px;
     align-items: center;
     transition: 0.3s;
     background-color: $blu;
+    border-right: 1px solid $gray-light-02;
     img {
         width: 30px;
     }
@@ -34,6 +30,8 @@ $margin-top-card: 30px;
     justify-content: space-between;
     width: 100%;
     padding: 0px 10px;
+    box-sizing: border-box;
+
     .right-opts{
         display: flex;
         align-items: center;
diff --git a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
index 619465f5..2d98b2d9 100644
--- a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
+++ b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
@@ -136,6 +136,7 @@ import { CdsActionReplyImageComponent } from './cds-dashboard/cds-canvas/actions
 import { CdsActionReplyFrameComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component';
 import { CdsActionReplyRedirectComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component';
 import { CdsActionReplyGalleryComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component';
+import { CdsActionReplyButtonComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component';
 
 //ACTION ASSIGN-VARIABLE: elements
 import { OperatorComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-assign-variable/operator/operator.component';
@@ -289,6 +290,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
         CdsActionReplyFrameComponent,
         CdsActionReplyRedirectComponent,
         CdsActionReplyGalleryComponent,
+        CdsActionReplyButtonComponent,
         // action REPLY elements: end //
         // action ASSIGN-VARIABLE elements: start //
         OperationComponent,
diff --git a/src/app/chatbot-design-studio/services/intent.service.ts b/src/app/chatbot-design-studio/services/intent.service.ts
index c480e5e5..22591c05 100644
--- a/src/app/chatbot-design-studio/services/intent.service.ts
+++ b/src/app/chatbot-design-studio/services/intent.service.ts
@@ -382,17 +382,18 @@ export class IntentService {
     return new Promise((resolve, reject) => {
       console.log("[INTENT SERVICE]  salva ");
       const that = this;
-      this.faqService.addIntent(
-        id_faq_kb,
-        newIntent.attributes,
-        newIntent.question,
-        newIntent.answer,
-        newIntent.intent_display_name,
-        newIntent.intent_id,
-        newIntent.form,
-        newIntent.actions,
-        newIntent.webhook_enabled
-      ).subscribe((intent:any) => {
+      const intentToAdd = { 
+        'id_faq_kb': id_faq_kb, 
+        'attributes': newIntent.attributes,
+        'question': newIntent.question, 
+        'answer': newIntent.answer, 
+        'intent_display_name': newIntent.intent_display_name,
+        'intent_id': newIntent.intent_id,
+        'form': newIntent.form,
+        'actions': newIntent.actions,
+        'webhook_enabled': newIntent.webhook_enabled
+      };
+      this.faqService.addIntent(intentToAdd).subscribe((intent:any) => {
         console.log("[INTENT SERVICE]  ho salvato in remoto l'intent ", intent.intent_id);
         this.prevListOfIntent = JSON.parse(JSON.stringify(this.listOfIntents));
         resolve(intent);
@@ -439,17 +440,22 @@ export class IntentService {
       } else {
         this.idIntentUpdating = intent.intent_id;
       }
+
+      let intentToUpdate = {
+        '_id': intent.id,
+        'attributes': attributes, 
+        'question': questionIntent, 
+        'answer': answerIntent, 
+        'intent_display_name': displayNameIntent, 
+        'form': formIntent,
+        'actions': actionsIntent,
+        'webhook_enabled': webhookEnabledIntent,
+        "id_faq_kb": intent.id_faq_kb,
+        "intent_id":intent.intent_id
+      };
+
       this.setTimeoutChangeEvent = setTimeout(() => {
-        this.faqService.updateIntent(
-          id,
-          attributes,
-          questionIntent,
-          answerIntent,
-          displayNameIntent,
-          formIntent,
-          actionsIntent,
-          webhookEnabledIntent
-        ).subscribe((intent: Intent) => {
+        this.faqService.updateIntent(intentToUpdate).subscribe((intent: Intent) => {
           console.log('[INTENT-SERVICE] UPDATED INTENT ', intent);
           this.prevListOfIntent = JSON.parse(JSON.stringify(this.listOfIntents));
           resolve(true);
diff --git a/src/app/models/action-model.ts b/src/app/models/action-model.ts
index 7f76025d..9aa383c8 100644
--- a/src/app/models/action-model.ts
+++ b/src/app/models/action-model.ts
@@ -129,7 +129,8 @@ export class ActionWebRequestV2 extends Action {
     method: string;
     url: string;
     headersString: any;
-    body: string;
+    jsonBody: string;
+    bodyType: string;
     assignResultTo: string;
     assignStatusTo: string;
     assignErrorTo: string;
@@ -140,7 +141,8 @@ export class ActionWebRequestV2 extends Action {
         super();
         this.url = '';
         this.headersString = {"Content-Type":"*/*", "Cache-Control":"no-cache", "User-Agent":"TiledeskBotRuntime", "Accept":"*/*"};
-        this.body = null
+        this.jsonBody = null
+        this.bodyType = 'none'
         this.assignStatusTo = '';
         this.assignErrorTo = '';
         this.assignments = {};
@@ -192,6 +194,7 @@ export class ActionIntentConnected extends Action {
 export class ActionEmail extends Action {
     to: string;
     subject: string;
+    replyto: string;
     text: string;
     constructor() {
         super();
diff --git a/src/app/services/faq.service.ts b/src/app/services/faq.service.ts
index 51261c9b..5b3bdd28 100755
--- a/src/app/services/faq.service.ts
+++ b/src/app/services/faq.service.ts
@@ -340,16 +340,10 @@ public _getAllFaqByFaqKbId(id_faq_kb: string): Observable<Intent[]> {
 
   /**
    * CREATE FAQ (POST)
-   * @param id_faq_kb 
-   * @param question 
-   * @param answer 
-   * @param intent_display_name 
-   * @param intent_form
-   * @param intent_reply
-   * @param webhook_enabled 
+   * @param intent 
    * @returns 
    */
-   public addIntent(id_faq_kb: string, attributes: any, question: any, answer: string, intent_display_name: string, intent_id: string, intent_form: any, intent_actions: any, webhook_enabled: boolean) {
+  public addIntent(intent: any) {
     const httpOptions = {
       headers: new HttpHeaders({
         'Content-Type': 'application/json',
@@ -358,54 +352,31 @@ public _getAllFaqByFaqKbId(id_faq_kb: string): Observable<Intent[]> {
     };
     const url = this.FAQ_URL;
     this.logger.log('[FAQ-SERV] ADD FAQ -  PUT URL ', url);
-    const body = { 
-      'id_faq_kb': id_faq_kb, 
-      'attributes': attributes,
-      'question': question, 
-      'answer': answer, 
-      'intent_display_name': intent_display_name, 
-      'intent_id': intent_id,
-      'form': intent_form,
-      'actions': intent_actions,
-      'webhook_enabled': webhook_enabled 
-    };
-    this.logger.log('[FAQ-SERV] ADD FAQ - POST BODY ', body);
-    return this._httpClient.post(url, JSON.stringify(body), httpOptions)
+    this.logger.log('[FAQ-SERV] ADD FAQ - POST BODY ', intent);
+    return this._httpClient.post(url, JSON.stringify(intent), httpOptions)
   }
 
   /**
    * UPDATE FAQ (PUT)
-   * @param id 
-   * @param question 
-   * @param answer 
-   * @param intent_display_name 
-   * @param intent_form 
-   * @param intent_reply 
-   * @param webhook_enabled 
+   * @param intent
    * @returns 
    */
-   public updateIntent(id: string, attributes: any, question: any, answer: string, intent_display_name: string, intent_form: any, intent_actions: any, webhook_enabled: boolean) {
+  public updateIntent(intent: any) {
     const httpOptions = {
       headers: new HttpHeaders({
         'Content-Type': 'application/json',
         'Authorization': this.tiledeskToken
       })
     };
-    this.logger.log('[FAQ-SERV] UPDATE FAQ - ID ', id);
-    let url = this.FAQ_URL + id; 
+    this.logger.log('[FAQ-SERV] UPDATE FAQ - ID ', intent._id);
+    let url = this.FAQ_URL + intent._id; 
+    if(intent.intent_id) url = this.FAQ_URL + 'intentId' + intent.intent_id; 
+    
     this.logger.log('[FAQ-SERV] UPDATE FAQ - PUT URL ', url);
-    const body = { 
-      'attributes': attributes, 
-      'question': question, 
-      'answer': answer, 
-      'intent_display_name': intent_display_name, 
-      'form': intent_form,
-      'actions': intent_actions,
-      'webhook_enabled': webhook_enabled 
-    };
-    this.logger.log('----------->>>', intent_actions, body);
-    this.logger.log('[FAQ-SERV] UPDATE FAQ - PUT REQUEST BODY ', body);
-    return this._httpClient.put(url, JSON.stringify(body), httpOptions);
+
+    this.logger.log('----------->>>', intent);
+    this.logger.log('[FAQ-SERV] UPDATE FAQ - PUT REQUEST BODY ', intent);
+    return this._httpClient.put(url, JSON.stringify(intent), httpOptions);
   }
 
 
diff --git a/src/assets/images/action-reply-types/file.svg b/src/assets/images/action-reply-types/file.svg
new file mode 100644
index 00000000..e8a71477
--- /dev/null
+++ b/src/assets/images/action-reply-types/file.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">
+    <rect fill="none" height="24" width="24"/>
+    <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M9.5,16.5l7-4.5l-7-4.5V16.5z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/action-reply-types/gallery.svg b/src/assets/images/action-reply-types/gallery.svg
new file mode 100644
index 00000000..e5917951
--- /dev/null
+++ b/src/assets/images/action-reply-types/gallery.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" xml:space="preserve">
+    <path fill="currentColor" d="M17.1,8c-0.3,0-0.5-0.1-0.7-0.3
+        c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7C16.5,6.1,16.8,6,17.1,6c0.3,0,0.5,0.1,0.7,0.3C18,6.5,18.1,6.7,18.1,7
+        c0,0.3-0.1,0.5-0.3,0.7C17.6,7.9,17.3,8,17.1,8z M9.1,14l2.7-3.5l1.6,2l2.3-3l3.4,4.5H9.1z M4.1,22c-0.5,0-1-0.2-1.4-0.6
+        C2.3,21,2.1,20.5,2.1,20V6h2v14h14v2H4.1z M6.1,9.4V4c0-0.5,0.2-1,0.6-1.4C7,2.2,7.5,2,8.1,2h5v2h-5v5.4H6.1z M8.1,18
+        c-0.5,0-1-0.2-1.4-0.6C6.3,17,6.1,16.5,6.1,16v-4.6h2V16h5v2H8.1z M15.1,18v-2h5v-4.6h2V16c0,0.5-0.2,1-0.6,1.4
+        c-0.4,0.4-0.9,0.6-1.4,0.6H15.1z M20.1,9.4V4h-5V2h5c0.5,0,1,0.2,1.4,0.6C21.9,3,22.1,3.5,22.1,4v5.4H20.1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/action-reply-types/image.svg b/src/assets/images/action-reply-types/image.svg
new file mode 100644
index 00000000..0013c5fb
--- /dev/null
+++ b/src/assets/images/action-reply-types/image.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" xml:space="preserve">
+    <path fill="currentColor" d="M4.2,22c-0.6,0-1.2-0.2-1.6-0.7c-0.4-0.4-0.7-1-0.7-1.6V4.2
+        c0-0.6,0.2-1.2,0.7-1.6C3.1,2.2,3.6,2,4.2,2h15.6c0.6,0,1.2,0.2,1.6,0.7c0.4,0.4,0.7,1,0.7,1.6v15.6c0,0.6-0.2,1.2-0.7,1.6
+        c-0.4,0.4-1,0.7-1.6,0.7H4.2z M4.2,19.8h15.6V4.2H4.2V19.8z M5.3,17.6h13.3L14.5,12l-3.3,4.4l-2.5-3.3L5.3,17.6z M4.2,19.8L4.2,19.8
+        z M8.1,9.8c0.4,0,0.9-0.2,1.2-0.5C9.6,9,9.8,8.6,9.8,8.1c0-0.4-0.2-0.9-0.5-1.2C9,6.6,8.5,6.4,8.1,6.4c-0.4,0-0.9,0.2-1.2,0.5
+        C6.6,7.2,6.4,7.7,6.4,8.1c0,0.4,0.2,0.9,0.5,1.2C7.2,9.6,7.7,9.8,8.1,9.8z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/action-reply-types/redirect.svg b/src/assets/images/action-reply-types/redirect.svg
new file mode 100644
index 00000000..62f6cc30
--- /dev/null
+++ b/src/assets/images/action-reply-types/redirect.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" xml:space="preserve">
+    <path fill="currentColor" d="M12.1,22c-1.3,0-2.7-0.3-3.9-0.8C7,20.7,5.9,20,5,19.1
+        c-0.9-0.9-1.6-2-2.1-3.2c-0.5-1.2-0.8-2.6-0.8-3.9c0-1.3,0.3-2.7,0.8-3.9C3.4,6.9,4.1,5.8,5,4.9C5.9,4,7,3.3,8.2,2.8
+        C9.4,2.3,10.7,2,12.1,2v2.2C10,4.2,8,5,6.6,6.5C5.1,7.9,4.3,9.9,4.3,12c0,2.1,0.8,4.1,2.3,5.5C8,19,10,19.8,12.1,19.8V22z
+        M16.5,17.6L15,16l2.9-2.9H8.7v-2.2h9.1L15,8l1.6-1.6l5.6,5.6L16.5,17.6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/action-reply-types/text.svg b/src/assets/images/action-reply-types/text.svg
new file mode 100644
index 00000000..494caac2
--- /dev/null
+++ b/src/assets/images/action-reply-types/text.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/actions_category/integrations.svg b/src/assets/images/actions_category/integrations.svg
index 6b112be6..5bf9cb76 100644
--- a/src/assets/images/actions_category/integrations.svg
+++ b/src/assets/images/actions_category/integrations.svg
@@ -1,17 +1,46 @@
 <svg id="Livello_1" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 22.1 22.65" width="24">
   <g>
-    <path fill="currentColor" d="M6.07,1.04C5.41,.36,4.5-.01,3.56,0c-.95-.01-1.85,.36-2.51,1.05C.36,1.7-.01,2.61,0,3.56c-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M13.56,1.04C12.91,.36,12-.01,11.05,0c-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M21.06,1.04C20.4,.36,19.49-.01,18.55,0c-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-  </g>
-  <g>
-    <path fill="currentColor" d="M6.07,8.82c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05C.36,9.47-.01,10.38,0,11.33c-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M13.56,8.82c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M21.06,8.82c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-  </g>
-  <g>
-    <path fill="currentColor" d="M6.07,16.59c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05C.36,17.24-.01,18.15,0,19.1c-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M13.56,16.59c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-    <path fill="currentColor" d="M21.06,16.59c-.66-.68-1.57-1.06-2.51-1.04-.95-.01-1.85,.36-2.51,1.05-.68,.66-1.06,1.57-1.04,2.51-.01,.95,.36,1.85,1.04,2.51,.66,.68,1.57,1.06,2.51,1.04,.95,.01,1.85-.36,2.51-1.05,.68-.66,1.06-1.57,1.04-2.51,.01-.95-.36-1.85-1.04-2.51Zm-1.26,3.77c-.33,.34-.78,.53-1.26,.52-.47,0-.93-.18-1.26-.52-.34-.33-.53-.78-.52-1.26,0-.47,.18-.93,.52-1.26,.33-.34,.78-.53,1.26-.52,.47,0,.93,.18,1.26,.52,.34,.33,.53,.78,.52,1.26,0,.47-.18,.93-.52,1.26Z"/>
-  </g>
-</svg>
\ No newline at end of file
+	<g>
+		<path fill="currentColor" d="M7.6,3C7.1,2.4,6.3,2.1,5.5,2.1C4.6,2.1,3.8,2.4,3.3,3C2.7,3.6,2.3,4.4,2.4,5.2c0,0.8,0.3,1.6,0.9,2.2
+			C3.8,8,4.6,8.3,5.5,8.3c0.8,0,1.6-0.3,2.2-0.9C8.2,6.8,8.6,6,8.6,5.2C8.6,4.4,8.2,3.6,7.6,3z M6.6,6.3C6.3,6.6,5.9,6.8,5.5,6.8
+			C5,6.8,4.6,6.6,4.4,6.3C4.1,6,3.9,5.6,3.9,5.2c0-0.4,0.2-0.8,0.5-1.1C4.6,3.8,5,3.7,5.5,3.7c0.4,0,0.8,0.2,1.1,0.5
+			C6.9,4.4,7,4.8,7,5.2C7,5.6,6.9,6,6.6,6.3z"/>
+		<path fill="currentColor" d="M14.2,3c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9C9.2,3.6,8.9,4.4,8.9,5.2c0,0.8,0.3,1.6,0.9,2.2
+			C10.4,8,11.2,8.3,12,8.3c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C15.1,4.4,14.8,3.6,14.2,3z M13.1,6.3
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C13.6,5.6,13.4,6,13.1,6.3z"/>
+		<path fill="currentColor" d="M20.7,3c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C21.7,4.4,21.3,3.6,20.7,3z M19.6,6.3
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5C17.1,6,17,5.6,17,5.2c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C20.1,5.6,19.9,6,19.6,6.3z"/>
+	</g>
+	<g>
+		<path fill="currentColor" d="M7.6,9.8C7.1,9.2,6.3,8.9,5.5,8.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C8.6,11.2,8.2,10.4,7.6,9.8z M6.6,13.1
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5C6.9,11.2,7,11.6,7,12C7,12.4,6.9,12.8,6.6,13.1z"/>
+		<path fill="currentColor" d="M14.2,9.8c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C15.1,11.2,14.8,10.4,14.2,9.8z M13.1,13.1
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C13.6,12.4,13.4,12.8,13.1,13.1z"/>
+		<path fill="currentColor" d="M20.7,9.8c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C21.7,11.2,21.3,10.4,20.7,9.8z M19.6,13.1
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5C17.1,12.8,17,12.4,17,12c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C20.1,12.4,19.9,12.8,19.6,13.1z"/>
+	</g>
+	<g>
+		<path fill="currentColor" d="M7.6,16.6c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C8.6,18,8.2,17.2,7.6,16.6z M6.6,19.9
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5C6.9,18,7,18.4,7,18.8C7,19.2,6.9,19.6,6.6,19.9z"/>
+		<path fill="currentColor" d="M14.2,16.6c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C15.1,18,14.8,17.2,14.2,16.6z M13.1,19.9
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C13.6,19.2,13.4,19.6,13.1,19.9z"/>
+		<path fill="currentColor" d="M20.7,16.6c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.4-0.9,2.2c0,0.8,0.3,1.6,0.9,2.2
+			c0.6,0.6,1.4,0.9,2.2,0.9c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2C21.7,18,21.3,17.2,20.7,16.6z M19.6,19.9
+			c-0.3,0.3-0.7,0.5-1.1,0.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5
+			c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1C20.1,19.2,19.9,19.6,19.6,19.9z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/images/icons/add_image.svg b/src/assets/images/icons/add_image.svg
index ab75fe5d..0691141a 100644
--- a/src/assets/images/icons/add_image.svg
+++ b/src/assets/images/icons/add_image.svg
@@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52">
-    <path data-name="Kształt 3468"  transform="translate(-160 -63)" style="fill:#d3d7e0;fill-rule:evenodd"
-        d="M203.789 76.684v8.183s-5.446.027-5.473 0v-8.183h-8.211s.028-5.446 0-5.474h8.211V63h5.473v8.21H212v5.474h-8.211Zm-8.21 10.947v-8.21h-8.211v-8.21h-21.894A5.49 5.49 0 0 0 160 76.684v32.842a5.49 5.49 0 0 0 5.474 5.474h32.842a5.489 5.489 0 0 0 5.473-5.474V87.632h-8.21Zm-30.105 21.894 8.21-10.947 5.474 8.21 8.21-10.947 10.948 13.684h-32.842Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" >
+    <path fill="currentColor" d="M4.2,22c-0.6,0-1.2-0.2-1.6-0.7c-0.4-0.4-0.7-1-0.7-1.6V4.2
+        c0-0.6,0.2-1.2,0.7-1.6C3,2.2,3.6,2,4.2,2h10v2.2h-10v15.6h15.6v-10H22v10c0,0.6-0.2,1.2-0.7,1.6c-0.4,0.4-1,0.7-1.6,0.7L4.2,22z
+        M17.5,8.7V6.4h-2.2V4.2h2.2V2h2.2v2.2H22v2.2h-2.2v2.2L17.5,8.7z M5.3,17.6h13.3L14.5,12l-3.3,4.4l-2.5-3.3L5.3,17.6z M4.2,4.2
+        L4.2,4.2z"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/if_condition.svg b/src/assets/images/icons/if_condition.svg
index ce71d2bb..780bf9cb 100644
--- a/src/assets/images/icons/if_condition.svg
+++ b/src/assets/images/icons/if_condition.svg
@@ -1,8 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="20" viewBox="0 0 16 16">
-    <g fill="#ffffff" fill-rule="evenodd">
-        <use xlink:href="#if-v2_svg__a" fill="currentColor"></use>
-        <path id="if-v2_svg__a"
-            d="M2.066 9.259c.47.602 1.185 1.32 2.27 2.406 1.085 1.084 1.803 1.8 2.406 2.27.574.449.882.544 1.116.56.095.007.19.007.285 0 .233-.016.542-.111 1.116-.56.602-.47 1.32-1.186 2.406-2.27 1.084-1.085 1.8-1.804 2.27-2.406.449-.574.544-.883.56-1.116.007-.095.007-.19 0-.285-.016-.234-.111-.542-.56-1.116-.47-.603-1.186-1.321-2.27-2.406-1.085-1.085-1.804-1.8-2.406-2.27-.574-.449-.883-.544-1.116-.56a2 2 0 0 0-.285 0c-.234.016-.542.111-1.116.56-.603.47-1.321 1.185-2.406 2.27-1.085 1.085-1.8 1.803-2.27 2.406-.449.574-.544.882-.56 1.116a2 2 0 0 0 0 .285c.016.233.111.542.56 1.116ZM7.75.009c-1.302.093-2.36 1.15-4.476 3.266C1.16 5.391.102 6.45.01 7.751a3.5 3.5 0 0 0 0 .499c.093 1.302 1.15 2.36 3.266 4.475 2.116 2.116 3.174 3.174 4.476 3.267.166.011.333.011.499 0 1.302-.093 2.36-1.151 4.475-3.267 2.116-2.115 3.174-3.173 3.267-4.475a3.52 3.52 0 0 0 0-.5c-.093-1.301-1.151-2.36-3.267-4.475C10.61 1.16 9.552.102 8.25.01a3.5 3.5 0 0 0-.5 0ZM5 5.75a.75.75 0 0 1 1.5 0v4.5a.75.75 0 0 1-1.5 0v-4.5ZM10.75 5H10c-.944 0-1.415 0-1.708.293C8 5.586 8 6.057 8 7v3.25a.75.75 0 0 0 1.5 0V9h.75a.75.75 0 0 0 0-1.5H9.5c0-.471 0-.707.147-.853.146-.147.382-.147.853-.147h.25a.75.75 0 0 0 0-1.5Z">
-        </path>
-    </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16">
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.1,9.3c0.5,0.6,1.2,1.3,2.3,2.4c1.1,1.1,1.8,1.8,2.4,2.3c0.6,0.4,0.9,0.5,1.1,0.6
+        c0.1,0,0.2,0,0.3,0c0.2,0,0.5-0.1,1.1-0.6c0.6-0.5,1.3-1.2,2.4-2.3c1.1-1.1,1.8-1.8,2.3-2.4c0.4-0.6,0.5-0.9,0.6-1.1
+        c0-0.1,0-0.2,0-0.3c0-0.2-0.1-0.5-0.6-1.1c-0.5-0.6-1.2-1.3-2.3-2.4c-1.1-1.1-1.8-1.8-2.4-2.3C8.7,1.6,8.4,1.5,8.1,1.5
+        c-0.1,0-0.2,0-0.3,0c-0.2,0-0.5,0.1-1.1,0.6C6.1,2.5,5.4,3.3,4.3,4.3S2.5,6.1,2.1,6.7C1.6,7.3,1.5,7.6,1.5,7.9c0,0.1,0,0.2,0,0.3
+        C1.5,8.4,1.6,8.7,2.1,9.3z M7.8,0C6.4,0.1,5.4,1.2,3.3,3.3C1.2,5.4,0.1,6.4,0,7.8c0,0.2,0,0.3,0,0.5c0.1,1.3,1.1,2.4,3.3,4.5
+        c2.1,2.1,3.2,3.2,4.5,3.3c0.2,0,0.3,0,0.5,0c1.3-0.1,2.4-1.2,4.5-3.3c2.1-2.1,3.2-3.2,3.3-4.5c0-0.2,0-0.3,0-0.5
+        c-0.1-1.3-1.2-2.4-3.3-4.5S9.6,0.1,8.2,0C8.1,0,7.9,0,7.8,0L7.8,0z M5,5.8C5,5.3,5.3,5,5.8,5s0.8,0.3,0.8,0.8v4.5
+        c0,0.4-0.3,0.8-0.8,0.8S5,10.7,5,10.2V5.8z M10.8,5H10C9.1,5,8.6,5,8.3,5.3C8,5.6,8,6.1,8,7v3.2C8,10.7,8.3,11,8.8,11
+        s0.8-0.3,0.8-0.8V9h0.8C10.7,9,11,8.7,11,8.2c0-0.4-0.3-0.8-0.8-0.8H9.5c0-0.5,0-0.7,0.1-0.9c0.1-0.1,0.4-0.1,0.9-0.1h0.2
+        c0.4,0,0.8-0.3,0.8-0.8S11.2,5,10.8,5z"/>
+</svg>
diff --git a/src/assets/sass/cds/_variables.scss b/src/assets/sass/cds/_variables.scss
index 44acedc9..b2a0d11c 100644
--- a/src/assets/sass/cds/_variables.scss
+++ b/src/assets/sass/cds/_variables.scss
@@ -78,10 +78,6 @@ $height-header: 25px;
 $padding-base: 15px !default;
 $margin-base: 15px !default;
 
-$button-height-base: 20px; //32px;
-$button-max-width-base: 240px;
-$button-border-radius-base: 16px;
-
 $label-height-base: 48px;
 
 $icon-color: #ecb606b0;
@@ -98,8 +94,7 @@ $panel-border-radius: 16px;
 $deep-brown: #6c6859;
 $light-brown: #e8e6dd;
 
-$success-connector: rgb(44, 191, 35);
-$failure-connector: rgb(191, 35, 35);
+
 
 $action-item-color: #d2e3fc;
 $action-item-background:rgba(255,255,255, 0.7); //rgba(66,85,117,1);
@@ -152,11 +147,23 @@ $blu: #506493;
 $blu-02: rgb(91, 114, 167);
 $blu-light-01: rgb(244, 246, 251);
 $blu-light-02: #b6c2df;
+$blu-light-03: rgb(224, 227, 241);
+$blu-light-04: rgb(237, 239, 248);
 $gray: rgb(112, 112, 112);
 $gray-02: rgb(239,241,245);
 $gray-light-01: rgb(214, 214, 214);
+$gray-light-02: rgb(223, 227, 237);
 
+$success-connector: rgb(44, 191, 35);
+$failure-connector: rgb(191, 35, 35);
 
 $header-height: 60px;
 $sidebar-base-width: 60px;
-$btn-border-radius: 16px;
\ No newline at end of file
+$btn-border-radius: 16px;
+
+//reply buttons
+$button-height-base: 20px; //32px;
+$button-max-width-base: 240px;
+$button-min-width-base: 95px;
+$button-min-width-preview: 200px;
+$button-border-radius-base: 16px;
diff --git a/src/assets/sass/cds/styles.scss b/src/assets/sass/cds/styles.scss
index 6206b742..29fff2d7 100644
--- a/src/assets/sass/cds/styles.scss
+++ b/src/assets/sass/cds/styles.scss
@@ -88,19 +88,7 @@ svg {
     // max-height: calc(100vh - 200px); // nk
 
 }
-.footer-panel-intent-detail {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    // left: 0;
-    // right: 0;
-    background-color: #51627e;
-    z-index: 2;
-    height: 42px;
-    margin: auto 0;
-    padding: 7px 20px;
-    border-top: 2px solid rgb(66, 85, 117);
-}
+
 
 .cds-custom-tooltip {
     background-color: #fff;
@@ -121,25 +109,6 @@ emoji-mart {
         border: 0;
     }
 }
-.emoji-picker {
-    .emoji-picker-button {
-        align-items: center;
-        background: #fff;
-        border-radius: 100%;
-        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 19%);
-        cursor: pointer;
-        display: flex;
-        height: 23px;
-        justify-content: center;
-        margin-right: 5px;
-        width: 23px;
-        color: #647283;
-        &:hover {
-            background: #006cff;
-            color: #fff;
-        }
-    }
-}
 
 .cds-action-preview {
     /* padding: 3px 16px 16px; */
@@ -395,9 +364,23 @@ appdashboard-cds-dashboard a {
     font-weight: 600;
 }
 
+.footer-panel-intent-detail {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    // left: 0;
+    // right: 0;
+    z-index: 2;
+    height: 42px;
+    margin: auto 0;
+    padding: 7px 20px;
+    border-top: 1px solid $gray-light-02;
+}
+
 img.active-icon {
     filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%);
 }
+
 img.base-icon-color{
     filter: brightness(0) saturate(100%) invert(83%) sepia(87%) saturate(3891%) hue-rotate(177deg) brightness(92%) contrast(89%);
 }