diff --git a/.prettierignore b/.prettierignore
index f26a922d..d002cbaf 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -37,4 +37,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-./package-lock.json
\ No newline at end of file
+./package-lock.json
diff --git a/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts b/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
index a7d25829..108d8b57 100644
--- a/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
+++ b/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
@@ -19,6 +19,8 @@ import { SelectOption } from '../../form-entry/question-models/interfaces/select
 
 import { DataSource } from '../../form-entry/question-models/interfaces/data-source';
 import * as _ from 'lodash';
+import { TranslateService } from '@ngx-translate/core';
+
 @Component({
   selector: 'ofe-remote-select',
   templateUrl: 'remote-select.component.html',
@@ -40,11 +42,12 @@ export class RemoteSelectComponent implements OnInit, ControlValueAccessor {
   value = [];
   loading = false;
   searchText = '';
-  notFoundMsg = 'match no found';
-  @Input() placeholder = 'Search...';
+  notFoundMsg = this.translate.instant('matchNotFound');
+  @Input() placeholder = this.translate.instant('search');
   @Input() componentID: string;
   @Input() disabled = false;
   @Input() theme = 'dark';
+  @Input() invalid = 'false';
   @Output() done: EventEmitter<any> = new EventEmitter<any>();
 
   private _dataSource: DataSource;
@@ -59,7 +62,10 @@ export class RemoteSelectComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  constructor(private renderer: Renderer2) {}
+  constructor(
+    private renderer: Renderer2,
+    private translate: TranslateService
+  ) {}
 
   ngOnInit() {
     this.loadOptions();
@@ -71,7 +77,7 @@ export class RemoteSelectComponent implements OnInit, ControlValueAccessor {
         this.items = results;
         this.notFoundMsg = '';
       } else {
-        this.notFoundMsg = 'Not found';
+        this.notFoundMsg = 'Match not found';
         this.items = [];
       }
     });
diff --git a/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html b/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
index 51b1d2ce..5a981497 100644
--- a/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
+++ b/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
@@ -1,20 +1,21 @@
-<div>
-  <ng-select
-    [ngClass]="{ 'afe-custom': theme === 'light' }"
-    [disabled]="disabled"
-    [items]="remoteOptions$ | async"
-    bindLabel="label"
-    bindValue="value"
-    [multiple]="false"
-    [hideSelected]="true"
-    [compareWith]="compareItems"
-    [trackByFn]="trackByFn"
-    [loading]="loading"
-    typeToSearchText="{{ 'enterMoreCharacters' | translate }}"
-    [typeahead]="remoteOptionInput$"
-    [(ngModel)]="selectedRemoteOptions"
-    [appendTo]="'form'"
-    (ngModelChange)="selected($event)"
-  >
-  </ng-select>
-</div>
+<ng-select
+  [ngClass]="{
+      'afe-custom': theme === 'light',
+      'invalid': invalid ? true : null,
+    }"
+  [disabled]="disabled"
+  [items]="remoteOptions$ | async"
+  bindLabel="label"
+  bindValue="value"
+  [multiple]="false"
+  [hideSelected]="true"
+  [compareWith]="compareItems"
+  [trackByFn]="trackByFn"
+  [loading]="loading"
+  typeToSearchText="{{ 'enterMoreCharacters' | translate }}"
+  [typeahead]="remoteOptionInput$"
+  [(ngModel)]="selectedRemoteOptions"
+  [appendTo]="'form'"
+  (ngModelChange)="selected($event)"
+>
+</ng-select>
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.html b/projects/ngx-formentry/src/components/number-input/number-input.component.html
index 3aa7545e..a538561b 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.html
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.html
@@ -8,7 +8,8 @@
     'cds--number--helpertext': helperText,
     'cds--skeleton': skeleton,
     'cds--number--sm': size === 'sm',
-    'cds--number--xl': size === 'xl'
+    'cds--number--md': size === 'md',
+    'cds--number--lg': size === 'lg'
   }"
 >
   <div
@@ -18,9 +19,9 @@
     }"
   >
     <input
+      ofeNumberScroll
       type="number"
       [id]="id"
-      ofeNumberScroll
       [value]="value"
       [attr.min]="min"
       [attr.max]="max"
@@ -29,8 +30,22 @@
       [attr.step]="step"
       [disabled]="disabled"
       [required]="required"
+      [attr.data-invalid]="invalid ? invalid : null"
+      [placeholder]="placeholder"
       (input)="onNumberInputChange($event)"
     />
+    <svg
+      *ngIf="!skeleton && !warn && invalid"
+      cdsIcon="warning--filled"
+      size="16"
+      class="cds--number__invalid"
+    ></svg>
+    <svg
+      *ngIf="!skeleton && !invalid && warn"
+      cdsIcon="warning--alt--filled"
+      size="16"
+      class="cds--number__invalid cds--number__invalid--warning"
+    ></svg>
     <div class="cds--number__controls">
       <button
         type="button"
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts b/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
index 58818273..f4c29fec 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
@@ -7,7 +7,10 @@ describe('NumberInputComponent', () => {
   let fixture: ComponentFixture<NumberInputComponent>;
   let debugEl: DebugElement;
   let nativeEl: HTMLElement;
-  let numberField: HTMLElement;
+  let containerElement: HTMLElement;
+  let inputElement: HTMLInputElement;
+  let incrementButton: HTMLButtonElement;
+  let decrementButton: HTMLButtonElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -18,75 +21,68 @@ describe('NumberInputComponent', () => {
     component = fixture.componentInstance;
     debugEl = fixture.debugElement;
     nativeEl = debugEl.nativeElement;
-    numberField = nativeEl.querySelector('div.cds--number');
-
+    containerElement = nativeEl.querySelector('div.cds--number');
+    inputElement = containerElement.querySelector('input[type="number"]');
+    incrementButton = containerElement.querySelector('button.up-icon');
+    decrementButton = containerElement.querySelector('button.down-icon');
     component.id = 'test-id';
-    component.theme = 'light';
-    component.disabled = false;
-    component.skeleton = false;
-    component.invalid = false;
-    component.size = 'md';
-    component.required = false;
-    component.value = null;
 
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
-    expect(numberField).toBeTruthy();
+    expect(component instanceof NumberInputComponent).toBe(true);
+    expect(inputElement).toBeDefined();
   });
 
   it('should render a number input with the correct attributes', () => {
-    component.label = 'Pill count';
     component.value = 10;
+    component.label = 'Pill count';
+    component.placeholder = 'Enter pill count';
 
-    const input = numberField.querySelector('input[type="number"]');
-    expect(input.getAttribute('id')).toBe('test-id');
-    expect(input.getAttribute('type')).toBe('number');
-    expect(input.getAttribute('min')).toBe(null);
-    expect(input.getAttribute('max')).toBe(null);
+    fixture.detectChanges();
+
+    expect(inputElement.getAttribute('id')).toBe('test-id');
+    expect(inputElement.getAttribute('type')).toBe('number');
+    expect(inputElement.getAttribute('min')).toBe(null);
+    expect(inputElement.getAttribute('max')).toBe(null);
+    expect(inputElement.getAttribute('placeholder')).toBe('Enter pill count');
   });
 
   it('should decrement and increment the value when the buttons are clicked', () => {
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
-    const incrementBtn = buttons[1];
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(9);
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(8);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(9);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
   });
 
   it('should not decrement the value below the min value', () => {
-    component.min = 10;
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
+    component.min = 10;
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).not.toBe(9);
@@ -94,75 +90,82 @@ describe('NumberInputComponent', () => {
   });
 
   it('should not increment the value above the max value', () => {
-    component.max = 10;
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const incrementBtn = buttons[1];
+    component.max = 10;
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).not.toBe(11);
     expect(component.value).toBe(10);
   });
 
-  it('should decrement or increment the value by the step count value', () => {
-    component.step = 5;
+  it('should decrement or increment the value by the provided step count', () => {
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
-    const incrementBtn = buttons[1];
+    component.step = 5;
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(5);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
   });
 
   it('should render helperText below the input when provided', () => {
+    const helperText = 'Max of 50';
     component.value = 49;
     component.max = 50;
-    component.helperText = 'Max of 50';
+    component.helperText = helperText;
 
     fixture.detectChanges();
 
-    const helperText = numberField.querySelector('div.cds--form__helper-text');
-    expect(helperText.textContent).toBe('Max of 50');
+    const helperTextElement = containerElement.querySelector(
+      'div.cds--form__helper-text'
+    );
+    expect(containerElement.className.includes('cds--number--helpertext'));
+    expect(helperTextElement.textContent).toBe(helperText);
   });
 
-  it('should render the supplied warning text when the warn input is true', () => {
+  it('should render the supplied warning text when the warn property is truthy', () => {
     component.value = 11;
     component.max = 10;
     component.warn = true;
     component.warnText = 'Min value should be 10';
 
-    numberField.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    containerElement.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab' })
+    );
     fixture.detectChanges();
 
-    const warnText = numberField.querySelector('div.cds--form-requirement');
+    const warnText = containerElement.querySelector(
+      'div.cds--form-requirement'
+    );
     expect(warnText.textContent).toBe('Min value should be 10');
   });
 
-  it('should render the supplied invalid text when the invalid input is true', () => {
+  it('should render the supplied invalid text when the invalid property is truthy', () => {
     component.value = 11;
     component.max = 10;
     component.invalid = true;
     component.invalidText = 'Min value should be 10';
 
-    numberField.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    containerElement.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab' })
+    );
     fixture.detectChanges();
 
-    const invalidText = numberField.querySelector('div.cds--form-requirement');
+    const invalidText = containerElement.querySelector(
+      'div.cds--form-requirement'
+    );
     expect(invalidText.textContent).toBe('Min value should be 10');
   });
 });
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.ts b/projects/ngx-formentry/src/components/number-input/number-input.component.ts
index f6a33734..0d74a503 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.ts
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.ts
@@ -60,10 +60,14 @@ export class NumberInputComponent implements ControlValueAccessor {
    * The unique id for the number component.
    */
   @Input() id = `number-${NumberInputComponent.numberCount}`;
+  /**
+   * Sets the placeholder attribute on the `input` element.
+   */
+  @Input() placeholder = '';
   /**
    * Number input field render size
    */
-  @Input() size: 'sm' | 'md' | 'xl' = 'md';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
   /**
    * Reflects the required attribute of the `input` element.
    */
@@ -133,11 +137,11 @@ export class NumberInputComponent implements ControlValueAccessor {
   /**
    * Sets the decrement label text
    */
-  @Input() decrementLabel = 'Decrease';
+  @Input() decrementLabel = 'Decrement';
   /**
    * Sets the increment label text
    */
-  @Input() incrementLabel = 'Increase';
+  @Input() incrementLabel = 'Increment';
 
   protected _value = 0;
 
diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
index 98d01425..45a3f268 100644
--- a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
+++ b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
@@ -49,6 +49,8 @@
         </button>
       </div>
     </ofe-tab>
+
+    <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->
     <div *ngIf="showErrors()" class="container">
       <div
         data-notification
@@ -98,13 +100,13 @@
     </div>
   </ofe-tab-set>
 </div>
+
 <div *ngIf="node.question.renderingType === 'page'">
   <!--Page Components-->
   <ofe-custom-component-wrapper
     [dark]="theme === 'light'"
     [componentConfigs]="node.question.componentConfigs"
-  >
-  </ofe-custom-component-wrapper>
+  ></ofe-custom-component-wrapper>
   <ofe-form-renderer
     *ngFor="let question of node.question.questions"
     [parentComponent]="this"
@@ -113,6 +115,7 @@
     [labelMap]="labelMap"
   ></ofe-form-renderer>
 </div>
+
 <div *ngIf="node.question.renderingType === 'section' && checkSection(node)">
   <div class="cds--layout">
     <ul class="cds--accordion cds--accordion--end">
@@ -169,8 +172,7 @@
   <ofe-custom-component-wrapper
     [dark]="!(theme === 'light')"
     [componentConfigs]="node.question.componentConfigs"
-  >
-  </ofe-custom-component-wrapper>
+  ></ofe-custom-component-wrapper>
   <div class="cds--form-item">
     <!--LEAF CONTROL-->
     <div class="question-area">
@@ -209,8 +211,7 @@
           [formControlName]="node.question.key"
           [id]="node.question.key + 'id'"
           [question]="node.question"
-        >
-        </ofe-custom-control-wrapper>
+        ></ofe-custom-control-wrapper>
       </div>
 
       <ng-template #nativeControls>
@@ -220,6 +221,7 @@
             *ngSwitchCase="'select'"
             [formControlName]="node.question.key"
             [id]="node.question.key + 'id'"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <option
               *ngFor="let option of node.question.options"
@@ -235,8 +237,7 @@
               [formControlName]="node.question.key"
               [id]="node.question.key + 'id'"
               (fileChanged)="upload($event)"
-            >
-            </ofe-file-upload>
+            ></ofe-file-upload>
           </div>
 
           <textarea
@@ -265,6 +266,7 @@
             [componentID]="node.question.key + 'id'"
             [formControlName]="node.question.key"
             [id]="node.question.key + 'id'"
+            [invalid]="node.control.touched && !node.control.valid"
           ></ofe-remote-select>
 
           <ofe-ngx-date-time-picker
@@ -275,10 +277,13 @@
             [formControlName]="node.question.key"
             *ngSwitchCase="'date'"
             [datePickerFormat]="node.question.datePickerFormat"
-          >
-          </ofe-ngx-date-time-picker>
+          ></ofe-ngx-date-time-picker>
+
           <ng-select
-            [ngClass]="{ 'afe-custom': theme === 'light' }"
+            [ngClass]="{
+              'afe-custom': theme === 'light',
+              invalid: node.control.touched && !node.control.valid ? true : null
+            }"
             [id]="node.question.key + 'id'"
             *ngSwitchCase="'multi-select'"
             [multiple]="true"
@@ -286,6 +291,7 @@
             placeholder=""
             clearAllText="Clear"
             [formControlName]="node.question.key"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <ng-option
               *ngFor="let option of node.question.options"
@@ -296,12 +302,16 @@
           </ng-select>
 
           <ng-select
-            [ngClass]="{ 'afe-custom': theme === 'light' }"
+            [ngClass]="{
+              'afe-custom': theme === 'light',
+              invalid: node.control.touched && !node.control.valid ? true : null
+            }"
             [id]="node.question.key + 'id'"
             *ngSwitchCase="'single-select'"
             placeholder=""
             clearAllText="Clear"
             [formControlName]="node.question.key"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <ng-option
               *ngFor="let option of node.question.options"
@@ -321,8 +331,8 @@
             [minlength]="node.question.extras.questionOptions.minLength"
             [formControlName]="node.question.key"
             [attr.placeholder]="node.question.placeholder | translate"
-          >
-          </ofe-number-input>
+            [invalid]="node.control.touched && !node.control.valid"
+          ></ofe-number-input>
 
           <div *ngSwitchCase="'workspace-launcher'">
             <ofe-workspace-launcher
@@ -410,7 +420,7 @@
             </div>
           </div>
           <ofe-appointments-overview [node]="node"></ofe-appointments-overview>
-          <div *ngIf="hasErrors()">
+          <div class="error" *ngIf="hasErrors()">
             <div *ngFor="let e of errors()">
               <span class="text-danger">{{ e }}</span>
             </div>
@@ -437,8 +447,7 @@
 <!-- MESSAGES -->
 <label
   *ngIf="node.control && node.control.alert && node.control.alert !== ''"
-  class="cds--label text-warn"
-  style="display: flex; align-items: center; margin: 0.125rem 0"
+  class="cds--label text-warn warning"
 >
   <svg
     focusable="false"
@@ -508,7 +517,9 @@ <h4 style="margin: 2px; font-weight: bold">
               [node]="child.children[question.key]"
               [parentGroup]="child.control"
               [labelMap]="labelMap"
-            ></ofe-form-renderer>
+            >
+            </ofe-form-renderer>
+
             <div>{{ child.orderNumber }}</div>
             <div class="cds--layout">
               <button
@@ -541,6 +552,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [parentGroup]="child.control"
               [labelMap]="labelMap"
             ></ofe-form-renderer>
+
             <button
               type="button "
               class="cds--btn cds--btn--danger cds--btn--sm"
@@ -571,6 +583,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [labelMap]="labelMap"
               [controlId]="i"
             ></ofe-form-renderer>
+
             <button
               type="button"
               style="width: 100px"
@@ -601,6 +614,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [labelMap]="labelMap"
               [controlId]="i"
             ></ofe-form-renderer>
+
             <button
               type="button"
               style="width: 100px"
@@ -636,6 +650,7 @@ <h4 style="margin: 2px; font-weight: bold">
     </div>
   </div>
 </div>
+
 <div
   *ngIf="node.question.controlType === 2"
   [hidden]="node.control.hidden"
diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
index b509a00c..cddd03bb 100644
--- a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
+++ b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
@@ -105,7 +105,7 @@ li:hover {
   border-style: ridge;
   border-width: 1px;
   border-color: #337ab7;
-  margin-top: 2px;
+  margin-top: 0.25rem;
 }
 
 .hide-info {
@@ -158,7 +158,17 @@ ng-select.form-control {
 }
 
 .error {
-  margin-bottom: 3rem;
+  margin-top: 0.25rem;
+}
+
+.warning {
+  display: flex;
+  align-items: center;
+  margin: 0 0.25rem 0.75rem;
+
+  svg {
+    margin-right: 0.25rem;
+  }
 }
 
 .afe-control {
@@ -207,3 +217,19 @@ ng-select.form-control {
 .custom-text-area {
   width: 100%;
 }
+
+.container {
+  .cds--inline-notification--error {
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-left: 1rem;
+      margin-block-start: 0;
+    }
+  }
+
+  .cds--inline-notification--low-contrast::before {
+    border-width: 1px 1px 0 0;
+  }
+}
diff --git a/projects/ngx-formentry/src/form-entry/utils/messages.ts b/projects/ngx-formentry/src/form-entry/utils/messages.ts
index cb744a28..6a3de285 100644
--- a/projects/ngx-formentry/src/form-entry/utils/messages.ts
+++ b/projects/ngx-formentry/src/form-entry/utils/messages.ts
@@ -1,19 +1,27 @@
 export class Messages {
-  public static readonly requiredField = 'This field is required!';
+  public static readonly requiredField = 'This field is required';
 
-  public static readonly invalidDate = 'Provided date is invalid!';
+  public static readonly invalidDate =
+    'Invalid date. Please select a valid date';
 
-  public static readonly futureDateRestriction = 'Future date is not allowed!';
+  public static readonly futureDateRestriction =
+    'Dates in the future are not allowed';
 
-  public static readonly minLength = 'Min Length should be {minLength}';
+  public static readonly minLength =
+    'Please enter a value with at least {minLength} characters';
 
-  public static readonly maxLength = 'Max Length should be {maxLength}';
+  public static readonly maxLength =
+    'Please enter a value with no more than {maxLength} characters';
 
-  public static readonly maxDate = 'Max Date should be {maxDate}';
+  public static readonly maxDate =
+    'Please select a date that is on or before {maxDate}';
 
-  public static readonly minDate = 'Min Date should be {minDate}';
+  public static readonly minDate =
+    'Please select a date that is on or after {minDate}';
 
-  public static readonly max = 'Max value should be {max}';
+  public static readonly max =
+    'Please enter a value less than or equal to {max}';
 
-  public static readonly min = 'Min value should be {min}';
+  public static readonly min =
+    'Please enter a value greater than or equal to {min}';
 }
diff --git a/projects/ngx-formentry/styles/ngx-formentry.css b/projects/ngx-formentry/styles/ngx-formentry.css
index 43597b52..3916382f 100644
--- a/projects/ngx-formentry/styles/ngx-formentry.css
+++ b/projects/ngx-formentry/styles/ngx-formentry.css
@@ -1,8 +1,18 @@
 .ng-select {
-  padding-bottom: 1.25em;
+  padding-bottom: 0.25em;
   min-width: 16rem;
 }
 
+/* error state */
+.ng-select.invalid > .ng-select-container {
+  outline: 2px solid #da1e28;
+  outline-offset: -2px;
+}
+
+.ng-select.invalid > .ng-select-container::after {
+  border: none;
+}
+
 .ng-select.ng-select-disabled .ng-select-container:after {
   border-bottom-color: transparent;
 }
@@ -89,8 +99,7 @@
     width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.ng-select .ng-select-container .ng-value-container .ng-input {
-  bottom: 0.4375em;
+.ng-select .ng-select-container .ng-input {
   padding: 0 1rem;
 }
 
@@ -228,7 +237,7 @@
 }
 
 .ng-dropdown-panel {
-  margin-top: -1rem;
+  margin-top: 0;
   background: #fff;
   left: 0;
 }
@@ -353,6 +362,7 @@
   padding-left: 5px;
   padding-right: 0;
 }
+
 .ng-select-container {
   background-color: #f4f4f4;
 }
diff --git a/src/app/adult-1.6.json b/src/app/adult-1.6.json
index d042e028..f52d697a 100644
--- a/src/app/adult-1.6.json
+++ b/src/app/adult-1.6.json
@@ -3362,9 +3362,7 @@
                   "type": "obs",
                   "hide": {
                     "field": "tb_current",
-                    "value": [
-                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
-                    ]
+                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
                   },
                   "id": "__ptxCzFD2s"
                 }
@@ -6993,9 +6991,7 @@
                   "type": "obs",
                   "hide": {
                     "field": "q26f",
-                    "value": [
-                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
-                    ]
+                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
                   },
                   "id": "__Jywyp94Lw"
                 }
@@ -8016,16 +8012,7 @@
               "questionOptions": {
                 "concept": "318a5e8b-218c-4f66-9106-cd581dec1f95",
                 "rendering": "date",
-                "weeksList": [
-                  2,
-                  4,
-                  6,
-                  8,
-                  12,
-                  16,
-                  24,
-                  36
-                ]
+                "weeksList": [2, 4, 6, 8, 12, 16, 24, 36]
               },
               "validators": [
                 {
@@ -8055,17 +8042,7 @@
               "questionOptions": {
                 "concept": "a8a666ba-1350-11df-a1f1-0026b9348838",
                 "rendering": "date",
-                "weeksList": [
-                  2,
-                  4,
-                  6,
-                  8,
-                  12,
-                  16,
-                  20,
-                  24,
-                  36
-                ]
+                "weeksList": [2, 4, 6, 8, 12, 16, 20, 24, 36]
               },
               "validators": [
                 {
@@ -8201,4 +8178,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/assets/carbon.select.theme.css b/src/assets/carbon.select.theme.css
index a0761cf7..6093d747 100644
--- a/src/assets/carbon.select.theme.css
+++ b/src/assets/carbon.select.theme.css
@@ -1,7 +1,7 @@
 .ng-select {
   font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
     'Bitstream Vera Sans Mono', Courier, monospace;
-  padding-bottom: 1.25em;
+  padding-bottom: 0.25em;
 }
 
 .ng-select.ng-select-disabled .ng-select-container:after {
@@ -80,7 +80,7 @@
   transition: border-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 }
 
-.ng-select .ng-select-container .ng-value-container {
+.ng-select .ng-select-container {
   align-items: stretch;
   padding: 0;
   border-top: 0.84375em solid transparent;
@@ -95,7 +95,7 @@
     width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.ng-select .ng-select-container .ng-value-container .ng-input {
+.ng-select .ng-select-container .ng-input {
   bottom: 0.4375em;
   padding: 0 1rem;
 }
@@ -128,11 +128,7 @@
   margin: 0 0.4375em 0.4375em 0;
 }
 
-[dir='rtl']
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
+[dir='rtl'] .ng-select.ng-select-multiple .ng-select-container .ng-value {
   margin: 0 0 0.4375em 0.4375em;
 }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index 72c1e4e7..8b091829 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1,55 +1,57 @@
 {
-  "requiredField": "This field is required!",
-  "invalidDate": "Provided date is invalid!",
-  "futureDateRestriction": "Future date is not allowed!",
-  "minLength": "Min Length should be {minLength}",
-  "maxLength": "Max Length should be {maxLength}",
-  "maxDate": "Max Date should be {maxDate}",
-  "minDate": "Min Date should be {minDate}",
-  "max": "Max value should be {max}",
-  "min": "Min value should be {min}",
-  "previousValue": "Previous Value",
+  "aDayAgo": "a day ago",
   "add": "Add",
-  "remove": "Remove",
-  "useValue": "Use Value",
-  "componentLoadingFailed": "Component Loading failed...",
-  "loadingComponent": "Loading Component...",
-  "weeks": "Weeks",
-  "selectWeeks": "Select Weeks",
-  "enterMoreCharacters": "Please enter 2 or more characters",
-  "addSecond": "Add a second",
-  "minusSecond": "Minus a second",
-  "addMinute": "Add a minute",
-  "minusMinute": "Minus a minute",
   "addHour": "Add a hour",
-  "minusHour": "Minus a hour",
-  "previousMonth": "Previous month",
-  "nextMonth": "Next month",
-  "previousYear": "Previous year",
-  "nextYear": "Next year",
-  "previous21Years": "Previous 21 years",
-  "next21Years": "Next 21 years",
-  "changeToMonthView": "Change to month view",
-  "chooseMonthAndYear": "Choose month and year",
+  "addMinute": "Add a minute",
+  "addSecond": "Add a second",
   "aFewSecondsAgo": "a few seconds ago",
   "aMinuteAgo": "a minute ago",
-  "minutesAgo": " minutes ago",
-  "anHourAgo": "an hour ago",
-  "hoursAgo": " hours ago",
-  "aDayAgo": "a day ago",
-  "daysAgo": " days ago",
   "aMonthAgo": "a month ago",
-  "monthsAgo": " months ago",
+  "anHourAgo": "an hour ago",
   "aYearAgo": "a year ago",
-  "yearsAgo": " years ago",
   "cancel": "Cancel",
-  "set": "Set",
-  "from": "From",
-  "to": "To",
-  "fix": "Fix",
+  "changeToMonthView": "Change to month view",
+  "chooseMonthAndYear": "Choose month and year",
   "clearEntry": "Are you sure you want to clear this entry?",
+  "componentLoadingFailed": "Component Loading failed...",
+  "daysAgo": " days ago",
   "deleteEntry": "Are you sure you want to delete this item?",
+  "enterMoreCharacters": "Please enter 2 or more characters",
+  "fix": "Fix",
+  "from": "From",
+  "futureDateRestriction": "Dates in the future are not allowed",
+  "hoursAgo": " hours ago",
+  "invalidDate": "Invalid date. Please select a valid date",
+  "loadingComponent": "Loading component...",
+  "max": "Please enter a value less than or equal to {max}",
+  "maxDate": "Please select a date that is on or before {maxDate}",
   "maxEntries": "Cannot have more than {max} entries",
+  "maxLength": "Please enter a value with no more than {maxLength} characters",
+  "min": "Please enter a value greater than or equal to {min}",
+  "minDate": "Please select a date that is on or after {minDate}",
+  "minLength": "Please enter a value with at least {minLength} characters",
+  "minusHour": "Minus a hour",
+  "minusMinute": "Minus a minute",
+  "minusSecond": "Minus a second",
+  "minutesAgo": " minutes ago",
+  "monthsAgo": " months ago",
   "next": "Next",
-  "previous": "Previous"
+  "next21Years": "Next 21 years",
+  "nextMonth": "Next month",
+  "nextYear": "Next year",
+  "notFoundMsg": "Match not found",
+  "previous": "Previous",
+  "previous21Years": "Previous 21 years",
+  "previousMonth": "Previous month",
+  "previousValue": "Previous Value",
+  "previousYear": "Previous year",
+  "remove": "Remove",
+  "requiredField": "This field is required",
+  "search": "Search...",
+  "selectWeeks": "Select Weeks",
+  "set": "Set",
+  "to": "To",
+  "useValue": "Use Value",
+  "weeks": "Weeks",
+  "yearsAgo": " years ago"
 }
diff --git a/src/translations/fr.json b/src/translations/fr.json
index d8b710c3..190cc48c 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -1,55 +1,57 @@
 {
-  "requiredField": "Ce champs est requis!",
-  "invalidDate": "La date fournie n'est pas valide!",
-  "futureDateRestriction": "Une date future n'est pas autorisée!",
-  "minLength": "La longueur minimale doit être de {minLength}",
-  "maxLength": "La longueur maximale doit être {maxLength}",
-  "maxDate": "La date maximale doit être {maxDate}",
-  "minDate": "La date minimale doit être {minDate}",
-  "max": "La valeur maximale doit être {max}",
-  "min": "La valeur minimale doit être {min}",
-  "previousValue": "Valeur précédente",
+  "aDayAgo": "il y a un jour",
   "add": "Ajouter",
-  "remove": "Enlever",
-  "useValue": "Utiliser la valeur",
-  "componentLoadingFailed": "Le chargement du composant a échoué...",
-  "loadingComponent": "Chargement du composant...",
-  "weeks": "Semaines",
-  "selectWeeks": "Sélectionnez des semaines",
-  "enterMoreCharacters": "Veuillez entrer au moins 2 caractères",
-  "addSecond": "Ajouter une seconde",
-  "minusSecond": "Enlever une seconde",
-  "addMinute": " Ajouter une minute",
-  "minusMinute": "Enlever une minute",
   "addHour": "Ajouter une heure",
-  "minusHour": "Enlever une heure",
-  "previousMonth": "Mois précédent",
-  "nextMonth": "Mois suivant",
-  "previousYear": "Année précédente",
-  "nextYear": "Année suivante",
-  "previous21Years": "21 dernières années",
-  "next21Years": "Prochaines 21 années",
-  "changeToMonthView": "Changer pour une vue mensuelle",
-  "chooseMonthAndYear": "Choisissez le mois et l'année",
+  "addMinute": " Ajouter une minute",
+  "addSecond": "Ajouter une seconde",
   "aFewSecondsAgo": "il y a quelques secondes",
   "aMinuteAgo": "il y a une minute",
-  "minutesAgo": " minutes",
-  "anHourAgo": "il y a une heure",
-  "hoursAgo": " heures",
-  "aDayAgo": "il y a un jour",
-  "daysAgo": " jours",
   "aMonthAgo": "il y a un mois",
-  "monthsAgo": " mois",
+  "anHourAgo": "il y a une heure",
   "aYearAgo": "il y a un an",
-  "yearsAgo": " ans",
   "cancel": "Annuler",
-  "set": "Paramétrer",
-  "from": "A partir de",
-  "to": "Jusqu'à",
-  "fix": "Corriger",
+  "changeToMonthView": "Changer pour une vue mensuelle",
+  "chooseMonthAndYear": "Choisissez le mois et l'année",
   "clearEntry": "Êtes-vous sûr(e) de vouloir effacer cette entrée ?",
+  "componentLoadingFailed": "Le chargement du composant a échoué...",
+  "daysAgo": " jours",
   "deleteEntry": "Êtes-vous sûr(e) de vouloir supprimer cet élément ?",
+  "enterMoreCharacters": "Veuillez entrer au moins 2 caractères",
+  "fix": "Corriger",
+  "from": "A partir de",
+  "futureDateRestriction": "Les dates futures ne sont pas autorisées",
+  "hoursAgo": " heures",
+  "invalidDate": "Date invalide. Veuillez sélectionner une date valide",
+  "loadingComponent": "Chargement du composant...",
+  "max": "Veuillez entrer une valeur inférieure ou égale à {max}",
+  "maxDate": "Veuillez sélectionner une date qui est au plus tard le {maxDate}",
   "maxEntries": "Vous ne pouvez pas avoir plus de {max} entrées",
+  "maxLength": "Veuillez saisir une valeur de {maxLength} caractères maximum",
+  "min": "Veuillez entrer une valeur supérieure ou égale à {min}",
+  "minDate": "Veuillez sélectionner une date qui est au plus tôt le {minDate}",
+  "minLength": "Veuillez saisir une valeur d'au moins {minLength} caractères",
+  "minusHour": "Enlever une heure",
+  "minusMinute": "Enlever une minute",
+  "minusSecond": "Enlever une seconde",
+  "minutesAgo": " minutes",
+  "monthsAgo": " mois",
   "next": "Suivant",
-  "previous": "Précédent"
+  "next21Years": "Prochaines 21 années",
+  "nextMonth": "Mois suivant",
+  "nextYear": "Année suivante",
+  "notFoundMsg": "Match non trouvé",
+  "previous": "Précédent",
+  "previous21Years": "21 dernières années",
+  "previousMonth": "Mois précédent",
+  "previousValue": "Valeur précédente",
+  "previousYear": "Année précédente",
+  "remove": "Enlever",
+  "requiredField": "Ce champs est requis",
+  "search": "Rechercher...",
+  "selectWeeks": "Sélectionnez des semaines",
+  "set": "Paramétrer",
+  "to": "Jusqu'à",
+  "useValue": "Utiliser la valeur",
+  "weeks": "Semaines",
+  "yearsAgo": " ans"
 }
diff --git a/src/translations/km.json b/src/translations/km.json
index 92837a7c..5f05fe1b 100644
--- a/src/translations/km.json
+++ b/src/translations/km.json
@@ -1,14 +1,14 @@
 {
   "aDayAgo": "មួយថ្ងៃមុន",
-  "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
-  "aMinuteAgo": "មួយនាទីមុន",
-  "aMonthAgo": "មួយ​ខែមុន",
-  "aYearAgo": "មួយ​ឆ្នាំមុន",
   "add": "បន្ថែម",
   "addHour": "បន្ថែមមួយម៉ោង",
   "addMinute": "បន្ថែមមួយនាទី",
   "addSecond": "បន្ថែមមួយវិនាទី",
+  "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
+  "aMinuteAgo": "មួយនាទីមុន",
+  "aMonthAgo": "មួយ​ខែមុន",
   "anHourAgo": "មួយ​ម៉ោង​មុន",
+  "aYearAgo": "មួយ​ឆ្នាំមុន",
   "cancel": "បោះបង់",
   "changeToMonthView": "ប្តូរទម្រង់ទៅជាខែ",
   "chooseMonthAndYear": "ជ្រើសរើសខែ និងឆ្នាំ",
@@ -26,18 +26,18 @@
   "formSubmissionFailed": "ការបញ្ជូនទម្រង់ទិន្នន័យមិនដំណើរការ។ បញ្ហាមិនដំណើរការ៖ {error}",
   "formSubmittedSuccessfully": "Tទម្រង់ទិន្នន័យបានបញ្ជូនដោយជោគជ័យ",
   "from": "ពី",
-  "futureDateRestriction": "មិនអនុញ្ញាតិឱ្យបញ្ចូលកាលបរិច្ឆេទអនាគត!",
+  "futureDateRestriction": "មិនអនុញ្ញាតឱ្យមានកាលបរិច្ឆេទនៅថ្ងៃអនាគតទេ",
   "hoursAgo": " ច្រើន​ម៉ោង​កន្លងទៅ",
-  "invalidDate": "កាលបរិច្ឆេទ​ដែល​បំពេញ​មិន​ត្រឹមត្រូវ!",
+  "invalidDate": "កាលបរិច្ឆេទមិនត្រឹមត្រូវ។ សូមជ្រើសរើសកាលបរិច្ឆេទត្រឹមត្រូវ",
   "loading": "កំពុងចម្លង...",
   "loadingComponent": "កំពុង​ចម្លងទិន្នន័យ...",
-  "max": "តម្លៃអតិបរមាគួរតែមាន {max}",
-  "maxDate": "កាលបរិច្ឆេទអតិបរមាគួរតែមាន {maxDate}",
+  "max": "សូមបញ្ចូលតម្លៃដែលតិចជាងឬស្មើនឹង {max}",
+  "maxDate": "សូមជ្រើសរើសកាលបរិច្ឆេទដែលនៅឬមុន {maxDate}",
   "maxEntries": "មិនអាចមានធាតុច្រើនជាង {max} ទេ",
-  "maxLength": "ចំនួនអក្សរអតិបរមាគួរតែមាន {maxLength}",
-  "min": "តម្លៃអប្បបរមាគួរតែមាន {min}",
-  "minDate": "កាលបរិច្ឆេទអប្បបរមាគួរតែមាន {minDate}",
-  "minLength": "ចំនួនអក្សរអប្បបរមាគួរតែមាន {minLength}",
+  "maxLength": "សូមបញ្ចូលតម្លៃដែលមិនលើសពី {maxLength} តួអក្សរ",
+  "min": "សូមបញ្ចូលតម្លៃដែលធំជាងឬស្មើនឹង {min}",
+  "minDate": "សូមជ្រើសរើសកាលបរិច្ឆេទដែលនៅឬក្រោយ {minDate}",
+  "minLength": "សូមបញ្ចូលតម្លៃដែលយ៉ាងហោចណាស់ {minLength} តួអក្សរ",
   "minusHour": "ដកមួយម៉ោង",
   "minusMinute": "ដកមួយនាទី",
   "minusSecond": "ដកមួយវិនាទី",
@@ -47,6 +47,7 @@
   "next21Years": "២១ ឆ្នាំក្រោយ",
   "nextMonth": "ខែក្រោយ",
   "nextYear": "ឆ្នាំក្រោយ",
+  "notFoundMsg": "រកមិនឃើញផ្គូផ្គង",
   "patientIdentifierDuplication": "ស្ទួនលេខកូដអត្តសញ្ញាណអ្នកជំងឺ",
   "patientIdentifierDuplicationDescription": "លេខកូដអត្តសញ្ញាណដែលបានបញ្ចូល សម្រាប់អ្នកជំងឺមានរួចហើយ។ សូមពិនិត្យមើលលេខកូដអត្តសញ្ញាណ ហើយព្យាយាមម្តងទៀត",
   "previous": "មុន",
@@ -55,8 +56,9 @@
   "previousValue": "តម្លៃពីមុន",
   "previousYear": "ឆ្នាំមុន",
   "remove": "ដកចេញ",
-  "requiredField": "ប្រអប់​នេះ​ត្រូវតែ​បំពេញ!",
+  "requiredField": "ប្រអប់​នេះ​ត្រូវតែ​បំពេញ",
   "saveAndCloseButton": "រក្សាទុក និងបិទ",
+  "search": "ស្វែងរក...",
   "selectWeeks": "ជ្រើសរើសសប្តាហ៍",
   "set": "កំណត់",
   "submitting": "បញ្ជូន",