diff --git a/site/blueprints/pages/author.yml b/site/blueprints/pages/author.yml
index 7860b89..f17f9f2 100644
--- a/site/blueprints/pages/author.yml
+++ b/site/blueprints/pages/author.yml
@@ -8,6 +8,8 @@ tabs:
       presentationSection:
         type: fields
         fields:
+          demo:
+            type: demo
           presentation:
             extends: fields/body
             label: Présentation
diff --git a/site/plugins/your-plugin/index.js b/site/plugins/your-plugin/index.js
index 89fa8b4..8b85eda 100644
--- a/site/plugins/your-plugin/index.js
+++ b/site/plugins/your-plugin/index.js
@@ -22,7 +22,7 @@
   };
   var _sfc_staticRenderFns = [function() {
     var _vm = this, _c = _vm._self._c;
-    return _c("section", { staticClass: "k-demo-section" }, [_c("header", { staticClass: "k-section-header" }, [_c("h2", { staticClass: "k-headline" }, [_vm._v("Your custom section")])])]);
+    return _c("section", { staticClass: "k-demo-section" }, [_c("header", { staticClass: "k-section-header" }, [_c("h2", { staticClass: "k-headline" }, [_vm._v("Test")])])]);
   }];
   _sfc_render._withStripped = true;
   var __component__ = /* @__PURE__ */ normalizeComponent(
diff --git a/site/plugins/your-plugin/index.php b/site/plugins/your-plugin/index.php
index e4f92c0..1be738a 100644
--- a/site/plugins/your-plugin/index.php
+++ b/site/plugins/your-plugin/index.php
@@ -1,7 +1,20 @@
 <?php
 
 Kirby::plugin('getkirby/pluginkit', [
-  'sections' => [
-    'demo' => []
+  'fields' => [
+    'demo' => [
+      'props' => [
+        'value' => function ($value = null) {
+          $margins = Yaml::decode($value);
+          return [
+            'top' => 0,
+            'right' => 0,
+            'bottom' => 0,
+            'left' => 0,
+            ...$margins
+          ];
+        }
+      ]
+    ]
   ],
 ]);
diff --git a/site/plugins/your-plugin/src/components/DemoSection.vue b/site/plugins/your-plugin/src/components/DemoSection.vue
index b8e211a..02accdc 100644
--- a/site/plugins/your-plugin/src/components/DemoSection.vue
+++ b/site/plugins/your-plugin/src/components/DemoSection.vue
@@ -1,14 +1,57 @@
 <template>
-	<section class="k-demo-section">
+	<k-field class="">
 		<header class="k-section-header">
-			<h2 class="k-headline">Your custom section</h2>
+			<h2 class="k-headline">Test</h2>
 		</header>
-	</section>
+		<main>
+			<k-input
+				:value="value.top"
+				type="text"
+				before="Top"
+				@input="onInput('top', $event)"
+			/>
+			<k-input
+				:value="value.right"
+				type="text"
+				before="Right"
+				@input="onInput('right', $event)"
+			/>
+			<k-input
+				:value="value.bottom"
+				type="text"
+				before="Bottom"
+				@input="onInput('bottom', $event)"
+			/>
+			<k-input
+				:value="value.left"
+				type="text"
+				before="Left"
+				@input="onInput('left', $event)"
+			/>
+			<k-button class="k-button">
+			  Générer le fichier texte
+			</k-button>
+			
+		</main>
+	</k-field>
 </template>
 
 <script>
 export default {
-	// Put your section logic here
+	extends: "k-field",
+	props: {
+		value: Object
+	},
+	methods: {
+		onInput(margin, value){
+			const newValue = {
+				...this.value,
+				[margin]: value
+			}
+
+			this.$emit("input", newValue)
+		}
+	}
 };
 </script>
 
diff --git a/site/plugins/your-plugin/src/index.js b/site/plugins/your-plugin/src/index.js
index 1c6306a..a0895ca 100644
--- a/site/plugins/your-plugin/src/index.js
+++ b/site/plugins/your-plugin/src/index.js
@@ -1,7 +1,7 @@
 import DemoSection from "./components/DemoSection.vue";
 
 window.panel.plugin("getkirby/pluginkit", {
-	sections: {
+	fields: {
 		demo: DemoSection
 	}
 });