diff --git a/nodes/icons/ui_dynamic_form.svg b/nodes/icons/ui_dynamic_form.svg
new file mode 100644
index 0000000..92fe836
--- /dev/null
+++ b/nodes/icons/ui_dynamic_form.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 13C3.22386 13 3 13.2239 3 13.5V20.2778C3 20.5539 3.22386 20.7778 3.5 20.7778H37.5C37.7761 20.7778 38 20.5539 38 20.2778V13.5C38 13.2239 37.7761 13 37.5 13H3.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 24.6667C3.22386 24.6667 3 24.8905 3 25.1667V31.9444C3 32.2206 3.22386 32.4444 3.5 32.4444H37.5C37.7761 32.4444 38 32.2206 38 31.9444V25.1667C38 24.8905 37.7761 24.6667 37.5 24.6667H3.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 36.3333C21.5739 36.3333 22.4444 37.2039 22.4444 38.2778V46.0556C22.4444 47.1294 21.5739 48 20.5 48C19.4261 48 18.5556 47.1294 18.5556 46.0556V38.2778C18.5556 37.2039 19.4261 36.3333 20.5 36.3333Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6667 42.1667C14.6667 41.0928 15.5372 40.2222 16.6111 40.2222H24.3889C25.4628 40.2222 26.3333 41.0928 26.3333 42.1667C26.3333 43.2406 25.4628 44.1111 24.3889 44.1111H16.6111C15.5372 44.1111 14.6667 43.2406 14.6667 42.1667Z" fill="white"/>
+</svg>
diff --git a/nodes/ui-dynamic-form.html b/nodes/ui-dynamic-form.html
index ee6a9b1..dd362e6 100644
--- a/nodes/ui-dynamic-form.html
+++ b/nodes/ui-dynamic-form.html
@@ -40,7 +40,7 @@
         outputLabels: function (index) {
             return this.options[index].label;
         },
-        icon: 'file.svg',
+        icon: 'ui_dynamic_form.svg',
         label: function () {
             return this.name || 'dynamic-form';
         },
diff --git a/package-lock.json b/package-lock.json
index 03b6a2b..d1efb06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
             "version": "1.0.24",
             "license": "Apache-2.0",
             "dependencies": {
+                "@formkit/themes": "^1.6.5",
+                "@formkit/vue": "^1.6.5",
                 "to-title-case": "^1.0.0",
                 "vue": "^3.3.8",
                 "vuex": "^4.1.0"
@@ -462,6 +464,119 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@formkit/core": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/core/-/core-1.6.5.tgz",
+            "integrity": "sha512-LLq8+vLd9ddPYA0NkyvnKycN4ESU8Wqcl9TrllPyU/axduJunSIJMZz4LHzlwK8G26b0pQNegXF/hXaj4wbmng==",
+            "dependencies": {
+                "@formkit/utils": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/dev": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/dev/-/dev-1.6.5.tgz",
+            "integrity": "sha512-dg62HTehLPi9lLBShixr9AoYgIv13gpxTZgiHEvf1UZz2HQq0Lcp63d0a+XT/tQ2HTz2ewLUGeXSN9dUVkYFSg==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/utils": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/i18n": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/i18n/-/i18n-1.6.5.tgz",
+            "integrity": "sha512-mM1UKGSa0Mdd8a8AAF+6BCNFnf8gUD1nOzU6dJ9UoPE8M/qA+hmcPR3PJm39p6e3OaT5O0Gn/J6JxgccPyWmGA==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/utils": "1.6.5",
+                "@formkit/validation": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/inputs": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/inputs/-/inputs-1.6.5.tgz",
+            "integrity": "sha512-mHLMF0JMFZL/JC6NYrG4xaIdi7lUNE+tdC+QMipBdhobUhND0EJSpO6QNPGF6OLd9Zm9MDgqAzNXEtc05/nvow==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/utils": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/observer": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/observer/-/observer-1.6.5.tgz",
+            "integrity": "sha512-3Vh2Pj6tHX3wosbNm5VvwVVlTI5Zq0FT3dl/+DAuaCG84abpTLoc3O0C2pmbQcDaJ4aCuxu3+tBmhY9J7qFXMQ==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/utils": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/rules": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/rules/-/rules-1.6.5.tgz",
+            "integrity": "sha512-j9ylAibBvNx+3tEAkYzl2HjQwDzWV2mRPmFH7GTAmtxijFiktPS8HTU9H88H/x2stkYk9S13/MMeqDgZnc3VrQ==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/utils": "1.6.5",
+                "@formkit/validation": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/themes": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/themes/-/themes-1.6.5.tgz",
+            "integrity": "sha512-C+ANzH6qw4zS7niv+RamJAqpASOPfrZvMURVj5HQcT1XlcYB7ULvA9UmDW/AKOqP/OGf/OL6WvOzA7B16UkiiA==",
+            "dependencies": {
+                "@formkit/core": "1.6.5"
+            },
+            "peerDependencies": {
+                "tailwindcss": "^3.2.0",
+                "unocss": "0.x.x",
+                "windicss": "^3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "tailwindcss": {
+                    "optional": true
+                },
+                "unocss": {
+                    "optional": true
+                },
+                "windicss": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@formkit/utils": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/utils/-/utils-1.6.5.tgz",
+            "integrity": "sha512-fohOg344tqFujHlEwvyHzzH5YiOBgecuOPkg7r7QObUrsH8gP1N8Rp9CHZlafxZ1zAEHZY2nTNx0VVQBkVmJbA=="
+        },
+        "node_modules/@formkit/validation": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/validation/-/validation-1.6.5.tgz",
+            "integrity": "sha512-mnU+F6uXsNlczbU7QOq6QfsafSYNmMF9zvOpk4ravn9mba0IDXRhkPgU/+VFpcF/EEiXmqQql3pqQ7Vqv2wVbg==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/observer": "1.6.5",
+                "@formkit/utils": "1.6.5"
+            }
+        },
+        "node_modules/@formkit/vue": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@formkit/vue/-/vue-1.6.5.tgz",
+            "integrity": "sha512-D5W8JfhFJXUXm8RX0OfPbPZt3Ds68iqxSrvbvmyabae2cBlGl8sqhMEuc48FptnsGOYqYXOhG+CPni+uE72Whw==",
+            "dependencies": {
+                "@formkit/core": "1.6.5",
+                "@formkit/dev": "1.6.5",
+                "@formkit/i18n": "1.6.5",
+                "@formkit/inputs": "1.6.5",
+                "@formkit/observer": "1.6.5",
+                "@formkit/rules": "1.6.5",
+                "@formkit/themes": "1.6.5",
+                "@formkit/utils": "1.6.5",
+                "@formkit/validation": "1.6.5"
+            },
+            "peerDependencies": {
+                "vue": "^3.4.0"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
diff --git a/package.json b/package.json
index c19519d..1801d5a 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,8 @@
         "lint:package:fix": "sort-package-json 'package.json'"
     },
     "dependencies": {
+        "@formkit/themes": "^1.6.5",
+        "@formkit/vue": "^1.6.5",
         "to-title-case": "^1.0.0",
         "vue": "^3.3.8",
         "vuex": "^4.1.0"
diff --git a/ui/components/UIDynamicForm.vue b/ui/components/UIDynamicForm.vue
index db39282..5da4d77 100644
--- a/ui/components/UIDynamicForm.vue
+++ b/ui/components/UIDynamicForm.vue
@@ -6,13 +6,13 @@
                 <v-row v-for="(field, index) in fields()" :key="index">
                     <v-col cols="12">
                         <component
-                            :is="field.component"
-                            :id="field.id"
-                            v-model="formData[field.id]"
-                            :required="field.required"
-                            :items="field.items"
-                            :label="field.label"
-                        />
+                            v-if="createComponent(field).innerText"
+                            :is="createComponent(field).type"
+                            v-bind="createComponent(field).props"
+                        >
+                            {{ createComponent(field).innerText }}
+                        </component>
+                        <component v-else :is="createComponent(field).type" v-bind="createComponent(field).props" />
                     </v-col>
                 </v-row>
                 <v-row style="padding: 12px">
@@ -34,8 +34,11 @@
 </template>
 
 <script>
-import { markRaw } from 'vue';
+import { markRaw, h } from 'vue';
 import { mapState } from 'vuex';
+import { plugin, defaultConfig } from '@formkit/vue';
+import '@formkit/themes/genesis';
+import { FormKit } from '@formkit/vue';
 
 export default {
     name: 'UIDynamicForm',
@@ -63,6 +66,12 @@ export default {
             errorMsg: '',
         };
     },
+    created() {
+        const formkitConfig = defaultConfig({
+            theme: 'genesis',
+        });
+        window.app.use(plugin, formkitConfig);
+    },
     computed: {
         ...mapState('data', ['messages']),
         waiting_title() {
@@ -78,7 +87,6 @@ export default {
     mounted() {
         this.$socket.on('widget-load:' + this.id, (msg) => {
             this.init();
-
             this.$store.commit('data/bind', {
                 widgetId: this.id,
                 msg,
@@ -123,7 +131,370 @@ export default {
         this.$socket?.off('widget-load' + this.id);
         this.$socket?.off('msg-input:' + this.id);
     },
+    components: {
+        FormKit,
+    },
     methods: {
+        createComponent(field) {
+            const hint = field.customForm ? JSON.parse(field.customForm).hint : undefined;
+            const placeholder = field.customForm ? JSON.parse(field.customForm).placeholder : undefined;
+            switch (field.type) {
+                case 'long':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'number',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            number: 'integer',
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'number':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'number',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'date':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'date',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'enum':
+                    const enums = field.enumValues.map((obj) => {
+                        return { value: obj.id, label: obj.name };
+                    });
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'select', // JSON.parse(field.customForm).displayAs
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            options: enums,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'select':
+                    const selections = JSON.parse(field.customForm).entries.map((obj) => {
+                        return { value: obj.key, label: obj.value };
+                    });
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'select', // JSON.parse(field.customForm).displayAs
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            options: selections,
+                            placeholder: placeholder,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'string':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'text',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'boolean':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'checkbox',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                        },
+                    };
+                case 'file':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'file',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            innerClass: 'reset-background',
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'checkbox':
+                    const options = JSON.parse(field.customForm).entries.map((obj) => {
+                        return { value: obj.key, label: obj.value };
+                    });
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'checkbox',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            options: options,
+                            help: hint,
+                            fieldsetClass: 'custom-fieldset',
+                        },
+                    };
+                case 'color':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'color',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                        },
+                    };
+                case 'datetime-local':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'datetime-local',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'email':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'email',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            validation: 'email',
+                            validationVisibility: 'live',
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'header':
+                    let typeToUse = 'h1';
+                    if (field.customForm && JSON.parse(field.customForm).style == 'heading_2') {
+                        typeToUse = 'h2';
+                    }
+                    if (field.customForm && JSON.parse(field.customForm).style == 'heading_3') {
+                        typeToUse = 'h3';
+                    }
+                    return {
+                        type: typeToUse,
+                        innerText: field.defaultValue,
+                    };
+                case 'hidden':
+                    return {
+                        type: 'input',
+                        props: {
+                            type: 'hidden',
+                            value: field.defaultValue,
+                        },
+                    };
+                case 'month':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'month',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'paragraph':
+                    return {
+                        type: 'p',
+                        innerText: field.defaultValue,
+                    };
+                case 'password':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'password',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'radio':
+                    const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
+                        return { value: obj.key, label: obj.value };
+                    });
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'radio',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            options: radioOptions,
+                            help: hint,
+                            fieldsetClass: 'custom-fieldset',
+                        },
+                    };
+                case 'range':
+                    const customForm = JSON.parse(field.customForm);
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'range',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            min: customForm.min,
+                            max: customForm.max,
+                            step: customForm.step, //step is not supported by formkit free version
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'tel':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'tel' /* with pro component mask more good */,
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'textarea':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'textarea' /* with pro component mask more good */,
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'time':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'time' /* with pro component mask more good */,
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'url':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'url',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            validation: 'url',
+                            validationVisibility: 'live',
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                case 'week':
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: 'week',
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                            placeholder: placeholder,
+                            wrapperClass: '$remove:formkit-wrapper',
+                        },
+                    };
+                default:
+                    return {
+                        type: 'FormKit',
+                        props: {
+                            type: field.type,
+                            id: field.id,
+                            label: field.label,
+                            required: field.required,
+                            value: field.defaultValue,
+                            help: hint,
+                        },
+                    };
+            }
+        },
+        checkFormState(state) {
+            // const field = this.$formkit.get('field_01');
+            // console.info(field.context.state.valid);
+
+            return true;
+
+            // loop over fields then this.$formkit.get(this.id) -> check error state if all ok return true else return false
+            // ?? wie unterscheiden wir welche actions dieser validierungsfehler betrifft ??
+            // ?? wie machen wir formkit validierung auch im Studio available ??
+            // \_ vllt macht es sinn das schema von formkit zu übernehmen oder alternativ nur unsere validierung zu nutzen.
+        },
         hasUserTask() {
             return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask;
         },
@@ -132,10 +503,8 @@ export default {
         },
         fields() {
             const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : [];
-
             const fieldMap = aFields.map((field) => ({
                 ...field,
-                component: mapFieldTypes(field.type),
                 items: mapItems(field.type, field),
             }));
 
@@ -157,6 +526,7 @@ export default {
             this.actions = this.props.options;
         },
         actionFn(action) {
+            this.checkFormState();
             if (this.checkCondition(action.condition)) {
                 this.showError(false, '');
                 // TODO: MM - begin
@@ -203,57 +573,9 @@ function mapItems(type, field) {
         return null;
     }
 }
-
-function mapFieldTypes(fieldType) {
-    switch (fieldType) {
-        case 'string':
-            return 'v-text-field';
-        case 'long':
-        case 'date':
-            return 'v-text-field';
-        case 'enum':
-            return 'v-select';
-        case 'boolean':
-            return 'v-checkbox';
-        case 'text':
-            return 'v-text-field';
-        case 'select':
-            return 'v-select';
-        case 'checkbox':
-            return 'v-checkbox';
-        case 'radio':
-            return 'v-radio';
-        case 'switch':
-            return 'v-switch';
-        case 'slider':
-            return 'v-slider';
-        case 'time':
-            return 'v-time-picker';
-        case 'datetime':
-            return 'v-datetime-picker';
-        case 'color':
-            return 'v-color-picker';
-        case 'file':
-            return 'v-file-input';
-        case 'textarea':
-            return 'v-textarea';
-        case 'password':
-            return 'v-text-field';
-        case 'number':
-            return 'v-text-field';
-        case 'email':
-            return 'v-text-field';
-        case 'tel':
-            return 'v-text-field';
-        case 'url':
-            return 'v-text-field';
-        default:
-            return 'v-text-field';
-    }
-}
 </script>
 
-<style scoped>
+<style>
 /* CSS is auto scoped, but using named classes is still recommended */
 @import '../stylesheets/ui-dynamic-form.css';
 </style>
diff --git a/ui/main.js b/ui/main.js
index ce6a9fe..ecacb3b 100644
--- a/ui/main.js
+++ b/ui/main.js
@@ -3,8 +3,8 @@
  *
  * This file is useful for testing your component in isolation from Node-RED.
  */
-import { createApp } from 'vue'
+import { createApp } from 'vue';
+import { plugin, defaultConfig } from '@formkit/vue';
+import UIDynamicForm from './components/UIDynamicForm.vue';
 
-import UIDynamicForm from './components/UIDynamicForm.vue'
-
-createApp(UIDynamicForm).mount('#app')
+createApp(UIDynamicForm).use(plugin, defaultConfig).mount('#app');
diff --git a/ui/stylesheets/ui-dynamic-form.css b/ui/stylesheets/ui-dynamic-form.css
index d7cb064..421fe8d 100644
--- a/ui/stylesheets/ui-dynamic-form.css
+++ b/ui/stylesheets/ui-dynamic-form.css
@@ -1,44 +1,62 @@
 .dynamic-form-wrapper {
-  padding: 10px;
-  margin: 10px;
-  border: 1px solid black;
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid black;
 }
 
 .dynamic-form-class {
-  color: green;
-  font-weight: bold;
+    color: green;
+    font-weight: bold;
 }
 
 h1 {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 h2 {
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
 }
 
 h3 {
-  margin-top: 1rem;
+    margin-top: 1rem;
 }
 
 p {
-  margin-bottom: 5px;
+    margin-bottom: 5px;
 }
 
 ul li {
-  list-style-type: circle;
-  list-style-position: inside;
-  margin-left: 15px;
+    list-style-type: circle;
+    list-style-position: inside;
+    margin-left: 15px;
 }
 
 pre {
-  padding: 12px;
-  margin: 12px;
-  background-color: #eee;
+    padding: 12px;
+    margin: 12px;
+    background-color: #eee;
 }
 
 code {
-  font-size: 0.825rem;
-  color: #ae0000;
+    font-size: 0.825rem;
+    color: #ae0000;
+}
+
+.ui-dynamic-form-wrapper {
+    --fk-color-primary: rgb(var(--v-theme-primary)) !important;
+    --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
+    --fk-bg-input: rgb(var(--v-theme-group-background));
+    --fk-color-input: rgb(var(--v-theme-on-group-background));
+    --fk-color-help: rgb(var(--v-theme-on-group-background));
+    --fk-color-border-focus: rgb(var(--v-theme-primary));
+}
+
+.reset-background {
+    --fk-bg-input: rgb(var(--does-not-exist, #000));
+    /* i dont know why this works but it works */
+}
+
+.custom-fieldset {
+    max-width: none !important;
 }