diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index 235924f98f..b1483f99a5 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -95,10 +95,10 @@ export class DashboardUtilsService {
     }
     if (isUndefined(dashboard.configuration.states)) {
       dashboard.configuration.states = {
-        default: this.createDefaultState(dashboard.title, true)
+        Default: this.createDefaultState(dashboard.title, true)
       };
 
-      const mainLayout = dashboard.configuration.states.default.layouts.main;
+      const mainLayout = dashboard.configuration.states.Default.layouts.main;
       for (const id of Object.keys(dashboard.configuration.widgets)) {
         const widget = dashboard.configuration.widgets[id];
         mainLayout.widgets[id] = {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
index 0a4abccf61..223dfdbb54 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
@@ -109,12 +109,10 @@ export class DashboardStateDialogComponent extends
 
   private validateDuplicateStateId(): ValidatorFn {
     return (c: UntypedFormControl) => {
-      const newStateId: string = c.value.toLowerCase();
+      const newStateId: string = c.value;
       if (newStateId) {
-        const existing = Object.keys(this.states).some(
-          key => key.toLowerCase() === newStateId
-        );
-        if (existing && newStateId !== this.prevStateId.toLowerCase()) {
+        const existing = this.states[newStateId];
+        if (existing && newStateId !== this.prevStateId) {
           return {
             stateExists: true
           };
@@ -140,8 +138,7 @@ export class DashboardStateDialogComponent extends
   save(): void {
     this.submitted = true;
     this.state = {...this.state, ...this.stateFormGroup.value};
-    this.state.name = this.state.name.toLowerCase().trim();
-    this.state.id = this.state.id.toLowerCase().trim();
+    this.state.id = this.state.id.trim();
     this.dialogRef.close(this.state);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index 1e77ae97e6..03604d6d94 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -18,6 +18,6 @@
 <mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
     [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
   <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
-    {{ getStateName(stateKv.key, stateKv.value)  | titlecase }}
+    {{getStateName(stateKv.key, stateKv.value)}}
   </mat-option>
 </mat-select>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index bb17e53f8f..0119c8e757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -80,13 +80,13 @@
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.name | titlecase }}
+                    {{ state.name }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="id">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.id | titlecase }}
+                    {{ state.id }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="root">