diff --git a/application/views/lehre/anrechnung/requestAnrechnung.php b/application/views/lehre/anrechnung/requestAnrechnung.php
index 18fd66a67..c2212adbc 100644
--- a/application/views/lehre/anrechnung/requestAnrechnung.php
+++ b/application/views/lehre/anrechnung/requestAnrechnung.php
@@ -10,7 +10,7 @@ $this->load->view(
 		'title' => $this->p->t('anrechnung', 'antragStellen'),
 		'jquery3' => true,
 		'jqueryui1' => true,
-		'bootstrap3' => true,
+		'bootstrap5' => true,
 		'fontawesome4' => true,
 		'ajaxlib' => true,
 		'dialoglib' => true,
@@ -54,6 +54,9 @@ $this->load->view(
 			'public/js/bootstrapper.js',
 			'public/js/lehre/anrechnung/requestAnrechnung.js'
 
+		),
+		'customCSSs' => array(
+			'public/css/lehre/anrechnung.css'
 		)
 	)
 );
@@ -79,7 +82,7 @@ $this->load->view(
 		<!-- end header-->
 		
         <div class="row">
-            <div class="col-xs-8">
+            <div class="col-8">
 				<!-- Antragsdaten, Dokument Upload, Notiz-->
 				<div class="row">
 					<div class="col-lg-12">
@@ -261,7 +264,7 @@ $this->load->view(
 											   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' ?>"
+											<a class="pull-right <?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) ?>
@@ -316,7 +319,7 @@ $this->load->view(
 				</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"
                              data-status_kurzbz="<?php echo $anrechnungData->status_kurzbz ?>">
@@ -324,7 +327,7 @@ $this->load->view(
                         </span></b>
 				</div>
 				<!-- Sperregrund panel (hidden by default) -->
-				<div class="alert alert-danger text-center hidden" id="requestAnrechnung-sperre"
+				<div class="alert alert-danger 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) ?>">
diff --git a/application/views/lehre/anrechnung/requestAnrechnungImportant.php b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
index 8cacb9c26..26c37f8ae 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="accordionExample">
+       <!--    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="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <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="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+      <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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        <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="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+      <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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        <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="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+      <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="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+        <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="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+      <?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseBody'); ?>
+      </div>
     </div>
+  </div>
+
 </div>
\ No newline at end of file
diff --git a/public/css/lehre/anrechnung.css b/public/css/lehre/anrechnung.css
index 36956d79c..a2a974a12 100644
--- a/public/css/lehre/anrechnung.css
+++ b/public/css/lehre/anrechnung.css
@@ -1,7 +1,48 @@
+
 .select-w500 {
     width: 500px;
 }
 
 .pl-15 {
     padding-left: 15px !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;
 }
\ No newline at end of file
diff --git a/public/js/lehre/anrechnung/requestAnrechnung.js b/public/js/lehre/anrechnung/requestAnrechnung.js
index 2947aebe9..a1462082a 100644
--- a/public/js/lehre/anrechnung/requestAnrechnung.js
+++ b/public/js/lehre/anrechnung/requestAnrechnung.js
@@ -138,17 +138,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"));
         }
     },
@@ -186,7 +186,7 @@ var requestAnrechnung = {
 
             // Show sperre panel
             $('#requestAnrechnung-sperre')
-                .removeClass('hidden')
+                .removeClass('visually-hidden')
                 .html(function(){
                     let sperregrund = FHC_PhrasesLib.t('global', 'bearbeitungGesperrt') + ': ';
 
@@ -232,11 +232,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);
 
@@ -286,7 +286,7 @@ var requestAnrechnung = {
         {
             $('#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')
+                .addClass('bg-danger-subtle')
                 .tooltip({
                     title: FHC_PhrasesLib.t("anrechnung", "anrechnungEctsTooltipTextBeiUeberschreitung"),
                     placement: 'right',
@@ -347,7 +347,7 @@ var requestAnrechnung = {
                     ? [(sumEctsSchulisch + sumEctsBeruflich + ects), sumEctsSchulisch, (sumEctsBeruflich  + ects)] // beruflich
                     : [(sumEctsSchulisch + sumEctsBeruflich + ects), (sumEctsSchulisch + ects), sumEctsBeruflich])) // 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',