diff --git a/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss b/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss
index 32e014cc..24a2639b 100644
--- a/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss
+++ b/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss
@@ -1,3 +1,15 @@
+@import "./src/assets/sass/cds/_variables.scss";
+
+
+:host {
+    --background-color: #{$blu-light-01};
+    --column-color: #{$blu-02};
+    --text-color: #{$blu};
+
+    --content-background: rgb(244, 246, 251, 0.4);
+    --base-radius: 8px
+}
+
 .cds-attributes {
     // max-width: 400px;
     .header__center {
@@ -8,7 +20,7 @@
         align-items: center;
         padding-left: 12px;
         padding-right: 12px;
-        color:#f2f2f2;
+        color: var(--text-color);
         max-width: 400px;
         width: 100%;
     }
@@ -24,7 +36,7 @@
     .key-value-form-column {
         font-size: 1em;
         width: 50%;
-        color:#f2f2f2;
+        color: var(--column-color);
         text-align: center;
     }
     
@@ -37,12 +49,12 @@
 
     /**** PANEL *****/
     ::ng-deep .mat-expansion-indicator:after {
-        color: #f2f2f2;
+        color: var(--text-color);
     }
     mat-expansion-panel {
         box-shadow: none;
-        background: rgb(48 63 92);
-        border: 1px solid #5f6368;
+        background-color: var(--content-background);
+        border: 1px solid $gray-light-02;
         overflow: visible;
         &.open-block {
             pointer-events: none;
@@ -71,7 +83,7 @@
         position: relative;
         width: 150px;
         height: 26px;
-        border-radius: 4px 0 0 4px;
+        border-radius: var(--base-radius) 0 0 var(--base-radius);
         background: #f2f2f2;
         font-weight: 500;
         font-size: 14px;
@@ -91,19 +103,21 @@
         background: #fff;
         margin: 3px 0;
         font-size: 14px;
-        height: 26px;
+        height: 28px;
         width: 50%;
         padding: 0 10px;
-        border-radius: 0 4px 4px 0;
-        color: #1e293b;
+        border-radius: 0 var(--base-radius) var(--base-radius) 0;
+        color: $gray;
+        border: 1px solid $blu-light-02;
         width: calc(50% - 2px);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        
     }
     
     .dx-input:focus, .sx-input:focus {
-        outline: 2px solid rgba(236,182,6,1);
+        border-color: $blu
     }
 
 
@@ -117,9 +131,7 @@
         width: calc(50% - 2px);
         textarea {
             padding: 0 0 0 10px !important;
-            border: 0!important;
-            outline: 0!important;
-            border-radius: 0 4px 4px 0;
+            border-radius: 0 var(--base-radius) var(--base-radius) 0;
         }
     }
 
@@ -128,8 +140,6 @@
         textarea {
             background: transparent;
             padding: 0!important;
-            border: 0!important;
-            outline: 0!important;
         }
     }
 
@@ -151,28 +161,22 @@
             cursor: default;
             display: flex;
             position: relative;
-            border-radius: 4px 0 0 4px;
-            background: rgb(242,242,242);
+            border-radius: var(--base-radius) 0 0 var(--base-radius);
             font-weight: 500;
             font-size: 14px;
             margin: 3px 0px 3px 0;
-            color: #1e293b;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
             padding: 0!important;
-            width: calc(100% - 2px);
-            border: 0px!important;
-            outline: 0px!important;
-            height: 26px!important;
             resize: none!important;
         }
 
         .text-editor-wrapper {
             position: relative;
             .tag {
-                inset: 0 2px 0 0;
-                border-radius: 4px 0 0 4px;
+                inset: 0 1px 0 0;
+                border-radius: var(--base-radius) 0 0 var(--base-radius);
                 margin: 3px 0;
                 padding: 3px 0;
                 justify-content: initial;
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html
index af62622b..40ffee45 100644
--- a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html
+++ b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html
@@ -2,14 +2,7 @@
 
     <div class="row">
         <div class="col-sm-10 col-md-10 title-buttons">
-            <!-- <h3 class="card_title__underlined" style="color: #e8eaed;">
-                <span class="card_title__underline buttons-inside">
-                    Setup Community info
-                </span>
-            </h3> -->
-            <!-- displayBtnLabelSeeYourRequets
-            displayBtnLabelSeeYourRequets
-            displayBtnLabelSeeYourRequets -->
+
             <div class="cds-bottom-nav">
                 <div (click)="displayUserCommunityInfo(seeUserCmntyInfo = !seeUserCmntyInfo)" class="btn-with-border--effect" [ngClass]="
                 { 'disabled-li' : seeUserCmntyInfo === false, 
@@ -58,7 +51,9 @@
     <!-- ------------------------------------------------------------------------------------------- -->
 
     <div class="row">
-        <div *ngIf="!userCmntyInfo" class="col-xs-6">
+
+        <!-- CHATBOT INFO tab  -->
+        <div *ngIf="!userCmntyInfo" class="col-sm-10 col-md-10">
             <!-- style="margin-bottom: 16px;" -->
             <div class="row">
 
@@ -73,45 +68,53 @@
                 </label>
             </div>
 
-            <div class="row" style="margin-bottom: 16px;">
-                <label class="col-xs-12 cds--custom-label">
-                    <!-- {{ 'Description' | translate }} -->
-                    Main Category <span>*</span>
-                </label>
-                <div class="col-xs-12">
-                    <ng-select class="csd-chatbot-dtls-input" id="select-tag" #ngSelectTags [items]="certifiedTags"
-                        bindLabel="name" [clearable]="true" placeholder="Select a category and press enter"
-                        [(ngModel)]="certifiedTag" (change)="addMainCategory($event)"
-                        (keyup.enter)="ngSelectTags.close()">
-
-                        <ng-template ng-label-tmp let-item="item">
-                            {{item.name}}
-                        </ng-template>
-                        <ng-template ng-option-tmp let-item="item" let-index="index">
-                            {{item.name}}
-                        </ng-template>
-                    </ng-select>
-                    <span *ngIf="certifiedTagNotSelected" class="csd-community-required-field">Required</span>
+            <div class="row flex-div" style="margin-bottom: 16px;">
+                <div class="col-xs-6 cds--custom-label">
+                    <!-- ------------------------------------------------------------------------------------------- -->
+                    <!--  Main Category  -->
+                    <!-- ------------------------------------------------------------------------------------------- -->
+                    <label class="col-xs-12 cds--custom-label">
+                        <!-- {{ 'Description' | translate }} -->
+                        Main Category <span>*</span>
+                    </label>
+                    <div class="col-xs-12">
+                        <ng-select class="csd-chatbot-dtls-input" id="select-tag" #ngSelectTags [items]="certifiedTags"
+                            bindLabel="name" [clearable]="true" placeholder="Select a category and press enter"
+                            [(ngModel)]="certifiedTag" (change)="addMainCategory($event)"
+                            (keyup.enter)="ngSelectTags.close()">
+    
+                            <ng-template ng-label-tmp let-item="item">
+                                {{item.name}}
+                            </ng-template>
+                            <ng-template ng-option-tmp let-item="item" let-index="index">
+                                {{item.name}}
+                            </ng-template>
+                        </ng-select>
+                        <span *ngIf="certifiedTagNotSelected" class="csd-community-required-field">Required</span>
+                    </div>
                 </div>
-            </div>
 
-            <!-- ------------------------------------------------------------------------------------------- -->
-            <!--  Bot title  -->
-            <!-- ------------------------------------------------------------------------------------------- -->
-            <div class="row" style="margin-bottom: 16px;">
-                <label class="col-xs-12 cds--custom-label">
-                    <!-- {{ "BotsAddEditPage.Type" | translate }} -->
-                    <!-- {{ 'Title' | translate }} -->
-                    Title <span>*</span>
-                </label>
-                <div class="col-xs-12">
-                    <input id="bot_type" name="bot_type" [(ngModel)]="selectedChatbot.title"
-                        (ngModelChange)="onChangeTitle($event)" class="input csd-chatbot-dtls-input" type="text"
-                        style="margin-bottom: 0px; color:#808080" placeholder="Title">
-                    <span *ngIf="titleIsEmpty" class="csd-community-required-field">Required</span>
+                <div class="col-xs-6 cds--custom-label">
+                    <!-- ------------------------------------------------------------------------------------------- -->
+                    <!--  Bot title  -->
+                    <!-- ------------------------------------------------------------------------------------------- -->
+                        <label class="col-xs-12 cds--custom-label">
+                            <!-- {{ "BotsAddEditPage.Type" | translate }} -->
+                            <!-- {{ 'Title' | translate }} -->
+                            Title <span>*</span>
+                        </label>
+                        <div class="col-xs-12">
+                            <input id="bot_type" name="bot_type" [(ngModel)]="selectedChatbot.title"
+                                (ngModelChange)="onChangeTitle($event)" class="input csd-chatbot-dtls-input" type="text"
+                                style="margin-bottom: 0px; color:#808080" placeholder="Title">
+                            <span *ngIf="titleIsEmpty" class="csd-community-required-field">Required</span>
+                        </div>
+
                 </div>
             </div>
 
+            
+
             <!-- ------------------------------------------------------------------------------------------- -->
             <!-- Short Description  -->
             <!-- ------------------------------------------------------------------------------------------- -->
@@ -183,16 +186,6 @@
 
                             <div class="cds-chatbot-tag-delete-icon-wpr" (click)="removeTag(tag)">
                                 <i class="material-icons" style="font-size: 12px;"> close </i>
-                                <!-- <svg style="width: 13px; height: auto;position:absolute;margin-top: 6px;"
-                    aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tag"
-                    class="svg-inline--fa-tag-icon fa-tag fa-w-16" role="img"
-                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    
-                    <path class="tag_icon_in_ws_msgs"
-                      d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z">
-                    </path>
-                  </svg> -->
-
                             </div>
                         </div>
                     </div>
@@ -213,7 +206,11 @@
                 </div>
             </div>
         </div>
-        <div *ngIf="userCmntyInfo" class="col-xs-6">
+
+
+
+        <!-- PERSONAL INFO tab  -->
+        <div *ngIf="userCmntyInfo" class="col-sm-10 col-md-10">
             <div class="row">
 
                 <label class="col-xs-12 cds--custom-label" style="font-size: 18px;">
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss
index c3484800..f2d25b6f 100644
--- a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss
+++ b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss
@@ -9,7 +9,7 @@
     position: relative;
     display: block;
     height: 53px;
-    border-bottom: 3px solid $blu-light-02;
+    border-bottom: 2px solid $blu-light-02;
     cursor: pointer;
 }
 
@@ -25,7 +25,7 @@
 }
 
 .li-active {
-    border-bottom: 3px solid $blu !important;
+    border-bottom: 2px solid $blu !important;
     pointer-events: none;
 }
 .li-active a {
@@ -59,7 +59,7 @@
 
 .csd-chatbot-dtls-input {
     // max-width: 400px;
-    max-width: 50%;
+    // max-width: 50%;
 }
 
 input[type="text"] {
@@ -133,6 +133,14 @@ input[type="text"]:disabled::placeholder {
     font-weight: 300 !important;
 }
 
+.flex-div{
+    display: flex;
+    & div.cds--custom-label{
+        width: 50%;
+        height: unset;
+    }
+}
+
 ng-select {
     font-size: 14px;
     width: 100%;
@@ -242,6 +250,9 @@ ng-select {
 
 .cds-chatbot-tag-delete-icon-wpr {
     height: 16px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
 }
 
 .bot-description-note {
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 0c4da6af..0a9366b4 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
@@ -152,7 +152,7 @@ div {
 mat-expansion-panel ::ng-deep {
     background-color: transparent;
     box-shadow: none;
-    color: $blu;
+    color: var(--text-color);
 
     .mat-expansion-panel-header {
         padding: 0;
@@ -163,22 +163,22 @@ mat-expansion-panel ::ng-deep {
     }
 
     .mat-expansion-panel-header-title {
-        color: $blu;
+        color: var(--text-color);
     }
 
     .mat-expansion-indicator::after {
-        color: $blu !important;
+        color: var(--text-color) !important;
     }
 
     .mat-expansion-panel-header-description,
     .mat-expansion-indicator:after {
-        color: $blu;
+        color: var(--text-color);
         margin: 5px;
     }
 
     ::ng-deep .mat-expansion-indicator,
     .mat-expansion-indicator:after {
-        color: $blu;
+        color: var(--text-color);
     }
 
     .mat-expansion-panel-header.mat-expanded {
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 7e04ad10..ae22e853 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
@@ -62,6 +62,11 @@ $max-height: 230px;
     }
 }
 
+appdashboard-delay-slider,
+appdashboard-filter{
+    display: flex;
+}
+
 .previewMode{
     &.extensions-response{
         margin: 0;
@@ -368,7 +373,7 @@ cds-textarea.text-editable-div ::ng-deep{
     // 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-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 878abdb1..a57647f1 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
@@ -67,6 +67,11 @@
     }
 }
 
+appdashboard-delay-slider,
+appdashboard-filter{
+    display: flex;
+}
+
 .previewMode{
     display: flex;
     flex-direction: column;
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 146afa1b..f3d888a4 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
@@ -343,7 +343,6 @@ export class CdsActionReplyGalleryComponent implements OnInit {
   }
 
   onDeletedMetadata(metadata: Metadata, index: number){
-    console.log('deleteeeeeeeee')
     this.gallery[index].preview = { src: ''};
     this.response.attributes.attachment.gallery = this.gallery
     this.changeActionReply.emit();
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 de7fb0c2..47b785e6 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
@@ -61,6 +61,11 @@
     }
 }
 
+appdashboard-delay-slider,
+appdashboard-filter{
+    display: flex;
+}
+
 .previewMode{
     &.extensions-response{
         margin: 0;
@@ -379,7 +384,7 @@ cds-textarea.text-editable-div ::ng-deep{
     // 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-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 786b4731..d38b1238 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
@@ -36,6 +36,11 @@
     }
 }
 
+appdashboard-delay-slider,
+appdashboard-filter{
+    display: flex;
+}
+
 .previewMode{
     &.extensions-response{
         margin: 0;
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 d74aaf97..dd9e7aa2 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
@@ -282,7 +282,7 @@ cds-textarea.text-editable-div ::ng-deep{
     // 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/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 e6211d12..742c2a01 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
@@ -27,19 +27,6 @@
 }
 
 
-
-.btn-save {
-    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 {
     margin: 0;
     text-align: center;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html
index 0e8d7b03..ee09e36b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html
@@ -1,17 +1,5 @@
 <div class="text-editor-wrapper">
     <div class="text-editor">
-
-        <!-- <div class="response-controls">
-             <div class="control-button delete" (click)="onDeleteResponse()">
-                <em class="material-icons">delete</em>
-            </div>
-            <div class="control-button" (click)="onMoveUpResponse()">
-                <em class="material-icons">expand_less</em>
-            </div> 
-            <div class="control-button" (click)="onMoveDownResponse()">
-                <em class="material-icons">expand_more</em>
-            </div>
-        </div> -->
         
         <mat-form-field class="box-input" appearance="fill">
             <div class="input-prefix" *ngIf="customPrefix"> / </div>
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.scss
index 651fc6de..ddccb403 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.scss
@@ -19,42 +19,6 @@
         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 .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 .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-input {
             // width: calc(100% - 40px);
@@ -63,17 +27,21 @@
             input {
                 border-radius: 8px;
                 background: $color-withe-hex;
-                border: 1px solid $color-withe-hex;
+                border: 1px solid $blu-light-02;
                 overflow-x: hidden;
                 overflow-y: auto;
                 // width: calc(100% - 2.5em);
                 width: 100%;
-                padding: 5px 5px;
-                color: $color-text-dark-hex;
+                color: $gray;
                 font-size: 1.15em;
                 line-height: 25px;
                 resize: vertical;
 
+                padding: 10px;
+                padding-top: 4px;
+                padding-bottom: 4px;
+                margin: 0px;
+
                 &.customPrefix{
                     padding-left: 20px;
                     width: calc(100% - 20px);
@@ -97,15 +65,6 @@
             }
         }
 
-        .text-editor-drop {
-            position: absolute;
-            display: inline-flex;
-            margin: 0;
-            left: 0;
-            top: -30px;
-            color: #dcdcdc;
-            cursor: grab;
-        }
     }
 
     .editor-utils {
@@ -113,14 +72,15 @@
         margin: -20px 50px 0px 0px;
         float: right;
         .num-chars {
-            background: $color-light-gray-hex;
+            background: $blu-light-01;
             padding: 0px 8px;
-            border-radius: 12px;
+            border-radius: 10px;
             font-size: 0.8em;
-            color: $color-text-box-hex;
+            color: $blu;
             float: right;
             &.error {
-                background: $color-orange-hex;
+                background: red;
+                color: white;
             }
         }
         .text-editor-insert-attribute {
@@ -134,11 +94,6 @@
     
 }
 
-.text-editor-wrapper:hover .text-editor {
-    .response-controls {
-        opacity: 1;
-    }
-}
 
 /** TEXT **/
 mat-form-field.mat-form-field ::ng-deep {
@@ -146,8 +101,8 @@ mat-form-field.mat-form-field ::ng-deep {
         border-top: 0px !important;
         input{
             &:hover{
-                border: 1px solid $icon-color !important;
-                outline: 1px solid $icon-color !important;
+                border: 1px solid $blu !important;
+                outline: 0px solid $blu !important;
             }
         }
     }
@@ -159,10 +114,14 @@ mat-form-field.mat-focused ::ng-deep {
             .mat-form-field-infix {
                 display: flex;
                 input {
-                    border: 1px solid $icon-color!important;
-                    outline: 1px solid $icon-color!important;
+                    border: 1px solid $blu!important;
+                    outline: 0px solid $blu!important;
                     transition: border .3s;
-
+                    &.invalid{
+                        border: 1px solid red !important;
+                        outline: 0px solid red !important;
+                        transition: border 0.3s;
+                    }
                     
                 }
             }
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 df4df715..bdbbf25e 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
@@ -100,7 +100,7 @@ export class CDSTextareaComponent implements OnInit {
   }
 
   onChangeTextArea(event) {
-    this.logger.log('[CDS-TEXAREA] onChangeTextarea-->', event, this.readonly);
+    // this.logger.log('[CDS-TEXAREA] onChangeTextarea-->', event, this.readonly);
     this.calculatingleftCharsText();
     // console.log('onChangeTextarea!! ',event);
     if(this.readonly && event){
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 49d08957..1b3466f2 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
@@ -9,7 +9,7 @@
   --intent-header-background: transparent; //#{$deep-brown};
   --base-border-radius-preview: #{$border-radius-base-preview};
   --base-padding-preview: #{$padding-base-preview};
-  --action-selected-color: #{$accent-blue};
+  --action-selected-color: #{$action-color-selected};
 
   --startIntentMaxWith: 160px;
 }
@@ -1023,7 +1023,7 @@ cds-panel-intent-header.isStart ::ng-deep{
   .option {
     display: flex;
     cursor: pointer;
-    
+
     &:hover {
       opacity: 0.85;
     }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html
index ab8f9702..cc6b533e 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html
@@ -1,97 +1,65 @@
-<div id="button-tab" class="button-tab" [style.width.px]="isOpenPanel?450:0" [style.opacity]="isOpenPanel?1:0">
+<div class="panel-button-configuration" [style.opacity]="isOpenPanel?1:0">
 
-    
-
-    <div class="button-tab-header">
-        <div class="button-tab-title">
-            Button
+    <div class="header-panel">
+        <div class="action-title">
+            <div class="icon-action">
+                <span class="material-icons-outlined">smart_button</span>
+            </div>
+            <p class="label-action">Button</p>
         </div>
         <div class="button-tab-close" (click)="onCloseButtonPanel()">
-            <em class="material-icons">chevron_right</em>
+            <span class="material-icons">chevron_right</span>
         </div> 
     </div> 
 
 
 
-    <div class="button-tab-content">
+    <div class="content-panel-button-configuration no-footer" id="scrollMe">
        
-        <div class="section displayed">
-            <div class="form-group" [ngClass]="{'is-error':buttonLabel}">
-               <label class="control-label ">
-                    {{ 'Button title' | translate }}
-                </label>
-                <!-- <cds-text id="input_title" 
-                    #input_title
-                    [text]="buttonLabel"
-                    (onChange)="onChangeTitle($event)">
-                </cds-text> -->
-
-                <cds-textarea 
-                    class="text-editable-div"
-                    [text]="buttonLabel" 
-                    [minRow]="1"
-                    popoverVerticalAlign="above"
-                    [emojiPikerBtn]="true"
-                    (changeTextarea)="onChangeTitle($event)">
-                </cds-textarea>
-
-                <!-- <div *ngIf="emojiPikerBtn" class="emoji-picker">
-                    <div class="emoji-picker-button" (click)="isEmojiPickerVisible = !isEmojiPickerVisible;">
-                        <span class="material-icons" style="font-size: 16px;">
-                            emoji_emotions
-                        </span>
-                    </div>
-                </div> -->
-            </div> 
-            <!-- <emoji-mart *ngIf="isEmojiPickerVisible"
-                class="box-emoji-mart"
-                [class.picker-visible] = "isEmojiPickerVisible"
-                [showPreview]="false" 
-                [perLine]="emojiPerLine" 
-                [include]="emojiiCategories"
-                [color]="emojiColor" 
-                [darkMode]="false"
-                [emojiSize] = "24"
-                (emojiSelect)="onAddEmoji($event)">
-            </emoji-mart> -->
+        <div class="field-box">
+            <label class="title-label">
+                {{ 'Button title' | translate }}
+            </label>
+            <cds-textarea 
+                class="text-editable-div"
+                [text]="buttonLabel" 
+                [minRow]="1" [maxRow]="1"
+                popoverVerticalAlign="above"
+                [emojiPikerBtn]="true"
+                (changeTextarea)="onChangeTitle($event)">
+            </cds-textarea>
         </div>
         
-        <div class="section displayed">
-            <div class="form-group ng-select">
-                <label class="control-label">
-                    {{ 'Type' | translate }}
-                </label>
-                <div class="selectFormModel class-test-select">
-                    <cds-select #select_action id="select-action"
-                        [items]="buttonTypes"
-                        [bindLabelSelect]="'label'"
-                        [bindValueSelect]="'value'"
-                        [itemSelected]="buttonType"
-                        (onSelected)="onChangeTypeButton($event)">
-                    </cds-select>
-                </div>
-            </div>
+        <div class="field-box">
+            <label class="title-label">
+                {{ 'Type' | translate }}
+            </label>
+            <cds-select #select_action id="select-action"
+                [items]="buttonTypes"
+                [bindLabelSelect]="'label'"
+                [bindValueSelect]="'value'"
+                [itemSelected]="buttonType"
+                (onSelected)="onChangeTypeButton($event)">
+            </cds-select>
         </div>
 
-        <div class="section" [ngClass]="{'displayed':buttonType === typeOfButton.URL}">
+        <div *ngIf="buttonType === typeOfButton.URL">
 
-            <div class="form-group ng-select">
-                <label class="control-label">
+            <div class="field-box">
+                <label class="title-label">
                     {{ 'Open in' | translate }}
                 </label>
-                <div class="selectFormModel class-test-select">
-                    <cds-select #select_action id="select-action"
-                        [items]="urlTypes"
-                        [bindLabelSelect]="'label'"
-                        [bindValueSelect]="'value'"
-                        [itemSelected]="urlType"
-                        (onSelected)="onChangeOpenIn($event)">
-                    </cds-select>
-                </div>
+                <cds-select #select_action id="select-action"
+                    [items]="urlTypes"
+                    [bindLabelSelect]="'label'"
+                    [bindValueSelect]="'value'"
+                    [itemSelected]="urlType"
+                    (onSelected)="onChangeOpenIn($event)">
+                </cds-select>
             </div>
 
-            <div class="form-group" [ngClass]="{'is-error':errorUrl === true}">
-                <label class="control-label">
+            <div class="field-box" [ngClass]="{'is-error':errorUrl === true}">
+                <label class="title-label">
                     {{ 'Url' | translate }}
                 </label>
                 <cds-text
@@ -103,10 +71,9 @@
         </div>
         
 
-        <div class="section" 
-            [ngClass]="{'displayed':button.type === typeOfButton.ACTION}">
-            <div class="form-group ng-select">
-                <label class="control-label">
+        <div *ngIf="buttonType === typeOfButton.ACTION">
+            <div class="field-box">
+                <label class="title-label">
                     {{ 'Go to block' | translate }}
                 </label>
                 <cds-select #select_action id="select-action"
@@ -126,7 +93,6 @@
                     (changeAttributes)="onChangeAttributes($event)"
                 ></cds-attributes>
             </div>
-
         </div>
        
     </div> 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss
index ee658b20..b25fd483 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss
@@ -1,5 +1,15 @@
 @import "./src/assets/sass/cds/_variables.scss";
 
+.panel-button-configuration{
+    display: flex;
+    width: 450px;
+    height: 100%;
+    flex-direction: column;
+    animation: width 0.9s ease-in-out;
+    background-color: white;
+    border-left: 1px solid $gray-light-02;
+}
+
 .emoji-picker {
     position: absolute;
     right: 10px;
@@ -15,111 +25,106 @@
     }
 }
 
-.button-tab {
-    position: absolute;
-    top:0;
-    right: 0;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: #4d5e79;
-    border-left: solid 2px #b28e26;
-    // box-shadow: 0 0 42px 2px #000000c7;
-    animation: width 0.9s ease-in-out;
-}
 
 
 
-.button-tab-header:before {
-    content: "";
-    position: absolute;
+
+// .header-panel:before {
+//     content: "";
+//     position: absolute;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     z-index: 0;
+//     height: 1px;
+//     background-color: #6474913d;
+// }
+
+.header-panel {
+    position: sticky;
+    top: 0;
     left: 0;
     right: 0;
-    bottom: 0;
-    z-index: 0;
-    height: 1px;
-    background-color: #6474913d;
-}
-
-.button-tab-header {
-    position: relative;
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    line-height: 50px;
-    min-height: 50px;
-    color: $color-txt-3-hex;
-    .button-tab-title {
-        font-size: 18px;
-        font-weight: 400;
-        color: #fff;
-        text-align: left;
-        padding-left: 20px;
-        cursor: default;
-    }
+    background-color: $blu-light-03;
+    z-index: 2;
+    padding: 10px;
+    padding-left: 20px;
     .button-tab-close {
         display: flex;
         justify-content: right;
-        margin: 12px;
+        align-items: center;
         position: absolute;
         top: 0;
-        left: -22px;
+        bottom: 0;
+        left: -12px;
         cursor: pointer;
-        em {
-            background: #303f5c;
-            border: 2px solid #b28e26!important;
+        span {
+            background: white;
+            box-shadow: rgba(0, 0, 0, 0.19) 0px 1px 4px 0px;
             border-radius: 50%;
             width: 22px;
             height: 22px;
             cursor: pointer;
             font-size: 18px;
-            display: block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $blu;
+            transition: background-color 0.3s ease 0s;
+        }
+        &:hover{
+            span.material-icons,
+            span.material-icons-outlined{
+                background-color: $blu;
+                color: $blu-light-04;
+            }
         }
     }    
 }
 
+.action-title {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    max-width: calc(100% - 70px);
+
+    .icon-action {
+        transition: opacity .15s ease 0s;
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        // margin-right: 6px;
+        // align-self: start;
+        color: $blu;
+        background: none;
 
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
+    }
 
+    .label-action {
+        overflow-x: clip;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0;
+        color: $blu;
+    }
+}
 
 
 
 
-.button-tab-content {
-    position: relative;
-    flex: 1;
-    min-height: 100px;
-    height: auto;
-    overflow-y: auto;
-    .section {
-        padding: 0 3em;
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: height 0.5s ease-out, opacity 0.2s linear;
-        .form-group {
-            input {
-                background-color: $color-withe-hex;
-                border: 0px solid $color-light-gray-hex;
-                padding: 0 6px;
-                border-radius: 4px;
-            }
-        }
-        &.displayed {
-            padding: 1em 2em;
-            height: auto;
-            opacity: 1;
-            overflow: visible;
-            display: inline-block;
-            width: 100%;
-        }
-        &.titleField{
-            padding: 0em 3em;
-        }
-    }
+
+
+
+
+.content-panel-button-configuration {
+    
     .cds-attributes {
         margin-top: 20px;
         display: block;
diff --git a/src/assets/sass/cds/_variables.scss b/src/assets/sass/cds/_variables.scss
index 1a9e9105..71f73149 100644
--- a/src/assets/sass/cds/_variables.scss
+++ b/src/assets/sass/cds/_variables.scss
@@ -96,17 +96,6 @@ $light-brown: #e8e6dd;
 
 
 
-$action-item-color: #d2e3fc;
-$action-item-background:rgba(255,255,255, 0.7); //rgba(66,85,117,1);
-$action-no-featured-item-background:rgba(255,255,255, 1); //rgba(66,85,117,1);
-$action-color-selected:rgb(58, 107, 147); // rgba(179,141,38,1);
-$intent-preview-background: #d3e3ee; //rgb(235, 226, 198);
-$empty-element-property:rgb(191, 35, 35);
-
-
-$padding-base-preview: 0 10px 10px;
-$base-element-gap: 5px;
-$border-radius-base-preview: 8px;
 
 /* CDS REFACTORING
 /* ******************************* */
@@ -171,3 +160,18 @@ $button-border-radius-base: 16px;
 //PANEL ACTION DETAIL
 $haeder-panel-action-detail-height: 44px;
 $footer-panel-action-detail-height: 42px;
+
+
+
+
+$action-item-color: #d2e3fc;
+$action-item-background:rgba(255,255,255, 0.7); //rgba(66,85,117,1);
+$action-no-featured-item-background:rgba(255,255,255, 1); //rgba(66,85,117,1);
+$action-color-selected: $blu; // rgba(179,141,38,1);
+$intent-preview-background: $blu-light-03; //rgb(235, 226, 198);
+$empty-element-property:rgb(191, 35, 35);
+
+
+$padding-base-preview: 0 10px 10px;
+$base-element-gap: 5px;
+$border-radius-base-preview: 8px;
diff --git a/src/assets/sass/cds/styles.scss b/src/assets/sass/cds/styles.scss
index 60042645..06af55b8 100644
--- a/src/assets/sass/cds/styles.scss
+++ b/src/assets/sass/cds/styles.scss
@@ -93,7 +93,8 @@ svg {
 }
 
 /* PANEL INTENT DETAIL */
-.content-panel-intent-detail {
+.content-panel-intent-detail,
+.content-panel-button-configuration {
     padding: 20px 30px 30px;
     position: absolute;
     top: $haeder-panel-action-detail-height;