diff --git a/package-lock.json b/package-lock.json
index b368f52540c42a780cd698836f48554d70eeb0af..64d91b8d2214a11445fb4d61c237d4dd3743aa3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.2",
         "@fortawesome/free-solid-svg-icons": "^5.15.2",
         "@ng-bootstrap/ng-bootstrap": "^9.1.0",
-        "bootstrap": "^4.5.0",
+        "bootstrap": "^5.0.0-beta3",
         "jwt-decode": "^3.1.2",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.0",
@@ -2171,6 +2171,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "11.2.12",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.2.12.tgz",
@@ -3312,9 +3322,16 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+      "version": "5.0.0-beta3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz",
+      "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.9.1"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -18162,6 +18179,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+      "peer": true
+    },
     "@schematics/angular": {
       "version": "11.2.12",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.2.12.tgz",
@@ -19164,9 +19187,10 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+      "version": "5.0.0-beta3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz",
+      "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==",
+      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
diff --git a/package.json b/package.json
index 3681eb46c8ae065126019cb0d2112da65cdcc50a..b41a457bf44375fc395f51bf0a625166641e3311 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@ng-bootstrap/ng-bootstrap": "^9.1.0",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^5.0.0-beta3",
     "jwt-decode": "^3.1.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
diff --git a/src/app/core/service-detail/service-detail.component.css b/src/app/core/service-detail/service-detail.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f294588ea18aadff978ed41a0dce9916a67ad218 100644
--- a/src/app/core/service-detail/service-detail.component.css
+++ b/src/app/core/service-detail/service-detail.component.css
@@ -0,0 +1,19 @@
+.check-icon {
+    color: green;
+}
+  
+.times-icon {
+    color: red;
+}
+
+.trash-icon {
+    color: red;
+}
+
+.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 d0ceaa8650da14dc594a324ea42ce793c517ef8f..dff025edee1111e088e82cadb49a2b9c0f2bf371 100644
--- a/src/app/core/service-detail/service-detail.component.html
+++ b/src/app/core/service-detail/service-detail.component.html
@@ -6,11 +6,11 @@
       </h5>
       <div>
         <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.EDIT_SERVICE)'>
-          Szerkesztés
+          <fa-icon [icon]='faEdit'></fa-icon>
         </button>
         <button class='btn btn-link' *ngIf='isLoggedIn'
                 (click)='updateState(serviceDetailComponentState.DELETE_SERVICE)'>
-          Törlés
+          <fa-icon [icon]='faTrashAlt' class="trash-icon"></fa-icon>
         </button>
       </div>
     </div>
@@ -42,9 +42,11 @@
                        formControlName='description'>
               </div>
               <div class='mb-3'>
-                <label for='editServiceFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label>
-                <input type='checkbox' class='form-control' id='editServiceFormIsOkay' aria-describedby='description'
-                       formControlName='isOkay'>
+                <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label>
+                <div class="d-flex justify-content-center">
+                  <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description'
+                             formControlName='isOkay'>
+                </div>
               </div>
               <div class='d-flex justify-content-end align-items-center mt-2'>
                 <button class='btn btn-secondary' (click)='updateState(serviceDetailComponentState.NONE)'
@@ -56,14 +58,18 @@
             </form>
           </div>
         </div>
-        <div>
-          neve: {{service.name}}
+        <div class="d-flex flex-sm-row flex-column pb-3">
+          <b>Név:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
+          {{service.name}}
         </div>
-        <div>
-          leiras: {{service.description}}
+        <div class="d-flex flex-sm-row flex-column pb-3">
+          <b>Leírás:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
+          {{service.description}}
         </div>
-        <div>
-          jelenleg rendben van-e: {{service.isOkay ? "Igen" : "Nem"}}
+        <div class="d-flex flex-sm-row flex-column">
+          <b>Státusz:&nbsp;&nbsp;</b>
+          <fa-icon *ngIf='service.isOkay' [icon]='faCheckCircle' class='check-icon'></fa-icon>
+          <fa-icon *ngIf='!service.isOkay' [icon]='faTimesCircle' class='times-icon'></fa-icon>
         </div>
       </div>
       <app-loader *ngIf='isLoading'></app-loader>
@@ -75,18 +81,20 @@
       <h5 class='base_container_header'>
         Története
       </h5>
-      <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && !isLoggedIn'
-              (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
-        ↑
-      </button>
-      <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && !isLoggedIn'
-              (click)='toggleHistoryOrder(historyOrderState.Descending)'>
-        ↓
-      </button>
-      <button class='btn btn-link' *ngIf='isLoggedIn'
-              (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
-        Új hozzáadása
-      </button>
+      <div>
+        <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)'>
+          <fa-icon [icon]='faArrowDown' class="ordering-arrow"></fa-icon>
+        </button>
+        <button class='btn btn-link' *ngIf='isLoggedIn'
+                (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
+          <fa-icon [icon]='faPlusSquare'></fa-icon>
+        </button>
+      </div>
     </div>
 
 
@@ -141,30 +149,32 @@
       </div>
     </div>
 
-    <div class='border-top mt-3 pt-3' *ngIf='!service.history'>
+    <div class='border-top mt-3 pt-3' *ngIf='service.history.length === 0'>
       Nincs
     </div>
-    <div class='border-top mt-3 pt-3 d-flex flex-row align-items-center'
+    <div class='border-top mt-3 pt-3 align-items-center d-flex flex-row'
           *ngFor='let history of sortByCreation(service.history, currentHistoryOrderState); TrackBy: trackById'>
-      <div>
+      <div class="flex-grow-1">
         {{history.description}}
       </div>
-      <div class="container">
-        <div class="row justify-content-end">
-          <div class="col-md-100 p-1" style="white-space: nowrap;">
-            {{history.createdAt | date: 'yyyy. MMM dd.'}}
-          </div>
-          <div class="col-md-100 p-1" style="white-space: nowrap;">
-            {{history.createdAt | date: 'hh:mm:ss'}}
-          </div>
+      <div class="d-flex flex-md-row flex-column p-3">
+        <div class="pr-sm-1" style="white-space: nowrap;">
+          {{history.createdAt | date: 'yyyy. MMM dd.'}}&nbsp;&nbsp;
         </div>
+        <div class="pl-sm-1" style="white-space: nowrap;">
+          {{history.createdAt | date: 'hh:mm:ss'}}
+        </div>
+      </div>
+      <div class="d-flex flex-row">
+        <button class='btn btn-link' *ngIf='isLoggedIn'
+                (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'>
+          <fa-icon [icon]='faEdit'></fa-icon>
+        </button>
+        <button class='btn btn-link' *ngIf='isLoggedIn'
+                (click)='updateState(serviceDetailComponentState.DELETE_HISTORY, history.id)'>
+          <fa-icon [icon]='faTrashAlt' class="trash-icon"></fa-icon>
+        </button>
       </div>
-      <button class='btn btn-link' *ngIf='isLoggedIn'
-              (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'>Szerkesztés
-      </button>
-      <button class='btn btn-link' *ngIf='isLoggedIn'
-              (click)='updateState(serviceDetailComponentState.DELETE_HISTORY, history.id)'>Törlés
-      </button>
     </div>
   </div>
   <div class='mt-3'>
diff --git a/src/app/core/service-detail/service-detail.component.ts b/src/app/core/service-detail/service-detail.component.ts
index 02e86c724a9faddb2c81e37376523c314ffe1f87..1ad84bbcefd3579bebdf84353b865888ac2d5de9 100644
--- a/src/app/core/service-detail/service-detail.component.ts
+++ b/src/app/core/service-detail/service-detail.component.ts
@@ -1,5 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCheckCircle, 
+         faTimesCircle,
+         faEdit,
+         faTrashAlt,
+         faPlusSquare
+        } from '@fortawesome/free-regular-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';
@@ -38,10 +44,38 @@ export enum HistoryOrderState {
   styleUrls: ['./service-detail.component.css'],
 })
 export class ServiceDetailComponent implements OnInit {
+  /**
+   * OK icon
+   */
+  faCheckCircle = faCheckCircle;
+  /**
+   * NOT OK icon
+   */
+  faTimesCircle = faTimesCircle;
+  /**
+   * EDIT icon
+   */
+  faEdit = faEdit;
+  /**
+   * DELETE icon
+   */
+  faTrashAlt = faTrashAlt;
   /**
    * Fontawesome left arrow icon
    */
   faCaretLeft = faCaretLeft;
+  /**
+   * ADD icon
+   */
+  faPlusSquare = faPlusSquare;
+  /**
+   * ARROW UP icon
+   */
+  faArrowUp = faArrowUp;
+  /**
+   * ARROW DOWN icon
+   */
+  faArrowDown = faArrowDown;
   /**
    * Current service that is displayed
    */
@@ -130,6 +164,9 @@ export class ServiceDetailComponent implements OnInit {
     this.servicesService.getServiceById(this.id).subscribe(
       (s) => {
         this.service = s;
+        if (this.service.history == null) {
+          this.service.history = new Array;
+        }
         this.isLoading = false;
       },
       (error) => {
diff --git a/src/app/core/service-list/service-list.component.html b/src/app/core/service-list/service-list.component.html
index 19fcf08e501b708a19cc85fd15bcf7b6cda25e9a..123c18ee537d31ab960422c29f047cfc5479f4b9 100644
--- a/src/app/core/service-list/service-list.component.html
+++ b/src/app/core/service-list/service-list.component.html
@@ -35,9 +35,11 @@
                    formControlName='description'>
           </div>
           <div class='mb-3'>
-            <label for='createFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label>
-            <input type='checkbox' class='form-control' id='createFormIsOkay' aria-describedby='description'
-                   formControlName='isOkay'>
+            <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label>
+            <div class="d-flex justify-content-center">
+              <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description'
+                     formControlName='isOkay'>
+            </div>
           </div>
           <div class='d-flex justify-content-end align-items-center mt-2'>
             <button class='btn btn-secondary' (click)='updateState(serviceListComponentState.NONE)' [class.mr-1]='true'>
@@ -57,12 +59,14 @@
           <div class='mb-3'>
             <label for='editFormDescription' class='form-label'>Szolgáltatás rövid leírása</label>
             <input type='text' class='form-control' id='editFormDescription' aria-describedby='description'
-                   formControlName='description'>
+                    formControlName='description'>
           </div>
           <div class='mb-3'>
-            <label for='editFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label>
-            <input type='checkbox' class='form-control' id='editFormIsOkay' aria-describedby='description'
-                   formControlName='isOkay'>
+            <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label>
+            <div class="d-flex justify-content-center">
+              <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description'
+                      formControlName='isOkay'>
+            </div>
           </div>
           <div class='d-flex justify-content-end align-items-center mt-2'>
             <button class='btn btn-secondary' (click)='updateState(serviceListComponentState.NONE)' [class.mr-1]='true'>