diff --git a/application/controllers/Cis/Documents.php b/application/controllers/Cis/Documents.php
index 31f441634..6e007c1f9 100644
--- a/application/controllers/Cis/Documents.php
+++ b/application/controllers/Cis/Documents.php
@@ -15,9 +15,9 @@ class Documents extends Auth_Controller
 	public function __construct()
 	{
 		parent::__construct([
-			'index' => ['student/anrechnung_beantragen:r','user:r'], // TODO(chris): permissions?
+			'index' => [self::PERM_LOGGED],
 			'student' => ['admin:r'],
-			'download' => ['student/anrechnung_beantragen:r','user:r'] // TODO(chris): permissions?
+			'download' => [self::PERM_LOGGED]
 		]);
 
 		$this->load->model('crm/Prestudentstatus_model', 'PrestudentstatusModel');
diff --git a/application/controllers/Cis/MyLv.php b/application/controllers/Cis/MyLv.php
index 9514d5b6b..08bf843b5 100644
--- a/application/controllers/Cis/MyLv.php
+++ b/application/controllers/Cis/MyLv.php
@@ -13,8 +13,8 @@ class MyLv extends Auth_Controller
 	public function __construct()
 	{
 		parent::__construct([
-			'index' => ['student/anrechnung_beantragen:r','user:r'], // TODO(chris): permissions?
-			'Info' => ['student/anrechnung_beantragen:r','user:r'] // TODO(chris): permissions?
+			'index' => ['basis/cis:r'],
+			'Info' => [self::PERM_LOGGED]
 		]);
 	}
 
diff --git a/application/controllers/Cis/Profil.php b/application/controllers/Cis/Profil.php
index 1141808fe..e991d1976 100644
--- a/application/controllers/Cis/Profil.php
+++ b/application/controllers/Cis/Profil.php
@@ -13,16 +13,16 @@ class Profil extends Auth_Controller
 	public function __construct()
 	{
 		parent::__construct([
-			'index' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'foto_sperre_function' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getView' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'View' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'isMitarbeiter' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'isStudent' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getZustellAdresse' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getZustellKontakt' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getAllNationen' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getGemeinden' => ['student/anrechnung_beantragen:r', 'user:r'],
+			'index' => ['basis/cis:r'],
+			'foto_sperre_function' => ['basis/cis:r'],
+			'getView' => ['basis/cis:r'],
+			'View' => ['basis/cis:r'],
+			'isMitarbeiter' => ['basis/cis:r'],
+			'isStudent' => ['basis/cis:r'],
+			'getZustellAdresse' => ['basis/cis:r'],
+			'getZustellKontakt' => ['basis/cis:r'],
+			'getAllNationen' => ['basis/cis:r'],
+			'getGemeinden' => ['basis/cis:r'],
 
 		]);
 
diff --git a/application/controllers/Cis/ProfilUpdate.php b/application/controllers/Cis/ProfilUpdate.php
index ef767a625..423b0c9c3 100644
--- a/application/controllers/Cis/ProfilUpdate.php
+++ b/application/controllers/Cis/ProfilUpdate.php
@@ -24,16 +24,16 @@ class ProfilUpdate extends Auth_Controller
 			'getProfilUpdateWithPermission' => ['student/stammdaten:r', 'mitarbeiter/stammdaten:r'],
 			'acceptProfilRequest' => ['student/stammdaten:rw', 'mitarbeiter/stammdaten:rw'],
 			'denyProfilRequest' => ['student/stammdaten:rw', 'mitarbeiter/stammdaten:rw'],
-			'show' => ['student/anrechnung_beantragen:r', 'user:r'],
+			'show' => ['basis/cis:r'],
 
-			'insertProfilRequest' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'updateProfilRequest' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'deleteProfilRequest' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'selectProfilRequest' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'insertFile' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getProfilRequestFiles' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getStatus' => ['student/anrechnung_beantragen:r', 'user:r'],
-			'getTopic' => ['student/anrechnung_beantragen:r', 'user:r'],
+			'insertProfilRequest' => ['basis/cis:rw'],
+			'updateProfilRequest' => ['basis/cis:rw'],
+			'deleteProfilRequest' => ['basis/cis:rw'],
+			'selectProfilRequest' => ['basis/cis:r'],
+			'insertFile' => ['basis/cis:rw'],
+			'getProfilRequestFiles' => ['basis/cis:r'],
+			'getStatus' => ['basis/cis:r'],
+			'getTopic' => ['basis/cis:r'],
 		]);
 
 
diff --git a/application/controllers/Cis/Pub.php b/application/controllers/Cis/Pub.php
index 099d093f7..bebc844ab 100644
--- a/application/controllers/Cis/Pub.php
+++ b/application/controllers/Cis/Pub.php
@@ -5,18 +5,18 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
 /**
  *
  */
-class Pub extends FHC_Controller
+class Pub extends Auth_Controller
 {
 	/**
 	 * Constructor
 	 */
 	public function __construct()
 	{
-		parent::__construct();
-
-		// Load Libraries
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
+		parent::__construct(
+		    array(
+			'bild' => ['basis/cis:r']
+		    )
+		);
 	}
 
 	// -----------------------------------------------------------------------------------------------------------------
diff --git a/application/controllers/Cis/Stundenplan.php b/application/controllers/Cis/Stundenplan.php
index 80fb2130a..3e4e1a070 100644
--- a/application/controllers/Cis/Stundenplan.php
+++ b/application/controllers/Cis/Stundenplan.php
@@ -13,7 +13,7 @@ class Stundenplan extends Auth_Controller
 	public function __construct()
 	{
 		parent::__construct([
-			'index' => ['student/anrechnung_beantragen:r','user:r'] // TODO(chris): permissions?
+			'index' => ['basis/cis:r']
 		]);
 	}
 
diff --git a/application/controllers/Cis4.php b/application/controllers/Cis4.php
index 5b3f67403..f82168f83 100644
--- a/application/controllers/Cis4.php
+++ b/application/controllers/Cis4.php
@@ -5,18 +5,18 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
 /**
  *
  */
-class Cis4 extends FHC_Controller
+class Cis4 extends Auth_Controller
 {
 	/**
 	 * Constructor
 	 */
 	public function __construct()
 	{
-		parent::__construct();
-
-		// Loads Libraries
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
+		parent::__construct(
+		    array(
+			'index' => 'basis/cis:r'
+		    )
+		);
 	}
 
 	// -----------------------------------------------------------------------------------------------------------------
diff --git a/application/controllers/CisHmvc.php b/application/controllers/CisHmvc.php
index 640f7f640..ce2664823 100644
--- a/application/controllers/CisHmvc.php
+++ b/application/controllers/CisHmvc.php
@@ -7,16 +7,18 @@ use \DOMDocument as DOMDocument;
 /**
  *
  */
-class CisHmvc extends FHC_Controller
+class CisHmvc extends Auth_Controller
 {
 	/**
 	 * Constructor
 	 */
 	public function __construct()
 	{
-		parent::__construct();
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
+		parent::__construct(
+		    array(
+			'index' => 'basis/cis:r'
+		    )
+		);
 
 		$this->load->model('content/Content_model', 'ContentModel');
 	}
@@ -43,7 +45,7 @@ class CisHmvc extends FHC_Controller
 		$path = explode('/', uri_string());
 		array_shift($path); // NOTE(chris): remove cis4/
 		
-		$menu = $this->ContentModel->getMenu(6739, get_uid());
+		$menu = $this->ContentModel->getMenu(6739, getAuthUID());
 		if (isError($menu)) {
 			// TODO(chris): Error Handling
 			return $this->load->view('CisHmvc/Error', ['error' => getError($menu)]);
diff --git a/application/controllers/CisHmvc/Dashboard.php b/application/controllers/CisHmvc/Dashboard.php
index 2d95fb652..229fc7b85 100644
--- a/application/controllers/CisHmvc/Dashboard.php
+++ b/application/controllers/CisHmvc/Dashboard.php
@@ -14,7 +14,7 @@ class Dashboard extends Auth_Controller
 	{
 		parent::__construct(
 			array(
-				'index' => 'user:r'
+				'index' => 'dashboard/benutzer:r'
 			)
 		);
 	}
diff --git a/application/controllers/CisHtml/Cms.php b/application/controllers/CisHtml/Cms.php
index c2feccd59..c128ec81b 100644
--- a/application/controllers/CisHtml/Cms.php
+++ b/application/controllers/CisHtml/Cms.php
@@ -6,7 +6,7 @@ if (!defined('BASEPATH'))
 /**
  *
  */
-class Cms extends FHC_Controller
+class Cms extends Auth_Controller
 {
 	/**
 	 * Constructor
@@ -14,11 +14,14 @@ class Cms extends FHC_Controller
 
 	public function __construct()
 	{
-		parent::__construct();
+		parent::__construct(
+		    array(
+			'content' => 'basis/cis:r',
+			'news' => 'basis/cis:r',
+		    )
+		);
 
 		// Loads Libraries
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
 		$this->load->library('CmsLib');
 
 		// Loads phrases system
diff --git a/application/controllers/CisHtml/Dashboard.php b/application/controllers/CisHtml/Dashboard.php
index e4d422788..bce24e9b8 100644
--- a/application/controllers/CisHtml/Dashboard.php
+++ b/application/controllers/CisHtml/Dashboard.php
@@ -14,7 +14,7 @@ class Dashboard extends Auth_Controller
 	{
 		parent::__construct(
 			array(
-				'index' => 'user:r'
+				'index' => 'dashboard/benutzer:r'
 			)
 		);
 
diff --git a/application/controllers/CisVue/Cms.php b/application/controllers/CisVue/Cms.php
index d1ab3c23b..d1fe5468e 100644
--- a/application/controllers/CisVue/Cms.php
+++ b/application/controllers/CisVue/Cms.php
@@ -6,18 +6,24 @@ if (!defined('BASEPATH'))
 /**
  *
  */
-class Cms extends FHC_Controller
+class Cms extends Auth_Controller
 {
 	/**
 	 * Constructor
 	 */
 	public function __construct()
 	{
-		parent::__construct();
+		parent::__construct(
+		    array(
+			'content' => 'basis/cis:r',
+			'getNews' => 'basis/cis:r',
+			'getNewsRowCount' => 'basis/cis:r',
+			'getRoomInformation' => 'basis/cis:r',
+			'news' => 'basis/cis:r'
+		    )
+		);
 
 		// Loads Libraries
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
 		$this->load->library('CmsLib');
 
 		// Loads phrases system
diff --git a/application/controllers/CisVue/Dashboard.php b/application/controllers/CisVue/Dashboard.php
index 94af6531b..5a0996a96 100644
--- a/application/controllers/CisVue/Dashboard.php
+++ b/application/controllers/CisVue/Dashboard.php
@@ -14,7 +14,7 @@ class Dashboard extends Auth_Controller
 	{
 		parent::__construct(
 			array(
-				'index' => 'user:r'
+				'index' => 'dashboard/benutzer:r'
 			)
 		);
 	}
diff --git a/application/controllers/api/frontend/v1/Cms.php b/application/controllers/api/frontend/v1/Cms.php
index 51acf5067..16142532b 100644
--- a/application/controllers/api/frontend/v1/Cms.php
+++ b/application/controllers/api/frontend/v1/Cms.php
@@ -179,6 +179,8 @@ class Cms extends FHCAPI_Controller
 
 		$news = $this->getDataOrTerminateWithError($news);
 
+		$this->addMeta('test', $this->p->t('global', 'studiengangsleitung'));
+		$this->addMeta('phrases', json_decode($this->p->getJson()));
 		$this->terminateWithSuccess($news);
 
 	}
diff --git a/application/controllers/api/frontend/v1/LvMenu.php b/application/controllers/api/frontend/v1/LvMenu.php
index 2a1f08772..f9a8d0568 100644
--- a/application/controllers/api/frontend/v1/LvMenu.php
+++ b/application/controllers/api/frontend/v1/LvMenu.php
@@ -84,7 +84,7 @@ class LvMenu extends FHCAPI_Controller
 		die($p->t('global/fehlerBeimOeffnenDerDatenbankverbindung'));
 
 		// get the user
-		if (!$user=get_uid())
+		if (!$user=getAuthUID())
 			die($p->t('global/nichtAngemeldet'));
 
 		// check if is_lector
diff --git a/application/controllers/components/Cis/Mylv.php b/application/controllers/components/Cis/Mylv.php
index a8baee753..1fdb7e2a1 100644
--- a/application/controllers/components/Cis/Mylv.php
+++ b/application/controllers/components/Cis/Mylv.php
@@ -31,7 +31,7 @@ class Mylv extends Auth_Controller
 	{
 		$this->load->model('education/Lehrveranstaltung_model', 'LehrveranstaltungModel');
 
-		$result = $this->LehrveranstaltungModel->getLvsByStudentWithGrades(get_uid());
+		$result = $this->LehrveranstaltungModel->getLvsByStudentWithGrades(getAuthUID());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
@@ -45,7 +45,7 @@ class Mylv extends Auth_Controller
 	{
 		$this->load->model('organisation/Studiensemester_model', 'StudiensemesterModel');
 
-		$result = $this->StudiensemesterModel->getWhereStudentHasLvs(get_uid());
+		$result = $this->StudiensemesterModel->getWhereStudentHasLvs(getAuthUID());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
@@ -59,7 +59,7 @@ class Mylv extends Auth_Controller
 	{
 		$this->load->model('education/Lehrveranstaltung_model', 'LehrveranstaltungModel');
 
-		$result = $this->LehrveranstaltungModel->getLvsByStudentWithGrades(get_uid(), $studiensemester_kurzbz, getUserLanguage());
+		$result = $this->LehrveranstaltungModel->getLvsByStudentWithGrades(getAuthUID(), $studiensemester_kurzbz, getUserLanguage());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
@@ -202,7 +202,7 @@ class Mylv extends Auth_Controller
 	{
 		$this->load->model('education/Pruefung_model', 'PruefungModel');
 
-		$result = $this->PruefungModel->getByStudentAndLv(get_uid(), $lehrveranstaltung_id, getUserLanguage());
+		$result = $this->PruefungModel->getByStudentAndLv(getAuthUID(), $lehrveranstaltung_id, getUserLanguage());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
diff --git a/application/controllers/components/Cis/Stundenplan.php b/application/controllers/components/Cis/Stundenplan.php
index a88d061cb..a9f35c651 100644
--- a/application/controllers/components/Cis/Stundenplan.php
+++ b/application/controllers/components/Cis/Stundenplan.php
@@ -14,9 +14,9 @@ class Stundenplan extends Auth_Controller
 	public function __construct()
 	{
 		parent::__construct([
-			'index' => ['student/anrechnung_beantragen:r','user:r'], // TODO(chris): permissions?
-			'Reservierungen' => ['student/anrechnung_beantragen:r','user:r'], // TODO(chris): permissions?
-			'Stunden' => ['student/anrechnung_beantragen:r','user:r'], // TODO(chris): permissions?
+			'index' => ['basis/cis'],
+			'Reservierungen' => ['basis/cis'],
+			'Stunden' => ['basis/cis'],
 		]);
 	}
 
@@ -29,12 +29,12 @@ class Stundenplan extends Auth_Controller
 	{
 		$this->load->model('ressource/Stundenplan_model', 'StundenplanModel');
 
-		/* $result = $this->StundenplanModel->loadForUid(get_uid());
+		/* $result = $this->StundenplanModel->loadForUid(getAuthUID());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
  		*/
-		$res = $this->StundenplanModel->stundenplanGruppierung($this->StundenplanModel->getStundenplanQuery(get_uid())); 
+		$res = $this->StundenplanModel->stundenplanGruppierung($this->StundenplanModel->getStundenplanQuery(getAuthUID())); 
 		
 		$res = getData($res);
 		
@@ -47,7 +47,7 @@ class Stundenplan extends Auth_Controller
 	{
 		$this->load->model('ressource/Reservierung_model', 'ReservierungModel');
 
-		$result = $this->ReservierungModel->loadForUid(get_uid());
+		$result = $this->ReservierungModel->loadForUid(getAuthUID());
 
 		if (isError($result))
 			return $this->outputJsonError(getError($result));
diff --git a/application/controllers/components/CisVue.php b/application/controllers/components/CisVue.php
index b5433ebfe..106c6058a 100644
--- a/application/controllers/components/CisVue.php
+++ b/application/controllers/components/CisVue.php
@@ -5,7 +5,7 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
 /**
  *
  */
-class CisVue extends FHC_Controller
+class CisVue extends Auth_Controller
 {
 
 	/**
@@ -13,14 +13,9 @@ class CisVue extends FHC_Controller
 	 */
 	public function __construct()
 	{
-		parent::__construct();
-
-		// Loads authentication library and starts authentication
-		$this->load->library('AuthLib');
-		$this->load->library('PermissionLib');
-
-		if (!isLogged())
-			show_404();
+		parent::__construct([
+			'Menu' => [self::PERM_LOGGED]
+		]);
 	}
 
 	//------------------------------------------------------------------------------------------------------------------
@@ -32,7 +27,7 @@ class CisVue extends FHC_Controller
 	{
 		$this->load->model('content/Content_model', 'ContentModel');
 		$menu_contentID = $this->ContentModel->getMenuContentID();
-		$result = $this->ContentModel->getMenu($menu_contentID, get_uid());
+		$result = $this->ContentModel->getMenu($menu_contentID, getAuthUID());
 		$menu = getData($result) ?? (object)['childs' => []];
 
 		$this->outputJsonSuccess($menu);
diff --git a/application/controllers/dashboard/DashboardDemo.php b/application/controllers/dashboard/DashboardDemo.php
index 90eb017b8..35d530384 100644
--- a/application/controllers/dashboard/DashboardDemo.php
+++ b/application/controllers/dashboard/DashboardDemo.php
@@ -16,7 +16,7 @@ class DashboardDemo extends Auth_Controller
         // Set required permissions
         parent::__construct(
             array(
-                'index' => 'user:r',
+                'index' => 'dashboard/benutzer:r',
                 'admin' => 'dashboard/admin:rw'
             )
         );
diff --git a/application/libraries/TableWidgetLib.php b/application/libraries/TableWidgetLib.php
index 3af99cca7..feda0d67c 100644
--- a/application/libraries/TableWidgetLib.php
+++ b/application/libraries/TableWidgetLib.php
@@ -26,6 +26,8 @@ class TableWidgetLib
 {
 	const TABLE_UNIQUE_ID = 'tableUniqueId'; // TableWidget unique id
 
+	const TABLE_BOOTSTRAP_VERSION = 'bootstrapVersion'; // TableWidget bootstrap version
+
 	// TableWidget session name
 	const SESSION_NAME = 'FHC_TABLE_WIDGET';
 
diff --git a/application/views/codex/oehbeitrag.php b/application/views/codex/oehbeitrag.php
index feebeddef..ba99bbf0c 100644
--- a/application/views/codex/oehbeitrag.php
+++ b/application/views/codex/oehbeitrag.php
@@ -26,7 +26,6 @@ $this->load->view(
 );
 ?>
 
-<body>
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -63,6 +62,5 @@ $this->load->view(
 		</div>
 	</div>
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/lehre/anrechnung/adminAnrechnung.php b/application/views/lehre/anrechnung/adminAnrechnung.php
index 7674a6b31..adef52d64 100644
--- a/application/views/lehre/anrechnung/adminAnrechnung.php
+++ b/application/views/lehre/anrechnung/adminAnrechnung.php
@@ -7,7 +7,8 @@ $includesArray = array(
     'fontawesome6' => true,
     'ajaxlib' => true,
     'dialoglib' => true,
-    'tabulator4' => true,
+    'tabulator5' => true,
+    'tabulator5JQuery' => true,
     'tablewidget' => true,
     'sbadmintemplate3' => true,
     'navigationwidget' => true,
@@ -48,7 +49,8 @@ $includesArray = array(
         'public/js/lehre/anrechnung/adminAnrechnung.js'
     ),
     'customCSSs' => array(
-        'public/css/sbadmin2/tablesort_bootstrap.css'
+        'public/css/sbadmin2/tablesort_bootstrap.css',
+        'public/css/lehre/anrechnung.css'
     )
 );
 
@@ -83,7 +85,8 @@ if (defined("CIS4")) {
             <div class="row">
                 <div class="col-xs-4">
                     <button class="btn btn-primary azrOpenModal" data-toggle="modal" data-target="#azrModal">
-                        <i class="fa fa-plus"></i> <?php echo $this->p->t('anrechnung', 'anrechnungszeitraumHinzufuegen'); ?>
+                        <i class="fa fa-plus"></i>
+                        <?php echo $this->p->t('anrechnung', 'anrechnungszeitraumHinzufuegen'); ?>
                     </button>
                 </div>
             </div>
@@ -96,48 +99,52 @@ if (defined("CIS4")) {
             </div>
 
             <!-- Modal (für insert und update von Anrechnungszeitraum)-->
-            <div class="modal fade" id="azrModal" tabindex="-1" role="dialog" aria-labelledby="azrModalLabel" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="azrModalLabel"></h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="row">
-                            <input type="hidden" id="anrechnungszeitraum_id" value="">
-                            <input type="hidden" id="defaultStudiensemester_kurzbz" value="<?php echo $studiensemester_kurzbz ?>">
-                            <div class="col-xs-4">
-                                <label for="studiensemester" class="small">Studiensemester</label>
-                                <?php
-                                echo $this->widgetlib->widget(
-                                    'Studiensemester_widget',
-                                    array(
-                                        DropdownWidget::SELECTED_ELEMENT => $studiensemester_kurzbz
-                                    ),
-                                    array(
-                                        'name' => 'studiensemester',
-                                        'id' => 'studiensemester'
-                                    )
-                                );
-                                ?>
-                            </div>
-                            <div class="col-xs-4">
-                                <label for="azrStart" class="small">Anr.-Zeitraum Start</label>
-                                <input type="date" id="azrStart" value="" class="form-control" required>
-                            </div>
-                            <div class="col-xs-4">
-                                <label for="azrEnde" class="small">Anr.-Zeitraum Ende</label>
-                                <input type="date" id="azrEnde" value="" class="form-control" required>
+            <div class="modal fade" id="azrModal" tabindex="-1" role="dialog" aria-labelledby="azrModalLabel"
+                aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="azrModalLabel"></h5>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                                    aria-hidden="true">&times;</span></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="row">
+                                <input type="hidden" id="anrechnungszeitraum_id" value="">
+                                <input type="hidden" id="defaultStudiensemester_kurzbz"
+                                    value="<?php echo $studiensemester_kurzbz ?>">
+                                <div class="col-xs-4">
+                                    <label for="studiensemester" class="small">Studiensemester</label>
+                                    <?php
+                                    echo $this->widgetlib->widget(
+                                        'Studiensemester_widget',
+                                        array(
+                                            DropdownWidget::SELECTED_ELEMENT => $studiensemester_kurzbz
+                                        ),
+                                        array(
+                                            'name' => 'studiensemester',
+                                            'id' => 'studiensemester'
+                                        )
+                                    );
+                                    ?>
+                                </div>
+                                <div class="col-xs-4">
+                                    <label for="azrStart" class="small">Anr.-Zeitraum Start</label>
+                                    <input type="date" id="azrStart" value="" class="form-control" required>
+                                </div>
+                                <div class="col-xs-4">
+                                    <label for="azrEnde" class="small">Anr.-Zeitraum Ende</label>
+                                    <input type="date" id="azrEnde" value="" class="form-control" required>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" id="azrInsertBtn" class="btn btn-primary" value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
+                        <div class="modal-footer">
+                            <button type="button" id="azrInsertBtn" class="btn btn-primary"
+                                value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
         </div>
     </div>
@@ -156,4 +163,3 @@ if (defined("CIS4")) {
 	);
 }
 ?>
-
diff --git a/application/views/lehre/anrechnung/adminAnrechnungData.php b/application/views/lehre/anrechnung/adminAnrechnungData.php
index 652c349d8..e39e4086d 100644
--- a/application/views/lehre/anrechnung/adminAnrechnungData.php
+++ b/application/views/lehre/anrechnung/adminAnrechnungData.php
@@ -12,7 +12,7 @@ $filterWidgetArray = array(
 	'requiredPermissions' => 'lehre/anrechnungszeitfenster',
 	'datasetRepresentation' => 'tabulator',
 	'columnsAliases' => array(
-        'AzrID',
+		'AzrID',
 		ucfirst($this->p->t('lehre', 'studiensemester')),
 		ucfirst($this->p->t('anrechnung', 'anrechnungszeitraumStart')),
 		ucfirst($this->p->t('anrechnung', 'anrechnungszeitraumEnde')),
@@ -24,13 +24,15 @@ $filterWidgetArray = array(
 		layout: "fitDataFill",           
 		persistentLayout:true,
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
         index: "anrechnungszeitraum_id",         // assign specific column as unique id (important for row indexing)
         selectable: false,                  // allow row selection
 		tableWidgetHeader: true,
 		tableBuilt: function(){
             func_tableBuilt(this);
         },
+		columnDefaults:{
+			headerFilterPlaceholder:" ",
+		},
 	 }',
 	'datasetRepFieldsDefs' => '{
 		anrechnungszeitraum_id: {visible: false, headerFilter:"input"},
diff --git a/application/views/lehre/anrechnung/approveAnrechnungDetail.php b/application/views/lehre/anrechnung/approveAnrechnungDetail.php
index e310d36d7..d7c187ab0 100644
--- a/application/views/lehre/anrechnung/approveAnrechnungDetail.php
+++ b/application/views/lehre/anrechnung/approveAnrechnungDetail.php
@@ -1,11 +1,12 @@
 <?php
 $this->load->config('anrechnung');
 
-$includesArray = array(
+$includesArray = 	array(
 	'title' => $this->p->t('anrechnung', 'anrechnungenGenehmigen'),
 	'jquery3' => true,
 	'jqueryui1' => true,
-	'bootstrap3' => true,
+	'bootstrap5' => true,
+	'cis' => true,
 	'fontawesome4' => true,
 	'ajaxlib' => true,
 	'dialoglib' => true,
@@ -50,12 +51,11 @@ $includesArray = array(
 		)
 	),
 	'customCSSs' => array(
-		'public/css/Tabulator.css'
+		'public/css/lehre/anrechnung.css'
 	),
 	'customJSs' => array(
 		'public/js/bootstrapper.js',
 		'public/js/lehre/anrechnung/approveAnrechnungDetail.js'
-
 	)
 );
 
@@ -73,125 +73,155 @@ if (defined("CIS4")) {
 ?>
 
 <div id="page-wrapper">
-    <div class="container-fluid">
-        <!-- header  -->
-        <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
+	<div class="container-fluid">
+		<!-- header  -->
+		<div class="row">
+			<div class="col-lg-12 my-4 border-bottom">
+				<h3 class="fw-normal ">
 					<?php echo $this->p->t('anrechnung', 'anrechnungenGenehmigen'); ?>
-                    <small>| <?php echo $this->p->t('global', 'detailsicht'); ?></small>
-                </h3>
-            </div>
-        </div>
+					<small class="text-secondary fs-6">| <?php echo $this->p->t('global', 'detailsicht'); ?></small>
+				</h3>
+			</div>
+		</div>
 		<!--end header -->
-		
-        <div class="row" id="approveAnrechnungDetail-generell" data-readonly="<?php echo json_encode($hasReadOnlyAccess)?>">
-            <div class="col-xs-8">
+
+		<div class="row " id="approveAnrechnungDetail-generell"
+			data-readonly="<?php echo json_encode($hasReadOnlyAccess) ?>">
+			<div class="col-8">
 				<!-- Antragsdaten -->
-				<div class="row">
+				<div class="row mb-4">
 					<div class="col-lg-12">
-						<div class="panel panel-default">
-							<div class="panel-heading">
-								<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'antrag'); ?></b></span>&emsp;
-								<span class="approveAnrechnungDetail-anrechnungInfoTooltip"
-									  data-toggle="tooltip" data-placement="right"
-									  title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
-													<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-												</span>
-								<span class="pull-right"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
-											id="approveAnrechnung-status"><?php echo !empty($anrechnungData->anrechnung_id) ? $anrechnungData->insertamum : '-' ?></span></span>
+						<div class="card">
+							<div class="card-header">
+								<span
+									class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'antrag'); ?></b></span>&emsp;
+								<span class="approveAnrechnungDetail-anrechnungInfoTooltip" data-bs-toggle="tooltip"
+									data-bs-placement="right"
+									title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
+									<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+								</span>
+								<span class="float-end"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
+										id="approveAnrechnung-status"><?php echo !empty($anrechnungData->anrechnung_id) ? $anrechnungData->insertamum : '-' ?></span></span>
 							</div>
-							<div class="panel-body">
+							<div class="card-body">
 								<div class="row">
-									<div class="col-lg-4">
-										<table class="table table-bordered table-condensed table-fixed">
+									<div class="col-xxl-4">
+										<table class="table table-bordered table-condensed table-fixed mb-0">
 											<tbody>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('person', 'studentIn')); ?></th>
-												<td><?php echo $antragData->vorname . ' ' . $antragData->nachname; ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo $this->p->t('person', 'personenkennzeichen'); ?></th>
-												<td><?php echo $antragData->matrikelnr ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('lehre', 'studiensemester')); ?></th>
-												<td><?php echo $antragData->studiensemester_kurzbz ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('lehre', 'studiengang')); ?></th>
-												<td><?php echo $antragData->stg_bezeichnung ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?></th>
-												<td><?php echo $antragData->lv_bezeichnung ?></td>
-											</tr>
-                                            <tr>
-                                                <th class="col-xs-5"><?php echo $this->p->t('lehre', 'lektorInnen'); ?></th>
-                                                <td>
-													<?php $len = count($antragData->lektoren) - 1 ?>
-													<?php foreach ($antragData->lektoren as $key => $lektor): ?>
-														<?php echo $lektor->vorname . ' ' . $lektor->nachname;
-														echo $key === $len ? '' : ', ' ?>
-													<?php endforeach; ?>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <th class="col-xs-5"><?php echo $this->p->t('lehre', 'ects'); ?></th>
-                                                <td><span id="ects"><?php echo $antragData->ects ?></span></td>
-                                            </tr>
-                                            <tr>
-                                                <th class="col-xs-5">
-													<?php echo $this->p->t('anrechnung', 'bisherAngerechneteEcts'); ?>
-                                                    <span class="approveAnrechnungDetail-anrechnungEctsTooltip"
-                                                          data-toggle="tooltip" data-placement="right"
-                                                          title="<?php echo $this->p->t('anrechnung', 'anrechnungEctsTooltipText'); ?>">
-													<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-												</span>
-                                                </th>
-                                                <td>
-                                                    Total: <span id="sumEctsTotal"><?php echo number_format($antragData->sumEctsSchulisch + $antragData->sumEctsBeruflich, 1) ?></span>
-                                                    [Schulisch: <span id="sumEctsSchulisch" value="<?php echo $antragData->sumEctsSchulisch ?>"><?php echo $antragData->sumEctsSchulisch ?></span> /
-                                                    Beruflich: <span id="sumEctsBeruflich" value="<?php echo $antragData->sumEctsBeruflich ?>"><?php echo $antragData->sumEctsBeruflich ?></span> ]
-                                                    <span id="sumEctsMsg"></span>
-                                                </td>
-                                            </tr>
-											
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('person', 'studentIn')); ?></th>
+													<td><?php echo $antragData->vorname . ' ' . $antragData->nachname; ?>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo $this->p->t('person', 'personenkennzeichen'); ?></th>
+													<td><?php echo $antragData->matrikelnr ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('lehre', 'studiensemester')); ?>
+													</th>
+													<td><?php echo $antragData->studiensemester_kurzbz ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('lehre', 'studiengang')); ?></th>
+													<td><?php echo $antragData->stg_bezeichnung ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?></th>
+													<td><?php echo $antragData->lv_bezeichnung ?></td>
+												</tr>
+												<tr>
+													<th class="col-5"><?php echo $this->p->t('lehre', 'lektorInnen'); ?>
+													</th>
+													<td>
+														<?php $len = count($antragData->lektoren) - 1 ?>
+														<?php foreach ($antragData->lektoren as $key => $lektor): ?>
+															<?php echo $lektor->vorname . ' ' . $lektor->nachname;
+															echo $key === $len ? '' : ', ' ?>
+														<?php endforeach; ?>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-5"><?php echo $this->p->t('lehre', 'ects'); ?></th>
+													<td><span id="ects"><?php echo $antragData->ects ?></span></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo $this->p->t('anrechnung', 'bisherAngerechneteEcts'); ?>
+														<span class="approveAnrechnungDetail-anrechnungEctsTooltip"
+															data-bs-toggle="tooltip" data-bs-placement="right"
+															data-bs-html="true"
+															title="<?php echo $this->p->t('anrechnung', 'anrechnungEctsTooltipText'); ?>">
+															<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+														</span>
+													</th>
+													<td>
+														Total: <span
+															id="sumEctsTotal"><?php echo number_format($antragData->sumEctsSchulisch + $antragData->sumEctsBeruflich, 1) ?></span>
+														[Schulisch: <span id="sumEctsSchulisch"
+															value="<?php echo $antragData->sumEctsSchulisch ?>"><?php echo $antragData->sumEctsSchulisch ?></span>
+														/
+														Beruflich: <span id="sumEctsBeruflich"
+															value="<?php echo $antragData->sumEctsBeruflich ?>"><?php echo $antragData->sumEctsBeruflich ?></span>
+														]
+														<div class="p-1 align-items-center" id="sumEctsMsg"></div>
+													</td>
+												</tr>
+
 											</tbody>
 										</table>
 									</div>
-									<div class="col-lg-8">
-										<table class="table table-bordered table-condensed table-fixed">
+									<div class="col-xxl-8">
+										<table class="table table-bordered table-condensed table-fixed mb-0">
 											<tbody>
 
-											<tr>
-												<th class="col-xs-3"><?php echo ucfirst($this->p->t('global', 'zgv')); ?></th>
-												<td><?php echo $antragData->zgv ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?></th>
-												<td><?php echo $anrechnungData->anmerkung ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?></th>
-												<td>
-													<a href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
-													   target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?></a>
-												</td>
-											</tr>
-                                            <tr>
-                                                <th class="col-xs-4"><?php echo $this->p->t('global', 'begruendung'); ?></th>
-                                                <td><span id="begruendung_id" data-begruendung_id="<?php echo $anrechnungData->begruendung_id ?>" ><?php echo $anrechnungData->begruendung ?></span></td>
-                                            </tr>
+												<tr>
+													<th class="col-3">
+														<?php echo ucfirst($this->p->t('global', 'zgv')); ?></th>
+													<td><?php echo $antragData->zgv ?></td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?>
+													</th>
+													<td><?php echo $anrechnungData->anmerkung ?></td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?>
+													</th>
+													<td>
+														<a href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
+															target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?></a>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('global', 'begruendung'); ?></th>
+													<td><span id="begruendung_id"
+															data-begruendung_id="<?php echo $anrechnungData->begruendung_id ?>"><?php echo $anrechnungData->begruendung ?></span>
+													</td>
+												</tr>
 											<?php if ($this->config->item('explain_equivalence')): ?>
-                                                <tr>
-                                                    <th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'begruendungEctsLabel'); ?></th>
-                                                    <td><span><?php echo $anrechnungData->begruendung_ects ?></span></td>
-                                                </tr>
-                                                <tr>
-                                                    <th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'begruendungLvinhaltLabel'); ?></th>
-                                                    <td><span><?php echo $anrechnungData->begruendung_lvinhalt ?></span></td>
-                                                </tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'begruendungEctsLabel'); ?>
+													</th>
+													<td><span><?php echo $anrechnungData->begruendung_ects ?></span>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'begruendungLvinhaltLabel'); ?>
+													</th>
+													<td><span><?php echo $anrechnungData->begruendung_lvinhalt ?></span>
+													</td>
+												</tr>
 											<?php endif; ?>
 											</tbody>
 										</table>
@@ -204,86 +234,105 @@ if (defined("CIS4")) {
 				<!-- Empfehlungsdaten -->
 				<div class="row">
 					<div class="col-lg-12">
-						<div class="panel panel-default" id="approveAnrechnungDetail-empfehlung"
-								 data-empfehlung="<?php echo json_encode($empfehlungData->empfehlung) ?>">
-								<div class="panel-heading">
-									<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></b></span>&emsp;
-									<div class="pull-right">
-										<?php echo $this->p->t('anrechnung', 'empfehlungVon'); ?>:
-										<span id="approveAnrechnungDetail-empfehlungVon"><?php echo $empfehlungData->empfehlung_von ?></span>
-										&emsp;|&emsp;
-										<?php echo $this->p->t('anrechnung', 'empfehlungdatum'); ?>:
-										<span id="approveAnrechnungDetail-empfehlungAm"><?php echo $empfehlungData->empfehlung_am ?></span>
-									</div>
+						<div class="card " id="approveAnrechnungDetail-empfehlung"
+							data-empfehlung="<?php echo json_encode($empfehlungData->empfehlung) ?>">
+							<div class="card-header">
+								<span
+									class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></b></span>&emsp;
+								<div class="float-end">
+									<?php echo $this->p->t('anrechnung', 'empfehlungVon'); ?>:
+									<span
+										id="approveAnrechnungDetail-empfehlungVon"><?php echo $empfehlungData->empfehlung_von ?></span>
+									&emsp;|&emsp;
+									<?php echo $this->p->t('anrechnung', 'empfehlungdatum'); ?>:
+									<span
+										id="approveAnrechnungDetail-empfehlungAm"><?php echo $empfehlungData->empfehlung_am ?></span>
 								</div>
-								<div class="panel-body">
-									<div class="row">
-										<div class="col-lg-6">
-											<form id="form-empfehlung">
-												<input type="hidden" name="anrechnung_id" value="<?php echo $anrechnungData->anrechnung_id ?>">
-                                                <input type="hidden" name="ects" value="<?php echo $antragData->ects ?>">
-                                                <input type="hidden" name="sumEctsSchulisch" value="<?php echo $antragData->sumEctsSchulisch ?>">
-                                                <input type="hidden" name="sumEctsBeruflich" value="<?php echo $antragData->sumEctsBeruflich ?>">
-												<table class="table table-bordered table-condensed table-fixed">
-													<tbody>
+							</div>
+							<div class="card-body">
+								<div class="row">
+									<div class="col-lg-6">
+										<form id="form-empfehlung">
+											<input type="hidden" name="anrechnung_id"
+												value="<?php echo $anrechnungData->anrechnung_id ?>">
+											<input type="hidden" name="ects" value="<?php echo $antragData->ects ?>">
+											<input type="hidden" name="sumEctsSchulisch"
+												value="<?php echo $antragData->sumEctsSchulisch ?>">
+											<input type="hidden" name="sumEctsBeruflich"
+												value="<?php echo $antragData->sumEctsBeruflich ?>">
+											<table class="table table-bordered table-condensed table-fixed mb-0">
+												<tbody>
 													<tr>
-														<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')); ?></th>
-														<td id="approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAm">
+														<th class="col-4">
+															<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')); ?>
+														</th>
+														<td
+															id="approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAm">
 															<?php echo $empfehlungData->empfehlungsanfrageAm; ?>
 														</td>
 													</tr>
 													<tr>
-														<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'empfehlungsanfrageAn'); ?></th>
-														<td id="approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAn">
+														<th class="col-4">
+															<?php echo $this->p->t('anrechnung', 'empfehlungsanfrageAn'); ?>
+														</th>
+														<td
+															id="approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAn">
 															<?php echo $empfehlungData->empfehlungsanfrageAn; ?>
 														</td>
 													</tr>
 													<tr>
-														<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungAm')); ?></th>
+														<th class="col-4">
+															<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungAm')); ?>
+														</th>
 														<td><?php echo $empfehlungData->empfehlung_am ?></td>
 													</tr>
 													<tr>
-														<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungVon')); ?></th>
+														<th class="col-4">
+															<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungVon')); ?>
+														</th>
 														<td><?php echo $empfehlungData->empfehlung_von ?></td>
 													</tr>
 													<tr>
-														<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></th>
-														<td id="approveAnrechnungDetail-empfehlungDetail-empfehlung"></td>
+														<th class="col-4">
+															<?php echo $this->p->t('anrechnung', 'empfehlung'); ?></th>
+														<td id="approveAnrechnungDetail-empfehlungDetail-empfehlung">
+														</td>
 													</tr>
 													<tr>
-														<th class="col-xs-4"><?php echo $this->p->t('global', 'begruendung'); ?></th>
+														<th class="col-4">
+															<?php echo $this->p->t('global', 'begruendung'); ?></th>
 														<td id="approveAnrechnungDetail-empfehlungDetail-begruendung">
 															<?php echo htmlentities($empfehlungData->begruendung) ?>
 														</td>
 													</tr>
-													</tbody>
-												</table>
-											</form>
-										</div>
-										<div class="col-lg-6">
-											<form id="form-empfehlungNotiz">
-												<input type="hidden" name="anrechnung_id"
-													   value="<?php echo $anrechnungData->anrechnung_id ?>">
-												<input type="hidden" name="notiz_id"
-													   value="<?php echo $empfehlungData->notiz_id ?>">
-												<div class="form-group">
-													<label class="text-center">
-														<?php echo ucfirst($this->p->t('global', 'notiz')); ?>
-													</label>
-													<textarea name="empfehlungText" rows="4"><?php echo htmlentities($empfehlungData->notiz) ?></textarea>
-												</div>
-												<input type="submit" class="btn btn-default pull-right" value="<?php echo ucfirst($this->p->t('ui', 'speichern')); ?>">
-											</form>
-										</div>
+												</tbody>
+											</table>
+										</form>
+									</div>
+									<div class="col-lg-6">
+										<form id="form-empfehlungNotiz">
+											<input type="hidden" name="anrechnung_id"
+												value="<?php echo $anrechnungData->anrechnung_id ?>">
+											<input type="hidden" name="notiz_id"
+												value="<?php echo $empfehlungData->notiz_id ?>">
+											<div class="form-row mb-3">
+												<label class="fw-bold text-center mb-2">
+													<?php echo ucfirst($this->p->t('global', 'notiz')); ?>
+												</label>
+												<textarea name="empfehlungText"
+													rows="4"><?php echo htmlentities($empfehlungData->notiz) ?></textarea>
+											</div>
+											<input type="submit" class="btn btn-outline-secondary float-end"
+												value="<?php echo ucfirst($this->p->t('ui', 'speichern')); ?>">
+										</form>
 									</div>
 								</div>
 							</div>
-					  
-						<div class="pull-right">
-							<button id="approveAnrechnungDetail-withdraw-request-recommedation"
-									class="btn btn-default btn-w200 <?php echo (is_null($empfehlungData->empfehlung) &&
-										$anrechnungData->status_kurzbz == 'inProgressLektor') ? '' : 'hidden' ?>"
-									type="button">
+						</div>
+
+						<div class="mt-4 mb-5 d-flex justify-content-end">
+							<button id="approveAnrechnungDetail-withdraw-request-recommedation" class="me-1 btn btn-outline-secondary btn-w200 <?php echo (is_null($empfehlungData->empfehlung) &&
+								$anrechnungData->status_kurzbz == 'inProgressLektor') ? '' : 'visually-hidden' ?>" type="button">
 								<?php echo ucfirst($this->p->t('global', 'zuruecknehmen')); ?>
 							</button>
 							<button id="approveAnrechnungDetail-request-recommendation" class="btn btn-primary btn-w200"
@@ -293,164 +342,174 @@ if (defined("CIS4")) {
 						</div>
 					</div>
 				</div>
-				<br><br>
+
 				<!-- Genehmigungssdaten -->
 				<div class="row">
 					<div class="col-lg-12">
-						<div class="panel panel-default">
-							<div class="panel-heading">
-								<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'genehmigung'); ?></b></span>&emsp;
-								<div class="pull-right">
+						<div class="card my-4">
+							<div class="card-header">
+								<span
+									class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'genehmigung'); ?></b></span>&emsp;
+								<div class="float-end">
 									<?php echo $this->p->t('anrechnung', 'abgeschlossenVon'); ?>:
-									<span id="approveAnrechnungDetail-abgeschlossenVon"><?php echo $genehmigungData->abgeschlossen_von ?></span>
+									<span
+										id="approveAnrechnungDetail-abgeschlossenVon"><?php echo $genehmigungData->abgeschlossen_von ?></span>
 									&emsp;|&emsp;
 									<?php echo $this->p->t('anrechnung', 'abschlussdatum'); ?>:
-									<span id="approveAnrechnungDetail-abgeschlossenAm"><?php echo $genehmigungData->abgeschlossen_am ?></span>
+									<span
+										id="approveAnrechnungDetail-abgeschlossenAm"><?php echo $genehmigungData->abgeschlossen_am ?></span>
 								</div>
 							</div>
-							<div class="panel-body" id="approveAnrechnungDetail-genehmigungDetail">
+							<div class="card-body" id="approveAnrechnungDetail-genehmigungDetail">
 								<!-- Infopanel: Noch nicht genehmigt / abgelehnt -->
-								<div class="panel panel-default panel-body <?php echo is_null($genehmigungData->genehmigung) ? '' : 'hidden' ?>"
-									 id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull">
+								<div class="card  card-body my-3 <?php echo is_null($genehmigungData->genehmigung) ? '' : 'visually-hidden' ?>"
+									id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull">
 									<?php echo $this->p->t('anrechnung', 'nochKeineGenehmigung'); ?>
 								</div>
 								<!-- Infopanel: Genehmigt -->
-								<div class="alert alert-success <?php echo $genehmigungData->genehmigung === true ? '' : 'hidden' ?>" id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv">
+								<div class="card card-body bg-success-subtle my-3 <?php echo $genehmigungData->genehmigung === true ? '' : 'visually-hidden' ?>"
+									id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv">
 									<b><?php echo $this->p->t('anrechnung', 'genehmigungPositiv'); ?></b>
 								</div>
 								<!-- Infopanel: Abgelehnt -->
-								<div class="<?php echo $genehmigungData->genehmigung === false ? '' : 'hidden' ?>" id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ">
-									<div class="alert alert-danger">
+								<div class="<?php echo $genehmigungData->genehmigung === false ? '' : 'visually-hidden' ?>"
+									id="approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ">
+									<div class="card card-body bg-danger-subtle my-3">
 										<b><?php echo $this->p->t('anrechnung', 'genehmigungNegativ'); ?></b>
 									</div>
-									<div class="well"><b><?php echo $this->p->t('global', 'begruendung'); ?>
+									<div class="card card-body bg-secondary-subtle my-3">
+										<b><?php echo $this->p->t('global', 'begruendung'); ?>
 											: </b>
-										<span id="approveAnrechnungDetail-genehmigungDetail-begruendung"><?php echo htmlentities($genehmigungData->notiz) ?></span>
+										<span
+											id="approveAnrechnungDetail-genehmigungDetail-begruendung"><?php echo htmlentities($genehmigungData->notiz) ?></span>
 									</div>
 								</div>
-							
-							<form>
-								<input type="hidden" name="anrechnung_id" value="<?php echo $anrechnungData->anrechnung_id ?>">
-								<!-- Ablehnen -->
-								<div style="display: none" id="approveAnrechnungDetail-begruendung-panel">
-									<div>
-										<h4 class="panel panel-body panel-danger text-danger"><?php echo $this->p->t('anrechnung', 'genehmigungNegativQuestion'); ?></h4>
-                                        <ul class="list-group">
-											<li class="list-group-item">
-												<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativPruefungNichtMoeglich'); ?></span>
-												<span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-													  data-placement="right"
-													  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
-													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
-												</span>
-											</li>
-                                            <li class="list-group-item">
-                                                <span><?php echo $this->p->t('anrechnung', 'genehmigungNegativEctsHoechstgrenzeUeberschritten'); ?></span>
-                                                <span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-                                                      data-placement="right"
-                                                      title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
-													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
-												</span>
-                                            </li>
-											<li class="list-group-item">
-												<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativKenntnisseNichtGleichwertigWeil'); ?></span>
-												<span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-													  data-placement="right"
-													  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
-													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
-												</span>
-											</li>
-											<li class="list-group-item">
-												<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativEmpfehlungstextUebernehmen'); ?></span>
-												<span id="empfehlungstextUebernehmen" class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-													  data-placement="right"
-													  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
-													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
-												</span>
-											</li>
-                                            <li class="list-group-item" onclick="{ $(this).closest('div').find('textarea').val('').focus()}">
-                                                <span><?php echo $this->p->t('anrechnung', 'andereBegruendung'); ?></span>
-                                            </li>
-										</ul>
-										<textarea class="form-control" name="begruendung"
-												  id="approveAnrechnungDetail-begruendung"
-												  rows="2"
-                                                  placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>" required></textarea>
-									</div>
-									<br>
-									<!-- Action Button 'Abbrechen'-->
-									<div class="pull-right">
-										<button id="approveAnrechnungDetail-begruendung-abbrechen"
-												class="btn btn-default btn-w200" type="reset">
-											<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
-										</button>
-										<button id="approveAnrechnungDetail-reject-anrechnung-confirm"
+
+								<form>
+									<input type="hidden" name="anrechnung_id"
+										value="<?php echo $anrechnungData->anrechnung_id ?>">
+									<!-- Ablehnen -->
+									<div style="display: none" id="approveAnrechnungDetail-begruendung-panel">
+										<div>
+											<h4 class="card card-body bg-danger-subtle my-3">
+												<?php echo $this->p->t('anrechnung', 'genehmigungNegativQuestion'); ?>
+											</h4>
+											<ul class="list-group my-3">
+												<li class="list-group-item">
+													<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativPruefungNichtMoeglich'); ?></span>
+													<span class="btn-copyIntoTextarea float-end"
+														data-bs-toggle="tooltip" data-bs-placement="right"
+														title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+														<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
+													</span>
+												</li>
+												<li class="list-group-item">
+													<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativEctsHoechstgrenzeUeberschritten'); ?></span>
+													<span class="btn-copyIntoTextarea float-end"
+														data-bs-toggle="tooltip" data-bs-placement="right"
+														title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+														<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
+													</span>
+												</li>
+												<li class="list-group-item">
+													<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativKenntnisseNichtGleichwertigWeil'); ?></span>
+													<span class="btn-copyIntoTextarea float-end"
+														data-bs-toggle="tooltip" data-bs-placement="right"
+														title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+														<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
+													</span>
+												</li>
+												<li class="list-group-item">
+													<span><?php echo $this->p->t('anrechnung', 'genehmigungNegativEmpfehlungstextUebernehmen'); ?></span>
+													<span id="empfehlungstextUebernehmen"
+														class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip"
+														data-bs-placement="right"
+														title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+														<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
+													</span>
+												</li>
+												<li class="list-group-item"
+													onclick="{ $(this).closest('div').find('textarea').val('').focus()}">
+													<span><?php echo $this->p->t('anrechnung', 'andereBegruendung'); ?></span>
+												</li>
+											</ul>
+											<textarea class="my-3 form-control" name="begruendung"
+												id="approveAnrechnungDetail-begruendung" rows="2"
+												placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
+												required></textarea>
+										</div>
+
+										<!-- Action Button 'Abbrechen'-->
+										<div class="float-end">
+											<button id="approveAnrechnungDetail-begruendung-abbrechen"
+												class="me-1 btn btn-outline-secondary btn-w200" type="reset">
+												<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
+											</button>
+											<button id="approveAnrechnungDetail-reject-anrechnung-confirm"
 												class="btn btn-primary btn-w200" type="button">
-											<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
-										</button>
+												<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
+											</button>
+										</div>
 									</div>
-								</div>
-								<!-- Genehmigen -->
-								<div style="display: none" id="approveAnrechnungDetail-genehmigung-panel">
-									<div>
-										<h4 class="panel panel-body panel-success text-success"><?php echo $this->p->t('anrechnung', 'genehmigungPositivQuestion'); ?></h4>
-					&ensp;					<?php echo $this->p->t('anrechnung', 'genehmigungPositivSubquestion'); ?>
-									</div>
-									<br>
-									<!-- Action Button 'Abbrechen'-->
-									<div class="pull-right">
-										<button id="approveAnrechnungDetail-genehmigung-abbrechen"
-												class="btn btn-default btn-w200" type="reset">
-											<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
-										</button>
-										<button id="approveAnrechnungDetail-approve-anrechnung-confirm"
+									<!-- Genehmigen -->
+									<div style="display: none" id="approveAnrechnungDetail-genehmigung-panel">
+										<div class="my-3">
+											<h4 class="card card-body bg-success-subtle ">
+												<?php echo $this->p->t('anrechnung', 'genehmigungPositivQuestion'); ?>
+											</h4>
+											<span><?php echo $this->p->t('anrechnung', 'genehmigungPositivSubquestion'); ?></span>
+										</div>
+
+										<!-- Action Button 'Abbrechen'-->
+										<div class="float-end">
+											<button id="approveAnrechnungDetail-genehmigung-abbrechen"
+												class="me-1 btn btn-outline-secondary btn-w200" type="reset">
+												<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
+											</button>
+											<button id="approveAnrechnungDetail-approve-anrechnung-confirm"
 												class="btn btn-primary btn-w200" type="button">
-											<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
-										</button>
+												<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
+											</button>
+										</div>
 									</div>
-								</div>
-							</form>
+								</form>
 							</div>
 						</div>
 						<!-- Button Gehenhmigen / Ablehnen / Zurücknehmen -->
-						<div class="pull-right">
-							<button id="approveAnrechnungDetail-withdraw-anrechnung-approvement"
-									class="btn btn-default btn-w200 <?php echo ($anrechnungData->status_kurzbz == 'approved' ||
-										$anrechnungData->status_kurzbz == 'rejected') ? '' : 'hidden' ?>"
-									type="button">
+						<div class="float-end mb-5">
+							<button id="approveAnrechnungDetail-withdraw-anrechnung-approvement" class="me-1 btn btn-outline-secondary btn-w200 <?php echo ($anrechnungData->status_kurzbz == 'approved' ||
+								$anrechnungData->status_kurzbz == 'rejected') ? '' : 'visually-hidden' ?>" type="button">
 								<?php echo ucfirst($this->p->t('global', 'zuruecknehmen')); ?>
 							</button>
-							<button id="approveAnrechnungDetail-reject-anrechnung-ask" class="btn btn-danger btn-w200"
-									type="button"
-								<?php echo $anrechnungData->status_kurzbz == 'inProgressDP' ? '' : 'disabled' ?>>
+							<button id="approveAnrechnungDetail-reject-anrechnung-ask"
+								class="me-1 btn btn-danger btn-w200" type="button" <?php echo $anrechnungData->status_kurzbz == 'inProgressDP' ? '' : 'disabled' ?>>
 								<?php echo ucfirst($this->p->t('global', 'ablehnen')); ?>
 							</button>
-							<button id="approveAnrechnungDetail-approve-anrechnung-ask" class="btn btn-primary btn-w200"
-									type="button"
-								<?php echo $anrechnungData->status_kurzbz == 'inProgressDP' ? '' : 'disabled' ?>>
+							<button id="approveAnrechnungDetail-approve-anrechnung-ask"
+								class="me-1 btn btn-primary btn-w200" type="button" <?php echo $anrechnungData->status_kurzbz == 'inProgressDP' ? '' : 'disabled' ?>>
 								<?php echo ucfirst($this->p->t('global', 'genehmigen')); ?>
 							</button>
 						</div>
 					</div>
 				</div>
-				<br><br><br><br>
-            </div>
 
-            <div class="col-xs-4">
+			</div>
+
+			<div class="col-4">
 				<!-- -Statusleiste -->
-                <div class="alert text-center">
-                    Status: <b><span class="text-uppercase" id="approveAnrechnungDetail-status_kurzbz"
-                             data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
-                            <?php echo $anrechnungData->status; ?>
-                        </span></b>
-                </div>
-                <br>
+				<div class="mb-5 alert text-center">
+					Status: <b><span class="text-uppercase" id="approveAnrechnungDetail-status_kurzbz"
+							data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
+							<?php echo $anrechnungData->status; ?>
+						</span></b>
+				</div>
+
 				<!-- Infopanels -->
 				<?php $this->load->view('lehre/anrechnung/reviewAnrechnungInfo'); ?>
-            </div>
-        </div>
+			</div>
+		</div>
 
-    </div><!--end container-fluid-->
+	</div><!--end container-fluid-->
 </div><!--end page-wrapper-->
 
 <?php
diff --git a/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php b/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
index 584a805cf..d53941113 100644
--- a/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
+++ b/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
@@ -4,16 +4,18 @@ $includesArray = array(
 	'title' => $this->p->t('anrechnung', 'anrechnungenGenehmigen'),
 	'jquery3' => true,
 	'jqueryui1' => true,
-	'bootstrap3' => true,
+	'bootstrap5' => true,
 	'fontawesome4' => true,
-	'tabulator4' => true,
+	'tabulator5' => true,
+    'tabulator5JQuery' => true,
 	'ajaxlib' => true,
 	'dialoglib' => true,
+    'cis'=>true,
 	'tablewidget' => true,
 	'phrases' => array(
 		'global' => array(
 			'begruendung',
-			'zgv'
+            'zgv'
 		),
 		'anrechnung' => array(
 			'nachweisdokumente',
@@ -48,7 +50,7 @@ $includesArray = array(
 			'empfehlungWurdeAngefordertAusnahmeWoKeineLektoren',
 			'anrechnungenWurdenGenehmigt',
 			'anrechnungenWurdenAbgelehnt',
-			'nurLeseberechtigung'
+            'nurLeseberechtigung'
 		),
 		'person' => array(
 			'student',
@@ -79,8 +81,11 @@ $includesArray = array(
 		)
 	),
 	'customJSs' => array(
-		'public/js/bootstrapper.js',
+		//'public/js/bootstrapper5.js',
 		'public/js/lehre/anrechnung/approveAnrechnungUebersicht.js'
+	),
+	'customCSSs' => array(
+		'public/css/lehre/anrechnung.css'
 	)
 );
 
@@ -99,20 +104,23 @@ if (defined("CIS4")) {
 
 <div id="page-wrapper">
     <div class="container-fluid">
-        <!-- title -->
+        <!-- header -->
         <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
+            <div class="col-lg-12 my-4 border-bottom">
+                <h3 class="fw-normal ">
 					<?php echo $this->p->t('anrechnung', 'anrechnungenGenehmigen'); ?>
-                    <small>| <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
+                    <small class="text-secondary fs-6">| <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
                 </h3>
             </div>
         </div>
+    
+        <!-- end header -->
+
         <!-- dropdown studiensemester -->
         <div class="row">
             <div class="col-lg-12">
-                <form id="formApproveAnrechnungUebersicht" class="form-inline" action="" method="get" data-readonly="<?php echo json_encode($hasReadOnlyAccess)?>" data-createaccess="<?php echo json_encode($hasCreateAnrechnungAccess)?>">
-                    <div class="form-group">
+                <form id="formApproveAnrechnungUebersicht" class="row align-items-center" action="" method="get" data-readonly="<?php echo json_encode($hasReadOnlyAccess)?>" data-createaccess="<?php echo json_encode($hasCreateAnrechnungAccess)?>">
+                    <div class="col-auto">
 						<?php
 						echo $this->widgetlib->widget(
 							'Studiensemester_widget',
@@ -121,76 +129,81 @@ if (defined("CIS4")) {
 							),
 							array(
 								'name' => 'studiensemester',
-								'id' => 'studiensemester'
+								'id'=>'studiensemester',
+                                'class'=>'form-select w-auto ',
 							)
 						);
 						?>
                     </div>
+                    
                     <button type="submit"
-                            class="btn btn-default form-group"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
+                            class="btn btn-outline-secondary col-auto"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
                 </form>
             </div>
         </div>
         <!-- Tabelle -->
-        <div class="row">
-            <div class="col-xs-12">
+        <div class="row mb-4">
+            <div class="col-12">
                 <?php $this->load->view('lehre/anrechnung/approveAnrechnungUebersichtData.php'); ?>
             </div>
         </div>
         <!-- Genehmigen / Ablehnen Panel -->
         <div class="row">
-            <div class="panel panel-default panel-body" style="display: none"
+            <div  class="border border-1 mb-4" style="display: none"
                  id="approveAnrechnungUebersicht-begruendung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-danger text-danger"><?php echo $this->p->t('anrechnung', 'genehmigungenNegativQuestion'); ?></h4>
-                    &nbsp;<b><?php echo $this->p->t('anrechnung', 'bitteBegruendungAngeben'); ?>
-                    <span class="text-danger">
-                        <?php echo $this->p->t('anrechnung', 'begruendungWirdFuerAlleUebernommen'); ?>
-                    </span></b>
-                    <br><br>
-                    <ol class="list-group">
+                <div class="mb-4 col-12">
+                
+                    <h4 class="card card-body border-danger text-danger my-3"><?php echo $this->p->t('anrechnung', 'genehmigungenNegativQuestion'); ?></h4>
+                    <div class="mb-4">
+                        <b><?php echo $this->p->t('anrechnung', 'bitteBegruendungAngeben'); ?>
+                        <span class="text-danger">
+                            <?php echo $this->p->t('anrechnung', 'begruendungWirdFuerAlleUebernommen'); ?>
+                        </span></b>
+                    </div>
+                    <ol class="list-group mb-4">
                         <li class="list-group-item"><?php echo $this->p->t('anrechnung', 'genehmigungNegativPruefungNichtMoeglich'); ?>
-                            <span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip" data-placement="left"
+                            <span role="button" class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip" data-bs-placement="left"
                                title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
                                 <i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
                             </span>
                         </li>
                         <li class="list-group-item"><?php echo $this->p->t('anrechnung', 'genehmigungNegativEctsHoechstgrenzeUeberschritten'); ?>
-                            <span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip" data-placement="left"
+                            <span role="button" class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip" data-bs-placement="left"
                                   title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
                                 <i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
                             </span>
                         </li>
-                        <li class="list-group-item disabled"><?php echo $this->p->t('anrechnung', 'genehmigungNegativKenntnisseNichtGleichwertigWeilHinweis'); ?></li>
+                        <li class="list-group-item  list-group-item-secondary"><?php echo $this->p->t('anrechnung', 'genehmigungNegativKenntnisseNichtGleichwertigWeilHinweis'); ?></li>
                     </ol>
                     <textarea class="form-control" name="begruendung" id="approveAnrechnungUebersicht-begruendung"
                               rows="2"
                               placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>" required></textarea>
                 </div>
-                <br>
+               
                 <!-- Action Button 'Abbrechen'-->
-                <div class="pull-right">
+                <div class="mb-4 d-flex justify-content-end" >
                     <button id="approveAnrechnungUebersicht-begruendung-abbrechen"
-                            class="btn btn-default btn-w200" type="reset">
+                            class="me-1 btn btn-outline-secondary btn-w200 " type="reset">
 						<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
                     </button>
                     <button id="approveAnrechnungUebersicht-reject-anrechnungen-confirm"
-                            class="btn btn-primary btn-w200" type="button">
+                            class="btn btn-primary btn-w200 " type="button">
 						<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
                     </button>
                 </div>
             </div>
-            <div class="panel panel-default panel-body" style="display: none"
+            
+            <div class="border border-1 mb-4" style="display: none"
                  id="approveAnrechnungUebersicht-genehmigung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-success text-success"><?php echo $this->p->t('anrechnung', 'genehmigungenPositivQuestion'); ?></h4>
-                    &ensp;<?php echo $this->p->t('anrechnung', 'genehmigungenPositiv'); ?><br><br>
+                <div class="mb-4">
+                    <h4 class="card card-body border-success text-success my-3"><?php echo $this->p->t('anrechnung', 'genehmigungenPositivQuestion'); ?></h4>
+                    <div class="ps-2 mb-4"><?php echo $this->p->t('anrechnung', 'genehmigungenPositiv'); ?></div>
                 </div>
-                <br>
+                
                 <!-- Action Button 'Abbrechen'-->
-                <div class="pull-right">
+                <div class="mb-4 d-flex justify-content-end">
                     <button id="approveAnrechnungUebersicht-empfehlung-abbrechen"
-                            class="btn btn-default btn-w200" type="reset">
+                            class="me-1 btn btn-outline-secondary btn-w200" type="reset">
 						<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
                     </button>
                     <button id="approveAnrechnungUebersicht-approve-anrechnungen-confirm"
@@ -203,57 +216,58 @@ if (defined("CIS4")) {
         <!-- Filter buttons / Submit buttons-->
         <div class="row">
             <!-- Filter buttons -->
-            <div class="col-xs-4 col-md-5">
-                <div class="btn-toolbar" role="toolbar">
+            <div class="col-12 col-md-5">
+                <div class="btn-toolbar " role="toolbar">
                     <div class="btn-group" role="group">
-                        <button id="show-inProgressDP" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-inProgressDP" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'alleInBearbeitungSTGL'); ?>">
                                     <i class='fa fa-eye'></i>
                         </button>
-                        <button id="show-inProgressLektor" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-inProgressLektor" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'alleInBearbeitungLektor'); ?>"><i
                                     class='fa fa-clock-o'></i>
                         </button>
-                        <button id="show-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-recommended" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'nurEmpfohleneAnzeigen'); ?>"><i
                                     class='fa fa-thumbs-o-up'></i>
                         </button>
-                        <button id="show-not-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-not-recommended" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'nurNichtEmpfohleneAnzeigen'); ?>"><i
                                     class='fa fa-thumbs-o-down'></i>
                         </button>
-                        <button id="show-approved" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-approved" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'nurGenehmigteAnzeigen'); ?>"><i
                                     class='fa fa-check'></i>
                         </button>
-                        <button id="show-rejected" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-rejected" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
                                 title="<?php echo $this->p->t('ui', 'nurAbgelehnteAnzeigen'); ?>"><i
                                     class='fa fa-times'></i>
                         </button>
                     </div>
-						<a type="button" id="approveAnrechnungUebersicht-create-anrechnung" class="btn btn-default" style="margin-left: 20px;" href='<?php echo site_url('lehre/anrechnung/createAnrechnung') ?>' target='_blank'>
+						<a type="button" id="approveAnrechnungUebersicht-create-anrechnung" class="btn btn-outline-secondary ms-4"  href='<?php echo site_url('lehre/anrechnung/createAnrechnung') ?>' target='_blank'>
 							<i class='fa fa-plus' aria-hidden='true'></i> <?php echo $this->p->t('global', 'antragAnlegen'); ?>
 						</a>
 				</div>
             </div>
             <!-- Action Buttons 'Genehmigen', Ablehnen, 'Empfehlung anfordern'-->
-            <div class="col-xs-8 col-md-7">
-                <div class="pull-right">
+            <div class="col-12 col-md-7">
+                <div class="d-flex ">
                     <button id="approveAnrechnungUebersicht-request-recommendation"
-                            class="btn btn-default btn-w200 btn-mr50" type="button">
+                            class="btn btn-outline-secondary btn-w200 me-5" type="button">
                         <?php echo ucfirst($this->p->t('anrechnung', 'empfehlungAnfordern')); ?></button>
+                    
                     <button id="approveAnrechnungUebersicht-reject-anrechnungen-ask"
-                            class="btn btn-danger btn-w200" type="button">
+                            class="btn btn-danger btn-w200 me-1" type="button">
                         <?php echo ucfirst($this->p->t('global', 'ablehnen')); ?></button>
                     <button id="approveAnrechnungUebersicht-approve-anrechnungen-ask"
                             class="btn btn-primary btn-w200" type="button">
-                        <?php echo ucfirst($this->p->t('global', 'genehmigen')); ?></button>
+                        <?php echo ucfirst($this->p->t('global', 'genehmigen')); ?></button>       
                 </div>
             </div>
         </div>
diff --git a/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php b/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
index cbc824aa6..acfcbd907 100644
--- a/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
+++ b/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
@@ -4,7 +4,7 @@ const ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR = 'inProgressLektor';
 
 $STUDIENSEMESTER = $studiensemester_selected;
 $STUDIENGAENGE_ENTITLED = implode(', ', $studiengaenge_entitled);						// alle STG mit Lese- und Schreibberechtigung
-$ORGANISATIONSEINHEITEN_SCHREIBBERECHTIGT = "'". implode('\',\'', $oes_schreibberechtigt). "'";		// alle OE nur mit Schreibberechtigung; singlequote für jeden string notwendig
+$ORGANISATIONSEINHEITEN_SCHREIBBERECHTIGT = "'" . implode('\',\'', $oes_schreibberechtigt) . "'";		// alle OE nur mit Schreibberechtigung; singlequote für jeden string notwendig
 $LANGUAGE_INDEX = getUserLanguage() == 'German' ? '1' : '2';
 
 $query = '
@@ -109,9 +109,8 @@ $query = '
                     LIMIT 1)
             END "empfehlungsanfrageAm",';
 
-if ($configFachbereichsleitung === TRUE)
-{
-	$query.= ' CASE
+if ($configFachbereichsleitung === TRUE) {
+	$query .= ' CASE
                 WHEN (anrechnungen.empfehlung_anrechnung IS NULL AND anrechnungen.status_kurzbz = \'' . ANRECHNUNGSTATUS_PROGRESSED_BY_STGL . '\') THEN NULL
                 ELSE
                 (SELECT COALESCE(
@@ -136,10 +135,8 @@ if ($configFachbereichsleitung === TRUE)
                         ) as tmp_empfehlungsanfrageEmpfaenger
                     )
             END "empfehlungsanfrageAn"';
-}
-else
-{
-	$query.= ' CASE
+} else {
+	$query .= ' CASE
                 WHEN (anrechnungen.empfehlung_anrechnung IS NULL AND anrechnungen.status_kurzbz = \'' . ANRECHNUNGSTATUS_PROGRESSED_BY_STGL . '\') THEN NULL
                 ELSE
                 (SELECT COALESCE(
@@ -164,7 +161,7 @@ else
             END "empfehlungsanfrageAn"';
 }
 
-$query.= '	FROM anrechnungen
+$query .= '	FROM anrechnungen
 	JOIN lehre.tbl_anrechnungstatus as anrechnungstatus ON (anrechnungstatus.status_kurzbz = anrechnungen.status_kurzbz)
 	WHERE studiensemester_kurzbz = \'' . $STUDIENSEMESTER . '\'
 	AND studiengang_kz IN (' . $STUDIENGAENGE_ENTITLED . ')
@@ -172,6 +169,7 @@ $query.= '	FROM anrechnungen
 
 $filterWidgetArray = array(
 	'query' => $query,
+	'bootstrapVersion' => 5,
 	'tableUniqueId' => 'approveAnrechnungUebersicht',
 	'requiredPermissions' => 'lehre/anrechnung_genehmigen',
 	'datasetRepresentation' => 'tabulator',
@@ -189,8 +187,8 @@ $filterWidgetArray = array(
 		ucfirst($this->p->t('lehre', 'lehrveranstaltung')),
 		'ECTS (LV)',
 		'ECTS (LV + Bisher)',
-        'ECTS (Bisher schulisch)',
-        'ECTS (Bisher beruflich',
+		'ECTS (Bisher schulisch)',
+		'ECTS (Bisher beruflich',
 		ucfirst($this->p->t('global', 'begruendung')),
 		ucfirst($this->p->t('person', 'studentIn')),
 		ucfirst($this->p->t('anrechnung', 'nachweisdokumente')),
@@ -200,46 +198,45 @@ $filterWidgetArray = array(
 		ucfirst($this->p->t('anrechnung', 'empfehlung')),
 		'status_kurzbz',
 		'Status',
-	  	'PrestudentID',
+		'PrestudentID',
 		ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')),
 		ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAn'))
 	),
+
 	'datasetRepOptions' => '{
+
 		height: func_height(this),
 		layout: "fitColumns",           // fit columns to width of table
 		persistenceID: "approveAnrechnungUebersicht_V1",
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
-        index: "anrechnung_id",             // assign specific column as unique id (important for row indexing)
+		index: "anrechnung_id",             // assign specific column as unique id (important for row indexing)
         selectable: true,               // allow row selection
         selectableRangeMode: "click",   // allow range selection using shift end click on end of range
         selectablePersistence:false,    // deselect previously selected rows when table is filtered, sorted or paginated
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
         tableWidgetFooter: {
-			selectButtons: true
+			selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
 		},
 		selectableCheck: function(row){
             return func_selectableCheck(row);
         },
-        rowFormatter:function(row){
-            func_rowFormatter(row);
-        },
-        rowSelectionChanged:function(data, rows){
-            func_rowSelectionChanged(data, rows);
-        },
-        tooltips: function(cell){
-            return func_tooltips(cell);
-        }
+		rowFormatter:function(row){
+			return func_rowFormatter(row);
+		},
+		
+		columnDefaults:{
+			tooltip:func_tooltips,
+			headerFilterPlaceholder: " ",
+		}
+		
 	 }', // tabulator properties
+
 	'datasetRepFieldsDefs' => '{
 		anrechnung_id: {visible: false, headerFilter:"input"},
 		lehrveranstaltung_id: {visible: false, headerFilter:"input"},
 		begruendung_id: {visible: false, headerFilter:"input"},
 		dms_id: {visible: false, headerFilter:"input"},
 		schreibberechtigt: {
-			formatter:"tickCross", align:"center", 
+			formatter:"tickCross", hozAlign:"center", 
 		    headerFilter:"tickCross", headerFilterParams:{tristate: true}, headerFilterFunc: hf_schreibberechtigt
 		},
 		studiensemester_kurzbz: {visible: false, headerFilter:"input"},
@@ -248,25 +245,26 @@ $filterWidgetArray = array(
 		orgform_kurzbz: {headerFilter:"input"},
 		ausbildungssemester: {headerFilter:"input"},
 		lv_bezeichnung: {headerFilter:"input"},
-		ects: {headerFilter:"input", align:"center"},
+		ects: {headerFilter:"input", hozAlign:"center"},
 		ectsSumBisherUndNeu: {formatter: format_ectsSumBisherUndNeu},
-		ectsSumSchulisch: {visible: false, headerFilter:"input", align:"right"},
-		ectsSumBeruflich: {visible: false, headerFilter:"input", align:"right"},
+		ectsSumSchulisch: {visible: false, headerFilter:"input", hozAlign:"right"},
+		ectsSumBeruflich: {visible: false, headerFilter:"input", hozAlign:"right"},
 		begruendung: {headerFilter:"input", visible: true},
+		
 		student: {headerFilter:"input"},
 		zgv: {headerFilter:"input"},
 		dokument_bezeichnung: {headerFilter:"input", formatter:"link", formatterParams: paramLookup_dokBez},
 		anmerkung_student: {headerFilter:"input"},
-		antragsdatum: {align:"center", headerFilter:"input", mutator: mut_formatStringDate},
-		empfehlung_anrechnung: {headerFilter:"input", align:"center", formatter: format_empfehlung_anrechnung, headerFilterFunc: hf_filterTrueFalse},
+		antragsdatum: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate},
+		empfehlung_anrechnung: {headerFilter:"input", hozAlign:"center", formatter: format_empfehlung_anrechnung, headerFilterFunc: hf_filterTrueFalse},
 		status_kurzbz: {visible: false, headerFilter:"input"},
 		status_bezeichnung: {headerFilter:"input"},
 		prestudent_id: {visible: false, headerFilter:"input"},
-		empfehlungsanfrageAm: {visible: false, align:"center", headerFilter:"input", mutator: mut_formatStringDate},
+		empfehlungsanfrageAm: {visible: false, hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate},
 		empfehlungsanfrageAn: {visible: false, headerFilter:"input"}
 	 }', // col properties
 );
 
 echo $this->widgetlib->widget('TableWidget', $filterWidgetArray);
 
-?>
+?>
\ No newline at end of file
diff --git a/application/views/lehre/anrechnung/createAnrechnung.php b/application/views/lehre/anrechnung/createAnrechnung.php
index 262a9e565..0258b85e1 100644
--- a/application/views/lehre/anrechnung/createAnrechnung.php
+++ b/application/views/lehre/anrechnung/createAnrechnung.php
@@ -1,14 +1,16 @@
 <?php
 
-$includesArray =array(
+$includesArray = array(
 	'title' => $this->p->t('anrechnung', 'neueAnrechnung'),
 	'jquery3' => true,
 	'jqueryui1' => true,
-	'bootstrap3' => true,
+	'bootstrap5' => true,
 	'fontawesome4' => true,
 	'ajaxlib' => true,
 	'dialoglib' => true,
-	'tabulator4' => true,
+	'tabulator5' => true,
+	'tabulator5JQuery' => true,
+	'cis' => true,
 	'tablewidget' => true,
 	'phrases' => array(
 		'global' => array(
@@ -31,7 +33,7 @@ $includesArray =array(
 		'public/js/lehre/anrechnung/createAnrechnung.js'
 	),
 	'customCSSs' => array(
-			'public/css/lehre/anrechnung.css'
+		'public/css/lehre/anrechnung.css'
 	)
 );
 
@@ -49,139 +51,141 @@ if (defined("CIS4")) {
 ?>
 
 <div id="page-wrapper">
-<div class="container-fluid">
+	<div class="container-fluid">
 
-<!-- Title -->
-<div class="row">
-	<div class="col-lg-12 page-header">
-		<h3>
-			<?php echo $this->p->t('anrechnung', 'neueAnrechnung'); ?>
-			<small>| <?php echo $this->p->t('global', 'antragAnlegen'); ?></small>
-		</h3>
-	</div>
-</div>
-
-<!-- Studiensemester Dropdown -->
-<div class="row">
-	<div class="col-xs-12">
-		<form class="form-inline" action="" method="get">
-			<div class="form-group">
-				<?php
-				echo $this->widgetlib->widget(
-					'Studiensemester_widget',
-					array(
-						DropdownWidget::SELECTED_ELEMENT => $studiensemester_selected
-					),
-					array(
-						'name' => 'studiensemester',
-						'id' => 'studiensemester'
-					)
-				);
-				?>
+		<!-- Title -->
+		<div class="row  my-4">
+			<div class="col-lg-12 border-bottom">
+				<h3 class="fw-normal">
+					<?php echo $this->p->t('anrechnung', 'neueAnrechnung'); ?>
+					<small class="text-secondary fs-6">| <?php echo $this->p->t('global', 'antragAnlegen'); ?></small>
+				</h3>
 			</div>
-			<button type="submit"
-					class="btn btn-default form-group">
-				<?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?>
-			</button>
-		</form>
-	</div>
-</div>
+		</div>
 
-<!-- StudentInnen Table -->
-<div class="row">
-	<div class="col-lg-10">
-		<?php $this->load->view('lehre/anrechnung/createAnrechnungData.php'); ?>
-	</div>
-</div>
-<br><br>
-<!-- FORM START ------------------------------------------------------------------------------------------------------->
-<form id="createAnrechnung-form">
-<input name="prestudent_id" id="prestudent_id" type="hidden" value="" data-prestudent_id = "" >
-<input name="studiensemester_kurzbz" id="studiensemester_kurzbz" type="hidden" value="<?php echo $studiensemester_selected ?>">
-<div class="row">
-	<div class="col-lg-10">
-		<table class="table table-condensed table-bordered">
-			<!-- StudentIn -->
-			<tr>
-				<th class="col-xs-5 col-lg-2"><label><?php echo $this->p->t('person', 'studentIn'); ?></label></th>
-				<td><span id="student" class="pl-15"></span></td>
-			</tr>
-			<!-- Selectmenu Lehrveranstaltungen -->
-			<tr>
-				<th class="col-xs-5 col-lg-2"><?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?> *</th>
-				<td>
-					<select name="lehrveranstaltung_id" id="select-lehrveranstaltung" class="form-control select-w500">
-						<option value="" <?php echo set_select('lehrveranstaltung', '', true); ?> >
-							<?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
-						</option>
-					</select>
-				</td>
-			</tr>
-			<!-- Select Anrechnungbegruendungen -->
-			<tr>
-				<th class="col-xs-5 col-lg-2"><?php echo $this->p->t('global', 'begruendung'); ?> *</th>
-				<td>
-					<select name="begruendung_id" id="select-begruendung" class="form-control select-w500">
-						<option value="" <?php echo set_select('begruendung', '', true); ?> >
-							<?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
-						</option>
-						<?php foreach ($begruendungen as $begruendung) : ?>
-							<option value="<?php echo $begruendung->begruendung_id ?>"
-								<?php echo set_select('begruendung', $begruendung->begruendung_id); ?> >
-								<?php echo ucfirst($begruendung->bezeichnung) ?>
-							</option>
-						<?php endforeach; ?>
-					</select>
-				</td>
-			</tr>
-			<!-- Submit Herkunft der Kenntnisse -->
-			<tr>
-				<th class="col-xs-5 col-lg-2"><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?></th>
-				<td>
-					<?php echo form_textarea(array(
-						'name' => 'herkunftKenntnisse',
-						'rows' => 1
-					)); ?>
-				</td>
-			</tr>
-			<!-- Submit Upload Nachweisdokumente -->
-			<tr>
-				<th class="col-xs-5 col-lg-2"><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?> *</th>
-				<td>
-					<div><?php echo form_upload(array(
-							'name' => 'uploadfile',
-							'accept' => '.pdf',
-							'size' => '50',
-							'required' => 'required',
-							'enctype' => "multipart/form-data"
-							)); ?>
+		<!-- Studiensemester Dropdown -->
+		<div class="row my-4">
+			<div class="col-12">
+				<form class="row align-items-center" action="" method="get">
+					<div class="col-auto">
+						<?php
+						echo $this->widgetlib->widget(
+							'Studiensemester_widget',
+							array(
+								DropdownWidget::SELECTED_ELEMENT => $studiensemester_selected
+							),
+							array(
+								'name' => 'studiensemester',
+								'id' => 'studiensemester',
+								'class' => 'form-select w-auto ',
+							)
+						);
+						?>
 					</div>
-					<a class="pull-right" id="download-nachweisdokumente"></a>
-				</td>
-			</tr>
-		</table>
+					<button type="submit" class="btn btn-outline-secondary col-auto">
+						<?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?>
+					</button>
+				</form>
+			</div>
+		</div>
+
+		<!-- StudentInnen Table -->
+		<div class="row  my-4">
+			<div class="col-lg-10">
+				<?php $this->load->view('lehre/anrechnung/createAnrechnungData.php'); ?>
+			</div>
+		</div>
+		<!-- FORM START ------------------------------------------------------------------------------------------------------->
+		<form id="createAnrechnung-form">
+			<input name="prestudent_id" id="prestudent_id" type="hidden" value="" data-prestudent_id="">
+			<input name="studiensemester_kurzbz" id="studiensemester_kurzbz" type="hidden"
+				value="<?php echo $studiensemester_selected ?>">
+			<div class="row my-4">
+				<div class="col-lg-10">
+					<table class="table table-condensed table-bordered mb-0">
+						<!-- StudentIn -->
+						<tr>
+							<th class="col-5 col-lg-2"><label><?php echo $this->p->t('person', 'studentIn'); ?></label>
+							</th>
+							<td><span id="student" class="ps-3"></span></td>
+						</tr>
+						<!-- Selectmenu Lehrveranstaltungen -->
+						<tr>
+							<th class="col-5 col-lg-2"><?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?> *</th>
+							<td>
+								<select name="lehrveranstaltung_id" id="select-lehrveranstaltung"
+									class="form-select select-w500">
+									<option value="" <?php echo set_select('lehrveranstaltung', '', true); ?>>
+										<?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
+									</option>
+								</select>
+							</td>
+						</tr>
+						<!-- Select Anrechnungbegruendungen -->
+						<tr>
+							<th class="col-5 col-lg-2"><?php echo $this->p->t('global', 'begruendung'); ?> *</th>
+							<td>
+								<select name="begruendung_id" id="select-begruendung" class="form-select select-w500">
+									<option value="" <?php echo set_select('begruendung', '', true); ?>>
+										<?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
+									</option>
+									<?php foreach ($begruendungen as $begruendung): ?>
+										<option value="<?php echo $begruendung->begruendung_id ?>" <?php echo set_select('begruendung', $begruendung->begruendung_id); ?>>
+											<?php echo ucfirst($begruendung->bezeichnung) ?>
+										</option>
+									<?php endforeach; ?>
+								</select>
+							</td>
+						</tr>
+						<!-- Submit Herkunft der Kenntnisse -->
+						<tr>
+							<th class="col-5 col-lg-2"><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?>
+							</th>
+							<td>
+								<?php echo form_textarea(
+									array(
+										'name' => 'herkunftKenntnisse',
+										'rows' => 1
+									)
+								); ?>
+							</td>
+						</tr>
+						<!-- Submit Upload Nachweisdokumente -->
+						<tr>
+							<th class="col-5 col-lg-2 "><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?> *
+							</th>
+							<td class="d-flex input-group align-items-center">
+
+								<input class="form-control flex-fill" type="file" id="requestAnrechnung-uploadfile"
+									name="uploadfile" accept=".pdf" size="50"
+									data-maxsize="<?php echo (int) ini_get('upload_max_filesize') * 1024 * 1024 ?>"
+									required>
+
+							</td>
+						</tr>
+					</table>
+				</div>
+			</div>
+
+			<div class="row my-4">
+				<div class="col-lg-10">
+					<!-- Submit Button -->
+					<button class="btn btn-primary btn-w200 float-end" id="createAnrechnung-submit" type="submit"
+						value="submit">
+						<?php echo $this->p->t('global', 'antragAnlegen'); ?>
+					</button>
+					<!-- Open new Anrechnung Button (hidden by default) -->
+					<a type="button" class="btn btn-outline-secondary me-1 float-end visually-hidden"
+						id="createAnrechnung-openAnrechnung" target="_blank"></a>
+				</div>
+			</div>
+
+		</form>
+		<!-- FORM END --------------------------------------------------------------------------------------------------------->
+
 	</div>
 </div>
-
-<div class="row">
-	<div class="col-lg-10">
-		<!-- Submit Button -->
-		<button class="btn btn-primary btn-w200 pull-right" id="createAnrechnung-submit" type="submit" value="submit">
-			<?php echo $this->p->t('global', 'antragAnlegen'); ?>
-		</button>
-		<!-- Open new Anrechnung Button (hidden by default) -->
-		<a type="button" class="btn btn-default btn-mr10 pull-right hidden" id="createAnrechnung-openAnrechnung" target="_blank"></a>
-	</div>
-</div>
-
-</form>
-<!-- FORM END --------------------------------------------------------------------------------------------------------->
-
-</div>
-</div>
-
 <?php
-
 if (defined("CIS4")) {
 	$this->load->view(
 		'templates/CISVUE-Footer',
diff --git a/application/views/lehre/anrechnung/createAnrechnungData.php b/application/views/lehre/anrechnung/createAnrechnungData.php
index c09d8926c..e1c27d2d4 100644
--- a/application/views/lehre/anrechnung/createAnrechnungData.php
+++ b/application/views/lehre/anrechnung/createAnrechnungData.php
@@ -37,6 +37,7 @@ $query = '
 
 $filterWidgetArray = array(
 	'query' => $query,
+	'bootstrapVersion'=>5,
 	'tableUniqueId' => 'createAnrechnung',
 	'requiredPermissions' => 'lehre/anrechnung_anlegen',
 	'datasetRepresentation' => 'tabulator',
@@ -56,17 +57,13 @@ $filterWidgetArray = array(
 		layout: "fitColumns",           // fit columns to width of table
 		persistentLayout:true,
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
         index: "prestudent_id",         // assign specific column as unique id (important for row indexing)
         selectable: 1,                  // allow row selection
         selectablePersistence:false,    // deselect previously selected rows when table is filtered, sorted or paginated
-        rowSelected: function(row) {
-	        func_rowSelected(row);
-        },
-        rowSelectionChanged:function(data, rows){
-            func_rowSelectionChanged(data, rows);
-        },
-		tableWidgetHeader: false
+		tableWidgetHeader: false,
+		columnDefaults:{
+			headerFilterPlaceholder: " ",
+		}
 	 }',
 	'datasetRepFieldsDefs' => '{
 		prestudent_id:          {visible: false, headerFilter:"input"},
diff --git a/application/views/lehre/anrechnung/requestAnrechnung.php b/application/views/lehre/anrechnung/requestAnrechnung.php
index c7254985c..328af2f4f 100644
--- a/application/views/lehre/anrechnung/requestAnrechnung.php
+++ b/application/views/lehre/anrechnung/requestAnrechnung.php
@@ -10,33 +10,34 @@ $includesArray = array(
 	'title' => $this->p->t('anrechnung', 'antragStellen'),
 	'jquery3' => true,
 	'jqueryui1' => true,
-	'bootstrap3' => true,
+	'bootstrap5' => true,
 	'fontawesome4' => true,
 	'ajaxlib' => true,
 	'dialoglib' => true,
+	'cis'=>true,
 	'phrases' => array(
 		'global' => array(
 			'anerkennungNachgewiesenerKenntnisse',
 			'antragStellen',
-			'antragWurdeGestellt',
-			'antragBereitsGestellt',
+            'antragWurdeGestellt',
+            'antragBereitsGestellt',
 			'bearbeitungGesperrt'
 		),
 		'ui' => array(
 			'hilfeZuDieserSeite',
 			'hochladen',
-			'inBearbeitung',
-			'neu',
+            'inBearbeitung',
+            'neu',
 			'maxZeichen',
-			'errorBestaetigungFehlt',
+            'errorBestaetigungFehlt',
 			'systemfehler',
-			'errorDokumentZuGross'
+            'errorDokumentZuGross'
 		),
 		'anrechnung' => array(
 			'deadlineUeberschritten',
 			'benotungDerLV',
-			'anrechnungEctsTextBeiUeberschreitung',
-			'anrechnungEctsTooltipTextBeiUeberschreitung'
+            'anrechnungEctsTextBeiUeberschreitung',
+            'anrechnungEctsTooltipTextBeiUeberschreitung'
 		),
 		'person' => array(
 			'student',
@@ -54,6 +55,9 @@ $includesArray = array(
 		'public/js/bootstrapper.js',
 		'public/js/lehre/anrechnung/requestAnrechnung.js'
 
+	),
+	'customCSSs' => array(
+		'public/css/lehre/anrechnung.css'
 	)
 );
 
@@ -81,23 +85,23 @@ else
     }
 </style>
 
-<div id="page-wrapper">
+<div  id="page-wrapper">
     <div class="container-fluid">
         <!-- header -->
         <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
+            <div class="col-lg-12 my-4 border-bottom">
+                <h3 class="fw-normal">
 					<?php echo $this->p->t('anrechnung', 'anerkennungNachgewiesenerKenntnisse'); ?>
-                    <small>| <?php echo $this->p->t('anrechnung', 'antragStellen'); ?></small>
+                    <small class="text-secondary fs-6">| <?php echo $this->p->t('anrechnung', 'antragStellen'); ?></small>
                 </h3>
             </div>
         </div>
 		<!-- end header-->
 		
         <div class="row">
-            <div class="col-xs-8">
+            <div class="col-8">
 				<!-- Antragsdaten, Dokument Upload, Notiz-->
-				<div class="row">
+				<div class="row mb-5">
 					<div class="col-lg-12">
 						<form id="requestAnrechnung-form">
 							<input type="hidden" name="anrechnung_id" id="anrechnung_id" value="<?php echo $anrechnungData->anrechnung_id ?>">
@@ -107,19 +111,19 @@ else
                             <input type="hidden" name="sumEctsSchulisch" value="<?php echo $antragData->sumEctsSchulisch ?>">
                             <input type="hidden" name="sumEctsBeruflich" value="<?php echo $antragData->sumEctsBeruflich ?>">
                             <!-- Antragsdaten -->
-							<div class="row">
+							<div class="row mb-3">
 								<div class="col-lg-12">
-									<div class="panel panel-default">
-										<div class="panel-heading">
-											<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'antrag'); ?></b></span>&emsp;
-											<span class="requestAnrechnung-anrechnungInfoTooltip" data-toggle="tooltip" data-placement="right"
-												  title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
+									<div class="card">
+										<div class="card-header">
+											<span class="text-uppercase fw-bold"><?php echo $this->p->t('anrechnung', 'antrag'); ?></span>&emsp;
+											<div class="d-inline"  data-bs-toggle="tooltip" data-bs-placement="right"
+												  data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
 												<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-											</span>
-											<span class="pull-right"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
+											</div>
+											<span class="float-end"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
 														id="requestAnrechnung-antragdatum"><?php echo !empty($anrechnungData->anrechnung_id) ? $anrechnungData->insertamum : '-' ?></span></span>
 										</div>
-										<table class="panel-body table table-bordered table-condensed">
+										<table class="card-body table table-bordered table-condensed mb-0">
 											<tbody>
 											<tr>
 												<th><?php echo ucfirst($this->p->t('person', 'studentIn')); ?></th>
@@ -147,17 +151,17 @@ else
 											</tr>
                                             <tr>
                                                 <th>
-                                                    <?php echo $this->p->t('anrechnung', 'bisherAngerechneteEcts'); ?>
-                                                    <span data-toggle="tooltip" data-placement="right"
-                                                        title="<?php echo $this->p->t('anrechnung', 'anrechnungEctsTooltipText'); ?>">
+                                                    <?php echo $this->p->t('anrechnung', 'bisherAngerechneteEcts'); ?>&emsp;
+                                                    <div class="d-inline" data-bs-toggle="tooltip" data-bs-placement="right"
+                                                        data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungEctsTooltipText'); ?>">
                                                         <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-                                                    </span>
+                                                    </div>
                                                 </th>
                                                 <td colspan="3">
                                                     Total ECTS: <span id="sumEctsTotal"><?php echo number_format($antragData->sumEctsSchulisch + $antragData->sumEctsBeruflich, 1) ?></span>
                                                     [ Schulisch: <span id="sumEctsSchulisch"><?php echo $antragData->sumEctsSchulisch ?></span> |
                                                     Beruflich: <span id="sumEctsBeruflich"><?php echo $antragData->sumEctsBeruflich ?></span> ]
-                                                    <span id="requestAnrechnung-maxEctsUeberschrittenMsg"></span>
+                                                    <div class="p-1 align-items-center" id="requestAnrechnung-maxEctsUeberschrittenMsg"></div>
                                                 </td>
                                             </tr>
 											<tr>
@@ -176,84 +180,88 @@ else
 								</div>
 							</div>
 							<!-- Antrag mit Checkboxen -->
-							<div class="row">
+							<div class="row mb-3">
 								<div class="col-lg-12">
-									<div class="well" style="border:solid black 3px">
-										<span><?php echo $this->p->t('anrechnung', 'antragStellenText'); ?></span>&emsp;
-										<div class="checkbox">
-											<label>
-												<input type="radio" name="begruendung" value="1" required
-													<?php echo $anrechnungData->begruendung_id == '1' ? 'checked' : ''; ?> />
+									<div class="border border-dark border-3 rounded p-3" >
+										<p ><?php echo $this->p->t('anrechnung', 'antragStellenText'); ?></p>
+										
+										<div class="ps-3 ">
+										
+											<div  class="form-check mb-1">
+											
+												<input class="form-check-input" type="radio" name="begruendung" value="1" <?php echo $anrechnungData->begruendung_id == '1' ? 'checked' : ''; ?> required />
 												<?php echo $this->p->t('anrechnung', 'antragStellenWegenZeugnis'); ?>&emsp;
-												<span id="requestAnrechnung-anrechnungGrundZeugnisTooltip" data-toggle="tooltip" data-placement="right"
-													  title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundZeugnisTooltipText'); ?>" />
-												<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-											</span>
-											</label>
-										</div>
-                                        <div class="checkbox">
-                                            <label>
-                                                <input type="radio" name="begruendung" value="5" required
-                                                    <?php echo $anrechnungData->begruendung_id == '5' ? 'checked' : ''; ?> />
-                                                <?php echo $this->p->t('anrechnung', 'antragStellenWegenHochschulzeugnis'); ?>&emsp;
-                                                <span id="requestAnrechnung-anrechnungGrundHochschulzeugnisTooltip" data-toggle="tooltip" data-placement="right"
-                                                      title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundZeugnisTooltipText'); ?>" />
-                                                <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-                                                </span>
-                                            </label>
-                                        </div>
-										<div class="checkbox">
-											<label>
-												<input type="radio" name="begruendung" value="4" required
-													<?php echo $anrechnungData->begruendung_id == '4' ? 'checked' : ''; ?>>
+												<div class="d-inline" id="requestAnrechnung-anrechnungGrundZeugnisTooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
+														data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundZeugnisTooltipText'); ?>" >
+													<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+												</div>
+											
+											</div>
+										
+											<div class="form-check mb-1">
+											
+												<input class="form-check-input" type="radio" name="begruendung" value="5" <?php echo $anrechnungData->begruendung_id == '5' ? 'checked' : ''; ?>  required />
+												<?php echo $this->p->t('anrechnung', 'antragStellenWegenHochschulzeugnis'); ?>&emsp;
+												<div class="d-inline" id="requestAnrechnung-anrechnungGrundHochschulzeugnisTooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
+                                                      data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundZeugnisTooltipText'); ?>">
+                                                	<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+                                                </div>
+										
+											</div>
+											<div class="form-check mb-1">
+											
+												<input class="form-check-input" type="radio" name="begruendung" value="4" <?php echo $anrechnungData->begruendung_id == '4' ? 'checked' : ''; ?>  required />
 												<?php echo $this->p->t('anrechnung', 'antragStellenWegenPraxis'); ?>&emsp;
-												<span id="requestAnrechnung-anrechnungGrundBerufTooltip" data-toggle="tooltip" data-placement="right"
-													  title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundBerufTooltipText'); ?>">
-												<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-											</span>
-											</label>
+												<div class="d-inline" id="requestAnrechnung-anrechnungGrundBerufTooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
+													  data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundBerufTooltipText'); ?>">
+													<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+												</div>
+											
+											</div>
+											
+                                        
+										
 										</div>
 									</div>
 								</div>
 							</div>
-
 							<?php if ($this->config->item('explain_equivalence')): ?>
-                                <!-- Begruendung ECTS -->
-                                <div class="row">
-                                    <div class="col-lg-12">
-                                        <div class="panel panel-default">
-                                            <div class="panel-heading">
-                                                <b><?php echo $this->p->t('anrechnung', 'begruendungEcts'); ?></b>&emsp;
-                                                <span class="requestAnrechnung-anrechnungInfoTooltip" data-toggle="tooltip" data-placement="right"
-                                                      title="<?php echo $this->p->t('anrechnung', 'anrechnungBegruendungEctsTooltipText'); ?>">
-                                                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-                                                </span>
-                                            </div>
-                                            <div class="panel-body">
-                                                <textarea class="form-control" name="begruendung_ects" rows="1" id="requestAnrechnung-begruendungEcts"
-                                                          maxlength="<?php echo CHAR_LENGTH150 ?>" required><?php echo $anrechnungData->begruendung_ects; ?></textarea>
-                                                <small><span class="text-muted pull-right"><?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-begruendungEcts-charCounter"><?php echo CHAR_LENGTH150 ?></span></span></small>
+                            <!-- Begruendung ECTS -->
+                            <div class="row mb-3">
+                                <div class="col-lg-12">
+                                    <div class="card">
+                                        <div class="card-header">
+                                            <span class="fw-bold"><?php echo $this->p->t('anrechnung', 'begruendungEcts'); ?></span>&emsp;
+                                            <div class="d-inline" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungBegruendungEctsTooltipText'); ?>">
+                                                <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
                                             </div>
+											
+                                        </div>
+                                        <div class="card-body">
+                                            <textarea class="form-control" name="begruendung_ects" rows="1" id="requestAnrechnung-begruendungEcts"
+                                                      maxlength="<?php echo CHAR_LENGTH150 ?>" required><?php echo $anrechnungData->begruendung_ects; ?></textarea>
+                                            <small><span class="text-muted float-end"><?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-begruendungEcts-charCounter"><?php echo CHAR_LENGTH150 ?></span></span></small>
                                         </div>
                                     </div>
                                 </div>
-                                <!-- Begruendung LV Inhalt -->
-                                <div class="row">
+                            </div>
+                            <!-- Begruendung LV Inhalt -->
+                            <div class="row mb-3">
                                 <div class="col-lg-12">
-                                    <div class="panel panel-default">
-                                        <div class="panel-heading">
-                                            <b><?php echo $this->p->t('anrechnung', 'begruendungLvinhalt'); ?></b>&emsp;
-                                            <span class="requestAnrechnung-anrechnungInfoTooltip" data-toggle="tooltip" data-placement="right"
-                                                  title="<?php echo $this->p->t('anrechnung', 'anrechnungBegruendungLvinhaltTooltipText'); ?>">
+                                    <div class="card">
+                                        <div class="card-header">
+                                            <span class="fw-bold"><?php echo $this->p->t('anrechnung', 'begruendungLvinhalt'); ?></span>&emsp;
+                                            <div class="d-inline" data-bs-toggle="tooltip" data-bs-placement="right"
+                                                  data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungBegruendungLvinhaltTooltipText'); ?>">
                                                 <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-                                            </span>
+                                            </div>
                                         </div>
-                                        <div class="panel-body">
+                                        <div class="card-body">
                                             <textarea class="form-control" name="begruendung_lvinhalt" rows="7" id="requestAnrechnung-begruendungLvinhalt"
                                                       minlength="<?php echo CHAR_LENGTH500 ?>"
                                                       maxlength="<?php echo CHAR_LENGTH1000 ?>" required><?php echo $anrechnungData->begruendung_lvinhalt; ?></textarea>
-                                            <small><span class="text-muted pull-right">&nbsp;/&nbsp;<?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-begruendungLvinhalt-charCounterMax"><?php echo CHAR_LENGTH1000 ?></span></span></small>
-                                            <small><span class="text-muted pull-right"><?php echo $this->p->t('ui', 'fehlendeMinZeichen'); ?> :<span id="requestAnrechnung-begruendungLvinhalt-charCounterMin"><?php echo CHAR_LENGTH500 ?></span></span></small>
+                                            <small><span class="text-muted float-end">&nbsp;/&nbsp;<?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-begruendungLvinhalt-charCounterMax"><?php echo CHAR_LENGTH1000 ?></span></span></small>
+                                            <small><span class="text-muted float-end"><?php echo $this->p->t('ui', 'fehlendeMinZeichen'); ?> :<span id="requestAnrechnung-begruendungLvinhalt-charCounterMin"><?php echo CHAR_LENGTH500 ?></span></span></small>
                                         </div>
                                     </div>
                                 </div>
@@ -261,95 +269,91 @@ else
 							<?php endif; ?>
 
 							<!-- Dokument Upload-->
-							<div class="row">
+							<div class="row mb-3">
 								<div class="col-lg-12">
-									<div class="panel panel-default">
-										<div class="panel-heading">
-											<b><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?></b>&emsp;
-											<span class="requestAnrechnung-anrechnungInfoTooltip" data-toggle="tooltip" data-placement="right"
-												  title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundAllgemeinTooltipText'); ?>">
+									<div class="card">
+										<div class="card-header">
+											<span class="fw-bold"><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?></span>&emsp;
+											<div class="d-inline" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungGrundAllgemeinTooltipText'); ?>">
 												<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-											</span>
-										</div>
-										<div class="form-inline panel-body">
-											<div class="form-group">
-												<input type="file" id="requestAnrechnung-uploadfile"
-													   name="uploadfile" accept=".pdf" size="50" data-maxsize="<?php echo (int)ini_get('upload_max_filesize') * 1024 * 1024 ?>"
-													   required>
 											</div>
-											<span id="requestAnrechnung-uploadTooltip" data-toggle="tooltip" data-placement="right"
-											   title="<?php echo $this->p->t('ui', 'uploadTooltipText'); ?>">
-												<i class="fa fa-lg fa-question-circle-o" aria-hidden="true"></i>
-											</span>
-											<a class="pull-right <?php echo !empty($anrechnungData->dms_id) ? '' : 'hidden' ?>"
-											   id="requestAnrechnung-downloadDocLink"
-											   href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
-											   target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?>
-											</a>
+										</div>
+										<div class=" card-body">
+											<div class="input-group d-flex align-items-center ">
+												<input class="form-control flex-fill" type="file" id="requestAnrechnung-uploadfile"
+														name="uploadfile" accept=".pdf" size="50" data-maxsize="<?php echo (int)ini_get('upload_max_filesize') * 1024 * 1024 ?>"
+														required>
+												<div class="mx-4 " id="requestAnrechnung-uploadTooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
+											   		data-bs-title="<?php echo $this->p->t('ui', 'uploadTooltipText'); ?>">
+													<i class="fa fa-lg fa-question-circle-o" aria-hidden="true"></i>
+												</div>
+												<a class="mx-4 float-end <?php echo !empty($anrechnungData->dms_id) ? '' : 'visually-hidden' ?>"
+													id="requestAnrechnung-downloadDocLink"
+													href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
+													target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?>
+												</a>
+											</div>
+												
+											
+											
 										</div>
 									</div>
 								</div>
 							</div>
 							<!-- Herkunft der Kenntnisse -->
-							<div class="row">
+							<div class="row mb-3">
 								<div class="col-lg-12">
-									<div class="row">
-										<div class="col-lg-12">
-											<div class="panel panel-default">
-												<div class="panel-heading">
-													<b><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?></b>&emsp;
-													<span class="requestAnrechnung-anrechnungInfoTooltip" data-toggle="tooltip" data-placement="right"
-														  title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
+									
+											<div class="card">
+												<div class="card-header">
+													<span class="fw-bold"><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?></span>&emsp;
+													<div class="d-inline" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" data-bs-title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
 														<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-													</span>
+													</div>
 												</div>
-												<div class="panel-body">
+												<div class="card-body">
 													<textarea class="form-control" name="anmerkung" rows="1" id="requestAnrechnung-herkunftDerKenntnisse"
                                                               maxlength="<?php echo CHAR_LENGTH125 ?>" required><?php echo $anrechnungData->anmerkung; ?></textarea>
-													<small><span class="text-muted pull-right"><?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-herkunftDerKenntnisse-charCounter"><?php echo CHAR_LENGTH125 ?></span></span></small>
+													<small><span class="text-muted float-end"><?php echo $this->p->t('ui', 'maxZeichen'); ?> :<span id="requestAnrechnung-herkunftDerKenntnisse-charCounter"><?php echo CHAR_LENGTH125 ?></span></span></small>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
+									
 							</div>
 							<!-- Bestaetigung-->
-							<div class="row">
+							<div class="row mb-3">
 								<div class="col-lg-12">
-									<div class="well" style="border:solid black 3px">
-										<div class="checkbox">
-											<label>
-												<input type="checkbox" name="bestaetigung" required>
-												<b><?php echo $this->p->t('anrechnung', 'bestaetigungstext'); ?></b>
-											</label>
-										</div>
+									<div class="border border-3 rounded border-dark p-3" >
+										
+											<div class="form-check">
+											<input class="form-check-input border-3" type="checkbox" name="bestaetigung" required>
+											<small  class=" fw-bold"><?php echo $this->p->t('anrechnung', 'bestaetigungstext'); ?></small>
+											</div>
 									</div>
 								</div>
 							</div>
 							<!-- Button 'Anrechnung beantragen'-->
-							<div class="pull-right">
+							<div class="float-end">
 								<input type="submit" id="requestAnrechnung-apply-anrechnung" class="btn btn-primary"
 									   value="<?php echo $this->p->t('anrechnung', 'anrechnungBeantragen'); ?>">
 							</div>
 						</form>
 					</div>
 				</div>
-				<br><br><br><br>
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
 				 <!-- Status panel -->
-                <div class="alert text-center" id="requestAnrechnung-status">Status: <b><span class="text-uppercase" id="requestAnrechnung-status_kurzbz"
+                <div class="alert text-center" id="requestAnrechnung-status">Status: <span class="fw-bold text-uppercase" id="requestAnrechnung-status_kurzbz"
                              data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
                             <?php echo $anrechnungData->status; ?>
-                        </span></b>
+                        </span>
 				</div>
 				<!-- Sperregrund panel (hidden by default) -->
-				<div class="alert alert-danger text-center hidden" id="requestAnrechnung-sperre"
+				<div class="alert bg-danger-subtle text-center visually-hidden" id="requestAnrechnung-sperre"
 					 data-anrechnung_id="<?php echo empty($anrechnungData->anrechnung_id) ? '' : $anrechnungData->anrechnung_id; ?>"
 					 data-expired="<?php echo json_encode($is_expired); ?>"
 					 data-blocked="<?php echo json_encode($is_blocked) ?>">
 				</div>
-                <br>
 				<?php $this->load->view('lehre/anrechnung/requestAnrechnungImportant'); ?>
             </div>
         </div>
diff --git a/application/views/lehre/anrechnung/requestAnrechnungImportant.php b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
index 8cacb9c26..0ee13d422 100644
--- a/application/views/lehre/anrechnung/requestAnrechnungImportant.php
+++ b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
@@ -1,70 +1,71 @@
-<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-    <!--    Beantragung: Fristen panel -->
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingOne">
-            <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
-                   aria-expanded="true" aria-controls="collapseOne">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenTitle'); ?>
-                </a>
-            </h4>
+
+
+    <div class="accordion" id="requestAnrechnungImportant">
+       <!--    Beantragung: Fristen panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div  class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
+        <div class="d-flex">
+        
+        <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenTitle'); ?>
+        
         </div>
-        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-            <div class="panel-body">
-				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Beantragung" class="accordion-collapse collapse show" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenBody'); ?>
+      </div>
     </div>
-    <!--    Referenzbeispiele ECTS Berechnung panel -->
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingBegruendung">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseBegruendung"
-                   aria-expanded="false" aria-controls="collapseBegruendung">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+  </div>
+  <!--    Referenzbeispiele ECTS Berechnung panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
+        <div class="d-flex">
+        <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungTitle'); ?>
-                </a>
-            </h4>
         </div>
-        <div id="collapseBegruendung" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBegruendung">
-            <div class="panel-body">
-				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Referenzbeispiele" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungBody'); ?>
+      </div>
     </div>
-    <!--    Nachweisdokumente: Voraussetzung panel -->
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingTwo">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
-                   aria-expanded="false" aria-controls="collapseTwo">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+  </div>
+  <!--    Nachweisdokumente: Voraussetzung panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+    <div class="d-flex">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Nachweisdokumente" aria-expanded="false" aria-controls="Nachweisdokumente">
+        <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoNachweisdokumenteTitle'); ?>
-                </a>
-            </h4>
         </div>
-        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-            <div class="panel-body">
-				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoNachweisdokumenteBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Nachweisdokumente" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoNachweisdokumenteBody'); ?>
+      </div>
     </div>
+  </div>
     <!--    Herkunft der Kenntnisse: Angaben panel -->
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingThree">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
-                   aria-expanded="false" aria-controls="collapseThree">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
+        <div class="d-flex">
+        <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseTitle'); ?>
-                </a>
-            </h4>
         </div>
-        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-            <div class="panel-body">
-				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="HerkunftKenntnisse" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseBody'); ?>
+      </div>
     </div>
+  </div>
+
 </div>
\ No newline at end of file
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungDetail.php b/application/views/lehre/anrechnung/reviewAnrechnungDetail.php
index ab7c6e710..97ff297ca 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungDetail.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungDetail.php
@@ -2,51 +2,53 @@
 $this->load->config('anrechnung');
 
 $includesArray = array(
-	'title' => $this->p->t('anrechnung', 'anrechnungenPruefen'),
-	'jquery3' => true,
-	'jqueryui1' => true,
-	'bootstrap3' => true,
-	'fontawesome4' => true,
-	'ajaxlib' => true,
-	'dialoglib' => true,
-	'phrases' => array(
-		'global' => array(
-			'anerkennungNachgewiesenerKenntnisse',
-			'antragStellen'
+	array(
+		'title' => $this->p->t('anrechnung', 'anrechnungenPruefen'),
+		'jquery3' => true,
+		'jqueryui1' => true,
+		'bootstrap5' => true,
+		'cis' => true,
+		'fontawesome4' => true,
+		'ajaxlib' => true,
+		'dialoglib' => true,
+		'phrases' => array(
+			'global' => array(
+				'anerkennungNachgewiesenerKenntnisse',
+				'antragStellen'
+			),
+			'ui' => array(
+				'hilfeZuDieserSeite',
+				'hochladen',
+				'nichtSelektierbarAufgrundVon',
+				'systemfehler',
+				'bitteMindEinenAntragWaehlen',
+				'bitteBegruendungAngeben',
+				'bitteBegruendungVervollstaendigen',
+				'anrechnungenWurdenEmpfohlen',
+				'anrechnungenWurdenNichtEmpfohlen'
+			),
+			'person' => array(
+				'student',
+				'personenkennzeichen'
+			),
+			'lehre' => array(
+				'studiensemester',
+				'studiengang',
+				'lehrveranstaltung',
+				'ects',
+				'lektor',
+			),
+			'anrechnung' => array(
+				'empfehlungPositivConfirmed',
+				'empfehlungNegativConfirmed'
+			)
 		),
-		'ui' => array(
-			'hilfeZuDieserSeite',
-			'hochladen',
-			'nichtSelektierbarAufgrundVon',
-			'systemfehler',
-			'bitteMindEinenAntragWaehlen',
-			'bitteBegruendungAngeben',
-			'bitteBegruendungVervollstaendigen',
-			'anrechnungenWurdenEmpfohlen',
-			'anrechnungenWurdenNichtEmpfohlen'
+		'customCSSs' => array(
+			'public/css/lehre/anrechnung.css'
 		),
-		'person' => array(
-			'student',
-			'personenkennzeichen'
-		),
-		'lehre' => array(
-			'studiensemester',
-			'studiengang',
-			'lehrveranstaltung',
-			'ects',
-			'lektor',
-		),
-		'anrechnung' => array(
-			'empfehlungPositivConfirmed',
-			'empfehlungNegativConfirmed'
-		)
-	),
-	'customCSSs' => array(
-		'public/css/Tabulator.css'
-	),
-	'customJSs' => array(
-		'public/js/bootstrapper.js',
-		'public/js/lehre/anrechnung/reviewAnrechnungDetail.js'
+		'customJSs' => array(
+			'public/js/bootstrapper.js',
+			'public/js/lehre/anrechnung/reviewAnrechnungDetail.js'
 
 	)
 );
@@ -65,104 +67,129 @@ if (defined("CIS4")) {
 ?>
 
 <div id="page-wrapper">
-    <div class="container-fluid">
-        <!-- title -->
-        <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
+	<div class="container-fluid">
+		<!-- title -->
+		<div class="row">
+			<div class="col-lg-12 my-4 border-bottom">
+				<h3 class="fw-normal ">
 					<?php echo $this->p->t('anrechnung', 'anrechnungenPruefen'); ?>
-                    <small>| <?php echo $this->p->t('global', 'detailsicht'); ?></small>
-                </h3>
-            </div>
-        </div>
+					<small class="text-secondary fs-6">| <?php echo $this->p->t('global', 'detailsicht'); ?></small>
+				</h3>
+			</div>
+		</div>
 
-        <div class="row">
-            <div class="col-xs-8">
+		<div class="row">
+			<div class="col-8">
 				<!-- Antragsdaten -->
-				<div class="row">
+				<div class="row mb-4">
 					<div class="col-lg-12">
-						<div class="panel panel-default">
-							<div class="panel-heading">
-								<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'antrag'); ?></b></span>
+						<div class="card">
+							<div class="card-header">
+								<span
+									class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'antrag'); ?></b></span>
 								</span>&emsp;
-								<span class="reviewAnrechnungDetail-anrechnungInfoTooltip" data-toggle="tooltip"
-									  data-placement="right"
-									  title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
-													<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
-												</span>
-								<span class="pull-right"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
-											id="reviewAnrechnung-status"><?php echo !empty($anrechnungData->anrechnung_id) ? $anrechnungData->insertamum : '-' ?></span></span>
+								<span class="reviewAnrechnungDetail-anrechnungInfoTooltip" data-bs-toggle="tooltip"
+									data-bs-placement="right" data-bs-html="true"
+									title="<?php echo $this->p->t('anrechnung', 'anrechnungInfoTooltipText'); ?>">
+									<i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>
+								</span>
+								<span class="float-end"><?php echo $this->p->t('anrechnung', 'antragdatum'); ?>: <span
+										id="reviewAnrechnung-status"><?php echo !empty($anrechnungData->anrechnung_id) ? $anrechnungData->insertamum : '-' ?></span></span>
 							</div>
-							<div class="panel-body">
+							<div class="card-body">
 								<div class="row">
 									<div class="col-lg-4">
-										<table class="table table-bordered table-condensed table-fixed">
+										<table class="table table-bordered table-condensed table-fixed mb-0">
 											<tbody>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('person', 'studentIn')); ?></th>
-												<td><?php echo $antragData->vorname . ' ' . $antragData->nachname; ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo $this->p->t('person', 'personenkennzeichen'); ?></th>
-												<td><?php echo $antragData->matrikelnr ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('lehre', 'studiensemester')); ?></th>
-												<td><?php echo $antragData->studiensemester_kurzbz ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo ucfirst($this->p->t('lehre', 'studiengang')); ?></th>
-												<td><?php echo $antragData->stg_bezeichnung ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-5"><?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?></th>
-												<td><?php echo $antragData->lv_bezeichnung ?></td>
-											</tr>
-                                            <tr>
-                                                <th class="col-xs-5"><?php echo $this->p->t('lehre', 'ects'); ?></th>
-                                                <td><?php echo $antragData->ects ?></td>
-                                            </tr>
-                                            <tr>
-                                                <th class="col-xs-5"><?php echo $this->p->t('lehre', 'lektorInnen'); ?></th>
-                                                <td>
-													<?php $len = count($antragData->lektoren) - 1 ?>
-													<?php foreach ($antragData->lektoren as $key => $lektor): ?>
-														<?php echo $lektor->vorname . ' ' . $lektor->nachname;
-														echo $key === $len ? '' : ', ' ?>
-													<?php endforeach; ?>
-                                                </td>
-                                            </tr>
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('person', 'studentIn')); ?>
+													</th>
+													<td><?php echo $antragData->vorname . ' ' . $antragData->nachname; ?>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo $this->p->t('person', 'personenkennzeichen'); ?>
+													</th>
+													<td><?php echo $antragData->matrikelnr ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('lehre', 'studiensemester')); ?>
+													</th>
+													<td><?php echo $antragData->studiensemester_kurzbz ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo ucfirst($this->p->t('lehre', 'studiengang')); ?>
+													</th>
+													<td><?php echo $antragData->stg_bezeichnung ?></td>
+												</tr>
+												<tr>
+													<th class="col-5">
+														<?php echo $this->p->t('lehre', 'lehrveranstaltung'); ?>
+													</th>
+													<td><?php echo $antragData->lv_bezeichnung ?></td>
+												</tr>
+												<tr>
+													<th class="col-5"><?php echo $this->p->t('lehre', 'ects'); ?></th>
+													<td><?php echo $antragData->ects ?></td>
+												</tr>
+												<tr>
+													<th class="col-5"><?php echo $this->p->t('lehre', 'lektorInnen'); ?>
+													</th>
+													<td>
+														<?php $len = count($antragData->lektoren) - 1 ?>
+														<?php foreach ($antragData->lektoren as $key => $lektor): ?>
+															<?php echo $lektor->vorname . ' ' . $lektor->nachname;
+															echo $key === $len ? '' : ', ' ?>
+														<?php endforeach; ?>
+													</td>
+												</tr>
 											</tbody>
 										</table>
 									</div>
 									<div class="col-lg-8">
-										<table class="table table-bordered table-condensed table-fixed">
+										<table class="table table-bordered table-condensed table-fixed mb-0">
 											<tbody>
 
-											<tr>
-												<th class="col-xs-4"><?php echo ucfirst($this->p->t('global', 'zgv')); ?></th>
-												<td><?php echo $antragData->zgv ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?></th>
-												<td><?php echo $anrechnungData->anmerkung ?></td>
-											</tr>
-											<tr>
-												<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?></th>
-												<td>
-													<a href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
-													   target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?></a>
-												</td>
-											</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo ucfirst($this->p->t('global', 'zgv')); ?>
+													</th>
+													<td><?php echo $antragData->zgv ?></td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'herkunftDerKenntnisse'); ?>
+													</th>
+													<td><?php echo $anrechnungData->anmerkung ?></td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'nachweisdokumente'); ?>
+													</th>
+													<td>
+														<a href="<?php echo current_url() . '/download?dms_id=' . $anrechnungData->dms_id; ?>"
+															target="_blank"><?php echo htmlentities($anrechnungData->dokumentname) ?></a>
+													</td>
+												</tr>
 											<?php if ($this->config->item('explain_equivalence')): ?>
-                                                <tr>
-                                                    <th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'begruendungEctsLabel'); ?></th>
-                                                    <td><span><?php echo $anrechnungData->begruendung_ects ?></span></td>
-                                                </tr>
-                                                <tr>
-                                                    <th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'begruendungLvinhaltLabel'); ?></th>
-                                                    <td><span><?php echo $anrechnungData->begruendung_lvinhalt ?></span></td>
-                                                </tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'begruendungEctsLabel'); ?>
+													</th>
+													<td><span><?php echo $anrechnungData->begruendung_ects ?></span>
+													</td>
+												</tr>
+												<tr>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'begruendungLvinhaltLabel'); ?>
+													</th>
+													<td><span><?php echo $anrechnungData->begruendung_lvinhalt ?></span>
+													</td>
+												</tr>
 											<?php endif; ?>
 											</tbody>
 										</table>
@@ -176,133 +203,158 @@ if (defined("CIS4")) {
 				<!-- Empfehlungsdaten -->
 				<div class="row">
 					<div class="col-lg-12">
-						<div class="panel panel-default" id="reviewAnrechnungDetail-empfehlung" data-empfehlung="<?php echo json_encode($empfehlungData->empfehlung) ?>">
-							<div class="panel-heading">
-								<span class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></b></span>
-								<div class="pull-right">
+						<div class="card mb-4" id="reviewAnrechnungDetail-empfehlung"
+							data-empfehlung="<?php echo json_encode($empfehlungData->empfehlung) ?>">
+							<div class="card-header">
+								<span
+									class="text-uppercase"><b><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></b></span>
+								<div class="float-end">
 									<?php echo $this->p->t('anrechnung', 'empfehlungVon'); ?>:
-									<span id="reviewAnrechnungDetail-empfehlungVon"><?php echo $empfehlungData->empfehlung_von ?></span>
+									<span
+										id="reviewAnrechnungDetail-empfehlungVon"><?php echo $empfehlungData->empfehlung_von ?></span>
 									&emsp;|&emsp;
 									<?php echo $this->p->t('anrechnung', 'empfehlungdatum'); ?>:
-									<span id="reviewAnrechnungDetail-empfehlungAm"><?php echo $empfehlungData->empfehlung_am ?></span>
+									<span
+										id="reviewAnrechnungDetail-empfehlungAm"><?php echo $empfehlungData->empfehlung_am ?></span>
 
 								</div>
 							</div>
-							<div class="panel-body">
+							<div class="card-body">
 								<div class="row">
 									<div class="col-lg-6">
-										<table class="table table-bordered table-condensed table-fixed">
-												<tbody>
+										<table class="table table-bordered table-condensed table-fixed mb-0">
+											<tbody>
 												<tr>
-													<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')); ?></th>
-													<td id="reviewAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAm">
+													<th class="col-4">
+														<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')); ?>
+													</th>
+													<td
+														id="reviewAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAm">
 														<?php echo $empfehlungData->empfehlungsanfrageAm; ?>
 													</td>
 												</tr>
 												<tr>
-													<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'empfehlungsanfrageAn'); ?></th>
-													<td id="reviewAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAn">
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'empfehlungsanfrageAn'); ?>
+													</th>
+													<td
+														id="reviewAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAn">
 														<?php echo $empfehlungData->empfehlungsanfrageAn; ?>
 													</td>
 												</tr>
 												<tr>
-													<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungAm')); ?></th>
+													<th class="col-4">
+														<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungAm')); ?>
+													</th>
 													<td id="reviewAnrechnungDetail-empfehlungDetail-empfehlungAm">
 														<?php echo $empfehlungData->empfehlung_am ?>
 													</td>
 												</tr>
 												<tr>
-													<th class="col-xs-4"><?php echo ucfirst($this->p->t('anrechnung', 'empfehlungVon')); ?></th>
+													<th class="col-4">
+														<?php echo ucfirst($this->p->t('anrechnung', 'empfehlungVon')); ?>
+													</th>
 													<td id="reviewAnrechnungDetail-empfehlungDetail-empfehlungVon">
 														<?php echo $empfehlungData->empfehlung_von ?>
 													</td>
 												</tr>
 												<tr>
-													<th class="col-xs-4"><?php echo $this->p->t('anrechnung', 'empfehlung'); ?></th>
+													<th class="col-4">
+														<?php echo $this->p->t('anrechnung', 'empfehlung'); ?>
+													</th>
 													<td id="reviewAnrechnungDetail-empfehlungDetail-empfehlung"></td>
 												</tr>
 												<tr>
-													<th class="col-xs-4"><?php echo $this->p->t('global', 'begruendung'); ?></th>
+													<th class="col-4">
+														<?php echo $this->p->t('global', 'begruendung'); ?>
+													</th>
 													<td id="reviewAnrechnungDetail-empfehlungDetail-begruendung">
 														<?php echo htmlentities($empfehlungData->begruendung) ?>
 													</td>
 												</tr>
-												</tbody>
-											</table>
+											</tbody>
+										</table>
 									</div>
 									<div class="col-lg-6">
 										<div>
-											<label class="text-center">
-												<?php echo ucfirst($this->p->t('global', 'notizDerSTGL')); ?>
+											<label class="text-center mb-2">
+												<b><?php echo ucfirst($this->p->t('global', 'notizDerSTGL')); ?></b>
 											</label>
-											<textarea rows="4" readonly><?php echo htmlentities($empfehlungData->notiz) ?></textarea>
+											<textarea rows="4"
+												readonly><?php echo htmlentities($empfehlungData->notiz) ?></textarea>
 										</div>
 									</div>
 								</div>
 							</div>
 							<form>
 								<input type="hidden" name="anrechnung_id"
-									   value="<?php echo $anrechnungData->anrechnung_id ?>">
+									value="<?php echo $anrechnungData->anrechnung_id ?>">
 								<!-- Nicht empfehlen panel (hidden) -->
-								<div class="panel panel-default panel-body" style="display: none" id="reviewAnrechnungDetail-begruendung-panel">
-									<div>
-										<h4 class="panel panel-body panel-danger text-danger"><?php echo $this->p->t('anrechnung', 'empfehlungNegativQuestion'); ?></h4>
-                                        <ul class="list-group">
+								<div class="card card-body" style="display: none"
+									id="reviewAnrechnungDetail-begruendung-panel">
+									<div class="mb-4">
+										<h4 class="card card-body bg-danger-subtle my-3">
+											<?php echo $this->p->t('anrechnung', 'empfehlungNegativQuestion'); ?>
+										</h4>
+										<ul class="list-group mb-4">
 											<li class="list-group-item">
 												<span><?php echo $this->p->t('anrechnung', 'empfehlungNegativPruefungNichtMoeglich'); ?></span>&emsp;
-												<span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-													  data-placement="right"
-													  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+												<span class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip"
+													data-bs-placement="right" data-bs-html="true"
+													title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
 													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
 												</span>
 											</li>
 											<li class="list-group-item">
 												<span><?php echo $this->p->t('anrechnung', 'empfehlungNegativKenntnisseNichtGleichwertigWeil'); ?></span>&emsp;
-												<span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip"
-													  data-placement="right"
-													  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+												<span class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip"
+													data-bs-placement="right" data-bs-html="true"
+													title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
 													<i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
 												</span>
 											</li>
-                                            <li class="list-group-item" onclick="{ $(this).closest('div').find('textarea').val('').focus()}">
-                                                <span><?php echo $this->p->t('anrechnung', 'andereBegruendung'); ?></span>
-                                            </li>
+											<li class="list-group-item"
+												onclick="{ $(this).closest('div').find('textarea').val('').focus()}">
+												<span><?php echo $this->p->t('anrechnung', 'andereBegruendung'); ?></span>
+											</li>
 										</ul>
-										<textarea class="form-control" name="begruendung"
-												  id="reviewAnrechnungDetail-begruendung"
-												  rows="2"
-                                                  placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
-                                                  required></textarea>
+										<textarea class="my-3 form-control" name="begruendung"
+											id="reviewAnrechnungDetail-begruendung" rows="2"
+											placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
+											required></textarea>
 									</div>
-									<br>
+
 									<!-- Button Abbrechen & Bestaetigen-->
-									<div class="pull-right">
+									<div class="d-flex justify-content-end">
 										<button id="reviewAnrechnungDetail-begruendung-abbrechen"
-												class="btn btn-default btn-w200" type="reset">
+											class="me-1 btn btn-outline-secondary btn-w200" type="reset">
 											<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
 										</button>
 										<button id="reviewAnrechnungDetail-dont-recommend-anrechnung-confirm"
-												class="btn btn-primary btn-w200" type="button">
+											class="btn btn-primary btn-w200" type="button">
 											<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
 										</button>
 									</div>
 								</div>
 								<!-- Empfehlen panel (hidden)-->
-								<div class="panel panel-default panel-body" style="display: none" id="reviewAnrechnungDetail-empfehlung-panel">
-									<div>
-										<h4 class="panel panel-body panel-success text-success"><?php echo $this->p->t('anrechnung', 'empfehlungPositivQuestion'); ?></h4>
-										&ensp;<?php echo $this->p->t('anrechnung', 'empfehlungPositivSubquestion'); ?>
-										<br><br>
+								<div class="card card-body" style="display: none"
+									id="reviewAnrechnungDetail-empfehlung-panel">
+									<div class="my-3">
+										<h4 class="card card-body bg-success-subtle">
+											<?php echo $this->p->t('anrechnung', 'empfehlungPositivQuestion'); ?>
+										</h4>
+										<span><?php echo $this->p->t('anrechnung', 'empfehlungPositivSubquestion'); ?>
+										</span>
 									</div>
-									<br>
+
 									<!-- Action Button Abbrechen & Bestaetigen-->
-									<div class="pull-right">
+									<div class="d-flex justify-content-end">
 										<button id="reviewAnrechnungDetail-empfehlung-abbrechen"
-												class="btn btn-default btn-w200" type="reset">
+											class="me-1 btn btn-outline-secondary btn-w200" type="reset">
 											<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
 										</button>
 										<button id="reviewAnrechnungDetail-recommend-anrechnung-confirm"
-												class="btn btn-primary btn-w200" type="button">
+											class="btn btn-primary btn-w200" type="button">
 											<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
 										</button>
 									</div>
@@ -310,36 +362,39 @@ if (defined("CIS4")) {
 							</form>
 						</div>
 						<!-- Button Empfehlen / Nicht Empfehlen -->
-						<div class="pull-right">
-							<button id="reviewAnrechnungDetail-dont-recommend-anrechnung-ask" class="btn btn-danger btn-w200"
-									type="button"
-								<?php echo (is_null($empfehlungData->empfehlung) && $isEmpfehlungsberechtigt) ? '' : 'disabled' ?>>
+						<div class="row justify-content-center justify-content-sm-end align-items-center mb-5">
+							<div class="col-auto mb-1">
+							<button id="reviewAnrechnungDetail-dont-recommend-anrechnung-ask"
+								class=" btn btn-danger btn-w200" type="button" <?php echo (is_null($empfehlungData->empfehlung) && $isEmpfehlungsberechtigt) ? '' : 'disabled' ?>>
 								<?php echo ucfirst($this->p->t('anrechnung', 'nichtEmpfehlen')); ?>
 							</button>
-							<button id="reviewAnrechnungDetail-recommend-anrechnung-ask" class="btn btn-primary btn-w200"
-									type="button"
-								<?php echo (is_null($empfehlungData->empfehlung) && $isEmpfehlungsberechtigt) ? '' : 'disabled' ?>>
+							</div>
+							<div class="col-auto mb-1">
+							<button id="reviewAnrechnungDetail-recommend-anrechnung-ask"
+								class="btn btn-primary btn-w200" type="button" <?php echo (is_null($empfehlungData->empfehlung) && $isEmpfehlungsberechtigt) ? '' : 'disabled' ?>>
 								<?php echo ucfirst($this->p->t('anrechnung', 'empfehlen')); ?>
 							</button>
+							</div>
 						</div>
 					</div>
 				</div>
-            </div>
+			</div>
+
+			<div class="col-4 ">
+				<div class="mb-5 alert text-center">
+					Status:
+					<b><span class="text-uppercase" id="reviewAnrechnungDetail-status_kurzbz"
+							data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
+							<?php echo $anrechnungData->status; ?>
+						</span></b>
+				</div>
 
-            <div class="col-xs-4">
-                <div class="alert text-center">
-                    Status:
-                    <b><span class="text-uppercase" id="reviewAnrechnungDetail-status_kurzbz"
-                             data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
-                            <?php echo $anrechnungData->status; ?>
-                        </span></b>
-                </div>
-                <br>
 				<?php $this->load->view('lehre/anrechnung/reviewAnrechnungInfo'); ?>
-            </div>
-        </div>
 
-    </div>
+			</div>
+		</div>
+
+	</div>
 </div>
 
 <?php
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungInfo.php b/application/views/lehre/anrechnung/reviewAnrechnungInfo.php
index 7e658ffcb..c5d30987c 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungInfo.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungInfo.php
@@ -1,82 +1,86 @@
-<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingOne">
-            <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
-                   aria-expanded="true" aria-controls="collapseOne">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-	                <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoFristenTitle'); ?>
-                </a>
-            </h4>
+
+<div class="accordion" id="requestAnrechnungImportant">
+       <!--    Beantragung: Fristen panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div  class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
+        <div class="d-flex">
+        
+            <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+	        <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoFristenTitle'); ?>
+        
         </div>
-        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-            <div class="panel-body">
-	            <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoFristenBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Beantragung" class="accordion-collapse collapse show" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoFristenBody'); ?>
+      </div>
     </div>
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingBegruendung">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseBegruendung"
-                   aria-expanded="false" aria-controls="collapseBegruendung">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungTitle'); ?>
-                </a>
-            </h4>
+  </div>
+  <!--    Referenzbeispiele ECTS Berechnung panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
+        <div class="d-flex">
+            <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+			<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungTitle'); ?>
         </div>
-        <div id="collapseBegruendung" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBegruendung">
-            <div class="panel-body">
-				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Referenzbeispiele" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+        <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungBody'); ?>
+      </div>
     </div>
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingZero">
-            <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZero"
-                   aria-expanded="true" aria-controls="collapseZero">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-	                <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoAntragVoraussetungenTitle'); ?>
-                </a>
-            </h4>
+  </div>
+  <!--    Antrag: Voraussetzungen panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+    <div class="d-flex">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Antrag" aria-expanded="false" aria-controls="Antrag">
+            <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+	        <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoAntragVoraussetungenTitle'); ?>
         </div>
-        <div id="collapseZero" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingZero">
-            <div class="panel-body">
-	            <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoAntragVoraussetungenBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Antrag" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoAntragVoraussetungenBody'); ?>
+      </div>
     </div>
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingTwo">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
-                   aria-expanded="false" aria-controls="collapseTwo">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-	                <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoNachweisdokumenteTitle'); ?>
-                </a>
-            </h4>
+  </div>
+   <!--  Nachweisdokumente: Voraussetzung panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Nachweisdokumente" aria-expanded="false" aria-controls="Nachweisdokumente">
+        <div class="d-flex">
+            <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+	        <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoNachweisdokumenteTitle'); ?>
         </div>
-        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-            <div class="panel-body">
-	            <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoNachweisdokumenteBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="Nachweisdokumente" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoNachweisdokumenteBody'); ?>
+      </div>
     </div>
-    <div class="panel panel-info">
-        <div class="panel-heading" role="tab" id="headingThree">
-            <h4 class="panel-title">
-                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
-                   aria-expanded="false" aria-controls="collapseThree">
-                    <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
-	                <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoHerkunftKenntnisseTitle'); ?>
-                </a>
-            </h4>
+  </div>
+    <!--    Herkunft der Kenntnisse: Angaben panel -->
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
+        <div class="d-flex">
+            <i class="fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
+	        <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoHerkunftKenntnisseTitle'); ?>
         </div>
-        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-            <div class="panel-body">
-	            <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoHerkunftKenntnisseBody'); ?>
-            </div>
         </div>
+    </h2>
+    <div id="HerkunftKenntnisse" class="accordion-collapse collapse" data-bs-parent="#requestAnrechnungImportant">
+      <div class="accordion-body">
+        <?php echo $this->p->t('anrechnung', 'reviewAnrechnungInfoHerkunftKenntnisseBody'); ?>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+
+</div>
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php b/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
index d7f669675..c4a37b4e2 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
@@ -1,80 +1,85 @@
 <?php
 
 $includesArray = array(
-	'title' => $this->p->t('anrechnung', 'anrechnungenPruefen'),
-	'jquery3' => true,
-	'jqueryui1' => true,
-	'bootstrap3' => true,
-	'fontawesome4' => true,
-	'tabulator4' => true,
-	'ajaxlib' => true,
-	'dialoglib' => true,
-	'tablewidget' => true,
-	'phrases' => array(
-		'global' => array(
-			'begruendung',
-			'zgv'
-		),
-		'anrechnung' => array(
-			'nachweisdokumente',
-			'empfehlung',
-			'herkunft'
-		),
-		'ui' => array(
-			'anzeigen',
-			'alleAnzeigen',
-			'hilfeZuDieserSeite',
-			'hochladen',
-			'spaltenEinstellen',
-			'hilfeZuDieserSeite',
-			'alleAuswaehlen',
-			'alleAbwaehlen',
-			'ausgewaehlteZeilen',
-			'hilfe',
-			'tabelleneinstellungen',
-			'keineDatenVorhanden',
-			'spaltenEinstellen',
-			'ja',
-			'nein',
-			'nichtSelektierbarAufgrundVon',
-			'systemfehler',
-			'bitteMindEinenAntragWaehlen',
-			'bitteBegruendungAngeben',
-			'anrechnungenWurdenEmpfohlen',
-			'anrechnungenWurdenNichtEmpfohlen'
-		),
-		'person' => array(
-			'student',
-			'personenkennzeichen',
-			'vorname',
-			'nachname'
-		),
-		'lehre' => array(
-			'studiensemester',
-			'studiengang',
-			'lehrveranstaltung',
-			'ects',
-			'lektor',
-		),
-		'table' => array(
-			'spaltenEinAusblenden',
-			'spaltenEinAusblendenMitKlickOeffnen',
-			'spaltenEinAusblendenAufEinstellungenKlicken',
-			'spaltenEinAusblendenMitKlickAktivieren',
-			'spaltenEinAusblendenMitKlickSchliessen',
-			'spaltenbreiteVeraendern',
-			'spaltenbreiteVeraendernText',
-			'spaltenbreiteVeraendernInfotext',
-			'zeilenAuswaehlen',
-			'zeilenAuswaehlenEinzeln',
-			'zeilenAuswaehlenBereich',
-			'zeilenAuswaehlenAlle'
-		)
-	),
-	'customJSs' => array(
-		'public/js/bootstrapper.js',
-		'public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js'
-	)
+    'title' => $this->p->t('anrechnung', 'anrechnungenPruefen'),
+    'jquery3' => true,
+    'jqueryui1' => true,
+    'bootstrap5' => true,
+    'fontawesome4' => true,
+    'tabulator5' => true,
+    'tabulator5JQuery' => true,
+    'cis' => true,
+    'ajaxlib' => true,
+    'dialoglib' => true,
+    'tablewidget' => true,
+    'phrases' => array(
+        'global' => array(
+            'begruendung',
+            'zgv'
+        ),
+        'anrechnung' => array(
+            'nachweisdokumente',
+            'empfehlung',
+            'herkunft'
+        ),
+        'ui' => array(
+            'anzeigen',
+            'alleAnzeigen',
+            'hilfeZuDieserSeite',
+            'hochladen',
+            'spaltenEinstellen',
+            'hilfeZuDieserSeite',
+            'alleAuswaehlen',
+            'alleAbwaehlen',
+            'ausgewaehlteZeilen',
+            'hilfe',
+            'tabelleneinstellungen',
+            'keineDatenVorhanden',
+            'spaltenEinstellen',
+            'ja',
+            'nein',
+            'nichtSelektierbarAufgrundVon',
+            'systemfehler',
+            'bitteMindEinenAntragWaehlen',
+            'bitteBegruendungAngeben',
+            'anrechnungenWurdenEmpfohlen',
+            'anrechnungenWurdenNichtEmpfohlen'
+        ),
+        'person' => array(
+            'student',
+            'personenkennzeichen',
+            'vorname',
+            'nachname'
+        ),
+        'lehre' => array(
+            'studiensemester',
+            'studiengang',
+            'lehrveranstaltung',
+            'ects',
+            'lektor',
+        ),
+        'table' => array(
+            'spaltenEinAusblenden',
+            'spaltenEinAusblendenMitKlickOeffnen',
+            'spaltenEinAusblendenAufEinstellungenKlicken',
+            'spaltenEinAusblendenMitKlickAktivieren',
+            'spaltenEinAusblendenMitKlickSchliessen',
+            'spaltenbreiteVeraendern',
+            'spaltenbreiteVeraendernText',
+            'spaltenbreiteVeraendernInfotext',
+            'zeilenAuswaehlen',
+            'zeilenAuswaehlenEinzeln',
+            'zeilenAuswaehlenBereich',
+            'zeilenAuswaehlenAlle'
+        )
+    ),
+    'customCSSs' => array(
+        'public/css/lehre/anrechnung.css'
+    ),
+    'customJSs' => array(
+        'public/js/bootstrapper.js',
+        'public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js'
+    )
 );
 
 if (defined("CIS4")) {
@@ -94,147 +99,152 @@ if (defined("CIS4")) {
     <div class="container-fluid">
         <!-- title -->
         <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
-					<?php echo $this->p->t('anrechnung', 'anrechnungenPruefen'); ?>
-                    <small>| <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
+            <div class="col-lg-12 my-4 border-bottom">
+                <h3 class="fw-normal">
+                    <?php echo $this->p->t('anrechnung', 'anrechnungenPruefen'); ?>
+                    <small class="text-secondary fs-6">|
+                        <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
                 </h3>
             </div>
         </div>
         <!-- dropdown studiensemester -->
         <div class="row">
             <div class="col-lg-12">
-                <form id="formApproveAnrechnungUebersicht" class="form-inline" action="" method="get">
-                    <div class="form-group">
-						<?php
-						echo $this->widgetlib->widget(
-							'Studiensemester_widget',
-							array(
-								DropdownWidget::SELECTED_ELEMENT => $studiensemester_selected
-							),
-							array(
-								'name' => 'studiensemester',
-								'id' => 'studiensemester'
-							)
-						);
-						?>
+                <form id="formReviewAnrechnungUebersicht" class="row align-items-center" action="" method="get">
+                    <div class="col-auto">
+                        <?php
+                        echo $this->widgetlib->widget(
+                            'Studiensemester_widget',
+                            array(
+                                DropdownWidget::SELECTED_ELEMENT => $studiensemester_selected
+                            ),
+                            array(
+                                'name' => 'studiensemester',
+                                'id' => 'studiensemester',
+                                'class' => 'form-select w-auto ',
+                            )
+                        );
+                        ?>
                     </div>
                     <button type="submit"
-                            class="btn btn-default form-group"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
+                        class="btn btn-outline-secondary col-auto"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
                 </form>
             </div>
         </div>
         <!-- Tabelle -->
         <div class="row">
-            <div class="col-xs-12">
-				<?php $this->load->view('lehre/anrechnung/reviewAnrechnungUebersichtData.php');?>
+            <div class="col-12">
+                <?php $this->load->view('lehre/anrechnung/reviewAnrechnungUebersichtData.php'); ?>
             </div>
         </div>
         <!-- Empfehlung / Nicht Empfehlung Panel -->
         <div class="row">
-            <div class="panel panel-default panel-body" style="display: none"
-                 id="reviewAnrechnungUebersicht-begruendung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-danger text-danger"><?php echo $this->p->t('anrechnung', 'empfehlungenNegativQuestion'); ?></h4>
-                    <b><span>&ensp;<?php echo $this->p->t('anrechnung', 'bitteBegruendungAngeben'); ?></span>
-                        <span class="text-danger">
-                        <?php echo $this->p->t('anrechnung', 'begruendungWirdFuerAlleUebernommen'); ?>
-                        </span></b>
-                    <br><br>
-                    <ul class="list-group">
+            <div class="border border-1 mb-4" style="display: none" id="reviewAnrechnungUebersicht-begruendung-panel">
+                <div class="mb-4 col-12">
+                    <h4 class="card card-body border-danger text-danger my-3">
+                        <?php echo $this->p->t('anrechnung', 'empfehlungenNegativQuestion'); ?>
+                    </h4>
+                    <div class="mb-4">
+                        <b><span>&ensp;<?php echo $this->p->t('anrechnung', 'bitteBegruendungAngeben'); ?></span>
+                            <span class="text-danger">
+                                <?php echo $this->p->t('anrechnung', 'begruendungWirdFuerAlleUebernommen'); ?>
+                            </span></b>
+                    </div>
+
+                    <ul class="list-group mb-4">
                         <li class="list-group-item">
                             <span><?php echo $this->p->t('anrechnung', 'empfehlungNegativPruefungNichtMoeglich'); ?></span>
-                            <span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip" data-placement="right"
-                                  title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
+                            <span class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip"
+                                data-bs-placement="right" title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
                                 <i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
                             </span>
                         </li>
-                        <li class="list-group-item disabled">
+                        <li class="list-group-item list-group-item-secondary">
                             <?php echo $this->p->t('anrechnung', 'empfehlungNegativKenntnisseNichtGleichwertigWeilHinweis'); ?>
                         </li>
                     </ul>
                     <textarea class="form-control" name="begruendung" id="reviewAnrechnungUebersicht-begruendung"
-                              rows="2"
-                              placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
-                              required></textarea>
+                        rows="2"
+                        placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
+                        required></textarea>
                 </div>
-                <br>
+
                 <!-- Action Button Abbrechen & Bestaetigen-->
-                <div class="pull-right">
+                <div class=" mb-4 d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-begruendung-abbrechen"
-                            class="btn btn-default btn-w200" type="reset">
-						<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
+                        class="me-1 btn btn-outline-secondary btn-w200" type="reset">
+                        <?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
                     </button>
                     <button id="reviewAnrechnungUebersicht-dont-recommend-anrechnungen-confirm"
-                            class="btn btn-primary btn-w200" type="button">
-						<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
+                        class="btn btn-primary btn-w200" type="button">
+                        <?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
                     </button>
                 </div>
             </div>
-            <div class="panel panel-default panel-body" style="display: none"
-                 id="reviewAnrechnungUebersicht-empfehlung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-success text-success"><?php echo $this->p->t('anrechnung', 'empfehlungenPositivQuestion'); ?></h4>
-                    &ensp;<?php echo $this->p->t('anrechnung', 'empfehlungenPositiv'); ?><br><br>
+            <div class="border border-1 mb-4" style="display: none" id="reviewAnrechnungUebersicht-empfehlung-panel">
+                <div class="mb-4">
+                    <h4 class="card card-body border-success text-success my-3">
+                        <?php echo $this->p->t('anrechnung', 'empfehlungenPositivQuestion'); ?>
+                    </h4>
+                    <div class="ps-2 mb-4"><?php echo $this->p->t('anrechnung', 'empfehlungenPositiv'); ?></div>
                 </div>
-                <br>
+
                 <!-- Action Button 'Abbrechen'-->
-                <div class="pull-right">
+                <div class="mb-4 d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-empfehlung-abbrechen"
-                            class="btn btn-default btn-w200" type="reset">
-						<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
+                        class="me-1 btn btn-outline-secondary btn-w200" type="reset">
+                        <?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
                     </button>
                     <button id="reviewAnrechnungUebersicht-recommend-anrechnungen-confirm"
-                            class="btn btn-primary btn-w200" type="button">
-						<?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
+                        class="btn btn-primary btn-w200" type="button">
+                        <?php echo ucfirst($this->p->t('ui', 'bestaetigen')); ?>
                     </button>
                 </div>
             </div>
         </div>
-
+        <!-- Filter buttons / Submit buttons-->
         <div class="row">
-
             <!-- Filter buttons -->
-            <div class="col-xs-3">
+            <div class="col-3">
                 <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group" role="group">
-                        <button id="show-need-recommendation" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
-                                title="<?php echo $this->p->t('ui', 'nurFehlendeEmpfehlungenAnzeigen'); ?>"><i
-                                    class='fa fa-eye'></i>
+                        <button id="show-need-recommendation" class="btn btn-outline-secondary btn-clearfilter"
+                            type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
+                            title="<?php echo $this->p->t('ui', 'nurFehlendeEmpfehlungenAnzeigen'); ?>"><i
+                                class='fa fa-eye'></i>
                         </button>
-                        <button id="show-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
-                                title="<?php echo $this->p->t('ui', 'nurEmpfohleneAnzeigen'); ?>"><i
-                                    class='fa fa-thumbs-o-up'></i>
+                        <button id="show-recommended" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                            data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
+                            title="<?php echo $this->p->t('ui', 'nurEmpfohleneAnzeigen'); ?>"><i
+                                class='fa fa-thumbs-o-up'></i>
                         </button>
-                        <button id="show-not-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
-                                title="<?php echo $this->p->t('ui', 'nurNichtEmpfohleneAnzeigen'); ?>"><i
-                                    class='fa fa-thumbs-o-down'></i>
+                        <button id="show-not-recommended" class="btn btn-outline-secondary btn-clearfilter"
+                            type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
+                            title="<?php echo $this->p->t('ui', 'nurNichtEmpfohleneAnzeigen'); ?>"><i
+                                class='fa fa-thumbs-o-down'></i>
                         </button>
-                        <button id="show-approved" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
-                                title="<?php echo $this->p->t('ui', 'nurGenehmigteAnzeigen'); ?>"><i
-                                    class='fa fa-check'></i>
+                        <button id="show-approved" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                            data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
+                            title="<?php echo $this->p->t('ui', 'nurGenehmigteAnzeigen'); ?>"><i
+                                class='fa fa-check'></i>
                         </button>
-                        <button id="show-rejected" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
-                                title="<?php echo $this->p->t('ui', 'nurAbgelehnteAnzeigen'); ?>"><i
-                                    class='fa fa-times'></i>
+                        <button id="show-rejected" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                            data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
+                            title="<?php echo $this->p->t('ui', 'nurAbgelehnteAnzeigen'); ?>"><i
+                                class='fa fa-times'></i>
                         </button>
                     </div>
                 </div>
             </div>
 
             <!-- Action Buttons 'Empfehlen', 'Nicht empfehlen'-->
-            <div class="col-xs-9">
-                <div class="pull-right">
+            <div class="col-9">
+                <div class="d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-dont-recommend-anrechnungen-ask"
-                            class="btn btn-danger btn-w200" type="button">
+                        class="me-1 btn btn-danger btn-w200" type="button">
                         <?php echo ucfirst($this->p->t('anrechnung', 'nichtEmpfehlen')); ?></button>
-                    <button id="reviewAnrechnungUebersicht-recommend-anrechnungen-ask"
-                            class="btn btn-primary btn-w200" type="button">
+                    <button id="reviewAnrechnungUebersicht-recommend-anrechnungen-ask" class="btn btn-primary btn-w200"
+                        type="button">
                         <?php echo ucfirst($this->p->t('anrechnung', 'empfehlen')); ?></button>
                 </div>
             </div>
@@ -255,4 +265,3 @@ if (defined("CIS4")) {
 	);
 }
 ?>
-
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php b/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
index 30ae3d72b..1f93bf35d 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
@@ -70,9 +70,8 @@ $query = '
         ORDER BY lehrveranstaltung_id, benutzer.uid, lehrfunktion_kurzbz DESC
     )';
 
-if ($configFachbereichsleitung === TRUE)
-{
-    $query.= '
+if ($configFachbereichsleitung === TRUE) {
+	$query .= '
         SELECT 
         -- immer empfehlungsberechtigt, da hier nur Leitungen der LV-OE eine Empfehlungsanfrage erhalten
         TRUE AS empfehlungsberechtigt, 
@@ -95,10 +94,8 @@ if ($configFachbereichsleitung === TRUE)
         ) 
         order by empfehlung_anrechnung NULLS FIRST, antragsdatum
     ';
-}
-else
-{
-    $query.= '
+} else {
+	$query .= '
         SELECT DISTINCT ON (anrechnungen.*, lema.mitarbeiter_uid) 
         CASE 
             -- erst prüfen, ob es überhaupt eine LV Leitung gibt (wenn nicht, dann immer empfehlungsberechtigt)
@@ -127,11 +124,12 @@ else
 
 $filterWidgetArray = array(
 	'query' => $query,
+	'bootstrapVersion' => 5,
 	'tableUniqueId' => 'approveAnrechnungUebersicht',
 	'requiredPermissions' => 'lehre/anrechnung_empfehlen',
 	'datasetRepresentation' => 'tabulator',
 	'columnsAliases' => array(
-        'Empfehlungsberechtigt',
+		'Empfehlungsberechtigt',
 		'anrechnung_id',
 		'lehrveranstaltung_id',
 		'begruendung_id',
@@ -157,33 +155,29 @@ $filterWidgetArray = array(
 		persistentLayout:true,
 		persistentSort:true,
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
 	    initialHeaderFilter: [{field:"empfehlungsberechtigt", value: true}], 
         index: "anrechnung_id",             // assign specific column as unique id (important for row indexing)
         selectable: true,               // allow row selection
         selectableRangeMode: "click",   // allow range selection using shift end click on end of range
         selectablePersistence:false,    // deselect previously selected rows when table is filtered, sorted or paginated
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
         tableWidgetFooter: {
 			selectButtons: true
 		},
+		
 		selectableCheck: function(row){
             return func_selectableCheck(row);
         },
-        rowFormatter:function(row){
-            func_rowFormatter(row);
-        },
-         rowUpdated:function(row){
-            func_rowUpdated(row);
-        },
-        tooltips: function(cell){
-            return func_tooltips(cell);
-        }
+		rowFormatter:function(row){
+			return func_rowFormatter(row);
+		},
+        columnDefaults:{
+			tooltip:func_tooltips,
+			headerFilterPlaceholder: " ",
+		}
+        
 	 }', // tabulator properties
 	'datasetRepFieldsDefs' => '{
-		empfehlungsberechtigt: {formatter:"tickCross", align:"center", headerTooltip:"Berechtigt wenn man die LV leitet oder wenn der LV keine LV-Leitung zugeordnet ist.",
+		empfehlungsberechtigt: {formatter:"tickCross", hozAlign:"center", headerTooltip:"Berechtigt wenn man die LV leitet oder wenn der LV keine LV-Leitung zugeordnet ist.",
 		    headerFilter:"tickCross", headerFilterParams:{"tristate": true}, headerFilterFunc: hf_empfehlungsberechtigt
         },
 		anrechnung_id: {visible: false, headerFilter:"input"},
@@ -194,14 +188,14 @@ $filterWidgetArray = array(
 		studiengang_kz: {visible: false, headerFilter:"input"},
 		stg_bezeichnung: {headerFilter:"input"},
 		lv_bezeichnung: {headerFilter:"input"},
-		ects: {headerFilter:"input", align:"center"},
+		ects: {headerFilter:"input", hozAlign:"center"},
 		student: {headerFilter:"input"},
 		begruendung: {headerFilter:"input"},
 		zgv: {headerFilter:"input"},
 		dokument_bezeichnung: {headerFilter:"input", formatter:"link", formatterParams: paramLookup_dokBez},
 		anmerkung_student: {headerFilter:"input"},
-		antragsdatum: {align:"center", headerFilter:"input", mutator: mut_formatStringDate},
-		empfehlung_anrechnung: {headerFilter:"input", align:"center", formatter: format_empfehlung_anrechnung, headerFilterFunc: hf_filterTrueFalse},
+		antragsdatum: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate},
+		empfehlung_anrechnung: {headerFilter:"input", hozAlign:"center", formatter: format_empfehlung_anrechnung, headerFilterFunc: hf_filterTrueFalse},
 		status_kurzbz: {visible: false, headerFilter:"input"},
 		status_bezeichnung: {headerFilter:"input"}
 	 }', // col properties
@@ -209,4 +203,4 @@ $filterWidgetArray = array(
 
 echo $this->widgetlib->widget('TableWidget', $filterWidgetArray);
 
-?>
+?>
\ No newline at end of file
diff --git a/application/views/lehre/lehrauftrag/Dashboard.php b/application/views/lehre/lehrauftrag/Dashboard.php
index d89636f04..3da01700c 100644
--- a/application/views/lehre/lehrauftrag/Dashboard.php
+++ b/application/views/lehre/lehrauftrag/Dashboard.php
@@ -16,7 +16,6 @@ $this->load->view(
 );
 ?>
 
-<body>
     <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
     <div id="page-wrapper">
         <div class="container-fluid">
@@ -33,6 +32,5 @@ $this->load->view(
 
         </div>
     </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/lehre/lehrauftrag/LehrendeUebersicht.php b/application/views/lehre/lehrauftrag/LehrendeUebersicht.php
index d64381547..4f49a2518 100644
--- a/application/views/lehre/lehrauftrag/LehrendeUebersicht.php
+++ b/application/views/lehre/lehrauftrag/LehrendeUebersicht.php
@@ -13,7 +13,6 @@ $this->load->view(
 );
 ?>
 
-<body>
 <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
 	<div id="page-wrapper">
 		<div class="container-fluid">
@@ -34,6 +33,5 @@ $this->load->view(
 
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php
index 6c65559d9..0e8aa13cb 100644
--- a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php
+++ b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php
@@ -6,10 +6,12 @@ $this->load->view(
 		'jquery3' => true,
 		'jqueryui1' => true,
 		'jquerycheckboxes1' => true,
-		'bootstrap3' => true,
-		'fontawesome4' => true,
+		'bootstrap5' => true,
+		'fontawesome6' => true,
 		'sbadmintemplate' => false,
-		'tabulator4' => true,
+		'tabulator5' => true,
+        'tabulator5JQuery' => true,
+        'cis'=>true,
 		'momentjs2' => true,
 		'ajaxlib' => true,
 		'dialoglib' => true,
@@ -84,14 +86,14 @@ $this->load->view(
 );
 ?>
 
-<body>
+
 <div id="page-wrapper">
 	<div class="container-fluid">
 
 		<!-- title & helper link -->
 		<div class="row">
 			<div class="col-lg-12 page-header">
-				<a class="pull-right" data-toggle="collapse" href="#collapseHelp" aria-expanded="false" aria-controls="collapseExample">
+				<a class="float-end" data-bs-toggle="collapse" href="#collapseHelp" aria-expanded="false" aria-controls="collapseExample">
 					<?php echo $this->p->t('ui', 'hilfeZuDieserSeite'); ?>
 				</a>
 				<h3>
@@ -102,19 +104,20 @@ $this->load->view(
 
 		<!-- helper collapse module -->
 		<div class="row">
-			<div class="col-lg-12 collapse" id="collapseHelp">
-				<div class="well">
+			<div class="col-lg-12 collapse my-4" id="collapseHelp">
+				<div class="card p-3">
+					
 					<?php $this->load->view('lehre/lehrauftrag/acceptLehrauftragHelp') ?>
-				</div> <!--./well-->
+				</div> 
 			</div>
 		</div>
 
 		<!-- dropdown widgets -->
 		<div class="row">
 			<div class="col-lg-12">
-				<form id="formLehrauftrag" class="form-inline" action="" method="get">
+				<form id="formLehrauftrag" class="row align-items-center" action="" method="get">
 					<input type="hidden" id="uid" name="uid" value="<?php echo getAuthUID(); ?>">
-					<div class="form-group">
+					<div class="col-auto">
 						<?php
 						echo $this->widgetlib->widget(
 							'Studiensemester_widget',
@@ -123,12 +126,13 @@ $this->load->view(
 							),
 							array(
 								'name' => 'studiensemester',
-								'id' => 'studiensemester'
+								'id' => 'studiensemester',
+								'class' => 'form-select w-auto ',
 							)
 						);
 						?>
 					</div>
-					<button type="submit" name="submit" value="anzeigen" class="btn btn-default form-group"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
+					<button type="submit" name="submit" value="anzeigen" class="btn btn-outline-secondary col-auto"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
 				</form>
 			</div>
 		</div>
@@ -144,10 +148,10 @@ $this->load->view(
 		<!-- link for external lectors 'Informationsblatt fuer externe Lehrende'. Show only for external lecturers -->
 
 		<div class="row">
-			<div class="col-xs-12">
-				<span class="pull-left"><?php echo $this->p->t('ui' , 'hinweistextLehrauftrag'); ?></span>
+			<div class="col-12">
+				<span class="float-start"><?php echo $this->p->t('ui' , 'hinweistextLehrauftrag'); ?></span>
 				<?php if ($is_external_lector): ?>
-					<span class="pull-right"><?php echo $this->p->t('dms' , 'informationsblattExterneLehrende'); ?></span>
+					<span class="float-start"><?php echo $this->p->t('dms' , 'informationsblattExterneLehrende'); ?></span>
 				<?php endif; ?>
 			</div>
 		</div>
@@ -156,46 +160,46 @@ $this->load->view(
 
 		<!-- filter buttons & PDF downloads & password field & akzeptieren-button -->
 		<div class="row">
-			<div class="col-xs-5 col-md-4">
+			<div class="col-5 col-md-4">
 				<div class="btn-toolbar" role="toolbar">
 					<div class="btn-group" role="group">
-						<button id="show-all" class="btn btn-default btn-lehrauftrag active focus" type="button"
-								data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'alleAnzeigen'); ?>"><i class='fa fa-users'></i>
+						<button id="show-all" class="btn btn-outline-secondary btn-lehrauftrag active focus" type="button"
+								data-bs-toggle="tooltip" data-bs-placement="left" title="<?php echo $this->p->t('ui', 'alleAnzeigen'); ?>"><i class='fa fa-users'></i>
 						</button>
-						<button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button"
-								data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>">
-						</button><!-- png img set in javascript -->
-						<button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button"
-								data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa fa-handshake-o'></i>
+						<button id="show-approved" class="btn btn-outline-secondary btn-lehrauftrag" type="button"
+								data-bs-toggle="tooltip" data-bs-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>"><i class='fa fa-user-check'></i>
+						</button>
+						<button id="show-accepted" class="btn btn-outline-secondary btn-lehrauftrag" type="button"
+								data-bs-toggle="tooltip" data-bs-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa-regular fa-handshake'></i>
 						</button>
 					</div>
 
-					<button id="show-cancelled" class="btn btn-default btn-lehrauftrag" type="button" style="margin-left: 20px;"
-							data-toggle="collapse" data-placement="left" title="<?php echo $this->p->t('ui', 'nurStornierteAnzeigen'); ?>"
-							data-target ="#collapseCancelledLehrauftraege" aria-expanded="false" aria-controls="collapseExample">
-					</button><!-- png img set in javascript -->
+					<button id="show-cancelled" class="btn btn-outline-secondary btn-lehrauftrag" type="button" style="margin-left: 20px;"
+							data-bs-toggle="collapse" data-placement="left" title="<?php echo $this->p->t('ui', 'nurStornierteAnzeigen'); ?>"
+							data-bs-target ="#collapseCancelledLehrauftraege" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-user-xmark"></i>
+					</button>
 				</div>
 			</div>
 
 
-			<div class="col-xs-3 col-md-offset-2 col-md-2">
-					<div class="btn-group dropup pull-right">
-					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			<div class="col-3 offset-md-2 col-md-2">
+					<div class="btn-group dropup float-end">
+					<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<?php echo $this->p->t('global', 'dokumentePDF'); ?>&nbsp;&nbsp;<i class="fa fa-arrow-down"></i>&nbsp;&nbsp;&nbsp;&nbsp;<span class="caret"></span>
 					</button>
 					<ul id="ul-download-pdf" class="dropdown-menu">
-						<li value="etw"><a href="#"><?php echo $this->p->t('global', 'PDFLehrauftraegeFH'); ?></a></li>
-						<li value="lehrgang"><a href="#"><?php echo $this->p->t('global', 'PDFLehrauftraegeLehrgaenge'); ?></a></li>
+						<li value="etw"><a class="dropdown-item" href="#"><?php echo $this->p->t('global', 'PDFLehrauftraegeFH'); ?></a></li>
+						<li value="lehrgang"><a class="dropdown-item" href="#"><?php echo $this->p->t('global', 'PDFLehrauftraegeLehrgaenge'); ?></a></li>
 					</ul>
 				</div>
 			</div>
 
-			<div class="col-xs-4 col-md-offset-0 col-md-4">
+			<div class="col-4 offset-md-0 col-md-4">
 				<div class="input-group">
 					<input id="username" autocomplete="username" style="position: absolute; opacity: 0;"><!-- this is to prevent Chrome autofilling a random input field with the username-->
 					<input id="password" type="password" autocomplete="new-password" class="form-control" placeholder="CIS-<?php echo ucfirst($this->p->t('password', 'password')); ?>">
 						<span class="input-group-btn">
-							<button id="accept-lehrauftraege" class="btn btn-primary pull-right"><?php echo ucfirst($this->p->t('global', 'lehrauftraegeAnnehmen')); ?></button>
+							<button id="accept-lehrauftraege" class="btn btn-primary float-end"><?php echo ucfirst($this->p->t('global', 'lehrauftraegeAnnehmen')); ?></button>
 						</span>
 				</div>
 			</div>
@@ -225,7 +229,6 @@ $this->load->view(
 	</div><!-- end container -->
 </div><!-- end page-wrapper -->
 <br>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
 
diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php
index fcd9b953c..a36605d13 100644
--- a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php
+++ b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php
@@ -294,6 +294,7 @@ ORDER BY "akzeptiert" NULLS FIRST, "erteilt" NULLS LAST, "bestellt"
 
 $filterWidgetArray = array(
     'query' => $query,
+    'bootstrapVersion' => 5,
     'tableUniqueId' => 'acceptLehrauftrag',
     'requiredPermissions' => 'lehre/lehrauftrag_akzeptieren',
     'datasetRepresentation' => 'tabulator',
@@ -330,7 +331,6 @@ $filterWidgetArray = array(
 		height: func_height(this),
 		layout: "fitColumns",           // fit columns to width of table
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
         index: "row_index",             // assign specific column as unique id (important for row indexing)
         selectable: true,               // allow row selection
         selectableRangeMode: "click",   // allow range selection using shift end click on end of range
@@ -338,24 +338,16 @@ $filterWidgetArray = array(
         selectableCheck: function(row){
             return func_selectableCheck(row);
         },
-        rowUpdated:function(row){
-            func_rowUpdated(row);
-        },
         rowFormatter:function(row){
             func_rowFormatter(row);
         },
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
-        renderComplete:function(){
-            func_renderComplete(this);
-        },
-         renderStarted:function(){
-            func_renderStarted(this);
-        },
+      
 		tableWidgetFooter: {
 			selectButtons: true
-		}
+		},
+        columnsDefaults:{
+            headerFilterPlaceholder: " ",
+        }
     }', // tabulator properties
     'datasetRepFieldsDefs' => '{
         row_index: {visible:false},     // necessary for row indexing
@@ -375,11 +367,11 @@ $filterWidgetArray = array(
         orgform_kurzbz: {visible: false, headerFilter:"input"},
         person_id: {visible: false, headerFilter:"input"},
         lv_oe_kurzbz: {visible: false, headerFilter:"input"},
-        stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
+        stunden: {hozAlign:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}
 		},
-        betrag: {align:"right", formatter: form_formatNulltoStringNumber,
+        betrag: {hozAlign:"right", formatter: form_formatNulltoStringNumber,
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}
 		},
@@ -387,9 +379,9 @@ $filterWidgetArray = array(
         vertrag_stunden: {visible: false},
         vertrag_betrag: {visible: false},
         mitarbeiter_uid: {visible: false, headerFilter:"input"},
-        bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
-        erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
-        akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
+        bestellt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
+        erteilt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
+        akzeptiert: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
         bestellt_von: {visible: false, headerFilter:"input"},
         erteilt_von: {visible: false, headerFilter:"input"},
         akzeptiert_von: {visible: false, headerFilter:"input"}
diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragHelp.php b/application/views/lehre/lehrauftrag/acceptLehrauftragHelp.php
index 9c8f0a680..531332231 100644
--- a/application/views/lehre/lehrauftrag/acceptLehrauftragHelp.php
+++ b/application/views/lehre/lehrauftrag/acceptLehrauftragHelp.php
@@ -1,5 +1,6 @@
 <h4><?php echo $this->p->t('lehre', 'lehrauftraegeAnnehmen'); ?></h4>
-<div class="panel panel-body">
+
+<div class="card-body">
 	<?php echo $this->p->t('lehre', 'lehrauftraegeAnnehmenText'); ?>
 	<ol>
 		<li><?php echo $this->p->t('lehre', 'lehrauftraegeAnnehmenKlickStatusicon'); ?></li>
@@ -7,22 +8,26 @@
 		<li><?php echo $this->p->t('lehre', 'lehrauftraegeAnnehmenMitKlickAnnehmen'); ?></li>
 	</ol>
 </div>
+
 <br>
 
 <h4><?php echo $this->p->t('lehre', 'lehrauftraegeNichtAuswaehlbar'); ?></h4>
-<div class="panel panel-body">
+
+<div class="card-body">
 	<?php echo $this->p->t('lehre', 'lehrauftraegeNichtAuswaehlbarTextBeiAnnahme'); ?>
+
 </div>
 <br>
 
 <h4>Filter</h4>
-<div class="panel panel-body">
-	<div class="col-xs-12 col-md-8 col-lg-6">
+
+<div class="card-body">
+	<div class="col-12 col-md-8 col-lg-6">
 		<table class="table table-bordered">
 			<tr class="text-center">
-				<td class="col-xs-1"><i class='fa fa-users'></i></td>
-				<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px;"></td>
-				<td class="col-xs-1"><i class='fa fa-handshake-o'></i></td>
+				<td class="col-1"><i class='fa fa-users'></i></td>
+				<td class="col-1"><i class='fa fa-user-check'></i></td>
+				<td class="col-1"><i class='fa-regular fa-handshake'></i></td>
 			</tr>
 			<tr class="text-center">
 				<td><?php echo $this->p->t('lehre', 'filterAlleBeiAnnahme'); ?></td>
@@ -31,5 +36,6 @@
 			</tr>
 		</table>
 	</div>
+
 </div>
 <br>
\ No newline at end of file
diff --git a/application/views/lehre/lehrauftrag/approveLehrauftrag.php b/application/views/lehre/lehrauftrag/approveLehrauftrag.php
index 300d1314d..2ffe549e5 100644
--- a/application/views/lehre/lehrauftrag/approveLehrauftrag.php
+++ b/application/views/lehre/lehrauftrag/approveLehrauftrag.php
@@ -7,9 +7,10 @@ $this->load->view(
         'jqueryui1' => true,
         'jquerycheckboxes1' => true,
         'bootstrap3' => true,
-        'fontawesome4' => true,
+        'fontawesome6' => true,
         'sbadmintemplate3' => true,
-        'tabulator4' => true,
+        'tabulator5' => true,
+        'tabulator5JQuery' => true,
         'momentjs2' => true,
         'ajaxlib' => true,
         'dialoglib' => true,
@@ -88,14 +89,13 @@ $this->load->view(
             )
         ),
         'customJSs' => array(
-                'public/js/bootstrapper.js',
+                'public/js/bootstrapper.js',       
                 'public/js/lehre/lehrauftrag/approveLehrauftrag.js'
         )
     )
 );
 ?>
 
-<body>
     <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
     <div id="page-wrapper">
     	<div class="container-fluid">
@@ -190,12 +190,12 @@ $this->load->view(
                     <div class="btn-group" role="group">
                         <button id="show-all" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'alleAnzeigen'); ?>"><i class='fa fa-users'></i></button>
                         <button id="show-new" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurNeueAnzeigen'); ?>"><i class='fa fa-user-plus'></i></button>
-                        <button id="show-ordered" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurBestellteAnzeigen'); ?>"></button><!-- png img set in javascript -->
-                        <button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>"></button><!-- png img set in javascript -->
-                        <button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa fa-handshake-o'></i></button>
+                        <button id="show-ordered" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurBestellteAnzeigen'); ?>"><i class='fa fa-user-tag'></i></button>
+                        <button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>"><i class='fa fa-user-check'></i></button>
+                        <button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa-regular fa-handshake'></i></button>
                     </div>
                     <div class="btn-group" role="group" style="margin-left: 20px;">
-                        <button id="show-changed" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurGeaenderteAnzeigen'); ?>"></button><!-- png img set in javascript -->
+                        <button id="show-changed" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurGeaenderteAnzeigen'); ?>"><i class='fa fa-user-pen'></i></button>
                     </div>
                     <div class="btn-group" role="group" style="margin-left: 20px;">
                         <button id="show-dummies" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurDummiesAnzeigen'); ?>"><i class='fa fa-user-secret'></i></button>
@@ -207,7 +207,6 @@ $this->load->view(
     	</div><!-- end container -->
     </div><!-- end page-wrapper -->
 	<br>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
 
diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragData.php b/application/views/lehre/lehrauftrag/approveLehrauftragData.php
index 4f0c61193..7dd3822a6 100644
--- a/application/views/lehre/lehrauftrag/approveLehrauftragData.php
+++ b/application/views/lehre/lehrauftrag/approveLehrauftragData.php
@@ -346,7 +346,6 @@ $filterWidgetArray = array(
 		layout: "fitColumns",			// fit columns to width of table
 		layoutColumnsOnNewData: true,	// ajust column widths to the data each time TableWidget is loaded
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
 	    groupBy:"lehrveranstaltung_id",
 	    groupToggleElement:"header",	//toggle group on click anywhere in the group header
 	    groupHeader: function(value, count, data, group){
@@ -361,22 +360,16 @@ $filterWidgetArray = array(
             return func_selectableCheck(row);
         },
         initialFilter: func_initialFilter(),
-        rowUpdated:function(row){
-             func_rowUpdated(row);
-        },
         rowFormatter:function(row)
         {
             func_rowFormatter(row);
-        },
-        renderStarted:function(){
-            func_renderStarted(this);
-        },
-        tableBuilt: function(){
-            func_tableBuilt(this);
         },
 		tableWidgetFooter: {
 			selectButtons: true
-		}
+		},
+        columnDefaults:{
+            headerFilterPlaceholder: " ",
+        }
     }', // tabulator properties
     'datasetRepFieldsDefs' => '{
         // column status is built dynamically in funcTableBuilt(),
@@ -400,21 +393,21 @@ $filterWidgetArray = array(
         person_id: {visible: false, headerFilter:"input"},
         lv_oe_kurzbz: {visible: false, headerFilter:"input"},
         lektor: {headerFilter:"input", widthGrow: 2},
-        stunden: {align:"right",  formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
+        stunden: {hozAlign:"right",  formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}},
-		stundensatz: {visible: true, align:"right", formatter: form_formatNulltoStringNumber,
+		stundensatz: {visible: true, hozAlign:"right", formatter: form_formatNulltoStringNumber,
 			headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator},
-        betrag: {align:"right", formatter: form_formatNulltoStringNumber,
+        betrag: {hozAlign:"right", formatter: form_formatNulltoStringNumber,
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}},
         vertrag_id: {visible: false},
         vertrag_stunden: {visible: false},
         vertrag_betrag: {visible: false},
         mitarbeiter_uid: {visible: false, headerFilter:"input"},
-        bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
-        erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
-        akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
+        bestellt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
+        erteilt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
+        akzeptiert: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
         bestellt_von: {visible: false, headerFilter:"input"},
         erteilt_von: {visible: false, headerFilter:"input"},
         akzeptiert_von: {visible: false, headerFilter:"input"},
diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragHelp.php b/application/views/lehre/lehrauftrag/approveLehrauftragHelp.php
index 0343da5f1..27eae8df2 100644
--- a/application/views/lehre/lehrauftrag/approveLehrauftragHelp.php
+++ b/application/views/lehre/lehrauftrag/approveLehrauftragHelp.php
@@ -2,11 +2,11 @@
 <div class="panel panel-body">
 	<table>
 		<tr class="text-center">
-			<td><img src="../../../public/images/icons/fa-user-tag.png" style="height: 60px; width: 60px;"></td>
+			<td><i class='fa fa-2x fa-user-tag'></i></td>
 			<td><i class='fa fa-2x fa-long-arrow-right'></i></td>
-			<td><img src="../../../public/images/icons/fa-user-check.png" style="height: 60px; width: 60px;"></td>
+			<td><i class='fa fa-2x fa-user-check'></i></td>
 			<td><i class='fa fa-2x fa-long-arrow-right'></i></td>
-			<td><i class='fa fa-2x fa-handshake-o'></i></td>
+			<td><i class='fa-regular fa-2x fa-handshake'></i></td>
 		</tr>
 		<tr class="text-center">
 			<td class="text-muted"><?php echo $this->p->t('lehre', 'lehrauftragStandardBestellprozessBestellen'); ?></td>
@@ -48,10 +48,10 @@
 		<tr class="text-center">
 			<td class="col-xs-1"><i class='fa fa-users'></i></td>
 			<td class="col-xs-1"><i class='fa fa-user-plus'></i></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px;"></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px;"></td>
-			<td class="col-xs-1"><i class='fa fa-handshake-o'></i></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px;"></td>
+			<td class="col-xs-1"><i class='fa fa-user-tag'></i></td>
+			<td class="col-xs-1"><i class='fa fa-user-check'></i></td>
+			<td class="col-xs-1"><i class='fa-regular fa-handshake'></i></td>
+			<td class="col-xs-1"><i class='fa fa-user-pen'></i></td>
 			<td class="col-xs-1"><i class='fa fa-user-secret'></i></td>
 		
 		</tr>
diff --git a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php
index a3efb66b3..219bd7cc5 100644
--- a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php
+++ b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php
@@ -50,6 +50,7 @@ $query = '
 
 $tableWidgetArray = array(
 	'query' => $query,
+    'bootstrapVersion' => 5,
 	'tableUniqueId' => 'cancelledLehrauftrag',
 	'requiredPermissions' => 'lehre/lehrauftrag_akzeptieren',
 	'datasetRepresentation' => 'tabulator',
@@ -70,12 +71,7 @@ $tableWidgetArray = array(
         selectableCheck: function(row){
             return func_selectableCheck(row);
         },
-         renderComplete:function(){
-            func_renderComplete(this);
-        },
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
+         
     }', // tabulator properties
 	'datasetRepFieldsDefs' => '{
         vertrag_id: {visible: false},
@@ -83,16 +79,16 @@ $tableWidgetArray = array(
         vertragstyp_kurzbz: {minWidth: 200},
         bezeichnung: {minWidth: 200},
         vertragsstunden: {
-            align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
+            hozAlign:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
             bottomCalc:"sum", bottomCalcParams:{precision:1},
             minWidth: 200
         },
         betrag: {
-            align:"right", formatter: form_formatNulltoStringNumber,
+            hozAlign:"right", formatter: form_formatNulltoStringNumber,
             bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"},
             minWidth: 200
         },
-        storniert: {align:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip, minWidth: 200},
+        storniert: {hozAlign:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip, minWidth: 200},
         storniert_von: {visible: false},
         letzterStatus_vorStorniert: {visible: false}
     }', // col properties
diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php
index f0d8e14f1..04f7391ce 100644
--- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php
+++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php
@@ -7,9 +7,10 @@ $this->load->view(
         'jqueryui1' => true,
         'jquerycheckboxes1' => true,
         'bootstrap3' => true,
-        'fontawesome4' => true,
+        'fontawesome6' => true,
         'sbadmintemplate3' => true,
-        'tabulator4' => true,
+        'tabulator5' => true,
+        'tabulator5JQuery' => true,
         'momentjs2' => true,
         'ajaxlib' => true,
         'dialoglib' => true,
@@ -95,7 +96,7 @@ $this->load->view(
 );
 ?>
 
-<body>
+
     <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
     <div id="page-wrapper">
         <div class="container-fluid">
@@ -186,13 +187,14 @@ $this->load->view(
                 <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group" role="group">
                         <button id="show-all" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'alleAnzeigen'); ?>"><i class='fa fa-users'></i></button>
-                        <button id="show-new" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurNeueAnzeigen'); ?>"><i class='fa fa-user-plus'></i></button>
-                        <button id="show-ordered" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurBestellteAnzeigen'); ?>"></button><!-- png img set in javascript -->
-                        <button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>"></button><!-- png img set in javascript -->
-                        <button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa fa-handshake-o'></i></button>
+                        <button id="show-newAndChanged" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'neuUndGeaenderteAnzeigen'); ?>"><i style="margin-right:10px" class='fa fa-user-plus'></i><i style="margin-right:10px" class="fa fa-ellipsis-vertical"></i>&nbsp;<i class='fa fa-user-pen'></i></button>
                     </div>
                     <div class="btn-group" role="group" style="margin-left: 20px;">
-                        <button id="show-changed" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurGeaenderteAnzeigen'); ?>"></button><!-- png img set in javascript -->
+                        <button id="show-new" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurNeueAnzeigen'); ?>"><i class='fa fa-user-plus'></i></button>
+                        <button id="show-ordered" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurBestellteAnzeigen'); ?>"><i class='fa fa-user-tag'></i></button>
+                        <button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurErteilteAnzeigen'); ?>"><i class='fa fa-user-check'></i></button>
+                        <button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurAngenommeneAnzeigen'); ?>"><i class='fa-regular fa-handshake'></i></button>
+                        <button id="show-changed" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurGeaenderteAnzeigen'); ?>"><i class='fa fa-user-pen'></i></button></button>
                     </div>
                     <div class="btn-group" role="group" style="margin-left: 20px;">
                         <button id="show-dummies" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="<?php echo $this->p->t('ui', 'nurDummiesAnzeigen'); ?>"><i class='fa fa-user-secret'></i></button>
@@ -204,7 +206,6 @@ $this->load->view(
         </div><!-- end container -->
     </div><!-- end page-wrapper -->
 	<br>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
 
diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php
index 85b663d4a..f5b5cf6ce 100644
--- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php
+++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php
@@ -376,7 +376,6 @@ $filterWidgetArray = array(
 		layout:"fitColumns",            // fit columns to width of table
 		layoutColumnsOnNewData: true,	// ajust column widths to the data each time TableWidget is loaded
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-		headerFilterPlaceholder: " ",
 		groupBy:"lehrveranstaltung_id",
 		groupToggleElement:"header",    //toggle group on click anywhere in the group header
 		groupHeader: function(value, count, data, group){
@@ -390,24 +389,15 @@ $filterWidgetArray = array(
         selectableCheck: function(row){
             return func_selectableCheck(row);
         },
-        rowUpdated:function(row){
-            func_rowUpdated(row);
-        },
         rowFormatter:function(row){
             func_rowFormatter(row);
-        },
-        renderStarted:function(){
-            func_renderStarted(this);
-        },
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
-        dataLoaded: function(data){
-            func_dataLoaded(data, this);
         },
 		tableWidgetFooter: {
 			selectButtons: true
-		}
+		},
+        columnDefaults:{
+            headerFilterPlaceholder:" ",
+        }
     }', // tabulator properties
     'datasetRepFieldsDefs' => '{
         // column status is built dynamically in funcTableBuilt()
@@ -432,12 +422,12 @@ $filterWidgetArray = array(
         person_id: {visible: false, headerFilter:"input"},
         lv_oe_kurzbz: {headerFilter:"input"},
         lektor: {headerFilter:"input", widthGrow: 2},
-        stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
+        stunden: {hozAlign:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:2},
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}},
-        stundensatz: {visible: true, align:"right", formatter: form_formatNulltoStringNumber,
+        stundensatz: {visible: true, hozAlign:"right", formatter: form_formatNulltoStringNumber,
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator},
-        betrag: {align:"right", formatter: form_formatNulltoStringNumber,
+        betrag: {hozAlign:"right", formatter: form_formatNulltoStringNumber,
             headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
             bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money",
             bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}},
@@ -445,9 +435,9 @@ $filterWidgetArray = array(
         vertrag_stunden: {visible: false},
         vertrag_betrag: {visible: false},
         mitarbeiter_uid: {visible: false, headerFilter:"input"},
-        bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
-        erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
-        akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
+        bestellt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
+        erteilt: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
+        akzeptiert: {hozAlign:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
         bestellt_von: {visible: false, headerFilter:"input"},
         erteilt_von: {visible: false, headerFilter:"input"},
         akzeptiert_von: {visible: false, headerFilter:"input"}
diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragHelp.php b/application/views/lehre/lehrauftrag/orderLehrauftragHelp.php
index 5ea991002..2cc51491c 100644
--- a/application/views/lehre/lehrauftrag/orderLehrauftragHelp.php
+++ b/application/views/lehre/lehrauftrag/orderLehrauftragHelp.php
@@ -2,11 +2,11 @@
 <div class="panel panel-body">
 	<table>
 		<tr class="text-center">
-			<td><img src="../../../public/images/icons/fa-user-tag.png" style="height: 60px; width: 60px;"></td>
+			<td><i class='fa fa-2x fa-user-tag'></i></td>
 			<td><i class='fa fa-2x fa-long-arrow-right'></i></td>
-			<td><img src="../../../public/images/icons/fa-user-check.png" style="height: 60px; width: 60px;"></td>
+			<td><i class='fa fa-2x fa-user-check'></i></td>
 			<td><i class='fa fa-2x fa-long-arrow-right'></i></td>
-			<td><i class='fa fa-2x fa-handshake-o'></i></td>
+			<td><i class='fa-regular fa-2x fa-handshake'></i></td>
 		</tr>
 		<tr class="text-center">
 			<td><b><?php echo $this->p->t('lehre', 'lehrauftragStandardBestellprozessBestellen'); ?></b></td>
@@ -50,10 +50,10 @@
 		<tr class="text-center">
 			<td class="col-xs-1"><i class='fa fa-users'></i></td>
 			<td class="col-xs-1"><i class='fa fa-user-plus'></i></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px;"></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px;"></td>
-			<td class="col-xs-1"><i class='fa fa-handshake-o'></i></td>
-			<td class="col-xs-1"><img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px;"></td>
+			<td class="col-xs-1"><i class='fa fa-user-tag'></i></td>
+			<td class="col-xs-1"><i class='fa fa-user-check'></i></td>
+			<td class="col-xs-1"><i class='fa-regular fa-handshake'></i></td>
+			<td class="col-xs-1"><i class='fa fa-user-pen'></i></td>
 			<td class="col-xs-1"><i class='fa fa-user-secret'></i></td>
 		
 		</tr>
diff --git a/application/views/lehre/lvplanung/adminZeitverfuegbarkeit.php b/application/views/lehre/lvplanung/adminZeitverfuegbarkeit.php
index cd5aefea2..71b1ead33 100644
--- a/application/views/lehre/lvplanung/adminZeitverfuegbarkeit.php
+++ b/application/views/lehre/lvplanung/adminZeitverfuegbarkeit.php
@@ -9,7 +9,8 @@ $this->load->view(
         'fontawesome4' => true,
         'momentjs2' => true,
         'ajaxlib' => true,
-        'tabulator4' => true,
+        'tabulator5' => true,
+        'tabulator5JQuery' => true,
         'tablewidget' => true,
         'navigationwidget' => true,
         'sbadmintemplate3' => true,
@@ -33,6 +34,7 @@ $this->load->view(
         ),
         'widgets' => true,
         'dialoglib' => true,
+
         'customJSs' => array(
             'public/js/bootstrapper.js',
             'public/js/lehre/lvplanung/zverfueg.js'
@@ -41,128 +43,130 @@ $this->load->view(
 );
 ?>
 
-<body>
-<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
-<div id="page-wrapper">
-    <div class="container-fluid">
+    <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
+    <div id="page-wrapper">
+        <div class="container-fluid">
 
-        <!-- title -->
-        <div class="row">
-            <div class="col-lg-12 page-header">
-		<h3>Zeitverf&uuml;gbarkeiten verwalten<small>
-			  |  Punktuelle Zeitverfügbarkeiten von Lehrenden für die LV-Planung verwalten</small>
-		</h3>
+            <!-- title -->
+            <div class="row">
+                <div class="col-lg-12 page-header">
+                    <h3>Zeitverf&uuml;gbarkeiten verwalten<small>
+                            | Punktuelle Zeitverfügbarkeiten von Lehrenden für die LV-Planung verwalten</small>
+                    </h3>
+                </div>
             </div>
-        </div>
 
-        <!-- form -->
-        <div class="row">
-            <div class="col-lg-12">
-                <form id="form-zeitverfuegbarkeit" class="form-horizontal">
-                    <input type="hidden" id="studsemStart" value="<?php echo $studsemStart ?>">
-                    <input type="hidden" id="zeitsperre_id" name="zeitsperre_id" value="">
+            <!-- form -->
+            <div class="row">
+                <div class="col-lg-12">
+                    <form id="form-zeitverfuegbarkeit" class="form-horizontal">
+                        <input type="hidden" id="studsemStart" value="<?php echo $studsemStart ?>">
+                        <input type="hidden" id="zeitsperre_id" name="zeitsperre_id" value="">
 
-                    <div class="form-group">
-                        <label for="mitarbeiter_uid" class="col-sm-1 control-label">LektorIn: </label>
-                        <div class="col-sm-3">
-                            <select id="mitarbeiter_uid" name="mitarbeiter_uid" class="form-control select-w500" required>
-                                <option value="" >
-                                    <?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
-                                </option>
-                                <?php foreach ($lektor_arr as $lektor) : ?>
-                                    <option value="<?php echo $lektor->mitarbeiter_uid ?>">
-                                        <?php echo $lektor->nachname. ' '. $lektor->vorname ?>
+                        <div class="form-group">
+                            <label for="mitarbeiter_uid" class="col-sm-1 control-label">LektorIn: </label>
+                            <div class="col-sm-3">
+                                <select id="mitarbeiter_uid" name="mitarbeiter_uid" class="form-control " required>
+                                    <option value="">
+                                        <?php echo $this->p->t('ui', 'bitteWaehlen'); ?>
                                     </option>
-                                <?php endforeach; ?>
-                            </select>
+                                    <?php foreach ($lektor_arr as $lektor): ?>
+                                        <option value="<?php echo $lektor->mitarbeiter_uid ?>">
+                                            <?php echo $lektor->nachname . ' ' . $lektor->vorname ?>
+                                        </option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label for="zverfueg" class="col-sm-1 control-label">Grund: </label>
-                        <div class="col-sm-3">
-                            <input type="text" id="zeitsperretyp_kurzbz" value="Zeitverf&uuml;gbarkeit" name="zeitsperretyp_kurzbz" readonly />
+                        <div class="form-group">
+                            <label for="zverfueg" class="col-sm-1 control-label">Grund: </label>
+                            <div class="col-sm-3">
+                                <input type="text" id="zeitsperretyp_kurzbz" value="Zeitverf&uuml;gbarkeit"
+                                    name="zeitsperretyp_kurzbz" readonly />
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label for="bezeichnung" class="col-sm-1 control-label">Notiz: </label>
-                        <div class="col-sm-3">
-                            <textarea type="" id="bezeichnung" name="bezeichnung" value="" required></textarea>
+                        <div class="form-group">
+                            <label for="bezeichnung" class="col-sm-1 control-label">Notiz: </label>
+                            <div class="col-sm-3">
+                                <textarea type="" id="bezeichnung" name="bezeichnung" value="" required></textarea>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label for="vondatum" class="col-sm-1 control-label">Von: </label>
-                        <div class="col-sm-3">
-                            <input type="date" id="vondatum" name="vondatum" class="form-control zverfueg-datepicker" required>
+                        <div class="form-group">
+                            <label for="vondatum" class="col-sm-1 control-label">Von: </label>
+                            <div class="col-sm-3">
+                                <input type="date" id="vondatum" name="vondatum"
+                                    class="form-control zverfueg-datepicker" required>
+                            </div>
+                            <label for="vonstunde" class="col-sm-1 control-label">Stunde (inkl.): </label>
+                            <div class="col-sm-3">
+                                <select id="vonstunde" name="vonstunde" class="form-control ">
+                                    <option value="">*</option>
+                                    <?php foreach ($stunde_arr as $stunde): ?>
+                                        <option value="<?php echo $stunde->stunde ?>">
+                                            <?php echo $stunde->stunde .
+                                                ' [' .
+                                                (new DateTime($stunde->beginn))->format('H:i') . ' - ' .
+                                                (new DateTime($stunde->ende))->format('H:i') .
+                                                ']' ?>
+                                        </option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
                         </div>
-                        <label for="vonstunde" class="col-sm-1 control-label">Stunde (inkl.): </label>
-                        <div class="col-sm-3">
-                            <select id="vonstunde" name="vonstunde" class="form-control select-w500">
-                                <option value="" >*</option>
-                                <?php foreach ($stunde_arr as $stunde) : ?>
-                                    <option value="<?php echo $stunde->stunde ?>">
-                                        <?php echo $stunde->stunde.
-                                            ' ['.
-                                            (new DateTime($stunde->beginn))->format('H:i'). ' - '.
-                                            (new DateTime($stunde->ende))->format('H:i').
-                                            ']' ?>
-                                    </option>
-                                <?php endforeach; ?>
-                            </select>
-                        </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label for="bisdatum" class="col-sm-1 control-label">Bis: </label>
-                        <div class="col-sm-3">
-                            <input type="date" id="bisdatum" name="bisdatum" class="form-control zverfueg-datepicker" required>
+                        <div class="form-group">
+                            <label for="bisdatum" class="col-sm-1 control-label">Bis: </label>
+                            <div class="col-sm-3">
+                                <input type="date" id="bisdatum" name="bisdatum"
+                                    class="form-control zverfueg-datepicker" required>
+                            </div>
+                            <label for="bisstunde" class="col-sm-1 control-label">Stunde (inkl.): </label>
+                            <div class="col-sm-3">
+                                <select id="bisstunde" name="bisstunde" class="form-control ">
+                                    <option value="">*</option>
+                                    <?php foreach ($stunde_arr as $stunde): ?>
+                                        <option value="<?php echo $stunde->stunde ?>">
+                                            <?php echo $stunde->stunde .
+                                                ' [' .
+                                                (new DateTime($stunde->beginn))->format('H:i') . ' - ' .
+                                                (new DateTime($stunde->ende))->format('H:i') .
+                                                ']' ?>
+                                        </option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
                         </div>
-                        <label for="bisstunde" class="col-sm-1 control-label">Stunde (inkl.): </label>
-                        <div class="col-sm-3">
-                            <select id="bisstunde" name="bisstunde" class="form-control select-w500">
-                                <option value="" >*</option>
-                                <?php foreach ($stunde_arr as $stunde) : ?>
-                                    <option value="<?php echo $stunde->stunde ?>">
-                                        <?php echo $stunde->stunde.
-                                            ' ['.
-                                            (new DateTime($stunde->beginn))->format('H:i'). ' - '.
-                                            (new DateTime($stunde->ende))->format('H:i').
-                                            ']' ?>
-                                    </option>
-                                <?php endforeach; ?>
-                            </select>
-                        </div>
-                    </div>
 
-                    <div class="col-sm-8">
-                        <button type="submit" id="btn-save" class="btn btn-primary btn-w200 pull-right">
-                            <?php echo ucfirst($this->p->t('ui', 'speichern')); ?>
-                        </button>
-                        <button type="button" id="btn-delete" class="btn btn-danger btn-w200 btn-mr5 pull-right" disabled
-                                data-toggle="tooltip" data-placement="right"
+                        <div class="col-sm-8">
+                            <button type="submit" id="btn-save" style="width:200px;" class="btn btn-primary pull-right">
+                                <?php echo ucfirst($this->p->t('ui', 'speichern')); ?>
+                            </button>
+                            <button type="button" id="btn-delete" style="width:200px; margin-right:10px"
+                                class="btn btn-danger  pull-right" disabled data-toggle="tooltip" data-placement="right"
                                 title="Zum Löschen LektorIn aus Tabelle wählen">
-                            <?php echo ucfirst($this->p->t('ui', 'loeschen')); ?>
-                        </button>
-                        <button type="reset" id="btn-break" class="btn btn-default btn-w200 btn-mr5 pull-right">
-                            <?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
-                        </button>
-                    </div>
-                </form>
+                                <?php echo ucfirst($this->p->t('ui', 'loeschen')); ?>
+                            </button>
+                            <button type="reset" id="btn-break" style="width:200px; margin-right:10px"
+                                class="btn btn-default pull-right">
+                                <?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
-        </div>
 
-        <!-- data table -->
-        <div class="row">
-            <div class="col-lg-12">
-                <?php $this->load->view('lehre/lvplanung/adminZeitverfuegbarkeitData.php'); ?>
+            <!-- data table -->
+            <div class="row">
+                <div class="col-lg-12">
+                    <?php $this->load->view('lehre/lvplanung/adminZeitverfuegbarkeitData.php'); ?>
+                </div>
             </div>
-        </div>
 
-    </div><!-- end container -->
-</div><!-- end page-wrapper -->
-<br>
-</body>
+        </div><!-- end container -->
+    </div><!-- end page-wrapper -->
+    <br>
 
-<?php $this->load->view('templates/FHC-Footer'); ?>
+<?php $this->load->view('templates/FHC-Footer'); ?>
\ No newline at end of file
diff --git a/application/views/lehre/lvplanung/adminZeitverfuegbarkeitData.php b/application/views/lehre/lvplanung/adminZeitverfuegbarkeitData.php
index 81a683cff..131a8574e 100644
--- a/application/views/lehre/lvplanung/adminZeitverfuegbarkeitData.php
+++ b/application/views/lehre/lvplanung/adminZeitverfuegbarkeitData.php
@@ -15,7 +15,7 @@ $qry = '
         JOIN lehre.tbl_lehrveranstaltung lv USING (lehrveranstaltung_id)
         JOIN public.tbl_studiensemester ss USING (studiensemester_kurzbz)
         JOIN campus.tbl_zeitsperre zsp ON zsp.mitarbeiter_uid = lema.mitarbeiter_uid
-        WHERE lv.studiengang_kz IN ('. implode (',', $STUDIENGANG_KZ_ARR). ')
+        WHERE lv.studiengang_kz IN (' . implode(',', $STUDIENGANG_KZ_ARR) . ')
         AND b.aktiv
 		AND zsp.vondatum >= ss.start
         AND zeitsperretyp_kurzbz = \'ZVerfueg\'
@@ -40,18 +40,17 @@ $filterWidgetArray = array(
         ucfirst($this->p->t('global', 'notiz'))
     ),
     'datasetRepOptions' => '{
+        height: func_height(this),
 		layout: "fitColumns",           // fit columns to width of table
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
         index: "zeitsperre_id",             // assign specific column as unique id (important for row indexing)
         selectable: 1,               // allow row selection
         tableWidgetHeader: false,
-        rowSelected: function(row) {
-            func_rowSelected(row);
+        columnDefaults:{
+            headerFilterPlaceholder: " ",
         },
-        rowDeselected: function(row) {
-            func_rowDeselected(row);
-        }
+       
+      
     }', // tabulator properties
     'datasetRepFieldsDefs' => '{
         zeitsperre_id: {visible:false},
@@ -67,4 +66,4 @@ $filterWidgetArray = array(
 
 echo $this->widgetlib->widget('TableWidget', $filterWidgetArray);
 
-?>
+?>
\ No newline at end of file
diff --git a/application/views/lehre/pruefungsprotokollUebersicht.php b/application/views/lehre/pruefungsprotokollUebersicht.php
index c5c545d42..e75e3c914 100644
--- a/application/views/lehre/pruefungsprotokollUebersicht.php
+++ b/application/views/lehre/pruefungsprotokollUebersicht.php
@@ -9,6 +9,9 @@
 			'bootstrap3' => true,
 			'fontawesome4' => true,
 			'tablesorter2' => true,
+			'tabulator5' => true,
+			'tabulator5JQuery' => true,
+			'cis'=>true,
 			'ajaxlib' => true,
 			'dialoglib' => true,
 			'tablewidget' => true,
@@ -27,7 +30,6 @@
 	);
 ?>
 
-<body>
 <div id="page-wrapper">
 	<div class="container-fluid">
 		<div class="row">
@@ -63,6 +65,5 @@
 		</div>
 	</div>
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/organisation/reihungstest/reihungstest.php b/application/views/organisation/reihungstest/reihungstest.php
index 357c11c10..dc53bf737 100644
--- a/application/views/organisation/reihungstest/reihungstest.php
+++ b/application/views/organisation/reihungstest/reihungstest.php
@@ -21,7 +21,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -41,6 +40,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/organisation/studienjahr.php b/application/views/organisation/studienjahr.php
index 8cef4634d..a14c408e7 100644
--- a/application/views/organisation/studienjahr.php
+++ b/application/views/organisation/studienjahr.php
@@ -1,7 +1,7 @@
 <?php
 $this->load->view('templates/header', array('title' => 'StudienjahrList', 'tablesort' => true, 'tableid' => 't1', 'headers' => '2:{sorter:false}, 3:{sorter:false}', 'sortList' => '0,1'));
 ?>
-<body>
+
 <div class="row">
 	<div class="span4">
 		<h2>Studienjahr</h2>
@@ -40,7 +40,6 @@ $this->load->view('templates/header', array('title' => 'StudienjahrList', 'table
 		</table>
 	</div>
 </div>
-</body>
 </html>
 
 
diff --git a/application/views/person/bpk/bpkDetails.php b/application/views/person/bpk/bpkDetails.php
index bd6191c6a..b45a75304 100644
--- a/application/views/person/bpk/bpkDetails.php
+++ b/application/views/person/bpk/bpkDetails.php
@@ -34,7 +34,6 @@
 		)
 	);
 ?>
-<body>
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -155,6 +154,5 @@
 		</div> <!-- ./container-fluid-->
 	</div> <!-- ./page-wrapper-->
 </div> <!-- ./wrapper -->
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/person/bpk/bpkwartung.php b/application/views/person/bpk/bpkwartung.php
index f6283ee3b..dfd2951c3 100644
--- a/application/views/person/bpk/bpkwartung.php
+++ b/application/views/person/bpk/bpkwartung.php
@@ -21,7 +21,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -46,6 +45,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/person/gradelist/gradelist.php b/application/views/person/gradelist/gradelist.php
index 06d499ded..9a7469f0b 100644
--- a/application/views/person/gradelist/gradelist.php
+++ b/application/views/person/gradelist/gradelist.php
@@ -18,7 +18,6 @@
 		)
 	);
 ?>
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -63,7 +62,6 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
 
diff --git a/application/views/person/gruppenmanagement/benutzergruppe.php b/application/views/person/gruppenmanagement/benutzergruppe.php
index c076f6dd0..5cf404aab 100644
--- a/application/views/person/gruppenmanagement/benutzergruppe.php
+++ b/application/views/person/gruppenmanagement/benutzergruppe.php
@@ -22,7 +22,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -70,6 +69,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/person/gruppenmanagement/gruppenmanagement.php b/application/views/person/gruppenmanagement/gruppenmanagement.php
index 87c44c1b9..90b03a5a0 100644
--- a/application/views/person/gruppenmanagement/gruppenmanagement.php
+++ b/application/views/person/gruppenmanagement/gruppenmanagement.php
@@ -21,7 +21,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -41,6 +40,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterAbgewiesen.php b/application/views/system/infocenter/infocenterAbgewiesen.php
index 55987a3bd..921d9f224 100644
--- a/application/views/system/infocenter/infocenterAbgewiesen.php
+++ b/application/views/system/infocenter/infocenterAbgewiesen.php
@@ -25,7 +25,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -45,6 +44,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterAufgenommen.php b/application/views/system/infocenter/infocenterAufgenommen.php
index 6d65c0f7c..680d66a8a 100644
--- a/application/views/system/infocenter/infocenterAufgenommen.php
+++ b/application/views/system/infocenter/infocenterAufgenommen.php
@@ -25,7 +25,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -45,6 +44,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterFreigegeben.php b/application/views/system/infocenter/infocenterFreigegeben.php
index d3e44ea95..a240a0b5c 100644
--- a/application/views/system/infocenter/infocenterFreigegeben.php
+++ b/application/views/system/infocenter/infocenterFreigegeben.php
@@ -25,7 +25,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -46,6 +45,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterReihungstestAbsolviert.php b/application/views/system/infocenter/infocenterReihungstestAbsolviert.php
index 71a7a1d5e..a86e0df97 100644
--- a/application/views/system/infocenter/infocenterReihungstestAbsolviert.php
+++ b/application/views/system/infocenter/infocenterReihungstestAbsolviert.php
@@ -25,7 +25,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -46,6 +45,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterZgvDetails.php b/application/views/system/infocenter/infocenterZgvDetails.php
index aefd95da0..eb9b4d2ee 100644
--- a/application/views/system/infocenter/infocenterZgvDetails.php
+++ b/application/views/system/infocenter/infocenterZgvDetails.php
@@ -52,7 +52,6 @@
 		)
 	);
 ?>
-<body>
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -241,6 +240,5 @@
 	</div> <!-- ./page-wrapper-->
 </div> <!-- ./wrapper -->
 <button id="scrollToTop" title="Go to top"><i class="fa fa-chevron-up"></i></button>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/infocenterZgvUeberpruefung.php b/application/views/system/infocenter/infocenterZgvUeberpruefung.php
index 7b285edb2..7b6b430d6 100644
--- a/application/views/system/infocenter/infocenterZgvUeberpruefung.php
+++ b/application/views/system/infocenter/infocenterZgvUeberpruefung.php
@@ -24,7 +24,6 @@ $this->load->view(
 );
 ?>
 
-<body>
 <div id="wrapper">
 
     <?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -44,6 +43,5 @@ $this->load->view(
         </div>
     </div>
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/infocenter/studiengangZgvInfo.php b/application/views/system/infocenter/studiengangZgvInfo.php
index 8b6d1a636..49862f282 100644
--- a/application/views/system/infocenter/studiengangZgvInfo.php
+++ b/application/views/system/infocenter/studiengangZgvInfo.php
@@ -11,7 +11,6 @@ $this->load->view(
 	)
 );
 ?>
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -36,7 +35,6 @@ $this->load->view(
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
 
diff --git a/application/views/system/issues/issues.php b/application/views/system/issues/issues.php
index 5e8efd547..d39ccb23f 100644
--- a/application/views/system/issues/issues.php
+++ b/application/views/system/issues/issues.php
@@ -24,7 +24,7 @@ $this->load->view(
 );
 ?>
 
-<body>
+
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -44,6 +44,5 @@ $this->load->view(
 		</div>
 	</div>
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/issues/issuesKonfiguration.php b/application/views/system/issues/issuesKonfiguration.php
index dbd62a26a..a045b1bcf 100644
--- a/application/views/system/issues/issuesKonfiguration.php
+++ b/application/views/system/issues/issuesKonfiguration.php
@@ -24,7 +24,7 @@ $this->load->view(
 );
 ?>
 
-<body>
+
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -195,6 +195,5 @@ $this->load->view(
 	</div>
 
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/issues/issuesZustaendigkeiten.php b/application/views/system/issues/issuesZustaendigkeiten.php
index 9a82665a0..0ca60d0c3 100644
--- a/application/views/system/issues/issuesZustaendigkeiten.php
+++ b/application/views/system/issues/issuesZustaendigkeiten.php
@@ -24,7 +24,6 @@ $this->load->view(
 );
 ?>
 
-<body>
 <div id="wrapper">
 
 	<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -163,6 +162,5 @@ $this->load->view(
 	</div>
 
 </div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/jq/jobsQueueViewer.php b/application/views/system/jq/jobsQueueViewer.php
index bf4e16645..fc2d83bc7 100644
--- a/application/views/system/jq/jobsQueueViewer.php
+++ b/application/views/system/jq/jobsQueueViewer.php
@@ -22,7 +22,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 
 		<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
@@ -42,6 +41,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/login/usernamePassword.php b/application/views/system/login/usernamePassword.php
index ba6062b46..d695089b4 100644
--- a/application/views/system/login/usernamePassword.php
+++ b/application/views/system/login/usernamePassword.php
@@ -16,7 +16,7 @@
 	);
 ?>
 
-<body>
+
 	<div class="login-form">
 
 		<p class="text-center">
@@ -40,6 +40,5 @@
 		<p class="text-center"><a href="#">Forgot Password?</a></p>
 
 	</div>
-</body>
 
 <?php $this->load->view('templates/FHC-Footer'); ?>
diff --git a/application/views/system/messages/FAShtmlWriteTemplate.php b/application/views/system/messages/FAShtmlWriteTemplate.php
index 83f895d14..3ab95ac91 100644
--- a/application/views/system/messages/FAShtmlWriteTemplate.php
+++ b/application/views/system/messages/FAShtmlWriteTemplate.php
@@ -17,7 +17,6 @@
 		)
 	);
 ?>
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -191,7 +190,6 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
 
diff --git a/application/views/system/messages/ajaxRead.php b/application/views/system/messages/ajaxRead.php
index 4c1a77deb..0f066a28b 100644
--- a/application/views/system/messages/ajaxRead.php
+++ b/application/views/system/messages/ajaxRead.php
@@ -19,7 +19,6 @@
 		)
 	);
 ?>
-	<body>
 
 		<fieldset>
 
@@ -56,6 +55,5 @@
 
 		<div id="readMessagePanel"></div>
 
-	</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/ajaxWrite.php b/application/views/system/messages/ajaxWrite.php
index b3a598506..cfcf0e4aa 100644
--- a/application/views/system/messages/ajaxWrite.php
+++ b/application/views/system/messages/ajaxWrite.php
@@ -17,7 +17,6 @@
 		)
 	);
 ?>
-	<body>
 		<div id="wrapper">
 			<div id="page-wrapper">
 				<div class="container-fluid">
@@ -101,6 +100,5 @@
 				</div>
 			</div>
 		</div>
-	</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/ajaxWriteReply.php b/application/views/system/messages/ajaxWriteReply.php
index 08dc188fa..9e0ceb190 100644
--- a/application/views/system/messages/ajaxWriteReply.php
+++ b/application/views/system/messages/ajaxWriteReply.php
@@ -17,7 +17,6 @@
 		)
 	);
 ?>
-	<body>
 		<div id="wrapper">
 			<div id="page-wrapper">
 				<div class="container-fluid">
@@ -96,6 +95,5 @@
 				</div>
 			</div>
 		</div>
-	</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/htmlMessageSentError.php b/application/views/system/messages/htmlMessageSentError.php
index f8a0f8491..ead64808c 100644
--- a/application/views/system/messages/htmlMessageSentError.php
+++ b/application/views/system/messages/htmlMessageSentError.php
@@ -12,7 +12,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -77,6 +76,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/htmlMessageSentSuccess.php b/application/views/system/messages/htmlMessageSentSuccess.php
index 91eeab519..5055e2793 100644
--- a/application/views/system/messages/htmlMessageSentSuccess.php
+++ b/application/views/system/messages/htmlMessageSentSuccess.php
@@ -12,7 +12,6 @@
 	);
 ?>
 
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -77,6 +76,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/htmlRead.php b/application/views/system/messages/htmlRead.php
index 35e162b70..7bbf50aa1 100644
--- a/application/views/system/messages/htmlRead.php
+++ b/application/views/system/messages/htmlRead.php
@@ -11,7 +11,6 @@
 		)
 	);
 ?>
-	<body>
 		<div id="wrapper">
 			<div id="page-wrapper">
 				<div class="container-fluid">
@@ -99,6 +98,5 @@
 				</div>
 			</div>
 		</div>
-	</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/htmlWriteReply.php b/application/views/system/messages/htmlWriteReply.php
index d2150c1fb..0015022cf 100644
--- a/application/views/system/messages/htmlWriteReply.php
+++ b/application/views/system/messages/htmlWriteReply.php
@@ -13,7 +13,6 @@
 		)
 	);
 ?>
-	<body>
 		<div id="wrapper">
 			<div id="page-wrapper">
 				<div class="container-fluid">
@@ -88,6 +87,5 @@
 				</div>
 			</div>
 		</div>
-	</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/system/messages/htmlWriteTemplate.php b/application/views/system/messages/htmlWriteTemplate.php
index 42a31f374..ca09558fc 100644
--- a/application/views/system/messages/htmlWriteTemplate.php
+++ b/application/views/system/messages/htmlWriteTemplate.php
@@ -17,7 +17,6 @@
 		)
 	);
 ?>
-<body>
 	<div id="wrapper">
 		<div id="page-wrapper">
 			<div class="container-fluid">
@@ -191,6 +190,5 @@
 			</div>
 		</div>
 	</div>
-</body>
 
 <?php $this->load->view("templates/FHC-Footer"); ?>
diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index eba22fc8f..8e69c0366 100644
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -18,7 +18,7 @@ $this->load->view('templates/FHC-Header', $includesArray);
 if (!isset($menu)) {
 	$ci =& get_instance(); // get CI instance
 	$ci->load->model('content/Content_model', 'ContentModel');
-	$result = $ci->ContentModel->getMenu(null, get_uid());
+	$result = $ci->ContentModel->getMenu(null, getAuthUID());
 	$menu = getData($result) ?? (object)['childs' => []];
 }
 ?>
diff --git a/application/views/templates/CISVUE-Header.php b/application/views/templates/CISVUE-Header.php
index 70f9a173f..855d10b37 100644
--- a/application/views/templates/CISVUE-Header.php
+++ b/application/views/templates/CISVUE-Header.php
@@ -20,7 +20,7 @@ if (!isset($menu)) {
 	$ci =& get_instance(); // get CI instance
 	$ci->load->model('content/Content_model', 'ContentModel');
 	$cis4_content_id = $ci->ContentModel->getMenuContentID();
-	$result = $ci->ContentModel->getMenu($cis4_content_id, get_uid());
+	$result = $ci->ContentModel->getMenu($cis4_content_id, getAuthUID());
 	$menu = getData($result)->childs ?? [];
 }
 ?>
diff --git a/application/views/templates/FHC-Common.php b/application/views/templates/FHC-Common.php
index 072ff1d7f..dd399f354 100644
--- a/application/views/templates/FHC-Common.php
+++ b/application/views/templates/FHC-Common.php
@@ -23,6 +23,7 @@
 	$tablesorter2 = isset($tablesorter2) ? $tablesorter2 : false;
 	$tabulator4 = isset($tabulator4) ? $tabulator4 : false;
 	$tabulator5 = isset($tabulator5) ? $tabulator5 : false;
+	$tabulator5JQuery = isset($tabulator5JQuery) ? $tabulator5JQuery : false;
 	$tinymce3 = isset($tinymce3) ? $tinymce3 : false;
 	$tinymce5 = isset($tinymce5) ? $tinymce5 : false;
 	$vue3 = isset($vue3) ? $vue3 : false;
diff --git a/application/views/templates/FHC-Footer.php b/application/views/templates/FHC-Footer.php
index 31e610289..dd27fe5e6 100644
--- a/application/views/templates/FHC-Footer.php
+++ b/application/views/templates/FHC-Footer.php
@@ -99,7 +99,8 @@
 
 	// Tabulator 5 JS
 	if ($tabulator5 === true) generateJSsInclude('vendor/olifolkerd/tabulator5/dist/js/tabulator.min.js');
-
+	// Tabulator 5 JQuery
+	if ($tabulator5JQuery === true) generateJSsInclude('public/js/tabulator/jquery_wrapper.js');
 	// Tinymce 3 JS
 	if ($tinymce3 === true) generateJSsInclude('include/tiny_mce/tiny_mce.js');
 
diff --git a/application/views/widgets/dropdown.php b/application/views/widgets/dropdown.php
index 51db6d536..f61141a4b 100644
--- a/application/views/widgets/dropdown.php
+++ b/application/views/widgets/dropdown.php
@@ -34,6 +34,7 @@
 					<?php HTMLWidget::printAttribute(${HTMLWidget::HTML_ARG_NAME}, HTMLWidget::REGEX); ?>
 					<?php HTMLWidget::printAttribute(${HTMLWidget::HTML_ARG_NAME}, HTMLWidget::TITLE); ?>
 					<?php HTMLWidget::printAttribute(${HTMLWidget::HTML_ARG_NAME}, HTMLWidget::DISABLED, false); ?>
+					<?php HTMLWidget::printAttribute(${HTMLWidget::HTML_ARG_NAME}, HTMLWidget::STYLE); ?>
 				>
 					<?php
 						$elements = ${DropdownWidget::WIDGET_DATA_ELEMENTS_ARRAY_NAME};
diff --git a/application/views/widgets/table/table.php b/application/views/widgets/table/table.php
index 35d66988a..cbd4ec0f1 100644
--- a/application/views/widgets/table/table.php
+++ b/application/views/widgets/table/table.php
@@ -1,24 +1,25 @@
 <br>
-<div class="row" id="divTableWidgetDataset" tableUniqueId="<?php echo $tableUniqueId; ?>">
-	<div class="col-lg-12">
-
+<div class="row"  id="divTableWidgetDataset" tableUniqueId="<?php echo $tableUniqueId; ?>">
+	<div  class="col-lg-12">
+	
 		<!-- Table widget header -->
 		<div id="tableWidgetHeader"></div>
-        
-        <!-- TableWidget help site ( only rendered if widget is Tabulator )-->
+
+		<!-- TableWidget help site ( only rendered if widget is Tabulator )-->
 		<?php $this->load->view('widgets/table/tableHelpsite') ?>
-  
+
 		<!-- Table info top -->
 		<div id="tableDatasetActionsTop"></div>
 
 		<!-- TableWidget table -->
+		<div style="border:1px solid lightgrey; border-bottom:none; ">
 		<?php TableWidget::loadViewDataset(); ?>
+		</div>
 
 		<!-- Table info bottom -->
 		<div id="tableDatasetActionsBottom"></div>
 
 		<!-- Table widget footer  -->
 		<div id="tableWidgetFooter"></div>
-
-	</div>
-</div>
+		</div>
+	</div>
\ No newline at end of file
diff --git a/application/views/widgets/table/tableHelpsite.php b/application/views/widgets/table/tableHelpsite.php
index 56523f7da..d0148ca35 100644
--- a/application/views/widgets/table/tableHelpsite.php
+++ b/application/views/widgets/table/tableHelpsite.php
@@ -1,10 +1,19 @@
 <!--CollapseHTML 'Help'-->
 <div class="row">
 	<div class="col-lg-12 collapse" id="tabulatorHelp-<?php echo $tableUniqueId; ?>">
-		<div class="well">
+		<div class="mb-2 " 
+			 style="<?php 
+				if(isset($bootstrapVersion) && $bootstrapVersion==5)
+				{ 
+					echo "border: 1px solid #ccc;
+      					  border-radius: 4px;
+      					  padding: 15px;
+      					  background-color: #f5f5f5;";
+				} ?>"
+			>
    
 			<h4><?php echo ucfirst($this->p->t('ui', 'tabelleneinstellungen')); ?></h4>
-			<div class="panel panel-body">
+			<div class=" <?php echo (isset($bootstrapVersion) && $bootstrapVersion==5)?"card card-body":"panel panel-body" ?>">
 				<b><?php echo $this->p->t('table', 'spaltenEinAusblenden'); ?></b>
 				<p>
                     <ul>
@@ -25,11 +34,11 @@
 			<br> <!--end panel-body-->
 			
 			<h4><?php echo $this->p->t('table', 'zeilenAuswaehlen'); ?></h4>
-			<div class="panel panel-body">
-				<ul>
-					<li><?php echo $this->p->t('table', 'zeilenAuswaehlenEinzeln'); ?></li>
-					<li><?php echo $this->p->t('table', 'zeilenAuswaehlenBereich'); ?></li>
-					<li><?php echo $this->p->t('table', 'zeilenAuswaehlenAlle'); ?></li>
+			<div class="<?php echo (isset($bootstrapVersion) && $bootstrapVersion==5)?"card card-body":"panel panel-body" ?>">
+				<ul class="mb-0">
+					<li class="mb-1"><?php echo $this->p->t('table', 'zeilenAuswaehlenEinzeln'); ?></li>
+					<li class="mb-1"><?php echo $this->p->t('table', 'zeilenAuswaehlenBereich'); ?></li>
+					<li class="mb-1"><?php echo $this->p->t('table', 'zeilenAuswaehlenAlle'); ?></li>
 				</ul>
 			</div>
 			<br> <!--end panel-body-->
diff --git a/application/widgets/TableWidget.php b/application/widgets/TableWidget.php
index e59efce10..c48308258 100644
--- a/application/widgets/TableWidget.php
+++ b/application/widgets/TableWidget.php
@@ -35,6 +35,9 @@ class TableWidget extends Widget
 	// Required permissions to use this TableWidget
 	private $_requiredPermissions;
 
+	// optional bootstrap version can be set to use different bootstrap classes 
+	private $_bootstrapVersion=3;
+
 	// SQL statement
 	private $_query;
 
@@ -92,8 +95,10 @@ class TableWidget extends Widget
 	 */
 	public function display($widgetData)
 	{
+		
 		$this->view(self::WIDGET_URL_TABLE, array(
-			'tableUniqueId' => $widgetData[TableWidgetLib::TABLE_UNIQUE_ID]
+			'tableUniqueId' => $widgetData[TableWidgetLib::TABLE_UNIQUE_ID],
+			'bootstrapVersion' => $widgetData[TableWidgetLib::TABLE_BOOTSTRAP_VERSION],
 		)); // GUI starts here
 	}
 
@@ -135,6 +140,7 @@ class TableWidget extends Widget
 
 		// Initialize class properties
 		$this->_requiredPermissions = null;
+		$this->_bootstrapVersion = 3;
 		$this->_reloadDataset = true; // by default the dataset is NOT cached in session
 		$this->_query = null;
 		$this->_additionalColumns = null;
@@ -154,6 +160,12 @@ class TableWidget extends Widget
 			$this->_requiredPermissions = $args[TableWidgetLib::REQUIRED_PERMISSIONS];
 		}
 
+		// Retrieved the optional tableWindget Bootstrap version
+		if (isset($args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION]) && !isEmptyString($args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION]))
+		{
+			$this->_bootstrapVersion = $args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION];
+		}
+
 		// How to retrieve data for the table: SQL statement or a result from DB
 		if (isset($args[TableWidgetLib::QUERY]))
 		{
@@ -349,6 +361,7 @@ class TableWidget extends Widget
 				$this->tablewidgetlib->setSession(
 					array(
 						TableWidgetLib::TABLE_UNIQUE_ID => $tableUniqueId, // table unique id
+						TableWidgetLib::TABLE_BOOTSTRAP_VERSION => $this->_bootstrapVersion, // bootstrap version for tableWidget
 						TableWidgetLib::SESSION_FIELDS => $this->tablewidgetlib->getExecutedQueryListFields(), // all the fields of the dataset
 						TableWidgetLib::SESSION_COLUMNS_ALIASES => $this->_columnsAliases, // all the fields aliases
 						TableWidgetLib::SESSION_ADDITIONAL_COLUMNS => $this->_additionalColumns, // additional columns
diff --git a/application/widgets/html/HTMLWidget.php b/application/widgets/html/HTMLWidget.php
index 0034edfd9..366008beb 100644
--- a/application/widgets/html/HTMLWidget.php
+++ b/application/widgets/html/HTMLWidget.php
@@ -27,6 +27,7 @@ class HTMLWidget extends Widget
 	const MIN_LENGTH = 'min-length';
 	const PLACEHOLDER = 'placeholder';
 	const DISABLED = 'disabled';
+	const STYLE = 'class';
 
 	/**
 	 * It gets also the htmlArgs array as parameter, it will be used to set the HTML properties
diff --git a/public/css/Tabulator5.css b/public/css/Tabulator5.css
index 4ec17cca4..9438a59bf 100644
--- a/public/css/Tabulator5.css
+++ b/public/css/Tabulator5.css
@@ -39,6 +39,71 @@
 	z-index: 999999;
 }
 
+/* classes for rows that are not selectable in the tabulator, except for rows that are used for calculation */
+.tabulator-row.tabulator-unselectable:not(.tabulator-calcs) {
+	color: #adb5bd !important;
+	pointer-events: none !important;
+}
+
+.tabulator-row.tabulator-unselectable a {
+	pointer-events: auto !important;
+}
+
+/* using bootstrap background classes to style the background color of tabulator rows */
+/* bg-warning */
+/* odd-rows */
+.tabulator-headers .tabulator-frozen.bg-warning,
+.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-warning,
+.tabulator-row.tabulator-row-odd .tabulator-cell.bg-warning {
+	background-color: #fcf8e3;
+	
+}
+/* even-rows */
+.tabulator-headers .tabulator-frozen.bg-warning,
+.tabulator-row.tabulator-row-even .tabulator-frozen.bg-warning,
+.tabulator-row.tabulator-row-even .tabulator-cell.bg-warning {
+	background-color: #fcf8e3;
+	
+}
+
+/* bg-success */
+/* odd-rows */
+.tabulator-headers .tabulator-frozen.bg-success,
+.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-success,
+.tabulator-row.tabulator-row-odd .tabulator-cell.bg-success {
+	background-color: #dff0d8;
+	
+}
+/* even-rows */
+.tabulator-headers .tabulator-frozen.bg-success,
+.tabulator-row.tabulator-row-even .tabulator-frozen.bg-success,
+.tabulator-row.tabulator-row-even .tabulator-cell.bg-success {
+	background-color: #dff0d8;
+	
+}
+
+/* bg-info */
+/* odd-rows */
+.tabulator-headers .tabulator-frozen.bg-info,
+.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-info,
+.tabulator-row.tabulator-row-odd .tabulator-cell.bg-info {
+	background-color: #d9edf7;
+	
+}
+/* even-rows */
+.tabulator-headers .tabulator-frozen.bg-info,
+.tabulator-row.tabulator-row-even .tabulator-frozen.bg-info,
+.tabulator-row.tabulator-row-even .tabulator-cell.bg-info {
+	background-color: #d9edf7;
+	
+}
+
+/* special bootstrap5 styling for tableWidget and their accordion-item ::after content */
+.accordion-button::after{
+	content:none !important;
+}
+
+
 .tabulator {
 	font-size: 1rem;
 }
@@ -54,3 +119,14 @@
 	z-index: 1;
 	outline: 0;
 }
+
+.btn-select-col-selected
+{
+	background-color: #e6e6e6;
+}
+
+.accordion-item-dark, .accordion-item-dark:focus{
+	background-color:#CED4DA !important;
+	 border-color:#ADB5BD !important;
+	 box-shadow: none !important;
+}
diff --git a/public/css/cis_bs5.css b/public/css/cis_bs5.css
index 48a5bfb1b..91c5aea9d 100644
--- a/public/css/cis_bs5.css
+++ b/public/css/cis_bs5.css
@@ -64,6 +64,7 @@ h6, .h6 {
 
 .tabulator {
 	font-size: var(--bs-body-font-size);
+	
 }
 
 .fhc-container .tabulator {
@@ -93,6 +94,50 @@ h6, .h6 {
 	background-color: #ececec;
 }
 
+
+/* using bootstrap background classes to style the background color of tabulator rows */
+/* bg-warning */
+/* odd-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-warning,
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-warning {
+	background-color: #fcf8e3;
+	
+}
+/* even-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-warning,
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-warning {
+	background-color: #fcf8e3;
+	
+}
+
+/* bg-success */
+/* odd-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-success,
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-success {
+	background-color: #dff0d8;
+	
+}
+/* even-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-success,
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-success {
+	background-color: #dff0d8;
+	
+}
+
+/* bg-info */
+/* odd-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-info,
+.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-info {
+	background-color: #d9edf7;
+	
+}
+/* even-rows */
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-info,
+.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-info {
+	background-color: #d9edf7;
+	
+}
+
 .fhc-container .tabulator .tabulator-col,
 .fhc-container .tabulator .tabulator-cell {
 	border-right: 1px solid #dee2e6;
diff --git a/public/css/lehre/anrechnung.css b/public/css/lehre/anrechnung.css
index 36956d79c..50914aa1f 100644
--- a/public/css/lehre/anrechnung.css
+++ b/public/css/lehre/anrechnung.css
@@ -1,7 +1,73 @@
+
+.btn-w200
+{
+    width: 200px;
+}
+
+.btn-mr5
+{
+    margin-right: 10px;
+}
+
 .select-w500 {
     width: 500px;
 }
 
 .pl-15 {
     padding-left: 15px !important;
-}
\ No newline at end of file
+}
+
+.bg-secondary-subtle{
+    background-color: #E9ECEF !important; 
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #DEE2E6 !important;
+}
+
+.bg-info-subtle{
+    background-color: #D9EDF7 !important; 
+    color: #31708F !important;
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #BCE8F1 !important;
+}
+
+.bg-warning-subtle{
+    background-color: #FFF3CD !important; 
+    color: #664D03 !important;
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #FFE69C !important;
+}
+
+.bg-success-subtle{
+    background-color: #D1E7DD !important; 
+    color: #0A3622 !important;
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #A3CFBB !important;
+}
+
+.bg-danger-subtle{
+    background-color: #F8D7DA !important; 
+    color: #672B31 !important;
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #F1AEB5 !important;
+}
+
+.bg-primary-subtle{
+    background-color: #CFE2FF !important; 
+    color: #052C65 !important;
+    border-style: solid !important;
+    border-width: 1px !important;
+    border-color: #9EC5FE !important;
+}
+
+
+/* html attribute disabled and title don't work together, sets the pointer-event to auto in order to see the title toolip */
+.btn:disabled {
+    pointer-events: auto !important;
+    cursor: default;
+}
+
diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js
index 9ae1b836c..4d9d66574 100644
--- a/public/js/TableWidget.js
+++ b/public/js/TableWidget.js
@@ -14,720 +14,755 @@ const DATASET_REP_TABULATOR = "tabulator";
  * FHC_TableWidget this object is used to render the GUI of a table widget and to operate with it
  */
 var FHC_TableWidget = {
-
-	//------------------------------------------------------------------------------------------------------------------
-	// Properties
-
-	_datasetRepresentation: null, // contains the current data representation
-
-	//------------------------------------------------------------------------------------------------------------------
-	// Public methods
-
-	/**
-	 * To display the TableWidget using the loaded data prenset in the session
-	 */
-	display: function() {
-
-		FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget);
-	},
-
-	/**
-	 * Alias call to method display only to inprove the readability of the code
-	 */
-	refresh: function() {
-
-		FHC_TableWidget.display();
-	},
-
-	//------------------------------------------------------------------------------------------------------------------
-	// Private methods
-
-	/**
-	 * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT
-	 */
-	_getTableUniqueIdPrefix: function() {
-
-		return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
-	},
-
-	/**
-	 * Utility method that checks if data contains an error and print that to the console
-	 * otherwise the TableWidget GUI is refreshed
-	 */
-	_failOrRefresh: function(data, textStatus, jqXHR) {
-
-		if (FHC_AjaxClient.isError(data))
-		{
-			console.log(FHC_AjaxClient.getError(data));
-		}
-		else
-		{
-			FHC_TableWidget.refresh();
-		}
-	},
-
-	/**
-	 * Utility method that checks if data contains an error and print that to the console
-	 * otherwise the page is reloaded
-	 */
-	_failOrReload: function(data, textStatus, jqXHR) {
-
-		if (FHC_AjaxClient.isError(data))
-		{
-			console.log(FHC_AjaxClient.getError(data));
-		}
-		else
-		{
-			location.reload();
-		}
-	},
-
-	/**
-	 * To reset the Table Widget GUI
-	 */
-	_resetGUI: function(tableWidgetDiv) {
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html("");
-			tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html("");
-		}
-
-		// If the choosen dataset representation is pivotUI
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI)
-		{
-			tableWidgetDiv.find("#tableWidgetPivotUI").html("");
-		}
-
-		// If the choosen dataset representation is tabulator
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			tableWidgetDiv.find("#tableWidgetTabulator").html("");
-		}
-	},
-
-	/**
-	 * To get via Ajax all the data related to the TableWidget present in the given page
-	 * If the parameter renderFunction is a valid function, is called on success
-	 */
-	_getTables: function(renderFunction) {
-
-		var tableWidgetUniqueIdArray = FHC_TableWidget._getTableWidgetUniqueIdArray();
-
-		for (var tableWidgetsCounter = 0; tableWidgetsCounter < tableWidgetUniqueIdArray.length; tableWidgetsCounter++)
-		{
-			FHC_AjaxClient.ajaxCallGet(
-				"widgets/Tables/getTable",
-				{
-					tableUniqueId: FHC_TableWidget._getTableUniqueIdPrefix() + "/" + tableWidgetUniqueIdArray[tableWidgetsCounter]
-				},
-				{
-					successCallback: function(data, textStatus, jqXHR) {
-
-						if (FHC_AjaxClient.hasData(data))
-						{
-							if (typeof renderFunction == "function")
-							{
-								renderFunction(FHC_AjaxClient.getData(data));
-							}
-						}
-						else
-						{
-							console.log(FHC_AjaxClient.getError(data));
-						}
-					}
-				}
-			);
-		}
-	},
-
-	/**
-	 * This method calls all the other methods needed to rendere the GUI for a TableWidget
-	 * The parameter data contains all the data about the TableWidget and it is given as parameter
-	 * to all the methods that here are called
-	 * NOTE: think very carefully before changing the order of the calls
-	 */
-	_renderTableWidget: function(data) {
-
-		FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen
-
-		var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]');
-
-		FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off
-
-		FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI
-
-		FHC_TableWidget._renderDataset(tableWidgetDiv, data);
-
-		FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
-	},
-
-	/**
-	 * Turns all the events off
-	 * NOTE: must be aligned to _turnOnEvents
-	 */
-	_turnOffEvents: function(tableWidgetDiv) {
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter
-		}
-	},
-
-	/**
-	 * Turns all the events on
-	 * NOTE: must be aligned to _turnOffEvents
-	 */
-	_turnOnEvents: function(tableWidgetDiv) {
-
-		var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
-		}
-
-		// If the choosen dataset representation is tabulator
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			// ---------------------------------------------------------------------------------------------------------
-			// Add events to the elements
-			// ---------------------------------------------------------------------------------------------------------
-
-			// Click-Event to download csv
-			tableWidgetDiv.find('#download-csv').on('click', function()
-			{
-				// BOM for correct UTF-8 char output
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true});
-			})
-
-			// Click-Event to toggle the collapsable help panel
-			tableWidgetDiv.find('#help').on('click', function()
-			{
-				// Hide the collapsable settings panel, if it actually shown
-				$('#tabulatorSettings-' + tableUniqueId).collapse('hide');
-
-				// Toggle the collapsable help panel
-				$('#tabulatorHelp-' + tableUniqueId).collapse('toggle');
-			})
-
-			// Click-Event to toggle the collapsable settings panel
-			tableWidgetDiv.find('#settings').on('click', function()
-			{
-				// Hide the collapsable help panel, if it actually shown
-				$('#tabulatorHelp-' + tableUniqueId).collapse('hide');
-
-				// Toggle the collapsable settings panel
-				$('#tabulatorSettings-' + tableUniqueId).collapse('toggle');
-			})
-
-			/* Beautify button group behaviour
-			 * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
-			 * Also remove the disturbing button focus behaviour
-			 */
-			$(".btn-group > .btn").click(function(){
-				if ($(this).hasClass("active"))
-				{
-					$(this).removeClass('active').css('outline', 'none');
-				}
-				else
-				{
-					$(this).addClass("active").css('outline', 'none').siblings().removeClass("active");
-				}
-			});
-
-			/**
-			 * Click-Event to select all rows
-			 * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
- 			 */
-			if (typeof tableWidgetHook_selectAllButton == 'function')
-			{
-				tableWidgetDiv.find('#select-all').on('click', function() {
-					tableWidgetHook_selectAllButton(tableWidgetDiv);
-				});
-			}
-			else
-			{
-				tableWidgetDiv.find('#select-all').on('click', function() {
-					tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', true);
-				});
-			}
-
-			// Click-Event to deselect all rows
-			tableWidgetDiv.find('#deselect-all').on('click', function()
-			{
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('deselectRow');
-			})
-
-			// Click-Event to toggle column-picker columns
-			tableWidgetDiv.find('.btn-select-col').on('click', function()
-			{
-				var selected = this.value;
-
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
-
-				// toggle class to color button as selected / deselected
-				$(this).toggleClass('btn-select-col-selected').blur();	// blur removes automatic focus
-			})
-		}
-	},
-
-	_renderDataset: function(tableWidgetDiv, data) {
-
-		// If the choosen dataset representation is tablesorter then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI
-		}
-
-		// If the choosen dataset representation is pivotUI then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI)
-		{
-			FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI
-		}
-
-		// If the choosen dataset representation is tabulator then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI
-		}
-	},
-
-	/**
-	 * Renders the tablesorter for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetTablesorter: function(tableWidgetDiv, data) {
-
-		if (data.hasOwnProperty("checkboxes") && data.checkboxes != null && data.checkboxes.trim() != "")
-		{
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th data-filter='false' title='Select'>Select</th>");
-		}
-
-		var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
-
-		for (var i = 0; i < arrayFieldsToDisplay.length; i++)
-		{
-			var columnName = arrayFieldsToDisplay[i];
-
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th title='" + columnName + "'>" + columnName + "</th>");
-		}
-
-		if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns))
-		{
-			for (var i = 0; i < data.additionalColumns.length; i++)
-			{
-				var columnName = data.additionalColumns[i];
-
-				tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th title='" + columnName + "'>" + columnName + "</th>");
-			}
-		}
-
-		if (arrayFieldsToDisplay.length > 0)
-		{
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				if (data.checkboxes != null && data.checkboxes != "")
-				{
-					// select checkbox range with shift key
-					if (typeof tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes === 'function')
-						tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes("range", true);
-				}
-				if (data.dataset.length == 0)
-				{
-					// Display placeholder if Table is empty
-					var numColumns = arrayFieldsToDisplay.length;
-					if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns))
-					{
-						numColumns += data.additionalColumns.length;
-					}
-					var strHtml = '<tr><td align="center" colspan="'+numColumns+'">';
-					strHtml += FHC_PhrasesLib.t('ui', 'keineDatenVorhanden');
-					strHtml += '</td></tr>';
-					tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml);
-				}
-				else
-				{
-					for (var i = 0; i < data.dataset.length; i++)
-					{
-						var record = data.dataset[i];
-
-						if ($.isEmptyObject(record))
-						{
-							continue;
-						}
-
-						var strHtml = "<tr class='" + record.MARK_ROW_CLASS + "'>";
-
-						if (data.checkboxes != null && data.checkboxes != "")
-						{
-							strHtml += "<td>";
-							strHtml += "<input type='checkbox' name='" + data.checkboxes + "[]' value='" + record[data.checkboxes] + "'>";
-							strHtml += "</td>";
-						}
-
-						$.each(arrayFieldsToDisplay, function(i, fieldToDisplay) {
-
-							if (record.hasOwnProperty(data.fields[i]))
-							{
-								strHtml += "<td>" + record[data.fields[i]] + "</td>";
-							}
-						});
-
-						if (data.additionalColumns != null && $.isArray(data.additionalColumns))
-						{
-							$.each(data.additionalColumns, function(i, additionalColumn) {
-
-								if (record.hasOwnProperty(additionalColumn))
-								{
-									strHtml += "<td>" + record[additionalColumn] + "</td>";
-								}
-							});
-						}
-
-						strHtml += "</tr>";
-
-						tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml);
-					}
-				}
-			}
-		}
-	},
-
-	/**
-	 * Enable the tablesorter libs to render the dataset table with sorting features
-	 */
-	_enableTableSorter: function(tableWidgetDiv) {
-
-		var tableWidgetTablesorter = tableWidgetDiv.find("#tableWidgetTableDataset");
-
-		// Checks if the table contains data (rows)
-		if (tableWidgetTablesorter.find("tbody:empty").length == 0
-			&& tableWidgetTablesorter.find("tr:empty").length == 0
-			&& tableWidgetTablesorter.hasClass("table-condensed"))
-		{
-			tableWidgetTablesorter.tablesorter({
-				dateFormat: "ddmmyyyy",
-				widgets: ["zebra", "filter"],
-				widgetOptions: {
-					filter_saveFilters : true
-				}
-			});
-
-			$.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null);
-		}
-	},
-
-	/**
-	 * Disable the tablesorter
-	 */
-	_disableTablesorter: function(tableWidgetDiv) {
-
-		tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable");
-	},
-
-	/**
-	 * Renders the pivotUI for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetPivotUI: function(tableWidgetDiv, data) {
-
-		// Checks if options were given and returns them
-		var options = FHC_TableWidget._getRepresentationOptions(data);
-
-		// Manipulation for the representation!
-		var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
-
-		// If there are fields to be displayed...
-		if (arrayFieldsToDisplay.length > 0)
-		{
-			// ...if there are data to be displayed...
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				// Build the array of objects used by pivotUI and store it in pivotUIData
-				var pivotUIData = [];
-
-				// Loops through data
-				for (var i = 0; i < data.dataset.length; i++)
-				{
-					var record = data.dataset[i]; // Single record
-					var tmpObj = {}; // New object that represents a record
-
-					// Loops through columns of a record
-					$.each(arrayFieldsToDisplay, function(i, fieldToDisplay) {
-
-						if (record.hasOwnProperty(data.fields[i]))
-						{
-							tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias
-						}
-					});
-
-					// If additional columns are present...
-					if (data.additionalColumns != null && $.isArray(data.additionalColumns))
-					{
-						// ...loops through them
-						$.each(data.additionalColumns, function(i, additionalColumn) {
-
-							if (record.hasOwnProperty(additionalColumn))
-							{
-								tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column
-							}
-						});
-					}
-
-					pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData
-				}
-
-				// Renders the pivotUI
-				tableWidgetDiv.find("#tableWidgetPivotUI").pivotUI(
-		            pivotUIData,
-					options
-		        );
-			}
-		}
-	},
-
-	/**
-	 * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
-	 */
-	_getFieldsToDisplay: function(data) {
-
-		var arrayFieldsToDisplay = [];
-
-		if (data.hasOwnProperty("fields") && $.isArray(data.fields))
-		{
-			if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
-			{
-				for (var sfc = 0; sfc < data.fields.length; sfc++)
-				{
-					for (var fc = 0; fc < data.fields.length; fc++)
-					{
-						if (data.fields[sfc] == data.fields[fc])
-						{
-							arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
-						}
-					}
-				}
-			}
-			else
-			{
-				arrayFieldsToDisplay = data.fields;
-			}
-		}
-
-		return arrayFieldsToDisplay;
-	},
-
-	/**
-	 * Renders the tabulator for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetTabulator: function(tableWidgetDiv, data) {
-
-		// Checks if options were given and returns them
-		var options = FHC_TableWidget._getRepresentationOptions(data);
-		// Checks if record fields definitions were given and returns them
-		var recordFieldsDefinitions = FHC_TableWidget._getRepresentationFieldsDefinitions(data);
-
-		// Manipulation for the representation!
-		var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(data, recordFieldsDefinitions);
-
-		if (arrayTabulatorColumns.length > 0)
-		{
-			// ...if there are data to be displayed...
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				if (options == null) options = {};
-
-				options.columns = arrayTabulatorColumns;
-				options.data = data.dataset;
-                options.persistence = (typeof options.persistence == 'undefined') ? true : options.persistence;			// enables persistence (default store in localStorage if available, else in cookie)
-                options.persistenceID = (typeof options.persistenceID == 'undefined') ?  data.tableUniqueId : options.persistenceID;  // persistenceID to store persistence data seperately for multiple tables
-				options.movableColumns = (typeof options.movableColumns == 'undefined') ? true : options.movableColumns;				// allows changing column order
-				options.tooltipsHeader = (typeof options.tooltipsHeader == 'undefined') ? true : options.tooltipsHeader;					// set header tooltip with column title
-				options.placeholder = _func_placeholder();	// display text when table is empty
-
-				if (typeof options.rowSelectionChanged == 'undefined')
-				{
-					options.rowSelectionChanged = function(data, rows){
-						_func_rowSelectionChanged(data, rows);
-					};
-				}
-				options.columnVisibilityChanged = function(column, visible) {
-					_func_columnVisibilityChanged(column, visible);
-				};
-
-				// Renders the tabulator
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
-			}
-		}
-
-		// -------------------------------------------------------------------------------------------------------------
-		// Render TableWidget Header and -Footer
-		// -------------------------------------------------------------------------------------------------------------
-
-		// Render tableWidgetHeader
-		if (typeof options.tableWidgetHeader == 'undefined' ||
-			(typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false))
-		{
-			var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
-			tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
-
-			// Render the collapsable div triggered by button in tableWidgetHeader
-			var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
-			tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
-		}
-
-		/**
-		 * 	tableWidgetFooter is NOT rendered by default.
-		 * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
-		 *	Setup options like this:
-		 *  tableWidgetFooter: {
-		 *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
-		 *  }
- 		 */
-		if (typeof options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null)
-		{
-			var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter);
-			tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML);
-		}
-	},
-
-	/**
-	 * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
-	 */
-	_getTabulatorColumns: function(data, recordFieldsDefinitions) {
-
-		var fieldsToDisplayTabulator = [];
-
-		if (data.hasOwnProperty("fields") && $.isArray(data.fields))
-		{
-			for (var sfc = 0; sfc < data.fields.length; sfc++)
-			{
-				for (var fc = 0; fc < data.fields.length; fc++)
-				{
-					if (data.fields[sfc] == data.fields[fc])
-					{
-						// Build the array of objects (columns) used by tabulator and store it in tabulatorColumns
-						var tmpColumnObj = {}; // New object that represents a column
-
-						// If was given a definition for this field then use it!
-						if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(data.fields[sfc]))
-						{
-							tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]];
-						}
-
-						tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name
-
-						// If there is an alias for this field use it to give a title to this field (header)
-						if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
-						{
-							tmpColumnObj.title = data.columnsAliases[fc];
-						}
-						else // otherwise use the field name itself
-						{
-							tmpColumnObj.title = data.fields[sfc];
-						}
-
-						fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
-					}
-				}
-			}
-		}
-
-		// If additional columns are present...
-		if (data.hasOwnProperty("additionalColumns") && data.additionalColumns != null && $.isArray(data.additionalColumns))
-		{
-			// ...loops through them
-			$.each(data.additionalColumns, function(i, additionalColumn) {
-
-				var tmpColumnObj = {}; // New object that represents a column
-
-				// If was given a definition for this field then use it!
-				if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(additionalColumn))
-				{
-					tmpColumnObj = recordFieldsDefinitions[additionalColumn];
-				}
-
-				tmpColumnObj.title = additionalColumn; // Give a title to this field (header)
-				tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name
-
-				fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
-			});
-		}
-
-		return fieldsToDisplayTabulator;
-	},
-
-	/**
-	 * Gets options for the representation
-	 */
-	_getRepresentationOptions: function(data) {
-
-		var options = {}; // eventually contains options fot the representation
-
-		// Checks if options were given
-		if (data.hasOwnProperty("datasetRepresentationOptions") && data.datasetRepresentationOptions != "")
-		{
-			var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code
-
-			// If it is an object then can be used
-			if (typeof tmpOptions == "object")
-			{
-				options = tmpOptions;
-			}
-		}
-
-		return options;
-	},
-
-	/**
-	 * Gets record fields definitions to represent the dataset
-	 */
-	_getRepresentationFieldsDefinitions: function(data) {
-
-		var fieldsDefinitions = {}; // eventually contains record fields definitions
-
-		// Checks if record fields definitions was given as parameter
-		if (data.hasOwnProperty("datasetRepresentationFieldsDefinitions") && data.datasetRepresentationFieldsDefinitions != "")
-		{
-			var tmpFDefs = eval("(" + data.datasetRepresentationFieldsDefinitions + ")"); // and converts them from string to javascript code
-
-			// If it is an object then can be used
-			if (typeof tmpFDefs == "object")
-			{
-				fieldsDefinitions = tmpFDefs;
-			}
-		}
-
-		return fieldsDefinitions;
-	},
-
-	/**
-	 * Set what type of dataset representation was choosen
-	 */
-	_setDatasetRepresentation: function(data) {
-
-		if (data.hasOwnProperty("datasetRepresentation"))
-		{
-			FHC_TableWidget._datasetRepresentation = data.datasetRepresentation;
-		}
-	},
-
-	_getTableWidgetUniqueIdArray: function() {
-
-		var tableWidgetUniqueIdArray = [];
-
-		$("div[id*='divTableWidgetDataset']").each(function(i, e) {
-
-			tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue);
-		});
-
-		return tableWidgetUniqueIdArray;
-	}
+  //------------------------------------------------------------------------------------------------------------------
+  // Properties
+
+  _datasetRepresentation: null, // contains the current data representation
+
+  _bootstrapVersion: 3,
+  //------------------------------------------------------------------------------------------------------------------
+  // Public methods
+
+  /**
+   * To display the TableWidget using the loaded data prenset in the session
+   */
+  display: function () {
+    FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget);
+  },
+
+  /**
+   * Alias call to method display only to inprove the readability of the code
+   */
+  refresh: function () {
+    FHC_TableWidget.display();
+  },
+
+  //------------------------------------------------------------------------------------------------------------------
+  // Private methods
+
+  /**
+   * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT
+   */
+  _getTableUniqueIdPrefix: function () {
+    return (
+      FHC_JS_DATA_STORAGE_OBJECT.called_path +
+      "/" +
+      FHC_JS_DATA_STORAGE_OBJECT.called_method
+    );
+  },
+
+  /**
+   * Utility method that checks if data contains an error and print that to the console
+   * otherwise the TableWidget GUI is refreshed
+   */
+  _failOrRefresh: function (data, textStatus, jqXHR) {
+    if (FHC_AjaxClient.isError(data)) {
+      console.log(FHC_AjaxClient.getError(data));
+    } else {
+      FHC_TableWidget.refresh();
+    }
+  },
+
+  /**
+   * Utility method that checks if data contains an error and print that to the console
+   * otherwise the page is reloaded
+   */
+  _failOrReload: function (data, textStatus, jqXHR) {
+    if (FHC_AjaxClient.isError(data)) {
+      console.log(FHC_AjaxClient.getError(data));
+    } else {
+      location.reload();
+    }
+  },
+
+  /**
+   * To reset the Table Widget GUI
+   */
+  _resetGUI: function (tableWidgetDiv) {
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html("");
+      tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html("");
+    }
+
+    // If the choosen dataset representation is pivotUI
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
+      tableWidgetDiv.find("#tableWidgetPivotUI").html("");
+    }
+
+    // If the choosen dataset representation is tabulator
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      tableWidgetDiv.find("#tableWidgetTabulator").html("");
+    }
+  },
+
+  /**
+   * To get via Ajax all the data related to the TableWidget present in the given page
+   * If the parameter renderFunction is a valid function, is called on success
+   */
+  _getTables: function (renderFunction) {
+    var tableWidgetUniqueIdArray =
+      FHC_TableWidget._getTableWidgetUniqueIdArray();
+
+    for (
+      var tableWidgetsCounter = 0;
+      tableWidgetsCounter < tableWidgetUniqueIdArray.length;
+      tableWidgetsCounter++
+    ) {
+      FHC_AjaxClient.ajaxCallGet(
+        "widgets/Tables/getTable",
+        {
+          tableUniqueId:
+            FHC_TableWidget._getTableUniqueIdPrefix() +
+            "/" +
+            tableWidgetUniqueIdArray[tableWidgetsCounter],
+        },
+        {
+          successCallback: function (data, textStatus, jqXHR) {
+            if (FHC_AjaxClient.hasData(data)) {
+              if (typeof renderFunction == "function") {
+                renderFunction(FHC_AjaxClient.getData(data));
+              }
+            } else {
+              console.log(FHC_AjaxClient.getError(data));
+            }
+          },
+        }
+      );
+    }
+  },
+
+  /**
+   * This method calls all the other methods needed to rendere the GUI for a TableWidget
+   * The parameter data contains all the data about the TableWidget and it is given as parameter
+   * to all the methods that here are called
+   * NOTE: think very carefully before changing the order of the calls
+   */
+  _renderTableWidget: function (data) {
+    FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen
+
+    FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget
+
+    var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]');
+
+    FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off
+
+    FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI
+
+    FHC_TableWidget._renderDataset(tableWidgetDiv, data);
+
+    FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
+
+    FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
+  },
+
+  _onTableBuilt: function (tableWidgetDiv, data) {
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+
+    tableWidgetDiv
+      .find("#tableWidgetTabulator")
+      .tabulator("on", "tableBuilt", () => {
+        if (
+          typeof options.tableWidgetHeader == "undefined" ||
+          (typeof options.tableWidgetHeader != "undefined" &&
+            options.tableWidgetHeader != false)
+        ) {
+          // renders the table headers
+          var tabulatorHeaderCollapseHTML =
+            _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+          tableWidgetDiv
+            .find("#tableWidgetHeader")
+            .after(tabulatorHeaderCollapseHTML);
+        }
+
+        // makes the table headers toggle visibility when clicking on them
+        tableWidgetDiv.find(".btn-select-col").on("click", function () {
+          var selected = this.value;
+
+          tableWidgetDiv
+            .find("#tableWidgetTabulator")
+            .tabulator("toggleColumn", selected);
+
+          // toggle class to color button as selected / deselected
+          $(this).toggleClass("btn-select-col-selected").blur(); // blur removes automatic focus
+        });
+      });
+  },
+
+  /**
+   * Turns all the events off
+   * NOTE: must be aligned to _turnOnEvents
+   */
+  _turnOffEvents: function (tableWidgetDiv) {
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter
+    }
+  },
+
+  /**
+   * Turns all the events on
+   * NOTE: must be aligned to _turnOffEvents
+   */
+  _turnOnEvents: function (tableWidgetDiv) {
+    var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
+
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
+    }
+
+    // If the choosen dataset representation is tabulator
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      // ---------------------------------------------------------------------------------------------------------
+      // Add events to the elements
+      // ---------------------------------------------------------------------------------------------------------
+
+      // Click-Event to download csv
+      tableWidgetDiv.find("#download-csv").on("click", function () {
+        // BOM for correct UTF-8 char output
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator("download", "csv", "data.csv", { bom: true });
+      });
+
+      // Click-Event to toggle the collapsable help panel
+      tableWidgetDiv.find("#help").on("click", function () {
+        // Hide the collapsable settings panel, if it actually shown
+        $("#tabulatorSettings-" + tableUniqueId).collapse("hide");
+
+        // Toggle the collapsable help panel
+        $("#tabulatorHelp-" + tableUniqueId).collapse("toggle");
+      });
+
+      // Click-Event to toggle the collapsable settings panel
+      tableWidgetDiv.find("#settings").on("click", function () {
+        // Hide the collapsable help panel, if it actually shown
+        $("#tabulatorHelp-" + tableUniqueId).collapse("hide");
+
+        // Toggle the collapsable settings panel
+        $("#tabulatorSettings-" + tableUniqueId).collapse("toggle");
+      });
+
+      /* Beautify button group behaviour
+       * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
+       * Also remove the disturbing button focus behaviour
+       */
+      $(".btn-group > .btn").click(function () {
+        if ($(this).hasClass("active")) {
+          $(this).removeClass("active").css("outline", "none");
+        } else {
+          $(this)
+            .addClass("active")
+            .css("outline", "none")
+            .siblings()
+            .removeClass("active");
+        }
+      });
+
+      /**
+       * Click-Event to select all rows
+       * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
+       */
+      if (typeof tableWidgetHook_selectAllButton == "function") {
+        tableWidgetDiv.find("#select-all").on("click", function () {
+          tableWidgetHook_selectAllButton(tableWidgetDiv);
+        });
+      } else {
+        tableWidgetDiv.find("#select-all").on("click", function () {
+          tableWidgetDiv
+            .find("#tableWidgetTabulator")
+            .tabulator("selectRow", true);
+        });
+      }
+
+      // Click-Event to deselect all rows
+      tableWidgetDiv.find("#deselect-all").on("click", function () {
+        tableWidgetDiv.find("#tableWidgetTabulator").tabulator("deselectRow");
+      });
+
+      // Click-Event to toggle column-picker columns
+      //! this event was moved to the _onTableBuilt function
+    }
+  },
+
+  _renderDataset: function (tableWidgetDiv, data) {
+    // If the choosen dataset representation is tablesorter then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI
+    }
+
+    // If the choosen dataset representation is pivotUI then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
+      FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI
+    }
+
+    // If the choosen dataset representation is tabulator then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI
+    }
+  },
+
+  /**
+   * Renders the tablesorter for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetTablesorter: function (tableWidgetDiv, data) {
+    if (
+      data.hasOwnProperty("checkboxes") &&
+      data.checkboxes != null &&
+      data.checkboxes.trim() != ""
+    ) {
+      tableWidgetDiv
+        .find("#tableWidgetTableDataset > thead > tr")
+        .append("<th data-filter='false' title='Select'>Select</th>");
+    }
+
+    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
+
+    for (var i = 0; i < arrayFieldsToDisplay.length; i++) {
+      var columnName = arrayFieldsToDisplay[i];
+
+      tableWidgetDiv
+        .find("#tableWidgetTableDataset > thead > tr")
+        .append("<th title='" + columnName + "'>" + columnName + "</th>");
+    }
+
+    if (
+      data.hasOwnProperty("additionalColumns") &&
+      $.isArray(data.additionalColumns)
+    ) {
+      for (var i = 0; i < data.additionalColumns.length; i++) {
+        var columnName = data.additionalColumns[i];
+
+        tableWidgetDiv
+          .find("#tableWidgetTableDataset > thead > tr")
+          .append("<th title='" + columnName + "'>" + columnName + "</th>");
+      }
+    }
+
+    if (arrayFieldsToDisplay.length > 0) {
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        if (data.checkboxes != null && data.checkboxes != "") {
+          // select checkbox range with shift key
+          if (
+            typeof tableWidgetDiv.find("#tableWidgetTableDataset")
+              .checkboxes === "function"
+          )
+            tableWidgetDiv
+              .find("#tableWidgetTableDataset")
+              .checkboxes("range", true);
+        }
+        if (data.dataset.length == 0) {
+          // Display placeholder if Table is empty
+          var numColumns = arrayFieldsToDisplay.length;
+          if (
+            data.hasOwnProperty("additionalColumns") &&
+            $.isArray(data.additionalColumns)
+          ) {
+            numColumns += data.additionalColumns.length;
+          }
+          var strHtml = '<tr><td align="center" colspan="' + numColumns + '">';
+          strHtml += FHC_PhrasesLib.t("ui", "keineDatenVorhanden");
+          strHtml += "</td></tr>";
+          tableWidgetDiv
+            .find("#tableWidgetTableDataset > tbody")
+            .append(strHtml);
+        } else {
+          for (var i = 0; i < data.dataset.length; i++) {
+            var record = data.dataset[i];
+
+            if ($.isEmptyObject(record)) {
+              continue;
+            }
+
+            var strHtml = "<tr class='" + record.MARK_ROW_CLASS + "'>";
+
+            if (data.checkboxes != null && data.checkboxes != "") {
+              strHtml += "<td>";
+              strHtml +=
+                "<input type='checkbox' name='" +
+                data.checkboxes +
+                "[]' value='" +
+                record[data.checkboxes] +
+                "'>";
+              strHtml += "</td>";
+            }
+
+            $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
+              if (record.hasOwnProperty(data.fields[i])) {
+                strHtml += "<td>" + record[data.fields[i]] + "</td>";
+              }
+            });
+
+            if (
+              data.additionalColumns != null &&
+              $.isArray(data.additionalColumns)
+            ) {
+              $.each(data.additionalColumns, function (i, additionalColumn) {
+                if (record.hasOwnProperty(additionalColumn)) {
+                  strHtml += "<td>" + record[additionalColumn] + "</td>";
+                }
+              });
+            }
+
+            strHtml += "</tr>";
+
+            tableWidgetDiv
+              .find("#tableWidgetTableDataset > tbody")
+              .append(strHtml);
+          }
+        }
+      }
+    }
+  },
+
+  /**
+   * Enable the tablesorter libs to render the dataset table with sorting features
+   */
+  _enableTableSorter: function (tableWidgetDiv) {
+    var tableWidgetTablesorter = tableWidgetDiv.find(
+      "#tableWidgetTableDataset"
+    );
+
+    // Checks if the table contains data (rows)
+    if (
+      tableWidgetTablesorter.find("tbody:empty").length == 0 &&
+      tableWidgetTablesorter.find("tr:empty").length == 0 &&
+      tableWidgetTablesorter.hasClass("table-condensed")
+    ) {
+      tableWidgetTablesorter.tablesorter({
+        dateFormat: "ddmmyyyy",
+        widgets: ["zebra", "filter"],
+        widgetOptions: {
+          filter_saveFilters: true,
+        },
+      });
+
+      $.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null);
+    }
+  },
+
+  /**
+   * Disable the tablesorter
+   */
+  _disableTablesorter: function (tableWidgetDiv) {
+    tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable");
+  },
+
+  /**
+   * Renders the pivotUI for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetPivotUI: function (tableWidgetDiv, data) {
+    // Checks if options were given and returns them
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+
+    // Manipulation for the representation!
+    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
+
+    // If there are fields to be displayed...
+    if (arrayFieldsToDisplay.length > 0) {
+      // ...if there are data to be displayed...
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        // Build the array of objects used by pivotUI and store it in pivotUIData
+        var pivotUIData = [];
+
+        // Loops through data
+        for (var i = 0; i < data.dataset.length; i++) {
+          var record = data.dataset[i]; // Single record
+          var tmpObj = {}; // New object that represents a record
+
+          // Loops through columns of a record
+          $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
+            if (record.hasOwnProperty(data.fields[i])) {
+              tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias
+            }
+          });
+
+          // If additional columns are present...
+          if (
+            data.additionalColumns != null &&
+            $.isArray(data.additionalColumns)
+          ) {
+            // ...loops through them
+            $.each(data.additionalColumns, function (i, additionalColumn) {
+              if (record.hasOwnProperty(additionalColumn)) {
+                tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column
+              }
+            });
+          }
+
+          pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData
+        }
+
+        // Renders the pivotUI
+        tableWidgetDiv
+          .find("#tableWidgetPivotUI")
+          .pivotUI(pivotUIData, options);
+      }
+    }
+  },
+
+  /**
+   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
+   */
+  _getFieldsToDisplay: function (data) {
+    var arrayFieldsToDisplay = [];
+
+    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
+      if (
+        data.hasOwnProperty("columnsAliases") &&
+        $.isArray(data.columnsAliases)
+      ) {
+        for (var sfc = 0; sfc < data.fields.length; sfc++) {
+          for (var fc = 0; fc < data.fields.length; fc++) {
+            if (data.fields[sfc] == data.fields[fc]) {
+              arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
+            }
+          }
+        }
+      } else {
+        arrayFieldsToDisplay = data.fields;
+      }
+    }
+
+    return arrayFieldsToDisplay;
+  },
+
+  /**
+   * Renders the tabulator for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetTabulator: function (tableWidgetDiv, data) {
+    // Checks if options were given and returns them
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+    // Checks if record fields definitions were given and returns them
+    var recordFieldsDefinitions =
+      FHC_TableWidget._getRepresentationFieldsDefinitions(data);
+
+    // Manipulation for the representation!
+    var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(
+      data,
+      recordFieldsDefinitions
+    );
+
+    if (arrayTabulatorColumns.length > 0) {
+      // ...if there are data to be displayed...
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        if (options == null) options = {};
+        options.columnDefaults={
+            ...(options.columnDefaults||{}),  
+            headerTooltip:
+              typeof options.columnDefaults?.tooltipsHeader == "undefined"
+                ? true
+                : options.columnDefaults?.tooltipsHeader,
+          };
+        
+        
+        options.columns = arrayTabulatorColumns;
+        options.data = data.dataset;
+        options.persistence =
+          typeof options.persistence == "undefined"
+            ? true
+            : options.persistence; // enables persistence (default store in localStorage if available, else in cookie)
+        options.persistenceID =
+          typeof options.persistenceID == "undefined"
+            ? data.tableUniqueId
+            : options.persistenceID; // persistenceID to store persistence data seperately for multiple tables
+        options.movableColumns =
+          typeof options.movableColumns == "undefined"
+            ? true
+            : options.movableColumns; // allows changing column order
+
+        options.placeholder = _func_placeholder(); // display text when table is empty
+
+        // Renders the tabulator
+        tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
+
+        //! callbacks that need to be attached after the table has built in tabulator version 5+
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator("on", "rowSelectionChanged", _func_rowSelectionChanged);
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator(
+            "on",
+            "columnVisibilityChanged",
+            _func_columnVisibilityChanged
+          );
+      }
+    }
+
+    // -------------------------------------------------------------------------------------------------------------
+    // Render TableWidget Header and -Footer
+    // -------------------------------------------------------------------------------------------------------------
+
+    // Render tableWidgetHeader
+
+    if (
+      typeof options.tableWidgetHeader == "undefined" ||
+      (typeof options.tableWidgetHeader != "undefined" &&
+        options.tableWidgetHeader != false)
+    ) {
+      var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
+      tableWidgetDiv.find("#tableWidgetHeader").append(tabulatorHeaderHTML);
+    }
+
+    /**
+     * 	tableWidgetFooter is NOT rendered by default.
+     * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
+     *	Setup options like this:
+     *  tableWidgetFooter: {
+     *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
+     *  }
+     */
+    if (
+      typeof options.tableWidgetFooter != "undefined" &&
+      options.tableWidgetFooter != null
+    ) {
+      var tabulatorFooterHTML = _renderTabulatorFooterHTML(
+        options.tableWidgetFooter
+      );
+      tableWidgetDiv.find("#tableWidgetFooter").append(tabulatorFooterHTML);
+    }
+  },
+
+  /**
+   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
+   */
+  _getTabulatorColumns: function (data, recordFieldsDefinitions) {
+    var fieldsToDisplayTabulator = [];
+
+    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
+      for (var sfc = 0; sfc < data.fields.length; sfc++) {
+        for (var fc = 0; fc < data.fields.length; fc++) {
+          if (data.fields[sfc] == data.fields[fc]) {
+            // Build the array of objects (columns) used by tabulator and store it in tabulatorColumns
+            var tmpColumnObj = {}; // New object that represents a column
+
+            // If was given a definition for this field then use it!
+            if (
+              recordFieldsDefinitions != null &&
+              recordFieldsDefinitions.hasOwnProperty(data.fields[sfc])
+            ) {
+              tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]];
+            }
+
+            tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name
+
+            // If there is an alias for this field use it to give a title to this field (header)
+            if (
+              data.hasOwnProperty("columnsAliases") &&
+              $.isArray(data.columnsAliases)
+            ) {
+              tmpColumnObj.title = data.columnsAliases[fc];
+            } // otherwise use the field name itself
+            else {
+              tmpColumnObj.title = data.fields[sfc];
+            }
+
+            fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
+          }
+        }
+      }
+    }
+
+    // If additional columns are present...
+    if (
+      data.hasOwnProperty("additionalColumns") &&
+      data.additionalColumns != null &&
+      $.isArray(data.additionalColumns)
+    ) {
+      // ...loops through them
+      $.each(data.additionalColumns, function (i, additionalColumn) {
+        var tmpColumnObj = {}; // New object that represents a column
+
+        // If was given a definition for this field then use it!
+        if (
+          recordFieldsDefinitions != null &&
+          recordFieldsDefinitions.hasOwnProperty(additionalColumn)
+        ) {
+          tmpColumnObj = recordFieldsDefinitions[additionalColumn];
+        }
+
+        tmpColumnObj.title = additionalColumn; // Give a title to this field (header)
+        tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name
+
+        fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
+      });
+    }
+
+    return fieldsToDisplayTabulator;
+  },
+
+  /**
+   * Gets options for the representation
+   */
+  _getRepresentationOptions: function (data) {
+    var options = {}; // eventually contains options fot the representation
+
+    // Checks if options were given
+    if (
+      data.hasOwnProperty("datasetRepresentationOptions") &&
+      data.datasetRepresentationOptions != ""
+    ) {
+      var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code
+
+      // If it is an object then can be used
+      if (typeof tmpOptions == "object") {
+        options = tmpOptions;
+      }
+    }
+
+    return options;
+  },
+
+  /**
+   * Gets record fields definitions to represent the dataset
+   */
+  _getRepresentationFieldsDefinitions: function (data) {
+    var fieldsDefinitions = {}; // eventually contains record fields definitions
+    // Checks if record fields definitions was given as parameter
+    if (
+      data.hasOwnProperty("datasetRepresentationFieldsDefinitions") &&
+      data.datasetRepresentationFieldsDefinitions != ""
+    ) {
+      var tmpFDefs = eval(
+        "(" + data.datasetRepresentationFieldsDefinitions + ")"
+      ); // and converts them from string to javascript code
+
+      // If it is an object then can be used
+      if (typeof tmpFDefs == "object") {
+        fieldsDefinitions = tmpFDefs;
+      }
+    }
+
+    return fieldsDefinitions;
+  },
+
+  /**
+   * Set what type of dataset representation was choosen
+   */
+  _setDatasetRepresentation: function (data) {
+    if (data.hasOwnProperty("datasetRepresentation")) {
+      FHC_TableWidget._datasetRepresentation = data.datasetRepresentation;
+    }
+  },
+
+  _setBootstrapVersion: function (data) {
+    _bootstrapVersion = data.bootstrapVersion;
+  },
+
+  _getTableWidgetUniqueIdArray: function () {
+    var tableWidgetUniqueIdArray = [];
+
+    $("div[id*='divTableWidgetDataset']").each(function (i, e) {
+      tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue);
+    });
+
+    return tableWidgetUniqueIdArray;
+  },
 };
 
 //**********************************************************************************************************************
@@ -737,159 +772,202 @@ var FHC_TableWidget = {
  * Processed when row selection changed.
  * Displays number of selected rows on row selection change.
  */
-function _func_rowSelectionChanged (data, rows){
-
-	$('#number-selected').html("Ausgewählte Zeilen: <strong>" + rows.length + "</strong>");
+function _func_rowSelectionChanged(data, rows) {
+  $("#number-selected").html(
+    "Ausgewählte Zeilen: <strong>" + rows.length + "</strong>"
+  );
 }
 
 /* Processed when columns visibility changed (e.g. using the column picker).
  * Redraws the table to expand columns to table width.
  */
-function _func_columnVisibilityChanged(column, visible){
+function _func_columnVisibilityChanged(column, visible) {
+  var table = column.getTable();
 
-	var table = column.getTable();
-
-	table.redraw();
+  table.redraw();
 }
 
 /*
  * Displays text when table is empty
  */
-function _func_placeholder(){
-	return '<h4>' + FHC_PhrasesLib.t('ui', 'keineDatenVorhanden') + '</h4>';
+function _func_placeholder() {
+  return "<h4>" + FHC_PhrasesLib.t("ui", "keineDatenVorhanden") + "</h4>";
 }
 
 // Returns TableWidget Header HTML (download-, setting button...)
-function _renderTabulatorHeaderHTML(tableWidgetDiv){
+function _renderTabulatorHeaderHTML(tableWidgetDiv) {
+  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
 
-	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+  var tabulatorHeaderHTML = "";
+  tabulatorHeaderHTML += `<div  ${
+    _bootstrapVersion == 3 ? 'class="btn-toolbar pull-right" style="margin-bottom:0.5rem;"' : 'class="btn-toolbar d-flex justify-content-end mb-2"'
+  }" role="toolbar">
+		<div class="btn-group" role="group">
+			<!-- CSV Download button -->
+			<button id="download-csv" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button" 
+			data-toggle="tooltip" data-placement="left" title="Download CSV">
+				<small>
+					CSV&nbsp;&nbsp;
+				</small>
+				<i class="fa fa-arrow-down"></i>
+			</button>
+			<!-- Hilfe Button -->
+			<button id="help" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button"
+			data-toggle="collapse tooltip" data-target="tabulatorHelp-${tableUniqueId}" data-placement="left" 
+			title="${FHC_PhrasesLib.t("ui", "hilfe")}">
+				<i class="fa fa-question"></i>
+			</button>
+			<!-- Settings Button -->
+			<button id="settings" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button" 
+			data-toggle="collapse tooltip" data-target="tabulatorSettings-${tableUniqueId}" data-placement="left"
+			title="${FHC_PhrasesLib.t("ui", "tabelleneinstellungen")}" 
+			aria-expanded="false" aria-controls="tabulatorSettings-${tableUniqueId}">
+				<i class="fa fa-cog"></i>
+			</button>
+		</div>
+	</div>
+	`;
 
-	var tabulatorHeaderHTML = '';
-	tabulatorHeaderHTML += '<div class="btn-toolbar pull-right" role="toolbar">';
-	tabulatorHeaderHTML += '<div class="btn-group" role="group">';
-	tabulatorHeaderHTML += '' +
-		'<button id="download-csv" class="btn btn-default" type="button" ' +
-		'data-toggle="tooltip" data-placement="left" title="Download CSV">' +
-		'<small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i>' +
-		'</button>';
-	tabulatorHeaderHTML += '' +
-		'<button id="help" class="btn btn-default" type="button" ' +
-		'data-toggle="collapse tooltip" data-target="tabulatorHelp-'+ tableUniqueId + '" data-placement="left" ' +
-		'title="' + FHC_PhrasesLib.t("ui", "hilfe") + '"><i class="fa fa-question"></i>' +
-		'</button>';
-	tabulatorHeaderHTML += '' +
-		'<button id="settings" class="btn btn-default" type="button" ' +
-		'data-toggle="collapse tooltip" data-target="tabulatorSettings-'+ tableUniqueId + '" data-placement="left" ' +
-		'title="' + FHC_PhrasesLib.t("ui", "tabelleneinstellungen") + '" ' +
-		'aria-expanded="false" aria-controls="tabulatorSettings-'+ tableUniqueId + '">' +
-		'<i class="fa fa-cog"></i>' +
-		'</button>';
-	tabulatorHeaderHTML += '</div>';
-	tabulatorHeaderHTML += '</div>';
-	tabulatorHeaderHTML += '<br><br><br>';
-
-	return tabulatorHeaderHTML;
+  return tabulatorHeaderHTML;
 }
 
 // Returns collapsable HTML element for TableWidget header buttons
-function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
+function _renderTabulatorHeaderCollapseHTML(
+  tableWidgetDiv,
+  arrayTabulatorColumns
+) {
+  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
 
-	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+  var tabulatorHeaderCollapseHTML = "";
 
-	var tabulatorHeaderCollapseHTML = '';
+  // CollapseHTML 'Settings'
+  if (_bootstrapVersion == 3) {
+    tabulatorHeaderCollapseHTML += `
+	<div class="row ">
+		<div class="col-lg-12 collapse" id="tabulatorSettings-${tableUniqueId}">
+			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+				<div class="panel panel-default">
+					<div class="panel-heading" role="tab" id="headingOne">
+						<h5 class="panel-title">
+							<a role="button" data-toggle="collapse" data-parent="#accordion" 
+							href="#selectColumns-${tableUniqueId}" 
+							aria-expanded="false" aria-controls="selectColumns">
+							${FHC_PhrasesLib.t("ui", "spaltenEinstellen")} 
+							</a>
+						</h5>
+					</div>
+					<div id="selectColumns-${tableUniqueId}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+						<div class="panel-body">
+							<div class="btn-group" role="group">`;
+  } else {
+    tabulatorHeaderCollapseHTML += `<div class="row ">
+			<div class="col-12 mb-2 collapse" id="tabulatorSettings-${tableUniqueId}">
+				<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
+					<div class="accordion-item">
+						<h5  class=" accordion-header" role="tab" id="headingOne">		
+							<a role="button"  class="accordion-item-dark text-dark accordion-button" data-bs-toggle="collapse" data-bs-parent="#accordion" 
+							href="#selectColumns-${tableUniqueId}" 
+							aria-expanded="false" aria-controls="selectColumns">
+							${FHC_PhrasesLib.t("ui", "spaltenEinstellen")}
+							</a>
+						</h5>
+						<div id="selectColumns-${tableUniqueId}" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="headingOne" data-bs-parent="#accordion">
+							<div class=" accordion-body ">
+								<div class="d-flex flex-row flex-wrap btn-group" role="group">`;
+  }
+  // Create column picker (Spalten einstellen)
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getColumns")
+    .forEach(function (column) {
+      var field = column.getField();
+      var title = column.getDefinition().title;
+      var btn_select_col_selected = column.isVisible()
+        ? "btn-select-col-selected"
+        : "";
 
-	// CollapseHTML 'Settings'
-	tabulatorHeaderCollapseHTML += '<div class="row">';
-	tabulatorHeaderCollapseHTML += '<div class="col-lg-12 collapse" id="tabulatorSettings-'+ tableUniqueId + '">';
-	tabulatorHeaderCollapseHTML += '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
+      // If certain columns should be excluded from the column picker (define them in a blacklist array)
+      if (
+        typeof tableWidgetBlacklistArray_columnUnselectable != "undefined" &&
+        Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
+        tableWidgetBlacklistArray_columnUnselectable.length
+      ) {
+        if (
+          $.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0
+        ) {
+          tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
+            _bootstrapVersion == 3
+              ? "btn-default"
+              : "btn-outline-secondary flex-shrink-1"
+          } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
+        }
+      }
+      // Else provide all tabulator fields as pickable columns
+      else {
+        tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default"
+            : "btn-outline-secondary flex-shrink-1"
+        } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
+      }
+    });
 
-	tabulatorHeaderCollapseHTML += '<div class="panel panel-default">';
-	tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
-	tabulatorHeaderCollapseHTML += '<h5 class="panel-title">';
-	tabulatorHeaderCollapseHTML += '' +
-		'<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
-		'href="#selectColumns-' + tableUniqueId + '" ' +
-		'aria-expanded="false" aria-controls="selectColumns">' +
-		FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
-		'</a>';
-	tabulatorHeaderCollapseHTML += '</h5>';
-	tabulatorHeaderCollapseHTML += '</div>'; // end panel-heading
-	tabulatorHeaderCollapseHTML += '<div id="selectColumns-' + tableUniqueId + '" class="panel-collapse collapse" ' +
-		'role="tabpanel" aria-labelledby="headingOne">';
-	tabulatorHeaderCollapseHTML += '<div class="panel-body">';
-	tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
+  tabulatorHeaderCollapseHTML += "</div>"; // end btn-group
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-body / accordion-body
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-collapse / accordion-collapse
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel / accordion-item
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-group / accordion
+  tabulatorHeaderCollapseHTML += " </div>"; // end col
+  tabulatorHeaderCollapseHTML += " </div>"; // end row
 
-	// Create column picker (Spalten einstellen)
-	tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column)
-	{
-		var field = column.getField();
-		var title = column.getDefinition().title;
-		var btn_select_col_selected = column.isVisible() ? 'btn-select-col-selected' : '';
-
-		// If certain columns should be excluded from the column picker (define them in a blacklist array)
-		if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' &&
-			Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
-			tableWidgetBlacklistArray_columnUnselectable.length)
-		{
-			if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0)
-			{
-				tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
-			}
-		}
-		// Else provide all tabulator fields as pickable columns
-		else
-		{
-			tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
-		}
-	});
-
-	tabulatorHeaderCollapseHTML += '</div>'; // end btn-group
-	tabulatorHeaderCollapseHTML += '</div>'; // end panel-body
-	tabulatorHeaderCollapseHTML += '</div>'; // end panel-collapse
-	tabulatorHeaderCollapseHTML += '</div>'; // end panel
-
-	tabulatorHeaderCollapseHTML += '</div>'; // end panel-group
-	tabulatorHeaderCollapseHTML += ' </div>'; // end col
-	tabulatorHeaderCollapseHTML += ' </div>'; // end row
-
-	return tabulatorHeaderCollapseHTML;
+  return tabulatorHeaderCollapseHTML;
 }
 
 // Returns TableWidget Footer HTML (de-/select buttons,...)
-function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
+function _renderTabulatorFooterHTML(tableWidgetFooterOptions) {
+  var tabulatorFooterHTML = "";
 
-	var tabulatorFooterHTML = '';
+  // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
+  if (
+    typeof tableWidgetFooterOptions.selectButtons != "undefined" &&
+    tableWidgetFooterOptions.selectButtons == true
+  ) {
+    tabulatorFooterHTML += `<div ${_bootstrapVersion==3?'style="margin-top:1.5rem;" class="btn-toolbar"': 'class="btn-toolbar mt-4"'}  role="toolbar">
+			<div class="btn-group" role="group">
+				<button id="select-all" class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default pull-left"
+            : "btn-outline-secondary float-start"
+        } " type="button">
+			 		${FHC_PhrasesLib.t("ui", "alleAuswaehlen")}
+				</button>
+				<button id="deselect-all" class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default pull-left"
+            : "btn-outline-secondary float-start"
+        } " type="button">
+					${FHC_PhrasesLib.t("ui", "alleAbwaehlen")}
+				</button>
+				<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">
+					${FHC_PhrasesLib.t("ui", "ausgewaehlteZeilen")} : <strong>0</strong>
+				</span>
+			</div>
+		</div>
+		</br></br>`;
+  }
 
-	// If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
-	if (typeof tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true)
-	{
-		tabulatorFooterHTML += '<div class="btn-toolbar" role="toolbar">';
-		tabulatorFooterHTML += '<div class="btn-group" role="group">';
-		tabulatorFooterHTML += '' +
-			'<button id="select-all" class="btn btn-default pull-left" type="button">'
-			+ FHC_PhrasesLib.t("ui", "alleAuswaehlen") + '' +
-			'</button>';
-		tabulatorFooterHTML += '' +
-			'<button id="deselect-all" class="btn btn-default pull-left" type="button">'
-			+ FHC_PhrasesLib.t("ui", "alleAbwaehlen") + '' +
-			'</button>';
-		tabulatorFooterHTML += '' +
-			'<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">'
-			+ FHC_PhrasesLib.t("ui", "ausgewaehlteZeilen") + ': <strong>0</strong>' +
-			'</span>';
-		tabulatorFooterHTML += '</div>';
-		tabulatorFooterHTML += '</div>';
-		tabulatorFooterHTML += '</br></br>';
-	}
-
-	return tabulatorFooterHTML;
+  return tabulatorFooterHTML;
 }
 
 /**
  * When JQuery is up
  */
-$(document).ready(function() {
-
-	FHC_TableWidget.display();
-
+$(document).ready(function () {
+  FHC_TableWidget.display();
 });
diff --git a/public/js/apps/Cis/Documents.js b/public/js/apps/Cis/Documents.js
index c54c67232..da84d0640 100644
--- a/public/js/apps/Cis/Documents.js
+++ b/public/js/apps/Cis/Documents.js
@@ -33,11 +33,11 @@ const app = Vue.createApp({
 		inscriptiontableEmpty() {
 			// NOTE(chris): empty result on filter
 			if (this.inscriptiontableFilters.Stsem)
-				return this.p.t('tools', 'studienbeitragFuerSSNochNichtBezahlt', {stsem: this.inscriptiontableFilters.Stsem});
+				return this.$p.t('tools', 'studienbeitragFuerSSNochNichtBezahlt', {stsem: this.inscriptiontableFilters.Stsem});
 			if (this.inscriptiontableFilters.Stg)
-				return this.p.t('tools', 'studienbeitragFuerStgNochNichtBezahlt', {stsem: this.inscriptiontableFilters.Stg});
+				return this.$p.t('tools', 'studienbeitragFuerStgNochNichtBezahlt', {stsem: this.inscriptiontableFilters.Stg});
 			
-			return this.p.t('tools', 'studienbeitragNochNichtBezahlt');
+			return this.$p.t('tools', 'studienbeitragNochNichtBezahlt');
 		},
 		studienerfolgsbestaetigungtableFilter() {
 			const filter = [];
@@ -62,14 +62,14 @@ const app = Vue.createApp({
 	mounted() {
 		this.inscriptiontable = new Tabulator(this.$refs.inscriptiontable, {
 			layout: 'fitDataStretch',
-			placeholder: this.p.t('tools', 'studienbeitragNochNichtBezahlt')
+			placeholder: this.$p.t('tools', 'studienbeitragNochNichtBezahlt')
 		});
 		this.studienerfolgsbestaetigungtable = new Tabulator(this.$refs.studienerfolgsbestaetigungtable, {
 			layout: 'fitDataStretch'
 		});
 		this.abschlussdokumentetable = new Tabulator(this.$refs.abschlussdokumentetable, {
 			layout: 'fitDataStretch',
-			placeholder: this.p.t('tools', 'nochKeineAbschlussdokumenteVorhanden')
+			placeholder: this.$p.t('tools', 'nochKeineAbschlussdokumenteVorhanden')
 		});
 
 		// NOTE(chris): empty result on filter
@@ -93,4 +93,4 @@ const app = Vue.createApp({
 	}
 });
 app.use(Phrasen, {reload: true});
-app.mount('#content');
\ No newline at end of file
+app.mount('#content');
diff --git a/public/js/lehre/anrechnung/adminAnrechnung.js b/public/js/lehre/anrechnung/adminAnrechnung.js
index 51412bff0..0b38478e9 100644
--- a/public/js/lehre/anrechnung/adminAnrechnung.js
+++ b/public/js/lehre/anrechnung/adminAnrechnung.js
@@ -1,242 +1,284 @@
 // TABULATOR
 // ---------------------------------------------------------------------------------------------------------------------
 
+// global variable used to check whether the modal button should insert or update a
+var isUpdate = false;
+
 // Add Edit and Update Buttons to table rows
 function func_tableBuilt(table) {
-    table.addColumn(
-        {
-            title: "Aktion",
-            align: "center",
-            width: 150,
-            formatter: addActionButtons,
-        }, false  // place column right
-    );
+  table.tabulator(
+    "addColumn",
+    {
+      title: "Aktion",
+      align: "center",
+      width: 150,
+      formatter: addActionButtons,
+    },
+    false // place column right
+  );
 
+  // fully redrawing the table after adding the Details column
+  table.tabulator("redraw", true);
 }
 
 // Returns relative height (depending on screen size)
-function func_height(table){
-    return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var formatDate = function(cell, formatterParams){
-    let postgreDate = cell.getValue();
-    if (postgreDate != null)
-    {
-        var d = new Date(postgreDate);
-        return ("0" + (d.getDate())).slice(-2)  + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear();
-    }
-}
+var formatDate = function (cell, formatterParams) {
+  let postgreDate = cell.getValue();
+  if (postgreDate != null) {
+    var d = new Date(postgreDate);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // Create Edit and Update Buttons for table rows
-var addActionButtons = function(cell) {
+var addActionButtons = function (cell) {
+  // Create edit button
+  var editBtn = document.createElement("button");
+  editBtn.type = "button";
+  editBtn.innerHTML = '<i class="fa fa-edit"></i>';
+  editBtn.classList.add("azrEditBtn");
+  editBtn.classList.add("btn");
+  editBtn.classList.add("btn-default");
+  editBtn.addEventListener("click", function () {
+    adminAnrechnung.editRow(cell);
+  });
 
-    // Create edit button
-    var editBtn = document.createElement("button");
-    editBtn.type = "button";
-    editBtn.innerHTML = "<i class=\"fa fa-edit\"></i>";
-    editBtn.classList.add("azrEditBtn");
-    editBtn.classList.add("btn");
-    editBtn.classList.add("btn-default");
-    editBtn.addEventListener("click", function(){
-        adminAnrechnung.editRow(cell);
-    });
+  // Create delete button
+  var delBtn = document.createElement("button");
+  delBtn.type = "button";
+  delBtn.innerHTML = '<i class="fa fa-times"></i>';
+  delBtn.classList.add("azrDeleteBtn");
+  delBtn.classList.add("btn");
+  delBtn.classList.add("btn-default");
+  delBtn.style.marginLeft = "5px";
+  delBtn.addEventListener("click", function () {
+    adminAnrechnung.deleteRow(cell);
+  });
 
+  // Add buttons to cell
+  var buttonHolder = document.createElement("span");
+  buttonHolder.appendChild(editBtn);
+  buttonHolder.appendChild(delBtn);
 
-
-    // Create delete button
-    var delBtn= document.createElement("button");
-    delBtn.type = "button";
-    delBtn.innerHTML = "<i class=\"fa fa-times\"></i>";
-    delBtn.classList.add("azrDeleteBtn");
-    delBtn.classList.add("btn");
-    delBtn.classList.add("btn-default");
-    delBtn.style.marginLeft = '5px';
-    delBtn.addEventListener("click", function(){
-        adminAnrechnung.deleteRow(cell);
-    });
-
-    // Add buttons to cell
-    var buttonHolder = document.createElement("span");
-    buttonHolder.appendChild(editBtn);
-    buttonHolder.appendChild(delBtn);
-
-    return buttonHolder;
-}
+  return buttonHolder;
+};
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 $(function () {
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    // tablutBuilt has to be attached as a callback the the tabulator in tabulator5
+    func_tableBuilt($("#tableWidgetTabulator"));
+  });
 
-    // Empty Modal fields on 'Anrechnungszeitraum hinzufuegen'
-    $(document).on('click', '.azrOpenModal', function(){
+  // Empty Modal fields on 'Anrechnungszeitraum hinzufuegen'
+  $(document).on("click", ".azrOpenModal", function () {
+    let defaultStudiensemester_kurzbz = $(
+      ".modal-body #defaultStudiensemester_kurzbz"
+    ).val();
 
-            let defaultStudiensemester_kurzbz = $('.modal-body #defaultStudiensemester_kurzbz').val();
+    $(".modal-header #azrModalLabel").text(
+      FHC_PhrasesLib.t("anrechnung", "anrechnungszeitraumHinzufuegen")
+    );
 
-            $('.modal-header #azrModalLabel').text(FHC_PhrasesLib.t("anrechnung", "anrechnungszeitraumHinzufuegen"));
+    $(".modal-body #anrechnungszeitraum_id").val("");
+    $(".modal-body #studiensemester")
+      .val(defaultStudiensemester_kurzbz)
+      .change();
+    $(".modal-body #azrStart").val("");
+    $(".modal-body #azrEnde").val("");
+  });
 
-            $('.modal-body #anrechnungszeitraum_id').val('');
-            $('.modal-body #studiensemester').val(defaultStudiensemester_kurzbz).change();
-            $('.modal-body #azrStart').val('');
-            $('.modal-body #azrEnde').val('');
+  // Insert Anrechnungszeitraum
+  $(document).on("click", "#azrInsertBtn", function () {
+    var studiensemester_kurzbz = $(".modal-body #studiensemester").val();
+    var anrechnungstart = $(".modal-body #azrStart").val();
+    var anrechnungende = $(".modal-body #azrEnde").val();
 
-    });
+    if (isUpdate) {
+      // read the id of the anrechungszeitraum
+      var anrechnungszeitraum_id = $(
+        ".modal-body #anrechnungszeitraum_id"
+      ).val();
 
-    // Insert Anrechnungszeitraum
-    $(document).on('click', '#azrInsertBtn', function(){
-        var studiensemester_kurzbz = $('.modal-body #studiensemester').val();
-        var anrechnungstart = $('.modal-body #azrStart').val();
-        var anrechnungende = $('.modal-body #azrEnde').val();
-
-        // Insert Anrechnungszeitraum
-        adminAnrechnung.insertAzr(studiensemester_kurzbz, anrechnungstart, anrechnungende);
-    });
-
-})
+      // Update Anrechnungszeitraum
+      adminAnrechnung.updateAzr(
+        anrechnungszeitraum_id,
+        studiensemester_kurzbz,
+        anrechnungstart,
+        anrechnungende
+      );
+    } else {
+      // Insert Anrechnungszeitraum
+      adminAnrechnung.insertAzr(
+        studiensemester_kurzbz,
+        anrechnungstart,
+        anrechnungende
+      );
+    }
+  });
+});
 
 var adminAnrechnung = {
-    insertAzr: function(studiensemester_kurzbz, anrechnungstart, anrechnungende){
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/save",
-            {
-                studiensemester_kurzbz: studiensemester_kurzbz,
-                anrechnungstart: anrechnungstart,
-                anrechnungende: anrechnungende
-            },
-            {
-                successCallback: function (data, textStatus, jqXHR)
+  insertAzr: function (
+    studiensemester_kurzbz,
+    anrechnungstart,
+    anrechnungende
+  ) {
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/save",
+      {
+        studiensemester_kurzbz: studiensemester_kurzbz,
+        anrechnungstart: anrechnungstart,
+        anrechnungende: anrechnungende,
+      },
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (FHC_AjaxClient.isError(data)) {
+            FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
+          }
+
+          if (FHC_AjaxClient.hasData(data)) {
+            data = FHC_AjaxClient.getData(data);
+
+            // Update row
+            $("#tableWidgetTabulator").tabulator(
+              "addData",
+              [
                 {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
-                    }
-
-                    if (FHC_AjaxClient.hasData(data))
-                    {
-                        data = FHC_AjaxClient.getData(data);
-
-                        // Update row
-                        $('#tableWidgetTabulator').tabulator('addData', [{
-                            anrechnungszeitraum_id: data.anrechnungszeitraum_id,
-                            studiensemester_kurzbz: studiensemester_kurzbz,
-                            anrechnungstart: anrechnungstart,
-                            anrechnungende: anrechnungende
-                        }], true); // true to add row on top
-
-                        // Close Modal
-                        $('#azrModal').modal('hide');
-
-                        // Success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "gespeichert"));
-                    }
+                  anrechnungszeitraum_id: data.anrechnungszeitraum_id,
+                  studiensemester_kurzbz: studiensemester_kurzbz,
+                  anrechnungstart: anrechnungstart,
+                  anrechnungende: anrechnungende,
                 },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
-        );
-    },
-    editRow: function (cell){
-        // Open Modal
-        $('#azrModal').modal('show');
+              ],
+              true
+            ); // true to add row on top
 
-        let row = cell.getRow();
-        var anrechnungszeitraum_id = row.getData().anrechnungszeitraum_id;
-        var studiensemester_kurzbz = row.getData().studiensemester_kurzbz;
-        var anrechnungstart = row.getData().anrechnungstart;
-        var anrechnungende = row.getData().anrechnungende;
+            // Close Modal
+            $("#azrModal").modal("hide");
 
-        $('.modal-header #azrModalLabel').text('Anrechnungszeitraum bearbeiten');
+            // Success message
+            FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "gespeichert"));
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+        },
+      }
+    );
+  },
+  editRow: function (cell) {
+    // Open Modal
+    $("#azrModal").modal("show");
 
-        $('.modal-body #anrechnungszeitraum_id').val(anrechnungszeitraum_id);
-        $('.modal-body #studiensemester').val(studiensemester_kurzbz).change();
-        $('.modal-body #azrStart').val(anrechnungstart);
-        $('.modal-body #azrEnde').val(anrechnungende);
+    // set global condition to true, so that the modal knows whether to display an insert or edit button
+    isUpdate = true;
 
-    },
-    updateAzr: function (anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende) {
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/edit",
-            {
+    let row = cell.getRow();
+    var anrechnungszeitraum_id = row.getData().anrechnungszeitraum_id;
+    var studiensemester_kurzbz = row.getData().studiensemester_kurzbz;
+    var anrechnungstart = row.getData().anrechnungstart;
+    var anrechnungende = row.getData().anrechnungende;
+
+    $(".modal-header #azrModalLabel").text("Anrechnungszeitraum bearbeiten");
+
+    $(".modal-body #anrechnungszeitraum_id").val(anrechnungszeitraum_id);
+    $(".modal-body #studiensemester").val(studiensemester_kurzbz).change();
+    $(".modal-body #azrStart").val(anrechnungstart);
+    $(".modal-body #azrEnde").val(anrechnungende);
+  },
+  updateAzr: function (
+    anrechnungszeitraum_id,
+    studiensemester_kurzbz,
+    anrechnungstart,
+    anrechnungende
+  ) {
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/edit",
+      {
+        anrechnungszeitraum_id: anrechnungszeitraum_id,
+        studiensemester_kurzbz: studiensemester_kurzbz,
+        anrechnungstart: anrechnungstart,
+        anrechnungende: anrechnungende,
+      },
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (FHC_AjaxClient.isError(data)) {
+            FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
+          }
+
+          if (FHC_AjaxClient.hasData(data)) {
+            // Update row
+            $("#tableWidgetTabulator").tabulator("updateData", [
+              {
                 anrechnungszeitraum_id: anrechnungszeitraum_id,
                 studiensemester_kurzbz: studiensemester_kurzbz,
                 anrechnungstart: anrechnungstart,
-                anrechnungende: anrechnungende
-            },
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
-                    }
+                anrechnungende: anrechnungende,
+              },
+            ]);
 
-                    if (FHC_AjaxClient.hasData(data))
-                    {
-                        // Update row
-                        $('#tableWidgetTabulator').tabulator('updateData', [{
-                            anrechnungszeitraum_id: anrechnungszeitraum_id,
-                            studiensemester_kurzbz: studiensemester_kurzbz,
-                            anrechnungstart: anrechnungstart,
-                            anrechnungende: anrechnungende
-                        }]);
+            // Close Modal
+            $("#azrModal").modal("hide");
 
-                        // Close Modal
-                        $('#azrModal').modal('hide');
+            // Success message
+            FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "gespeichert"));
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+        },
+      }
+    );
+  },
+  deleteAzr: function (anrechnungszeitraum_id) {
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/delete",
+      {
+        anrechnungszeitraum_id: anrechnungszeitraum_id,
+      },
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (FHC_AjaxClient.isError(data)) {
+            FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
+          }
 
-                        // Success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "gespeichert"));
+          if (FHC_AjaxClient.hasData(data)) {
+            let row = $("#tableWidgetTabulator").tabulator(
+              "getRow",
+              anrechnungszeitraum_id
+            );
+            row.delete(anrechnungszeitraum_id);
 
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
-        );
-    },
-    deleteAzr: function(anrechnungszeitraum_id){
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/delete",
-            {
-                anrechnungszeitraum_id: anrechnungszeitraum_id
-            },
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        FHC_DialogLib.alertWarning(FHC_AjaxClient.getError(data));
-                    }
-
-                    if (FHC_AjaxClient.hasData(data))
-                    {
-                        let row = $('#tableWidgetTabulator').tabulator('getRow', anrechnungszeitraum_id);
-                        row.delete(anrechnungszeitraum_id);
-
-                        // Success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "geloescht"));
-
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
-        );
-    },
-    deleteRow: function (cell){
-        if(!confirm(FHC_PhrasesLib.t("ui", "frageSicherLoeschen")))
-        {
-            return;
-        }
-
-        // Delete Anrechnungszeitraum
-        adminAnrechnung.deleteAzr(cell.getRow().getData().anrechnungszeitraum_id);
+            // Success message
+            FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "geloescht"));
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+        },
+      }
+    );
+  },
+  deleteRow: function (cell) {
+    if (!confirm(FHC_PhrasesLib.t("ui", "frageSicherLoeschen"))) {
+      return;
     }
-}
\ No newline at end of file
+
+    // Delete Anrechnungszeitraum
+    adminAnrechnung.deleteAzr(cell.getRow().getData().anrechnungszeitraum_id);
+  },
+};
diff --git a/public/js/lehre/anrechnung/approveAnrechnungDetail.js b/public/js/lehre/anrechnung/approveAnrechnungDetail.js
index 14d31f800..ef41f45fb 100644
--- a/public/js/lehre/anrechnung/approveAnrechnungDetail.js
+++ b/public/js/lehre/anrechnung/approveAnrechnungDetail.js
@@ -393,16 +393,16 @@ var approveAnrechnungDetail = {
 
         switch (status_kurzbz) {
             case ANRECHNUNGSTATUS_APPROVED:
-                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-success');
+                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-success-subtle');
                 break;
             case ANRECHNUNGSTATUS_REJECTED:
-                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-danger');
+                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-danger-subtle');
                 break;
             case '':
-                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-info');
+                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-info-subtle');
                 break;
             default:
-                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-warning');
+                $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-warning-subtle');
         }
     },
     setEmpfehlungstext: function () {
@@ -424,7 +424,7 @@ var approveAnrechnungDetail = {
         }
     },
     initTooltips: function (){
-        $('[data-toggle="tooltip"]').tooltip({
+        $('[data-bs-toggle="tooltip"]').tooltip({
                 delay: { "show": 200, "hide": 200 },
                 html: true
         }
@@ -498,14 +498,14 @@ var approveAnrechnungDetail = {
         $('#approveAnrechnungDetail-request-recommendation').prop('disabled', true);
         $('#approveAnrechnungDetail-approve-anrechnung-ask').prop('disabled', true);
         $('#approveAnrechnungDetail-reject-anrechnung-ask').prop('disabled', true);
-        $('#approveAnrechnungDetail-withdraw-request-recommedation').removeClass('hidden');
+        $('#approveAnrechnungDetail-withdraw-request-recommedation').removeClass('visually-hidden');
     },
     formatGenehmigungIsPositiv: function(abgeschlossenAm, abgeschlossenVon, statusKurzbz, statusBezeichnung){
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').addClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').addClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').removeClass('hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').addClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').addClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').removeClass('visually-hidden');
         $('#approveAnrechnungDetail-status_kurzbz').text(statusBezeichnung);
-        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('alert-warning').addClass('alert-success');
+        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('bg-warning-subtle').addClass('bg-success-subtle');
         $('#approveAnrechnungDetail-status_kurzbz').data('status_kurzbz', statusKurzbz);
         $('#approveAnrechnungDetail-abgeschlossenAm').text(abgeschlossenAm);
         $('#approveAnrechnungDetail-abgeschlossenVon').text(abgeschlossenVon);
@@ -514,14 +514,14 @@ var approveAnrechnungDetail = {
         $('#approveAnrechnungDetail-reject-anrechnung-ask').prop('disabled', true);
 
         // Show button to withdraw approval
-        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').removeClass('hidden');
+        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').removeClass('visually-hidden');
     },
     formatGenehmigungIsNegativ: function(abgeschlossenAm, abgeschlossenVon, statusKurzbz, statusBezeichnung, begruendung){
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').addClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').addClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').removeClass('hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').addClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').addClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').removeClass('visually-hidden');
         $('#approveAnrechnungDetail-status_kurzbz').text(statusBezeichnung);
-        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('alert-warning').addClass('alert-danger');
+        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('bg-warning-subtle').addClass('bg-danger-subtle');
         $('#approveAnrechnungDetail-status_kurzbz').data('status_kurzbz', statusKurzbz);
         $('#approveAnrechnungDetail-abgeschlossenAm').text(abgeschlossenAm);
         $('#approveAnrechnungDetail-abgeschlossenVon').text(abgeschlossenVon);
@@ -531,18 +531,18 @@ var approveAnrechnungDetail = {
         $('#approveAnrechnungDetail-reject-anrechnung-ask').prop('disabled', true);
 
         // Show button to withdraw approval
-        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').removeClass('hidden');
+        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').removeClass('visually-hidden');
     },
     formatGenehmigungIsWithdrawed: function (statusBezeichnung){
         let empfehlung = $('#approveAnrechnungDetail-empfehlung').data('empfehlung'); // null / false / true
 
         $('#approveAnrechnungDetail-status_kurzbz').text(statusBezeichnung);
-        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('alert-danger').removeClass('alert-success');
-        $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-warning');
+        $('#approveAnrechnungDetail-status_kurzbz').closest('div').removeClass('bg-danger-subtle').removeClass('bg-success-subtle');
+        $('#approveAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-warning-subtle');
 
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').removeClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').addClass('hidden');
-        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').addClass('hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNull').removeClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsPositiv').addClass('visually-hidden');
+        $('#approveAnrechnungDetail-genehmigungDetail-genehmigungIsNegativ').addClass('visually-hidden');
 
         $('#approveAnrechnungDetail-abgeschlossenAm').text('-');
         $('#approveAnrechnungDetail-abgeschlossenVon').text('-');
@@ -555,12 +555,12 @@ var approveAnrechnungDetail = {
         $('#approveAnrechnungDetail-approve-anrechnung-ask').prop('disabled', false);
         $('#approveAnrechnungDetail-reject-anrechnung-ask').prop('disabled', false);
         // Hide button to withdraw approval
-        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').addClass('hidden');
+        $('#approveAnrechnungDetail-withdraw-anrechnung-approvement').addClass('visually-hidden');
     },
     formatEmpfehlungIsWithdrawed: function (statusBezeichnung){
         $('#approveAnrechnungDetail-status_kurzbz').text(statusBezeichnung);
 
-        $('#approveAnrechnungDetail-empfehlungDetail-empfehlungIsNull').removeClass('hidden');
+        $('#approveAnrechnungDetail-empfehlungDetail-empfehlungIsNull').removeClass('visually-hidden');
         $('#approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAm').html('-');
         $('#approveAnrechnungDetail-empfehlungDetail-empfehlungsanfrageAn').html('-');
 
@@ -568,7 +568,7 @@ var approveAnrechnungDetail = {
         $('#approveAnrechnungDetail-approve-anrechnung-ask').prop('disabled', false);
         $('#approveAnrechnungDetail-reject-anrechnung-ask').prop('disabled', false);
         // Hide button to withdraw approval
-        $('#approveAnrechnungDetail-withdraw-request-recommedation').addClass('hidden');
+        $('#approveAnrechnungDetail-withdraw-request-recommedation').addClass('visually-hidden');
     },
     sumUpEcts: function(){
         var ects = parseFloat($('#ects').text());
@@ -615,8 +615,9 @@ var approveAnrechnungDetail = {
 
          $('#sumEctsTotal').text(sumEctsSchulisch + sumEctsBeruflich - ects);
     },
+    
     alertIfMaxEctsExceeded: function(){
-        var begruendung_id = $('#begruendung_id').data('begruendung_id');
+    
         if (begruendung_id == 5)
         {
             return;
@@ -626,20 +627,19 @@ var approveAnrechnungDetail = {
             (begruendung_id != 4 && (parseFloat($('#ects').text()) + parseFloat($('#sumEctsSchulisch').text()))) > 60 ||
             (begruendung_id == 4 && (parseFloat($('#ects').text()) + parseFloat($('#sumEctsBeruflich').text()))) > 60 ||
             (parseFloat($('#ects').text()) + parseFloat($('#sumEctsSchulisch').text()) + parseFloat($('#sumEctsBeruflich').text())) > 90
-        )
-        {
+        ){
+       
             $('#sumEctsMsg')
-                .html("<br><b>ACHTUNG! Bei Anrechnung von LV: Überschreitung der Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz</b><i class=\"fa fa-lg fa-info-circle\"></i></br>")
-                .addClass('bg-danger text-danger')
+                .html("<span class='flex-fill fw-bold'>Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz ist überschritten. </span><i class='mx-4 fa fa-lg fa-info-circle'></i>")
+                .addClass('bg-danger-subtle')
                 .tooltip({
                     title: FHC_PhrasesLib.t("anrechnung", "anrechnungEctsTooltipTextBeiUeberschreitung"),
                     placement: 'right',
                     html: true
-                });
-        }
-        else
+            });
+        }else
         {
             $('#sumEctsMsg').html('').css('border', 'none');
         }
-    }
+    },
 }
\ No newline at end of file
diff --git a/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js b/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
index a2bc5daff..e89d1a9ee 100644
--- a/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
+++ b/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
@@ -1,16 +1,18 @@
-const BASE_URL = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+const BASE_URL =
+  FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 const CALLED_PATH = FHC_JS_DATA_STORAGE_OBJECT.called_path;
-const CONTROLLER_URL = BASE_URL + '/' + CALLED_PATH;
-const APPROVE_ANRECHNUNG_DETAIL_URI = "lehre/anrechnung/ApproveAnrechnungDetail";
+const CONTROLLER_URL = BASE_URL + "/" + CALLED_PATH;
+const APPROVE_ANRECHNUNG_DETAIL_URI =
+  "lehre/anrechnung/ApproveAnrechnungDetail";
 
-const ANRECHNUNGSTATUS_PROGRESSED_BY_STGL = 'inProgressDP';
-const ANRECHNUNGSTATUS_PROGRESSED_BY_KF = 'inProgressKF';
-const ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR = 'inProgressLektor';
-const ANRECHNUNGSTATUS_APPROVED = 'approved';
-const ANRECHNUNGSTATUS_REJECTED = 'rejected';
+const ANRECHNUNGSTATUS_PROGRESSED_BY_STGL = "inProgressDP";
+const ANRECHNUNGSTATUS_PROGRESSED_BY_KF = "inProgressKF";
+const ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR = "inProgressLektor";
+const ANRECHNUNGSTATUS_APPROVED = "approved";
+const ANRECHNUNGSTATUS_REJECTED = "rejected";
 
 const COLOR_LIGHTGREY = "#f5f5f5";
-const COLOR_DANGER = '#f2dede';
+const COLOR_DANGER = "#f2dede";
 
 var tabulator = null; // Set in tableBuilt function.
 
@@ -23,207 +25,248 @@ var selectedPrestudentWithAccumulatedLvEcts = [];
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var mut_formatStringDate = function(value, data, type, params, component) {
-    if (value != null)
-    {
-        var d = new Date(value);
-        return ("0" + (d.getDate())).slice(-2)  + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear();
-    }
-}
+var mut_formatStringDate = function (value, data, type, params, component) {
+  if (value != null) {
+    var d = new Date(value);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // TABULATOR FUNCTIONS
 // ---------------------------------------------------------------------------------------------------------------------
 // Returns relative height (depending on screen size)
-function func_height(table){
-    return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Filters boolean values
-function hf_filterTrueFalse(headerValue, rowValue){
+function hf_filterTrueFalse(headerValue, rowValue) {
+  if ("ja".startsWith(headerValue) || "yes".startsWith(headerValue)) {
+    return rowValue == "true";
+  }
 
-    if ('ja'.startsWith(headerValue) || 'yes'.startsWith(headerValue))
-    {
-        return rowValue == 'true';
-    }
+  if ("nein".startsWith(headerValue) || "no".startsWith(headerValue)) {
+    return rowValue == "false";
+  }
 
-    if ('nein'.startsWith(headerValue) || 'no'.startsWith(headerValue))
-    {
-        return rowValue == 'false';
-    }
-
-    if (headerValue = '-')
-    {
-        return rowValue == null;
-    }
+  if ((headerValue = "-")) {
+    return rowValue == null;
+  }
 }
 
 // Filters schreibberechtigt boolean values
-function hf_schreibberechtigt(headerValue, rowValue){
-
-    return rowValue == headerValue.toString();
+function hf_schreibberechtigt(headerValue, rowValue) {
+  return rowValue == headerValue.toString();
 }
 
 // Adds column details
 // Sets focus on filterbutton, if table starts with stored filter.
 function func_tableBuilt(table) {
+  // Store table in global var
+  tabulator = table;
+  table.tabulator(
+    "addColumn",
+    {
+      title: "Details",
+      field: "details",
+      hozAlign: "center",
+      width: 100,
+      formatter: "link",
+      formatterParams: {
+        label: "Details",
+        url: function (cell) {
+          return (
+            BASE_URL +
+            "/" +
+            APPROVE_ANRECHNUNG_DETAIL_URI +
+            "?anrechnung_id=" +
+            cell.getData().anrechnung_id
+          );
+        },
+        target: "_blank",
+      },
+    },
+    true
+  ); // place column on the very left
 
-    // Store table in global var
-    tabulator = table;
+  // Set focus on filterbutton
 
-    table.addColumn(
-        {
-            title: "Details",
-            field: 'details',
-            align: "center",
-            width: 100,
-            formatter: "link",
-            formatterParams:{
-                label:"Details",
-                url:function(cell){
-                    return  BASE_URL + "/" + APPROVE_ANRECHNUNG_DETAIL_URI + "?anrechnung_id=" + cell.getData().anrechnung_id
-                },
-                target:"_blank"
-            }
-        }, true  // place column on the very left
-    );
+  let filters = table.find("#tableWidgetTabulator").tabulator("getFilters");
+  if (filters.length > 0) {
+    approveAnrechnung.focusFilterbuttonIfTableStartsWithStoredFilter(filters);
+  }
 
-    // Set focus on filterbutton
-    let filters = table.getFilters();
-    if (filters.length > 0){
-        approveAnrechnung.focusFilterbuttonIfTableStartsWithStoredFilter(filters);
-    }
+  // fully redrawing the table after adding the Details column
+  table.tabulator("redraw", true);
 }
 
 /**
  * Formats column ECTS (LV + Bisher).
  */
-var format_ectsSumBisherUndNeu = function(cell, formatterParams, onRendered){
-    let row = cell.getRow();
-    let rowData = row.getData();
+var format_ectsSumBisherUndNeu = function (cell, formatterParams, onRendered) {
+  let row = cell.getRow();
+  let rowData = row.getData();
 
-    let begruendung_id = (rowData.begruendung_id);
-    let ectsSumBisherUndNeuTotal = (rowData.ectsSumSchulisch + rowData.ectsSumBeruflich);
-    let ectsSumBisherUndNeuSchulisch = rowData.ectsSumSchulisch;
-    let ectsSumBisherUndNeuBeruflich = rowData.ectsSumBeruflich;
+  let begruendung_id = rowData.begruendung_id;
+  let ectsSumBisherUndNeuTotal =
+    rowData.ectsSumSchulisch + rowData.ectsSumBeruflich;
+  let ectsSumBisherUndNeuSchulisch = rowData.ectsSumSchulisch;
+  let ectsSumBisherUndNeuBeruflich = rowData.ectsSumBeruflich;
 
-    // If exists, add accumulated LV ECTS to bisherige ECTS
-    if (selectedPrestudentWithAccumulatedLvEcts.length > 0)
-    {
-        let selectedPrestudent = selectedPrestudentWithAccumulatedLvEcts.find(x => x.prestudent_id === rowData.prestudent_id);
+  // If exists, add accumulated LV ECTS to bisherige ECTS
+  if (selectedPrestudentWithAccumulatedLvEcts.length > 0) {
+    let selectedPrestudent = selectedPrestudentWithAccumulatedLvEcts.find(
+      (x) => x.prestudent_id === rowData.prestudent_id
+    );
 
-        if (selectedPrestudent != undefined)
-        {
-            ectsSumBisherUndNeuTotal = (rowData.ectsSumSchulisch + rowData.ectsSumBeruflich) + selectedPrestudent.ectsSumAnzurechnendeLvsSchulisch + selectedPrestudent.ectsSumAnzurechnendeLvsBeruflich;
-            ectsSumBisherUndNeuSchulisch = rowData.ectsSumSchulisch + selectedPrestudent.ectsSumAnzurechnendeLvsSchulisch;
-            ectsSumBisherUndNeuBeruflich = rowData.ectsSumBeruflich + selectedPrestudent.ectsSumAnzurechnendeLvsBeruflich;
-        }
-
-        // Color column if maximum ECTS exceeded
-        if (begruendung_id != 5 && row.isSelected())
-        {
-
-            if (
-                (ectsSumBisherUndNeuSchulisch + ectsSumBisherUndNeuBeruflich) > 90 ||
-                ectsSumBisherUndNeuSchulisch > 60 ||
-                ectsSumBisherUndNeuBeruflich > 60
-            )
-            {
-                cell.getElement().style["background-color"] = COLOR_DANGER;
-            }
-        }
-        else
-        {
-            cell.getElement().style.removeProperty('background-color');
-        }
+    if (selectedPrestudent != undefined) {
+      ectsSumBisherUndNeuTotal =
+        rowData.ectsSumSchulisch +
+        rowData.ectsSumBeruflich +
+        selectedPrestudent.ectsSumAnzurechnendeLvsSchulisch +
+        selectedPrestudent.ectsSumAnzurechnendeLvsBeruflich;
+      ectsSumBisherUndNeuSchulisch =
+        rowData.ectsSumSchulisch +
+        selectedPrestudent.ectsSumAnzurechnendeLvsSchulisch;
+      ectsSumBisherUndNeuBeruflich =
+        rowData.ectsSumBeruflich +
+        selectedPrestudent.ectsSumAnzurechnendeLvsBeruflich;
     }
 
-    // If max ECTS is exceeded, format font color / weight
-    ectsSumBisherUndNeuTotal = (ectsSumBisherUndNeuTotal > 90) ? "<span class='text-danger'><b><u>" + ectsSumBisherUndNeuTotal + "</u></b></span>" :  ectsSumBisherUndNeuTotal;
-    ectsSumBisherUndNeuSchulisch = (ectsSumBisherUndNeuSchulisch > 60) ? "<span class='text-danger'><b><u>" + ectsSumBisherUndNeuSchulisch + "</u></b></span>" : ectsSumBisherUndNeuSchulisch;
-    ectsSumBisherUndNeuBeruflich = (ectsSumBisherUndNeuBeruflich > 60) ? "<span class='text-danger'><b><u>" + ectsSumBisherUndNeuBeruflich + "</u></b></span>" : ectsSumBisherUndNeuBeruflich;
-
-    return "T: " + ectsSumBisherUndNeuTotal + " [ S: " + ectsSumBisherUndNeuSchulisch + " | B: " + ectsSumBisherUndNeuBeruflich + " ]";
-}
-
-// Formats the rows
-function func_rowFormatter(row){
-    let status_kurzbz = row.getData().status_kurzbz;
-
-    // If status is anything else then 'Bearbeitet von STGL-Leitung'
-    if (status_kurzbz != ANRECHNUNGSTATUS_PROGRESSED_BY_STGL)
-    {
-        // Disable new selection of updated rows
-        row.getElement().style["pointerEvents"] = "none";
-
-        // ...but leave url links selectable
-        row.getCell('dokument_bezeichnung').getElement().firstChild.style["pointerEvents"] = "auto";
-        row.getCell('details').getElement().firstChild.style["pointerEvents"] = "auto";
-
-        // Color background grey
-        row.getElement().style["background-color"] = COLOR_LIGHTGREY;   // default
+    // Color column if maximum ECTS exceeded
+    if (begruendung_id != 5 && row.isSelected()) {
+      if (
+        ectsSumBisherUndNeuSchulisch + ectsSumBisherUndNeuBeruflich > 90 ||
+        ectsSumBisherUndNeuSchulisch > 60 ||
+        ectsSumBisherUndNeuBeruflich > 60
+      ) {
+        cell.getElement().style["background-color"] = COLOR_DANGER;
+      }
+    } else {
+      cell.getElement().style.removeProperty("background-color");
     }
-}
+  }
+
+  // If max ECTS is exceeded, format font color / weight
+  ectsSumBisherUndNeuTotal =
+    ectsSumBisherUndNeuTotal > 90
+      ? "<span class='text-danger'><b><u>" +
+        ectsSumBisherUndNeuTotal +
+        "</u></b></span>"
+      : ectsSumBisherUndNeuTotal;
+  ectsSumBisherUndNeuSchulisch =
+    ectsSumBisherUndNeuSchulisch > 60
+      ? "<span class='text-danger'><b><u>" +
+        ectsSumBisherUndNeuSchulisch +
+        "</u></b></span>"
+      : ectsSumBisherUndNeuSchulisch;
+  ectsSumBisherUndNeuBeruflich =
+    ectsSumBisherUndNeuBeruflich > 60
+      ? "<span class='text-danger'><b><u>" +
+        ectsSumBisherUndNeuBeruflich +
+        "</u></b></span>"
+      : ectsSumBisherUndNeuBeruflich;
+
+  return (
+    "T: " +
+    ectsSumBisherUndNeuTotal +
+    " [ S: " +
+    ectsSumBisherUndNeuSchulisch +
+    " | B: " +
+    ectsSumBisherUndNeuBeruflich +
+    " ]"
+  );
+};
 
 // Formats row selectable/unselectable
-function func_selectableCheck(row){
-    let status_kurzbz = row.getData().status_kurzbz;
+function func_selectableCheck(row) {
+  let status_kurzbz = row.getData().status_kurzbz;
 
-    return (
-        status_kurzbz != ANRECHNUNGSTATUS_APPROVED &&
-        status_kurzbz != ANRECHNUNGSTATUS_REJECTED &&
-        status_kurzbz != ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR
-    );
+  return (
+    status_kurzbz != ANRECHNUNGSTATUS_APPROVED &&
+    status_kurzbz != ANRECHNUNGSTATUS_REJECTED &&
+    status_kurzbz != ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR
+  );
+}
+
+function func_rowFormatter(row) {
+  const rowData = row.getData();
+
+  // add the tabulator-unselectable class to the row if its data property isSelectable is false
+  if (
+    rowData.isSelectable === false &&
+    !row.getElement().classList.contains("tabulator-unselectable")
+  ) {
+    row.getElement().classList.add("tabulator-unselectable");
+  }
+
+  // remove the tabulator-selectable class if the data property isSelectable is false and it contains the class
+  if (
+    rowData.isSelectable === false &&
+    row.getElement().classList.contains("tabulator-selectable")
+  ) {
+    row.getElement().classList.remove("tabulator-selectable");
+  }
 }
 
 // Calculate dynamically sum of all LV ECTS by Student and display, when maximum ECTS are exceeded.
 // data = selected data, rows = selected rows
-function func_rowSelectionChanged(data, rows){
+function func_rowSelectionChanged(data, rows, tabulatorInstance) {
+  if (tabulator != null) {
+    // Sum up over all anzurechnenden LV-ECTS by Prestudent
+    selectedPrestudentWithAccumulatedLvEcts =
+      approveAnrechnung.getSumLvEctsByPreStudent(data);
 
-    if (tabulator != null)
-    {
-        // Sum up over all anzurechnenden LV-ECTS by Prestudent
-        selectedPrestudentWithAccumulatedLvEcts = approveAnrechnung.getSumLvEctsByPreStudent(data);
+    // Loop through all active rows
 
-        // Loop through all active rows
-        var rowManager = tabulator.rowManager;
-        for (var i = 0; i < rowManager.activeRows.length; i++) {
+    var rowManager = tabulatorInstance.rowManager;
 
-            // Reinitialize row -> triggers formatters.
-            rowManager.activeRows[i].reinitialize();
-        }
-
-        // Show number of selected rows.
-        approveAnrechnung.showNumberSelectedRows(rows);
+    for (var i = 0; i < rowManager.activeRows.length; i++) {
+      // Reinitialize row -> triggers formatters.
+      rowManager.activeRows[i].reinitialize();
     }
+
+    // Show number of selected rows.
+    approveAnrechnung.showNumberSelectedRows(rows);
+  }
 }
 
 // Returns tooltip
-function func_tooltips(cell) {
-    // Return tooltip if row is unselectable
-    if (!func_selectableCheck(cell.getRow())){
-        return FHC_PhrasesLib.t("ui", "nichtSelektierbarAufgrundVon") + 'Status';
-    }
+function func_tooltips(e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+  // Return tooltip if row is unselectable
+  if (!func_selectableCheck(cell.getRow())) {
+    return FHC_PhrasesLib.t("ui", "nichtSelektierbarAufgrundVon") + "Status";
+  }
 }
 
 // Formats empfehlung_anrechnung
-var format_empfehlung_anrechnung = function(cell, formatterParams){
-    return (cell.getValue() == null)
-        ? '-'
-        : (cell.getValue() ==  'true')
-            ? FHC_PhrasesLib.t("ui", "ja")
-            : FHC_PhrasesLib.t("ui", "nein");
-}
+var format_empfehlung_anrechnung = function (cell, formatterParams) {
+  return cell.getValue() == null
+    ? "-"
+    : cell.getValue() == "true"
+    ? FHC_PhrasesLib.t("ui", "ja")
+    : FHC_PhrasesLib.t("ui", "nein");
+};
 
 /**
  * Returns formatter params for field dokument_bezeichnung (= Spalte Nachweisdokumente)
  * NOTE: Returning a formatter param object fixes the problem, that tabulator did not know the url after refreshing the page.
  */
-function paramLookup_dokBez(cell){
-    return {
-        labelField: 'dokument_bezeichnung',
-        url: CONTROLLER_URL + '/download?dms_id=' + cell.getData().dms_id,
-        target: '_blank'
-    }
+function paramLookup_dokBez(cell) {
+  return {
+    labelField: "dokument_bezeichnung",
+    url: CONTROLLER_URL + "/download?dms_id=" + cell.getData().dms_id,
+    target: "_blank",
+  };
 }
 
 /*
@@ -231,554 +274,583 @@ function paramLookup_dokBez(cell){
  * Select all (filtered) rows that are progressed by stg leiter.
  * (Ignore rows that are approved, rejected or in request for recommendation)
  */
-function tableWidgetHook_selectAllButton(tableWidgetDiv){
-    var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
-        .filter(row =>
-            row.getData().status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_STGL
-        );
+function tableWidgetHook_selectAllButton(tableWidgetDiv) {
+  var resultRows = tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getRows", true)
+    .filter(
+      (row) =>
+        row.getData().status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_STGL
+    );
 
-    tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', resultRows);
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("selectRow", resultRows);
 }
 
+$(function () {
+  const genehmigung_panel = $("#approveAnrechnungUebersicht-genehmigung-panel");
+  const begruendung_panel = $("#approveAnrechnungUebersicht-begruendung-panel");
+  const hasReadOnlyAccess = $("#formApproveAnrechnungUebersicht").data(
+    "readonly"
+  );
+  const hasCreateAnrechnungAccess = $("#formApproveAnrechnungUebersicht").data(
+    "createaccess"
+  );
 
-$(function(){
+  // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    func_tableBuilt($("#tableWidgetTabulator"));
 
-    const genehmigung_panel = $('#approveAnrechnungUebersicht-genehmigung-panel');
-    const begruendung_panel = $('#approveAnrechnungUebersicht-begruendung-panel');
-    const hasReadOnlyAccess = $('#formApproveAnrechnungUebersicht').data('readonly');
-    const hasCreateAnrechnungAccess = $('#formApproveAnrechnungUebersicht').data('createaccess');
+    // event rowSelectionChanged needs to be attached as a callback to the tableBuilt event in tabulator5
+    $("#tableWidgetTabulator").tabulator(
+      "on",
+      "rowSelectionChanged",
+      (data, rows) => {
+        func_rowSelectionChanged(data, rows, tabulatorInstance);
+      }
+    );
+  });
 
-    // Pruefen ob Promise unterstuetzt wird
-    // Tabulator funktioniert nicht mit IE
-    var canPromise = !! window.Promise;
-    if(!canPromise)
-    {
-        alert("Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen");
-        window.location.href='about:blank';
+  // Pruefen ob Promise unterstuetzt wird
+  // Tabulator funktioniert nicht mit IE
+  var canPromise = !!window.Promise;
+  if (!canPromise) {
+    alert(
+      "Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen"
+    );
+    window.location.href = "about:blank";
+    return;
+  }
+
+  // Redraw table on resize to fit tabulators height to windows height
+  window.addEventListener("resize", function () {
+    $("#tableWidgetTabulator").tabulator("setHeight", $(window).height() * 0.5);
+    $("#tableWidgetTabulator").tabulator("redraw", true);
+  });
+
+  if (hasReadOnlyAccess) {
+    approveAnrechnung.disableEditElements();
+  }
+
+  if (!hasCreateAnrechnungAccess) {
+    approveAnrechnung.disableCreateAnrechnungButton();
+  }
+
+  // Show only rows that are in progress by STGL
+  $("#show-inProgressDP").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL,
+      },
+    ]);
+  });
+
+  // Show only rows that are in progress by lector
+  $("#show-inProgressLektor").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR,
+      },
+      { field: "empfehlung_anrechnung", type: "=", value: null },
+    ]);
+  });
+
+  // Show only rows with empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
+  $("#show-recommended").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL,
+      },
+      { field: "empfehlung_anrechnung", type: "=", value: "true" },
+    ]);
+  });
+
+  // Show only rows with nicht empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
+  $("#show-not-recommended").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL,
+      },
+      { field: "empfehlung_anrechnung", type: "=", value: "false" },
+    ]);
+  });
+
+  // Show only rows with genehmigte anrechnungen
+  $("#show-approved").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "status_kurzbz", type: "=", value: ANRECHNUNGSTATUS_APPROVED },
+    ]);
+  });
+
+  // Show only rows with abgelehnte anrechnungen
+  $("#show-rejected").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "status_kurzbz", type: "=", value: ANRECHNUNGSTATUS_REJECTED },
+    ]);
+  });
+
+  /**
+   * Show all rows: clear filter and blur button
+   * Bootstrap button remains in activated style, even when clicking various times.
+   * This function "resets" button style and clear all tabulators filter.
+   * NOTE: MUST be after all other filters
+   */
+  $(".btn-clearfilter").click(function () {
+    if ($(this).hasClass("active")) {
+      $("#tableWidgetTabulator").tabulator("clearFilter");
+      $(this).blur();
+    }
+  });
+
+  // Ask if Approve Anrechnungen
+  $("#approveAnrechnungUebersicht-approve-anrechnungen-ask").click(function () {
+    begruendung_panel.css("display", "none");
+
+    if (genehmigung_panel.is(":hidden")) {
+      // Show begruendung panel if is hidden
+      genehmigung_panel.slideDown(400, function () {
+        $("html, body").animate(
+          {
+            scrollTop: genehmigung_panel.offset().top, // Move genehmigung panel bottom up to be visible within window screen
+          },
+          400
+        );
+      });
+
+      return;
+    }
+  });
+
+  // Approve Anrechnungen
+  $("#approveAnrechnungUebersicht-approve-anrechnungen-confirm").click(
+    function (e) {
+      // Avoid bubbling click event to sibling break button
+      e.stopImmediatePropagation();
+
+      // Get selected rows data
+      let selected_data = $("#tableWidgetTabulator").tabulator(
+        "getSelectedData"
+      );
+
+      // Alert and exit if no anrechnung is selected
+      if (selected_data.length == 0) {
+        FHC_DialogLib.alertInfo(
+          FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen")
+        );
         return;
+      }
+
+      // Prepare data object for ajax call
+      let data = {
+        data: selected_data,
+      };
+
+      // Hide genehmigung panel again
+      genehmigung_panel.slideUp("slow");
+
+      FHC_AjaxClient.ajaxCallPost(
+        FHC_JS_DATA_STORAGE_OBJECT.called_path + "/approve",
+        data,
+        {
+          successCallback: function (data, textStatus, jqXHR) {
+            if (FHC_AjaxClient.isError(data)) {
+              // Print error message
+              FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
+            } else if (FHC_AjaxClient.hasData(data)) {
+              data = FHC_AjaxClient.getData(data);
+
+              var prestudenten = Object.keys(data.prestudenten);
+
+              // Find intersection of selected and in fact updated Anrechnungen (in case server did not approve all).
+              var updatedData = selected_data.filter((x) =>
+                prestudenten.some((prestudent) => x.prestudent_id == prestudent)
+              );
+
+              // Sum up over all anzurechnenden LV-ECTS by Prestudent
+              var sumLvEctsByPrestudent =
+                approveAnrechnung.getSumLvEctsByPreStudent(updatedData);
+
+              // Loop through Prestudenten
+              // key = Prestudent, value = Approved Anrechnungen of Prestudent
+              Object.entries(data.prestudenten).forEach(([key, value]) => {
+                var rowsToDeselect = [];
+
+                // Get accumulated sum of all LV ECTS
+                var sumLvEcts = sumLvEctsByPrestudent.find(
+                  (x) => x.prestudent_id == key
+                );
+
+                // Get ALL rows of that Prestudent
+                var rows = $("#tableWidgetTabulator").tabulator(
+                  "searchRows",
+                  "prestudent_id",
+                  "=",
+                  key
+                );
+
+                // Loop through the rows
+                rows.forEach((row) => {
+                  var updateData = {};
+
+                  // If Anrechnung was approved...
+                  if (
+                    value.findIndex(
+                      (anrechnung_id) =>
+                        row.getData().anrechnung_id == anrechnung_id
+                    ) !== -1
+                  ) {
+                    // ...update status
+                    updateData.status_kurzbz = data.status_kurzbz;
+                    updateData.status_bezeichnung = data.status_bezeichnung;
+
+                    // ...and store row to be deselected later on
+                    rowsToDeselect.push(row);
+                  }
+
+                  // Update 'Bisher schulische ECTS' and 'Bisher berufliche ECTS' with the Sum of new approved ECTS
+                  (updateData.ectsSumSchulisch =
+                    row.getData().ectsSumSchulisch +
+                    sumLvEcts.ectsSumAnzurechnendeLvsSchulisch),
+                    (updateData.ectsSumBeruflich =
+                      row.getData().ectsSumBeruflich +
+                      sumLvEcts.ectsSumAnzurechnendeLvsBeruflich);
+
+                  // set the isSelectable property to false, in order to add the tabulator-unselectable class in the rowFormatter function
+                  updateData.isSelectable = false;
+                  // Update row
+                  row.update(updateData);
+                  row.reformat();
+                });
+
+                // Deselect rows
+                $("#tableWidgetTabulator").tabulator(
+                  "deselectRow",
+                  rowsToDeselect
+                );
+              });
+
+              // Print success message
+              FHC_DialogLib.alertSuccess(
+                FHC_PhrasesLib.t("ui", "anrechnungenWurdenGenehmigt")
+              );
+            }
+          },
+          errorCallback: function (jqXHR, textStatus, errorThrown) {
+            FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+          },
+        }
+      );
+    }
+  );
+
+  // Ask if Reject Anrechnungen
+  $("#approveAnrechnungUebersicht-reject-anrechnungen-ask").click(function () {
+    genehmigung_panel.css("display", "none");
+
+    if (begruendung_panel.is(":hidden")) {
+      // Show begruendung panel if is hidden
+      begruendung_panel.slideDown(400, function () {
+        $("html, body").animate(
+          {
+            scrollTop: begruendung_panel.offset().top, // Move begruendung panel bottom up to be visible within window screen
+          },
+          400
+        );
+      });
+
+      return;
+    }
+  });
+
+  // Reject Anrechnungen
+  $("#approveAnrechnungUebersicht-reject-anrechnungen-confirm").click(function (
+    e
+  ) {
+    // Avoid bubbling click event to sibling break button
+    e.stopImmediatePropagation();
+
+    let begruendung = $("#approveAnrechnungUebersicht-begruendung").val();
+
+    genehmigung_panel.css("display", "none");
+
+    // Check if begruendung is given
+    if (!begruendung.trim()) {
+      // empty or white spaces only
+      FHC_DialogLib.alertInfo(
+        FHC_PhrasesLib.t("ui", "bitteBegruendungAngeben")
+      );
+      return;
     }
 
-    // Redraw table on resize to fit tabulators height to windows height
-    window.addEventListener('resize', function(){
-        $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
-        $('#tableWidgetTabulator').tabulator('redraw', true);
-    });
-
-    if (hasReadOnlyAccess)
-    {
-        approveAnrechnung.disableEditElements();
-    }
-
-    if (!hasCreateAnrechnungAccess)
-    {
-        approveAnrechnung.disableCreateAnrechnungButton();
-    }
-
-    // Set status alert color
-    approveAnrechnung.setStatusAlertColor();
-
-    // Show only rows that are in progress by STGL
-    $("#show-inProgressDP").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL},
-            ]
-        );
-    });
-
-    // Show only rows that are in progress by lector
-    $("#show-inProgressLektor").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR},
-                {field: 'empfehlung_anrechnung', type: '=', value: null}
-            ]
-        );
-    });
-
-    // Show only rows with empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
-    $("#show-recommended").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL},
-                {field: 'empfehlung_anrechnung', type: '=', value: 'true'}
-            ]
-        );
-    });
-
-    // Show only rows with nicht empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
-    $("#show-not-recommended").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter', [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL},
-                {field: 'empfehlung_anrechnung', type: '=', value: 'false'},
-            ]
-        );
-    });
-
-    // Show only rows with genehmigte anrechnungen
-    $("#show-approved").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_APPROVED}
-            ]
-        );
-    });
-
-    // Show only rows with abgelehnte anrechnungen
-    $("#show-rejected").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_REJECTED}
-            ]
-        );
-    });
-
-    /**
-     * Show all rows: clear filter and blur button
-     * Bootstrap button remains in activated style, even when clicking various times.
-     * This function "resets" button style and clear all tabulators filter.
-     * NOTE: MUST be after all other filters
-     */
-    $(".btn-clearfilter").click(function(){
-        if($(this).hasClass('active'))
-        {
-            $('#tableWidgetTabulator').tabulator('clearFilter');
-            $(this).blur();
-        }
-    })
-
-    // Ask if Approve Anrechnungen
-    $("#approveAnrechnungUebersicht-approve-anrechnungen-ask").click(function(){
-
-        begruendung_panel.css('display', 'none');
-
-        if (genehmigung_panel.is(":hidden"))
-        {
-            // Show begruendung panel if is hidden
-            genehmigung_panel.slideDown(400, function() {
-                $('html, body').animate({
-                    scrollTop: genehmigung_panel.offset().top // Move genehmigung panel bottom up to be visible within window screen
-                }, 400);
-            });
-
-            return;
-        }
-    });
-
-    // Approve Anrechnungen
-    $("#approveAnrechnungUebersicht-approve-anrechnungen-confirm").click(function(e){
-
-        // Avoid bubbling click event to sibling break button
-        e.stopImmediatePropagation();
-
-        // Get selected rows data
-        let selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData');
-
-        // Alert and exit if no anrechnung is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen"));
-            return;
-        }
-
-        // Prepare data object for ajax call
-        let data = {
-            'data': selected_data
+    // Get selected rows data
+    let selected_data = $("#tableWidgetTabulator")
+      .tabulator("getSelectedData")
+      .map(function (data) {
+        // reduce to necessary fields
+        return {
+          anrechnung_id: data.anrechnung_id,
+          begruendung: begruendung,
         };
+      });
 
-        // Hide genehmigung panel again
-        genehmigung_panel.slideUp('slow');
+    // Alert and exit if no anrechnung is selected
+    if (selected_data.length == 0) {
+      FHC_DialogLib.alertInfo(
+        FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen")
+      );
+      return;
+    }
 
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/approve",
-            data,
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
-                    }
-                    else if (FHC_AjaxClient.hasData(data))
-                    {
-                        data = FHC_AjaxClient.getData(data);
+    // Prepare data object for ajax call
+    let data = {
+      data: selected_data,
+    };
 
-                        var prestudenten = Object.keys(data.prestudenten);
+    // Hide begruendung panel again
+    begruendung_panel.slideUp("slow");
 
-                        // Find intersection of selected and in fact updated Anrechnungen (in case server did not approve all).
-                        var updatedData = selected_data.filter(x => prestudenten.some(prestudent => x.prestudent_id == prestudent));
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/reject",
+      data,
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (FHC_AjaxClient.isError(data)) {
+            // Print error message
+            FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
+          } else if (FHC_AjaxClient.hasData(data)) {
+            data = FHC_AjaxClient.getData(data);
 
-                        // Sum up over all anzurechnenden LV-ECTS by Prestudent
-                        var sumLvEctsByPrestudent = approveAnrechnung.getSumLvEctsByPreStudent(updatedData);
+            // Update status 'genehmigt'
+            $("#tableWidgetTabulator").tabulator("updateData", data);
 
-                        // Loop through Prestudenten
-                        // key = Prestudent, value = Approved Anrechnungen of Prestudent
-                        Object.entries(data.prestudenten).forEach(([key, value]) => {
-
-                            var rowsToDeselect = [];
-
-                            // Get accumulated sum of all LV ECTS
-                            var sumLvEcts = sumLvEctsByPrestudent.find(x => x.prestudent_id == key);
-
-                            // Get ALL rows of that Prestudent
-                            var rows = $('#tableWidgetTabulator').tabulator('searchRows', 'prestudent_id', '=', key);
-
-                            // Loop through the rows
-                            rows.forEach(row => {
-                                var updateData = {};
-
-                                // If Anrechnung was approved...
-                                if ((value.findIndex(anrechnung_id => row.getData().anrechnung_id == anrechnung_id)) !== -1)
-                                {
-                                    // ...update status
-                                   updateData.status_kurzbz = data.status_kurzbz;
-                                   updateData.status_bezeichnung = data.status_bezeichnung;
-
-                                   // ...and store row to be deselected later on
-                                   rowsToDeselect.push(row);
-                                }
-
-                                // Update 'Bisher schulische ECTS' and 'Bisher berufliche ECTS' with the Sum of new approved ECTS
-                                updateData.ectsSumSchulisch = row.getData().ectsSumSchulisch + sumLvEcts.ectsSumAnzurechnendeLvsSchulisch,
-                                updateData.ectsSumBeruflich = row.getData().ectsSumBeruflich + sumLvEcts.ectsSumAnzurechnendeLvsBeruflich
-
-
-                                // Update row
-                                row.update(updateData);
-
-                                // Reformat row
-                                row.reformat();
-
-                            })
-
-                            // Deselect rows
-                            $("#tableWidgetTabulator").tabulator('deselectRow', rowsToDeselect);
-
-                        })
-
-                        // Print success message
-                         FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "anrechnungenWurdenGenehmigt"));
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
-        );
-    });
-
-    // Ask if Reject Anrechnungen
-    $("#approveAnrechnungUebersicht-reject-anrechnungen-ask").click(function(){
-
-        genehmigung_panel.css('display', 'none');
-
-        if (begruendung_panel.is(":hidden"))
-        {
-            // Show begruendung panel if is hidden
-            begruendung_panel.slideDown(400, function() {
-                $('html, body').animate({
-                    scrollTop: begruendung_panel.offset().top // Move begruendung panel bottom up to be visible within window screen
-                }, 400);
+            // add the isSelectable property to the rejected row, so that the right classes and selectability is applied to the row
+            var selectedRows = $("#tableWidgetTabulator").tabulator(
+              "getSelectedRows"
+            );
+            selectedRows.forEach((row) => {
+              row.update({ ...row.getData(), isSelectable: false });
+              row.reformat();
             });
 
-            return;
-        }
-    });
+            // Deselect rows
+            var indexesToDeselect = data.map((x) => x.anrechnung_id);
+            $("#tableWidgetTabulator").tabulator(
+              "deselectRow",
+              indexesToDeselect
+            );
 
-    // Reject Anrechnungen
-    $("#approveAnrechnungUebersicht-reject-anrechnungen-confirm").click(function(e){
+            // Print success message
+            FHC_DialogLib.alertSuccess(
+              FHC_PhrasesLib.t("ui", "anrechnungenWurdenAbgelehnt")
+            );
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+        },
+      }
+    );
+  });
 
-        // Avoid bubbling click event to sibling break button
-        e.stopImmediatePropagation();
+  // Request Recommendation for Anrechnungen
+  $("#approveAnrechnungUebersicht-request-recommendation").click(function () {
+    // Get selected rows data
+    let selected_data = $("#tableWidgetTabulator").tabulator("getSelectedData");
 
-        let begruendung = $('#approveAnrechnungUebersicht-begruendung').val();
+    // If some of selected anrechnungen has already been recommended...
+    if (selected_data.some((data) => data.empfehlung_anrechnung !== null)) {
+      // ...confirm before requesting recommendation
+      if (
+        !confirm(
+          FHC_PhrasesLib.t(
+            "anrechnung",
+            "confirmTextAntragHatBereitsEmpfehlung"
+          )
+        )
+      ) {
+        return;
+      }
+    }
 
-        genehmigung_panel.css('display', 'none');
+    // Reduce to necessary fields
+    selected_data = selected_data.map((data) => ({
+      anrechnung_id: data.anrechnung_id,
+    }));
 
-        // Check if begruendung is given
-        if (!begruendung.trim()) // empty or white spaces only
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteBegruendungAngeben"));
-            return;
-        }
+    // Alert and exit if no anrechnung is selected
+    if (selected_data.length == 0) {
+      FHC_DialogLib.alertInfo(
+        FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen")
+      );
+      return;
+    }
 
-        // Get selected rows data
-        let selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-            .map(function(data){
-                // reduce to necessary fields
-                return {
-                    'anrechnung_id' : data.anrechnung_id,
-                    'begruendung'   : begruendung
-                }
-            });
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/requestRecommendation",
+      { data: selected_data },
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (FHC_AjaxClient.isError(data)) {
+            // Print error message
+            FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
+          } else if (FHC_AjaxClient.hasData(data)) {
+            data = FHC_AjaxClient.getData(data);
 
-        // Alert and exit if no anrechnung is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen"));
-            return;
-        }
-
-        // Prepare data object for ajax call
-        let data = {
-            'data': selected_data
-        };
-
-        // Hide begruendung panel again
-        begruendung_panel.slideUp('slow');
-
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/reject",
-            data,
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
-                    }
-                    else if (FHC_AjaxClient.hasData(data))
-                    {
-                        data = FHC_AjaxClient.getData(data);
-
-                        // Update status 'genehmigt'
-                        $('#tableWidgetTabulator').tabulator('updateData', data);
-
-                        // Deselect rows
-                        var indexesToDeselect = data.map(x => x.anrechnung_id);
-                        $("#tableWidgetTabulator").tabulator('deselectRow', indexesToDeselect);
-
-                        // Print success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "anrechnungenWurdenAbgelehnt"));
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
+            // Print info message, if not all selected recommendations were requested
+            if (data.length < selected_data.length) {
+              FHC_DialogLib.alertInfo(
+                FHC_PhrasesLib.t(
+                  "ui",
+                  "empfehlungWurdeAngefordertAusnahmeWoKeineLektoren",
+                  [
+                    selected_data.length,
+                    data.length,
+                    selected_data.length - data.length,
+                  ]
+                )
+              );
+            } else {
+              // Print success message
+              FHC_DialogLib.alertSuccess(
+                FHC_PhrasesLib.t("ui", "empfehlungWurdeAngefordert")
+              );
             }
-        );
-    });
 
-    // Request Recommendation for Anrechnungen
-    $("#approveAnrechnungUebersicht-request-recommendation").click(function(){
+            //Update status 'genehmigt'
+            $("#tableWidgetTabulator").tabulator("updateData", data);
 
-        // Get selected rows data
-        let selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData');
+            // Deselect rows
+            var indexesToDeselect = data.map((x) => x.anrechnung_id);
+            $("#tableWidgetTabulator").tabulator(
+              "deselectRow",
+              indexesToDeselect
+            );
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+        },
+      }
+    );
+  });
 
-        // If some of selected anrechnungen has already been recommended...
-        if (selected_data.some((data) => data.empfehlung_anrechnung !== null))
-        {
-            // ...confirm before requesting recommendation
-            if(!confirm(FHC_PhrasesLib.t("anrechnung", "confirmTextAntragHatBereitsEmpfehlung")))
-            {
-                return;
-            }
-        }
+  // Break Genehmigung abgeben
+  $("#approveAnrechnungUebersicht-empfehlung-abbrechen").click(function () {
+    genehmigung_panel.slideUp("slow");
+  });
 
-        // Reduce to necessary fields
-        selected_data = selected_data.map(data => ({'anrechnung_id' : data.anrechnung_id}));
-
-        // Alert and exit if no anrechnung is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen"));
-            return;
-        }
-
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/requestRecommendation",
-            {data: selected_data},
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (FHC_AjaxClient.isError(data))
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertError(FHC_AjaxClient.getError(data));
-                    }
-                    else if (FHC_AjaxClient.hasData(data))
-                    {
-                        data = FHC_AjaxClient.getData(data);
-
-                        // Print info message, if not all selected recommendations were requested
-                        if (data.length < selected_data.length){
-                            FHC_DialogLib.alertInfo(
-                                FHC_PhrasesLib.t(
-                                    "ui", "empfehlungWurdeAngefordertAusnahmeWoKeineLektoren",
-                                    [selected_data.length, data.length, selected_data.length - data.length])
-                            );
-                        }
-                        else
-                        {
-                            // Print success message
-                            FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "empfehlungWurdeAngefordert"));
-                        }
-
-                        //Update status 'genehmigt'
-                        $('#tableWidgetTabulator').tabulator('updateData', data);
-
-                        // Deselect rows
-                        var indexesToDeselect = data.map(x => x.anrechnung_id);
-                        $("#tableWidgetTabulator").tabulator('deselectRow', indexesToDeselect);
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
-        );
-    });
-
-    // Break Genehmigung abgeben
-    $('#approveAnrechnungUebersicht-empfehlung-abbrechen').click(function(){
-        genehmigung_panel.slideUp('slow');
-
-    })
-
-    // Break Ablehnung abgeben
-    $('#approveAnrechnungUebersicht-begruendung-abbrechen').click(function(){
-
-        begruendung_panel.slideUp('slow');
-
-    })
-
-    // Copy Begruendung into textarea
-    $(".btn-copyIntoTextarea").click(function(){
-        approveAnrechnung.copyIntoTextarea(this);
-    })
+  // Break Ablehnung abgeben
+  $("#approveAnrechnungUebersicht-begruendung-abbrechen").click(function () {
+    begruendung_panel.slideUp("slow");
+  });
 
+  // Copy Begruendung into textarea
+  $(".btn-copyIntoTextarea").click(function () {
+    approveAnrechnung.copyIntoTextarea(this);
+  });
 });
 
 var approveAnrechnung = {
-    setStatusAlertColor: function () {
-        let status_kurzbz = $('#requestAnrechnung-status_kurzbz').data('status_kurzbz');
+  disableEditElements: function () {
+    // Disable:
+    // ...button Empfehlung anfordern
+    $("#approveAnrechnungUebersicht-request-recommendation")
+      .prop("disabled", true)
+      .attr("title", FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
+    // ...button Ablehnen
+    $("#approveAnrechnungUebersicht-reject-anrechnungen-ask")
+      .prop("disabled", true)
+      .attr("title", FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
+    // ...button Genehmigen
+    $("#approveAnrechnungUebersicht-approve-anrechnungen-ask")
+      .prop("disabled", true)
+      .attr("title", FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
+  },
+  disableCreateAnrechnungButton: function () {
+    // Disable button Antrag anlegen
+    $("#approveAnrechnungUebersicht-create-anrechnung")
+      .removeAttr("href")
+      .css({ color: "grey", "pointer-events": "none" }); // property disabled does not work for <a> link
+  },
+  copyIntoTextarea: function (elem) {
+    // Find closest textarea
+    let textarea = $(elem).closest("div").find("textarea");
 
-        switch (status_kurzbz) {
-            case ANRECHNUNGSTATUS_APPROVED:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-success');
-                break;
-            case ANRECHNUNGSTATUS_REJECTED:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-danger');
-                break;
-            case '':
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-info');
-                break;
-            default:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-warning');
-        }
-    },
-    disableEditElements: function()
-    {
-        // Disable:
-        // ...button Empfehlung anfordern
-        $('#approveAnrechnungUebersicht-request-recommendation')
-            .prop('disabled', true)
-            .attr('title', FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
-        // ...button Ablehnen
-        $('#approveAnrechnungUebersicht-reject-anrechnungen-ask')
-            .prop('disabled', true)
-            .attr('title', FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
-        // ...button Genehmigen
-        $('#approveAnrechnungUebersicht-approve-anrechnungen-ask')
-            .prop('disabled', true)
-            .attr('title', FHC_PhrasesLib.t("ui", "nurLeseberechtigung"));
-
-    },
-    disableCreateAnrechnungButton: function()
-    {
-        // Disable button Antrag anlegen
-        $('#approveAnrechnungUebersicht-create-anrechnung')
-            .removeAttr('href')
-            .css({'color': 'grey', 'pointer-events': 'none'}); // property disabled does not work for <a> link
-    },
-    copyIntoTextarea: function(elem){
-
-        // Find closest textarea
-        let textarea = $(elem).closest('div').find('textarea');
-
-        // Copy begruendung into textarea and set focus
-        textarea.val($.trim($(elem).parent().text())).focus();
-    },
-    focusFilterbuttonIfTableStartsWithStoredFilter(filters){
-        switch (filters[0].value) {
-            case ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR:
-                $("#show-inProgressLektor").addClass('active');
-                break;
-            case ANRECHNUNGSTATUS_APPROVED:
-                $("#show-approved").addClass('active');
-                break;
-            case ANRECHNUNGSTATUS_REJECTED:
-                $("#show-rejected").addClass('active');
-                break;
-            case ANRECHNUNGSTATUS_PROGRESSED_BY_STGL:
-                if (filters.length > 1)
-                {
-                    if (filters[1].field == 'empfehlung_anrechnung')
-                    {
-                        if (filters[1].value === 'true')
-                        {
-                            $("#show-recommended").addClass('active');
-                        }
-                        else
-                        {
-                            $("#show-not-recommended").addClass('active');
-                        }
-                    }
-                }
-                else
-                {
-                    $("#show-inProgressDP").addClass('active');
-                }
-
-                break;
-
-        }
-    },
-    getSumLvEctsByPreStudent(data){
-
-        var result = [];
-
-        // Berechne für jeden Prestudenten die kumulierte Summe aller selektierten LV ECTS
-        data.reduce((prev, curr) => {
-
-            if (!prev[curr.prestudent_id])
-            {
-                prev[curr.prestudent_id] = {
-                    prestudent_id: curr.prestudent_id,
-                    ectsSumAnzurechnendeLvsSchulisch: 0,
-                    ectsSumAnzurechnendeLvsBeruflich: 0
-                };
-
-                result.push(prev[curr.prestudent_id])
+    // Copy begruendung into textarea and set focus
+    textarea.val($.trim($(elem).parent().text())).focus();
+  },
+  focusFilterbuttonIfTableStartsWithStoredFilter(filters) {
+    switch (filters[0].value) {
+      case ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR:
+        $("#show-inProgressLektor").addClass("active");
+        break;
+      case ANRECHNUNGSTATUS_APPROVED:
+        $("#show-approved").addClass("active");
+        break;
+      case ANRECHNUNGSTATUS_REJECTED:
+        $("#show-rejected").addClass("active");
+        break;
+      case ANRECHNUNGSTATUS_PROGRESSED_BY_STGL:
+        if (filters.length > 1) {
+          if (filters[1].field == "empfehlung_anrechnung") {
+            if (filters[1].value === "true") {
+              $("#show-recommended").addClass("active");
+            } else {
+              $("#show-not-recommended").addClass("active");
             }
+          }
+        } else {
+          $("#show-inProgressDP").addClass("active");
+        }
 
-            // Kumulierte Summe aller selektierten LVs, die angerechnet werden sollen, getrennt nach
-            // schulischer und beruflicher Qualifikation.
-            // Ausgenommen ist die universitäre Qualifikation (5), da diese unbegrenzt möglich sind.
-            if (curr.begruendung_id != 5)
-            {
-                if (curr.begruendung_id == 4)
-                {
-                    prev[curr.prestudent_id].ectsSumAnzurechnendeLvsBeruflich += curr.ects;
-                }
-                else
-                {
-                    prev[curr.prestudent_id].ectsSumAnzurechnendeLvsSchulisch += curr.ects;
-                }
-            }
-
-            return prev;
-
-        }, {});
-
-        return result;
-    },
-    showNumberSelectedRows(rows){
-        $('#number-selected').html("Ausgewählte Zeilen: <strong>" + rows.length + "</strong>");
+        break;
     }
-}
+  },
+  getSumLvEctsByPreStudent(data) {
+    var result = [];
+
+    // Berechne für jeden Prestudenten die kumulierte Summe aller selektierten LV ECTS
+    data.reduce((prev, curr) => {
+      if (!prev[curr.prestudent_id]) {
+        prev[curr.prestudent_id] = {
+          prestudent_id: curr.prestudent_id,
+          ectsSumAnzurechnendeLvsSchulisch: 0,
+          ectsSumAnzurechnendeLvsBeruflich: 0,
+        };
+
+        result.push(prev[curr.prestudent_id]);
+      }
+
+      // Kumulierte Summe aller selektierten LVs, die angerechnet werden sollen, getrennt nach
+      // schulischer und beruflicher Qualifikation.
+      // Ausgenommen ist die universitäre Qualifikation (5), da diese unbegrenzt möglich sind.
+      if (curr.begruendung_id != 5) {
+        if (curr.begruendung_id == 4) {
+          prev[curr.prestudent_id].ectsSumAnzurechnendeLvsBeruflich +=
+            curr.ects;
+        } else {
+          prev[curr.prestudent_id].ectsSumAnzurechnendeLvsSchulisch +=
+            curr.ects;
+        }
+      }
+
+      return prev;
+    }, {});
+
+    return result;
+  },
+  showNumberSelectedRows(rows) {
+    $("#number-selected").html(
+      "Ausgewählte Zeilen: <strong>" + rows.length + "</strong>"
+    );
+  },
+};
diff --git a/public/js/lehre/anrechnung/createAnrechnung.js b/public/js/lehre/anrechnung/createAnrechnung.js
index 176821f2c..fd4e02a2b 100644
--- a/public/js/lehre/anrechnung/createAnrechnung.js
+++ b/public/js/lehre/anrechnung/createAnrechnung.js
@@ -1,5 +1,16 @@
 $(function () {
 
+    // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+    $(document).on("tableInit", function(event,tabulatorInstance) {
+        
+           // event rowSelected needs to be attached as a callback to the tableBuilt event in tabulator5
+           $("#tableWidgetTabulator").tabulator("on","rowSelected",(row)=>{func_rowSelected(row)});
+           // event rowSelectionChanged needs to be attached as a callback to the tableBuilt event in tabulator5
+           $("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",(data,rows)=>{func_rowSelectionChanged(data,rows)});
+          
+    });
+
+
     // Disable all form fields by default
     createAnrechnung.disableFormFields();
 
@@ -8,6 +19,13 @@ $(function () {
 
         e.preventDefault();
 
+        var fileInput = $('#requestAnrechnung-uploadfile');
+        const uploadMaxFilesize = $('#requestAnrechnung-uploadfile').data('maxsize')  ; // in byte
+        if (!createAnrechnung.fileSizeOk(fileInput, uploadMaxFilesize)) // in byte
+        {
+            return FHC_DialogLib.alertWarning(FHC_PhrasesLib.t("ui", "errorDokumentZuGross"));
+        }
+
         FHC_AjaxClient.ajaxCallPost(
             FHC_JS_DATA_STORAGE_OBJECT.called_path + "/create",
             {
@@ -93,6 +111,20 @@ function func_rowSelectionChanged(data, rows){
 // ---------------------------------------------------------------------------------------------------------------------
 
 var createAnrechnung = {
+    fileSizeOk: function(fileInput, maxSize){
+
+        if (fileInput.get(0).files.length){
+
+            var fileSize = fileInput.get(0).files[0].size; // in bytes
+
+            if (fileSize > maxSize)
+            {
+                return false;
+            }
+
+            return true;
+        }
+    },
     emptyFormFields: function(){
 
         // Empty field StudentIn
@@ -102,7 +134,7 @@ var createAnrechnung = {
         $('#createAnrechnung-form :input:not([type=hidden])').val('');
 
         // Hide eventually displayed button to open Anrechnung
-        $('#createAnrechnung-openAnrechnung').addClass('hidden');
+        $('#createAnrechnung-openAnrechnung').addClass('visually-hidden');
     },
     disableFormFields: function(){
         let prestudent_id = $('#prestudent_id').data('prestudent_id');
@@ -152,7 +184,7 @@ var createAnrechnung = {
     displayButtonToOpenAnrechnung: function(anrechnung_id){
         // Display button to open Anrechnung in new tab
         $('#createAnrechnung-openAnrechnung')
-            .removeClass('hidden')
+            .removeClass('visually-hidden')
             .attr('href', 'ApproveAnrechnungDetail/?anrechnung_id=' + anrechnung_id)
             .html('<i class="fa fa-external-link" aria-hidden="true"></i> ' + FHC_PhrasesLib.t("global", "antragBearbeiten"));
     }
diff --git a/public/js/lehre/anrechnung/requestAnrechnung.js b/public/js/lehre/anrechnung/requestAnrechnung.js
index 0a8a09ea0..c92665757 100644
--- a/public/js/lehre/anrechnung/requestAnrechnung.js
+++ b/public/js/lehre/anrechnung/requestAnrechnung.js
@@ -62,7 +62,7 @@ $(function(){
                     var msgBeiEctsUeberschreitung = requestAnrechnung.getMsgBeiEctsUeberschreitung(begruendung_id, ectsLv, sumEctsSchulisch, sumEctsBeruflich);
 
                     // Add to Checkbox text
-                    $(this).closest('label').append(msgBeiEctsUeberschreitung);
+                    $(this).closest('div').append(msgBeiEctsUeberschreitung);
                 }
                  return;
             }
@@ -76,7 +76,7 @@ $(function(){
                     var msgBeiEctsUeberschreitung = requestAnrechnung.getMsgBeiEctsUeberschreitung(begruendung_id, ectsLv, sumEctsSchulisch, sumEctsBeruflich);
 
                     // Add to Checkbox text
-                    $(this).closest('label').append(msgBeiEctsUeberschreitung);
+                    $(this).closest('div').append(msgBeiEctsUeberschreitung);
                 }
             }
 
@@ -142,17 +142,17 @@ var requestAnrechnung = {
 
         switch (status_kurzbz) {
             case ANRECHNUNGSTATUS_APPROVED:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-success');
+                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('bg-success-subtle');
                 break;
             case ANRECHNUNGSTATUS_REJECTED:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-danger');
+                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('bg-danger-subtle');
                 break;
             case '':
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-info');
+                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('bg-info-subtle');
                 $('#requestAnrechnung-status_kurzbz').text(FHC_PhrasesLib.t("ui", "neu"));
                 break;
             default:
-                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-warning');
+                $('#requestAnrechnung-status_kurzbz').closest('div').addClass('bg-warning-subtle');
                 $('#requestAnrechnung-status_kurzbz').text(FHC_PhrasesLib.t("ui", "inBearbeitung"));
         }
     },
@@ -190,7 +190,7 @@ var requestAnrechnung = {
 
             // Show sperre panel
             $('#requestAnrechnung-sperre')
-                .removeClass('hidden')
+                .removeClass('visually-hidden')
                 .html(function(){
                     let sperregrund = FHC_PhrasesLib.t('global', 'bearbeitungGesperrt') + ': ';
 
@@ -200,7 +200,7 @@ var requestAnrechnung = {
                     else if (is_blocked){
                         sperregrund += FHC_PhrasesLib.t('anrechnung', 'benotungDerLV');
                     }
-                    return "<b>"+ sperregrund + "</b>";
+                    return "<span class='fw-bold'>"+ sperregrund + "</span>";
                 })
 
             // Disable all form elements
@@ -208,7 +208,7 @@ var requestAnrechnung = {
         }
     },
     initTooltips: function (){
-        $('[data-toggle="tooltip"]').tooltip({
+        $('[data-bs-toggle="tooltip"]').tooltip({
                 delay: { "show": 200, "hide": 200 },
                 html: true
             }
@@ -240,11 +240,11 @@ var requestAnrechnung = {
     formatAnrechnungIsApplied: function (antragdatum, dms_id, filename){
         $('#requestAnrechnung-antragdatum').text(antragdatum);
         $('#requestAnrechnung-status_kurzbz').text(FHC_PhrasesLib.t("ui", "inBearbeitung"));
-        $('#requestAnrechnung-status_kurzbz').closest('div').addClass('alert-warning');
+        $('#requestAnrechnung-status_kurzbz').closest('div').addClass('bg-warning-subtle');
 
         // Display File-Downloadlink
         $('#requestAnrechnung-downloadDocLink')
-            .removeClass('hidden')
+            .removeClass('visually-hidden')
             .attr('href', 'RequestAnrechnung/download?dms_id=' + dms_id)
             .html(filename);
 
@@ -287,14 +287,15 @@ var requestAnrechnung = {
     alertIfMaxEctsExceeded: function(){
 
         if(
-            (parseFloat($('#sumEctsSchulisch').text())) > 60 ||
-            (parseFloat($('#sumEctsBeruflich').text())) > 60 ||
-            (parseFloat($('#sumEctsSchulisch').text()) + parseFloat($('#sumEctsBeruflich').text())) > 90
+        
+             (parseFloat($('#sumEctsSchulisch').text())) > 60 ||
+             (parseFloat($('#sumEctsBeruflich').text())) > 60 ||
+             (parseFloat($('#sumEctsSchulisch').text()) + parseFloat($('#sumEctsBeruflich').text())) > 90 
         )
         {
             $('#requestAnrechnung-maxEctsUeberschrittenMsg')
-                .html("<br><b>Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz ist überschritten. </b><i class=\"fa fa-lg fa-info-circle\"></i></br>")
-                .addClass('bg-danger text-danger')
+                .html("<span class='flex-fill fw-bold'>Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz ist überschritten. </span><i class='mx-4 fa fa-lg fa-info-circle'></i>")
+                .addClass('bg-danger-subtle')
                 .tooltip({
                     title: FHC_PhrasesLib.t("anrechnung", "anrechnungEctsTooltipTextBeiUeberschreitung"),
                     placement: 'right',
@@ -304,7 +305,8 @@ var requestAnrechnung = {
     },
     alertIfMaxEctsExceededInsideBegruendungsbox: function(){
         let status_kurzbz = $('#requestAnrechnung-status_kurzbz').data('status_kurzbz');
-
+                    
+   
         if (status_kurzbz != ' ' && status_kurzbz != ANRECHNUNGSTATUS_APPROVED)
         {
             var ectsLv = parseFloat($('#ects').text());
@@ -317,7 +319,7 @@ var requestAnrechnung = {
             {
                 return;
             }
-
+            
             // If max ECTS is ecceeded
             if (begruendung_id == 4)
             {
@@ -329,7 +331,7 @@ var requestAnrechnung = {
                     var msgBeiEctsUeberschreitung = requestAnrechnung.getMsgBeiEctsUeberschreitung(begruendung_id, ectsLv, sumEctsSchulisch, sumEctsBeruflich);
 
                     // Add to Checkbox text
-                    $('#requestAnrechnung-form :input[name="begruendung"]:checked').closest('label').append(msgBeiEctsUeberschreitung);
+                    $('#requestAnrechnung-form :input[name="begruendung"]:checked').closest('div').append(msgBeiEctsUeberschreitung);
                 }
             }
             else
@@ -342,20 +344,19 @@ var requestAnrechnung = {
                     var msgBeiEctsUeberschreitung = requestAnrechnung.getMsgBeiEctsUeberschreitung(begruendung_id, ectsLv, sumEctsSchulisch, sumEctsBeruflich);
 
                     // Add to Checkbox text
-                    $('#requestAnrechnung-form :input[name="begruendung"]:checked').closest('label').append(msgBeiEctsUeberschreitung);
+                    $('#requestAnrechnung-form :input[name="begruendung"]:checked').closest('div').append(msgBeiEctsUeberschreitung);
                 }
             }
         }
     },
     getMsgBeiEctsUeberschreitung: function(begruendung_id, ects, sumEctsSchulisch, sumEctsBeruflich){
 
-        return $('<span id="sumEctsMsg"></span>')
-            .html(FHC_PhrasesLib.t("anrechnung", "anrechnungEctsTextBeiUeberschreitung",
-                begruendung_id == 4
-                    ? [(sumEctsSchulisch + sumEctsBeruflich + ects), sumEctsSchulisch, (sumEctsBeruflich  + ects)] // beruflich
-                    : [(sumEctsSchulisch + sumEctsBeruflich + ects), (sumEctsSchulisch + ects), sumEctsBeruflich])) // schulisch
+        const phraseUsed = '<span class="d-block">Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz wird überschritten.</span><span class=" fw-bold">Bisherige ECTS + ECTS dieser LV: Total: {0} [ Schulisch: {1}  | Beruflich: {2}  ]</span>&emsp;';
+
+        return $('<div class="p-1" id="sumEctsMsg"></div>')
+            .html(phraseUsed) // schulisch
             .append('<i class="fa fa-lg fa-info-circle"></i>')
-            .addClass('bg-danger text-danger')
+            .addClass('bg-danger-subtle')
             .tooltip({
                 title: FHC_PhrasesLib.t("anrechnung", "anrechnungEctsTooltipTextBeiUeberschreitung"),
                 placement: 'right',
diff --git a/public/js/lehre/anrechnung/reviewAnrechnungDetail.js b/public/js/lehre/anrechnung/reviewAnrechnungDetail.js
index e8142ea05..beba986ca 100644
--- a/public/js/lehre/anrechnung/reviewAnrechnungDetail.js
+++ b/public/js/lehre/anrechnung/reviewAnrechnungDetail.js
@@ -205,16 +205,16 @@ var reviewAnrechnung = {
 
         switch (status_kurzbz) {
             case ANRECHNUNGSTATUS_APPROVED:
-                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-success');
+                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-success-subtle');
                 break;
             case ANRECHNUNGSTATUS_REJECTED:
-                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-danger');
+                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-danger-subtle');
                 break;
             case '':
-                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-info');
+                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-info-subtle');
                 break;
             default:
-                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('alert-warning');
+                $('#reviewAnrechnungDetail-status_kurzbz').closest('div').addClass('bg-warning-subtle');
         }
     },
     setEmpfehlungstext: function () {
@@ -236,7 +236,7 @@ var reviewAnrechnung = {
         }
     },
     initTooltips: function (){
-        $('[data-toggle="tooltip"]').tooltip({
+        $('[data-bs-toggle="tooltip"]').tooltip({
                 delay: { "show": 200, "hide": 200 },
                 html: true
         }
diff --git a/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js b/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
index c71b85274..be3443574 100644
--- a/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
+++ b/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
@@ -1,13 +1,14 @@
-const BASE_URL = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+const BASE_URL =
+  FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 const CALLED_PATH = FHC_JS_DATA_STORAGE_OBJECT.called_path;
-const CONTROLLER_URL = BASE_URL + '/' + CALLED_PATH;
+const CONTROLLER_URL = BASE_URL + "/" + CALLED_PATH;
 const APPROVE_ANRECHNUNG_DETAIL_URI = "lehre/anrechnung/ReviewAnrechnungDetail";
 
-const ANRECHNUNGSTATUS_PROGRESSED_BY_STGL = 'inProgressDP';
-const ANRECHNUNGSTATUS_PROGRESSED_BY_KF = 'inProgressKF';
-const ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR = 'inProgressLektor';
-const ANRECHNUNGSTATUS_APPROVED = 'approved';
-const ANRECHNUNGSTATUS_REJECTED = 'rejected';
+const ANRECHNUNGSTATUS_PROGRESSED_BY_STGL = "inProgressDP";
+const ANRECHNUNGSTATUS_PROGRESSED_BY_KF = "inProgressKF";
+const ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR = "inProgressLektor";
+const ANRECHNUNGSTATUS_APPROVED = "approved";
+const ANRECHNUNGSTATUS_REJECTED = "rejected";
 
 const COLOR_LIGHTGREY = "#f5f5f5";
 
@@ -17,130 +18,133 @@ const COLOR_LIGHTGREY = "#f5f5f5";
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var mut_formatStringDate = function(value, data, type, params, component) {
-    if (value != null)
-    {
-        var d = new Date(value);
-        return ("0" + (d.getDate())).slice(-2)  + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear();
-    }
-}
+var mut_formatStringDate = function (value, data, type, params, component) {
+  if (value != null) {
+    var d = new Date(value);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // TABULATOR FUNCTIONS
 // ---------------------------------------------------------------------------------------------------------------------
 // Returns relative height (depending on screen size)
-function func_height(table){
-    return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Filters boolean values
-function hf_filterTrueFalse(headerValue, rowValue){
+function hf_filterTrueFalse(headerValue, rowValue) {
+  if ("ja".startsWith(headerValue) || "yes".startsWith(headerValue)) {
+    return rowValue == "true";
+  }
 
-    if ('ja'.startsWith(headerValue) || 'yes'.startsWith(headerValue))
-    {
-        return rowValue == 'true';
-    }
+  if ("nein".startsWith(headerValue) || "no".startsWith(headerValue)) {
+    return rowValue == "false";
+  }
 
-    if ('nein'.startsWith(headerValue) || 'no'.startsWith(headerValue))
-    {
-        return rowValue == 'false';
-    }
-
-    if (headerValue = '-')
-    {
-        return rowValue == null;
-    }
+  if ((headerValue = "-")) {
+    return rowValue == null;
+  }
 }
 
 // Filters empfehlungsberechtigt boolean values
-function hf_empfehlungsberechtigt(headerValue, rowValue){
-
-    return rowValue == headerValue.toString();
+function hf_empfehlungsberechtigt(headerValue, rowValue) {
+  return rowValue == headerValue.toString();
 }
 
 // Adds column details
 function func_tableBuilt(table) {
-    table.addColumn(
-        {
-            title: "Details",
-            field: 'details',
-            align: "center",
-            width: 100,
-            formatter: "link",
-            formatterParams:{
-                label:"Details",
-                url:function(cell){
-                    return  BASE_URL + "/" + APPROVE_ANRECHNUNG_DETAIL_URI + "?anrechnung_id=" + cell.getData().anrechnung_id
-                },
-                target:"_blank"
-            }
-        }, true  // place column on the very left
-    );
+  table.tabulator(
+    "addColumn",
+    {
+      title: "Details",
+      field: "details",
+      align: "center",
+      width: 100,
+      formatter: "link",
+      formatterParams: {
+        label: "Details",
+        url: function (cell) {
+          return (
+            BASE_URL +
+            "/" +
+            APPROVE_ANRECHNUNG_DETAIL_URI +
+            "?anrechnung_id=" +
+            cell.getData().anrechnung_id
+          );
+        },
+        target: "_blank",
+      },
+    },
+    true // place column on the very left
+  );
+  // fully redrawing the table after adding the Details column
+  table.tabulator("redraw", true);
 }
 
-// Formats the rows
-function func_rowFormatter(row){
-    let status_kurzbz = row.getData().status_kurzbz;
-    let empfehlungsberechtigt = row.getData().empfehlungsberechtigt;
 
-    row.getCells().forEach(function(cell){
-        if (status_kurzbz != ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR || empfehlungsberechtigt == "false")
-        {
-            row.getElement().style["background-color"] = COLOR_LIGHTGREY;   // default
-        }
-    });
-}
 
 // Formats row selectable/unselectable
-function func_selectableCheck(row){
-    let status_kurzbz = row.getData().status_kurzbz;
-    let empfehlungsberechtigt = row.getData().empfehlungsberechtigt;
+function func_selectableCheck(row) {
+  let status_kurzbz = row.getData().status_kurzbz;
+  let empfehlungsberechtigt = row.getData().empfehlungsberechtigt;
 
-    return (
-        status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR || empfehlungsberechtigt == "false"
-    );
+  return  status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR || empfehlungsberechtigt == "false";
+  
 }
 
-// Performes after row was updated
-function func_rowUpdated(row){
-    // Refresh row formatters
-    row.reformat();
 
-    // Deselect and disable new selection of updated rows
-    row.deselect();
-    row.getElement().style["pointerEvents"] = "none";
+function func_rowFormatter(row){
+  const rowData = row.getData();
 
-    // ...but leave url links selectable
-    row.getCell('dokument_bezeichnung').getElement().firstChild.style["pointerEvents"] = "auto";
-    row.getCell('details').getElement().firstChild.style["pointerEvents"] = "auto";
+  // add the tabulator-unselectable class to the row if its data property isSelectable is false
+  if(rowData.isSelectable===false && !row.getElement().classList.contains("tabulator-unselectable")){
+    row.getElement().classList.add("tabulator-unselectable");
+  }
+
+  // remove the tabulator-selectable class if the data property isSelectable is false and it contains the class
+  if(rowData.isSelectable===false && row.getElement().classList.contains("tabulator-selectable")){
+    row.getElement().classList.remove("tabulator-selectable");
+  }
 }
 
 // Returns tooltip
-function func_tooltips(cell) {
-    // Return tooltip if row is unselectable
-    if (!func_selectableCheck(cell.getRow())){
-        return FHC_PhrasesLib.t("ui", "nichtSelektierbarAufgrundVon") + 'Status';
-    }
+function func_tooltips(e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration functionfunction
+
+  // Return tooltip if row is unselectable
+  if (!func_selectableCheck(cell.getRow())) {
+    return FHC_PhrasesLib.t("ui", "nichtSelektierbarAufgrundVon") + "Status";
+  }
 }
 
 // Formats empfehlung_anrechnung
-var format_empfehlung_anrechnung = function(cell, formatterParams){
-    return (cell.getValue() == null)
-        ? '-'
-        : (cell.getValue() ==  'true')
-            ? FHC_PhrasesLib.t("ui", "ja")
-            : FHC_PhrasesLib.t("ui", "nein");
-}
+var format_empfehlung_anrechnung = function (cell, formatterParams) {
+  return cell.getValue() == null
+    ? "-"
+    : cell.getValue() == "true"
+    ? FHC_PhrasesLib.t("ui", "ja")
+    : FHC_PhrasesLib.t("ui", "nein");
+};
 
 /**
  * Returns formatter params for field dokument_bezeichnung (= Spalte Nachweisdokumente)
  * NOTE: Returning a formatter param object fixes the problem, that tabulator did not know the url after refreshing the page.
  */
-function paramLookup_dokBez(cell){
-    return {
-        labelField: 'dokument_bezeichnung',
-        url: CONTROLLER_URL + '/download?dms_id=' + cell.getData().dms_id,
-        target: '_blank'
-    }
+function paramLookup_dokBez(cell) {
+  return {
+    labelField: "dokument_bezeichnung",
+    url: CONTROLLER_URL + "/download?dms_id=" + cell.getData().dms_id,
+    target: "_blank",
+  };
 }
 
 /*
@@ -148,308 +152,330 @@ function paramLookup_dokBez(cell){
  * Select all (filtered) rows that are progressed by stg leiter.
  * (Ignore rows that are approved, rejected or in request for recommendation)
  */
-function tableWidgetHook_selectAllButton(tableWidgetDiv){
-    var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
-        .filter(row =>
-            row.getData().status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR
-        );
+function tableWidgetHook_selectAllButton(tableWidgetDiv) {
+  var resultRows = tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getRows", true)
+    .filter(
+      (row) =>
+        row.getData().status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR
+    );
 
-    tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', resultRows);
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("selectRow", resultRows);
 }
 
+$(function () {
+  const empfehlung_panel = $("#reviewAnrechnungUebersicht-empfehlung-panel");
+  const begruendung_panel = $("#reviewAnrechnungUebersicht-begruendung-panel");
 
-$(function(){
+  // Pruefen ob Promise unterstuetzt wird
+  // Tabulator funktioniert nicht mit IE
+  var canPromise = !!window.Promise;
+  if (!canPromise) {
+    alert(
+      "Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen"
+    );
+    window.location.href = "about:blank";
+    return;
+  }
 
-    const empfehlung_panel = $('#reviewAnrechnungUebersicht-empfehlung-panel');
-    const begruendung_panel = $('#reviewAnrechnungUebersicht-begruendung-panel');
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    func_tableBuilt($("#tableWidgetTabulator"));
+  });
 
-    // Pruefen ob Promise unterstuetzt wird
-    // Tabulator funktioniert nicht mit IE
-    var canPromise = !! window.Promise;
-    if(!canPromise)
-    {
-        alert("Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen");
-        window.location.href='about:blank';
-        return;
+  
+  // Redraw table on resize to fit tabulators height to windows height
+  window.addEventListener("resize", function () {
+    $("#tableWidgetTabulator").tabulator("setHeight", $(window).height() * 0.5);
+    $("#tableWidgetTabulator").tabulator("redraw", true);
+  });
+
+  // Show only rows with anrechnungen ohne Empfehlung
+  $("#show-need-recommendation").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR,
+      },
+    ]);
+  });
+
+  // Show only rows with empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
+  $("#show-recommended").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL,
+      },
+      { field: "empfehlung_anrechnung", type: "=", value: "true" },
+    ]);
+  });
+
+  // Show only rows with nicht empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
+  $("#show-not-recommended").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      {
+        field: "status_kurzbz",
+        type: "=",
+        value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL,
+      },
+      { field: "empfehlung_anrechnung", type: "=", value: "false" },
+    ]);
+  });
+
+  // Show only rows with genehmigte anrechnungen
+  $("#show-approved").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "status_kurzbz", type: "=", value: ANRECHNUNGSTATUS_APPROVED },
+    ]);
+  });
+
+  // Show only rows with abgelehnte anrechnungen
+  $("#show-rejected").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "status_kurzbz", type: "=", value: ANRECHNUNGSTATUS_REJECTED },
+    ]);
+  });
+
+  /**
+   * Show all rows: clear filter and blur button
+   * Bootstrap button remains in activated style, even when clicking various times.
+   * This function "resets" button style and clear all tabulators filter.
+   * NOTE: MUST be after all other filters
+   */
+  $(".btn-clearfilter").click(function () {
+    if ($(this).hasClass("active")) {
+      $("#tableWidgetTabulator").tabulator("clearFilter");
+      $(this).blur();
     }
+  });
 
-    // Redraw table on resize to fit tabulators height to windows height
-    window.addEventListener('resize', function(){
-        $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
-        $('#tableWidgetTabulator').tabulator('redraw', true);
-    });
+  // Ask ifRecommend Anrechnungen
+  $("#reviewAnrechnungUebersicht-recommend-anrechnungen-ask").click(
+    function () {
+      begruendung_panel.css("display", "none");
 
-    // Set status alert color
-    reviewAnrechnung.setStatusAlertColor();
-
-    // Show only rows with anrechnungen ohne Empfehlung
-    $("#show-need-recommendation").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR}
-            ]
-        );
-    });
-
-    // Show only rows with empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
-    $("#show-recommended").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL},
-                {field: 'empfehlung_anrechnung', type: '=', value: 'true'}
-            ]
-        );
-    });
-
-    // Show only rows with nicht empfohlene + noch nicht genehmigte/abgelehnte anrechnungen
-    $("#show-not-recommended").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter', [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_PROGRESSED_BY_STGL},
-                {field: 'empfehlung_anrechnung', type: '=', value: 'false'},
-            ]
-        );
-    });
-
-    // Show only rows with genehmigte anrechnungen
-    $("#show-approved").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_APPROVED}
-            ]
-        );
-    });
-
-    // Show only rows with abgelehnte anrechnungen
-    $("#show-rejected").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'status_kurzbz', type: '=', value: ANRECHNUNGSTATUS_REJECTED}
-            ]
-        );
-    });
-
-    /**
-     * Show all rows: clear filter and blur button
-     * Bootstrap button remains in activated style, even when clicking various times.
-     * This function "resets" button style and clear all tabulators filter.
-     * NOTE: MUST be after all other filters
-     */
-    $(".btn-clearfilter").click(function(){
-        if($(this).hasClass('active'))
-        {
-            $('#tableWidgetTabulator').tabulator('clearFilter');
-            $(this).blur();
-        }
-    })
-
-    // Ask ifRecommend Anrechnungen
-    $("#reviewAnrechnungUebersicht-recommend-anrechnungen-ask").click(function(){
-
-        begruendung_panel.css('display', 'none');
-
-        if (empfehlung_panel.is(":hidden"))
-        {
-            // Show begruendung panel if is hidden
-            empfehlung_panel.slideDown(400, function() {
-                $('html, body').animate({
-                    scrollTop: empfehlung_panel.offset().top // Move empfehlung panel bottom up to be visible within window screen
-                }, 400);
-            });
-            return;
-        }
-    });
-
-    // Recommend Anrechnungen
-    $("#reviewAnrechnungUebersicht-recommend-anrechnungen-confirm").click(function(e){
-
-        // Avoid bubbling click event to sibling break button
-        e.stopImmediatePropagation();
-
-        // Get selected rows data
-        let selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-            .map(function(data){
-                // reduce to necessary fields
-                return {
-                    'anrechnung_id' : data.anrechnung_id,
-                }
-            });
-
-        // Alert and exit if no anrechnung is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen"));
-            return;
-        }
-
-
-        // Prepare data object for ajax call
-        let data = {
-            'data': selected_data
-        };
-
-        // Hide empfehlung panel again
-        empfehlung_panel.slideUp('slow');
-
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/recommend",
-            data,
+      if (empfehlung_panel.is(":hidden")) {
+        // Show begruendung panel if is hidden
+        empfehlung_panel.slideDown(400, function () {
+          $("html, body").animate(
             {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (data.error && data.retval != null)
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertWarning(data.retval);
-                    }
+              scrollTop: empfehlung_panel.offset().top, // Move empfehlung panel bottom up to be visible within window screen
+            },
+            400
+          );
+        });
+        return;
+      }
+    }
+  );
 
-                    if (!data.error && data.retval != null)
-                    {
-                        // Update status 'genehmigt'
-                        $('#tableWidgetTabulator').tabulator('updateData', data.retval);
+  // Recommend Anrechnungen
+  $("#reviewAnrechnungUebersicht-recommend-anrechnungen-confirm").click(
+    function (e) {
+      // Avoid bubbling click event to sibling break button
+      e.stopImmediatePropagation();
 
-                        // Print success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "anrechnungenWurdenEmpfohlen"));
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
+      // Get selected rows data
+      let selected_data = $("#tableWidgetTabulator")
+        .tabulator("getSelectedData")
+        .map(function (data) {
+          // reduce to necessary fields
+          return {
+            anrechnung_id: data.anrechnung_id,
+          };
+        });
+
+      // Alert and exit if no anrechnung is selected
+      if (selected_data.length == 0) {
+        FHC_DialogLib.alertInfo(
+          FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen")
         );
-    });
+        return;
+      }
 
-    // Ask if Dont recommend Anrechnungen
-    $("#reviewAnrechnungUebersicht-dont-recommend-anrechnungen-ask").click(function(){
+      // Prepare data object for ajax call
+      let data = {
+        data: selected_data,
+      };
 
-        empfehlung_panel.css('display', 'none');
+      // Hide empfehlung panel again
+      empfehlung_panel.slideUp("slow");
 
-        if (begruendung_panel.is(":hidden"))
+      FHC_AjaxClient.ajaxCallPost(
+        FHC_JS_DATA_STORAGE_OBJECT.called_path + "/recommend",
+        data,
         {
-            // Show begruendung panel if is hidden
-            begruendung_panel.slideDown(400, function() {
-                $('html, body').animate({
-                    scrollTop: begruendung_panel.offset().top // Move genehmigung panel bottom up to be visible within window screen
-                }, 400);
-            });
-            return;
+          successCallback: function (data, textStatus, jqXHR) {
+
+            if (data.error && data.retval != null) {
+              // Print error message
+              FHC_DialogLib.alertWarning(data.retval);
+            }
+
+            if (!data.error && data.retval != null) {
+           
+              // Update status 'genehmigt'
+              $("#tableWidgetTabulator").tabulator("updateData", data.retval);
+              
+              // make all confirmed anrechnungen unselectable and deselect them
+              let selectedRows = $("#tableWidgetTabulator").tabulator("getSelectedRows");
+              selectedRows.forEach(row => {
+                row.update({...row.getData(), isSelectable:false});
+                row.reformat();
+              });
+
+              // deselect all selected rows
+              $("#tableWidgetTabulator").tabulator(
+                "deselectRow",
+                selectedRows
+              ); 
+
+              // Print success message
+              FHC_DialogLib.alertSuccess(
+                FHC_PhrasesLib.t("ui", "anrechnungenWurdenEmpfohlen")
+              );
+            }
+          },
+          errorCallback: function (jqXHR, textStatus, errorThrown) {
+            FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+          },
         }
-    });
+      );
+    }
+  );
 
-    // Dont recommend Anrechnungen
-    $("#reviewAnrechnungUebersicht-dont-recommend-anrechnungen-confirm").click(function(e){
+  // Ask if Dont recommend Anrechnungen
+  $("#reviewAnrechnungUebersicht-dont-recommend-anrechnungen-ask").click(
+    function () {
+      empfehlung_panel.css("display", "none");
 
-        // Avoid bubbling click event to sibling break button
-        e.stopImmediatePropagation();
-
-        let begruendung = $('#reviewAnrechnungUebersicht-begruendung').val();
-
-        empfehlung_panel.css('display', 'none');
-
-        // Check if begruendung is given
-        if (!begruendung.trim()) // empty or white spaces only
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteBegruendungAngeben"));
-            return;
-        }
-
-        // Get selected rows data and add begruendung
-        let selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-            .map(function(data){
-                // reduce to necessary fields
-                return {
-                    'anrechnung_id' : data.anrechnung_id,
-                    'begruendung'   : begruendung
-                }
-            });
-
-        // Alert and exit if no anrechnung is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo(FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen"));
-            return;
-        }
-
-        // Prepare data object for ajax call
-        let data = {
-            'data': selected_data
-        };
-
-        // Hide begruendung panel again
-        begruendung_panel.slideUp('slow');
-
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/dontRecommend",
-            data,
+      if (begruendung_panel.is(":hidden")) {
+        // Show begruendung panel if is hidden
+        begruendung_panel.slideDown(400, function () {
+          $("html, body").animate(
             {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (data.error && data.retval != null)
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertWarning(data.retval);
-                    }
+              scrollTop: begruendung_panel.offset().top, // Move genehmigung panel bottom up to be visible within window screen
+            },
+            400
+          );
+        });
+        return;
+      }
+    }
+  );
 
-                    if (!data.error && data.retval != null)
-                    {
-                        // Update status 'genehmigt'
-                        $('#tableWidgetTabulator').tabulator('updateData', data.retval);
+  // Dont recommend Anrechnungen
+  $("#reviewAnrechnungUebersicht-dont-recommend-anrechnungen-confirm").click(
+    function (e) {
+      // Avoid bubbling click event to sibling break button
+      e.stopImmediatePropagation();
 
-                        // Print success message
-                        FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "anrechnungenWurdenNichtEmpfohlen"));
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
-                }
-            }
+      let begruendung = $("#reviewAnrechnungUebersicht-begruendung").val();
+
+      empfehlung_panel.css("display", "none");
+
+      // Check if begruendung is given
+      if (!begruendung.trim()) {
+        // empty or white spaces only
+        FHC_DialogLib.alertInfo(
+          FHC_PhrasesLib.t("ui", "bitteBegruendungAngeben")
         );
-    });
+        return;
+      }
 
-    // Break Empfehlung abgeben
-    $('#reviewAnrechnungUebersicht-empfehlung-abbrechen').click(function(){
-        empfehlung_panel.slideUp('slow');
+      // Get selected rows data and add begruendung
+      let selected_data = $("#tableWidgetTabulator")
+        .tabulator("getSelectedData")
+        .map(function (data) {
+          // reduce to necessary fields
+          return {
+            anrechnung_id: data.anrechnung_id,
+            begruendung: begruendung,
+          };
+        });
 
-    })
+      // Alert and exit if no anrechnung is selected
+      if (selected_data.length == 0) {
+        FHC_DialogLib.alertInfo(
+          FHC_PhrasesLib.t("ui", "bitteMindEinenAntragWaehlen")
+        );
+        return;
+      }
 
-    // Break Begruendung abgeben
-    $('#reviewAnrechnungUebersicht-begruendung-abbrechen').click(function(){
+      // Prepare data object for ajax call
+      let data = {
+        data: selected_data,
+      };
 
-        begruendung_panel.slideUp('slow');
+      // Hide begruendung panel again
+      begruendung_panel.slideUp("slow");
 
-    })
+      FHC_AjaxClient.ajaxCallPost(
+        FHC_JS_DATA_STORAGE_OBJECT.called_path + "/dontRecommend",
+        data,
+        {
+          successCallback: function (data, textStatus, jqXHR) {
+            if (data.error && data.retval != null) {
+              // Print error message
+              FHC_DialogLib.alertWarning(data.retval);
+            }
 
-    // Copy Begruendung into textarea
-    $(".btn-copyIntoTextarea").click(function(){
-        reviewAnrechnung.copyIntoTextarea(this);
-    })
+            if (!data.error && data.retval != null) {
+              // Update status 'genehmigt'
+              $("#tableWidgetTabulator").tabulator("updateData", data.retval);
+
+              const selectedRows = $("#tableWidgetTabulator").tabulator("getSelectedRows");
+
+              // makes all denied anrechnungen unselectable by adding the isSelectable property and retriggering the rowFormatter function
+              selectedRows.forEach(row=>{
+                row.update({...row.getData(), isSelectable:false});
+                row.reformat();
+              })
+
+              // deselect all selected rows
+              $("#tableWidgetTabulator").tabulator("deselectRow", selectedRows);
+
+              // Print success message
+              FHC_DialogLib.alertSuccess(
+                FHC_PhrasesLib.t("ui", "anrechnungenWurdenNichtEmpfohlen")
+              );
+            }
+          },
+          errorCallback: function (jqXHR, textStatus, errorThrown) {
+            FHC_DialogLib.alertError(FHC_PhrasesLib.t("ui", "systemfehler"));
+          },
+        }
+      );
+    }
+  );
+
+  // Break Empfehlung abgeben
+  $("#reviewAnrechnungUebersicht-empfehlung-abbrechen").click(function () {
+    empfehlung_panel.slideUp("slow");
+  });
+
+  // Break Begruendung abgeben
+  $("#reviewAnrechnungUebersicht-begruendung-abbrechen").click(function () {
+    begruendung_panel.slideUp("slow");
+  });
+
+  // Copy Begruendung into textarea
+  $(".btn-copyIntoTextarea").click(function () {
+    reviewAnrechnung.copyIntoTextarea(this);
+  });
 });
 
 var reviewAnrechnung = {
-    setStatusAlertColor: function () {
-        let status_kurzbz = $('#reviewAnrechnung-status_kurzbz').data('status_kurzbz');
+  copyIntoTextarea: function (elem) {
+    // Find closest textarea
+    let textarea = $(elem).closest("div").find("textarea");
 
-        switch (status_kurzbz) {
-            case ANRECHNUNGSTATUS_APPROVED:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-success');
-                break;
-            case ANRECHNUNGSTATUS_REJECTED:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-danger');
-                break;
-            case '':
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-info');
-                break;
-            default:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-warning');
-        }
-    },
-    copyIntoTextarea: function(elem){
-
-        // Find closest textarea
-        let textarea = $(elem).closest('div').find('textarea');
-
-        // Copy begruendung into textarea and set focus
-        textarea.val($.trim($(elem).parent().text())).focus();
-    }
-}
+    // Copy begruendung into textarea and set focus
+    textarea.val($.trim($(elem).parent().text())).focus();
+  },
+};
diff --git a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js
index 08a0645bc..b1142ff34 100644
--- a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js
+++ b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js
@@ -9,27 +9,21 @@
 // -----------------------------------------------------------------------------------------------------------------
 const APP_ROOT = FHC_JS_DATA_STORAGE_OBJECT.app_root;
 
-const COLOR_LIGHTGREY = "#f5f5f5";
-
-/**
- * PNG icons used in status- and filter buttons
- * Setting png icons is a workaround to use font-awsome 5.9.0 icons until system can be updated to newer font awsome version.
- * */
-const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_CANCELLED = '<img src="../../../public/images/icons/fa-user-times.png" style="height: 30px; width: 30px; margin: -6px;">';
+const TABLE_CANCELLED_LEHRAUFTRAG =
+  "[tableuniqueid = cancelledLehrauftrag] #tableWidgetTabulator";
+const TABLE_ACCEPT_LEHRAUFTRAG =
+  "[tableuniqueid = acceptLehrauftrag] #tableWidgetTabulator";
 
 // Fields that should not be provided in the column picker
 var tableWidgetBlacklistArray_columnUnselectable = [
-	'status',
-	'row_index',
-	'betrag',
-	'vertrag_id',
-	'vertrag_stunden',
-	'vertrag_betrag',
-	'storniert_von',				// fields from cancelledLehrauftragData
-	'letzterStatus_vorStorniert'	// fields from cancelledLehrauftragData
+  "status",
+  "row_index",
+  "betrag",
+  "vertrag_id",
+  "vertrag_stunden",
+  "vertrag_betrag",
+  "storniert_von", // fields from cancelledLehrauftragData
+  "letzterStatus_vorStorniert", // fields from cancelledLehrauftragData
 ];
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -38,56 +32,64 @@ var tableWidgetBlacklistArray_columnUnselectable = [
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var mut_formatStringDate = function(value, data, type, params, component) {
-	if (value != null)
-	{
-		var d = new Date(value);
-		return ("0" + (d.getDate())).slice(-2)  + "." + ("0"+(d.getMonth()+1)).slice(-2) + "." + d.getFullYear();
-	}
-}
+var mut_formatStringDate = function (value, data, type, params, component) {
+  if (value != null) {
+    var d = new Date(value);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Formatters - changes display information, not the data itself
 // -----------------------------------------------------------------------------------------------------------------
 
 // Formats null values to a string number '0.00'
-var form_formatNulltoStringNumber = function(cell, formatterParams){
-	if (cell.getValue() == null){
-		if (formatterParams.precision == 1)
-		{
-			return '0.0';
-		}
-		return '0.00';
-	}
-	else {
-		return cell.getValue();
-	}
-}
+var form_formatNulltoStringNumber = function (
+  cell,
+  formatterParams,
+  onRendered
+) {
+  if (cell.getValue() == null) {
+    if (formatterParams.precision == 1) {
+      return "0.0";
+    }
+    return "0.00";
+  } else {
+    return cell.getValue();
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Header filter
 // -----------------------------------------------------------------------------------------------------------------
 
 // Filters values using comparison operator or just by string comparison
-function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
+function hf_filterStringnumberWithOperator(
+  headerValue,
+  rowValue,
+  rowData,
+  filterParams
+) {
+  // If string starts with <, <=, >, >=, !=, ==, compare values with that operator
+  var operator = "";
+  if (headerValue.match(/([<=>!]{1,2})/g)) {
+    var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
+    operator = operator_arr[0];
 
-	// If string starts with <, <=, >, >=, !=, ==, compare values with that operator
-	var operator = '';
-	if (headerValue.match(/([<=>!]{1,2})/g)) {
-		var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
-		operator = operator_arr[0];
+    headerValue = headerValue.replace(operator, "").trim();
 
-		headerValue = headerValue
-			.replace(operator, '')
-			.trim()
-		;
+    // return if value comparison is true
+    return eval(rowValue + operator + headerValue);
+  }
 
-		// return if value comparison is true
-		return eval(rowValue + operator + headerValue);
-	}
-
-	// If just a stringnumber, return if exact match found
-	return parseFloat(rowValue) == headerValue;
+  // If just a stringnumber, return if exact match found
+  return parseFloat(rowValue) == headerValue;
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -95,175 +97,159 @@ function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
 // -----------------------------------------------------------------------------------------------------------------
 
 // Returns relative height (depending on screen size)
-function func_height(table){
-	return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Formats the rows
-function func_rowFormatter(row){
-	var bestellt = row.getData().bestellt;
-	var erteilt = row.getData().erteilt;
-	var akzeptiert = row.getData().akzeptiert;
+function func_rowFormatter(row) {
+  var bestellt = row.getData().bestellt;
+  var erteilt = row.getData().erteilt;
+  var akzeptiert = row.getData().akzeptiert;
 
-	var stunden = parseFloat(row.getData().stunden);
-	var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-	var betrag = parseFloat(row.getData().betrag);
-	var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	/*
+  /*
 	 Formats the color of the rows depending on their status
 	 - orange: geaendert
 	 - default: bestellte und erteilte (= zu akzeptierende)
 	 - green: akzeptierte
 	 - grey: all other (marks unselectable)
 	 */
-	row.getCells().forEach(function(cell){
-		if (bestellt != null && (betrag != vertrag_betrag) ||
-			bestellt != null && stunden != vertrag_stunden)
-		{
-			cell.getElement().classList.add('bg-warning');                  // geaenderte
-		}
-		else if(bestellt != null && erteilt != null && akzeptiert == null)
-		{
-			return;                                                         // bestellte + erteilte
-		}
-		else if(bestellt != null && erteilt != null && akzeptiert != null)
-		{
-			cell.getElement().classList.add('bg-success')                   // akzeptierte
-		}
-		else
-		{
-			row.getElement().style["background-color"] = COLOR_LIGHTGREY;   // default
-		}
-	});
+  row.getCells().forEach(function (cell) {
+    if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null && stunden != vertrag_stunden)
+    ) {
+      cell.getElement().classList.add("bg-warning"); // geaenderte
+    } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+      return; // bestellte + erteilte
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      cell.getElement().classList.add("bg-success"); // akzeptierte
+    }
+  });
 }
 
 // Formats row selectable/unselectable
-function func_selectableCheck(row){
-	var stunden = parseFloat(row.getData().stunden);
-	var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+function func_selectableCheck(row) {
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-	var betrag = parseFloat(row.getData().betrag);
-	var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-	var is_storniert = row.getData().storniert != undefined;
+  var is_storniert = row.getData().storniert != undefined;
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	// only allow to select bestellte && erteilte && nicht geaenderte Lehraufträge
-	return  row.getData().bestellt != null &&   // bestellt
-		row.getData().erteilt != null &&        // AND erteilt
-		row.getData().akzeptiert == null &&     // AND nicht akzeptiert
-		betrag == vertrag_betrag &&
-		stunden == vertrag_stunden &&           // AND nicht geaendert
-		!is_storniert;                          // AND nicht storniert
+  // only allow to select bestellte && erteilte && nicht geaenderte Lehraufträge
+  return (
+    row.getData().bestellt != null && // bestellt
+    row.getData().erteilt != null && // AND erteilt
+    row.getData().akzeptiert == null && // AND nicht akzeptiert
+    betrag == vertrag_betrag &&
+    stunden == vertrag_stunden && // AND nicht geaendert
+    !is_storniert
+  ); // AND nicht storniert
 }
 
 // Adds column status
 function func_tableBuilt(table) {
-	// Add status column to table
-	table.addColumn(
-		{
-			title: "<i class='fa fa-user-o'></i>",
-			field: "status",
-			width:40,
-			align:"center",
-			downloadTitle: 'Status',
-			formatter: status_formatter,
-			tooltip: status_tooltip
-		}, true
-	);
+  // Add status column to table
+  table.addColumn(
+    {
+      title: "<i class='fa fa-user'></i>",
+      field: "status",
+      width: 40,
+      hozAlign: "center",
+      downloadTitle: "Status",
+      formatter: status_formatter,
+      tooltip: status_tooltip,
+    },
+    true
+  );
+
+  // fully redrawing the table after adding the Details column
+  table.redraw(true);
 }
 
 // Sets status values into column status
-function func_renderStarted(table){
-	// Set literally status to each row - this enables sorting by status despite using icons
-	table.getRows().forEach(function(row){
-		var bestellt = row.getData().bestellt;
-		var erteilt = row.getData().erteilt;
-		var akzeptiert = row.getData().akzeptiert;
+function func_renderStarted(table) {
+  // Set literally status to each row - this enables sorting by status despite using icons
+  table.getRows().forEach(function (row) {
+    var bestellt = row.getData().bestellt;
+    var erteilt = row.getData().erteilt;
+    var akzeptiert = row.getData().akzeptiert;
 
-		var stunden = parseFloat(row.getData().stunden);
-		var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+    var stunden = parseFloat(row.getData().stunden);
+    var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-		var betrag = parseFloat(row.getData().betrag);
-		var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+    var betrag = parseFloat(row.getData().betrag);
+    var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-		if (isNaN(betrag))
-		{
-			betrag = 0;
-		}
+    if (isNaN(betrag)) {
+      betrag = 0;
+    }
 
-		if ((bestellt != null && betrag != vertrag_betrag) ||
-			(bestellt != null && stunden != vertrag_stunden))
-		{
-			row.getData().status = 'Geändert';      // geaendert
-		}
-		else if (bestellt == null && erteilt == null && akzeptiert == null)
-		{
-			row.getData().status = 'Neu';           // neu
-		}
-		else if (bestellt != null && erteilt == null && akzeptiert == null)
-		{
-			row.getData().status = 'Bestellt';      // bestellt
-		}
-		else if (bestellt != null && erteilt != null && akzeptiert == null)
-		{
-			row.getData().status = 'Erteilt';       // erteilt
-		}
-		else if (bestellt != null && erteilt != null && akzeptiert != null)
-		{
-			row.getData().status = 'Akzeptiert';    // akzeptiert
-		}
-		else
-		{
-			row.getData().status = null;            // default
-		}
-	});
+    if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null && stunden != vertrag_stunden)
+    ) {
+      row.getData().status = "Geändert"; // geaendert
+    } else if (bestellt == null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Neu"; // neu
+    } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Bestellt"; // bestellt
+    } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+      row.getData().status = "Erteilt"; // erteilt
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      row.getData().status = "Akzeptiert"; // akzeptiert
+    } else {
+      row.getData().status = null; // default
+    }
+  });
 }
 
 // Performes after row was updated
-function func_rowUpdated(row){
+function func_rowUpdated(row) {
+  // Refresh status icon and row color
+  row.reformat(); // retriggers cell formatters and rowFormatter callback
 
-	// Refresh status icon and row color
-	row.reformat(); // retriggers cell formatters and rowFormatter callback
-
-	// Deselect and disable new selection of updated rows
-	row.deselect();
-	row.getElement().style["pointerEvents"] = "none";
+  // Deselect and disable new selection of updated rows
+  row.deselect();
+  row.getElement().style["pointerEvents"] = "none";
 }
 
 // Hide betrag, if lector has inkludierte Lehre
-function func_renderComplete(table){
-
-	// Check if the lectors actual Verwendung has inkludierte Lehre
-	FHC_AjaxClient.ajaxCallGet(
-		FHC_JS_DATA_STORAGE_OBJECT.called_path + "/checkInkludierteLehre",
-		null,
-		{
-			successCallback: function (data, textStatus, jqXHR)
-			{
-				// If lector has inkludierte Lehre, hide the column betrag
-				if (data.retval)
-				{
-					table.hideColumn("betrag");
-				}
-			},
-			errorCallback: function (jqXHR, textStatus, errorThrown)
-			{
-				FHC_DialogLib.alertError("Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator.");
-			}
-		}
-	);
+function func_renderComplete(table) {
+  // Check if the lectors actual Verwendung has inkludierte Lehre
+  FHC_AjaxClient.ajaxCallGet(
+    FHC_JS_DATA_STORAGE_OBJECT.called_path + "/checkInkludierteLehre",
+    null,
+    {
+      successCallback: function (data, textStatus, jqXHR) {
+        // If lector has inkludierte Lehre, hide the column betrag
+        if (data.retval) {
+          table.hideColumn("betrag");
+        }
+      },
+      errorCallback: function (jqXHR, textStatus, errorThrown) {
+        FHC_DialogLib.alertError(
+          "Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator."
+        );
+      },
+    }
+  );
 }
 
 // TableWidget Footer element
@@ -273,342 +259,388 @@ function func_renderComplete(table){
  * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows that are bestellt and erteilt
  */
-function tableWidgetHook_selectAllButton(tableWidgetDiv){
-	var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
-		.filter(row =>  row.getData().bestellt != null &&	// bestellt
-			row.getData().erteilt != null &&				// AND erteilt
-			row.getData().akzeptiert == null &&				// AND NOT akzeptiert
-			row.getData().status != 'Geändert');				// AND NOT geändert
+function tableWidgetHook_selectAllButton(tableWidgetDiv) {
+  var resultRows = tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getRows", true)
+    .filter(
+      (row) =>
+        row.getData().bestellt != null && // bestellt
+        row.getData().erteilt != null && // AND erteilt
+        row.getData().akzeptiert == null && // AND NOT akzeptiert
+        row.getData().status != "Geändert"
+    ); // AND NOT geändert
 
-	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', resultRows);
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("selectRow", resultRows);
 }
 
 // -----------------------------------------------------------------------------------------------------------------
 // Tabulator columns format functions
 // -----------------------------------------------------------------------------------------------------------------
 // Generates status icons
-status_formatter = function(cell, formatterParams, onRendered){
+status_formatter = function (cell, formatterParams, onRendered) {
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
+  var is_storniert = cell.getRow().getData().storniert != undefined;
 
-	var bestellt = cell.getRow().getData().bestellt;
-	var erteilt = cell.getRow().getData().erteilt;
-	var akzeptiert = cell.getRow().getData().akzeptiert;
-	var is_storniert = cell.getRow().getData().storniert != undefined;
+  var stunden = parseFloat(cell.getRow().getData().stunden);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
 
-	var stunden = parseFloat(cell.getRow().getData().stunden);
-	var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
 
-	var betrag = parseFloat(cell.getRow().getData().betrag);
-	var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
-
-	// commented icons would be so nice to have with fontawsome 5.11...
-	if (bestellt != null && isNaN(vertrag_betrag))
-	{
-		return "<i class='fas fa-user-minus'></i>";     // kein Vertrag
-	}
-	else if (bestellt != null && (betrag != vertrag_betrag) ||
-		bestellt != null && stunden != vertrag_stunden)
-	{
-		return ICON_LEHRAUFTRAG_CHANGED;               // geaendert
-		// return "<i class='fas fa-user-edit'></i>";
-	}
-	else if (bestellt == null && erteilt == null && akzeptiert == null && !is_storniert)
-	{
-		return "<i class='fa fa-user-plus'></i>";       // neu
-	}
-	else if (bestellt != null && erteilt == null && akzeptiert == null)
-	{
-		return ICON_LEHRAUFTRAG_ORDERED;                // bestellt
-		// return "<i class='fa fa-user-tag'></i>";
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert == null)
-	{
-		return ICON_LEHRAUFTRAG_APPROVED;               // erteilt
-		// return "<i class='fas fa-user-check'></i>";
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert != null)
-	{
-		return "<i class='fa fa-handshake-o'></i>";     // akzeptiert
-		// return "<i class='fas fa-user-graduate'></i>";
-	}
-	else if (is_storniert)
-	{
-		return ICON_LEHRAUFTRAG_CANCELLED;     			// storniert
-	}
-	else
-	{
-		return "<i class='fa fa-user'></i>";            // default
-	}
+  // commented icons would be so nice to have with fontawsome 5.11...
+  if (bestellt != null && isNaN(vertrag_betrag)) {
+    return "<i class='fa fa-user-minus'></i>"; // kein Vertrag
+  } else if (
+    (bestellt != null && betrag != vertrag_betrag) ||
+    (bestellt != null && stunden != vertrag_stunden)
+  ) {
+    return "<i class='fa fa-user-pen'></i>";
+  } else if (
+    bestellt == null &&
+    erteilt == null &&
+    akzeptiert == null &&
+    !is_storniert
+  ) {
+    return "<i class='fa fa-user-plus'></i>"; // neu
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    return "<i class='fa fa-user-tag'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    return "<i class='fa fa-user-check'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    return "<i class='fa-regular fa-handshake'></i>"; // akzeptiert  
+  } else if (is_storniert) {
+    return "<i class='fa-solid fa-user-xmark'></i>"; // storniert
+  } else {
+    return "<i class='fa fa-user'></i>"; // default
+  }
 };
 
 // Generates status tooltip
-status_tooltip = function(cell){
-	var bestellt = cell.getRow().getData().bestellt;
-	var erteilt = cell.getRow().getData().erteilt;
-	var akzeptiert = cell.getRow().getData().akzeptiert;
-	var is_storniert = cell.getRow().getData().storniert != undefined;
-	var letzterStatus_vorStorniert = cell.getRow().getData().letzterStatus_vorStorniert;
+status_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
 
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
+  var is_storniert = cell.getRow().getData().storniert != undefined;
+  var letzterStatus_vorStorniert = cell
+    .getRow()
+    .getData().letzterStatus_vorStorniert;
 
-	var stunden = parseFloat(cell.getRow().getData().stunden);
-	var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var stunden = parseFloat(cell.getRow().getData().stunden);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
 
-	var betrag = parseFloat(cell.getRow().getData().betrag);
-	var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (letzterStatus_vorStorniert != undefined && letzterStatus_vorStorniert == 'akzeptiert')
-	{
-		letzterStatus_vorStorniert = 'angenommen';
-	}
+  if (
+    letzterStatus_vorStorniert != undefined &&
+    letzterStatus_vorStorniert == "akzeptiert"
+  ) {
+    letzterStatus_vorStorniert = "angenommen";
+  }
 
-	var text = FHC_PhrasesLib.t("ui", "lehrauftragInBearbeitung");
+  var text = FHC_PhrasesLib.t("ui", "lehrauftragInBearbeitung");
 
-	if (bestellt != null && erteilt == null && akzeptiert == null
-		&& (betrag != vertrag_betrag || stunden != vertrag_stunden))        // geaendert (when never erteilt before)
-	{
-		text += FHC_PhrasesLib.t("ui", "wartetAufErteilung");;
-		return text;
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert == null
-		&& (betrag != vertrag_betrag || stunden != vertrag_stunden))        // geaendert (when has been erteilt once)
-	{
-		text += FHC_PhrasesLib.t("ui", "wartetAufErneuteErteilung");
-		return text;
-	}
-	else if (bestellt != null && erteilt == null && akzeptiert == null)     // bestellt
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert == null)     // erteilt
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert != null)     // akzeptiert
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
-	}
-	else if (is_storniert)													// storniert
-	{
-		return FHC_PhrasesLib.t("ui", "vertragWurdeStorniert");
-	}
-}
+  if (
+    bestellt != null &&
+    erteilt == null &&
+    akzeptiert == null &&
+    (betrag != vertrag_betrag || stunden != vertrag_stunden)
+  ) {
+    // geaendert (when never erteilt before)
+    text += FHC_PhrasesLib.t("ui", "wartetAufErteilung");
+    return text;
+  } else if (
+    bestellt != null &&
+    erteilt != null &&
+    akzeptiert == null &&
+    (betrag != vertrag_betrag || stunden != vertrag_stunden)
+  ) {
+    // geaendert (when has been erteilt once)
+    text += FHC_PhrasesLib.t("ui", "wartetAufErneuteErteilung");
+    return text;
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    // bestellt
+    return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    // erteilt
+    return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    // akzeptiert
+    return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
+  } else if (is_storniert) {
+    // storniert
+    return FHC_PhrasesLib.t("ui", "vertragWurdeStorniert");
+  }
+};
 
 // Generates bestellt tooltip
-bestellt_tooltip = function(cell){
-	if (cell.getRow().getData().bestellt_von != null)
-	{
-		return FHC_PhrasesLib.t("ui", "bestelltVon") + cell.getRow().getData().bestellt_von;
-	}
-}
+bestellt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().bestellt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "bestelltVon") +
+      cell.getRow().getData().bestellt_von
+    );
+  }
+};
 
 // Generates erteilt tooltip
-erteilt_tooltip = function(cell){
-	if (cell.getRow().getData().erteilt_von != null) {
-		return FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von;
-	}
-}
+erteilt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().erteilt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von
+    );
+  }
+};
 
 // Generates akzeptiert tooltip
-akzeptiert_tooltip = function(cell){
-	if (cell.getRow().getData().akzeptiert_von != null) {
-		return FHC_PhrasesLib.t("ui", "angenommenVon") + cell.getRow().getData().akzeptiert_von;
-	}
-}
+akzeptiert_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().akzeptiert_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "angenommenVon") +
+      cell.getRow().getData().akzeptiert_von
+    );
+  }
+};
 
 // Generates storniert tooltip
-storniert_tooltip = function(cell){
-	if (cell.getRow().getData().storniert_von != null) {
-		return FHC_PhrasesLib.t("ui", "storniertVon") + cell.getRow().getData().storniert_von;
-	}
-}
+storniert_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
 
-$(function() {
-	// Pruefen ob Promise unterstuetzt wird
-	// Tabulator funktioniert nicht mit IE
-	var canPromise = !! window.Promise;
-	if(!canPromise)
-	{
-		alert("Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen");
-		window.location.href='about:blank';
-		return;
-	}
+  if (cell.getRow().getData().storniert_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "storniertVon") +
+      cell.getRow().getData().storniert_von
+    );
+  }
+};
 
-	// Redraw table on resize to fit tabulators height to windows height
-	window.addEventListener('resize', function(){
-		$('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
-		$('#tableWidgetTabulator').tabulator('redraw', true);
-	});
+$(function () {
+  // Pruefen ob Promise unterstuetzt wird
+  // Tabulator funktioniert nicht mit IE
 
-	// Show all rows
-	$("#show-all").click(function(){
-		$('#tableWidgetTabulator').tabulator('clearFilter');
-	});
+  // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    //passing the tabulator instance because the acceptLehrauftrag site loads two tabulator tables
+    func_tableBuilt(tabulatorInstance);
+    
+    let uniqueTableID = tabulatorInstance.element.closest('[tableuniqueid]').attributes.tableuniqueid.value;
+    
+    switch (uniqueTableID) {
+      case "cancelledLehrauftrag":
+        tabulatorInstance.on("renderComplete", () => {
+          func_renderComplete(tabulatorInstance);
+        });
+        break;
+      case "acceptLehrauftrag":
+        tabulatorInstance.on("renderComplete", () => {
+          func_renderComplete(tabulatorInstance);
+        });
+        tabulatorInstance.on("renderStarted", () => {
+          func_renderStarted(tabulatorInstance);
+        });
+        tabulatorInstance.on("rowUpdated", (row) => {
+          func_rowUpdated(row);
+        });
+        break;
+      // if the function findTableUniqueID returned null because it couldnt find the attribute tableuniqueid
+      default:
+        break;
+    }
+  });
 
-	// Show only rows with ordered lehrauftraege
-	$("#show-ordered").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				{field: 'bestellt', type: '!=', value: null},
-				{field: 'erteilt', type: '=', value: null},
-				{field: 'akzeptiert', type: '=', value: null}
-			]
-		);
-	});
+  var canPromise = !!window.Promise;
+  if (!canPromise) {
+    alert(
+      "Diese Seite kann mit ihrem Browser nicht angezeigt werden. Bitte verwenden Sie Firefox, Chrome oder Edge um die Seite anzuzeigen"
+    );
+    window.location.href = "about:blank";
+    return;
+  }
 
-	// Show only rows with erteilte lehrauftraege
-	$("#show-approved").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter', [
-				{field: 'bestellt', type: '!=', value: null},   // filter when is bestellt
-				{field: 'erteilt', type: '!=', value: null},    // and is erteilt
-				{field: 'akzeptiert', type: '=', value: null}  // and is not akzeptiert
-			]
-		);
-	});
+  // Redraw table on resize to fit tabulators height to windows height
+  window.addEventListener("resize", function () {
+    $("#tableWidgetTabulator").tabulator("setHeight", $(window).height() * 0.5);
+    $("#tableWidgetTabulator").tabulator("redraw", true);
+  });
 
-	// Show only rows with akzeptierte lehrauftraege
-	$("#show-accepted").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				{field: 'bestellt', type: '!=', value: null},
-				{field: 'erteilt', type: '!=', value: null},
-				{field: 'akzeptiert', type: '!=', value: null}
-			]
-		);
-	});
+  // Show all rows
+  $("#show-all").click(function () {
+    $("#tableWidgetTabulator").tabulator("clearFilter");
+  });
 
-	// Set png-icons into filter-buttons
-	$(".btn-lehrauftrag").each(function(){
-		switch(this.id) {
-			case 'show-ordered':
-				this.innerHTML = ICON_LEHRAUFTRAG_ORDERED;
-				break;
-			case 'show-approved':
-				this.innerHTML = ICON_LEHRAUFTRAG_APPROVED;
-				break;
-			case 'show-cancelled':
-				this.innerHTML = ICON_LEHRAUFTRAG_CANCELLED;
-				break;
-		}
-	});
+  // Show only rows with ordered lehrauftraege
+  $("#show-ordered").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
 
-	// De/activate and un/focus on clicked button
-	$(".btn-lehrauftrag").click(function() {
+  // Show only rows with erteilte lehrauftraege
+  $("#show-approved").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null }, // filter when is bestellt
+      { field: "erteilt", type: "!=", value: null }, // and is erteilt
+      { field: "akzeptiert", type: "=", value: null }, // and is not akzeptiert
+    ]);
+  });
 
-		// De/activate and un/focus on clicked button
-		$(".btn-lehrauftrag").removeClass('focus').removeClass('active');
-		$(this).addClass('focus').addClass('active');
-	});
+  // Show only rows with akzeptierte lehrauftraege
+  $("#show-accepted").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "!=", value: null },
+      { field: "akzeptiert", type: "!=", value: null },
+    ]);
+  });
 
-	// Performs download PDF accepted Lehrauftraege
-	$("#ul-download-pdf").on('click', 'li', function(){
-		var uid = $("#uid").val();
-		var studiensemester = $('#studiensemester').val();
+  // De/activate and un/focus on clicked button
+  $(".btn-lehrauftrag").click(function () {
+    // De/activate and un/focus on clicked button
+    $(".btn-lehrauftrag").removeClass("focus").removeClass("active");
+    $(this).addClass("focus").addClass("active");
+  });
 
-		if ($(this).attr('value') != null && $(this).attr('value') != '')
-		{
-			var selected = $(this).attr('value');
+  // Performs download PDF accepted Lehrauftraege
+  $("#ul-download-pdf").on("click", "li", function () {
+    var uid = $("#uid").val();
+    var studiensemester = $("#studiensemester").val();
 
-			if (selected == 'etw' || selected == 'lehrgang')
-			{
-				window.open(APP_ROOT + 'cis/private/pdfExport.php' +
-					'?xml=lehrauftrag_annehmen.xml.php' +
-					'&xsl=Lehrauftrag' +
-					'&xsl_oe_kurzbz=' + selected +
-					'&stg_kz=' +
-					'&uid=' + uid +
-					'&ss=' + studiensemester, '_parent'
-				);
-			}
-		}
-	});
+    if ($(this).attr("value") != null && $(this).attr("value") != "") {
+      var selected = $(this).attr("value");
 
-	// Redraw table stornierte lehrauftraege on button click
-	$('#collapseCancelledLehrauftraege').on('shown.bs.collapse', function () {
-		$('[tableuniqueid = cancelledLehrauftrag] #tableWidgetTabulator').tabulator('redraw', true);
-	});
+      if (selected == "etw" || selected == "lehrgang") {
+        window.open(
+          APP_ROOT +
+            "cis/private/pdfExport.php" +
+            "?xml=lehrauftrag_annehmen.xml.php" +
+            "&xsl=Lehrauftrag" +
+            "&xsl_oe_kurzbz=" +
+            selected +
+            "&stg_kz=" +
+            "&uid=" +
+            uid +
+            "&ss=" +
+            studiensemester,
+          "_parent"
+        );
+      }
+    }
+  });
 
-	// Approve Lehrauftraege
-	$("#accept-lehrauftraege").click(function(){
+  // Redraw table stornierte lehrauftraege on button click
+  $("#collapseCancelledLehrauftraege").on("shown.bs.collapse", function () {
+    $("[tableuniqueid = cancelledLehrauftrag] #tableWidgetTabulator").tabulator(
+      "redraw",
+      true
+    );
+  });
 
-		// Get selected rows data
-		var selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-			.map(function(data){
-				// reduce to necessary fields
-				return {
-					'row_index' : data.row_index,
-					'vertrag_id' : data.vertrag_id
-				}
-			});
+  // Approve Lehrauftraege
+  $("#accept-lehrauftraege").click(function () {
+    // Get selected rows data
+    var selected_data = $("#tableWidgetTabulator")
+      .tabulator("getSelectedData")
+      .map(function (data) {
+        // reduce to necessary fields
+        return {
+          row_index: data.row_index,
+          vertrag_id: data.vertrag_id,
+        };
+      });
 
-		// Alert and exit if no lehraufgang is selected
-		if (selected_data.length == 0)
-		{
-			FHC_DialogLib.alertInfo('Bitte wählen Sie erst zumindest einen Lehrauftrag');
+    // Alert and exit if no lehraufgang is selected
+    if (selected_data.length == 0) {
+      FHC_DialogLib.alertInfo(
+        "Bitte wählen Sie erst zumindest einen Lehrauftrag"
+      );
 
-			// Emtpy password field
-			$("#password").val('');
+      // Emtpy password field
+      $("#password").val("");
 
-			return;
-		}
+      return;
+    }
 
-		// Get password for verification
-		var password = $("#password").val();
-		if (password == '')
-		{
-			FHC_DialogLib.alertInfo('Bitte verifizieren Sie sich mit Ihrem Login Passwort.');
+    // Get password for verification
+    var password = $("#password").val();
+    if (password == "") {
+      FHC_DialogLib.alertInfo(
+        "Bitte verifizieren Sie sich mit Ihrem Login Passwort."
+      );
 
-			// Focus on password field
-			$("#password").focus();
+      // Focus on password field
+      $("#password").focus();
 
-			return;
-		}
+      return;
+    }
 
-		// Prepare data object for ajax call
-		var data = {
-			'password': password,
-			'selected_data': selected_data
-		};
+    // Prepare data object for ajax call
+    var data = {
+      password: password,
+      selected_data: selected_data,
+    };
 
-		FHC_AjaxClient.ajaxCallPost(
-			FHC_JS_DATA_STORAGE_OBJECT.called_path + "/acceptLehrauftrag",
-			data,
-			{
-				successCallback: function (data, textStatus, jqXHR)
-				{
-					if (data.error && data.retval != null)
-					{
-						// Print error message
-						FHC_DialogLib.alertWarning(data.retval);
-					}
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/acceptLehrauftrag",
+      data,
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (data.error && data.retval != null) {
+            // Print error message
+            FHC_DialogLib.alertWarning(data.retval);
+          }
 
-					if (!data.error && data.retval != null)
-					{
-						// Update status 'Erteilt'
-						$('#tableWidgetTabulator').tabulator('updateData', data.retval);
+          if (!data.error && data.retval != null) {
+            // Update status 'Erteilt'
+            $("#tableWidgetTabulator").tabulator("updateData", data.retval);
 
-						// Print success message
-						FHC_DialogLib.alertSuccess(data.retval.length + " Lehraufträge wurden akzeptiert.");
-					}
-				},
-				errorCallback: function (jqXHR, textStatus, errorThrown)
-				{
-					FHC_DialogLib.alertError("Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator.");
-				}
-			}
-		);
-
-		// Empty password field
-		$("#password").val('');
-
-	});
+            // Print success message
+            FHC_DialogLib.alertSuccess(
+              data.retval.length + " Lehraufträge wurden akzeptiert."
+            );
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(
+            "Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator."
+          );
+        },
+      }
+    );
 
+    // Empty password field
+    $("#password").val("");
+  });
 });
diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js
index c16016cf5..3d8993fc3 100644
--- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js
+++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js
@@ -4,30 +4,19 @@
  * Lehrauftraege erteilen - Tabulator: approveLehrauftragData.php
  */
 
-
 // -----------------------------------------------------------------------------------------------------------------
 // Global vars
 // -----------------------------------------------------------------------------------------------------------------
 
-const COLOR_LIGHTGREY = "#f5f5f5";
-
-/**
- * PNG icons used in status- and filter buttons
- * Setting png icons is a workaround to use font-awsome 5.9.0 icons until system can be updated to newer font awsome version.
- * */
-const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
-
 // Fields that should not be provided in the column picker
 var tableWidgetBlacklistArray_columnUnselectable = [
-	'status',
-	'row_index',
-	'personalnummer',
-	'betrag',
-	'vertrag_id',
-	'vertrag_stunden',
-	'vertrag_betrag'
+  "status",
+  "row_index",
+  "personalnummer",
+  "betrag",
+  "vertrag_id",
+  "vertrag_stunden",
+  "vertrag_betrag",
 ];
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -36,56 +25,55 @@ var tableWidgetBlacklistArray_columnUnselectable = [
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var mut_formatStringDate = function(value, data, type, params, component) {
-    if (value != null)
-    {
-        var d = new Date(value);
-        return ("0" + (d.getDate())).slice(-2)  + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear();
-    }
-}
+var mut_formatStringDate = function (value, data, type, params, component) {
+  if (value != null) {
+    var d = new Date(value);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Formatters - changes display information, not the data itself
 // -----------------------------------------------------------------------------------------------------------------
 
 // Formats null values to a string number '0.00'
-var form_formatNulltoStringNumber = function(cell, formatterParams){
-    if (cell.getValue() == null){
-        if (formatterParams.precision == 1)
-        {
-            return '0.0';
-        }
-        return '0.00';
+var form_formatNulltoStringNumber = function (cell, formatterParams) {
+  if (cell.getValue() == null) {
+    if (formatterParams.precision == 1) {
+      return "0.0";
     }
-    else {
-        return cell.getValue();
-    }
-}
+    return "0.00";
+  } else {
+    return cell.getValue();
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Header filter
 // -----------------------------------------------------------------------------------------------------------------
 
 // Filters values using comparison operator or just by string comparison
-function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
+function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData) {
+  // If string starts with <, <=, >, >=, !=, ==, compare values with that operator
+  var operator = "";
+  if (headerValue.match(/([<=>!]{1,2})/g)) {
+    var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
+    operator = operator_arr[0];
 
-    // If string starts with <, <=, >, >=, !=, ==, compare values with that operator
-    var operator = '';
-    if (headerValue.match(/([<=>!]{1,2})/g)) {
-        var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
-        operator = operator_arr[0];
+    headerValue = headerValue.replace(operator, "").trim();
 
-        headerValue = headerValue
-            .replace(operator, '')
-            .trim()
-        ;
+    // return if value comparison is true
+    return eval(rowValue + operator + headerValue);
+  }
 
-        // return if value comparison is true
-        return eval(rowValue + operator + headerValue);
-    }
-
-    // If just a stringnumber, return if exact match found
-    return parseFloat(rowValue) == headerValue;
+  // If just a stringnumber, return if exact match found
+  return parseFloat(rowValue) == headerValue;
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -93,13 +81,13 @@ function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
 // -----------------------------------------------------------------------------------------------------------------
 
 // Filters bestellte initially
-function func_initialFilter(){
-    return [
-        {field: 'personalnummer', type: '>=', value: 0},    // NOT dummy lector
-        {field: 'bestellt', type: '!=', value: null},       // AND bestellt
-        {field: 'erteilt', type: '=', value: null},         // AND NOT erteilt
-        {field: 'akzeptiert', type: '=', value: null}       // AND NOT akzeptiert
-    ]
+function func_initialFilter() {
+  return [
+    { field: "personalnummer", type: ">=", value: 0 }, // NOT dummy lector
+    { field: "bestellt", type: "!=", value: null }, // AND bestellt
+    { field: "erteilt", type: "=", value: null }, // AND NOT erteilt
+    { field: "akzeptiert", type: "=", value: null }, // AND NOT akzeptiert
+  ];
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -107,19 +95,142 @@ function func_initialFilter(){
 // -----------------------------------------------------------------------------------------------------------------
 
 // Returns relative height (depending on screen size)
-function func_height(table){
-    return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Formats the group header
-function func_groupHeader(data){
-    return data[0].lv_bezeichnung + "&nbsp;&nbsp;" + ' ( LV-ID: ' + data[0].lehrveranstaltung_id + ' )';  // change name to lehrveranstaltung;
-};
+function func_groupHeader(data) {
+  return (
+    data[0].lv_bezeichnung +
+    "&nbsp;&nbsp;" +
+    " ( LV-ID: " +
+    data[0].lehrveranstaltung_id +
+    " )"
+  ); // change name to lehrveranstaltung;
+}
 
 // Formats the rows
-function func_rowFormatter(row){
-    var is_dummy = (row.getData().personalnummer <= 0 && row.getData().personalnummer != null);
+function func_rowFormatter(row) {
+  var is_dummy =
+    row.getData().personalnummer <= 0 && row.getData().personalnummer != null;
 
+  var bestellt = row.getData().bestellt;
+  var erteilt = row.getData().erteilt;
+  var akzeptiert = row.getData().akzeptiert;
+
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
+
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
+
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
+
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
+
+  /*
+    Formats the color of the rows depending on their status
+    - blue: dummy lectors
+    - orange: geaendert
+    - default (white) : bestellte
+    - green: akzeptiert
+    - grey: all other (marks unselectable)
+     */
+  row.getCells().forEach(function (cell) {
+    if (is_dummy) {
+      cell.getElement().classList.add("bg-info"); // dummy lectors
+    } else if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null &&
+        stunden != vertrag_stunden &&
+        !row._row.element.classList.contains("tabulator-calcs"))
+    ) {
+      // exclude calculation rows
+      cell.getElement().classList.add("bg-warning"); // geaenderte
+    } else if (bestellt != null && erteilt == null) {
+      return; // bestellt
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      cell.getElement().classList.add("bg-success"); // akzeptiert
+    }
+
+  });
+}
+
+// Formats row selectable/unselectable
+function func_selectableCheck(row) {
+  var is_dummy =
+    row.getData().personalnummer <= 0 && row.getData().personalnummer != null;
+
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
+
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
+
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
+
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
+
+  // only allow to select bestellte Lehraufträge
+  return (
+    !is_dummy && // NOT dummy lector
+    row.getData().bestellt != null && // AND NOT neue
+    row.getData().erteilt == null && // AND bestellt
+    betrag == vertrag_betrag &&
+    stunden == vertrag_stunden
+  ); // AND nicht geändert
+}
+
+// Adds column status
+function func_tableBuilt(table) {
+  // Add status column to table
+  table.tabulator(
+    "addColumn",
+    {
+      title: "<i class='fa fa-user'></i>",
+      field: "status",
+      width: 40,
+      hozAlign: "center",
+      downloadTitle: "Status",
+      formatter: status_formatter,
+      tooltip: status_tooltip,
+    },
+    true
+  );
+
+  // fully redrawing the table after adding the Details column
+  table.tabulator("redraw", true);
+}
+
+// Sets status values into column status
+function func_renderStarted(table) {
+  // set literally status to each row - this enables sorting by status despite using icons
+  table.getRows().forEach(function (row) {
     var bestellt = row.getData().bestellt;
     var erteilt = row.getData().erteilt;
     var akzeptiert = row.getData().akzeptiert;
@@ -130,185 +241,49 @@ function func_rowFormatter(row){
     var betrag = parseFloat(row.getData().betrag);
     var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-    if (isNaN(betrag))
-    {
-        betrag = 0;
+    if (isNaN(betrag)) {
+      betrag = 0;
     }
 
-    if (isNaN(stunden))
-    {
-        stunden = 0;
+    if (isNaN(stunden)) {
+      stunden = 0;
     }
 
-    if (isNaN(vertrag_stunden))
-    {
-        vertrag_stunden = 0;
+    if (isNaN(vertrag_stunden)) {
+      vertrag_stunden = 0;
     }
 
-    if (isNaN(vertrag_betrag))
-    {
-        vertrag_betrag = 0;
+    if (isNaN(vertrag_betrag)) {
+      vertrag_betrag = 0;
     }
 
-    /*
-    Formats the color of the rows depending on their status
-    - blue: dummy lectors
-    - orange: geaendert
-    - default (white) : bestellte
-    - green: akzeptiert
-    - grey: all other (marks unselectable)
-     */
-    row.getCells().forEach(function(cell){
-        if(is_dummy)
-        {
-            cell.getElement().classList.add('bg-info');                      // dummy lectors
-        }
-        else if (bestellt != null && (betrag != vertrag_betrag) ||
-            bestellt != null && stunden != vertrag_stunden &&
-            !row._row.element.classList.contains('tabulator-calcs')) // exclude calculation rows
-        {
-            cell.getElement().classList.add('bg-warning');                  // geaenderte
-        }
-        else if(bestellt != null && erteilt == null)
-        {
-            return;                                                         // bestellt
-        }
-        else if(bestellt != null && erteilt != null && akzeptiert != null)
-        {
-            cell.getElement().classList.add('bg-success')                   // akzeptiert
-        }
-        else
-        {
-            row.getElement().style["background-color"] = COLOR_LIGHTGREY;   // default
-        }
-    });
-}
-
-// Formats row selectable/unselectable
-function func_selectableCheck(row){
-    var is_dummy = (row.getData().personalnummer <= 0 && row.getData().personalnummer != null);
-
-    var stunden = parseFloat(row.getData().stunden);
-    var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
-
-    var betrag = parseFloat(row.getData().betrag);
-    var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
-
-    if (isNaN(betrag))
-    {
-        betrag = 0;
+    if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null && stunden != vertrag_stunden)
+    ) {
+      row.getData().status = "Geändert"; // geaendert
+    } else if (bestellt == null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Neu"; // neu
+    } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Bestellt"; // bestellt
+    } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+      row.getData().status = "Erteilt"; // erteilt
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      row.getData().status = "Akzeptiert"; // akzeptiert
+    } else {
+      row.getData().status = null; // default
     }
-
-    if (isNaN(stunden))
-    {
-        stunden = 0;
-    }
-
-    if (isNaN(vertrag_stunden))
-    {
-        vertrag_stunden = 0;
-    }
-
-    if (isNaN(vertrag_betrag))
-    {
-        vertrag_betrag = 0;
-    }
-
-    // only allow to select bestellte Lehraufträge
-    return  !is_dummy &&                        // NOT dummy lector
-        row.getData().bestellt != null &&   // AND NOT neue
-        row.getData().erteilt == null &&    // AND bestellt
-        betrag == vertrag_betrag &&
-        stunden == vertrag_stunden;         // AND nicht geändert
-}
-
-// Adds column status
-function func_tableBuilt(table) {
-    // Add status column to table
-    table.addColumn(
-        {
-            title: "<i class='fa fa-user-o'></i>",
-            field: "status",
-            width:40,
-            align:"center",
-            downloadTitle: 'Status',
-            formatter: status_formatter,
-            tooltip: status_tooltip
-        }, true
-    );
-}
-
-// Sets status values into column status
-function func_renderStarted(table){
-    // set literally status to each row - this enables sorting by status despite using icons
-    table.getRows().forEach(function(row){
-        var bestellt = row.getData().bestellt;
-        var erteilt = row.getData().erteilt;
-        var akzeptiert = row.getData().akzeptiert;
-
-        var stunden = parseFloat(row.getData().stunden);
-        var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
-
-        var betrag = parseFloat(row.getData().betrag);
-        var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
-
-        if (isNaN(betrag))
-        {
-            betrag = 0;
-        }
-
-        if (isNaN(stunden))
-        {
-            stunden = 0;
-        }
-
-        if (isNaN(vertrag_stunden))
-        {
-            vertrag_stunden = 0;
-        }
-
-        if (isNaN(vertrag_betrag))
-        {
-            vertrag_betrag = 0;
-        }
-
-        if ((bestellt != null && betrag != vertrag_betrag) ||
-            (bestellt != null && stunden != vertrag_stunden))
-        {
-            row.getData().status = 'Geändert';      // geaendert
-        }
-        else if (bestellt == null && erteilt == null && akzeptiert == null)
-        {
-            row.getData().status = 'Neu';           // neu
-        }
-        else if (bestellt != null && erteilt == null && akzeptiert == null)
-        {
-            row.getData().status = 'Bestellt';      // bestellt
-        }
-        else if (bestellt != null && erteilt != null && akzeptiert == null)
-        {
-            row.getData().status = 'Erteilt';       // erteilt
-        }
-        else if (bestellt != null && erteilt != null && akzeptiert != null)
-        {
-            row.getData().status = 'Akzeptiert';    // akzeptiert
-        }
-        else
-        {
-            row.getData().status = null;            // default
-        }
-    });
+  });
 }
 
 // Performes after row was updated
-function func_rowUpdated(row){
+function func_rowUpdated(row) {
+  // Refresh status icon and row color
+  row.reformat(); // retriggers cell formatters and rowFormatter callback
 
-    // Refresh status icon and row color
-    row.reformat(); // retriggers cell formatters and rowFormatter callback
-
-    // Deselect and disable new selection of updated rows
-    row.deselect();
-    row.getElement().style["pointerEvents"] = "none";
+  // Deselect and disable new selection of updated rows
+  row.deselect();
+  row.getElement().style["pointerEvents"] = "none";
 }
 
 // TableWidget Footer element
@@ -318,351 +293,350 @@ function func_rowUpdated(row){
  * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows that are bestellt
  */
-function tableWidgetHook_selectAllButton(tableWidgetDiv){
-	var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
-		.filter(row => row.getData().personalnummer >= 0 && // NOT dummies
-			row.getData().bestellt != null &&				// AND bestellt
-			row.getData().erteilt == null &&				// AND NOT erteilt
-			row.getData().status != 'Geändert');				// AND NOT geaendert
+function tableWidgetHook_selectAllButton(tableWidgetDiv) {
+  var resultRows = tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getRows", true)
+    .filter(
+      (row) =>
+        row.getData().personalnummer >= 0 && // NOT dummies
+        row.getData().bestellt != null && // AND bestellt
+        row.getData().erteilt == null && // AND NOT erteilt
+        row.getData().status != "Geändert"
+    ); // AND NOT geaendert
 
-    tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', resultRows);
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("selectRow", resultRows);
 }
 
 // -----------------------------------------------------------------------------------------------------------------
 // Tabulator columns format functions
 // -----------------------------------------------------------------------------------------------------------------
 // Generates status icons
-status_formatter = function(cell, formatterParams, onRendered){
-    var is_dummy = (cell.getRow().getData().personalnummer <= 0 && cell.getRow().getData().personalnummer != null);
+status_formatter = function (cell, formatterParams, onRendered) {
+  var is_dummy =
+    cell.getRow().getData().personalnummer <= 0 &&
+    cell.getRow().getData().personalnummer != null;
 
-    var bestellt = cell.getRow().getData().bestellt;
-    var erteilt = cell.getRow().getData().erteilt;
-    var akzeptiert = cell.getRow().getData().akzeptiert;
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
 
-    var stunden = parseFloat(cell.getRow().getData().stunden);
-    var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var stunden = parseFloat(cell.getRow().getData().stunden);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
 
-    var betrag = parseFloat(cell.getRow().getData().betrag);
-    var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
 
-    if (isNaN(betrag))
-    {
-        betrag = 0;
-    }
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-    if (isNaN(stunden))
-    {
-        stunden = 0;
-    }
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-    if (isNaN(vertrag_stunden))
-    {
-        vertrag_stunden = 0;
-    }
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-    if (isNaN(vertrag_betrag))
-    {
-        vertrag_betrag = 0;
-    }
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-    // commented icons would be so nice to have with fontawsome 5.11...
-    if (is_dummy)
-    {
-        return "<i class='fa fa-user-secret'></i>";    // dummy lector
-    }
-    else if (bestellt != null && (betrag != vertrag_betrag) ||  // geaendert
-        bestellt != null && stunden != vertrag_stunden)     // geaendert ((if betrag is 0 or null)
-    {
-        return ICON_LEHRAUFTRAG_CHANGED;               // geaendert
-        // return "<i class='fas fa-user-edit'></i>";
-    }
-    else if (bestellt == null && erteilt == null && akzeptiert == null)
-    {
-        return "<i class='fa fa-user-plus'></i>";       // neu
-    }
-    else if (bestellt != null && erteilt == null && akzeptiert == null)
-    {
-        return ICON_LEHRAUFTRAG_ORDERED;                // bestellt
-        // return "<i class='fa fa-user-tag'></i>";
-    }
-    else if (bestellt != null && erteilt != null && akzeptiert == null)
-    {
-        return ICON_LEHRAUFTRAG_APPROVED;               // erteilt
-        // return "<i class='fas fa-user-check'></i>";
-    }
-    else if (bestellt != null && erteilt != null && akzeptiert != null)
-    {
-        return "<i class='fa fa-handshake-o'></i>";     // akzeptiert
-        // return "<i class='fas fa-user-graduate'></i>";
-    }
-    else
-    {
-        return "<i class='fa fa-user'></i>";            // default
-    }
+  // commented icons would be so nice to have with fontawsome 5.11...
+  if (is_dummy) {
+    return "<i class='fa fa-user-secret'></i>"; // dummy lector
+  } else if (
+    (bestellt != null && betrag != vertrag_betrag) || // geaendert
+    (bestellt != null && stunden != vertrag_stunden)
+  ) {
+    // geaendert ((if betrag is 0 or null)
+    return "<i class='fas fa-user-pen'></i>";
+  } else if (bestellt == null && erteilt == null && akzeptiert == null) {
+    return "<i class='fa fa-user-plus'></i>"; // neu
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    return "<i class='fa fa-user-tag'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    return "<i class='fa fa-user-check'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    return "<i class='fa-regular fa-handshake'></i>"; // akzeptiert
+  } else {
+    return "<i class='fa fa-user'></i>"; // default
+  }
 };
 
 // Generates status tooltip
-status_tooltip = function(cell){
-    var is_dummy = (cell.getRow().getData().personalnummer <= 0 && cell.getRow().getData().personalnummer != null);
+status_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
 
-    var bestellt = cell.getRow().getData().bestellt;
-    var erteilt = cell.getRow().getData().erteilt;
-    var akzeptiert = cell.getRow().getData().akzeptiert;
+  var is_dummy =
+    cell.getRow().getData().personalnummer <= 0 &&
+    cell.getRow().getData().personalnummer != null;
 
-    var betrag = parseFloat(cell.getRow().getData().betrag);
-    var stunden = parseFloat(cell.getRow().getData().stunden);
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
 
-    var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
-    var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var stunden = parseFloat(cell.getRow().getData().stunden);
 
-    if (isNaN(betrag))
-    {
-        betrag = 0;
-    }
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
 
-    if (isNaN(stunden))
-    {
-        stunden = 0;
-    }
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-    if (isNaN(vertrag_betrag))
-    {
-        vertrag_betrag = 0;
-    }
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-    if (isNaN(vertrag_stunden)){
-        vertrag_stunden = 0;
-    }
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-    var text = FHC_PhrasesLib.t("ui", "stundenStundensatzGeaendert");
-    text += "\n";
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-    if (is_dummy)                                                               // dummy (no lector)
-    {
-        return FHC_PhrasesLib.t("ui", "neuerLehrauftragOhneLektorVerplant");
-    }
-    else if ((bestellt != null && erteilt == null && betrag != vertrag_betrag) ||
-        (bestellt != null && erteilt == null && stunden != vertrag_stunden))   // geaendert (when never erteilt before)
-    {
-        return text += FHC_PhrasesLib.t("ui", "wartetAufBestellung");
-    }
-    else if ((bestellt != null && erteilt != null && betrag != vertrag_betrag) ||
-        (bestellt != null && erteilt != null && stunden != vertrag_stunden))   // geaendert (when has been erteilt once)
-    {
-        return text += FHC_PhrasesLib.t("ui", "wartetAufErneuteBestellung");
-    }
-    else if (bestellt == null)                                                  // neu
-    {
-        return FHC_PhrasesLib.t("ui", "neuerLehrauftragWartetAufBestellung");
-    }
-    else if (bestellt != null && erteilt == null && akzeptiert == null)         // bestellt
-    {
-        return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
-    }
-    else if (bestellt != null && erteilt != null && akzeptiert == null)         // erteilt
-    {
-        return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
-    }
-    else if (bestellt != null && erteilt != null && akzeptiert != null)         // akzeptiert
-    {
-        return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
-    }
-}
+  var text = FHC_PhrasesLib.t("ui", "stundenStundensatzGeaendert");
+  text += "\n";
 
-// Generates bestellt tooltip
-bestellt_tooltip = function(cell){
-    if (cell.getRow().getData().bestellt_von != null)
-    {
-        return FHC_PhrasesLib.t("ui", "bestelltVon") + cell.getRow().getData().bestellt_von;
-    }
-}
+  if (is_dummy) {
+    // dummy (no lector)
+    return FHC_PhrasesLib.t("ui", "neuerLehrauftragOhneLektorVerplant");
+  } else if (
+    (bestellt != null && erteilt == null && betrag != vertrag_betrag) ||
+    (bestellt != null && erteilt == null && stunden != vertrag_stunden)
+  ) {
+    // geaendert (when never erteilt before)
+    return (text += FHC_PhrasesLib.t("ui", "wartetAufBestellung"));
+  } else if (
+    (bestellt != null && erteilt != null && betrag != vertrag_betrag) ||
+    (bestellt != null && erteilt != null && stunden != vertrag_stunden)
+  ) {
+    // geaendert (when has been erteilt once)
+    return (text += FHC_PhrasesLib.t("ui", "wartetAufErneuteBestellung"));
+  } else if (bestellt == null) {
+    // neu
+    return FHC_PhrasesLib.t("ui", "neuerLehrauftragWartetAufBestellung");
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    // bestellt
+    return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    // erteilt
+    return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    // akzeptiert
+    return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
+  }
+};
+
+// Generates bestellt tooltipPhrase
+bestellt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().bestellt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "bestelltVon") +
+      cell.getRow().getData().bestellt_von
+    );
+  }
+};
 
 // Generates erteilt tooltip
-erteilt_tooltip = function(cell){
-    if (cell.getRow().getData().erteilt_von != null) {
-        return FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von;
-    }
-}
+erteilt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().erteilt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von
+    );
+  }
+};
 
 // Generates akzeptiert tooltip
-akzeptiert_tooltip = function(cell){
-    if (cell.getRow().getData().akzeptiert_von != null) {
-        return FHC_PhrasesLib.t("ui", "angenommenVon") + cell.getRow().getData().akzeptiert_von;
+akzeptiert_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().akzeptiert_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "angenommenVon") +
+      cell.getRow().getData().akzeptiert_von
+    );
+  }
+};
+$(function () {
+  // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    func_tableBuilt($("#tableWidgetTabulator"));
+
+    // event rowSelectionChanged needs to be attached as a callback to the tableBuilt event in tabulator5
+    $("#tableWidgetTabulator").tabulator("on", "renderStarted", () =>
+      func_renderStarted(tabulatorInstance)
+    );
+    $("#tableWidgetTabulator").tabulator("on", "rowUpdated", (row) =>
+      func_rowUpdated(row)
+    );
+  });
+
+  // Redraw table on resize to fit tabulators height to windows height
+  window.addEventListener("resize", function () {
+    $("#tableWidgetTabulator").tabulator("setHeight", $(window).height() * 0.5);
+    $("#tableWidgetTabulator").tabulator("redraw", true);
+  });
+
+  // Show all rows
+  $("#show-all").click(function () {
+    $("#tableWidgetTabulator").tabulator("clearFilter");
+  });
+
+  // Show only rows with new lehrauftraege (not dummy lectors)
+  $("#show-new").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "personalnummer", type: ">=", value: 0 },
+      { field: "bestellt", type: "=", value: null },
+      { field: "erteilt", type: "=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
+
+  // Show only rows with ordered lehrauftraege
+  $("#show-ordered").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "personalnummer", type: ">=", value: 0 },
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
+
+  // Show only rows with erteilte lehrauftraege
+  $("#show-approved").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "!=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
+
+  // Show only rows with accepted lehrauftraege
+  $("#show-accepted").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "!=", value: null },
+      { field: "akzeptiert", type: "!=", value: null },
+    ]);
+  });
+
+  // Show only rows with dummy lectors
+  $("#show-dummies").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "personalnummer", type: "!=", value: null },
+      { field: "personalnummer", type: "<=", value: 0 },
+    ]);
+  });
+
+  // Show only rows with dummy lectors
+  $("#show-changed").click(function () {
+    // needs custom filter to compare fields betrag and vertrag_betrag
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "personalnummer", type: ">=", value: 0 }, // NOT dummy lector AND
+      { field: "bestellt", type: "!=", value: null }, // bestellt AND
+      { field: "status", type: "=", value: "Geändert" }, // geaendert
+    ]);
+  });
+
+  // De/activate and un/focus on clicked button, En-/Disable 'Lehrauftrag erteilen'
+  $(".btn-lehrauftrag").click(function () {
+    // De/activate and un/focus on clicked button
+    $(".btn-lehrauftrag").removeClass("focus").removeClass("active");
+    $(this).addClass("focus").addClass("active");
+
+    // Enable button 'Lehrauftrag bestellen' by default
+    $("#approve-lehrauftraege").attr("disabled", false).attr("title", "");
+
+    // Disable button Lehrauftrag bestellen for dummies
+    if (this.id == "show-dummies") {
+      $("#approve-lehrauftraege")
+        .attr("disabled", true)
+        .attr(
+          "title",
+          "Lehraufträge ohne Lektorzuteilung können nicht bestellt werden."
+        );
     }
-}
-$(function() {
+  });
 
-    // Redraw table on resize to fit tabulators height to windows height
-    window.addEventListener('resize', function(){
-        $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
-        $('#tableWidgetTabulator').tabulator('redraw', true);
-    });
-
-    // Show all rows
-    $("#show-all").click(function(){
-        $('#tableWidgetTabulator').tabulator('clearFilter');
-    });
-
-    // Show only rows with new lehrauftraege (not dummy lectors)
-    $("#show-new").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'personalnummer', type: '>=', value: 0},
-                {field: 'bestellt', type: '=', value: null},
-                {field: 'erteilt', type: '=', value: null},
-                {field: 'akzeptiert', type: '=', value: null}
-            ]
-        );
-    });
-
-    // Show only rows with ordered lehrauftraege
-    $("#show-ordered").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'personalnummer', type: '>=', value: 0},
-                {field: 'bestellt', type: '!=', value: null},
-                {field: 'erteilt', type: '=', value: null},
-                {field: 'akzeptiert', type: '=', value: null}
-            ]
-        );
-    });
-
-    // Show only rows with erteilte lehrauftraege
-    $("#show-approved").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'bestellt', type: '!=', value: null},
-                {field: 'erteilt', type: '!=', value: null},
-                {field: 'akzeptiert', type: '=', value: null}
-            ]
-        );
-    });
-
-    // Show only rows with accepted lehrauftraege
-    $("#show-accepted").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'bestellt', type: '!=', value: null},
-                {field: 'erteilt', type: '!=', value: null},
-                {field: 'akzeptiert', type: '!=', value: null}
-            ]
-        );
-    });
-
-    // Show only rows with dummy lectors
-    $("#show-dummies").click(function(){
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'personalnummer', type: '!=', value: null},
-                {field: 'personalnummer', type: '<=', value: 0},
-            ]
-        );
-    });
-
-    // Show only rows with dummy lectors
-    $("#show-changed").click(function(){
-        // needs custom filter to compare fields betrag and vertrag_betrag
-        $('#tableWidgetTabulator').tabulator('setFilter',
-            [
-                {field: 'personalnummer', type: '>=', value: 0},    // NOT dummy lector AND
-                {field: 'bestellt', type: '!=', value: null},       // bestellt AND
-                {field: 'status', type: '=', value: 'Geändert'}     // geaendert
-            ]
-        );
-    });
-
-    // Set png-icons into filter-buttons
-    $(".btn-lehrauftrag").each(function(){
-        switch(this.id) {
-            case 'show-ordered':
-                this.innerHTML = ICON_LEHRAUFTRAG_ORDERED;
-                break;
-            case 'show-approved':
-                this.innerHTML = ICON_LEHRAUFTRAG_APPROVED;
-                break;
-            case 'show-changed':
-                this.innerHTML = ICON_LEHRAUFTRAG_CHANGED;
-                break;
-        }
-    });
-
-    // De/activate and un/focus on clicked button, En-/Disable 'Lehrauftrag erteilen'
-    $(".btn-lehrauftrag").click(function() {
-
-        // De/activate and un/focus on clicked button
-        $(".btn-lehrauftrag").removeClass('focus').removeClass('active');
-        $(this).addClass('focus').addClass('active');
-
-        // Enable button 'Lehrauftrag bestellen' by default
-        $('#approve-lehrauftraege').attr('disabled', false).attr('title', '');
-
-        // Disable button Lehrauftrag bestellen for dummies
-        if (this.id == 'show-dummies')
-        {
-            $('#approve-lehrauftraege').attr('disabled', true).attr('title', 'Lehraufträge ohne Lektorzuteilung können nicht bestellt werden.');
-        }
-    });
-
-    // Approve Lehrauftraege
-    $("#approve-lehrauftraege").click(function(){
-
-        var selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-            .filter(function(val){
-                // filter pseudo lines of groupBy (e.g. the bottom calculations lines)
-                return val.row_index != null || typeof(val.row_index) !== 'undefined';
-            })
-            .map(function(data){
-                // reduce to necessary fields
-                return {
-                    'row_index': data.row_index,
-                    'mitarbeiter_uid' : data.mitarbeiter_uid,
-                    'vertrag_id' : data.vertrag_id
-                }
-            });
-
-        // Alert and exit if no lehraufgang is selected
-        if (selected_data.length == 0)
-        {
-            FHC_DialogLib.alertInfo('Bitte wählen Sie erst zumindest einen Lehrauftrag');
-            return;
-        }
-
-        /*
-         * Prepare data object for ajax call
-         * NOTE: Stringify to send only ONE post param (json string) instead of many single post params.
-         * This avoids issues with POST param limitation.
-         */
-        var data = {
-            'selected_data': JSON.stringify(selected_data)
+  // Approve Lehrauftraege
+  $("#approve-lehrauftraege").click(function () {
+    var selected_data = $("#tableWidgetTabulator")
+      .tabulator("getSelectedData")
+      .filter(function (val) {
+        // filter pseudo lines of groupBy (e.g. the bottom calculations lines)
+        return val.row_index != null || typeof val.row_index !== "undefined";
+      })
+      .map(function (data) {
+        // reduce to necessary fields
+        return {
+          row_index: data.row_index,
+          mitarbeiter_uid: data.mitarbeiter_uid,
+          vertrag_id: data.vertrag_id,
         };
+      });
 
-        FHC_AjaxClient.ajaxCallPost(
-            FHC_JS_DATA_STORAGE_OBJECT.called_path + "/approveLehrauftrag",
-            data,
-            {
-                successCallback: function (data, textStatus, jqXHR)
-                {
-                    if (!data.error && data.retval != null)
-                    {
-                        // Update status 'Erteilt'
-                        $('#tableWidgetTabulator').tabulator('updateData', data.retval);
+    // Alert and exit if no lehraufgang is selected
+    if (selected_data.length == 0) {
+      FHC_DialogLib.alertInfo(
+        "Bitte wählen Sie erst zumindest einen Lehrauftrag"
+      );
+      return;
+    }
 
-                        // Print success message
-                        FHC_DialogLib.alertSuccess(data.retval.length + " Lehraufträge wurden erteilt.");
-                    }
+    /*
+     * Prepare data object for ajax call
+     * NOTE: Stringify to send only ONE post param (json string) instead of many single post params.
+     * This avoids issues with POST param limitation.
+     */
+    var data = {
+      selected_data: JSON.stringify(selected_data),
+    };
 
-                    if (data.error && data.retval != null)
-                    {
-                        // Print error message
-                        FHC_DialogLib.alertError(data.retval);
-                    }
-                },
-                errorCallback: function (jqXHR, textStatus, errorThrown)
-                {
-                    FHC_DialogLib.alertError("Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator.");
-                }
-            }
-        );
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/approveLehrauftrag",
+      data,
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (!data.error && data.retval != null) {
+            // Update status 'Erteilt'
+            $("#tableWidgetTabulator").tabulator("updateData", data.retval);
 
-    });
+            // Print success message
+            FHC_DialogLib.alertSuccess(
+              data.retval.length + " Lehraufträge wurden erteilt."
+            );
+          }
+
+          if (data.error && data.retval != null) {
+            // Print error message
+            FHC_DialogLib.alertError(data.retval);
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(
+            "Systemfehler<br>Bitte kontaktieren Sie Ihren Administrator."
+          );
+        },
+      }
+    );
+  });
 });
diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js
index 06db3ce60..847a863f8 100644
--- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js
+++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js
@@ -8,25 +8,15 @@
 // Global vars
 // -----------------------------------------------------------------------------------------------------------------
 
-const COLOR_LIGHTGREY = "#f5f5f5";
-
-/**
- * PNG icons used in status- and filter buttons
- * Setting png icons is a workaround to use font-awsome 5.9.0 icons until system can be updated to newer font awsome version.
- * */
-const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
-const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
-
 // Fields that should not be provided in the column picker
 var tableWidgetBlacklistArray_columnUnselectable = [
-	'status',
-	'row_index',
-	'personalnummer',
-	'betrag',
-	'vertrag_id',
-	'vertrag_stunden',
-	'vertrag_betrag'
+  "status",
+  "row_index",
+  "personalnummer",
+  "betrag",
+  "vertrag_id",
+  "vertrag_stunden",
+  "vertrag_betrag",
 ];
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -35,56 +25,68 @@ var tableWidgetBlacklistArray_columnUnselectable = [
 
 // Converts string date postgre style to string DD.MM.YYYY.
 // This will allow correct filtering.
-var mut_formatStringDate = function(value, data, type, params, component) {
-	if (value != null)
-	{
-		var d = new Date(value);
-		return ("0" + (d.getDate())).slice(-2)  + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear();
-	}
-}
+var mut_formatStringDate = function (value, data, type, params, component) {
+  if (value != null) {
+    var d = new Date(value);
+    return (
+      ("0" + d.getDate()).slice(-2) +
+      "." +
+      ("0" + (d.getMonth() + 1)).slice(-2) +
+      "." +
+      d.getFullYear()
+    );
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Formatters - changes display information, not the data itself
 // -----------------------------------------------------------------------------------------------------------------
 
 // Formats null values to a string number '0.00'
-var form_formatNulltoStringNumber = function(cell, formatterParams){
-	if (cell.getValue() == null){
-		if (formatterParams.precision == 1)
-		{
-			return '0.0';
-		}
-		return '0.00';
-	}
-	else {
-		return cell.getValue();
-	}
-}
+var form_formatNulltoStringNumber = function (
+  cell,
+  formatterParams,
+  onRendered
+) {
+  //cell - the cell component
+  //formatterParams - parameters set for the column
+  //onRendered - function to call when the formatter has been rendered
+
+  if (cell.getValue() == null) {
+    if (formatterParams.precision == 1) {
+      return "0.0";
+    }
+    return "0.00";
+  } else {
+    return cell.getValue();
+  }
+};
 
 // -----------------------------------------------------------------------------------------------------------------
 // Header filter
 // -----------------------------------------------------------------------------------------------------------------
 
 // Filters values using comparison operator or just by string comparison
-function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
+function hf_filterStringnumberWithOperator(
+  headerValue,
+  rowValue,
+  rowData,
+  filterParams
+) {
+  // If string starts with <, <=, >, >=, !=, ==, compare values with that operator
+  var operator = "";
+  if (headerValue.match(/([<=>!]{1,2})/g)) {
+    var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
+    operator = operator_arr[0];
 
-	// If string starts with <, <=, >, >=, !=, ==, compare values with that operator
-	var operator = '';
-	if (headerValue.match(/([<=>!]{1,2})/g)) {
-		var operator_arr = headerValue.match(/([<=>!]{1,2})/g);
-		operator = operator_arr[0];
+    headerValue = headerValue.replace(operator, "").trim();
 
-		headerValue = headerValue
-			.replace(operator, '')
-			.trim()
-		;
+    // return if value comparison is true
+    return eval(rowValue + operator + headerValue);
+  }
 
-		// return if value comparison is true
-		return eval(rowValue + operator + headerValue);
-	}
-
-	// If just a stringnumber, return if exact match found
-	return parseFloat(rowValue) == headerValue;
+  // If just a stringnumber, return if exact match found
+  return parseFloat(rowValue) == headerValue;
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -97,21 +99,20 @@ function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
  * it is processed before the callback tableBuilt, where the status is going to be built.
  * The callback dataLoaded is processed after tableBuild and provides the status.
  */
-function func_dataLoaded(data, table){
-
-	table.setFilter([
-		[
-			{field: 'personalnummer', type: '>', value: 0},	   // not dummy
-			{field: 'personalnummer', type: '=', value: null}	 // include projektbetreuer
-		],
-		{field: 'mitarbeiter_uid', type: '!=', value: null},	// AND is Mitarbeiter
-		{field: 'stunden', type: '!=', value: null},			// AND has Semesterstunden (not null and not 0)
-		{field: 'stunden', type: '!=', value: 0},
-		[
-			{field: 'status', type: '=', value: 'Neu'},		 // AND neu
-			{field: 'status', type: '=', value: 'Geändert'}	 // OR geaendert
-		]
-	]);
+function func_dataLoaded(data, table) {
+  table.setFilter([
+    [
+      { field: "personalnummer", type: ">", value: 0 }, // not dummy
+      { field: "personalnummer", type: "=", value: null }, // include projektbetreuer
+    ],
+    { field: "mitarbeiter_uid", type: "!=", value: null }, // AND is Mitarbeiter
+    { field: "stunden", type: "!=", value: null }, // AND has Semesterstunden (not null and not 0)
+    { field: "stunden", type: "!=", value: 0 },
+    [
+      { field: "status", type: "=", value: "Neu" }, // AND neu
+      { field: "status", type: "=", value: "Geändert" }, // OR geaendert
+    ],
+  ]);
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -119,52 +120,55 @@ function func_dataLoaded(data, table){
 // -----------------------------------------------------------------------------------------------------------------
 
 // Returns relative height (depending on screen size)
-function func_height(table){
-	return $(window).height() * 0.50;
+function func_height(table) {
+  return $(window).height() * 0.5;
 }
 
 // Formats the group header
 function func_groupHeader(data) {
-	return data[0].lv_bezeichnung + "&nbsp;&nbsp;" + ' ( LV-ID: ' + data[0].lehrveranstaltung_id + ' )';  // change name to lehrveranstaltung;
+  return (
+    data[0].lv_bezeichnung +
+    "&nbsp;&nbsp;" +
+    " ( LV-ID: " +
+    data[0].lehrveranstaltung_id +
+    " )"
+  ); // change name to lehrveranstaltung;
 }
 
 // Formats the rows
-function func_rowFormatter(row){
-	var is_dummy = (row.getData().personalnummer <= 0 && row.getData().personalnummer != null);
-	var is_mitarbeiter = row.getData().mitarbeiter_uid != null;
-	var has_stunden = row.getData().stunden != 0 && row.getData().stunden != null;
+function func_rowFormatter(row) {
+  var is_dummy =
+    row.getData().personalnummer <= 0 && row.getData().personalnummer != null;
+  var is_mitarbeiter = row.getData().mitarbeiter_uid != null;
+  var has_stunden = row.getData().stunden != 0 && row.getData().stunden != null;
 
-	var bestellt = row.getData().bestellt;
-	var erteilt = row.getData().erteilt;
-	var akzeptiert = row.getData().akzeptiert;
+  var bestellt = row.getData().bestellt;
+  var erteilt = row.getData().erteilt;
+  var akzeptiert = row.getData().akzeptiert;
 
-	var stunden = parseFloat(row.getData().stunden);
-	var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-	var betrag = parseFloat(row.getData().betrag);
-	var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (isNaN(stunden))
-	{
-		stunden = 0;
-	}
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-	if (isNaN(vertrag_stunden))
-	{
-		vertrag_stunden = 0;
-	}
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-	if (isNaN(vertrag_betrag))
-	{
-		vertrag_betrag = 0;
-	}
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-	/*
+  /*
 	Formats the color of the rows depending on their status
 	- blue: dummy lectors
 	- bold: geaendert
@@ -172,167 +176,146 @@ function func_rowFormatter(row){
 	- green: akzeptiert
 	- grey: all other (marks unselectable), not mitarbeiter, has no semesterstunden
 	 */
-	row.getCells().forEach(function(cell){
-		if(is_dummy)
-		{
-			cell.getElement().classList.add('bg-info');						  // dummy lectors
-		}
-		else if ((!is_mitarbeiter || !has_stunden) && akzeptiert == null)
-		{
-			row.getElement().style["background-color"] = COLOR_LIGHTGREY;
-		}
-		else if (bestellt != null && (betrag != vertrag_betrag) ||
-			bestellt != null && stunden != vertrag_stunden &&
-			!row._row.element.classList.contains('tabulator-calcs'))		// exclude calculation rows
-		{
-			row.getElement().style['font-weight'] = 'bold';					// geaendert
-		}
-		else if(bestellt == null)
-		{
-			return;															 // neu und erteilt
-		}
-		else if(bestellt != null && erteilt != null && akzeptiert != null)
-		{
-			cell.getElement().classList.add('bg-success')					   // akzeptiert
-		}
-		else
-		{
-			row.getElement().style["background-color"] = COLOR_LIGHTGREY;	   // default
-		}
-	});
+  row.getCells().forEach(function (cell) {
+    if (is_dummy) {
+      cell.getElement().classList.add("bg-info"); // dummy lectors
+    } else if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null &&
+        stunden != vertrag_stunden &&
+        !row._row.element.classList.contains("tabulator-calcs"))
+    ) {
+      // exclude calculation rows
+      row.getElement().style["font-weight"] = "bold"; // geaendert
+    } else if (bestellt == null) {
+      return; // neu und erteilt
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      cell.getElement().classList.add("bg-success"); // akzeptiert
+    }
+  });
 }
 
 // Formats row selectable/unselectable
-function func_selectableCheck(row){
-	var is_dummy = (row.getData().personalnummer <= 0 && row.getData().personalnummer != null);
-	var is_mitarbeiter = row.getData().mitarbeiter_uid != null;
-	var has_stunden = row.getData().stunden != 0 && row.getData().stunden != null;
+function func_selectableCheck(row) {
+  var is_dummy =
+    row.getData().personalnummer <= 0 && row.getData().personalnummer != null;
+  var is_mitarbeiter = row.getData().mitarbeiter_uid != null;
+  var has_stunden = row.getData().stunden != 0 && row.getData().stunden != null;
 
-	var stunden = parseFloat(row.getData().stunden);
-	var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+  var stunden = parseFloat(row.getData().stunden);
+  var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-	var betrag = parseFloat(row.getData().betrag);
-	var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+  var betrag = parseFloat(row.getData().betrag);
+  var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (isNaN(stunden))
-	{
-		stunden = 0;
-	}
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-	if (isNaN(vertrag_stunden))
-	{
-		vertrag_stunden = 0;
-	}
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-	if (isNaN(vertrag_betrag))
-	{
-		vertrag_betrag = 0;
-	}
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-	// Only allow to select neue and geaenderte
-	return  !is_dummy &&												// NOT dummy lector
-		is_mitarbeiter &&											   // AND is Mitarbeiter
-		has_stunden &&												  // AND has Semesterstunden (not null and not 0)
-		((row.getData().bestellt == null) ||							  // AND neue
-		(row.getData().bestellt != null && betrag != vertrag_betrag) ||   // OR geaenderte
-		(row.getData().bestellt != null && stunden != vertrag_stunden));
+  // Only allow to select neue and geaenderte
+  return (
+    !is_dummy && // NOT dummy lector
+    is_mitarbeiter && // AND is Mitarbeiter
+    has_stunden && // AND has Semesterstunden (not null and not 0)
+    (row.getData().bestellt == null || // AND neue
+      (row.getData().bestellt != null && betrag != vertrag_betrag) || // OR geaenderte
+      (row.getData().bestellt != null && stunden != vertrag_stunden))
+  );
 }
 
 // Adds column status
 function func_tableBuilt(table) {
-	// Add status column to table
-	table.addColumn(
-		{
-			title: "<i class='fa fa-user-o'></i>",
-			field: "status",
-			width:40,
-			align:"center",
-			downloadTitle: 'Status',
-			formatter: status_formatter,
-			tooltip: status_tooltip
-		}, true
-	);
+  // Add status column to table
+  table.tabulator(
+    "addColumn",
+    {
+      title: "<i class='fa fa-user'></i>",
+      field: "status",
+      width: 40,
+      hozAlign: "center",
+      downloadTitle: "Status",
+      formatter: status_formatter,
+      tooltip: status_tooltip,
+    },
+    true
+  );
+
+  // fully redrawing the table after adding the Details column
+  table.tabulator("redraw", true);
 }
 
 // Sets status values into column status
-function func_renderStarted(table){
-	// set literally status to each row - this enables sorting by status despite using icons
-	table.getRows().forEach(function(row){
-		var bestellt = row.getData().bestellt;
-		var erteilt = row.getData().erteilt;
-		var akzeptiert = row.getData().akzeptiert;
+function func_renderStarted(table) {
+  // set literally status to each row - this enables sorting by status despite using icons
+  table.getRows().forEach(function (row) {
+    var bestellt = row.getData().bestellt;
+    var erteilt = row.getData().erteilt;
+    var akzeptiert = row.getData().akzeptiert;
 
-		var stunden = parseFloat(row.getData().stunden);
-		var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
+    var stunden = parseFloat(row.getData().stunden);
+    var vertrag_stunden = parseFloat(row.getData().vertrag_stunden);
 
-		var betrag = parseFloat(row.getData().betrag);
-		var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
+    var betrag = parseFloat(row.getData().betrag);
+    var vertrag_betrag = parseFloat(row.getData().vertrag_betrag);
 
-		if (isNaN(betrag))
-		{
-			betrag = 0;
-		}
+    if (isNaN(betrag)) {
+      betrag = 0;
+    }
 
-		if (isNaN(stunden))
-		{
-			stunden = 0;
-		}
+    if (isNaN(stunden)) {
+      stunden = 0;
+    }
 
-		if (isNaN(vertrag_stunden))
-		{
-			vertrag_stunden = 0;
-		}
+    if (isNaN(vertrag_stunden)) {
+      vertrag_stunden = 0;
+    }
 
-		if (isNaN(vertrag_betrag))
-		{
-			vertrag_betrag = 0;
-		}
+    if (isNaN(vertrag_betrag)) {
+      vertrag_betrag = 0;
+    }
 
-		if ((bestellt != null && betrag != vertrag_betrag) ||
-			(bestellt != null && stunden != vertrag_stunden))
-		{
-			row.getData().status = 'Geändert';		// geaendert
-		}
-		else if (bestellt == null && erteilt == null && akzeptiert == null)
-		{
-			row.getData().status = 'Neu';			// neu
-		}
-		else if (bestellt != null && erteilt == null && akzeptiert == null)
-		{
-			row.getData().status = 'Bestellt';		// bestellt
-		}
-		else if (bestellt != null && erteilt != null && akzeptiert == null)
-		{
-			row.getData().status = 'Erteilt';		// erteilt
-		}
-		else if (bestellt != null && erteilt != null && akzeptiert != null)
-		{
-			row.getData().status = 'Akzeptiert';	// akzeptiert
-		}
-		else
-		{
-			row.getData().status = null;			// default
-		}
-	});
+    if (
+      (bestellt != null && betrag != vertrag_betrag) ||
+      (bestellt != null && stunden != vertrag_stunden)
+    ) {
+      row.getData().status = "Geändert"; // geaendert
+    } else if (bestellt == null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Neu"; // neu
+    } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+      row.getData().status = "Bestellt"; // bestellt
+    } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+      row.getData().status = "Erteilt"; // erteilt
+    } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+      row.getData().status = "Akzeptiert"; // akzeptiert
+    } else {
+      row.getData().status = null; // default
+    }
+  });
 }
 
 // Performes after row was updated
-function func_rowUpdated(row){
+function func_rowUpdated(row) {
+  // Refresh status icon and row color
+  row.reformat(); // retriggers cell formatters and rowFormatter callback
 
-	// Refresh status icon and row color
-	row.reformat(); // retriggers cell formatters and rowFormatter callback
+  // Format font-weight normal (needed after geaenderte were bestellt)
+  row.getElement().style["font-weight"] = "normal";
 
-	// Format font-weight normal (needed after geaenderte were bestellt)
-	row.getElement().style['font-weight'] = 'normal';
-
-	// Deselect and disable new selection of updated rows (ordering done)
-	row.deselect();
-	row.getElement().style["pointerEvents"] = "none";
+  // Deselect and disable new selection of updated rows (ordering done)
+  row.deselect();
+  row.getElement().style["pointerEvents"] = "none";
 }
 
 // TableWidget Footer element
@@ -342,404 +325,423 @@ function func_rowUpdated(row){
  * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows which have status bestellt
  */
-function tableWidgetHook_selectAllButton(tableWidgetDiv){
-	var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
-		.filter(row => (
-			row.getData().personalnummer > 0 ||					// not dummies
-			row.getData().personalnummer == null) &&			// include Projektbetreuer
-			row.getData().mitarbeiter_uid != null &&			// AND is Mitarbeiter
-			row.getData().stunden != null &&					// AND has Semesterstunden (not null and not 0)
-			row.getData().stunden != 0 &&
-			(
-				(row.getData().bestellt == null) ||				// AND neu
-				(row.getData().bestellt != null &&				// OR (bestellt
-				row.getData().status == 'Geändert')				// AND geaendert)
-			)
-		);
+function tableWidgetHook_selectAllButton(tableWidgetDiv) {
+  var resultRows = tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getRows", true)
+    .filter(
+      (row) =>
+        (row.getData().personalnummer > 0 || // not dummies
+          row.getData().personalnummer == null) && // include Projektbetreuer
+        row.getData().mitarbeiter_uid != null && // AND is Mitarbeiter
+        row.getData().stunden != null && // AND has Semesterstunden (not null and not 0)
+        row.getData().stunden != 0 &&
+        (row.getData().bestellt == null || // AND neu
+          (row.getData().bestellt != null && // OR (bestellt
+            row.getData().status == "Geändert")) // AND geaendert)
+    );
 
-	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', resultRows);
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("selectRow", resultRows);
 }
 
 // -----------------------------------------------------------------------------------------------------------------
 // Tabulator columns format functions
 // -----------------------------------------------------------------------------------------------------------------
 // Generates status icons
-status_formatter = function(cell, formatterParams, onRendered){
-	var is_dummy = (cell.getRow().getData().personalnummer <= 0 && cell.getRow().getData().personalnummer != null);
+status_formatter = function (cell, formatterParams, onRendered) {
+  var is_dummy =
+    cell.getRow().getData().personalnummer <= 0 &&
+    cell.getRow().getData().personalnummer != null;
 
-	var bestellt = cell.getRow().getData().bestellt;
-	var erteilt = cell.getRow().getData().erteilt;
-	var akzeptiert = cell.getRow().getData().akzeptiert;
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
 
-	var stunden = parseFloat(cell.getRow().getData().stunden);
-	var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var stunden = parseFloat(cell.getRow().getData().stunden);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
 
-	var betrag = parseFloat(cell.getRow().getData().betrag);
-	var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (isNaN(stunden))
-	{
-		stunden = 0;
-	}
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-	if (isNaN(vertrag_stunden))
-	{
-		vertrag_stunden = 0;
-	}
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-	if (isNaN(vertrag_betrag))
-	{
-		vertrag_betrag = 0;
-	}
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-	// commented icons would be so nice to have with fontawsome 5.11...
-	if (is_dummy)
-	{
-		return "<i class='fa fa-user-secret'></i>";	// dummy lector
-	}
-	else if (bestellt != null && isNaN(vertrag_betrag))
-	{
-		return "<i class='fa fa-user-minus'></i>";	 // kein Vertrag
-	}
-	else if (bestellt != null && (betrag != vertrag_betrag) ||	 // geaendert
-		bestellt != null && stunden != vertrag_stunden)		 // geaendert ((if betrag is 0 or null)
-	{
-		return ICON_LEHRAUFTRAG_CHANGED;			   // geaendert
-		// return "<i class='fas fa-user-edit'></i>";
-	}
-	else if (bestellt == null && erteilt == null && akzeptiert == null)
-	{
-		return "<i class='fa fa-user-plus'></i>";	  // neu
-	}
-	else if (bestellt != null && erteilt == null && akzeptiert == null)
-	{
-		return ICON_LEHRAUFTRAG_ORDERED;			   // bestellt
-		// return "<i class='fa fa-user-tag'></i>";
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert == null)
-	{
-		return ICON_LEHRAUFTRAG_APPROVED;			  // erteilt
-		// return "<i class='fas fa-user-check'></i>";
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert != null)
-	{
-		return "<i class='fa fa-handshake-o'></i>";	// akzeptiert
-	}
-	else
-	{
-		return "<i class='fa fa-user'></i>";	// default
-	}
+  // commented icons would be so nice to have with fontawsome 5.11...
+  if (is_dummy) {
+    return "<i class='fa fa-user-secret'></i>"; // dummy lector
+  } else if (bestellt != null && isNaN(vertrag_betrag)) {
+    return "<i class='fa fa-user-minus'></i>"; // kein Vertrag
+  } else if (
+    (bestellt != null && betrag != vertrag_betrag) || // geaendert
+    (bestellt != null && stunden != vertrag_stunden)
+  ) {
+    // geaendert ((if betrag is 0 or null)
+    return "<i class='fa fa-user-pen'></i>";
+  } else if (bestellt == null && erteilt == null && akzeptiert == null) {
+    return "<i class='fa fa-user-plus'></i>"; // neu
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    return "<i class='fa fa-user-tag'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    return "<i class='fa fa-user-check'></i>";
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    return "<i class='fa-regular fa-handshake'></i>"; // akzeptiert
+  } else {
+    return "<i class='fa fa-user'></i>"; // default
+  }
 };
 
 // Generates status tooltip
-status_tooltip = function(cell){
+status_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
 
-	var is_dummy = (cell.getRow().getData().personalnummer <= 0 && cell.getRow().getData().personalnummer != null);
-	var is_mitarbeiter = cell.getRow().getData().mitarbeiter_uid != null;
-	var has_stunden = cell.getRow().getData().stunden != 0 && cell.getRow().getData().stunden != null;
+  var is_dummy =
+    cell.getRow().getData().personalnummer <= 0 &&
+    cell.getRow().getData().personalnummer != null;
+  var is_mitarbeiter = cell.getRow().getData().mitarbeiter_uid != null;
+  var has_stunden =
+    cell.getRow().getData().stunden != 0 &&
+    cell.getRow().getData().stunden != null;
 
-	var bestellt = cell.getRow().getData().bestellt;
-	var erteilt = cell.getRow().getData().erteilt;
-	var akzeptiert = cell.getRow().getData().akzeptiert;
+  var bestellt = cell.getRow().getData().bestellt;
+  var erteilt = cell.getRow().getData().erteilt;
+  var akzeptiert = cell.getRow().getData().akzeptiert;
 
-	var betrag = parseFloat(cell.getRow().getData().betrag);
-	var stunden = parseFloat(cell.getRow().getData().stunden);
-	var stundensatz = parseFloat(cell.getRow().getData().stundensatz);
+  var betrag = parseFloat(cell.getRow().getData().betrag);
+  var stunden = parseFloat(cell.getRow().getData().stunden);
+  var stundensatz = parseFloat(cell.getRow().getData().stundensatz);
 
-	var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
-	var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
-	var vertrag_stundensatz = 0;
+  var vertrag_betrag = parseFloat(cell.getRow().getData().vertrag_betrag);
+  var vertrag_stunden = parseFloat(cell.getRow().getData().vertrag_stunden);
+  var vertrag_stundensatz = 0;
 
-	if (isNaN(betrag))
-	{
-		betrag = 0;
-	}
+  if (isNaN(betrag)) {
+    betrag = 0;
+  }
 
-	if (isNaN(stunden))
-	{
-		stunden = 0;
-	}
+  if (isNaN(stunden)) {
+    stunden = 0;
+  }
 
-	if (isNaN(vertrag_stunden))
-	{
-		vertrag_stunden = 0;
-	}
+  if (isNaN(vertrag_stunden)) {
+    vertrag_stunden = 0;
+  }
 
-	if (isNaN(vertrag_betrag))
-	{
-		vertrag_betrag = 0;
-	}
+  if (isNaN(vertrag_betrag)) {
+    vertrag_betrag = 0;
+  }
 
-	// Calculate vertrag stundensatz
-	if (vertrag_stunden != 0)
-	{
-		vertrag_stundensatz = vertrag_betrag/vertrag_stunden;
-	}
+  // Calculate vertrag stundensatz
+  if (vertrag_stunden != 0) {
+    vertrag_stundensatz = vertrag_betrag / vertrag_stunden;
+  }
 
-	// Return tooltip message
-	if (is_dummy)	// dummy (no lector)
-	{
-		return FHC_PhrasesLib.t("ui", "neuerLehrauftragOhneLektorVerplant");
-	}
-	else if (!is_mitarbeiter)
-	{
-		return 'Lektor ist nicht als Mitarbeiter erfasst.'
-	}
-	else if (!has_stunden)
-	{
-		return 'Es wurden noch keine Stunden zugeteilt.'
-	}
-	else if (vertrag_betrag == 0)	// neu
-	{
-		return FHC_PhrasesLib.t("ui", "neuerLehrauftragWartetAufBestellung");
-	}
-	else if (betrag != vertrag_betrag ||									// geaendert
-		bestellt != null && stunden != vertrag_stunden)						// geaendert (if betrag is 0 or null)
-	{
-		var text = FHC_PhrasesLib.t("ui", "nachAenderungStundensatzStunden",
-			new Array(stundensatz, stunden));
-		text += "\n";
-		text += FHC_PhrasesLib.t("ui", "vorAenderungStundensatzStunden",
-			new Array(vertrag_stundensatz, vertrag_stunden));
-		return text;
-	}
-	else if (bestellt != null && erteilt == null && akzeptiert == null)		 // bestellt
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert == null)		 // erteilt
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
-	}
-	else if (bestellt != null && erteilt != null && akzeptiert != null)		 // akzeptiert
-	{
-		return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
-	}
-}
+  // Return tooltip message
+  if (is_dummy) {
+    // dummy (no lector)
+    return FHC_PhrasesLib.t("ui", "neuerLehrauftragOhneLektorVerplant");
+  } else if (!is_mitarbeiter) {
+    return "Lektor ist nicht als Mitarbeiter erfasst.";
+  } else if (!has_stunden) {
+    return "Es wurden noch keine Stunden zugeteilt.";
+  } else if (vertrag_betrag == 0) {
+    // neu
+    return FHC_PhrasesLib.t("ui", "neuerLehrauftragWartetAufBestellung");
+  } else if (
+    betrag != vertrag_betrag || // geaendert
+    (bestellt != null && stunden != vertrag_stunden)
+  ) {
+    // geaendert (if betrag is 0 or null)
+    var text = FHC_PhrasesLib.t(
+      "ui",
+      "nachAenderungStundensatzStunden",
+      new Array(stundensatz, stunden)
+    );
+    text += "\n";
+    text += FHC_PhrasesLib.t(
+      "ui",
+      "vorAenderungStundensatzStunden",
+      new Array(vertrag_stundensatz, vertrag_stunden)
+    );
+    return text;
+  } else if (bestellt != null && erteilt == null && akzeptiert == null) {
+    // bestellt
+    return FHC_PhrasesLib.t("ui", "letzterStatusBestellt");
+  } else if (bestellt != null && erteilt != null && akzeptiert == null) {
+    // erteilt
+    return FHC_PhrasesLib.t("ui", "letzterStatusErteilt");
+  } else if (bestellt != null && erteilt != null && akzeptiert != null) {
+    // akzeptiert
+    return FHC_PhrasesLib.t("ui", "letzterStatusAngenommen");
+  }
+};
 
 // Generates bestellt tooltip
-bestellt_tooltip = function(cell){
-	if (cell.getRow().getData().bestellt_von != null)
-	{
-		return FHC_PhrasesLib.t("ui", "bestelltVon") + cell.getRow().getData().bestellt_von;
-	}
-}
+bestellt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().bestellt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "bestelltVon") +
+      cell.getRow().getData().bestellt_von
+    );
+  }
+};
 
 // Generates erteilt tooltip
-erteilt_tooltip = function(cell){
-	if (cell.getRow().getData().erteilt_von != null) {
-		return FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von;
-	}
-}
+erteilt_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
+
+  if (cell.getRow().getData().erteilt_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von
+    );
+  }
+};
 
 // Generates akzeptiert tooltip
-akzeptiert_tooltip = function(cell){
-	if (cell.getRow().getData().akzeptiert_von != null) {
-		return FHC_PhrasesLib.t("ui", "angenommenVon") + cell.getRow().getData().akzeptiert_von;
-	}
-}
+akzeptiert_tooltip = function (e, cell, onRendered) {
+  //e - mouseover event
+  //cell - cell component
+  //onRendered - onRendered callback registration function
 
-$(function() {
+  if (cell.getRow().getData().akzeptiert_von != null) {
+    return (
+      FHC_PhrasesLib.t("ui", "angenommenVon") +
+      cell.getRow().getData().akzeptiert_von
+    );
+  }
+};
 
-	// Redraw table on resize to fit tabulators height to windows height
-	window.addEventListener('resize', function(){
-		$('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
-		$('#tableWidgetTabulator').tabulator('redraw', true);
-	});
+$(function () {
+  // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+  $(document).on("tableInit", function (event, tabulatorInstance) {
+    func_tableBuilt($("#tableWidgetTabulator"));
 
-	// Show all rows
-	$("#show-all").click(function(){
-		$('#tableWidgetTabulator').tabulator('clearFilter');
-	});
+    // event rowUpdated needs to be attached as a callback to the tableBuilt event in tabulator5
+    $("#tableWidgetTabulator").tabulator("on", "rowUpdated", (row) => {
+      func_rowUpdated(row);
+    });
 
-	// Show only rows with new lehrauftraege (not dummy lectors or external projektbetreuer; stunden not 0 or null)
-	$("#show-new").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				[
-					{field: 'personalnummer', type: '>', value: 0},	 // not dummy lector
-					{field: 'personalnummer', type: '=', value: null}   // include Projektbetreuer
-				],
-				{field: 'mitarbeiter_uid', type: '!=', value: null},	// AND is Mitarbeiter
-				{field: 'stunden', type: '!=', value: null},			// AND has Semesterstunden (not null and not 0)
-				{field: 'stunden', type: '!=', value: 0},
-				{field: 'bestellt', type: '=', value: null},
-				{field: 'erteilt', type: '=', value: null},
-				{field: 'akzeptiert', type: '=', value: null}
-			]
-		);
-	});
+    // event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5
+    $("#tableWidgetTabulator").tabulator("on", "renderStarted", () => {
+      func_renderStarted(tabulatorInstance);
+    });
 
-	// Show only rows with ordered lehrauftraege
-	$("#show-ordered").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				[
-					{field: 'personalnummer', type: '>', value: 0},	 // not dummy lector
-					{field: 'personalnummer', type: '=', value: null}   // include Projektbetreuer
-				],
-				{field: 'bestellt', type: '!=', value: null},
-				{field: 'erteilt', type: '=', value: null},
-				{field: 'akzeptiert', type: '=', value: null}
-			]
-		);
-	});
+    // event dataLoaded needs to be attached as a callback to the tableBuilt event in tabulator5
+    $("#tableWidgetTabulator").tabulator("on", "dataLoaded", (data) => {
+      func_dataLoaded(data, tabulatorInstance);
+    });
+  });
 
-	// Show only rows with erteilte lehrauftraege
-	$("#show-approved").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				{field: 'bestellt', type: '!=', value: null},
-				{field: 'erteilt', type: '!=', value: null},
-				{field: 'akzeptiert', type: '=', value: null}
-			]
-		);
-	});
+  // Redraw table on resize to fit tabulators height to windows height
+  window.addEventListener("resize", function () {
+    $("#tableWidgetTabulator").tabulator("setHeight", $(window).height() * 0.5);
+    $("#tableWidgetTabulator").tabulator("redraw", true);
+  });
 
-	// Show only rows with akzeptierte lehrauftraege
-	$("#show-accepted").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				{field: 'bestellt', type: '!=', value: null},
-				{field: 'erteilt', type: '!=', value: null},
-				{field: 'akzeptiert', type: '!=', value: null}
-			]
-		);
-	});
+  // Show all rows
+  $("#show-all").click(function () {
+    $("#tableWidgetTabulator").tabulator("clearFilter");
+  });
 
-	// Show only rows with geaenderte lectors
-	$("#show-changed").click(function(){
-		// needs custom filter to compare fields betrag and vertrag_betrag
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				[
-					{field: 'personalnummer', type: '>', value: 0},	 // NOT dummy lector
-					{field: 'personalnummer', type: '=', value: null}   // include Projektbetreuer
-				],
-				{field: 'mitarbeiter_uid', type: '!=', value: null},	// AND is Mitarbeiter
-				{field: 'stunden', type: '!=', value: null},			// AND has Semesterstunden (not null and not 0)
-				{field: 'stunden', type: '!=', value: 0},
-				{field: 'bestellt', type: '!=', value: null},		   // bestellt AND
-				{field: 'status', type: '=', value: 'Geändert'}		 // geaendert
-			]
-		);
-	});
+  // Show all rows
+  $("#show-newAndChanged").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      [
+        { field: "personalnummer", type: ">", value: 0 }, // not dummy
+        { field: "personalnummer", type: "=", value: null }, // include projektbetreuer
+      ],
+      { field: "mitarbeiter_uid", type: "!=", value: null }, // AND is Mitarbeiter
+      { field: "stunden", type: "!=", value: null }, // AND has Semesterstunden (not null and not 0)
+      { field: "stunden", type: "!=", value: 0 },
+      [
+        { field: "status", type: "=", value: "Neu" }, // AND neu
+        { field: "status", type: "=", value: "Geändert" }, // OR geaendert
+      ],
+    ]);
+  });
 
-	// Show only rows with dummy lectors
-	$("#show-dummies").click(function(){
-		$('#tableWidgetTabulator').tabulator('setFilter',
-			[
-				{field: 'personalnummer', type: '!=', value: null},
-				{field: 'personalnummer', type: '<=', value: 0},
-			]
-		);
-	});
+  // Show only rows with new lehrauftraege (not dummy lectors or external projektbetreuer; stunden not 0 or null)
+  $("#show-new").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      [
+        { field: "personalnummer", type: ">", value: 0 }, // not dummy lector
+        { field: "personalnummer", type: "=", value: null }, // include Projektbetreuer
+      ],
+      { field: "mitarbeiter_uid", type: "!=", value: null }, // AND is Mitarbeiter
+      { field: "stunden", type: "!=", value: null }, // AND has Semesterstunden (not null and not 0)
+      { field: "stunden", type: "!=", value: 0 },
+      { field: "bestellt", type: "=", value: null },
+      { field: "erteilt", type: "=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
 
-	// Set png-icons into filter-buttons
-	$(".btn-lehrauftrag").each(function(){
-		switch(this.id) {
-			case 'show-ordered':
-				this.innerHTML = ICON_LEHRAUFTRAG_ORDERED;
-				break;
-			case 'show-approved':
-				this.innerHTML = ICON_LEHRAUFTRAG_APPROVED;
-				break;
-			case 'show-changed':
-				this.innerHTML = ICON_LEHRAUFTRAG_CHANGED;
-				break;
-		}
-	});
+  // Show only rows with ordered lehrauftraege
+  $("#show-ordered").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      [
+        { field: "personalnummer", type: ">", value: 0 }, // not dummy lector
+        { field: "personalnummer", type: "=", value: null }, // include Projektbetreuer
+      ],
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
 
-	// De/activate and un/focus on clicked button, En-/Disable 'Lehrauftrag bestellen'
-	$(".btn-lehrauftrag").click(function() {
+  // Show only rows with erteilte lehrauftraege
+  $("#show-approved").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "!=", value: null },
+      { field: "akzeptiert", type: "=", value: null },
+    ]);
+  });
 
-		// De/activate and un/focus on clicked button
-		$(".btn-lehrauftrag").removeClass('focus').removeClass('active');
-		$(this).addClass('focus').addClass('active');
+  // Show only rows with akzeptierte lehrauftraege
+  $("#show-accepted").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "bestellt", type: "!=", value: null },
+      { field: "erteilt", type: "!=", value: null },
+      { field: "akzeptiert", type: "!=", value: null },
+    ]);
+  });
 
-		//Enable button 'Lehrauftrag bestellen' by default
-		$('#order-lehrauftraege').attr('disabled', false).attr('title', '');
+  // Show only rows with geaenderte lectors
+  $("#show-changed").click(function () {
+    // needs custom filter to compare fields betrag and vertrag_betrag
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      [
+        { field: "personalnummer", type: ">", value: 0 }, // NOT dummy lector
+        { field: "personalnummer", type: "=", value: null }, // include Projektbetreuer
+      ],
+      { field: "mitarbeiter_uid", type: "!=", value: null }, // AND is Mitarbeiter
+      { field: "stunden", type: "!=", value: null }, // AND has Semesterstunden (not null and not 0)
+      { field: "stunden", type: "!=", value: 0 },
+      { field: "bestellt", type: "!=", value: null }, // bestellt AND
+      { field: "status", type: "=", value: "Geändert" }, // geaendert
+    ]);
+  });
 
-		// Disable button Lehrauftrag bestellen for dummies
-		if (this.id == 'show-dummies')
-		{
-			$('#order-lehrauftraege').attr('disabled', true).attr('title', 'Lehraufträge ohne Lektorzuteilung können nicht bestellt werden.');
-		}
-	});
+  // Show only rows with dummy lectors
+  $("#show-dummies").click(function () {
+    $("#tableWidgetTabulator").tabulator("setFilter", [
+      { field: "personalnummer", type: "!=", value: null },
+      { field: "personalnummer", type: "<=", value: 0 },
+    ]);
+  });
 
-	// Order Lehrauftraege
-	$("#order-lehrauftraege").click(function(){
+  // De/activate and un/focus on clicked button, En-/Disable 'Lehrauftrag bestellen'
+  $(".btn-lehrauftrag").click(function () {
+    // De/activate and un/focus on clicked button
+    $(".btn-lehrauftrag").removeClass("focus").removeClass("active");
+    $(this).addClass("focus").addClass("active");
 
-		var selected_data = $('#tableWidgetTabulator').tabulator('getSelectedData')
-			.filter(function(val){
-				// filter pseudo lines of groupBy (e.g. the bottom calculations lines)
-				return val.row_index != null || typeof(val.row_index) !== 'undefined';
-			})
-			.map(function(data){
-				// reduce to necessary fields
-				return {
-					'row_index' : data.row_index,
-					'lehreinheit_id' : data.lehreinheit_id,
-					'lehrveranstaltung_id' : data.lehrveranstaltung_id,
-					'person_id' : data.person_id,
-					'mitarbeiter_uid' : data.mitarbeiter_uid,
-					'vertrag_id' : data.vertrag_id,
-					'projektarbeit_id' : data.projektarbeit_id,
-					'stunden' : data.stunden,
-					'betrag' : data.betrag,
-					'studiensemester_kurzbz' : data.studiensemester_kurzbz,
-					'studiengang_kz' : data.studiengang_kz,
-					'lv_oe_kurzbz' : data.lv_oe_kurzbz
-				}
-			});
+    //Enable button 'Lehrauftrag bestellen' by default
+    $("#order-lehrauftraege").attr("disabled", false).attr("title", "");
 
-		// Alert and exit if no lehraufgang is selected
-		if (selected_data.length == 0)
-		{
-			FHC_DialogLib.alertInfo('Bitte wählen Sie erst zumindest einen Lehrauftrag');
-			return;
-		}
+    // Disable button Lehrauftrag bestellen for dummies
+    if (this.id == "show-dummies") {
+      $("#order-lehrauftraege")
+        .attr("disabled", true)
+        .attr(
+          "title",
+          "Lehraufträge ohne Lektorzuteilung können nicht bestellt werden."
+        );
+    }
+  });
 
-		/*
-		 * Prepare data object for ajax call
-		 * NOTE: Stringify to send only ONE post param (json string) instead of many single post params.
-		 * This avoids issues with POST param limitation.
-		 */
-		var data = {
-			'selected_data': JSON.stringify(selected_data)
-		};
+  // Order Lehrauftraege
+  $("#order-lehrauftraege").click(function () {
+    var selected_data = $("#tableWidgetTabulator")
+      .tabulator("getSelectedData")
+      .filter(function (val) {
+        // filter pseudo lines of groupBy (e.g. the bottom calculations lines)
+        return val.row_index != null || typeof val.row_index !== "undefined";
+      })
+      .map(function (data) {
+        // reduce to necessary fields
+        return {
+          row_index: data.row_index,
+          lehreinheit_id: data.lehreinheit_id,
+          lehrveranstaltung_id: data.lehrveranstaltung_id,
+          person_id: data.person_id,
+          mitarbeiter_uid: data.mitarbeiter_uid,
+          vertrag_id: data.vertrag_id,
+          projektarbeit_id: data.projektarbeit_id,
+          stunden: data.stunden,
+          betrag: data.betrag,
+          studiensemester_kurzbz: data.studiensemester_kurzbz,
+          studiengang_kz: data.studiengang_kz,
+          lv_oe_kurzbz: data.lv_oe_kurzbz,
+        };
+      });
 
-		FHC_AjaxClient.ajaxCallPost(
-			FHC_JS_DATA_STORAGE_OBJECT.called_path + "/orderLehrauftrag",
-			data,
-			{
-				successCallback: function (data, textStatus, jqXHR)
-				{
-					if (!data.error && data.retval != null)
-					{
-						// Update status 'Bestellt'
-						$('#tableWidgetTabulator').tabulator('updateData', data.retval);
+    // Alert and exit if no lehraufgang is selected
+    if (selected_data.length == 0) {
+      FHC_DialogLib.alertInfo(
+        "Bitte wählen Sie erst zumindest einen Lehrauftrag"
+      );
+      return;
+    }
 
-						// Print success message
-						FHC_DialogLib.alertSuccess("Alle " + data.retval.length + " Lehraufträge wurden bestellt.")
-					}
+    /*
+     * Prepare data object for ajax call
+     * NOTE: Stringify to send only ONE post param (json string) instead of many single post params.
+     * This avoids issues with POST param limitation.
+     */
+    var data = {
+      selected_data: JSON.stringify(selected_data),
+    };
 
-					if (data.error && data.retval != null)
-					{
-						// Print error message
-						FHC_DialogLib.alertError(data.retval);
-					}
-				},
-				errorCallback: function (jqXHR, textStatus, errorThrown)
-				{
-					FHC_DialogLib.alertError("Sytemfehler<br>Bitte kontaktieren Sie Ihren Administrator.");
-				}
-			}
-		);
-	});
+    FHC_AjaxClient.ajaxCallPost(
+      FHC_JS_DATA_STORAGE_OBJECT.called_path + "/orderLehrauftrag",
+      data,
+      {
+        successCallback: function (data, textStatus, jqXHR) {
+          if (!data.error && data.retval != null) {
+            // Update status 'Bestellt'
+            $("#tableWidgetTabulator").tabulator("updateData", data.retval);
+
+            // Print success message
+            FHC_DialogLib.alertSuccess(
+              "Alle " + data.retval.length + " Lehraufträge wurden bestellt."
+            );
+          }
+
+          if (data.error && data.retval != null) {
+            // Print error message
+            FHC_DialogLib.alertError(data.retval);
+          }
+        },
+        errorCallback: function (jqXHR, textStatus, errorThrown) {
+          FHC_DialogLib.alertError(
+            "Sytemfehler<br>Bitte kontaktieren Sie Ihren Administrator."
+          );
+        },
+      }
+    );
+  });
 });
diff --git a/public/js/lehre/lvplanung/zverfueg.js b/public/js/lehre/lvplanung/zverfueg.js
index 6bb5419ce..60f5044c1 100644
--- a/public/js/lehre/lvplanung/zverfueg.js
+++ b/public/js/lehre/lvplanung/zverfueg.js
@@ -1,4 +1,19 @@
+
+// Returns relative height (depending on screen size)
+function func_height(table) {
+    return $(window).height() * 0.5;
+}
+
 $(function(){
+
+    // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+    $(document).on("tableInit", function(event,tabulatorInstance) {
+    
+        $("#tableWidgetTabulator").tabulator("on","rowDeselected",(row)=>func_rowDeselected(row));
+        $("#tableWidgetTabulator").tabulator("on","rowSelected",(row)=>func_rowSelected(row));
+        
+    });
+
     var studiensemesterStart = $("#studsemStart").val();
 
     Zverfueg.initDatepicker(studiensemesterStart);
diff --git a/public/js/tabulator/jquery_wrapper.js b/public/js/tabulator/jquery_wrapper.js
new file mode 100644
index 000000000..c51c7eea0
--- /dev/null
+++ b/public/js/tabulator/jquery_wrapper.js
@@ -0,0 +1,76 @@
+/*
+ * This file is part of the Tabulator package.
+ *
+ * (c) Oliver Folkerd <oliver.folkerd@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * Full Documentation & Demos can be found at: http://olifolkerd.github.io/tabulator/
+ *
+ */
+
+(function (root, factory) {
+	"use strict";
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery', 'tabulator', 'jquery-ui'], factory);
+	}
+	else if(typeof module !== 'undefined' && module.exports) {
+		module.exports = factory(
+			require('jquery'),
+			require('tabulator'),
+			require('jquery-ui')
+		);
+	}
+	else {
+		factory(root.jQuery, root.Tabulator);
+	}
+}(this, function ($, Tabulator) {
+
+	$.widget("ui.tabulator", {
+		_create:function(){
+			var options = Object.assign({}, this.options);
+			var props = [];
+
+			delete options.create;
+			delete options.disabled;
+
+			this.table = new Tabulator(this.element[0], options);
+			window.table = this.table;
+
+			const that = this;
+   			this.table.on("tableBuilt", function(){
+      			props = Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(this)));
+         		props = props.concat(Object.getOwnPropertyNames(this));
+           		for(let key of props){
+					if(typeof this[key] === "function" && key.charAt(0) !== "_"){
+     					that[key] = this[key].bind(this);
+					}
+     			}
+				
+				$(document).trigger("tableInit",[this]);
+    		});
+
+			//retrieve properties on prototype
+			props = Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(this.table)));
+
+			//retrieve properties added by modules
+			props = props.concat(Object.getOwnPropertyNames(this.table));
+
+			//map tabulator functions to jquery wrapper
+			for(let key of props){
+				if(typeof this.table[key] === "function" && key.charAt(0) !== "_"){
+					this[key] = this.table[key].bind(this.table);
+				}
+			}
+		},
+
+		_setOption: function(option, value){
+			console.error("Tabulator jQuery wrapper does not support setting options after the table has been instantiated");
+		},
+
+		_destroy: function(option, value){
+			this.table.destroy();
+		},
+	});
+}));
diff --git a/system/dbupdate_3.4.php b/system/dbupdate_3.4.php
index b0e6d64fa..aab8d1134 100644
--- a/system/dbupdate_3.4.php
+++ b/system/dbupdate_3.4.php
@@ -66,6 +66,7 @@ require_once('dbupdate_3.4/44031_stv_favorites.php');
 require_once('dbupdate_3.4/40896_kennzeichnung_unruly_person.php');
 require_once('dbupdate_3.4/39911_tabulator_in_contentmittitel.php');
 require_once('dbupdate_3.4/25999_C4_Menu.php');
+require_once('dbupdate_3.4/25999_C4_permission.php');
 
 // *** Pruefung und hinzufuegen der neuen Attribute und Tabellen
 echo '<H2>Pruefe Tabellen und Attribute!</H2>';
diff --git a/system/dbupdate_3.4/25999_C4_permission.php b/system/dbupdate_3.4/25999_C4_permission.php
new file mode 100644
index 000000000..7da1a18cc
--- /dev/null
+++ b/system/dbupdate_3.4/25999_C4_permission.php
@@ -0,0 +1,42 @@
+<?php
+/* Copyright (C) 2017 fhcomplete.org
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 2 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
+ *
+ * Authors: Harald Bamberger <harald.bamberger@technikum-wien.at>,
+ *
+ * Beschreibung:
+ * Dashboard DB Aenderungen
+ */
+if (! defined('DB_NAME')) exit('No direct script access allowed');
+
+// Add permission: basis/cis
+if($result = @$db->db_query("SELECT 1 FROM system.tbl_berechtigung WHERE berechtigung_kurzbz = 'basis/cis';"))
+{
+    if($db->db_num_rows($result) == 0)
+    {
+        $qry = "INSERT INTO system.tbl_berechtigung(berechtigung_kurzbz, beschreibung) VALUES('basis/cis', 'CIS Grundrecht ab CIS 4.0');";
+
+        if(!$db->db_query($qry))
+        {
+            echo '<strong>system.tbl_berechtigung '.$db->db_last_error().'</strong><br>';
+        }
+        else
+        {
+            echo 'system.tbl_berechtigung: Added permission "basis/cis"<br>';
+        }
+    }
+}
+
diff --git a/system/phrasesupdate.php b/system/phrasesupdate.php
index 22f7491df..d90cd362a 100644
--- a/system/phrasesupdate.php
+++ b/system/phrasesupdate.php
@@ -6401,6 +6401,26 @@ The invoice will be sent to you again. <u><strong>The amount is only to be trans
 			)
 		)
 	),
+	array(
+		'app' => 'core',
+		'category' => 'ui',
+		'phrase' => 'neuUndGeaenderteAnzeigen',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Neue und geänderte anzeigen',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Show new and changed',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
 	array(
 		'app' => 'core',
 		'category' => 'ui',
@@ -12165,7 +12185,7 @@ Any unusual occurrences
         'phrases' => array(
             array(
                 'sprache' => 'German',
-                'text' => '<br>Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz wird überschritten.<br><b>Bisherige ECTS + ECTS dieser LV: Total: {0} [ Schulisch: {1}  | Beruflich: {2}  ]</b> ',
+                'text' => 'Die Höchstgrenze für Anrechnungen gem. § 12 Abs. 3 Fachhochschulgesetz wird überschritten.<span class="fw-bold">Bisherige ECTS + ECTS dieser LV: Total: {0} [ Schulisch: {1}  | Beruflich: {2}  ]</span>',
                 'description' => '',
                 'insertvon' => 'system'
             ),
@@ -36695,7 +36715,129 @@ array(
 				'insertvon' => 'system'
 			)
 		)
+	),
+// CIS4 phrases from legacy code begin
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'studiengangsleitung',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Studiengangsleitung',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Program Director',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'stellvertreter',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Stellvertretung',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Deputy Program Director',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'sekretariat',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Sekretariat',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Administrative Assistant',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'hochschulvertretung',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Hochschulvertretung',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'UAS Representative',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'studentenvertreter',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Studienvertretung',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Degree Program Representative',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'global',
+		'phrase' => 'allgemeinerdownload',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Allgemeiner Download',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Global Download',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
 	)
+// CIS4 phrases from legacy code end
 );