diff --git a/EMS/admin-ui-bundle/assets/css/admin-lte/_cards.scss b/EMS/admin-ui-bundle/assets/css/admin-lte/_cards.scss
index a29d1cbde..af4634f71 100644
--- a/EMS/admin-ui-bundle/assets/css/admin-lte/_cards.scss
+++ b/EMS/admin-ui-bundle/assets/css/admin-lte/_cards.scss
@@ -220,6 +220,9 @@ html.maximized-card {
 
   @if $enable-rounded {
     @include border-top-radius($border-radius);
+    &:first-child {
+      border-radius: inherit;
+    }
   }
 
   .collapsed-card & {
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/data/revisions-data.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/data/revisions-data.html.twig
index 156f1ae06..ddc0d3cdd 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/data/revisions-data.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/data/revisions-data.html.twig
@@ -60,7 +60,7 @@
             </div>
         {% endif %}
 	</div>
-	<div class="row">
+	<div class="row mt-3">
 		<div class="col-12">
 			{{ block('revisionFooterTabs') }}
 		</div>
@@ -114,24 +114,28 @@
 	{% if revision.tasksEnabled %}
 		{% set tabs = tabs|merge([{ name: 'tab_tasks', label: 'task.tab_tasks'|trans }]) %}
 	{% endif %}
-	<div id="revision-tabs" class="nav-tabs-custom">
-		<ul class="nav nav-tabs">
-			{% for tab in tabs|reverse %}
-				<li {{ loop.first ? 'class="active"' }}>
-					<a href="#{{ tab.name }}" data-bs-toggle="tab" aria-expanded="{{ loop.first ? 'true' : 'false' }}">{{ tab.label }}</a>
-				</li>
-			{% endfor %}
-		</ul>
-		<div class="tab-content">
-			{% for tab in tabs|reverse %}
-				<div class="tab-pane {{ loop.first ? 'active' }}" id="{{ tab.name }}">
-					{% if tab.name == 'tab_about_revision' %}
-						{{ block('revisionTabAboutRevision') }}
-					{% elseif tab.name == 'tab_tasks' %}
-						{{ block('revisionTabTasks') }}
-					{% endif %}
-				</div>
-			{% endfor %}
+	<div id="revision-tabs" class="card card-{{ theme_color }}">
+		<div class="card-header p-0 border-bottom-0">
+			<ul class="nav nav-tabs" role="tablist">
+				{% for tab in tabs|reverse %}
+					<li class="nav-item{{ loop.first ? ' active' }}">
+						<a href="#{{ tab.name }}" data-bs-target="#{{ tab.name }}" data-bs-toggle="pill" class="nav-link{% if loop.first %} active{% endif %}" role="tab" aria-selected="{{ loop.first ? 'true' : 'false' }}">{{ tab.label }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</div>
+		<div class="card-body">
+			<div class="tab-content">
+				{% for tab in tabs|reverse %}
+					<div class="tab-pane fade{{ loop.first ? ' active show' }}" id="{{ tab.name }}" role="tabpanel">
+						{% if tab.name == 'tab_about_revision' %}
+							{{ block('revisionTabAboutRevision') }}
+						{% elseif tab.name == 'tab_tasks' %}
+							{{ block('revisionTabTasks') }}
+						{% endif %}
+					</div>
+				{% endfor %}
+			</div>
 		</div>
 	</div>
 {% endblock %}
@@ -268,27 +272,31 @@
 {% endblock %}
 
 {% block revisionFooterTabs %}
-	<div class="nav-tabs-custom">
-		<ul class="nav nav-tabs">
-			<li class="active"><a href="#tab_referrers" data-bs-toggle="tab" aria-expanded="true">{{ 'views.data.revisions-data-html.linked-documents-in'|trans({'%environment%': revision.contentType.environment.label, '%length%': referrerResponse.documents|length, '%total%': referrerResponse.formattedTotal }) }}</a></li>
-			<li class=""><a href="#tab_revisions" data-bs-toggle="tab" aria-expanded="false">Revisions <small>{{ revisionsSummary|length }}/{{ counter }}</small></a></li>
-			{% if auditTable|default(false) %}
-				<li class=""><a href="#tab_audit" data-bs-toggle="tab" aria-expanded="false">Audit <small>({{ auditCount }})</small></a></li>
-			{% endif %}
-		</ul>
-		<div class="tab-content">
-			<div class="tab-pane active" id="tab_referrers">
-				{{ block('tabReferrers') }}
-			</div>
-			<div class="tab-pane" id="tab_revisions">
-				{{ block('tabRevisions') }}
-			</div>
-			{% if auditTable|default(false) %}
-				<div class="tab-pane" id="tab_audit">
-					{% form_theme auditTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
-					{{ form(auditTable) }}
+	<div class="card card-{{ theme_color }}">
+		<div class="card-header p-0 border-bottom-0">
+			<ul class="nav nav-tabs" role="tablist">
+				<li class="nav-item active"><a href="#tab_referrers" data-bs-target="#tab_referrers" data-bs-toggle="pill" class="nav-link active" role="tab" aria-controls="true">{{ 'views.data.revisions-data-html.linked-documents-in'|trans({'%environment%': revision.contentType.environment.label, '%length%': referrerResponse.documents|length, '%total%': referrerResponse.formattedTotal }) }}</a></li>
+				<li class="nav-item"><a href="#tab_revisions" data-bs-target="#tab_revisions" data-bs-toggle="pill" class="nav-link" role="tab" aria-controls="false">Revisions <small>{{ revisionsSummary|length }}/{{ counter }}</small></a></li>
+				{% if auditTable|default(false) %}
+					<li class="nav-item"><a href="#tab_audit" data-bs-target="#tab_audit" data-bs-toggle="pill" class="nav-link" role="tab" aria-controls="false">Audit <small>({{ auditCount }})</small></a></li>
+				{% endif %}
+			</ul>
+		</div>
+		<div class="card-body">
+			<div class="tab-content">
+				<div class="tab-pane fade active show" id="tab_referrers" role="tabpanel">
+					{{ block('tabReferrers') }}
 				</div>
-			{% endif %}
+				<div class="tab-pane fade" id="tab_revisions" role="tabpanel">
+					{{ block('tabRevisions') }}
+				</div>
+				{% if auditTable|default(false) %}
+					<div class="tab-pane fade" id="tab_audit" role="tabpanel">
+						{% form_theme auditTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
+						{{ form(auditTable) }}
+					</div>
+				{% endif %}
+			</div>
 		</div>
 	</div>
 {% endblock %}
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig
index e16dc80e8..56bf81a6a 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig
@@ -170,37 +170,37 @@
 
 	{% if editSubfields is not defined or editSubfields %}
 		<div class="tab-content">
-			{% set active='active' %}
+			{% set active=' active show' %}
 			{% if form.displayOptions is defined %}
-				<div class="tab-pane {{ active }}" id="tab_display_{{ seed }}">
+				<div class="tab-pane fade{{ active }}" id="tab_display_{{ seed }}" role="tabpanel">
 					{{- form_widget(form.displayOptions) -}}
 				</div>
 				{% set active='' %}
 			{% endif %}
 			<!-- /.tab-pane -->
 			{% if form.mappingOptions is defined %}
-				<div class="tab-pane {{ active }}" id="tab_mapping_{{ seed }}">
+				<div class="tab-pane fade{{ active }}" id="tab_mapping_{{ seed }}" role="tabpanel">
 					{{- form_widget(form.mappingOptions) -}}
 				</div>
 				{% set active='' %}
 			{% endif %}
 			<!-- /.tab-pane -->
 			{% if form.restrictionOptions is defined %}
-			  <div class="tab-pane {{ active }}" id="tab_restriction_{{ seed }}">
+			  <div class="tab-pane fade{{ active }}" id="tab_restriction_{{ seed }}" role="tabpanel">
 				{{- form_widget(form.restrictionOptions) -}}
 			  </div>
 			  {% set active='' %}
 			{% endif %}
 			<!-- /.tab-pane -->
 			{% if form.migrationOptions is defined %}
-			  <div class="tab-pane {{ active }}" id="tab_migration_{{ seed }}">
+			  <div class="tab-pane fade{{ active }}" id="tab_migration_{{ seed }}" role="tabpanel">
 				{{- form_widget(form.migrationOptions) -}}
 			  </div>
 			  {% set active='' %}
 			{% endif %}
 			<!-- /.tab-pane -->
 			{% if form.extraOptions is defined %}
-			  <div class="tab-pane {{ active }}" id="tab_extra_{{ seed }}">
+			  <div class="tab-pane fade{{ active }}" id="tab_extra_{{ seed }}" role="tabpanel">
 				{{- form_widget(form.extraOptions) -}}
 			  </div>
 			{% endif %}
@@ -213,8 +213,10 @@
 			<div class="col-md-4 match-height">
 				<div class="box box-default">
 					<div class="box-header with-border">
-						<i class="fa fa-eye"></i>
-						<h3 class="box-title">{{- form_label(form.displayOptions) -}}</h3>
+						<h3 class="box-title">
+							<i class="fas fa-eye fa-xs"></i>&nbsp;
+                            {{- form_label(form.displayOptions) -}}
+						</h3>
 					</div>
 					<!-- /.box-header -->
 					<div class="box-body">
@@ -229,8 +231,10 @@
 			<div class="col-md-4 match-height">
 				<div class="box box-default">
 					<div class="box-header with-border">
-						<i class="fa fa-sitemap"></i>
-						<h3 class="box-title">{{- form_label(form.mappingOptions) -}}</h3>
+						<h3 class="box-title">
+							<i class="fas fa-sitemap fa-xs"></i>&nbsp;
+							{{- form_label(form.mappingOptions) -}}
+						</h3>
 					</div>
 					<!-- /.box-header -->
 					<div class="box-body">
@@ -245,8 +249,10 @@
 			<div class="col-md-4 match-height">
 				<div class="box box-default">
 					<div class="box-header with-border">
-						<i class="fa fa-shield"></i>
-						<h3 class="box-title">{{- form_label(form.restrictionOptions) -}}</h3>
+						<h3 class="box-title">
+							<i class="fas fa-shield fa-xs"></i>&nbsp;
+							{{- form_label(form.restrictionOptions) -}}
+						</h3>
 					</div>
 					<!-- /.box-header -->
 					<div class="box-body">
@@ -261,8 +267,10 @@
 			<div class="col-md-4 match-height">
 				<div class="box box-default">
 					<div class="box-header with-border">
-						<i class="fa fa-recycle"></i>
-						<h3 class="box-title">{{- form_label(form.migrationOptions) -}}</h3>
+						<h3 class="box-title">
+							<i class="fas fa-recycle fa-xs"></i>&nbsp;
+							{{- form_label(form.migrationOptions) -}}
+						</h3>
 					</div>
 					<!-- /.box-header -->
 					<div class="box-body">
@@ -277,8 +285,10 @@
 			<div class="col-md-4 match-height">
 				<div class="box box-default">
 					<div class="box-header with-border">
-						<i class="fa fa-plus"></i>
-						<h3 class="box-title">{{- form_label(form.extraOptions) -}}</h3>
+						<h3 class="box-title">
+							<i class="fas fa-plus fa-xs"></i>&nbsp;
+							{{- form_label(form.extraOptions) -}}
+						</h3>
 					</div>
 					<!-- /.box-header -->
 					<div class="box-body">
@@ -499,15 +509,15 @@
 {% endblock tabsfieldtype_row %}
 
 {% block tabsfieldtype_widget_tab_label_per_item %}
-	<li id="{{ tab.vars.id}}__label" class="form-group{% if tab.vars.errors|length %} has-error{% endif %}{% if counter == 1%} active{% endif %}{% if tab.vars.class is defined and tab.vars.class != 'col-md-12' %} {{tab.vars.class}}{% endif %}">
-		<a href="#{{ tab.vars.id}}__tab" data-bs-toggle="tab" aria-expanded="{% if counter == 1%}true{%else%}false{% endif %}">
+	<li id="{{ tab.vars.id}}__label" class="nav-item{% if tab.vars.errors|length %} has-error{% endif %}{% if tab.vars.class is defined and tab.vars.class != 'col-md-12' %} {{tab.vars.class}}{% endif %}">
+		<a href="#{{ tab.vars.id}}__tab" data-bs-toggle="pill" class="nav-link{% if counter == 1%} active{% endif %}" id="{{ tab.vars.id}}-tab" data-bs-target="#{{ tab.vars.id}}__tab" role="tab" aria-controls="{{ tab.vars.id}}__tab" aria-selected="{% if counter == 1%}true{%else%}false{% endif %}">
 			{{- form_label(tab) -}}
 		</a>
 	</li>
 {% endblock tabsfieldtype_widget_tab_label_per_item %}
 
 {% block tabsfieldtype_widget_tab_panel_per_item %}
-	<div class="tab-pane{% if counter == 1%} active{% endif %}" id="{{ tab.vars.id}}__tab">
+	<div class="tab-pane fade{% if counter == 1%} active show{% endif %}" id="{{ tab.vars.id}}__tab" role="tabpanel" aria-labelledby="{{ tab.vars.id}}-tab">
 		<div class="form-group has-error"  id="{{ tab.vars.id}}__error">
 			{{ form_errors(tab) }}
 		</div>
@@ -522,9 +532,9 @@
 {% endblock tabsfieldtype_widget_tab_panel_per_item %}
 
 {% block tabsfieldtype_widget -%}
-{# 	<div class="{% if class %}{{ class }}{% else %}col-xs-12 {% endif %}">#}
-		<div class="nav-tabs-custom">
-            <ul class="nav nav-tabs">
+	<div class="card card-{{ theme_color }}">
+		<div class="card-header p-0 border-bottom-0">
+			<ul class="nav nav-tabs" role="tablist">
 				{% set counter = 1 %}
 				{% for tab in  form.iterator %}
 					{% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == tab.vars.data.fieldType.type and form.vars.data.fieldType.type == 'EMS\\CoreBundle\\Form\\DataField\\TabsFieldType' %}
@@ -550,7 +560,9 @@
 					{% endif %}
 				{% endfor %}
             </ul>
-            <div class="tab-content panel panel-default">
+		</div>
+		<div class="card-body">
+			<div class="tab-content">
 			  {% set counter = 1 %}
               {% for tab in  form.iterator %}
 				  {% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == tab.vars.data.fieldType.type and form.vars.data.fieldType.type == 'EMS\\CoreBundle\\Form\\DataField\\TabsFieldType' %}
@@ -575,10 +587,9 @@
 					  {% set counter = counter + 1 %}
 				  {% endif %}
               {% endfor %}
-            </div>
-            <!-- /.tab-content -->
-         </div>
-{# 	</div>#}
+			</div>
+		</div>
+	 </div>
 {%- endblock tabsfieldtype_widget %}
 
 
@@ -1332,7 +1343,7 @@
             {% if form.options is defined and form.vars.editSubfields %}
                 <!-- Modal windows field options -->
                 <div class="modal fade" id="{{ form.vars.id }}_modal_options" role="dialog" aria-labelledby="myModalLabel">
-                  <div class="modal-dialog" role="document">
+                  <div class="modal-dialog modal-lg" role="document">
                     <div class="modal-content">
                       <div class="modal-header">
                         <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -1341,31 +1352,35 @@
                         </h4>
                       </div>
                       <div class="modal-body">
-                            <div class="nav-tabs-custom">
-                                <ul class="nav nav-tabs">
-                                    {% set active='active' %}
-                                    {% if form.options.displayOptions is defined %}
-                                        <li class="{{ active }}"><a href="#tab_display_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="true">Display</a></li>
-                                        {% set active='' %}
-                                    {%  endif %}
-                                    {% if form.options.mappingOptions is defined %}
-                                        <li class="{{ active }}"><a href="#tab_mapping_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Mapping</a></li>
-                                        {% set active='' %}
-                                    {%  endif %}
-                                    {% if form.options.restrictionOptions is defined %}
-                                      <li class="{{ active }}"><a href="#tab_restriction_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Restriction</a></li>
-                                        {% set active='' %}
-                                    {%  endif %}
-                                    {% if form.options.migrationOptions is defined %}
-                                      <li class="{{ active }}"><a href="#tab_migration_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Migration</a></li>
-                                        {% set active='' %}
-                                    {%  endif %}
-                                    {% if form.options.extraOptions is defined %}
-                                      <li class="{{ active }}"><a href="#tab_extra_{{ form.vars.id }}" data-bs-toggle="tab" aria-expanded="false">Extra</a></li>
-                                        {% set active='' %}
-                                    {%  endif %}
-                                </ul>
-                                {{- form_widget(form.options, {'seed': form.vars.id} ) -}}
+                            <div class="card card-{{ theme_color }}">
+								<div class="card-header p-0 border-bottom-0">
+									<ul class="nav nav-tabs" role="tablist">
+										{% set active=' active' %}
+										{% if form.options.displayOptions is defined %}
+											<li class="nav-item{{ active }}"><a href="#tab_display_{{ form.vars.id }}" data-bs-target="#tab_display_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Display</a></li>
+											{% set active='' %}
+										{%  endif %}
+										{% if form.options.mappingOptions is defined %}
+											<li class="nav-item{{ active }}"><a href="#tab_mapping_{{ form.vars.id }}" data-bs-target="#tab_mapping_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Mapping</a></li>
+											{% set active='' %}
+										{%  endif %}
+										{% if form.options.restrictionOptions is defined %}
+										  <li class="nav-item{{ active }}"><a href="#tab_restriction_{{ form.vars.id }}" data-bs-target="#tab_restriction_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Restriction</a></li>
+											{% set active='' %}
+										{%  endif %}
+										{% if form.options.migrationOptions is defined %}
+										  <li class="nav-item{{ active }}"><a href="#tab_migration_{{ form.vars.id }}" data-bs-target="#tab_migration_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Migration</a></li>
+											{% set active='' %}
+										{%  endif %}
+										{% if form.options.extraOptions is defined %}
+										  <li class="nav-item{{ active }}"><a href="#tab_extra_{{ form.vars.id }}" data-bs-target="#tab_extra_{{ form.vars.id }}" class="nav-link{% if active != ''%} active{% endif %}" data-bs-toggle="pill" aria-selected="{% if active != ''%}true{%else%}false{% endif %}">Extra</a></li>
+											{% set active='' %}
+										{%  endif %}
+									</ul>
+                            	</div>
+								<div class="card-body">
+									{{- form_widget(form.options, {'seed': form.vars.id} ) -}}
+								</div>
                             </div>
                       </div>
                       <div class="modal-footer">
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/macros/data-field-type.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/macros/data-field-type.html.twig
index e2d94ed33..a115b8ff1 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/macros/data-field-type.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/macros/data-field-type.html.twig
@@ -420,33 +420,37 @@
         {% set values = values|sort((a, b) => a == app.user.localePreferred ? -1 : b == app.user.localePreferred ? 1 : 0) %}
     {% endif %}
 
-    <div class="nav-tabs-custom">
-        <ul class="nav nav-tabs">
-            {% for value in values|default([]) %}
-                <li class="{% if loop.index == 1%}active{% endif %}">
-                    <a href="#item_{{ path|join('_')~'_'~loop.index0 }}__tab" data-bs-toggle="tab" aria-expanded="{% if loop.index == 1%}true{% else %}false{% endif %}">
-                        {{ attribute(choices, value) }}
-                    </a>
-                </li>
-            {% endfor %}
-        </ul>
-        <div class="tab-content">
-            {% for value in values|default([]) %}
-                <div class="tab-pane{% if loop.index == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~loop.index0 }}__tab">
-                    {% set childData = source[value]|default([]) %}
-                    {% set childCompareData = compareRawData[value]|default([]) %}
-                    {% for grandchild in dataField.getChildren.get(value).getChildren|default([]) %}
-                        {{ _self.renderDataFieldBlock(grandchild, childData, compare, childCompareData, '', path|merge([loop.index0]), locale) }}
-                    {% endfor %}
-                </div>
-            {% endfor %}
-        </div>
+    <div class="card card-{{ theme_color }}">
+        <div class="card-header p-0 border-bottom-0">
+            <ul class="nav nav-tabs" role="tablist">
+                {% for value in values|default([]) %}
+                    <li class="nav-item {% if loop.index == 1%}active{% endif %}">
+                        <a href="#item_{{ path|join('_')~'_'~loop.index0 }}__tab" data-bs-toggle="pill" class="nav-link{% if loop.index == 1%} active{% endif %}" id="{{ path|join('_')~'_'~loop.index0 }}-tab"  data-bs-target="#item_{{ path|join('_')~'_'~loop.index0 }}__tab" role="tab" aria-selected="{% if loop.index == 1%}true{%else%}false{% endif %}">
+            {{ attribute(choices, value) }}
+        </a>
+    </li>
+{% endfor %}
+</ul>
+</div>
+<div class="card-body">
+    <div class="tab-content">
+        {% for value in values|default([]) %}
+            <div class="tab-pane{% if loop.index == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~loop.index0 }}__tab">
+                {% set childData = source[value]|default([]) %}
+                {% set childCompareData = compareRawData[value]|default([]) %}
+                {% for grandchild in dataField.getChildren.get(value).getChildren|default([]) %}
+                    {{ _self.renderDataFieldBlock(grandchild, childData, compare, childCompareData, '', path|merge([loop.index0]), locale) }}
+                {% endfor %}
+            </div>
+        {% endfor %}
     </div>
+</div>
+</div>
 {% endblock %}
 
 {% block tabsfieldtype_widget_tab_label_per_item %}
-    <li class="{% if counter == 1%}active{% endif %}{% if child.fieldType.displayOptions.class is defined and child.fieldType.displayOptions.class != 'col-md-12' %} {{child.fieldType.displayOptions.class}}{% endif %}">
-        <a href="#item_{{ path|join('_') }}__tab" data-bs-toggle="tab" aria-expanded="false">
+    <li class="nav-item{% if counter == 1%} active{% endif %}{% if child.fieldType.displayOptions.class is defined and child.fieldType.displayOptions.class != 'col-md-12' %} {{child.fieldType.displayOptions.class}}{% endif %}">
+        <a href="#item_{{ path|join('_') }}__tab" data-bs-toggle="pill" class="nav-link{% if counter == 1%} active{% endif %}" id="{{ path|join('_') }}-tab" data-bs-target="#item_{{ path|join('_') }}__tab" role="tab" aria-controls="{{ path|join('_') }}__tab" aria-selected="{% if counter == 1%}true{%else%}false{% endif %}">
             {% if child.fieldType.displayOptions.icon is defined and child.fieldType.displayOptions.icon%}
                 <i class="{{ child.fieldType.displayOptions.icon }}"></i>
             {% endif %}
@@ -457,87 +461,90 @@
 
 
 {% block EMS_CoreBundle_Form_DataField_TabsFieldType %}
-    <div class="nav-tabs-custom">
-        <ul class="nav nav-tabs">
-            {% set counter = 1 %}
-            {% for child in dataField.getChildren|filter(child => not child.fieldType.deleted) %}
-                {% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == child.fieldType.type|default(null) %}
-                    {% set labels = child.fieldType.displayOptions.labels|default('')|replace({"\r":''})|split('\n') %}
-                    {% set values = child.fieldType.displayOptions.values|default('')|replace({"\r":''})|split('\n')%}
-                    {% set choices = [] %}
-                    {% for value in values %}
-                        {% set choices = choices|merge({(value): attribute(labels, loop.index0)|default(value)}) %}
-                    {% endfor %}
-                    {% if child.fieldType.displayOptions.localePreferredFirst|default(false) and app.user.localePreferred|default(false) and app.user.localePreferred in values %}
-                        {% set values = values|sort((a, b) => a == app.user.localePreferred ? -1 : b == app.user.localePreferred ? 1 : 0) %}
-                    {% endif %}
+    <div class="card card-{{ theme_color }}">
+        <div class="card-header p-0 border-bottom-0">
+            <ul class="nav nav-tabs">
+                {% set counter = 1 %}
+                {% for child in dataField.getChildren|filter(child => not child.fieldType.deleted) %}
+                    {% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == child.fieldType.type|default(null) %}
+                        {% set labels = child.fieldType.displayOptions.labels|default('')|replace({"\r":''})|split('\n') %}
+                        {% set values = child.fieldType.displayOptions.values|default('')|replace({"\r":''})|split('\n')%}
+                        {% set choices = [] %}
+                        {% for value in values %}
+                            {% set choices = choices|merge({(value): attribute(labels, loop.index0)|default(value)}) %}
+                        {% endfor %}
+                        {% if child.fieldType.displayOptions.localePreferredFirst|default(false) and app.user.localePreferred|default(false) and app.user.localePreferred in values %}
+                            {% set values = values|sort((a, b) => a == app.user.localePreferred ? -1 : b == app.user.localePreferred ? 1 : 0) %}
+                        {% endif %}
 
-                    {% for value in values %}
+                        {% for value in values %}
+                            {% with {
+                                'child': child.getChildren[value],
+                                'counter': counter,
+                                'label': attribute(choices, value),
+                                'path': path|merge([counter]),
+                            }
+                            %}
+                                {{ block('tabsfieldtype_widget_tab_label_per_item') }}
+                            {% endwith %}
+                            {% set counter = counter + 1 %}
+                        {% endfor %}
+                    {% else %}
                         {% with {
-                            'child': child.getChildren[value],
+                            'child': child,
                             'counter': counter,
-                            'label': attribute(choices, value),
+                            'label': child.fieldType.displayOptions.label|default(child.fieldType.name),
                             'path': path|merge([counter]),
                         }
                         %}
                             {{ block('tabsfieldtype_widget_tab_label_per_item') }}
                         {% endwith %}
                         {% set counter = counter + 1 %}
-                    {% endfor %}
-                {% else %}
-                    {% with {
-                        'child': child,
-                        'counter': counter,
-                        'label': child.fieldType.displayOptions.label|default(child.fieldType.name),
-                        'path': path|merge([counter]),
-                    }
-                    %}
-                        {{ block('tabsfieldtype_widget_tab_label_per_item') }}
-                    {% endwith %}
-                    {% set counter = counter + 1 %}
-                {% endif %}
-            {% endfor %}
-        </ul>
-        <div class="tab-content">
-            {% set counter = 1 %}
-            {% for child in dataField.getChildren|filter(child => not child.fieldType.deleted) %}
-                {% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == child.fieldType.type|default(null) %}
-                    {% for key, item in  child.getChildren %}
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="card-body">
+            <div class="tab-content">
+                {% set counter = 1 %}
+                {% for child in dataField.getChildren|filter(child => not child.fieldType.deleted) %}
+                    {% if 'EMS\\CoreBundle\\Form\\DataField\\MultiplexedTabContainerFieldType' == child.fieldType.type|default(null) %}
+                        {% for key, item in  child.getChildren %}
+                            {% with {
+                                'child': item,
+                                'counter': counter,
+                            }
+                            %}
+                                <div class="tab-pane fade{% if counter == 1%} active show{% endif %}" id="item_{{ path|join('_')~'_'~counter }}__tab" role="tabpanel" aria-labelledby="{{ path|join('_') }}-tab">
+                                    {% set childData = source[key]|default([]) %}
+                                    {% set childCompareData = compareRawData[key]|default([]) %}
+                                    {% for grandchild in child.getChildren|default([]) %}
+                                        {{ _self.renderDataFieldBlock(grandchild, childData, compare, childCompareData, '', path|merge([counter]), locale) }}
+                                    {% endfor %}
+                                </div>
+                            {% endwith %}
+                            {% set counter = counter + 1 %}
+                        {% endfor %}
+                    {% elseif 'EMS\\CoreBundle\\Form\\DataField\\ContainerFieldType' == child.fieldType.type|default(null) %}
+                        <div class="tab-pane{% if counter == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~counter }}__tab">
+                            {{ _self.renderDataFieldBlock(child, source, compare, compareRawData, '', [], locale) }}
+                        </div>
+                        {% set counter = counter + 1 %}
+                    {% else %}
                         {% with {
-                            'child': item,
+                            'child': child,
                             'counter': counter,
                         }
                         %}
                             <div class="tab-pane{% if counter == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~counter }}__tab">
-                                {% set childData = source[key]|default([]) %}
-                                {% set childCompareData = compareRawData[key]|default([]) %}
-                                {% for grandchild in child.getChildren|default([]) %}
-                                    {{ _self.renderDataFieldBlock(grandchild, childData, compare, childCompareData, '', path|merge([counter]), locale) }}
-                                {% endfor %}
+                                {{ _self.renderDataFieldBlock(child, source, compare, compareRawData, '', path|merge([counter]), locale) }}
                             </div>
                         {% endwith %}
                         {% set counter = counter + 1 %}
-                    {% endfor %}
-                {% elseif 'EMS\\CoreBundle\\Form\\DataField\\ContainerFieldType' == child.fieldType.type|default(null) %}
-                    <div class="tab-pane{% if counter == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~counter }}__tab">
-                        {{ _self.renderDataFieldBlock(child, source, compare, compareRawData, '', [], locale) }}
-                    </div>
-                    {% set counter = counter + 1 %}
-                {% else %}
-                    {% with {
-                        'child': child,
-                        'counter': counter,
-                    }
-                    %}
-                        <div class="tab-pane{% if counter == 1%} active{% endif %}" id="item_{{ path|join('_')~'_'~counter }}__tab">
-                            {{ _self.renderDataFieldBlock(child, source, compare, compareRawData, '', path|merge([counter]), locale) }}
-                        </div>
-                    {% endwith %}
-                    {% set counter = counter + 1 %}
-                {% endif %}
-            {% endfor %}
+                    {% endif %}
+                {% endfor %}
+            </div>
         </div>
-        <!-- /.tab-content -->
     </div>
     {{ _self.messages(dataField) }}
 {% endblock %}
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inbox.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inbox.html.twig
index ec8e90b66..686bd1928 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inbox.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inbox.html.twig
@@ -1,64 +1,56 @@
-{% trans_default_domain 'EMSCoreBundle' %}{% if counter %}
-
-	<div class="nav-tabs-custom">
-		<ul class="nav nav-tabs">
-			{% if countRejected > 0 %}
-				<li class="active"><a href="#tab_rejected" data-bs-toggle="tab" aria-expanded="true">
-					<i class="fa fa-ban"></i>
-					Rejected
-					<span class="badge badge-primary">{{ countRejected }}</span>
-				</a></li>
-			{% endif %}
-
-			{% if countPending > 0 %}
-				<li class="{% if countRejected == 0 %}active{% endif %}"><a href="#tab_to_treat" data-bs-toggle="tab" aria-expanded="{% if countRejected == 0 %}true{%else%}false{% endif %}">
-					<i class="fa fa-hourglass-half" aria-hidden="true"></i>
-					{{ 'To be treated '|trans }}
-					<span class="badge badge-primary">{{ countPending }}</span>
-				</a></li>
-			{% endif %}
-			<li class="pull-right">
-                {% include '@EMSAdminUI/bootstrap5/elements/pagination.html.twig' with {
-					'lastPage': lastPage,
-					'currentPage': page,
-					'currentFilters': app.request.query,
-					'paginationPath': paginationPath,
-					'showAlwaysFirstAndLast': false
-				} %}
-			</li>
-		</ul>
-		<div class="tab-content">
-			<div class="tab-pane {% if countRejected > 0 %}active{% endif %}" id="tab_rejected">
-                {% include '@EMSAdminUI/bootstrap5/notification/inboxRejected.html.twig' %}
+{% trans_default_domain 'EMSCoreBundle' %}
+{% if counter %}
+	<div class="card card-{{ theme_color }}">
+		<div class="card-header p-0 border-bottom-0">
+			<ul class="nav nav-tabs" role="tablist">
+				{% if countRejected > 0 %}
+					<li class="nav-item"><a href="#tab_rejected" data-bs-target="#tab_rejected" data-bs-toggle="pill" class="nav-link active" role="tab" aria-selected="true">
+						<i class="fa fa-ban"></i>
+						Rejected
+						<span class="badge badge-primary">{{ countRejected }}</span>
+					</a></li>
+				{% endif %}
+
+				{% if countPending > 0 %}
+					<li class="nav-item"><a href="#tab_to_treat" data-bs-target="#tab_to_treat" data-bs-toggle="pill" class="nav-link{% if countRejected == 0 %} active{% endif %}" aria-selected="{% if countRejected == 0 %}true{%else%}false{% endif %}">
+						<i class="fa fa-hourglass-half" aria-hidden="true"></i>
+						{{ 'To be treated '|trans }}
+						<span class="badge badge-primary">{{ countPending }}</span>
+					</a></li>
+				{% endif %}
+				<li class="pull-right">
+					{% include '@EMSAdminUI/bootstrap5/elements/pagination.html.twig' with {
+						'lastPage': lastPage,
+						'currentPage': page,
+						'currentFilters': app.request.query,
+						'paginationPath': paginationPath,
+						'showAlwaysFirstAndLast': false
+					} %}
+				</li>
+			</ul>
+		</div>
+		<div class="card-body">
+			<div class="tab-content">
+				<div class="tab-pane fade{% if countRejected > 0 %} active show{% endif %}" id="tab_rejected" role="tabpanel">
+					{% include '@EMSAdminUI/bootstrap5/notification/inboxRejected.html.twig' %}ssss
+				</div>
+				<div class="tab-pane fade{% if countRejected == 0 %} active show{% endif %}" id="tab_to_treat" role="tabpanel">
+					{% include '@EMSAdminUI/bootstrap5/notification/inboxToTreat.html.twig' %}fffff
+				</div>
 			</div>
-			<!-- /.tab-pane -->
-			<div class="tab-pane{% if countRejected == 0 %}active{% endif %}" id="tab_to_treat">
-                {% include '@EMSAdminUI/bootstrap5/notification/inboxToTreat.html.twig' %}
+		</div>
+	</div>
+{% else %}
+	<div class="box box-default">
+		<div class="box-header with-border">
+			<i class="fa fa-check"></i>
+			<h3 class="box-title">All treated</h3>
+		</div>
+		<div class="box-body">
+			<div class="callout callout-success">
+				<h4>Nothing to treat</h4>
+				<p>You are up to date.</p>
 			</div>
-			<!-- /.tab-pane -->
 		</div>
-		<!-- /.tab-content -->
 	</div>
-
-
-
-	{% else %}
-          <div class="box box-default">
-            <div class="box-header with-border">
-              <i class="fa fa-check"></i>
-
-              <h3 class="box-title">All treated</h3>
-            </div>
-            <!-- /.box-header -->
-            <div class="box-body">
-
-              <div class="callout callout-success">
-                <h4>Nothing to treat</h4>
-
-                <p>You are up to date.</p>
-              </div>
-            </div>
-            <!-- /.box-body -->
-          </div>
-          <!-- /.box -->
-	{% endif %}
+{% endif %}
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inboxToTreat.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inboxToTreat.html.twig
index 2ae1acd64..1b5eda825 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inboxToTreat.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/inboxToTreat.html.twig
@@ -1,8 +1,8 @@
 {% trans_default_domain 'EMSCoreBundle' %}{{ form_start(treatform) }}
 
-		{% if notifications|length <= 0  %}
-			<p>{{ 'No result for this filters combinaison'|trans }}: <a href="{{ path('notifications.inbox') }}">{{ 'reset filters' }}</a></p>
-		{% else %}
+	{% if notifications|length <= 0  %}
+		<p>{{ 'No result for this filters combinaison'|trans }}: <a href="{{ path('notifications.inbox') }}">{{ 'reset filters' }}</a></p>
+	{% else %}
 
 		<div class="table-responsive">
 		<table class="table table-condensed table-striped">
@@ -73,15 +73,14 @@
 			{% endfor %}
 		</table>
 		</div>
-	<div class="">
-		<div class="btn-group">
-			<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#treatNotificationsModal">
-			  <i class="fa fa-gear"></i> Treat selection
-			</button>
+		<div class="">
+			<div class="btn-group">
+				<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#treatNotificationsModal">
+				  <i class="fa fa-gear"></i> Treat selection
+				</button>
+			</div>
 		</div>
-		{% endif %}
-	</div>
-
+	{% endif %}
 
 
 	<!-- Modal -->
@@ -94,7 +93,6 @@
 	      </div>
 	      <div class="modal-body">
       		{{ form_row(treatform.response) }}
-{#       		{{ form_row(treatform.unpublishFrom) }}#}
       		{{ form_row(treatform.publishTo) }}
 	      </div>
 	      <div class="modal-footer">
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/list.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/list.html.twig
index f9153810b..1f1b9c0c1 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/list.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/notification/list.html.twig
@@ -2,3 +2,92 @@
 {%- trans_default_domain 'notification' -%}
 
 {% block title %}{{ 'notification.dashboard.title'|trans }}{% endblock title %}
+
+{% block body %}
+
+    <div class="row">
+
+        <div class="col-sm-12 col-md-3">
+            <div class="col-sm-6 col-md-12">
+                <div class="box box-solid">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">Folders</h3>
+
+                        <div class="box-tools">
+                            <button type="button" class="btn btn-box-tool"
+                                    data-widget="collapse">
+                                <i class="fa fa-minus"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="box-body no-padding" style="display: block;">
+                        <ul class="nav nav-pills nav-stacked">
+                            <li class="{% if folder == 'inbox' %}active{% endif %}">
+                                <a href="{{ path('notifications.inbox') }}">
+                                    <i class="fa fa-inbox"></i>
+                                    {{ 'Inbox'|trans }}
+                                    {% if counter > 0 %}
+                                        <span class="label label-primary pull-right">{{ counter }}</span>
+                                    {% endif %}
+                                </a>
+                            </li>
+                            <li class="{% if folder == 'sent' %}active{% endif %}">
+                                <a href="{{ path('notifications.sent') }}">
+                                    <i class="fa fa-envelope-o"></i>
+                                    {{ 'Outbox'|trans }}
+                                    {% if countSent > 0 %}
+                                        <span class="label label-default pull-right">{{ countSent }}</span>
+                                    {% endif %}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <!-- /.box-body -->
+                </div>
+            </div>
+
+            <div class="col-sm-6 col-md-12">
+                <div class="box box-solid collapsed-box">
+                    {{ form_start(form) }}
+                    <div class="box-header with-border">
+                        <h3 class="box-title">Filters</h3>
+
+                        <div class="box-tools">
+                            <button type="button" class="btn btn-box-tool"
+                                    data-widget="collapse">
+                                <i class="fa fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="box-body no-padding">
+                        <div class="col-md-12">
+                            {{ form_row(form.template) }}
+                        </div>
+                        <div class="col-md-12">
+                            {{ form_row(form.environment) }}
+                        </div>
+                        <div class="col-md-12">
+                            {{ form_row(form.contentType) }}
+                        </div>
+                        {{ form_errors(form) }}
+                    </div>
+                    <!-- /.box-body -->
+                    <div class="box-footer">
+                        {{ form_row(form.filter) }}
+                    </div>
+                    {{ form_end(form) }}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-9 col-sm-12">
+            {% include '@EMSAdminUI/bootstrap5/notification/'~folder~'.html.twig' with {
+                'lastPage': lastPage,
+                'currentPage': page,
+                'currentFilters': app.request.query,
+                'paginationPath': paginationPath,
+                'showAlwaysFirstAndLast': false
+            } %}
+        </div>
+
+    </div>
+{% endblock %}
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/ajax.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/ajax.twig
index 0aeb9f71c..db654940f 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/ajax.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/ajax.twig
@@ -206,60 +206,64 @@
 {% endblock %}
 
 {% block modalTaskBody %}
-    <div class="nav-tabs-custom">
-        <ul class="nav nav-tabs">
-            <li class="active">
-                <a href="#tab_task_info" data-bs-toggle="tab" aria-expanded="true">
-                    <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;{{ 'task.update.tab.info'|trans }}
-                </a>
-            </li>
-            <li>
-                <a href="#tab_task_history" data-bs-toggle="tab" aria-expanded="false">
-                    <i class="fa fa-history" aria-hidden="true"></i>&nbsp;{{ 'task.update.tab.history'|trans }}
-                </a>
-            </li>
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane active" id="tab_task_info">
-                {% if form is defined %}
-                    {{ block('taskForm') }}
-                {% else %}
-                    <div class="row">
-                        <div class="col-md-12 mb-3">
-                            <div class="mb-1"><strong>{{ 'task.field.title'|trans }}</strong></div>
-                            <div>{{ task.title }}</div>
-                        </div>
-                        <div class="col-md-4 mb-3">
-                            <div class="mb-1"><strong>{{ 'task.field.assignee'|trans }}</strong></div>
-                            <div>{{ task.assignee|emsco_display_name }}</div>
-                        </div>
-                        <div class="col-md-4 mb-3">
-                            <div class="mb-1"><strong>{{ 'task.field.requester'|trans }}</strong></div>
-                            <div>{{ task.createdBy|emsco_display_name }}</div>
-                        </div>
-                        <div class="col-md-4 mb-3">
-                            <div class="mb-1"><strong>{{ 'task.field.deadline'|trans }}</strong></div>
-                            {%- if task.hasDeadline -%}
-                                <div>
-                                    {%- set deadline = task.deadline.format(date_format) -%}
-                                    {%- if task.deadline.timestamp < date('now').timestamp -%}
-                                        <span class="text-danger"><strong>{{ deadline }}</strong></span>
-                                    {%- else -%}
-                                        {{ deadline }}
-                                    {%- endif -%}
-                                </div>
-                            {%- else -%}
-                                /
-                            {%- endif -%}
-                        </div>
-                        <div class="col-md-12 mb-3">
-                            <div class="mb-1"><strong>{{ 'task.field.description'|trans }}</strong></div>
-                            {%- if task.hasDescription -%}<div>{{ task.description|nl2br }}</div>{% else %}/{% endif %}
+    <div class="card card-{{ theme_color }}">
+        <div class="card-header p-0 border-bottom-0">
+            <ul class="nav nav-tabs" role="tablist">
+                <li class="nav-item">
+                    <a href="#tab_task_info" data-bs-target="#tab_task_info" data-bs-toggle="pill" class="nav-link active" aria-selected="true">
+                        <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;{{ 'task.update.tab.info'|trans }}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#tab_task_history" data-bs-target="#tab_task_history" data-bs-toggle="pill" class="nav-link" aria-selected="false">
+                        <i class="fa fa-history" aria-hidden="true"></i>&nbsp;{{ 'task.update.tab.history'|trans }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="card-body">
+            <div class="tab-content">
+                <div class="tab-pane fade active show" id="tab_task_info" role="tabpanel">
+                    {% if form is defined %}
+                        {{ block('taskForm') }}
+                    {% else %}
+                        <div class="row">
+                            <div class="col-md-12 mb-3">
+                                <div class="mb-1"><strong>{{ 'task.field.title'|trans }}</strong></div>
+                                <div>{{ task.title }}</div>
+                            </div>
+                            <div class="col-md-4 mb-3">
+                                <div class="mb-1"><strong>{{ 'task.field.assignee'|trans }}</strong></div>
+                                <div>{{ task.assignee|emsco_display_name }}</div>
+                            </div>
+                            <div class="col-md-4 mb-3">
+                                <div class="mb-1"><strong>{{ 'task.field.requester'|trans }}</strong></div>
+                                <div>{{ task.createdBy|emsco_display_name }}</div>
+                            </div>
+                            <div class="col-md-4 mb-3">
+                                <div class="mb-1"><strong>{{ 'task.field.deadline'|trans }}</strong></div>
+                                {%- if task.hasDeadline -%}
+                                    <div>
+                                        {%- set deadline = task.deadline.format(date_format) -%}
+                                        {%- if task.deadline.timestamp < date('now').timestamp -%}
+                                            <span class="text-danger"><strong>{{ deadline }}</strong></span>
+                                        {%- else -%}
+                                            {{ deadline }}
+                                        {%- endif -%}
+                                    </div>
+                                {%- else -%}
+                                    /
+                                {%- endif -%}
+                            </div>
+                            <div class="col-md-12 mb-3">
+                                <div class="mb-1"><strong>{{ 'task.field.description'|trans }}</strong></div>
+                                {%- if task.hasDescription -%}<div>{{ task.description|nl2br }}</div>{% else %}/{% endif %}
+                            </div>
                         </div>
-                    </div>
-                {% endif %}
+                    {% endif %}
+                </div>
+                <div class="tab-pane fade" id="tab_task_history" role="tabpanel">{{ block('renderHistoryTimeline') }}</div>
             </div>
-            <div class="tab-pane" id="tab_task_history">{{ block('renderHistoryTimeline') }}</div>
         </div>
     </div>
 {% endblock %}
diff --git a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/dashboard.html.twig b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/dashboard.html.twig
index 5c084c2bf..d4f9bd4fc 100644
--- a/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/dashboard.html.twig
+++ b/EMS/admin-ui-bundle/src/Resources/views/bootstrap5/revision/task/dashboard.html.twig
@@ -10,47 +10,49 @@
 {%- set requestQuery = app.request.query.all -%}
 {%- set routeParams = app.request.get('_route_params')|merge(requestQuery) -%}
 {%- set showFilters = attribute(requestQuery, 'filters')|default([])|length > 0 -%}
-<div id="task-dashboard" class="nav-tabs-custom">
-    <ul class="nav nav-tabs">
-        {% for tabName in tabs %}
-            {% if currentTab == tabName %}
-                <li class="active">
-                    <a href="#{{ currentTab }}" data-bs-toggle="tab" aria-expanded="true">{{ "task.dashboard.tab.#{tabName}"|trans }}</a>
+<div id="task-dashboard" class="card card-{{ theme_color }}">
+    <div class="card-header p-0 border-bottom-0">
+        <ul class="nav nav-tabs" role="tablist">
+            {% for tabName in tabs %}
+                <li class="nav-item">
+                    {% if currentTab == tabName %}
+                        <a href="#{{ currentTab }}" data-bs-target="#{{ currentTab }}" data-bs-toggle="pill" class="nav-link active" role="tab" aria-selected="true">{{ "task.dashboard.tab.#{tabName}"|trans }}</a>
+                    {% else %}
+                        <a href="{{ path(route, routeParams|merge({'tab': tabName})) }}" class="nav-link"role="tab" aria-selected="false">
+                            {{ "task.dashboard.tab.#{tabName}"|trans }}
+                        </a>
+                    {% endif %}
                 </li>
-            {% else %}
-                <li>
-                    <a href="{{ path(route, routeParams|merge({'tab': tabName})) }}">
-                        {{ "task.dashboard.tab.#{tabName}"|trans }}
-                    </a>
+            {% endfor %}
+            {% if filterForm is defined %}
+                <li class="pull-right">
+                    <div>
+                        <a class="btn btn-sm btn-primary" role="button" data-bs-toggle="collapse" href="#filters" aria-expanded="{{ showFilters ? 'true' : 'false' }}" aria-controls="filters">
+                            <i class="fa fa-filter" aria-hidden="true"></i> {{ 'task.filters'|trans }}
+                        </a>
+                    </div>
                 </li>
             {% endif %}
-        {% endfor %}
-        {% if filterForm is defined %}
-            <li class="pull-right">
-                <div>
-                    <a class="btn btn-sm btn-primary" role="button" data-bs-toggle="collapse" href="#filters" aria-expanded="{{ showFilters ? 'true' : 'false' }}" aria-controls="filters">
-                        <i class="fa fa-filter" aria-hidden="true"></i> {{ 'task.filters'|trans }}
-                    </a>
-                </div>
-            </li>
-        {% endif %}
-    </ul>
-    <div class="tab-content">
-        <div class="tab-pane active" id="{{ currentTab }}">
-            {{ block('filters') }}
-            {% form_theme formTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
-            {{ form(formTable) }}
-            {% if table.count > 0 %}
-                <div class="btn-group">
-                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        Export <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <li><a href="{{ path('ems_core_task_ajax_datatable_excel', routeParams|merge({'tab': currentTab}) ) }}">Excel</a></li>
-                        <li><a href="{{ path('ems_core_task_ajax_datatable_csv', routeParams|merge({'tab': currentTab}) ) }}">CSV</a></li>
-                    </ul>
-                </div>
-            {% endif %}
+        </ul>
+    </div>
+    <div class="card-body">
+        <div class="tab-content">
+            <div class="tab-pane fade active show" id="{{ currentTab }}" role="tabpanel">
+                {{ block('filters') }}
+                {% form_theme formTable '@EMSAdminUI/bootstrap5/form/forms.html.twig' %}
+                {{ form(formTable) }}
+                {% if table.count > 0 %}
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Export <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a href="{{ path('ems_core_task_ajax_datatable_excel', routeParams|merge({'tab': currentTab}) ) }}">Excel</a></li>
+                            <li><a href="{{ path('ems_core_task_ajax_datatable_csv', routeParams|merge({'tab': currentTab}) ) }}">CSV</a></li>
+                        </ul>
+                    </div>
+                {% endif %}
+            </div>
         </div>
     </div>
 </div>