diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3f7bfb87c..f47a813ed 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,22 +1,23 @@
 {
     "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#073caf",
-        "activityBar.activeBorder": "#e9eff5",
-        "activityBar.background": "#ec5fa6",
-        "activityBar.foreground": "#15202b",
-        "activityBar.inactiveForeground": "#15202b99",
-        "activityBarBadge.background": "#e9eff5",
-        "activityBarBadge.foreground": "#15202b",
-        "statusBar.background": "#ec5fa6",
-        "statusBar.foreground": "#15202b",
-        "statusBarItem.hoverBackground": "#597a38",
-        "titleBar.activeBackground": "#739d48",
-        "titleBar.activeForeground": "#15202b",
-        "titleBar.inactiveBackground": "#739d4899",
-        "titleBar.inactiveForeground": "#15202b99",
-        "sash.hoverBorder": "#8cb761",
-        "statusBarItem.remoteBackground": "#739d48",
-        "statusBarItem.remoteForeground": "#15202b"
+        "activityBar.activeBackground": "#fa1b49",
+        "activityBar.activeBorder": "#155e02",
+        "activityBar.background": "#fa1b49",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#155e02",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "statusBar.background": "#dd0531",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#fa1b49",
+        "titleBar.activeBackground": "#dd0531",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#dd053199",
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "sash.hoverBorder": "#fa1b49",
+        "statusBarItem.remoteBackground": "#dd0531",
+        "statusBarItem.remoteForeground": "#e7e7e7"
     },
-    "peacock.color": "#739d48"
+    "peacock.color": "#dd0531",
+    "angular.enable-strict-mode-prompt": false
 }
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
index 9586f0c1a..c3e67274f 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
@@ -2,119 +2,61 @@
   <dxc-heading text="Light Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#FFFFFF">
     <tbuilder-component-mode text="Default">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        margin="xsmall"
-        [options]="array1"
-        (onChange)="onChange($event)"
-        (onBlur)="onBlur($event)"
-        [optional]="true"
-        placeholder="Another placeholder"
-        size="large"
-        tabIndex="3"
-      >
+      <dxc-select label="Label" helperText="HelperText" margin="xsmall" [options]="array1" (onChange)="onChange($event)"
+        (onBlur)="onBlur($event)" [optional]="true" placeholder="Another placeholder" size="large" tabIndex="3">
       </dxc-select>
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        margin="xsmall"
-        [options]="array2"
-        [optional]="true"
-        (onChange)="onChange($event)"
-        placeholder="Another placeholder"
-      ></dxc-select>
+      <dxc-select label="Label" helperText="HelperText" margin="xsmall" [options]="array2" [optional]="true"
+        (onChange)="onChange($event)" placeholder="Another placeholder"></dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Searchable">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        searchable="true"
-        margin="xsmall"
-        [options]="array1"
-        [optional]="true"
-        placeholder="Another placeholder"
-      >
+      <dxc-select label="Label" helperText="HelperText" searchable="true" margin="xsmall" [options]="array1"
+        [optional]="true" placeholder="Another placeholder">
       </dxc-select>
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        searchable="true"
-        margin="xsmall"
-        [options]="array2"
-        placeholder="Another placeholder"
-      >
+      <dxc-select label="Label" helperText="HelperText" searchable="true" margin="xsmall" [options]="array2"
+        placeholder="Another placeholder">
       </dxc-select>
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        searchable="true"
-        margin="xsmall"
-        [options]="array2"
-        [multiple]="true"
-        (onChange)="onChange($event)"
-        (onBlur)="onBlur($event)"
-        placeholder="Another placeholder"
-      >
+      <dxc-select label="Label" helperText="HelperText" searchable="true" margin="xsmall" [options]="array2"
+        [multiple]="true" (onChange)="onChange($event)" (onBlur)="onBlur($event)" placeholder="Another placeholder">
       </dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Multiple">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        multiple="true"
-        (onChange)="onChange($event)"
-        margin="xsmall"
-        [options]="array1"
-        [value]="arrayValue"
-      >
+      <dxc-select label="Label" helperText="HelperText" multiple="true" (onChange)="onChange($event)" margin="xsmall"
+        [options]="array1" [value]="arrayValue">
       </dxc-select>
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        multiple="true"
-        (onChange)="onChange($event)"
-        margin="xsmall"
-        [options]="array2"
-      >
+      <dxc-select label="Label" helperText="HelperText" multiple="true" (onChange)="onChange($event)" margin="xsmall"
+        [options]="array2">
       </dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Error">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        error="There is an error"
-        margin="xsmall"
-      >
+      <dxc-select label="Label" helperText="HelperText" error="There is an error" margin="xsmall">
       </dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Error and multiple">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        error="There is an error"
-        margin="xsmall"
-        [multiple]="true"
-      >
+      <dxc-select label="Label" helperText="HelperText" error="There is an error" margin="xsmall" [multiple]="true">
       </dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Disabled">
-      <dxc-select
-        label="Label"
-        helperText="HelperText"
-        error="There is an error"
-        margin="xsmall"
-        [disabled]="true"
-      >
+      <dxc-select label="Label" helperText="HelperText" error="There is an error" margin="xsmall" [disabled]="true">
       </dxc-select>
     </tbuilder-component-mode>
   </background-provider>
 
-  <dxc-heading text="Dark Mode" [level]="5" margin="xsmall"></dxc-heading>
-  <background-provider color="#000000"> </background-provider>
+  <dxc-heading text="Test reset controlled select" [level]="5" margin="xsmall"></dxc-heading>
+
+  <tbuilder-component-mode text="Default">
+    <dxc-select label="Label" helperText="HelperText" margin="xsmall" [value]="selectedValues" [options]="array1"
+      (onChange)="onChangeTest($event)" (onBlur)="onBlurTest($event)" [optional]="true"
+      placeholder="Another placeholder" size="large" tabIndex="3">
+    </dxc-select>
+
+    <dxc-button label="Reset values" (onClick)="onResetTest($event)" margin="medium"></dxc-button>
+  </tbuilder-component-mode>
+
+  <!-- <dxc-heading text="Dark Mode" [level]="5" margin="xsmall"></dxc-heading>
+  <background-provider color="#000000"> </background-provider> -->
 </div>
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
index 06fcb1828..2ab37c472 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { Option } from '@dxc-technology/halstack-angular/lib/dxc-select/interfaces/option.interface';
-import { OptionGroup } from '@dxc-technology/halstack-angular/lib/dxc-select/interfaces/optionGroup.interface';
+import { Component, OnInit } from "@angular/core";
+import { Option } from "@dxc-technology/halstack-angular/lib/dxc-select/interfaces/option.interface";
+import { OptionGroup } from "@dxc-technology/halstack-angular/lib/dxc-select/interfaces/optionGroup.interface";
 
 @Component({
-  selector: 'app-select',
-  templateUrl: './select-preview.component.html'
+  selector: "app-select",
+  templateUrl: "./select-preview.component.html",
 })
 export class SelectPreviewComponent implements OnInit {
+  selectedValues: string = "";
 
   array1: Option[] = [
     {
@@ -62,21 +63,33 @@ export class SelectPreviewComponent implements OnInit {
     },
   ];
 
-  arrayValue = ['1','2'];
+  arrayValue = ["1", "2"];
 
   value = "1";
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+
+  onChange(event) {
+    console.log("onchange:", event);
+  }
+
+  onBlur(event) {
+    console.log("onBlur:", event);
   }
 
-  onChange(event){
+  onChangeTest(event) {
+    this.selectedValues = event.value;
     console.log("onchange:", event);
   }
 
-  onBlur(event){
+  onBlurTest(event) {
     console.log("onBlur:", event);
   }
 
+  onResetTest(event) {
+    console.log(event);
+    this.selectedValues = "";
+  }
 }
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts
index 0a1380ee3..0f801fd3b 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts
@@ -38,6 +38,8 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
         } else {
           this.selectedOptions[0] = newOptions;
         }
+      } else {
+        this.selectedOptions = [];
       }
     });
   }
@@ -91,27 +93,25 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
           font-size: var(--select-valueFontSize);
           font-style: var(--select-valueFontStyle);
           font-weight: var(--select-valueFontWeight);
-          color: ${
-            inputs.disabled
-              ? "var(--select-disabledColor)"
-              : "var(--select-valueFontColor)"
-          };
-          .iconLabel{
+          color: ${inputs.disabled
+            ? "var(--select-disabledColor)"
+            : "var(--select-valueFontColor)"};
+          .iconLabel {
             width: 24px;
             height: 24px;
             display: inline-flex;
             align-items: center;
           }
-          .comma{
+          .comma {
             margin-right: 4px;
           }
-          .iconLabel{
+          .iconLabel {
             margin-right: 0.25rem;
           }
-          .isOptionalLabel{
-            color: ${
-              inputs.disabled ? "var(--select-disabledColor)" : "#000000b3"
-            };
+          .isOptionalLabel {
+            color: ${inputs.disabled
+              ? "var(--select-disabledColor)"
+              : "#000000b3"};
           }
         }
         .notSelectedLabel {
@@ -120,11 +120,9 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
           font-size: var(--select-placeholderFontSize);
           font-style: var(--select-placeholderFontStyle);
           font-weight: var(--select-placeholderFontWeight);
-          color: ${
-            inputs.disabled
-              ? "var(--select-disabledColor)"
-              : "var(--select-placeholderFontColor)"
-          };
+          color: ${inputs.disabled
+            ? "var(--select-disabledColor)"
+            : "var(--select-placeholderFontColor)"};
         }
       }
     `;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts
index 7eddbca56..60a964b08 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts
@@ -254,8 +254,9 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
         }
       } else {
         if (this.optionGroupRef) {
-          const optionGroupElement =
-            this.optionGroupRef?.toArray()[value.group];
+          const optionGroupElement = this.optionGroupRef?.toArray()[
+            value.group
+          ];
           optionGroupElement &&
             this.scrollByIndex(optionGroupElement, value.option + 1);
         }
@@ -395,7 +396,7 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
     this.focusedOption.group === indexGroup;
 
   setDefaultValues() {
-    if (this.value) {
+    if (this.value !== undefined && this.value !== null) {
       if (Array.isArray(this.value)) {
         const arr = [];
         this.value.map((value) => {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
index fae764667..9ebf78363 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
@@ -12,11 +12,12 @@ export class SelectService {
 
   public selectedValues: BehaviorSubject<any> = new BehaviorSubject(null);
   public filteredOptions: BehaviorSubject<any> = new BehaviorSubject(null);
-  public visualFocused: BehaviorSubject<VisualOptionFocus> =
-    new BehaviorSubject({
-      group: -1,
-      option: -1,
-    });
+  public visualFocused: BehaviorSubject<
+    VisualOptionFocus
+  > = new BehaviorSubject({
+    group: -1,
+    option: -1,
+  });
   public activeOption: BehaviorSubject<VisualOptionFocus> = new BehaviorSubject(
     {
       group: -1,
@@ -25,7 +26,7 @@ export class SelectService {
   );
 
   public setSelectedValues(newOptions): void {
-    this.selectedValues.next(newOptions);
+    this.selectedValues.next(newOptions ?? null);
   }
 
   public setVisualFocused(newFocus): void {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
index 47b38bc37..9b8b4f0fc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
@@ -73,7 +73,7 @@ export class DxcTextareaComponent implements OnInit {
   private _rows = 4;
 
   @Input()
-  verticalGrow = "";
+  verticalGrow = "auto";
 
   @Input()
   error = undefined;