diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index 8099502..4bee5dc 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -15,8 +15,8 @@
       <div> <input id="fileupload" type="file" /></div>
     </div>
   </div>
-
-  <ejs-diagram class="diagram-container" #diagram 
+  <div>
+    <ejs-diagram class="diagram-container" #diagram 
     id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
     [connectors]="connectors" [layout]="layout" [getNodeDefaults]="getNodeDefaults"
     [getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems"
@@ -133,9 +133,11 @@
 
   <ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
     [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
+  </div>
+
 </div>
 
-<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [clickedNodeId]="clickedNodeId" (addNodeAndConnect)="onaddNodeAndConnect($event)"></app-workflow-sidebar>
+<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect($event)"></app-workflow-sidebar>
 
 <!-- <div style="display: none;">
   <ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index 36f0075..671d133 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, EventEmitter, Input, Output, viewChild, ViewChild } from '@angular/core';
-import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram,  DiagramComponent, DiagramModule, HtmlModel, IClickEventArgs, IExportOptions, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport, SelectorConstraints, SelectorModel, SnapSettingsModel, TextModel, UserHandleEventsArgs, UserHandleModel } from '@syncfusion/ej2-angular-diagrams';
+import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram,  DiagramComponent, DiagramModule, HierarchicalTree, HierarchicalTreeService, HtmlModel, IClickEventArgs, IExportOptions, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport, SelectorConstraints, SelectorModel, SnapSettingsModel, TextModel, UserHandleEventsArgs, UserHandleModel } from '@syncfusion/ej2-angular-diagrams';
 import { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData, RuleData2 } from '../../models/appModel';
 import { RULE_DATA, RULE_DATA2, RULE_DATA3 } from '../../data/rule-data';
 import { DialogModule } from '@syncfusion/ej2-angular-popups';
@@ -21,11 +21,12 @@ import { WorkflowSidebarComponent } from '../workflow-sidebar/workflow-sidebar.c
 
 
 
-Diagram.Inject(ComplexHierarchicalTree, LineDistribution, PrintAndExport);
+Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
 
 @Component({
   selector: 'app-workflow-diagram',
   standalone: true,
+  providers: [HierarchicalTreeService],
   imports: [DiagramModule, DialogModule, DropDownButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
   templateUrl: './workflow-diagram.component.html',
   styleUrl: './workflow-diagram.component.scss'
@@ -75,7 +76,8 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public sidebarHeader!: string;
   public nodeBlockType!: number;
   public nodeEditType!: number;
-  public clickedNodeId!: string;
+  public selectedBlockId!: string;
+  public selectedWorkFlowId!: number;
 
   // // Async settings for file upload
   // public asyncSettings: AsyncSettingsModel = {
@@ -114,11 +116,18 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   }
   
   private initializeDiagramElements(): void {
+    this.selectedWorkFlowId = 1; // Get from DB
     sampleWorkflowData.forEach(item => {
+      let buttonCount = 0;
+      if(item.chatWorkflowEditorTypeId == 2){
+        buttonCount = item.fieldOptionDetails?.length || 0;
+      }
       // Create nodes based on the data
       this.nodes.push({
         id: `node${item.id}`,
-        // annotations: [{ content: `Node ${item['id']}` }],
+        // annotations: [{ content: `node${item['id']}` }],
+        width: 200,
+        height: 150 + (buttonCount * 25),
         addInfo: item
       });
 
@@ -163,7 +172,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   };
 
   public layout: LayoutModel = {
-    type: 'ComplexHierarchicalTree',
+    type: 'HierarchicalTree',
     connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
     horizontalSpacing: 40,
     verticalSpacing: 40,
@@ -179,8 +188,6 @@ export class WorkflowDiagramComponent implements AfterViewInit{
       strokeColor: '#0f2c60',
       strokeWidth: 5,
     };
-    obj.width = 200,
-    obj.height = 150,
     obj.borderWidth = 1,
     obj.borderColor = '#0f2c60',
     (obj.shape as HtmlModel).type = 'HTML'
@@ -201,15 +208,15 @@ export class WorkflowDiagramComponent implements AfterViewInit{
 
   public onNodeClick(args: IClickEventArgs): void {
     if (args.actualObject instanceof Node) {
-      const clickedNode = args.actualObject as Node;
-      let isLastNode = clickedNode.outEdges.length == 0;
+      const clickedBlock = args.actualObject as Node;
+      let isLastNode = clickedBlock.outEdges.length == 0;
       if(isLastNode && this.diagram.selectedItems.userHandles) {
         this.diagram.selectedItems.userHandles[0].visible = true;
       }
       else if(this.diagram.selectedItems.userHandles){
         this.diagram.selectedItems.userHandles[0].visible = false;
       }
-       this.clickedNodeId = clickedNode.id;
+       this.selectedBlockId = clickedBlock.id;
     }
   }
 
@@ -232,6 +239,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
     };
     // Add the connector to the diagram
     this.diagram.addConnector(newConnector);
+    this.diagram.doLayout();
   }
 
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
@@ -241,6 +249,9 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   }
 
   public onOpenDropDownButton(args: OpenCloseMenuEventArgs) {
+    if(this.diagram.selectedItems.userHandles){
+      this.diagram.selectedItems.userHandles[0].visible = false;
+    }
     let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
     args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px';
 
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
index b401de4..4b13cc2 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ClickEventArgs, SidebarComponent, SidebarModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
 import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
 import { FormsModule } from '@angular/forms';
@@ -20,9 +20,9 @@ export class WorkflowSidebarComponent {
   @ViewChild('sidebar') sidebar?: SidebarComponent;
   @ViewChild('ddlTextFormat') ddlTextFormat!: DropDownListComponent;
 
-  public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; 
+  public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum;
   public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum;
-  public buttons: Array<{ label: string, value: string, description:string|null }> = [];
+  public buttons: Array<{ label: string, value: string, description: string | null }> = [];
   public options: Array<{ label: string, value: string }> = [];
   public sideBarLabel: string = '';
   public sideBarDescription: string = '';
@@ -34,28 +34,28 @@ export class WorkflowSidebarComponent {
   public toDate: Date = new Date();
   public fromDateTime: Date = new Date();
   public toDateTime: Date = new Date();
-
+  public static nodeLength: number = 12;
   public type: string = 'Push';
-  public width: string ='280px';
-  // public nodeLength: number = 0;
+  public width: string = '280px';
   public checkedIsPrivate: boolean = false;
   public customMessage: string = '';
   public newNodeWidth: number = 200;
-  public newNodeHeight: number = 100;
-  public newNode : NodeModel = {};
+  public newNodeHeight: number = 150;
+  public newNode: NodeModel = {};
 
   @Input() nodeEditType!: number;
   @Input() nodeBlockType!: number;
   @Input() sidebarHeader!: string;
-  @Input() clickedNodeId!: string;
+  @Input() selectedBlockId!: string;
+  @Input() selectedWorkFlowId!: number;
   @Output() addNodeAndConnect = new EventEmitter<[string, NodeModel]>();
- 
+
   constructor() {
   }
-  
+
   onCloseSideBarClick(): void {
     this.sidebar?.hide();
-    this.addNodeAndUpdate(this.clickedNodeId);
+    this.addBlock(this.selectedBlockId);
     this.buttons = [];
   }
 
@@ -73,7 +73,7 @@ export class WorkflowSidebarComponent {
   }
 
   addButton(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null): void {
-     if (label.trim() && value.trim()) {
+    if (label.trim() && value.trim()) {
       this.buttons.push({ label, value, description });
       labelInput.value = '';
       valueInput.value = '';
@@ -87,464 +87,178 @@ export class WorkflowSidebarComponent {
     this.buttons.splice(index, 1);
   }
 
-  addNodeAndUpdate(sourceNodeId: string){
-    let nodeLength = 11;
-    switch(this.nodeBlockType){
+  addBlock(sourceNodeId: string) {
+    switch (this.nodeBlockType) {
       case (this.chatWorkflowBlockTypeEnum.SendTextMessage): {
-
         let messageInfo: MessageDetails = {
           text: this.customMessage,
           isPrivate: this.checkedIsPrivate,
           textFormat: this.ddlTextFormat.value as TextFormatEnum
         }
-        let newNodeInfo: RuleData2 = {
-          id : nodeLength + 1,
-          chatWorkflowId : 1,
-          successWorkflowId : null,
-          successRuleId : null,
-          isActive : true,
-          chatWorkflowBlockId : 6,
-          chatWorkflowEditorTypeId : null,
-          fieldDetails : null,
-          branchDetails: null,
-          messageDetails: messageInfo,
-          fieldOptionDetails: null
-        };
-
-        this.newNodeHeight= 100; // Set a default height for the new node
-        this.newNodeWidth = 200;
+        let newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, messageInfo);
         this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
         break;
-      } 
-      case (this.chatWorkflowBlockTypeEnum.GetPickerInput):{
-        switch(this.nodeEditType){
+      }
+      case (this.chatWorkflowBlockTypeEnum.GetPickerInput): {
+        switch (this.nodeEditType) {
           case (this.chatWorkflowEditorTypeEnum.Boolean): {
-            let fieldInfo: FieldDetails = {
-              description : this.sideBarDescription ,
-              label : this.sideBarLabel,
-              placeholder : this.sideBarPlaceholder
-            };
-            let newNodeInfo: RuleData2 = {
-              id : nodeLength + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 4,
-              chatWorkflowEditorTypeId : 1,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
-    
-            this.newNodeHeight= 100; // Set a default height for the new node
-            this.newNodeWidth = 150;
-            this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            let fieldInfo = this.createFieldInfo(null);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
             break;
           }
-          case(this.chatWorkflowEditorTypeEnum.Buttons): {
-            let fieldInfo: FieldDetails = {
-              description : this.sideBarDescription ,
-              label : this.sideBarLabel,
-              placeholder : this.sideBarPlaceholder
-            };
-    
-            // Mapping buttons to fieldOptionInfo
-            let fieldOptionInfo: FieldOptionDetail[] = this.buttons.map(button => {
-              return {
-                label: button.label,
-                value: button.value
-              };
-            });
-    
-            let newNodeInfo: RuleData2 = {
-              id : nodeLength + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 4,
-              chatWorkflowEditorTypeId : 2,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: fieldOptionInfo
-            };
-    
-            this.newNodeHeight= 100 + (this.buttons.length * 20); // Set a default height for the new node
-            this.newNodeWidth = 200;
-            this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+          case (this.chatWorkflowEditorTypeEnum.Buttons): {
+            let fieldOptionInfo = this.mapButtonsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight + (this.buttons.length * 25), newNodeInfo);
             break;
           }
           case this.chatWorkflowEditorTypeEnum.DropDown: {
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder
-              };
-        
-              // Mapping buttons to fieldOptionInfo
-              let fieldOptionInfo: FieldOptionDetail[] = this.buttons.map(button => {
-                return {
-                  label: button.label,
-                  value: button.value
-                };
-              });
-        
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 3,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
-        
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
+            let fieldOptionInfo = this.mapButtonsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight + (this.buttons.length * 25), newNodeInfo);
+            break;
           }
           case (this.chatWorkflowEditorTypeEnum.MultiSelect): {
-              let fieldValidationInfo: FieldValidation = {
-                min: this.fieldOptionMinValue.toString(),
-                max: this.fieldOptionMaxValue.toString()
-              };
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-                fieldValidation: fieldValidationInfo
-              };
-    
-              // Mapping buttons to fieldOptionInfo
-              let fieldOptionInfo: FieldOptionDetail[] = this.buttons.map(button => {
-                return {
-                  label: button.label,
-                  value: button.value
-                };
-              });
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 4,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
-    
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
-          } 
+            let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), null);
+            let fieldOptionInfo = this.mapButtonsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight + (this.buttons.length * 25), newNodeInfo);
+            break;
+          }
           case (this.chatWorkflowEditorTypeEnum.List): {
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-              };
-    
-              // Mapping buttons to fieldOptionInfo
-              let fieldOptionInfo: FieldOptionDetail[] = this.buttons.map(button => {
-                return {
-                  label: button.label,
-                  value: button.value,
-                  description: button.description !== null ? button.description : null
-                };
-              });
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 5,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
-    
-              this.newNodeHeight= 100 + (this.buttons.length * 25); // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
-          } 
+            let fieldOptionInfo = this.mapButtonsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight + (this.buttons.length * 25), newNodeInfo);
+            break;
+          }
         }
         break;
       }
-      case (this.chatWorkflowBlockTypeEnum.GetTextInput):{
-        switch(this.nodeEditType){
+      case (this.chatWorkflowBlockTypeEnum.GetTextInput): {
+        switch (this.nodeEditType) {
           case (this.chatWorkflowEditorTypeEnum.Text): {
-            let fieldValidationInfo: FieldValidation = {
-              max: this.fieldOptionMaxValue.toString()
-            };
-            let fieldInfo: FieldDetails = {
-              description : this.sideBarDescription ,
-              label : this.sideBarLabel,
-              placeholder : this.sideBarPlaceholder,
-              fieldValidation: fieldValidationInfo
-            };
-  
-            let newNodeInfo: RuleData2 = {
-              id : nodeLength + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 7,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
-  
-            this.newNodeHeight= 100; // Set a default height for the new node
-            this.newNodeWidth = 200;
-            this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            let fieldValidationInfo = this.createFieldValidationInfo(null, this.fieldOptionMaxValue.toString(), null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
             break;
-          } 
+          }
           case (this.chatWorkflowEditorTypeEnum.TextArea): {
-              let fieldValidationInfo: FieldValidation = {
-                max: this.fieldOptionMaxValue.toString()
-              };
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-                fieldValidation: fieldValidationInfo
-              };
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 8,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
-    
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
-          } 
+            let fieldValidationInfo = this.createFieldValidationInfo(null, this.fieldOptionMaxValue.toString(), null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            break;
+          }
           case (this.chatWorkflowEditorTypeEnum.Date): {
             const today = new Date();
-            // Format today's date as YYYY-MM-DD
-            const minDate = today.toISOString().split('T')[0];
-  
-            // Calculate max date, e.g., 30 days from today
-            const maxDateObj = new Date(today);
-            maxDateObj.setDate(today.getDate() + 30);
-            const maxDate = maxDateObj.toISOString().split('T')[0];
-  
-            let fieldValidationInfo: FieldValidation = {
-              // min: this.fromDate.toString(),
-              // max: this.toDate.toString()
-              
-              min: minDate,
-              max: maxDate
-            };
-            let fieldInfo: FieldDetails = {
-              description : this.sideBarDescription ,
-              label : this.sideBarLabel,
-              placeholder : this.sideBarPlaceholder,
-              fieldValidation: fieldValidationInfo
-            };
-  
-            let newNodeInfo: RuleData2 = {
-              id : nodeLength + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 9,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
-  
-            this.newNodeHeight= 100; // Set a default height for the new node
-            this.newNodeWidth = 200;
-            this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            const minDate = today.toISOString().split('T')[0]; // Format today's date as YYYY-MM-DD
+            today.getDate() + 30; // Calculate 30 days from today
+            const maxDate = today.toISOString().split('T')[0]; // Max date in YYYY-MM-DD format
+
+            let fieldValidationInfo = this.createFieldValidationInfo(minDate, maxDate, null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
             break;
-          } 
+          }
           case (this.chatWorkflowEditorTypeEnum.DateTime): {
-              const now = new Date();
-              // Current datetime formatted as ISO string
-              const minDateTime = now.toISOString();
-            
-              // Max datetime, e.g., 30 days from now
-              const maxDateTimeObj = new Date(now);
-              maxDateTimeObj.setDate(now.getDate() + 30);
-              const maxDateTime = maxDateTimeObj.toISOString();
-    
-              let fieldValidationInfo: FieldValidation = {
-                min: minDateTime,
-                max: maxDateTime
-              };
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-                fieldValidation: fieldValidationInfo
-              };
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 10,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
-    
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
+            const now = new Date();
+            const minDateTime = now.toISOString(); // Current datetime in ISO format
+            const maxDateTime = new Date(now.setDate(now.getDate() + 30)).toISOString(); // Max datetime, 30 days from now
+
+            let fieldValidationInfo = this.createFieldValidationInfo(minDateTime, maxDateTime, null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            break;
           }
           case (this.chatWorkflowEditorTypeEnum.Number): {
-            let fieldValidationInfo: FieldValidation = {
-              min: this.fieldOptionMinValue.toString(),
-              max: this.fieldOptionMaxValue.toString()
-            };
-            let fieldInfo: FieldDetails = {
-              description : this.sideBarDescription ,
-              label : this.sideBarLabel,
-              placeholder : this.sideBarPlaceholder,
-              fieldValidation: fieldValidationInfo
-            };
-  
-            let newNodeInfo: RuleData2 = {
-              id : nodeLength + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 11,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
-  
-            this.newNodeHeight= 100; // Set a default height for the new node
-            this.newNodeWidth = 200;
-            this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
             break;
-          } 
+          }
           case (this.chatWorkflowEditorTypeEnum.Decimal): {
-              let fieldValidationInfo: FieldValidation = {
-                min: this.fieldOptionMinValue.toString(),
-                max: this.fieldOptionMaxValue.toString()
-              };
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-                fieldValidation: fieldValidationInfo
-              };
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 12,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
-    
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
-          } 
+            let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), null);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            break;
+          }
           case (this.chatWorkflowEditorTypeEnum.Regex): {
-              let fieldValidationInfo: FieldValidation = {
-                regex: this.fieldOptionRegexValue
-              };
-              let fieldInfo: FieldDetails = {
-                description : this.sideBarDescription ,
-                label : this.sideBarLabel,
-                placeholder : this.sideBarPlaceholder,
-                fieldValidation: fieldValidationInfo
-              };
-    
-              let newNodeInfo: RuleData2 = {
-                id : nodeLength + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 13,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
-    
-              this.newNodeHeight= 100; // Set a default height for the new node
-              this.newNodeWidth = 200;
-              this.newNode =  this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
-              break;
-          } 
+            let fieldValidationInfo = this.createFieldValidationInfo(null, null, this.fieldOptionRegexValue);
+            let fieldInfo = this.createFieldInfo(fieldValidationInfo);
+            let newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null);
+            this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+            break;
+          }
         }
         break;
       }
     }
-
     this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
+    this.sideBarLabel = "";
+    this.sideBarDescription = "";
+    this.sideBarPlaceholder = "";
+  }
+
+  public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null): RuleData2 {
+    return {
+      id: WorkflowSidebarComponent.nodeLength++, // Need to set value dynamically
+      chatWorkflowId: workflowId,
+      successWorkflowId: null,
+      successRuleId: null,
+      isActive: true,
+      chatWorkflowBlockId: blockId,
+      chatWorkflowEditorTypeId: editorTypeId,
+      fieldDetails: fieldInfo,
+      branchDetails: null,
+      messageDetails: messageInfo,
+      fieldOptionDetails: fieldOptionInfo
+    };
+  }
+
+  public mapButtonsToFieldOptions(): FieldOptionDetail[] {
+    return this.buttons.map(button => ({
+      label: button.label,
+      value: button.value,
+      description: button.description ?? null
+    }));
+  }
+
+  public createFieldValidationInfo(minValue: string | null, maxValue: string | null, regexValue: string | null): FieldValidation {
+    return {
+      min: minValue,
+      max: maxValue,
+      regex: regexValue
+    }
+  }
+
+  public createFieldInfo(fieldValidationInfo: FieldValidation | null): FieldDetails {
+    return {
+      description: this.sideBarDescription,
+      label: this.sideBarLabel,
+      placeholder: this.sideBarPlaceholder,
+      fieldValidation: fieldValidationInfo
+    }
   }
 
   public createNode(width: number, height: number, nodeInfo: RuleData2): NodeModel {
     return {
       id: `node${nodeInfo.id}`,
-      annotations: [],
-      offsetX: 100,
-      offsetY: 70,
       style: { fill: '#FFFFFF', strokeColor: '#0f2c60', strokeWidth: 5 },
       height: height,
       width: width,
       borderColor: '#0f2c60',
       borderWidth: 3,
-      shape: { 
+      shape: {
         type: 'HTML',
       },
       addInfo: nodeInfo
diff --git a/src/app/models/appModel.ts b/src/app/models/appModel.ts
index 2b81137..3e23f8d 100644
--- a/src/app/models/appModel.ts
+++ b/src/app/models/appModel.ts
@@ -25,13 +25,14 @@ export interface RuleData {
 export interface FieldOptionDetail {
   label: string;
   value: string;
+  description?: string | null;
 }
 
 // Define FieldValidation interface
 export interface FieldValidation {
-  max?: string;
-  min?: string;
-  regex?: string;
+  max?: string | null;
+  min?: string | null; 
+  regex?: string | null;
 }
 
 // Define FieldDetails interface