diff --git a/admin_customers.php b/admin_customers.php
index ac393f73..27b98b73 100644
--- a/admin_customers.php
+++ b/admin_customers.php
@@ -22,6 +22,7 @@ require './lib/init.php';
 use Froxlor\Database\Database;
 use Froxlor\Settings;
 use Froxlor\Api\Commands\Customers as Customers;
+use Froxlor\UI\Panel\UI;
 
 if (isset($_POST['id'])) {
 	$id = intval($_POST['id']);
@@ -283,11 +284,6 @@ if ($page == 'customers' && $userinfo['customers'] != '0') {
 				's' => $s
 			));
 		} else {
-			$language_options = '';
-
-			foreach ($languages as $language_file => $language_name) {
-				$language_options .= \Froxlor\UI\HTML::makeoption($language_name, $language_file, Settings::Get('panel.standardlanguage'), true);
-			}
 
 			$diskspace_ul = \Froxlor\UI\HTML::makecheckbox('diskspace_ul', $lng['customer']['unlimited'], '-1', false, '0', true, true);
 			$traffic_ul = \Froxlor\UI\HTML::makecheckbox('traffic_ul', $lng['customer']['unlimited'], '-1', false, '0', true, true);
@@ -299,10 +295,6 @@ if ($page == 'customers' && $userinfo['customers'] != '0') {
 			$ftps_ul = \Froxlor\UI\HTML::makecheckbox('ftps_ul', $lng['customer']['unlimited'], '-1', false, '0', true, true);
 			$mysqls_ul = \Froxlor\UI\HTML::makecheckbox('mysqls_ul', $lng['customer']['unlimited'], '-1', false, '0', true, true);
 
-			$gender_options = \Froxlor\UI\HTML::makeoption($lng['gender']['undef'], 0, true, true, true);
-			$gender_options .= \Froxlor\UI\HTML::makeoption($lng['gender']['male'], 1, null, true, true);
-			$gender_options .= \Froxlor\UI\HTML::makeoption($lng['gender']['female'], 2, null, true, true);
-
 			$phpconfigs = array();
 			$configs = Database::query("
 				SELECT c.*, fc.description as interpreter
@@ -312,38 +304,37 @@ if ($page == 'customers' && $userinfo['customers'] != '0') {
 			while ($row = $configs->fetch(PDO::FETCH_ASSOC)) {
 				if ((int) Settings::Get('phpfpm.enabled') == 1) {
 					$phpconfigs[] = array(
-						'label' => $row['description'] . " [" . $row['interpreter'] . "]<br />",
+						'label' => $row['description'] . " [" . $row['interpreter'] . "]",
 						'value' => $row['id']
 					);
 				} else {
 					$phpconfigs[] = array(
-						'label' => $row['description'] . "<br />",
+						'label' => $row['description'],
 						'value' => $row['id']
 					);
 				}
 			}
 
 			// hosting plans
-			$hosting_plans = "";
+			$hosting_plans = [];
 			$plans = Database::query("
 				SELECT *
 				FROM `" . TABLE_PANEL_PLANS . "`
 				ORDER BY name ASC
 			");
-			if (Database::num_rows() > 0) {
-				$hosting_plans .= \Froxlor\UI\HTML::makeoption("---", 0, 0, true, true);
-			}
+			$hosting_plans = [
+				0 => "---"
+			];
 			while ($row = $plans->fetch(PDO::FETCH_ASSOC)) {
-				$hosting_plans .= \Froxlor\UI\HTML::makeoption($row['name'], $row['id'], 0, true, true);
+				$hosting_plans[$row['id']] = $row['name'];
 			}
 
 			$customer_add_data = include_once dirname(__FILE__) . '/lib/formfields/admin/customer/formfield.customer_add.php';
-			$customer_add_form = \Froxlor\UI\HtmlForm::genHTMLForm($customer_add_data);
 
-			$title = $customer_add_data['customer_add']['title'];
-			$image = $customer_add_data['customer_add']['image'];
-
-			eval("echo \"" . \Froxlor\UI\Template::getTemplate("customers/customers_add") . "\";");
+			UI::TwigBuffer('user/form.html.twig', [
+				'formdata' => $customer_add_data['customer_add']
+			]);
+			UI::TwigOutputBuffer();
 		}
 	} elseif ($action == 'edit' && $id != 0) {
 
diff --git a/lib/formfields/admin/customer/formfield.customer_add.php b/lib/formfields/admin/customer/formfield.customer_add.php
index 3fe58af5..2cd7c562 100644
--- a/lib/formfields/admin/customer/formfield.customer_add.php
+++ b/lib/formfields/admin/customer/formfield.customer_add.php
@@ -17,7 +17,7 @@
 return array(
 	'customer_add' => array(
 		'title' => $lng['admin']['customer_add'],
-		'image' => 'icons/user_add.png',
+		'image' => 'fa-solid fa-user-plus',
 		'sections' => array(
 			'section_a' => array(
 				'title' => $lng['admin']['accountdata'],
@@ -25,33 +25,20 @@ return array(
 				'fields' => array(
 					'new_loginname' => array(
 						'label' => $lng['login']['username'],
-						'type' => 'text'
+						'type' => 'text',
+						'placeholder' => 'Leave empty for autogenerated value'
 					),
 					'createstdsubdomain' => array(
 						'label' => $lng['admin']['stdsubdomain_add'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							\Froxlor\Settings::Get('system.createstdsubdom_default')
-						)
+						'value' => '1',
+						'checked' => \Froxlor\Settings::Get('system.createstdsubdom_default')
 					),
 					'store_defaultindex' => array(
 						'label' => $lng['admin']['store_defaultindex'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							'1'
-						)
+						'value' => '1',
+						'checked' => true
 					),
 					'new_customer_password' => array(
 						'label' => $lng['login']['password'],
@@ -62,39 +49,27 @@ return array(
 						'label' => $lng['customer']['generated_pwd'],
 						'type' => 'text',
 						'visible' => (\Froxlor\Settings::Get('panel.password_regex') == ''),
-						'value' => \Froxlor\System\Crypt::generatePassword()
+						'value' => \Froxlor\System\Crypt::generatePassword(),
+						'readonly' => true
 					),
 					'sendpassword' => array(
 						'label' => $lng['admin']['sendpassword'],
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							'1'
-						)
+						'value' => '1',
+						'checked' => true
 					),
 					'def_language' => array(
 						'label' => $lng['login']['language'],
 						'type' => 'select',
-						'select_var' => $language_options
+						'select_var' => $languages,
+						'selected' => \Froxlor\Settings::Get('panel.standardlanguage')
 					),
 					'api_allowed' => array(
 						'label' => $lng['usersettings']['api_allowed']['title'],
 						'desc' => $lng['usersettings']['api_allowed']['description'],
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							(\Froxlor\Settings::Get('api.enabled') == '1' ? '1' : '0')
-						),
+						'value' => '1',
+						'checked' => (\Froxlor\Settings::Get('api.enabled') == '1' ? true : false),
 						'visible' => (\Froxlor\Settings::Get('api.enabled') == '1' ? true : false)
 					)
 				)
@@ -116,7 +91,11 @@ return array(
 					'gender' => array(
 						'label' => $lng['gender']['title'],
 						'type' => 'select',
-						'select_var' => $gender_options
+						'select_var' => [
+							0 => $lng['gender']['undef'],
+							1 => $lng['gender']['male'],
+							2 => $lng['gender']['female']
+						]
 					),
 					'company' => array(
 						'label' => $lng['customer']['company'],
@@ -163,13 +142,8 @@ return array(
 					'custom_notes_show' => array(
 						'label' => $lng['usersettings']['custom_notes']['show'],
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array()
+						'value' => '1',
+						'checked' => false
 					)
 				)
 			),
@@ -249,29 +223,15 @@ return array(
 					'email_imap' => array(
 						'label' => $lng['customer']['email_imap'],
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							'1'
-						),
+						'value' => '1',
+						'checked' => true,
 						'mandatory' => true
 					),
 					'email_pop3' => array(
 						'label' => $lng['customer']['email_pop3'],
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							'1'
-						),
+						'value' => '1',
+						'checked' => true,
 						'mandatory' => true
 					),
 					'ftps' => array(
@@ -292,58 +252,39 @@ return array(
 					'phpenabled' => array(
 						'label' => $lng['admin']['phpenabled'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
-						'value' => array(
-							'1'
-						)
+						'value' => '1',
+						'checked' => true
 					),
 					'allowed_phpconfigs' => array(
 						'visible' => (((int) \Froxlor\Settings::Get('system.mod_fcgid') == 1 || (int) \Froxlor\Settings::Get('phpfpm.enabled') == 1) ? true : false),
 						'label' => $lng['admin']['phpsettings']['title'],
 						'type' => 'checkbox',
 						'values' => $phpconfigs,
-						'value' => ((int) \Froxlor\Settings::Get('system.mod_fcgid') == 1 ? array(
+						'value' => ((int) \Froxlor\Settings::Get('system.mod_fcgid') == 1 ? 
 							\Froxlor\Settings::Get('system.mod_fcgid_defaultini')
-						) : ((int) \Froxlor\Settings::Get('phpfpm.enabled') == 1 ? array(
+						 : ((int) \Froxlor\Settings::Get('phpfpm.enabled') == 1 ?
 							\Froxlor\Settings::Get('phpfpm.defaultini')
-						) : array())),
+						 : null)),
 						'is_array' => 1
 					),
 					'perlenabled' => array(
 						'label' => $lng['admin']['perlenabled'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						)
+						'value' => '1',
+						'checked' => false
 					),
 					'dnsenabled' => array(
 						'label' => $lng['admin']['dnsenabled'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						),
+						'value' => '1',
+						'checked' => (\Froxlor\Settings::Get('system.dnsenabled') == '1' ? true : false),
 						'visible' => (\Froxlor\Settings::Get('system.dnsenabled') == '1' ? true : false)
 					),
 					'logviewenabled' => array(
 						'label' => $lng['admin']['logviewenabled'] . '?',
 						'type' => 'checkbox',
-						'values' => array(
-							array(
-								'label' => $lng['panel']['yes'],
-								'value' => '1'
-							)
-						)
+						'value' => '1',
+						'checked' => true
 					)
 				)
 			)
diff --git a/templates/Froxlor/form/form.html.twig b/templates/Froxlor/form/form.html.twig
new file mode 100644
index 00000000..93da2836
--- /dev/null
+++ b/templates/Froxlor/form/form.html.twig
@@ -0,0 +1,48 @@
+{% macro form(form_data, action, title = "") %}
+
+	{% import "Froxlor/form/formfields.html.twig" as formfields %}
+
+	<form action="{{ action|default("") }}" method="post" enctype="application/x-www-form-urlencoded" class="form">
+		<div class="card mb-2">
+			{% if title is not empty %}
+				<div class="card-header">
+					{% if form_data.image is not empty %}
+						<i class="{{ form_data.image }}"></i>
+					{% endif %}
+					{{ title }}
+				</div>
+			{% endif %}
+			<div class="card-body">
+				{% for section in form_data.sections %}
+					<div class="card mb-3">
+						{% if section.title is not empty %}
+							<div class="card-header">
+								{% if section.image is not empty %}
+									<i class="{{ section.image }}"></i>
+								{% endif %}
+								{{ section.title }}
+							</div>
+						{% endif %}
+						<div class="card-body">
+							{% for id,field in section.fields %}
+								{% if field.type == 'text' or field.type == 'password' %}
+									{{ formfields.input(id, field) }}
+								{% elseif field.type == 'textul' %}
+									{{ formfields.input_ul(id, field) }}
+								{% elseif field.type == 'checkbox' %}
+									{{ formfields.bool(id, field) }}
+								{% elseif field.type == 'select' %}
+									{{ formfields.select(id, field) }}
+								{% elseif field.type == 'textarea' %}
+									{{ formfields.textarea(id, field) }}
+								{% endif %}
+							{% endfor %}
+						</div>
+					</div>
+				{% endfor %}
+			</div>
+			<!-- /card-body -->
+		</div>
+		<!-- /card -->
+	</form>
+{% endmacro %}
diff --git a/templates/Froxlor/form/formfields.html.twig b/templates/Froxlor/form/formfields.html.twig
new file mode 100644
index 00000000..25feb5c2
--- /dev/null
+++ b/templates/Froxlor/form/formfields.html.twig
@@ -0,0 +1,76 @@
+{% macro bool(id, field) %}
+	<div class="row mb-3">
+		<label for="{{ id }}" class="col-sm-4 col-form-label">{{ field.label|raw }}</label>
+		<div class="col-sm-8">
+			{% if field.is_array is defined and field.is_array == 1 and field.values is not empty %}
+				{% for subfield in field.values %}
+					<div class="form-check form-switch">
+						<input type="checkbox" value="{{ subfield.value }}" name="{{ id }}[]" class="form-check-input" {% if field.value is defined and field.value == subfield.value %} checked="checked" {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %}>
+						<label class="form-check-label">
+							{{ subfield.label|raw }}
+						</label>
+					</div>
+				{% endfor %}
+			{% else %}
+				<div class="form-check form-switch">
+					<input type="checkbox" value="{{ field.value }}" id="{{ id }}" name="{{ id }}" class="form-check-input {% if field.valid is defined and field.valid == false %}is-invalid{% endif %}" {% if field.checked is defined and field.checked == 1 %} checked="checked" {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %}>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+{% endmacro %}
+
+{% macro input(id, field) %}
+	<div class="row mb-3">
+		<label for="{{ id }}" class="col-sm-4 col-form-label">{{ field.label|raw }}</label>
+		<div class="col-sm-8">
+			<input type="{{ field.type }}" id="{{ id }}" name="{{ id }}" value="{{ field.value }}" class="form-control {% if field.valid is defined and field.valid == false %}is-invalid{% endif %}" {% if field.mandatory is defined and field.mandatory %} required {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %} {% if field.readonly is defined and field.readonly %} readonly {% endif %} {% if field.autocomplete is defined %} autocomplete="{{ field.autocomplete }}" {% endif %} {% if field.placeholder is defined %} placeholder="{{ field.placeholder }}" {% endif %}/>
+		</div>
+	</div>
+{% endmacro %}
+
+{% macro input_ul(id, field) %}
+	{% set max = "" %}
+	{% if field.maxlength is defined %}
+		{% for i in 1..field.maxlength %}
+			{% set max = max ~ "9" %}
+		{% endfor %}
+	{% endif %}
+	<div class="row mb-3">
+		<label for="{{ id }}" class="col-sm-4 col-form-label">{{ field.label|raw }}</label>
+		<div class="col-sm-8">
+			<div class="input-group">
+				<input type="number" min="0" {% if max is not empty %} max="{{ max }}" {% endif %} id="{{ id }}" name="{{ id }}" value="{% if field.value >= 0 %}{{ field.value }}{% endif %}" class="form-control {% if field.valid is defined and field.valid == false %}is-invalid{% endif %}" {% if field.mandatory is defined and field.mandatory %} required {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %} {% if field.readonly is defined and field.readonly %} readonly {% endif %} {% if field.autocomplete is defined %} autocomplete="{{ field.autocomplete }}" {% endif %} {% if field.placeholder is defined %} placeholder="{{ field.placeholder }}" {% endif %}/>
+				<div class="input-group-text">
+					<input class="form-check-input mt-0" type="checkbox" name="{{ id }}_ul" value="1" {% if field.value == -1 %} checked="checked" {% endif %}>
+				</div>
+			</div>
+		</div>
+	</div>
+{% endmacro %}
+
+
+{% macro select(id, field) %}
+	<div class="row mb-3">
+		<label for="{{ id }}" class="col-sm-4 col-form-label">{{ field.label|raw }}</label>
+		<div class="col-sm-8">
+			<select class="form-select {% if field.valid is defined and field.valid == false %}is-invalid{% endif %}" name="{{ id }}" id="{{ id }}" {% if field.mandatory is defined and field.mandatory %} required {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %}>
+				{% for val,txt in field.select_var %}
+					<option value="{{ val }}" {% if field.selected is defined and field.selected == val %} selected="selected" {% endif %}>{{ txt|raw }}</option>
+				{% endfor %}
+			</select>
+		</div>
+	</div>
+{% endmacro %}
+
+{% macro textarea(id, field) %}
+	<div class="row mb-3">
+		<label for="{{ id }}" class="col-sm-4 col-form-label">{{ field.label|raw }}
+			{% if field.desc is defined and field.desc is not empty %}<br><small>{{ field.desc|raw }}</small>
+			{% endif %}
+		</label>
+		<div class="col-sm-8">
+			<textarea {% if field.rows is defined %} rows="{{ field.rows }}" {% endif %} {% if field.cols is defined %} cols="{{ field.cols }}" {% endif %} id="{{ id }}" name="{{ id }}" class="form-control {% if field.valid is defined and field.valid == false %}is-invalid{% endif %}" {% if field.mandatory is defined and field.mandatory %} required {% endif %} {% if field.visible is defined and field.visible == false %} disabled {% endif %} {% if field.readonly is defined and field.readonly %} readonly {% endif %} {% if field.placeholder is defined %} placeholder="{{ field.placeholder }}" {% endif %}>{{ field.value }}</textarea>
+		</div>
+	</div>
+{% endmacro %}
diff --git a/templates/Froxlor/login/login.html.twig b/templates/Froxlor/login/login.html.twig
index 67f5e928..d9601e6d 100644
--- a/templates/Froxlor/login/login.html.twig
+++ b/templates/Froxlor/login/login.html.twig
@@ -52,7 +52,7 @@
 
 					<div class="card-body d-grid gap-2">
 						<input type="hidden" name="script" value="{{ lastscript }}" />
-						<input type="hidden" name="qrystr" value="{{ lastqrystr }}" />
+						<input type="hidden" name="qrystr" value="{{ lastqrystr|raw }}" />
 						<input type="hidden" name="send" value="send" />
 						<button class="btn btn-primary rounded-top-0" type="submit" name="dologin">{{ lng('login.login') }}</button>
 					</div>