diff --git a/dns_editor.php b/dns_editor.php
index 4a466c90..af19f88e 100644
--- a/dns_editor.php
+++ b/dns_editor.php
@@ -1,5 +1,5 @@
 <?php
-if (! defined('AREA')) {
+if (!defined('AREA')) {
 	header("Location: index.php");
 	exit();
 }
@@ -21,16 +21,17 @@ if (! defined('AREA')) {
 
 use Froxlor\Api\Commands\DomainZones;
 use Froxlor\UI\Request;
+use Froxlor\UI\Panel\UI;
 
 // This file is being included in admin_domains and customer_domains
 // and therefore does not need to require lib/init.php
 
 $domain_id = (int) Request::get('domain_id');
 
-$record = isset($_POST['record']['record']) ? trim($_POST['record']['record']) : null;
-$type = isset($_POST['record']['type']) ? $_POST['record']['type'] : 'A';
-$prio = isset($_POST['record']['prio']) ? (int) $_POST['record']['prio'] : null;
-$content = isset($_POST['record']['content']) ? trim($_POST['record']['content']) : null;
+$record = isset($_POST['dns_record']) ? trim($_POST['dns_record']) : null;
+$type = isset($_POST['dns_type']) ? $_POST['dns_type'] : 'A';
+$prio = isset($_POST['dns_mxp']) ? (int) $_POST['dns_mxp'] : null;
+$content = isset($_POST['dns_content']) ? trim($_POST['dns_content']) : null;
 $ttl = isset($_POST['record']['ttl']) ? (int) $_POST['record']['ttl'] : 18000;
 
 // get domain-name
@@ -40,7 +41,7 @@ $errors = "";
 $success_message = "";
 
 // action for adding a new entry
-if ($action == 'add_record' && ! empty($_POST)) {
+if ($action == 'add_record' && !empty($_POST)) {
 	try {
 		DomainZones::getLocal($userinfo, array(
 			'id' => $domain_id,
@@ -74,51 +75,12 @@ if ($action == 'add_record' && ! empty($_POST)) {
 
 // select all entries
 try {
-	// get list
-	$json_result = DomainZones::getLocal($userinfo, [
-		'id' => $domain_id
-	])->listing();
+	$dns_list_data = include_once dirname(__FILE__) . '/lib/tablelisting/tablelisting.dns.php';
+	$collection = (new \Froxlor\UI\Collection(\Froxlor\Api\Commands\DomainZones::class, $userinfo, ['id' => $domain_id]))
+		->withPagination($dns_list_data['dns_list']['columns']);
 } catch (Exception $e) {
 	\Froxlor\UI\Response::dynamic_error($e->getMessage());
 }
-$result = json_decode($json_result, true)['data'];
-$dom_entries = $result['list'];
-
-// show editor
-$record_list = "";
-$existing_entries = "";
-$type_select = "";
-$entriescount = 0;
-
-if (! empty($dom_entries)) {
-	$entriescount = count($dom_entries);
-	foreach ($dom_entries as $entry) {
-		$entry['content'] = wordwrap($entry['content'], 100, '<br>', true);
-		eval("\$existing_entries.=\"" . \Froxlor\UI\Template::getTemplate("dns_editor/entry_bit", true) . "\";");
-	}
-}
-
-// available types
-$type_select_values = array(
-	'A',
-	'AAAA',
-	'CAA',
-	'CNAME',
-	'DNAME',
-	'LOC',
-	'MX',
-	'NS',
-	'RP',
-	'SRV',
-	'SSHFP',
-	'TXT'
-);
-asort($type_select_values);
-foreach ($type_select_values as $_type) {
-	$type_select .= \Froxlor\UI\HTML::makeoption($_type, $_type, $type);
-}
-
-eval("\$record_list=\"" . \Froxlor\UI\Template::getTemplate("dns_editor/list", true) . "\";");
 
 try {
 	$json_result = DomainZones::getLocal($userinfo, array(
@@ -130,4 +92,26 @@ try {
 $result = json_decode($json_result, true)['data'];
 $zonefile = implode("\n", $result);
 
-eval("echo \"" . \Froxlor\UI\Template::getTemplate("dns_editor/index", true) . "\";");
+$dns_add_data = include_once dirname(__FILE__) . '/lib/formfields/formfield.dns_add.php';
+
+UI::twigBuffer('user/dns-editor.html.twig', [
+	'listing' => \Froxlor\UI\Listing::format($collection, $dns_list_data['dns_list']),
+	'actions_links' => [[
+		'class' => 'btn-secondary',
+		'href' => $linker->getLink(['section' => 'domains', 'page' => 'domains', 'action' => 'edit', 'id' => $domain_id]),
+		'label' => $lng['panel']['edit'],
+		'icon' => 'fa fa-pen'
+	], [
+		'class' => 'btn-secondary',
+		'href' => $linker->getLink(['section' => 'domains', 'page' => 'domains']),
+		'label' => $lng['menue']['domains']['domains'],
+		'icon' => 'fa fa-globe'
+	]],
+	'formaction' => $linker->getLink(array('section' => 'domains', 'action' => 'add_record', 'domain_id' => $domain_id)),
+	'formdata' => $dns_add_data['dns_add'],
+	// alert-box
+	'type' => (!empty($errors) ? 'danger' : (!empty($success_message) ? 'success' : 'warning')),
+	'alert_msg' => (!empty($errors) ? $errors : (!empty($success_message) ? $success_message : $lng['dns']['howitworks'])),
+	'zonefile' => $zonefile
+]);
+UI::twigOutputBuffer();
diff --git a/lib/Froxlor/UI/Callbacks/Dns.php b/lib/Froxlor/UI/Callbacks/Dns.php
new file mode 100644
index 00000000..6ccb3a91
--- /dev/null
+++ b/lib/Froxlor/UI/Callbacks/Dns.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Froxlor\UI\Callbacks;
+
+/**
+ * This file is part of the Froxlor project.
+ * Copyright (c) 2010 the Froxlor Team (see authors).
+ *
+ * For the full copyright and license information, please view the COPYING
+ * file that was distributed with this source code. You can also view the
+ * COPYING file online at http://files.froxlor.org/misc/COPYING.txt
+ *
+ * @copyright  (c) the authors
+ * @author     Froxlor team <team@froxlor.org> (2010-)
+ * @license    GPLv2 http://files.froxlor.org/misc/COPYING.txt
+ * @package    Froxlor\UI\Callbacks
+ *
+ */
+class Dns
+{
+	public static function prio(array $attributes): string
+	{
+		return ($attributes['fields']['prio'] <= 0
+			&& $attributes['fields']['type'] != 'MX'
+			&& $attributes['fields']['type'] != 'SRV') ? '' : $attributes['data'];
+	}
+}
diff --git a/lib/Froxlor/UI/Callbacks/Text.php b/lib/Froxlor/UI/Callbacks/Text.php
index 634da10a..7e98fab1 100644
--- a/lib/Froxlor/UI/Callbacks/Text.php
+++ b/lib/Froxlor/UI/Callbacks/Text.php
@@ -60,4 +60,9 @@ class Text
 	{
 		return substr($attributes['data'], 0, 20) . '...';
 	}
+
+	public static function wordwrap(array $attributes): string
+	{
+		return wordwrap($attributes['data'], 100, '<br>', true);
+	}
 }
diff --git a/lib/formfields/formfield.dns_add.php b/lib/formfields/formfield.dns_add.php
new file mode 100644
index 00000000..f81c2038
--- /dev/null
+++ b/lib/formfields/formfield.dns_add.php
@@ -0,0 +1,69 @@
+<?php
+
+/**
+ * This file is part of the Froxlor project.
+ * Copyright (c) 2010 the Froxlor Team (see authors).
+ *
+ * For the full copyright and license information, please view the COPYING
+ * file that was distributed with this source code. You can also view the
+ * COPYING file online at http://files.froxlor.org/misc/COPYING.txt
+ *
+ * @copyright  (c) the authors
+ * @author     Froxlor team <team@froxlor.org> (2010-)
+ * @license    GPLv2 http://files.froxlor.org/misc/COPYING.txt
+ * @package    Formfields
+ *
+ */
+return array(
+	'dns_add' => array(
+		'title' => 'DNS Editor',
+		'image' => 'fa-solid fa-globe',
+		'sections' => array(
+			'section_a' => array(
+				'fields' => array(
+					'dns_record' => array(
+						'label' => 'Record',
+						'type' => 'text',
+						'value' => $record,
+						'mandatory' => true
+					),
+					'dns_type' => array(
+						'label' => 'Type',
+						'type' => 'select',
+						'select_var' => [
+							'A' => 'A',
+							'AAAA' => 'AAAA',
+							'CAA' => 'CAA',
+							'CNAME' => 'CNAME',
+							'DNAME' => 'DNAME',
+							'LOC' => 'LOC',
+							'MX' => 'MX',
+							'NS' => 'NS',
+							'RP' => 'RP',
+							'SRV' => 'SRV',
+							'SSHFP' => 'SSHFP',
+							'TXT' => 'TXT'
+						],
+						'selected' => $type
+					),
+					'dns_mxp' => array(
+						'label' => 'Priority',
+						'type' => 'number',
+						'value' => $prio
+					),
+					'dns_content' => array(
+						'label' => 'Content',
+						'type' => 'text',
+						'value' => $content
+					),
+					'dns_ttl' => array(
+						'label' => 'TTL',
+						'type' => 'number',
+						'min' => 30,
+						'value' => $ttl
+					)
+				)
+			)
+		)
+	)
+);
diff --git a/lib/tablelisting/tablelisting.dns.php b/lib/tablelisting/tablelisting.dns.php
new file mode 100644
index 00000000..a40b3b9a
--- /dev/null
+++ b/lib/tablelisting/tablelisting.dns.php
@@ -0,0 +1,72 @@
+<?php
+
+/**
+ * This file is part of the Froxlor project.
+ * Copyright (c) 2010 the Froxlor Team (see authors).
+ *
+ * For the full copyright and license information, please view the COPYING
+ * file that was distributed with this source code. You can also view the
+ * COPYING file online at http://files.froxlor.org/misc/COPYING.txt
+ *
+ * @copyright  (c) the authors
+ * @author     Froxlor team <team@froxlor.org> (2010-)
+ * @license    GPLv2 http://files.froxlor.org/misc/COPYING.txt
+ * @package    Tabellisting
+ *
+ */
+
+use Froxlor\UI\Callbacks\Dns;
+use Froxlor\UI\Callbacks\Text;
+use Froxlor\UI\Listing;
+
+return [
+	'dns_list' => [
+		'title' => 'DNS Entries',
+		'icon' => 'fa-solid fa-globe',
+		'columns' => [
+			'record' => [
+				'label' => 'Record',
+				'field' => 'record'
+			],
+			'type' => [
+				'label' => 'Type',
+				'field' => 'type'
+			],
+			'prio' => [
+				'label' => 'Priority',
+				'field' => 'prio',
+				'callback' => [Dns::class, 'prio'],
+			],
+			'content' => [
+				'label' => 'Content',
+				'field' => 'content',
+				'callback' => [Text::class, 'wordwrap'],
+			],
+			'ttl' => [
+				'label' => 'TTL',
+				'field' => 'ttl'
+			]
+		],
+		'visible_columns' => Listing::getVisibleColumnsForListing('dns_list', [
+			'record',
+			'type',
+			'prio',
+			'content',
+			'ttl'
+		]),
+		'actions' => [
+			'delete' => [
+				'icon' => 'fa fa-trash',
+				'title' => $lng['panel']['delete'],
+				'class' => 'text-danger',
+				'href' => [
+					'section' => 'domains',
+					'page' => 'domaindnseditor',
+					'action' => 'delete',
+					'domain_id' => $domain_id,
+					'id' => ':id'
+				],
+			],
+		]
+	]
+];
diff --git a/templates/Froxlor/user/dns-editor.html.twig b/templates/Froxlor/user/dns-editor.html.twig
new file mode 100644
index 00000000..9a686ee1
--- /dev/null
+++ b/templates/Froxlor/user/dns-editor.html.twig
@@ -0,0 +1,34 @@
+{% extends "Froxlor/user/table.html.twig" %}
+
+{% block content %}
+	<div class="row mb-2">
+		{% include 'Froxlor/misc/alertbox.html.twig' %}
+	</div>
+
+	<ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
+		<li class="nav-item" role="presentation">
+			<a class="nav-link active" id="ex1-tab-1" data-bs-toggle="tab" href="#ex1-tabs-1" role="tab" aria-controls="ex1-tabs-1" aria-selected="true">DNS Editor</a>
+		</li>
+		<li class="nav-item" role="presentation">
+			<a class="nav-link" id="ex1-tab-2" data-bs-toggle="tab" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2" aria-selected="false">DNS Zone</a>
+		</li>
+	</ul>
+
+	<div class="tab-content" id="ex1-content">
+		<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
+			{{ parent() }}
+
+			{% import "Froxlor/form/form.html.twig" as form %}
+			{{ form.form(formdata, formaction|default('#'), formdata.title, editid|default('')) }}
+		</div>
+		<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
+			{% if zonefile is not empty %}
+				<div class="row">
+					<div class="col-12">
+						<textarea class="logcontent" rows="25" cols="60" readonly>{{ zonefile }}</textarea>
+					</div>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+{% endblock %}