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/lehre/anrechnung/approveAnrechnungUebersichtData.php b/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
index 24a6caeb3..398389e90 100644
--- a/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
+++ b/application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php
@@ -172,6 +172,7 @@ $query.= '	FROM anrechnungen
 
 $filterWidgetArray = array(
 	'query' => $query,
+	'bootstrapVersion' => 5,
 	'tableUniqueId' => 'approveAnrechnungUebersicht',
 	'requiredPermissions' => 'lehre/anrechnung_genehmigen',
 	'datasetRepresentation' => 'tabulator',
diff --git a/application/widgets/TableWidget.php b/application/widgets/TableWidget.php
index e59efce10..be368fc2c 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,9 @@ 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],
 		)); // GUI starts here
 	}
 
@@ -135,6 +139,7 @@ class TableWidget extends Widget
 
 		// Initialize class properties
 		$this->_requiredPermissions = null;
+		$this->_bootstrapVersion = null;
 		$this->_reloadDataset = true; // by default the dataset is NOT cached in session
 		$this->_query = null;
 		$this->_additionalColumns = null;
@@ -154,6 +159,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 +360,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/public/js/TableWidget.js b/public/js/TableWidget.js
index 3aa1367cf..a6b8a10b1 100644
--- a/public/js/TableWidget.js
+++ b/public/js/TableWidget.js
@@ -20,6 +20,7 @@ var FHC_TableWidget = {
 
 	_datasetRepresentation: null, // contains the current data representation
 
+	_bootstrapVersion:3,
 	//------------------------------------------------------------------------------------------------------------------
 	// Public methods
 
@@ -152,6 +153,8 @@ var FHC_TableWidget = {
 
 		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
@@ -163,6 +166,7 @@ var FHC_TableWidget = {
 		FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
 
 		FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
+		
 	},
 
 
@@ -766,6 +770,11 @@ var FHC_TableWidget = {
 		}
 	},
 
+	_setBootstrapVersion: function(data) {
+
+		_bootstrapVersion = data.bootstrapVersion
+	},
+
 	_getTableWidgetUniqueIdArray: function() {
 
 		var tableWidgetUniqueIdArray = [];
@@ -817,17 +826,17 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
 	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" ' +
+		`<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>';
 	tabulatorHeaderHTML += '' +
-		'<button id="help" class="btn btn-default" type="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>';
 	tabulatorHeaderHTML += '' +
-		'<button id="settings" class="btn btn-default" type="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 + '">' +
@@ -848,15 +857,15 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 	var tabulatorHeaderCollapseHTML = '';
 
 	// CollapseHTML 'Settings'
+	if(_bootstrapVersion==3){
 	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">';
-
-	tabulatorHeaderCollapseHTML += '<div class="panel panel-default">';
-	tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
+	tabulatorHeaderCollapseHTML += `<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">`;
+	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-bs-toggle="collapse" data-bs-parent="#accordion" ' +
+		'<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
 		'href="#selectColumns-' + tableUniqueId + '" ' +
 		'aria-expanded="false" aria-controls="selectColumns">' +
 		FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
@@ -867,7 +876,24 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 		'role="tabpanel" aria-labelledby="headingOne">';
 	tabulatorHeaderCollapseHTML += '<div class="panel-body">';
 	tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
-
+	}else{
+		tabulatorHeaderCollapseHTML += '<div class="row">';
+		tabulatorHeaderCollapseHTML += '<div class="col-12 collapse" id="tabulatorSettings-'+ tableUniqueId + '">';
+		tabulatorHeaderCollapseHTML += `<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">`;
+		tabulatorHeaderCollapseHTML += `<div class="accordion-item">`;
+		tabulatorHeaderCollapseHTML += `<h5 class="accordion-header" role="tab" id="headingOne">`;
+		tabulatorHeaderCollapseHTML += '' +
+			'<a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" ' +
+			'href="#selectColumns-' + tableUniqueId + '" ' +
+			'aria-expanded="false" aria-controls="selectColumns">' +
+			FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
+			'</a>';
+		tabulatorHeaderCollapseHTML += '</h5>';
+		tabulatorHeaderCollapseHTML += '<div id="selectColumns-' + tableUniqueId + '" class="accordion-collapse collapse show" ' +
+			'role="tabpanel" aria-labelledby="headingOne" data-bs-parent="#accordion">';
+		tabulatorHeaderCollapseHTML += '<div class="accordion-body">';
+		tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
+	}
 	// Create column picker (Spalten einstellen)
 	tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column)
 	{
@@ -882,25 +908,28 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 		{
 			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>';
+				tabulatorHeaderCollapseHTML += `<button type="button" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} 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 += `<button type="button" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} 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 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
-	tabulatorHeaderCollapseHTML += ' </div>'; // end col
-	tabulatorHeaderCollapseHTML += ' </div>'; // end row
+		tabulatorHeaderCollapseHTML += '</div>'; // end panel-group / accordion
+		tabulatorHeaderCollapseHTML += ' </div>'; // end col
+		tabulatorHeaderCollapseHTML += ' </div>'; // end row
 
+	
+	
 	return tabulatorHeaderCollapseHTML;
 }
 
@@ -916,11 +945,13 @@ function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
 		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">'
+		// pull-right is a fontawesome class that adds float right style
+			`<button id="select-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">`
 			+ FHC_PhrasesLib.t("ui", "alleAuswaehlen") + '' +
 			'</button>';
 		tabulatorFooterHTML += '' +
-			'<button id="deselect-all" class="btn btn-default pull-left" type="button">'
+		// pull-right is a fontawesome class that adds float right style
+			`<button id="deselect-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">`
 			+ FHC_PhrasesLib.t("ui", "alleAbwaehlen") + '' +
 			'</button>';
 		tabulatorFooterHTML += '' +
diff --git a/public/js/navbar.js b/public/js/navbar.js
deleted file mode 100644
index 8b764d366..000000000
--- a/public/js/navbar.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function(t) {
-    var e = a(this);
-    if (!e.is(".disabled, :disabled")) {
-      var i = l(e),
-        o = i.hasClass("open");
-      if (s(), !o) {
-        "ontouchstart" in document.documentElement && !i.closest(".navbar-nav").length && a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click", s);
-        var n = {
-          relatedTarget: this
-        };
-        if (i.trigger(t = a.Event("show.bs.dropdown", n)), t.isDefaultPrevented()) return;
-        e.trigger("focus").attr("aria-expanded", "true"), i.toggleClass("open").trigger(a.Event("shown.bs.dropdown", n))
-      }
-      return !1
-    }
-  },
-
-  function(t) {
-    if (/(38|40|27|32)/.test(t.which) && !/input|textarea/i.test(t.target.tagName)) {
-      var e = a(this);
-      if (t.preventDefault(), t.stopPropagation(), !e.is(".disabled, :disabled")) {
-        var i = l(e),
-          o = i.hasClass("open");
-        if (!o && 27 != t.which || o && 27 == t.which) return 27 == t.which && i.find(r).trigger("focus"), e.trigger("click");
-        var n = i.find(".dropdown-menu li:not(.disabled):visible a");
-        if (n.length) {
-          var s = n.index(t.target);
-          38 == t.which && 0 < s && s--, 40 == t.which && s < n.length - 1 && s++, ~s || (s = 0), n.eq(s).trigger("focus")
-        }
-      }
-    }
-  }
\ No newline at end of file