diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
index a90786b..39b82a3 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -4,7 +4,7 @@
     <div class="flex flex-col p-8 pb-0 overflow-hidden">
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
-                <mat-label>Display</mat-label>
+                <mat-label>Display Title</mat-label>
                 <mat-select [(ngModel)]="dashboardDisplay">
                     <mat-option value="name">Name</mat-option>
                     <mat-option value="serial_id">Serial ID</mat-option>
@@ -17,10 +17,7 @@
                 <mat-label>Sort By</mat-label>
                 <mat-select [(ngModel)]="dashboardSort">
                     <mat-option value="status">Status</mat-option>
-                    <mat-option value="name" disabled>Name</mat-option>
-                    <mat-option value="serial_id" disabled>Serial ID</mat-option>
-                    <mat-option value="uuid" disabled>UUID</mat-option>
-                    <mat-option value="label" disabled>Label</mat-option>
+                    <mat-option value="title">Title</mat-option>
                 </mat-select>
             </mat-form-field>
         </div>
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
index 6fa33a6..e719d09 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
@@ -51,7 +51,7 @@
             <div class="flex flex-wrap w-full" *ngFor="let hostId of hostGroups | keyvalue">
                 <h3 class="ml-4" *ngIf="hostId.key">{{hostId.key}}</h3>
                 <div class="flex flex-wrap w-full">
-                    <app-dashboard-device class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
+                    <app-dashboard-device class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboardSort:config.dashboardDisplay )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
                 </div>
             </div>
 
diff --git a/webapp/frontend/src/app/shared/device-sort.pipe.ts b/webapp/frontend/src/app/shared/device-sort.pipe.ts
index 57f2859..bc07c70 100644
--- a/webapp/frontend/src/app/shared/device-sort.pipe.ts
+++ b/webapp/frontend/src/app/shared/device-sort.pipe.ts
@@ -1,32 +1,59 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-device.component";
 
 @Pipe({
   name: 'deviceSort'
 })
 export class DeviceSortPipe implements PipeTransform {
 
-    numericalStatus(deviceSummary): number {
-        if(!deviceSummary.smart){
-            return 0
-        } else if (deviceSummary.device.device_status == 0){
-            return 1
-        } else {
-            return deviceSummary.device.device_status * -1 // will return range from -1, -2, -3
+    statusCompareFn(a: any, b: any) {
+        function deviceStatus(deviceSummary): number {
+            if(!deviceSummary.smart){
+                return 0
+            } else if (deviceSummary.device.device_status == 0){
+                return 1
+            } else {
+                return deviceSummary.device.device_status * -1 // will return range from -1, -2, -3
+            }
         }
+
+        let left = deviceStatus(a)
+        let right = deviceStatus(b)
+
+        return left - right;
     }
 
+    titleCompareFn(dashboardDisplay: string) {
+        return function (a: any, b: any){
+            let _dashboardDisplay = dashboardDisplay
+            let left = deviceDisplayTitle(a.device, _dashboardDisplay) || deviceDisplayTitle(a.device, 'name')
+            let right = deviceDisplayTitle(b.device, _dashboardDisplay) || deviceDisplayTitle(b.device, 'name')
 
-  transform(deviceSummaries: Array<unknown>, sortBy = ''): Array<unknown> {
-      //failed, unknown/empty, passed
-      deviceSummaries.sort((a: any, b: any) => {
+            if( left < right )
+                return -1;
 
-          let left = this.numericalStatus(a)
-          let right = this.numericalStatus(b)
+            if( left > right )
+                return 1;
 
-          return left - right;
-      });
+            return 0;
+        }
+    }
 
 
+  transform(deviceSummaries: Array<unknown>, sortBy = 'status', dashboardDisplay = "name"): Array<unknown> {
+    let compareFn = undefined
+    switch (sortBy) {
+        case 'status':
+            compareFn = this.statusCompareFn
+            break;
+        case 'title':
+            compareFn = this.titleCompareFn(dashboardDisplay)
+            break;
+    }
+
+      //failed, unknown/empty, passed
+      deviceSummaries.sort(compareFn);
+
     return deviceSummaries;
   }