diff --git a/lib/Froxlor/UI/Callbacks/Text.php b/lib/Froxlor/UI/Callbacks/Text.php
index 0656cc1c..eb85a376 100644
--- a/lib/Froxlor/UI/Callbacks/Text.php
+++ b/lib/Froxlor/UI/Callbacks/Text.php
@@ -101,6 +101,7 @@ class Text
 			'entry' => $attributes['fields']['id'],
 			'id' => 'akModal' . $attributes['fields']['id'],
 			'title' => 'API-key ' . ($attributes['fields']['loginname'] ?? $attributes['fields']['adminname']),
+			'action' => 'apikeys',
 			'body' => $body
 		];
 	}
diff --git a/templates/Froxlor/form/form.html.twig b/templates/Froxlor/form/form.html.twig
index 627f7ce1..2311d393 100644
--- a/templates/Froxlor/form/form.html.twig
+++ b/templates/Froxlor/form/form.html.twig
@@ -1,11 +1,11 @@
-{% macro form(form_data, formaction, title = "", hiddenid = "", nosubmit = false) %}
+{% macro form(form_data, formaction, title = "", hiddenid = "", nosubmit = false, idprefix = "") %}
 
 	{% import "Froxlor/form/formfields.html.twig" as formfields %}
 
 	<form action="{{ formaction|default("") }}" method="post" enctype="application/x-www-form-urlencoded" class="form">
 		{% for sid,section in form_data.sections %}
 			{% if section.visible is not defined or (section.visible is defined and section.visible == true) %}
-			<div class="card mb-3" id="{{ sid }}">
+			<div class="card mb-3" id="{{ idprefix }}{{ sid }}">
 				{% if section.title is not empty %}
 					<div class="card-header">
 						{% if section.image is not empty %}
diff --git a/templates/Froxlor/src/scss/_global.scss b/templates/Froxlor/src/scss/_global.scss
index 6875a1fb..adc7a14e 100644
--- a/templates/Froxlor/src/scss/_global.scss
+++ b/templates/Froxlor/src/scss/_global.scss
@@ -4,6 +4,10 @@
 	outline: none;
 }
 
+.form-control[readonly] {
+	background: rgba(0, 0, 0, .15);
+}
+
 .page-header {
 	margin-bottom: 2rem;
 
diff --git a/templates/Froxlor/table/macros.html.twig b/templates/Froxlor/table/macros.html.twig
index 23b631c5..08eff78f 100644
--- a/templates/Froxlor/table/macros.html.twig
+++ b/templates/Froxlor/table/macros.html.twig
@@ -53,7 +53,7 @@
 		{% endif %}
 	</a>
 	{% if data.modal is defined and data.modal is iterable %}
-		<div class="modal fade" data-action="apikeys" data-entry="{{ data.modal.entry }}" id="{{ data.modal.id }}" aria-hidden="true" aria-labelledby="{{ data.modal.id }}Label" tabindex="-1">
+		<div class="modal fade" data-action="{{ data.modal.action|default('') }}" data-entry="{{ data.modal.entry }}" id="{{ data.modal.id }}" aria-hidden="true" aria-labelledby="{{ data.modal.id }}Label" tabindex="-1">
 			<div class="modal-dialog {{ data.modal.size|default('modal-xl') }} modal-dialog-centered">
 				<div class="modal-content">
 					<div class="modal-header">
@@ -64,7 +64,7 @@
 						{{ data.modal.body|raw }}
 					</div>
 					<div class="modal-footer">
-						<button class="btn btn-primary" data-bs-dismiss="modal">{{ lng('panel.modalclose') }}</button>
+						<button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ lng('panel.modalclose') }}</button>
 					</div>
 				</div>
 			</div>
diff --git a/templates/Froxlor/table/table.html.twig b/templates/Froxlor/table/table.html.twig
index 8fc19de9..8d8ce762 100644
--- a/templates/Froxlor/table/table.html.twig
+++ b/templates/Froxlor/table/table.html.twig
@@ -3,68 +3,66 @@
 	{% import "Froxlor/table/macros.html.twig" as macros %}
 	{% import "Froxlor/table/pagination.html.twig" as pagination %}
 
-	<form action="{{ action|default("") }}" method="post" enctype="application/x-www-form-urlencoded" class="form">
-		{% if listing.table.tr|length == 0 %}
-			<div class="alert alert-info" role="alert">
-				<h4 class="alert-heading">{{ lng('admin.note') }}</h4>
-				<p>{{ listing.empty_msg|default(lng('panel.listing_empty'))|raw }}</p>
+	{% if listing.table.tr|length == 0 %}
+		<div class="alert alert-info" role="alert">
+			<h4 class="alert-heading">{{ lng('admin.note') }}</h4>
+			<p>{{ listing.empty_msg|default(lng('panel.listing_empty'))|raw }}</p>
+		</div>
+	{% else %}
+		<div class="d-flex flex-column align-items-end mt-n2">
+			<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75 text-dark">
+				{% if gSearchText is not empty %}
+					<span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span>
+				{% endif %}
+				<span type="button" data-bs-toggle="modal" data-bs-target="#searchColumnsModal" class="me-2"><i class="fa-solid fa-search"></i></span>
+				<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal"><i class="fa-solid fa-cog"></i></span>
 			</div>
-		{% else %}
-			<div class="d-flex flex-column align-items-end mt-n2">
-				<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75 text-dark">
-					{% if gSearchText is not empty %}
-						<span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span>
-					{% endif %}
-					<span type="button" data-bs-toggle="modal" data-bs-target="#searchColumnsModal" class="me-2"><i class="fa-solid fa-search"></i></span>
-					<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal"><i class="fa-solid fa-cog"></i></span>
-				</div>
-			</div>
-			<div class="card table-responsive">
-				<table class="table table-borderless table-striped align-middle mb-0 px-3">
-					<thead>
-						<tr>
-							{% for key,th in listing.table.th %}
-								{{ pagination.titlesorting(listing.pagination, key, th) }}
+		</div>
+		<div class="card table-responsive">
+			<table class="table table-borderless table-striped align-middle mb-0 px-3">
+				<thead>
+					<tr>
+						{% for key,th in listing.table.th %}
+							{{ pagination.titlesorting(listing.pagination, key, th) }}
+						{% endfor %}
+					</tr>
+				</thead>
+				<tbody>
+					{% for tr in listing.table.tr %}
+						<tr {% if tr.class is defined %} class="{{ tr.class }}" {% endif %}>
+							{% for td in tr.td %}
+								<td class="px-3{% if td.class is defined %} {{ td.class }}{% endif %}">
+									{% if td.data is iterable %}
+										{% if td.data.macro == 'progressbar' %}
+											{{ macros.progressbar(td.data.data) }}
+										{% elseif td.data.macro == 'boolean' %}
+											{{ macros.boolean(td.data.data) }}
+										{% elseif td.data.macro == 'booleanWithInfo' %}
+											{{ macros.booleanWithInfo(td.data.data) }}
+										{% elseif td.data.macro == 'link' %}
+											{{ macros.link(td.data.data) }}
+										{% elseif td.data.macro == 'domainWithSan' %}
+											{{ macros.domainWithSan(td.data.data) }}
+										{% elseif td.data.macro == 'actions' %}
+											{{ macros.actions(td.data.data) }}
+										{% else %}
+											Table macro '{{ td.data.macro|json_encode }}' is not implemented!
+											Unable to handle this data: {{ td.data|json_encode }}
+										{% endif %}
+									{% else %}
+										{{ td.data|raw }}
+									{% endif %}
+								</td>
 							{% endfor %}
 						</tr>
-					</thead>
-					<tbody>
-						{% for tr in listing.table.tr %}
-							<tr {% if tr.class is defined %} class="{{ tr.class }}" {% endif %}>
-								{% for td in tr.td %}
-									<td class="px-3{% if td.class is defined %} {{ td.class }}{% endif %}">
-										{% if td.data is iterable %}
-											{% if td.data.macro == 'progressbar' %}
-												{{ macros.progressbar(td.data.data) }}
-											{% elseif td.data.macro == 'boolean' %}
-												{{ macros.boolean(td.data.data) }}
-											{% elseif td.data.macro == 'booleanWithInfo' %}
-												{{ macros.booleanWithInfo(td.data.data) }}
-											{% elseif td.data.macro == 'link' %}
-												{{ macros.link(td.data.data) }}
-											{% elseif td.data.macro == 'domainWithSan' %}
-												{{ macros.domainWithSan(td.data.data) }}
-											{% elseif td.data.macro == 'actions' %}
-												{{ macros.actions(td.data.data) }}
-											{% else %}
-												Table macro '{{ td.data.macro|json_encode }}' is not implemented!
-												Unable to handle this data: {{ td.data|json_encode }}
-											{% endif %}
-										{% else %}
-											{{ td.data|raw }}
-										{% endif %}
-									</td>
-								{% endfor %}
-							</tr>
-						{% endfor %}
-					</tbody>
-				</table>
-				{% if listing.pagination is not empty %}
-					{{ pagination.paging(listing.pagination) }}
-				{% endif %}
-			</div>
-		{% endif %}
-	</form>
+					{% endfor %}
+				</tbody>
+			</table>
+			{% if listing.pagination is not empty %}
+				{{ pagination.paging(listing.pagination) }}
+			{% endif %}
+		</div>
+	{% endif %}
 
 	<!-- Modal -->
 	<div class="modal fade" id="manageColumnsModal" tabindex="-1" aria-labelledby="manageColumnsModalLabel" aria-hidden="true">
diff --git a/templates/Froxlor/user/form.html.twig b/templates/Froxlor/user/form.html.twig
index 3e4afa36..a9059c3d 100644
--- a/templates/Froxlor/user/form.html.twig
+++ b/templates/Froxlor/user/form.html.twig
@@ -52,6 +52,6 @@
 
 	{% import "Froxlor/form/form.html.twig" as form %}
 
-	{{ form.form(formdata, formaction|default('#'), formdata.title, editid|default('')) }}
+	{{ form.form(formdata, formaction|default('#'), formdata.title, editid|default(''), false, , idprefix|default('')) }}
 
 {% endblock %}
diff --git a/templates/Froxlor/user/inline-form.html.twig b/templates/Froxlor/user/inline-form.html.twig
index 1a391ccf..0df2fc4d 100644
--- a/templates/Froxlor/user/inline-form.html.twig
+++ b/templates/Froxlor/user/inline-form.html.twig
@@ -1,2 +1,2 @@
 {% import "Froxlor/form/form.html.twig" as form %}
-{{ form.form(formdata, formaction|default('#'), formdata.title, editid|default(''), true) }}
+{{ form.form(formdata, formaction|default('#'), formdata.title, editid|default(''), true, idprefix|default('')) }}
diff --git a/templates/Froxlor/user/traffic.html.twig b/templates/Froxlor/user/traffic.html.twig
index 2087f5cc..a7fded98 100644
--- a/templates/Froxlor/user/traffic.html.twig
+++ b/templates/Froxlor/user/traffic.html.twig
@@ -111,7 +111,7 @@
 			datasets: [{
 				label: 'Traffic summary',
 				backgroundColor: ['rgb(255, 99, 132)', 'rgb(200, 199, 132)', 'rgb(255, 99, 0)'],
-				data: [{value: {{ metrics.http }}, formatted: '{{ metrics.http|formatBytes }}'}, {value: {{ metrics.ftp }}, formatted: '{{ metrics.ftp|formatBytes }}'}, {value: {{ metrics.mail }}, formatted: '{{ metrics.mail|formatBytes }}'}]
+				data: [{value: '{{ metrics.http|default(0) }}', formatted: '{{ metrics.http|formatBytes }}'}, {value: '{{ metrics.ftp|default(0) }}', formatted: '{{ metrics.ftp|formatBytes }}'}, {value: '{{ metrics.mail|default(0) }}', formatted: '{{ metrics.mail|formatBytes }}'}]
 			}]
 		};
 
@@ -151,7 +151,7 @@
 			const dataValues = [];
 			{% for user in users|sort((a, b) => a.total <=> b.total)|slice(0, 5) %}
 				labelsC.push('{{ user.loginname }}');
-				dataValues.push({value: {{ user.total }}, formatted: '{{ user.total|formatBytes }}'});
+				dataValues.push({value: '{{ user.total|default(0) }}', formatted: '{{ user.total|formatBytes }}'});
 			{% endfor %}
 
 			const dataC = {
@@ -219,11 +219,11 @@
 					label: 'HTTP traffic',
 					backgroundColor: 'rgb(255, 99, 132)',
 					{% if range starts with 'days' or range == 'currentmonth' %}
-						data: [{% for d,dd in days %}{value: {{ dd.http }}, formatted: '{{ dd.http|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
+						data: [{% for d,dd in days %}{value: '{{ dd.http|default(0) }}', formatted: '{{ dd.http|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
 					{% elseif range starts with 'months' or range starts with 'year' or range == 'currentyear' %}
-						data: [{% for m,md in months %}{value: {{ md.http }}, formatted: '{{ md.http|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
+						data: [{% for m,md in months %}{value: '{{ md.http|default(0) }}', formatted: '{{ md.http|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
 					{% else %}
-						data: [{% for yr,year in years %}{value: {{ year.http }}, formatted: '{{ year.http|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
+						data: [{% for yr,year in years %}{value: '{{ year.http|default(0) }}', formatted: '{{ year.http|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
 					{% endif %}
 					parsing: {
 						xAxisKey: 'axisv'
@@ -233,11 +233,11 @@
 					label: 'FTP traffic',
 					backgroundColor: 'rgb(200, 199, 132)',
 					{% if range starts with 'days' or range == 'currentmonth' %}
-						data: [{% for d,dd in days %}{value: {{ dd.ftp }}, formatted: '{{ dd.ftp|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
+						data: [{% for d,dd in days %}{value: '{{ dd.ftp|default(0) }}', formatted: '{{ dd.ftp|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
 					{% elseif range starts with 'months' or range starts with 'year' or range == 'currentyear' %}
-						data: [{% for m,md in months %}{value: {{ md.ftp }}, formatted: '{{ md.ftp|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
+						data: [{% for m,md in months %}{value: '{{ md.ftp|default(0) }}', formatted: '{{ md.ftp|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
 					{% else %}
-						data: [{% for yr,year in years %}{value: {{ year.ftp }}, formatted: '{{ year.ftp|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
+						data: [{% for yr,year in years %}{value: '{{ year.ftp|default(0) }}', formatted: '{{ year.ftp|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
 					{% endif %}
 					parsing: {
 						xAxisKey: 'axisv'
@@ -247,11 +247,11 @@
 					label: 'Mail traffic',
 					backgroundColor: 'rgb(255, 99, 0)',
 					{% if range starts with 'days' or range == 'currentmonth' %}
-						data: [{% for d,dd in days %}{value: {{ dd.mail }}, formatted: '{{ dd.mail|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
+						data: [{% for d,dd in days %}{value: '{{ dd.mail|default(0) }}', formatted: '{{ dd.mail|formatBytes }}', axisv: '{{ d }}'},{% endfor %}],
 					{% elseif range starts with 'months' or range starts with 'year' or range == 'currentyear' %}
-						data: [{% for m,md in months %}{value: {{ md.ftp }}, formatted: '{{ md.ftp|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
+						data: [{% for m,md in months %}{value: '{{ md.ftp|default(0) }}', formatted: '{{ md.ftp|formatBytes }}', axisv: '{{ m }}'},{% endfor %}],
 					{% else %}
-						data: [{% for yr,year in years %}{value: {{ year.mail }}, formatted: '{{ year.mail|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
+						data: [{% for yr,year in years %}{value: '{{ year.mail|default(0) }}', formatted: '{{ year.mail|formatBytes }}', axisv: '{{ yr }}'},{% endfor %}],
 					{% endif %}
 					parsing: {
 						xAxisKey: 'axisv'