diff --git a/content/00-welcome/05-todos.txt b/content/00-welcome/05-todos.txt
index f2715fb..87020a6 100644
--- a/content/00-welcome/05-todos.txt
+++ b/content/00-welcome/05-todos.txt
@@ -1 +1 @@
-["# ToDos Version 2","[TOC]","## System settings","* DONE: Migrate from backend to frontend with vue and api\n* DONE: Redesign\n* DONE: License feature\n* DONE: Enhance with plugins","## Visual Editor","* DONE: Refactor and redesign\n* DONE: Fix toc component in new block\n* DONE: Fix hr component in new block\n* DONE: finish shortcode component\n* DONE: Fix inline formats\n* DONE: fix lenght of page\n* DONE: Fix design of new block at the end (background color)\n* DONE: Move Block\n* DONE: Fix headline design\n* DONE: Fix save on two enter\n* DONE:  fix quote design\n* DONE: Fix toc preview\n* DONE: disable enable \n* DONE: Add load sign (from navigation)\n* DONE: File is not published from tmp to media\/files if you save the block.","## Raw Editor","* DONE: Refactor and redesign\n* DONE: Integrate highlighting","## Navigation","* DONE: Refactor and redesign\n* DONE: fix status in navigation\n* DONE: refresh navigation after changes","## Publish Controller","* DONE: Refactor and redesign\n* DONE: Create \n* DONE: publish\n* DONE: unpublish\n* DONE: discard\n* DONE: delete\n* DONE: save draft\n* DONE: switch to raw","## Meta Tabs","* DONE: Refactor and redesign\n* DONE: Enhance with plugins","## Medialib","* DONE: Refactor and redesign","## Posts","* DONE: Refactor and redesign","## Plugins","* Asset Class in progress","## Frontend","* DONE: Refactor\n* DONE: Test restrictions","## Other big tasks","* DONE: System setup\n* DONE: Recover Password","## Medium tasks","* DONE: Merge processAssets modell\n* DONE: Table of content duplicated for published pages\n* DONE: Session handling: csrf fail and session start error if restrictions are active\n* DONE: Image and files for meta","## Open tasks","* DONE: Sitemap and ping\n* DONE: Version check\n* DONE: Proxy support\n* DONE: SVG checker: https:\/\/github.com\/TribalSystems\/SVG-Sanitizer\n* DONE: Backend form builder\n* DONE: Image generation on the fly\n* DONE: Delete folder in base level\n* DONE: Make folder delete easier with glob or scandir\n* DONE: fix error messages (check models)\n* DONE: error status codes (check middleware)\n* DONE: Warn if open another block\n* Customfields not styled yet\n* Responsive design\n* Fix error api systemnavi\n* Captcha integration\n* Reference feature\n* Typemill Utilities\n* Clear cache\n* Show security Log\n* User search only for +10 users\n* Handle formdata centrally ???\n* Markdown secure rendering\n* Wrong frontend navigation if unpublished pages\n* finish youtube component\n* Solution for logo and favicon\n* For api translations should be done completely in backoffice","## Cleanups:","* DONE: Events\n* DONE: Error messages\n* Translations\n* https:\/\/stackoverflow.com\/questions\/15041608\/searching-all-files-in-folder-for-strings\n* https:\/\/github.com\/skfaisal93\/AnyWhereInFiles\/blob\/master\/anywhereinfiles-1.4.php\n* https:\/\/github.com\/stephenhodgkiss\/extract-translation-text-from-php-js","## Info: Select userroles","* Userroles for file restriction: in vue-blox-components loaded via api\n* Userroles for userfields: in php model user getUserFields()\n* Userroles for meta: in php controller apiAuthorMeta getMeta()\n* Plugins and themes: in php model extension getThemeDefinitions()","## Info: License Check","* On activation in apiControllerExtension. It checks the license in yaml.\n* In plugin php code with setPremiumLicense\n* In static plugins, it checks manual premium list and method setPremiumLicense and more ","## Plugins","* MAKER: Rebuild search\n* MAKER: Rebuild contactform with shortcode","## Status codes","| Status code | Description | \n|---|---|\n| 200 ok | cell | \n| 400 bad request | The request was unacceptable due to missing or invalid parameter. | \n| 401 unauthorized | The request requires an authorization. | \n| (402 request failed) | The parameters where there but the request failed for other reasons. | \n| 403 forbidden | The user is authenticated but he has not enough rights. | \n| 404 not found | new | \n| 500 internal server error | new |"]
\ No newline at end of file
+["# ToDos Version 2","[TOC]","## System settings","* DONE: Migrate from backend to frontend with vue and api\n* DONE: Redesign\n* DONE: License feature\n* DONE: Enhance with plugins","## Visual Editor","* DONE: Refactor and redesign\n* DONE: Fix toc component in new block\n* DONE: Fix hr component in new block\n* DONE: finish shortcode component\n* DONE: Fix inline formats\n* DONE: fix lenght of page\n* DONE: Fix design of new block at the end (background color)\n* DONE: Move Block\n* DONE: Fix headline design\n* DONE: Fix save on two enter\n* DONE:  fix quote design\n* DONE: Fix toc preview\n* DONE: disable enable \n* DONE: Add load sign (from navigation)\n* DONE: File is not published from tmp to media\/files if you save the block.","## Raw Editor","* DONE: Refactor and redesign\n* DONE: Integrate highlighting","## Navigation","* DONE: Refactor and redesign\n* DONE: fix status in navigation\n* DONE: refresh navigation after changes","## Publish Controller","* DONE: Refactor and redesign\n* DONE: Create \n* DONE: publish\n* DONE: unpublish\n* DONE: discard\n* DONE: delete\n* DONE: save draft\n* DONE: switch to raw","## Meta Tabs","* DONE: Refactor and redesign\n* DONE: Enhance with plugins","## Medialib","* DONE: Refactor and redesign","## Posts","* DONE: Refactor and redesign","## Plugins","* Asset Class in progress","## Frontend","* DONE: Refactor\n* DONE: Test restrictions","## Other big tasks","* DONE: System setup\n* DONE: Recover Password","## Medium tasks","* DONE: Merge processAssets modell\n* DONE: Table of content duplicated for published pages\n* DONE: Session handling: csrf fail and session start error if restrictions are active\n* DONE: Image and files for meta","## Open tasks","* DONE: Sitemap and ping\n* DONE: Version check\n* DONE: Proxy support\n* DONE: SVG checker: https:\/\/github.com\/TribalSystems\/SVG-Sanitizer\n* DONE: Backend form builder\n* DONE: Image generation on the fly\n* DONE: Delete folder in base level\n* DONE: Make folder delete easier with glob or scandir\n* DONE: fix error messages (check models)\n* DONE: error status codes (check middleware)\n* DONE: Warn if open another block\n* DONE: Customfields not styled yet\n* Responsive design\n* Fix error api systemnavi\n* Captcha integration\n* Reference feature\n* Typemill Utilities\n* Clear cache\n* Show security Log\n* User search only for +10 users\n* Handle formdata centrally ???\n* Markdown secure rendering\n* Wrong frontend navigation if unpublished pages\n* finish youtube component\n* Solution for logo and favicon\n* For api translations should be done completely in backoffice","## Cleanups:","* DONE: Events\n* DONE: Error messages\n* Translations\n* https:\/\/stackoverflow.com\/questions\/15041608\/searching-all-files-in-folder-for-strings\n* https:\/\/github.com\/skfaisal93\/AnyWhereInFiles\/blob\/master\/anywhereinfiles-1.4.php\n* https:\/\/github.com\/stephenhodgkiss\/extract-translation-text-from-php-js","## Info: Select userroles","* Userroles for file restriction: in vue-blox-components loaded via api\n* Userroles for userfields: in php model user getUserFields()\n* Userroles for meta: in php controller apiAuthorMeta getMeta()\n* Plugins and themes: in php model extension getThemeDefinitions()","## Info: License Check","* On activation in apiControllerExtension. It checks the license in yaml.\n* In plugin php code with setPremiumLicense\n* In static plugins, it checks manual premium list and method setPremiumLicense and more ","## Plugins","* MAKER: Rebuild search\n* MAKER: Rebuild contactform with shortcode","## Status codes","| Status code | Description | \n|---|---|\n| 200 ok | cell | \n| 400 bad request | The request was unacceptable due to missing or invalid parameter. | \n| 401 unauthorized | The request requires an authorization. | \n| (402 request failed) | The parameters where there but the request failed for other reasons. | \n| 403 forbidden | The user is authenticated but he has not enough rights. | \n| 404 not found | new | \n| 500 internal server error | new |"]
\ No newline at end of file
diff --git a/system/typemill/author/js/vue-forms.js b/system/typemill/author/js/vue-forms.js
index 84612ab..fee9604 100644
--- a/system/typemill/author/js/vue-forms.js
+++ b/system/typemill/author/js/vue-forms.js
@@ -204,12 +204,12 @@ app.component('component-checkboxlist', {
 				  	@change="update(checkedoptions, name)">
 				  	<span class="ml-2 text-sm">{{ $filters.translate(option) }}</span>
 			  	</label>
-			  	<p v-if="errors[name]" class="text-xs text-red-500">{{ errors[name] }}</p>
-			  	<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
+				<p v-if="errors[name]" class="text-xs text-red-500">{{ errors[name] }}</p>
+				<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
 			  </div>`,
 	mounted: function()
 	{
-		if(typeof this.value === 'object')
+		if(this.value && typeof this.value === 'object')
 		{
 			this.checkedoptions = this.value;
 		}
@@ -563,7 +563,7 @@ app.component('component-hidden', {
 })
 
 app.component('component-customfields', {
-	props: ['id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'value', 'errors'],
+	props: ['id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'css', 'value', 'errors'],
 	data: function () {
 		return {
 			fielderrors: false,
@@ -572,20 +572,47 @@ app.component('component-customfields', {
 			cfvalue: [{}]
 		 }
 	},
-	template: `<div>
-				<label class="mb2">{{ $filters.translate(label) }}</label>
-			  	<div class="fielddescription mb2 f7">{{ $filters.translate(description) }}</div>
-			  	<div v-if="errors[name]" class="error mb2 f7">{{ errors[name] }}</div>
-			  	<transition name="fade"><div v-if="fielderrors" class="error mb2 f7">{{ fielderrors }}</div></transition>
-	  			<transition-group name="fade" tag="div"> 
-	  				<div class="customrow flex items-start mb3" v-for="(pairobject, pairindex) in cfvalue" :key="pairindex">
-						<input type="text" placeholder="key" class="customkey" :class="pairobject.keyerror" :value="pairobject.key" @input="updatePairKey(pairindex,$event)">
-				  		<div class="mt3"><svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg></div> 
-		  			  	<textarea placeholder="value" class="customvalue pa3" :class="pairobject.valueerror" v-html="pairobject.value" @input="updatePairValue(pairindex,$event)"></textarea>
-						<button class="bg-tm-red white bn ml2 h1 w2 br1" @click.prevent="deleteField(pairindex)"><svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg></button>
+	template: `<div :class="css ? css : 'w-full'" class="mt-5 mb-5">
+				<label :for="name" class="block mb-1 font-medium">{{ $filters.translate(label) }}</label>
+			  	<p v-if="fielderrors" class="text-xs text-red-500">{{ fielderrors }}</p>
+			  	<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
+	  			<transition-group name="fade" tag="div">
+	  				<div class="relative flex mb-3" v-for="(pairobject, pairindex) in cfvalue" :key="pairindex">
+						<div>
+							<input 
+								type="text" 
+								placeholder="key" 
+								class="h-12 w-full border px-2 py-3 border-stone-300 bg-stone-200" 
+								:class="pairobject.keyerror" 
+								:value="pairobject.key" 
+								@input="updatePairKey(pairindex,$event)">
+				  		</div>
+				  		<div class="flex-grow">
+				  			<div class="flex">
+					  			<svg class="icon icon-dots-two-vertical mt-3">
+					  				<use xlink:href="#icon-dots-two-vertical"></use>
+					  			</svg>
+				  			  	<textarea 
+				  			  		placeholder="value" 
+									class="w-full border px-2 py-3 border-stone-300 bg-stone-200" 
+				  			  		:class="pairobject.valueerror" 
+				  			  		v-html="pairobject.value" 
+				  			  		@input="updatePairValue(pairindex,$event)"></textarea>
+								<button class="text-white bg-stone-700 w-6 h-6 text-xs hover:bg-rose-500 ml-1" @click.prevent="deleteField(pairindex)">
+									<svg class="icon icon-minus">
+										<use xlink:href="#icon-minus"></use>
+									</svg>
+								</button>
+							</div>
+				  		</div> 
 					</div>
 				</transition-group>
-				<button :disabled="disableaddbutton" class="bg-tm-green white bn br1 pa2 f6" @click.prevent="addField()"><svg class="icon icon-plus f7"><use xlink:href="#icon-plus"></use></svg> Add Fields</button>
+  				<button :disabled="disableaddbutton" class="text-white bg-stone-700 w-6 h-6 text-xs hover:bg-teal-500 mr-2" @click.prevent="addField()">
+	  				<svg class="icon icon-plus">
+	  					<use xlink:href="#icon-plus"></use>
+	  				</svg>
+	  			</button>
+	  			<span class="text-sm">{{ $filters.translate('add entry') }}</span>	
 			  </div>`,
 	mounted: function(){
 		if(typeof this.value === 'undefined' || this.value === null || this.value.length == 0)
@@ -606,7 +633,7 @@ app.component('component-customfields', {
 		update: function(value, name)
 		{
 			this.fielderrors = false;
-			this.errors = false;
+			this.mainerror = false;
 
 			/* transform array of objects [{key:mykey, value:myvalue}] into array [[mykey,myvalue]] */
 			var storedvalue = value.map(function(item){ return [item.key, item.value]; });
@@ -614,10 +641,10 @@ app.component('component-customfields', {
 			/* transform array [[mykey,myvalue]] into object { mykey:myvalue } */
 			storedvalue = Object.fromEntries(storedvalue);
 						
-			FormBus.$emit('forminput', {'name': name, 'value': storedvalue});
+			eventBus.$emit('forminput', {'name': name, 'value': storedvalue});
 		},
 		updatePairKey: function(index,event)
-		{
+		{			
 			this.cfvalue[index].key = event.target.value;
 
 			var regex = /^[a-z0-9]+$/i;