diff --git a/src/app/core/service-detail/service-detail.component.css b/src/app/core/service-detail/service-detail.component.css
index bf35caaa89275b42b8df074b5e5f3458580254b5..f294588ea18aadff978ed41a0dce9916a67ad218 100644
--- a/src/app/core/service-detail/service-detail.component.css
+++ b/src/app/core/service-detail/service-detail.component.css
@@ -12,4 +12,8 @@
 
 .trash-icon:hover {
     color: hsl(0, 100%, 40%);
+}
+
+.ordering-arrow {
+    color: gray;
 }
\ No newline at end of file
diff --git a/src/app/core/service-detail/service-detail.component.html b/src/app/core/service-detail/service-detail.component.html
index 72c4b0a9f4be9687136bae65dad32c1f7d44d16e..74a7a59c2e231445c6014c96b7292e3c10f43ad0 100644
--- a/src/app/core/service-detail/service-detail.component.html
+++ b/src/app/core/service-detail/service-detail.component.html
@@ -82,13 +82,13 @@
         Története
       </h5>
       <div>
-        <button class='btn mt-auto' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
-          (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
-          ↑
+        <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
+                (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
+          <fa-icon [icon]='faArrowUp' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && service.history.length >= 2'
-          (click)='toggleHistoryOrder(historyOrderState.Descending)'>
-          ↓
+                (click)='toggleHistoryOrder(historyOrderState.Descending)'>
+          <fa-icon [icon]='faArrowDown' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn btn-link' *ngIf='isLoggedIn'
                 (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
diff --git a/src/app/core/service-detail/service-detail.component.ts b/src/app/core/service-detail/service-detail.component.ts
index 14c9ad6f2f29b35e317d1ff7474afc5d744d3ff4..1ad84bbcefd3579bebdf84353b865888ac2d5de9 100644
--- a/src/app/core/service-detail/service-detail.component.ts
+++ b/src/app/core/service-detail/service-detail.component.ts
@@ -5,7 +5,7 @@ import { faCheckCircle,
          faTrashAlt,
          faPlusSquare
         } from '@fortawesome/free-regular-svg-icons';
-import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCaretLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Service } from '../../models/service.model';
 import { ServicesService } from '../../services/services.service';
@@ -68,6 +68,14 @@ export class ServiceDetailComponent implements OnInit {
    * ADD icon
    */
   faPlusSquare = faPlusSquare;
+  /**
+   * ARROW UP icon
+   */
+  faArrowUp = faArrowUp;
+  /**
+   * ARROW DOWN icon
+   */
+  faArrowDown = faArrowDown;
   /**
    * Current service that is displayed
    */