diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
index a8700b66..cef99772 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
@@ -1,20 +1,16 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <formvh:renderRenderable renderable="{element}">
 	<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
-		<div class="checkbox">
-			<label class="{element.properties.elementClassAttribute} form-check-label" for="{element.uniqueIdentifier}">
-				<f:form.checkbox
-					property="{element.identifier}"
-					id="{element.uniqueIdentifier}"
-					value="{element.properties.value}"
-					additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
-				/>
-                <span class="cr">
-                    <i class="cr-icon glyphicon glyphicon-ok"></i>
-                </span>
-                {formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if>
-			</label>
-		</div>
+        <label class="inline-flex items-center">
+            <f:form.checkbox
+                property="{element.identifier}"
+                id="{element.uniqueIdentifier}"
+                value="{element.properties.value}"
+                class="form-checkbox h-6 w-6"
+                additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+            />
+            <span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
+        </label>
 	</f:render>
 </formvh:renderRenderable>
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
index f8dfc411..a2f03840 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
@@ -1,23 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:form.validationResults for="{element.rootForm.identifier}.{element.identifier}">
-	<div class="form-group{f:if(condition: '{validationResults.errors.0}', then: ' has-error')}">
-		<f:if condition="{doNotShowLabel} != 1">
-			<label class="control-label" for="{element.uniqueIdentifier}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></label>
-		</f:if>
-        <f:format.raw>
-            {elementContent}
-            <f:if condition="{validationResults.flattenedErrors}">
-                <span class="error help-block" role="alert">
-                    <f:for each="{validationResults.errors}" as="error">
-                        {formvh:translateElementError(element: element, error: error)}
-                        <br />
-                    </f:for>
-                </span>
-            </f:if>
-        </f:format.raw>
-        <f:if condition="{element.properties.elementDescription}">
-            <span class="help-block">{formvh:translateElementProperty(element: element, property: 'elementDescription')}</span>
+    <label class="block mb-4">
+        <f:if condition="{doNotShowLabel} != 1">
+            <span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
         </f:if>
-	</div>
+        {elementContent -> f:format.raw()}
+    </label>
 </f:form.validationResults>
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Fieldset.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Fieldset.html
new file mode 100644
index 00000000..52071707
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Fieldset.html
@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+	<fieldset id="{element.uniqueIdentifier}" class="{f:if(condition: element.properties.elementClassAttribute, then: ' {element.properties.elementClassAttribute}')}">
+		<f:if condition="{element.label}">
+			<legend class="pb-2 mb-2 border-b border-gray-400">{formvh:translateElementProperty(element: element, property: 'label')}</legend>
+		</f:if>
+		<f:for each="{element.elements}" as="element">
+			<f:render partial="{element.templateName}" arguments="{element: element}" />
+		</f:for>
+	</fieldset>
+</formvh:renderRenderable>
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
index 0470e372..1a6e93f7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
@@ -1,26 +1,22 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <formvh:renderRenderable renderable="{element}">
-	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
-		<div id="{element.uniqueIdentifier}">
-			<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
-				<div class="checkbox">
-					<label class="form-check-label" for="{element.uniqueIdentifier}-{idIterator.index}">
-						<f:form.checkbox
-							property="{element.identifier}"
-							multiple="1"
-							id="{element.uniqueIdentifier}-{idIterator.index}"
-							value="{value}"
-							errorClass="{element.properties.elementErrorClassAttribute}"
-							additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
-						/>
-                        <span class="cr">
-                            <i class="cr-icon glyphicon glyphicon-ok"></i>
-                        </span>
-						{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
-					</label>
-				</div>
-			</f:for>
-		</div>
+	<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
+        <span class="block text-gray-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
+        <f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
+            <div>
+                <label class="inline-flex items-center">
+                    <f:form.checkbox
+                        property="{element.identifier}"
+                        multiple="1"
+                        id="{element.uniqueIdentifier}-{idIterator.index}"
+                        value="{value}"
+                        class="form-checkbox h-6 w-6"
+                        additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+                    />
+                    <span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>
+                </label>
+            </div>
+        </f:for>
 	</f:render>
 </formvh:renderRenderable>
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html
new file mode 100644
index 00000000..a08e069a
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html
@@ -0,0 +1,33 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+		<f:if condition="{element.properties.prependOptionLabel}">
+			<f:then>
+				<f:form.select
+						property="{element.identifier}"
+						id="{element.uniqueIdentifier}"
+						class="{element.properties.elementClassAttribute} form-multiselect block w-full mt-1"
+						options="{formvh:translateElementProperty(element: element, property: 'options')}"
+						multiple="multiple"
+						errorClass="form-multiselect-error"
+						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+						prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
+						prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
+				/>
+			</f:then>
+			<f:else>
+				<f:form.select
+						property="{element.identifier}"
+						id="{element.uniqueIdentifier}"
+						class="{element.properties.elementClassAttribute} form-multiselect block w-full mt-1"
+						options="{formvh:translateElementProperty(element: element, property: 'options')}"
+						multiple="multiple"
+                        errorClass="form-multiselect-error"
+						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+				/>
+			</f:else>
+		</f:if>
+
+	</f:render>
+</formvh:renderRenderable>
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
index c6cd4693..befa1d7e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
@@ -1,17 +1,18 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <formvh:renderRenderable renderable="{element}">
-	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+	<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
         <f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
-            <div class="radio">
-                <label for="{element.uniqueIdentifier}-{idIterator.index}">
+            <div>
+                <label for="{element.uniqueIdentifier}-{idIterator.index}" class="inline-flex items-center">
                     <f:form.radio
                         property="{element.identifier}"
                         id="{element.uniqueIdentifier}-{idIterator.index}"
                         value="{value}"
-                        errorClass="{element.properties.elementErrorClassAttribute}"
+                        class="form-radio"
+                        errorClass="form-radio-error"
                         additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
                     />
-                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> {formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
+                    <span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>
                 </label>
             </div>
         </f:for>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html
new file mode 100644
index 00000000..3727aaec
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html
@@ -0,0 +1,30 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+		<f:if condition="{element.properties.prependOptionLabel}">
+			<f:then>
+				<f:form.select
+						property="{element.identifier}"
+						id="{element.uniqueIdentifier}"
+						options="{formvh:translateElementProperty(element: element, property: 'options')}"
+						class="{element.properties.elementClassAttribute} form-select block w-full mt-1"
+						errorClass="form-select-error"
+						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+						prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
+						prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
+				/>
+			</f:then>
+			<f:else>
+				<f:form.select
+						property="{element.identifier}"
+						id="{element.uniqueIdentifier}"
+						options="{formvh:translateElementProperty(element: element, property: 'options')}"
+						class="{element.properties.elementClassAttribute} form-select block w-full mt-1"
+                        errorClass="form-select-error"
+						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+				/>
+			</f:else>
+		</f:if>
+	</f:render>
+</formvh:renderRenderable>
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html
new file mode 100644
index 00000000..3e5cb7f5
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html
@@ -0,0 +1,13 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+		<f:form.textfield
+			property="{element.identifier}"
+			id="{element.uniqueIdentifier}"
+			class="form-input mt-1 block w-full"
+			errorClass="form-input-error"
+			additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+		/>
+	</f:render>
+</formvh:renderRenderable>
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html
new file mode 100644
index 00000000..eb71f989
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html
@@ -0,0 +1,15 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+		<f:form.textarea
+			property="{element.identifier}"
+			id="{element.uniqueIdentifier}"
+			class="{element.properties.elementClassAttribute} form-textarea mt-1 block w-full"
+			rows="{element.properties.rows}"
+			cols="{element.properties.cols}"
+			errorClass="form-textarea-error"
+			additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
+		/>
+	</f:render>
+</formvh:renderRenderable>
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
index bd065146..e558ec25 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
@@ -6,99 +6,82 @@
 
     <f:section name="Main">
         <contact-form inline-template>
-                <div class="form form--border">
+                <div class="relative">
                     <f:form id="contactform" object="{contactForm}" name="contactForm"
                             action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-                            pageUid="{settings.defaultAjaxUid}" class="border"
+                            pageUid="{settings.defaultAjaxUid}"
                             additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
                         <f:form.hidden property="pageUrl"/>
-                        <div class="form-group" :class="{ 'has-error': formErrors.name }">
-                            <label for="name" class="control-label">Name*</label>
-                            <f:form.textfield class="form-control" property="name"/>
-                            <div class="help-block"
-                                 v-show="formErrors.name" v-html="formErrors.name"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.firstName }">
-                            <label for="firstName" class="control-label">Vorname*</label>
-                            <f:form.textfield class="form-control" property="firstName"/>
-                            <div class="help-block"
-                                 v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.gender }">
-                            <label for="gender" class="control-label">Gender*</label>
-                            <f:form.select class="form-control" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
-                            <div class="help-block"
-                                 v-show="formErrors.gender" v-html="formErrors.gender"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.company }">
-                            <label for="company" class="control-label">Firma/Verein</label>
-                            <f:form.textfield class="form-control" property="company"/>
-                            <div class="help-block"
-                                 v-show="formErrors.company" v-html="formErrors.company"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.email }">
-                            <label for="email" class="control-label">E-Mail*</label>
-                            <f:form.textfield class="form-control" property="email"/>
-                            <div class="help-block"
-                                 v-show="formErrors.email" v-html="formErrors.email"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.phone }">
-                            <label for="phone" class="control-label">Telefon/Fax*</label>
-                            <f:form.textfield class="form-control" property="phone"/>
-                            <div class="help-block"
-                                 v-show="formErrors.phone" v-html="formErrors.phone"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.period }">
-                            <label for="period" class="control-label">Zeitraum</label>
-                            <f:form.textfield class="form-control" property="period"
-                                              placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
-                            <div class="help-block"
-                                 v-show="formErrors.period" v-html="formErrors.period"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.duration }">
-                            <label for="duration" class="control-label">Aufenthaltsdauer</label>
-                            <f:form.textfield class="form-control" property="duration"
-                                              placeholder="Tage inkl. An- & Abreisetag"/>
-                            <div class="help-block"
-                                 v-show="formErrors.duration" v-html="formErrors.duration"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.pax }">
-                            <label for="pax" class="control-label">Anzahl der Personen</label>
-                            <f:form.textfield class="form-control" property="pax"
-                                              placeholder="ab 25 Personen"/>
-                            <div class="help-block"
-                                 v-show="formErrors.pax" v-html="formErrors.pax"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.age }">
-                            <label for="age" class="control-label">Durchschnittsalter</label>
-                            <f:form.textfield class="form-control" property="age"/>
-                            <div class="help-block"
-                                 v-show="formErrors.age" v-html="formErrors.age"></div>
-                        </div>
-                        <div class="checkbox">
-                            <label>
-                                <f:form.checkbox class="form-control" property="children" value="Ja"/>
-                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                                Kinder (ja/nein)
+                        <label class="block mb-4">
+                            <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
+                            <div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
+                            <div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
+                            <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
+                            <div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="company"/>
+                            <div class="text-red-500" v-show="formErrors.company" v-html="formErrors.company"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
+                            <div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
+                            <div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
+                            <div class="text-red-500" v-show="formErrors.period" v-html="formErrors.period"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" placeholder="Tage inkl. An- & Abreisetag"/>
+                            <div class="text-red-500" v-show="formErrors.duration" v-html="formErrors.duration"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" placeholder="ab 25 Personen"/>
+                            <div class="text-red-500" v-show="formErrors.pax" v-html="formErrors.pax"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
+                            <f:form.textfield class="form-input mt-1 block w-full"/>
+                            <div class="text-red-500" v-show="formErrors.age" v-html="formErrors.age"></div>
+                        </label>
+                        <div class="mb-4">
+                            <label class="inline-flex items-center">
+                                <f:form.checkbox class="form-checkbox" property="children" value="Ja"/>
+                                <span class="ml-2">Kinder (ja/nein)</span>
                             </label>
                         </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.inquiry }">
-                            <label for="inquiry" class="control-label">(Zusatz-) Wünsche</label>
-                            <f:form.textarea class="form-control"
+                        <label class="block mb-4">
+                            <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
+                            <f:form.textarea class="form-textarea mt-1 block w-full"
                                              property="inquiry"
                                              placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
                                              cols="30" rows="5"/>
-                            <div class="help-block"
-                                 v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
+                            <div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
+                        </label>
+                        <div class="mb-4">
+                            Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
+                                                      title="Datenschutzerklärung"
+                                                      target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
                         </div>
-                        <div class="form-group">
-                            <div class="help-block">
-                                Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
-                                                          title="Datenschutzerklärung"
-                                                          target="_blank">Datenschutzbestimmungen</f:link.typolink>  gelesen und akzeptiert.
-                            </div>
-                        </div>
-                        <div class="form-group">
+                        <div class="mb-4">
                             <button type="submit" class="button button-warning">Jetzt anfragen</button>
                         </div>
                     </f:form>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/Render.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/Render.html
index 62535138..4bb6e9e3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/Render.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/Render.html
@@ -2,9 +2,7 @@
 
     <f:flashMessages />
     <f:if condition="{formConfiguration}">
-        <div class="form-wrapper form--border">
-            <formvh:render overrideConfiguration="{formConfiguration}" />
-        </div>
+        <formvh:render overrideConfiguration="{formConfiguration}" />
     </f:if>
 
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
index 5d5594ca..b66e9673 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
@@ -9,55 +9,48 @@
                 <div class="form form--border">
                     <f:form id="contactform" object="{contactForm}" name="contactForm"
                             action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-                            pageUid="{settings.defaultAjaxUid}" class="border"
+                            pageUid="{settings.defaultAjaxUid}"
                             additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
                         <f:form.hidden property="pageUrl"/>
-                        <div class="form-group" :class="{ 'has-error': formErrors.gender }">
-                            <label for="gender" class="control-label">Geschlecht</label>
-                            <f:form.select options="{m: 'm', w: 'w', d: 'd'}" property="gender" />
-                            <div class="help-block"
-                                 v-show="formErrors.gender" v-html="formErrors.gender"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.name }">
-                            <label for="name" class="control-label">Name</label>
-                            <f:form.textfield class="form-control" property="name"/>
-                            <div class="help-block"
-                                 v-show="formErrors.name" v-html="formErrors.name"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.firstName }">
-                            <label for="firstName" class="control-label">Vorname</label>
-                            <f:form.textfield class="form-control" property="firstName"/>
-                            <div class="help-block"
-                                 v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.email }">
-                            <label for="email" class="control-label">E-Mail</label>
-                            <f:form.textfield class="form-control" property="email"/>
-                            <div class="help-block"
-                                 v-show="formErrors.email" v-html="formErrors.email"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.phone }">
-                            <label for="phone" class="control-label">Telefon</label>
-                            <f:form.textfield class="form-control" property="phone"/>
-                            <div class="help-block"
-                                 v-show="formErrors.phone" v-html="formErrors.phone"></div>
-                        </div>
-                        <div class="form-group" :class="{ 'has-error': formErrors.inquiry }">
-                            <label for="inquiry" class="control-label">Anfrage</label>
-                            <f:form.textarea class="form-control"
+                        <label class="block mb-4">
+                            <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
+                            <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
+                            <div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
+                            <div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
+                            <div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
+                            <div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
+                            <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
+                            <div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
+                        </label>
+                        <label class="block mb-4">
+                            <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
+                            <f:form.textarea class="form-textarea mt-1 block w-full"
                                              property="inquiry"
+                                             placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
                                              cols="30" rows="5"/>
-                            <div class="help-block"
-                                 v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
-                        </div>
-                        <div class="form-group">
-                            <div class="help-block">
-                                Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
+                            <div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
+                        </label>
+                        <div class="mb-4">
+                            Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
                                                           title="Datenschutzerklärung"
-                                                          target="_blank">Datenschutzbestimmungen</f:link.typolink>  gelesen und akzeptiert.
-                            </div>
+                                                          target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
                         </div>
-                        <div class="form-group">
+                        <div class="mb-4">
                             <button type="submit" class="button button-warning">Jetzt anfragen</button>
                         </div>
                     </f:form>
diff --git a/tailwind.config.js b/tailwind.config.js
index fd02c26f..7048135f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,6 +25,42 @@ module.exports = {
         fontFamily: {
             'sans': [ 'Lato', 'sans-serif' ],
         },
+        customForms: theme => ({
+            default: {
+                'input, textarea, select, multiselect': {
+                    paddingTop: theme('spacing.4'),
+                    paddingBottom: theme('spacing.4'),
+                    paddingLeft: theme('spacing.8'),
+                    paddingRight: theme('spacing.8'),
+                    borderColor: theme('colors.gray.500'),
+                    borderRadius: undefined,
+                    '&:focus': {
+                        borderColor: undefined,
+                        boxShadow: undefined,
+                    },
+                },
+                'checkbox, radio': {
+                    width: theme('spacing.6'),
+                    height: theme('spacing.6'),
+                    backgroundColor: theme('colors.white'),
+                    borderColor: undefined,
+                    '&:focus': {
+                        borderColor: undefined,
+                        boxShadow: undefined,
+                    },
+                    '&:checked': {
+                        backgroundColor: theme('colors.ep.secondary'),
+                        boxShadow: undefined,
+                    },
+                },
+            },
+            error: {
+                'input, textarea, select, multiselect': {
+                    color: theme('colors.red.500'),
+                    borderColor: theme('colors.red.500'),
+                }
+            },
+        }),
         extend: {
             colors: {
                 'overlay': {
