diff --git a/lib/Froxlor/UI/Callbacks/Style.php b/lib/Froxlor/UI/Callbacks/Style.php
index 8d23b5d9..511a118b 100644
--- a/lib/Froxlor/UI/Callbacks/Style.php
+++ b/lib/Froxlor/UI/Callbacks/Style.php
@@ -31,17 +31,17 @@ class Style
 {
 	public static function deactivated(array $attributes): string
 	{
-		return $attributes['fields']['deactivated'] ? 'bg-danger' : '';
+		return $attributes['fields']['deactivated'] ? 'table-danger' : '';
 	}
 
 	public static function loginDisabled(array $attributes): string
 	{
-		return $attributes['fields']['login_enabled'] == 'N' ? 'bg-danger' : '';
+		return $attributes['fields']['login_enabled'] == 'N' ? 'table-danger' : '';
 	}
 
 	public static function resultIntegrityBad(array $attributes): string
 	{
-		return $attributes['fields']['result'] ? '' : 'bg-warning';
+		return $attributes['fields']['result'] ? '' : 'table-warning';
 	}
 
 	public static function invalidApiKey(array $attributes): string
@@ -53,7 +53,7 @@ class Style
 				$isValid = false;
 			}
 		}
-		return $isValid ? '' : 'bg-danger';
+		return $isValid ? '' : 'table-danger';
 	}
 
 	public static function resultDomainTerminatedOrDeactivated(array $attributes): string
@@ -63,24 +63,24 @@ class Style
 		if (!empty($termination_date)) {
 			$cdate = strtotime($termination_date . " 23:59:59");
 			$today = time();
-			$termination_css = 'bg-warning';
+			$termination_css = 'table-warning';
 			if ($cdate < $today) {
-				$termination_css = 'bg-danger text-light';
+				$termination_css = 'table-danger';
 			}
 		}
 		$deactivated = $attributes['fields']['deactivated'] || $attributes['fields']['customer_deactivated'];
-		return $deactivated ? 'bg-info text-light' : $termination_css;
+		return $deactivated ? 'table-info' : $termination_css;
 	}
 
 	public static function resultCustomerLockedOrDeactivated(array $attributes): string
 	{
 		$row_css = '';
 		if ((int)$attributes['fields']['deactivated'] == 1) {
-			$row_css = 'bg-info text-light';
+			$row_css = 'table-info';
 		} elseif ($attributes['fields']['loginfail_count'] >= Settings::Get('login.maxloginattempts')
 			&& $attributes['fields']['lastlogin_fail'] > (time() - Settings::Get('login.deactivatetime'))
 		) {
-			$row_css = 'bg-warning';
+			$row_css = 'table-warning';
 		}
 
 		return $row_css;
@@ -96,9 +96,9 @@ class Style
 		$style = '';
 		if ((int)$attributes[$field] >= 0) {
 			if (($attributes[$field] / 100) * $report_max < $attributes[$field . '_used']) {
-				$style = 'bg-danger';
+				$style = 'table-danger';
 			} elseif (($attributes[$field] / 100) * ($report_max - 15) < $attributes[$field . '_used']) {
-				$style = 'bg-warning';
+				$style = 'table-warning';
 			}
 		}
 		return $style;
diff --git a/templates/Froxlor/settings/opcacheinfo.html.twig b/templates/Froxlor/settings/opcacheinfo.html.twig
index ae52bc52..adabcf48 100644
--- a/templates/Froxlor/settings/opcacheinfo.html.twig
+++ b/templates/Froxlor/settings/opcacheinfo.html.twig
@@ -20,9 +20,14 @@
 			<div class="card h-100 mb-3">
 				<div class="card-body">
 					<h5 class="card-title">{{ lng('opcacheinfo.memusage') }}</h5>
-					<div class="progress position-relative">
-						<div class="progress-bar bg-success" role="progressbar" style="width: {{ opcacheinfo.overview.used_memory_percentage }}%" aria-valuenow="{{ opcacheinfo.overview.used_memory }}" aria-valuemin="0" aria-valuemax="{{ opcacheinfo.overview.total_memory }}"></div>
-						<small class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_memory_percentage }}%</small>
+					<div class="progress position-relative" role="progressbar"
+						 aria-valuenow="{{ opcacheinfo.overview.used_memory }}" aria-valuemin="0"
+						 aria-valuemax="{{ opcacheinfo.overview.total_memory }}">
+						<div class="progress-bar bg-success"
+							 style="width: {{ opcacheinfo.overview.used_memory_percentage }}%"></div>
+						<small
+							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_memory_percentage }}
+							%</small>
 					</div>
 				</div>
 				<ul class="list-group list-group-flush">
@@ -49,10 +54,22 @@
 			<div class="card h-100 mb-3">
 				<div class="card-body">
 					<h5 class="card-title">{{ lng('opcacheinfo.hitsc') }}</h5>
-					<div class="progress position-relative">
-						<div class="progress-bar bg-success" role="progressbar" style="width: {{ opcacheinfo.overview.hit_rate_percentage }}%" aria-valuenow="{{ opcacheinfo.overview.hits }}" aria-valuemin="0" aria-valuemax="{{ opcacheinfo.overview.hits + opcacheinfo.overview.misses }}"></div>
-						<div class="progress-bar bg-danger" role="progressbar" style="width: {{ 100 - opcacheinfo.overview.hit_rate_percentage }}%" aria-valuenow="{{ opcacheinfo.overview.misses }}" aria-valuemin="0" aria-valuemax="{{ opcacheinfo.overview.hits + opcacheinfo.overview.misses }}"></div>
-						<small class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.hit_rate_percentage }}%</small>
+					<div class="progress-stacked position-relative">
+						<div class="progress" role="progressbar" aria-valuenow="{{ opcacheinfo.overview.hits }}"
+							 aria-valuemin="0"
+							 aria-valuemax="{{ opcacheinfo.overview.hits + opcacheinfo.overview.misses }}"
+							 style="width: {{ opcacheinfo.overview.hit_rate_percentage }}%">
+							<div class="progress-bar bg-success"></div>
+						</div>
+						<div class="progress" role="progressbar" aria-valuenow="{{ opcacheinfo.overview.misses }}"
+							 aria-valuemin="0"
+							 aria-valuemax="{{ opcacheinfo.overview.hits + opcacheinfo.overview.misses }}"
+							 style="width: {{ 100 - opcacheinfo.overview.hit_rate_percentage }}%">
+							<div class="progress-bar bg-danger"></div>
+						</div>
+						<small
+							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.hit_rate_percentage }}
+							%</small>
 					</div>
 				</div>
 				<ul class="list-group list-group-flush">
@@ -80,8 +97,13 @@
 				<div class="card-body">
 					<h5 class="card-title">{{ lng('opcacheinfo.usedkey') }}</h5>
 					<div class="progress position-relative">
-						<div class="progress-bar bg-success" role="progressbar" style="width: {{ opcacheinfo.overview.used_key_percentage }}%" aria-valuenow="{{ opcacheinfo.overview.num_cached_keys }}" aria-valuemin="0" aria-valuemax="{{ opcacheinfo.overview.max_cached_keys }}"></div>
-						<small class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_key_percentage }}%</small>
+						<div class="progress-bar bg-success" role="progressbar"
+							 style="width: {{ opcacheinfo.overview.used_key_percentage }}%"
+							 aria-valuenow="{{ opcacheinfo.overview.num_cached_keys }}" aria-valuemin="0"
+							 aria-valuemax="{{ opcacheinfo.overview.max_cached_keys }}"></div>
+						<small
+							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_key_percentage }}
+							%</small>
 					</div>
 				</div>
 				<ul class="list-group list-group-flush">
@@ -108,15 +130,18 @@
 					</li>
 					<li class="list-group-item d-flex justify-content-between align-items-center">
 						{{ lng('opcacheinfo.used') }}
-						<span class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.strings_used_memory }}</span>
+						<span
+							class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.strings_used_memory }}</span>
 					</li>
 					<li class="list-group-item d-flex justify-content-between align-items-center">
 						{{ lng('opcacheinfo.free') }}
-						<span class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.strings_free_memory }}</span>
+						<span
+							class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.strings_free_memory }}</span>
 					</li>
 					<li class="list-group-item d-flex justify-content-between align-items-center">
 						{{ lng('opcacheinfo.strcount') }}
-						<span class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.number_of_strings }}</span>
+						<span
+							class="badge bg-secondary">{{ opcacheinfo.overview.readable.interned.number_of_strings }}</span>
 					</li>
 				</ul>
 			</div>
@@ -128,53 +153,53 @@
 			<div class="card table-responsive mb-3">
 				<table class="table table-borderless table-striped align-middle mb-0 px-3">
 					<tbody>
-						<tr>
-							<th class="text-center" colspan="2" scope="row">{{ lng('opcacheinfo.generaltitle') }}</th>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('opcacheinfo.version') }}</th>
-							<td class="text-end">{{ opcacheinfo.version.version }}</td>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('opcacheinfo.phpversion') }}</th>
-							<td class="text-end">{{ opcacheinfo.version.php }}</td>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('admin.hostname') }}</th>
-							<td class="text-end">{{ opcacheinfo.version.host }}</td>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('admin.serversoftware') }}</th>
-							<td class="text-end">{{ opcacheinfo.version.server }}</td>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('opcacheinfo.start') }}</th>
-							<td class="text-end">{{ opcacheinfo.overview.start_time|date('d.m.Y H:i:s') }}</td>
-						</tr>
-						<tr>
-							<th class="fw-bold" scope="row">{{ lng('opcacheinfo.lastreset') }}</th>
-							<td class="text-end">
-								{% if opcacheinfo.overview.last_restart_time > 0 %}
-									{{ opcacheinfo.overview.last_restart_time|date('d.m.Y H:i:s') }}
-								{% else %}
-									{{ lng('panel.never') }}
-								{% endif %}
-							</td>
-						</tr>
+					<tr>
+						<th class="text-center" colspan="2" scope="row">{{ lng('opcacheinfo.generaltitle') }}</th>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('opcacheinfo.version') }}</th>
+						<td class="text-end">{{ opcacheinfo.version.version }}</td>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('opcacheinfo.phpversion') }}</th>
+						<td class="text-end">{{ opcacheinfo.version.php }}</td>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('admin.hostname') }}</th>
+						<td class="text-end">{{ opcacheinfo.version.host }}</td>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('admin.serversoftware') }}</th>
+						<td class="text-end">{{ opcacheinfo.version.server }}</td>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('opcacheinfo.start') }}</th>
+						<td class="text-end">{{ opcacheinfo.overview.start_time|date('d.m.Y H:i:s') }}</td>
+					</tr>
+					<tr>
+						<th class="fw-bold" scope="row">{{ lng('opcacheinfo.lastreset') }}</th>
+						<td class="text-end">
+							{% if opcacheinfo.overview.last_restart_time > 0 %}
+								{{ opcacheinfo.overview.last_restart_time|date('d.m.Y H:i:s') }}
+							{% else %}
+								{{ lng('panel.never') }}
+							{% endif %}
+						</td>
+					</tr>
 					</tbody>
 				</table>
 			</div>
 			<div class="card table-responsive">
 				<table class="table table-borderless table-striped align-middle mb-0 px-3">
 					<tbody>
-						<tr>
-							<th class="text-center" scope="row">{{ lng('opcacheinfo.funcsavail') }}</th>
-						</tr>
-						{% for funcs in opcacheinfo.functions %}
+					<tr>
+						<th class="text-center" scope="row">{{ lng('opcacheinfo.funcsavail') }}</th>
+					</tr>
+					{% for funcs in opcacheinfo.functions %}
 						<tr>
 							<td>{{ funcs }}</td>
 						</tr>
-						{% endfor %}
+					{% endfor %}
 					</tbody>
 				</table>
 			</div>
@@ -183,29 +208,29 @@
 			<div class="card table-responsive">
 				<table class="table table-borderless table-striped align-middle mb-0 px-3">
 					<tbody>
+					<tr>
+						<th class="text-center" colspan="2" scope="row">{{ lng('opcacheinfo.runtimeconf') }}</th>
+					</tr>
+					{% for directive in opcacheinfo.directives %}
 						<tr>
-							<th class="text-center" colspan="2" scope="row">{{ lng('opcacheinfo.runtimeconf') }}</th>
+							<th class="fw-bold" scope="row">{{ directive.k }}</th>
+							<td class="text-end">
+								{% if directive.v is iterable %}
+									{% for vval in directive.v %}
+										{% if vval is iterable %}
+											{% for val2 in vval %}
+												{{ val2|raw }}<br>
+											{% endfor %}
+										{% else %}
+											{{ vval|raw }}<br>
+										{% endif %}
+									{% endfor %}
+								{% else %}
+									{{ directive.v|raw }}
+								{% endif %}
+							</td>
 						</tr>
-						{% for directive in opcacheinfo.directives %}
-							<tr>
-								<th class="fw-bold" scope="row">{{ directive.k }}</th>
-								<td class="text-end">
-									{% if directive.v is iterable %}
-										{% for vval in directive.v %}
-											{% if vval is iterable %}
-												{% for val2 in vval %}
-													{{ val2|raw }}<br>
-												{% endfor %}
-											{% else %}
-												{{ vval|raw }}<br>
-											{% endif %}
-										{% endfor %}
-									{% else %}
-										{{ directive.v|raw }}
-									{% endif %}
-								</td>
-							</tr>
-						{% endfor %}
+					{% endfor %}
 					</tbody>
 				</table>
 			</div>
diff --git a/templates/Froxlor/table/macros.html.twig b/templates/Froxlor/table/macros.html.twig
index 32fecdaf..c006f4bd 100644
--- a/templates/Froxlor/table/macros.html.twig
+++ b/templates/Froxlor/table/macros.html.twig
@@ -1,5 +1,5 @@
 {% macro progressbar(data) %}
-	<div class="progress progress-thin">
+	<div class="progress progress-thin" role="progressbar" aria-valuenow="{{ data.percent }}">
 		<div class="progress-bar {{ data.style }}" style="width: {{ data.percent }}%;"></div>
 	</div>
 	<div class="text-end small">
diff --git a/templates/Froxlor/user/dashboard-item.html.twig b/templates/Froxlor/user/dashboard-item.html.twig
index 61272077..1489cde7 100644
--- a/templates/Froxlor/user/dashboard-item.html.twig
+++ b/templates/Froxlor/user/dashboard-item.html.twig
@@ -1,31 +1,38 @@
 {% macro ditem(lngstr, available, used, assigned = null, formatbytes = false, byte_usage  = null) %}
-    <div class="col border-end border-bottom p-3">
-        <div class="row mb-1">
-			<div class="col text-truncate">{{ lng(lngstr) }}{% if byte_usage %} <small>({{ byte_usage|formatBytes }})</small>{% endif %}</div>
-            <div class="col-auto">
-                <small>{% if formatbytes %}{{ used|formatBytes }}{% else %}{{ used }}{% endif %}/{% if available < 0 %}{{ lng('panel.unlimited') }}{% else %}{% if formatbytes %}{{ available|formatBytes }}{% else %}{{ available }}{% endif %}{% endif %}</small>
-            </div>
-        </div>
-        <div class="progress progress-thin my-auto">
-            {% set usageperc = 1 %}
-            {% if available > 0 %}
-                {% set usageperc = (used  / available) * 100|round %}
-            {% endif %}
-            <div
-                class="progress-bar{% if available < 0 %} bg-secondary{% elseif usageperc >= 75 and usageperc < 90 %} bg-warning{% elseif usageperc >= 90 %} bg-danger{% endif %}"
-                role="progressbar"
-                style="width: {% if available < 0 %}100{% else %}{{ usageperc }}{% endif %}%;"
-                aria-valuenow="{% if available < 0 %}100{% else %}{{ used }}{% endif %}"
-                aria-valuemin="0"
-                aria-valuemax="{% if available < 0 %}100{% else %}{{ available }}{% endif %}"></div>
-        </div>
-        {% if assigned is not empty %}
-            <div class="progress progress-thin mt-2 my-auto">
-                <div class="progress-bar bg-primary" role="progressbar"
-                    style="width:{% if available > 0 %}{{ (assigned / available) * 100|round }}{% else %}1{% endif %}%;"
-                    aria-valuenow="{{ assigned }}" aria-valuemin="0"
-                    aria-valuemax="{{ available }}"></div>
-            </div>
-        {% endif %}
-    </div>
+	<div class="col border-end border-bottom p-3">
+		<div class="row mb-1">
+			<div class="col text-truncate">{{ lng(lngstr) }}{% if byte_usage %} <small>({{ byte_usage|formatBytes }}
+					)</small>{% endif %}</div>
+			<div class="col-auto">
+				<small>{% if formatbytes %}{{ used|formatBytes }}{% else %}{{ used }}{% endif %}
+					/{% if available < 0 %}{{ lng('panel.unlimited') }}{% else %}{% if formatbytes %}{{ available|formatBytes }}{% else %}{{ available }}{% endif %}{% endif %}</small>
+			</div>
+		</div>
+		{% set usageperc = 1 %}
+		{% if available > 0 %}
+			{% set usageperc = (used  / available) * 100|round %}
+		{% endif %}
+		<div class="progress progress-thin my-auto"
+			 role="progressbar"
+			 aria-valuenow="{% if available < 0 %}100{% else %}{{ used }}{% endif %}"
+			 aria-valuemin="0"
+			 aria-valuemax="{% if available < 0 %}100{% else %}{{ available }}{% endif %}"
+		>
+			<div
+				class="progress-bar{% if available < 0 %} bg-secondary{% elseif usageperc >= 75 and usageperc < 90 %} bg-warning{% elseif usageperc >= 90 %} bg-danger{% endif %}"
+				style="width: {% if available < 0 %}100{% else %}{{ usageperc }}{% endif %}%;"
+			></div>
+		</div>
+		{% if assigned is not empty %}
+			<div class="progress progress-thin mt-2 my-auto"
+				 role="progressbar"
+				 aria-valuenow="{{ assigned }}"
+				 aria-valuemin="0"
+				 aria-valuemax="{{ available }}"
+			>
+				<div class="progress-bar bg-primary"
+					 style="width:{% if available > 0 %}{{ (assigned / available) * 100|round }}{% else %}1{% endif %}%;"></div>
+			</div>
+		{% endif %}
+	</div>
 {% endmacro %}