diff --git a/src/main/webapp/app/entities/army/army-detail-desktop.component.html b/src/main/webapp/app/entities/army/army-detail-desktop.component.html
index 370550b3..f5f720b4 100644
--- a/src/main/webapp/app/entities/army/army-detail-desktop.component.html
+++ b/src/main/webapp/app/entities/army/army-detail-desktop.component.html
@@ -69,7 +69,7 @@
             <div class="col-md-1"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">CRUSADE POINTS</div>
             <div class="col-md-1" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">ADD TO FORCE</div>
         </div>
-    <div *ngFor="let unit of army.units; let rowIndex=index">
+    <div *ngFor="let unit of sortUnits(army.units); let rowIndex=index">
         <div class="row">
             <div class="col-md-3" style="border: 1px solid black;">
                 Unit {{rowIndex + 1}}:
diff --git a/src/main/webapp/app/entities/army/army-detail-mobile.html b/src/main/webapp/app/entities/army/army-detail-mobile.html
index ee5e82ee..605ba550 100644
--- a/src/main/webapp/app/entities/army/army-detail-mobile.html
+++ b/src/main/webapp/app/entities/army/army-detail-mobile.html
@@ -35,7 +35,8 @@
         </div>
     </div>
 
-    <div *ngFor="let unit of army.units; let rowIndex=index">
+    <div *ngFor="let unit of sortUnits(army.units); let rowIndex=index">
+<!--    <div *ngFor="let unit of army.units; let rowIndex=index">-->
 
         <br/>
         <div class="crusade-cards" style="padding-top: 10px">
diff --git a/src/main/webapp/app/entities/army/army-detail.component.ts b/src/main/webapp/app/entities/army/army-detail.component.ts
index 11acd2d2..0cbde9b5 100644
--- a/src/main/webapp/app/entities/army/army-detail.component.ts
+++ b/src/main/webapp/app/entities/army/army-detail.component.ts
@@ -4,7 +4,7 @@ import { JhiDataUtils } from 'ng-jhipster';
 import { LocalStorage } from 'ngx-webstorage';
 
 import { IArmy } from 'app/shared/model/army.model';
-import { UnitArmy } from '../../shared/model/unit-army.model';
+import {IUnitArmy, UnitArmy} from '../../shared/model/unit-army.model';
 import {DomSanitizer} from "@angular/platform-browser";
 import {ResponsiveService} from "../../responsive.service";
 
@@ -46,6 +46,15 @@ export class ArmyDetailComponent implements OnInit {
     console.log(msg);
   }
 
+  sortUnits(unitArmy: IUnitArmy[] | undefined): Array<UnitArmy> | undefined {
+    if (unitArmy) {
+      // @ts-ignore
+      unitArmy.sort((a,b) => a.unitName.localeCompare(b.unitName));
+      return unitArmy
+    }
+    return unitArmy
+  }
+
   calculatePoints(armylocal: IArmy): Number {
     let total = 0;
     if (armylocal['units']) {