diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
new file mode 100644
index 00000000..d77f5459
--- /dev/null
+++ b/app/src/components/ConfigPanels.vue
@@ -0,0 +1,75 @@
+<template>
+  <b-card no-body>
+    <b-tabs fill pills card>
+      <slot name="before" />
+
+      <tab-form
+        v-for="{ name, id, sections, help, serverError } in panels" :key="id"
+        v-bind="{ name, id: id + '-form', validation: $v.forms[id], serverError }"
+        @submit.prevent.stop="$emit('submit', id)"
+      >
+        <template v-if="help" #disclaimer>
+          <div class="alert alert-info" v-html="help" />
+        </template>
+
+        <slot :name="id + '-tab-before'" />
+
+        <template v-for="section in sections">
+          <div v-if="isVisible(section.visible, section)" :key="section.id" class="mb-5">
+            <b-card-title v-if="section.name" title-tag="h3">
+              {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
+            </b-card-title>
+
+            <template v-for="(field, fname) in section.fields">
+              <form-field
+                v-if="isVisible(field.visible, field)" :key="fname"
+                v-model="forms[id][fname]" v-bind="field" :validation="$v.forms[id][fname]"
+              />
+            </template>
+          </div>
+        </template>
+
+        <slot :name="id + '-tab-after'" />
+      </tab-form>
+
+      <slot name="default" />
+    </b-tabs>
+  </b-card>
+</template>
+
+<script>
+import { validationMixin } from 'vuelidate'
+
+import { configPanelsFieldIsVisible } from '@/helpers/yunohostArguments'
+
+
+export default {
+  name: 'ConfigPanels',
+
+  mixins: [validationMixin],
+
+  props: {
+    panels: { type: Array, default: undefined },
+    forms: { type: Object, default: undefined },
+    validations: { type: Object, default: undefined }
+  },
+
+  validations () {
+    const v = this.validations
+    return v ? { forms: v } : null
+  },
+
+  methods: {
+    isVisible (expression, field) {
+      return configPanelsFieldIsVisible(expression, field, this.forms)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-title {
+  margin-bottom: 1em;
+  border-bottom: solid 1px #aaa;
+}
+</style>
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 1023f487..65819afc 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -1,5 +1,6 @@
 import i18n from '@/i18n'
 import store from '@/store'
+import evaluate from 'simple-evaluate'
 import * as validators from '@/helpers/validators'
 import { isObjectLiteral, isEmptyValue, flattenObjectLiteral } from '@/helpers/commons'
 
@@ -284,6 +285,83 @@ export function formatYunoHostArguments (args, name = null) {
   return { form, fields, validations, errors }
 }
 
+
+export function formatYunoHostConfigPanels (data) {
+  const result = {
+    panels: [],
+    forms: {},
+    validations: {},
+    errors: {}
+  }
+
+  for (const { id: panelId, name, help, sections } of data.panels) {
+    const panel = { id: panelId, sections: [] }
+    result.forms[panelId] = {}
+    result.validations[panelId] = {}
+    result.errors[panelId] = {}
+
+    if (name) panel.name = formatI18nField(name)
+    if (help) panel.help = formatI18nField(help)
+
+    for (const { id: sectionId, name, help, visible, options } of sections) {
+      const section = { id: sectionId, visible, isVisible: false }
+      if (help) section.help = formatI18nField(help)
+      if (name) section.name = formatI18nField(name)
+      const { form, fields, validations, errors } = formatYunoHostArguments(options)
+      // Merge all sections forms to the panel to get a unique form
+      Object.assign(result.forms[panelId], form)
+      Object.assign(result.validations[panelId], validations)
+      Object.assign(result.errors[panelId], errors)
+      section.fields = fields
+      panel.sections.push(section)
+    }
+
+    result.panels.push(panel)
+  }
+
+  return result
+}
+
+
+export function configPanelsFieldIsVisible (expression, field, forms) {
+  if (!expression || !field) return true
+  const context = {}
+
+  const promises = []
+  for (const args of Object.values(forms)) {
+    for (const shortname in args) {
+      if (args[shortname] instanceof File) {
+        if (expression.includes(shortname)) {
+          promises.push(pFileReader(args[shortname], context, shortname, false))
+        }
+      } else {
+        context[shortname] = args[shortname]
+      }
+    }
+  }
+
+  // Allow to use match(var,regexp) function
+  const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
+  let i = 0
+  Promise.all(promises).then(() => {
+    for (const matched of expression.matchAll(matchRe)) {
+      i++
+      const varName = matched[1] + '__re' + i.toString()
+      context[varName] = new RegExp(matched[2], 'm').test(context[matched[1]])
+      expression = expression.replace(matched[0], varName)
+    }
+
+    try {
+      field.isVisible = evaluate(context, expression)
+    } catch {
+      field.isVisible = false
+    }
+  })
+
+  return field.isVisible
+}
+
+
 export function pFileReader (file, output, key, base64 = true) {
     return new Promise((resolve, reject) => {
         const fr = new FileReader()
@@ -303,6 +381,8 @@ export function pFileReader (file, output, key, base64 = true) {
         }
     })
 }
+
+
 /**
  * Format helper for a form value.
  * Convert Boolean to (1|0) and concatenate adresses.