diff --git a/agate-ui/src/components/HtmlAnchorHint.vue b/agate-ui/src/components/HtmlAnchorHint.vue
new file mode 100644
index 00000000..de18bfec
--- /dev/null
+++ b/agate-ui/src/components/HtmlAnchorHint.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-html="htmlText" @click="onClick"></div>
+</template>
+
+<script lang="ts">
+defineComponent({
+  name: 'HtmlAnchorHint',
+});
+</script>
+
+<script setup lang="ts">
+interface Props {
+  trKey: string;
+  text: string;
+  url: string;
+}
+
+const props = defineProps<Props>();
+const { t } = useI18n();
+const htmlText = computed(() => t(props.trKey, { url: `<a href="${props.url}" target="_blank">${props.text}</a>` }));
+
+function onClick() {
+  window.open(props.url, '_blank');
+}
+
+// onMounted(() => {
+//   htmlText.value = t(props.trKey, { url: `<a href="${props.url}" target="_blank">${props.text}</a>` });
+// });
+</script>
diff --git a/agate-ui/src/components/SystemProperties.vue b/agate-ui/src/components/SystemProperties.vue
index 4ddb8b19..dfd5cbd2 100644
--- a/agate-ui/src/components/SystemProperties.vue
+++ b/agate-ui/src/components/SystemProperties.vue
@@ -134,18 +134,12 @@
 
 <script setup lang="ts">
 import SystemPropertiesDialog from 'src/components/SystemPropertiesDialog.vue';
-
 const systemStore = useSystemStore();
 const { t } = useI18n();
 
 const showDialog = ref(false);
-
 const config = computed(() => systemStore.configuration);
 
-onMounted(() => {
-  systemStore.init();
-});
-
 const onEdit = () => {
   showDialog.value = true;
 };
diff --git a/agate-ui/src/components/SystemUserAttributes.vue b/agate-ui/src/components/SystemUserAttributes.vue
new file mode 100644
index 00000000..e06664e3
--- /dev/null
+++ b/agate-ui/src/components/SystemUserAttributes.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <div class="text-h6 q-mb-md">
+      {{ t('system.attributes.title') }}
+    </div>
+
+    <html-anchor-hint
+      class="text-help"
+      trKey="system.attributes.hint"
+      :text="t('translations').toLocaleLowerCase()"
+      url="/admin/translations"
+    />
+
+    <q-table
+      :rows="attributes"
+      flat
+      row-key="name"
+      :columns="columns"
+      :pagination="initialPagination"
+      :hide-pagination="attributes.length <= initialPagination.rowsPerPage"
+    >
+      <template v-slot:top-left>
+        <q-btn size="sm" icon="add" color="primary" :label="t('add')" @click="onAdd" />
+      </template>
+      <template v-slot:top-right>
+        <q-input v-model="filter" debounce="300" :placeholder="t('search')" dense clearable class="q-mr-md">
+          <template v-slot:prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" @mouseover="onOverRow(props.row)" @mouseleave="onLeaveRow(props.row)">
+          <q-td key="name" :props="props">
+            <span class="text-primary">{{ props.row.name }}</span>
+            <div class="float-right">
+              <q-btn
+                rounded
+                dense
+                flat
+                size="sm"
+                color="secondary"
+                :icon="toolsVisible[props.row.name] ? 'edit' : 'none'"
+                :title="t('edit')"
+                class="q-ml-xs"
+                @click="onShowEdit(props.row)"
+              />
+              <q-btn
+                rounded
+                dense
+                flat
+                size="sm"
+                color="secondary"
+                :title="t('delete')"
+                :icon="toolsVisible[props.row.name] ? 'delete' : 'none'"
+                class="q-ml-xs"
+                @click="onShowDelete(props.row)"
+              />
+            </div>
+          </q-td>
+          <q-td key="type" :props="props">
+            <span>{{ props.row.type }}</span>
+          </q-td>
+          <q-td key="description" :props="props">
+            <span>{{ props.row.description }}</span>
+          </q-td>
+          <q-td key="values" :props="props" @mouseover="onOverRow(props.row)" @mouseleave="onLeaveRow(props.row)">
+            <q-chip class="q-ml-none" v-for="(value, index) in props.row.values" :key="index">
+              {{ value }}
+            </q-chip>
+          </q-td>
+          <q-td key="required" :props="props">
+            <q-icon :name="props.row.required ? 'check_box' : 'check_box_outline_blank'" size="sm" dense />
+          </q-td>
+        </q-tr> </template
+      >/
+    </q-table>
+
+    <confirm-dialog
+      v-model="showDelete"
+      :title="t('system.attributes.remove')"
+      :text="t('system.attributes.remove_confirm', { name: selected?.name })"
+      @confirm="onDelete"
+    />
+
+    <system-user-attributes-dialog
+      v-model="showEdit"
+      :attribute="selected"
+      @saved="onSavedAttribute"
+      @cancel="onCancel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'SystemUserAttributes',
+});
+</script>
+
+<script setup lang="ts">
+import type { AttributeConfigurationDto } from 'src/models/Agate';
+import { DefaultAlignment } from 'src/components/models';
+import HtmlAnchorHint from 'src/components/HtmlAnchorHint.vue';
+import ConfirmDialog from 'src/components/ConfirmDialog.vue';
+import SystemUserAttributesDialog from 'src/components/SystemUserAttributesDialog.vue';
+
+const systemStore = useSystemStore();
+const { t } = useI18n();
+
+// const showDialog = ref(false);
+const toolsVisible = ref<{ [key: string]: boolean }>({});
+const initialPagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 20,
+});
+const attributes = computed(
+  () =>
+    systemStore.userAttributes?.filter((attr) =>
+      filter.value ? attr.name.toLowerCase().includes(filter.value.toLowerCase()) : true,
+    ) || [],
+);
+const filter = ref('');
+const selected = ref();
+const showEdit = ref(false);
+const showDelete = ref(false);
+
+const columns = computed(() => [
+  { name: 'name', label: t('name'), field: 'name', align: DefaultAlignment },
+  { name: 'type', label: t('type'), field: 'type', align: DefaultAlignment },
+  { name: 'description', label: t('description'), field: 'description', align: DefaultAlignment },
+  {
+    name: 'values',
+    label: t('values'),
+    field: 'values',
+    format: (val: string) => (val || '').split(/\s*,\s*/),
+    align: DefaultAlignment,
+  },
+  { name: 'required', label: t('required'), field: 'required', align: DefaultAlignment },
+]);
+
+function onOverRow(row: AttributeConfigurationDto) {
+  toolsVisible.value[row.name] = true;
+}
+
+function onLeaveRow(row: AttributeConfigurationDto) {
+  toolsVisible.value[row.name] = false;
+}
+
+function onAdd() {
+  selected.value = undefined;
+  showEdit.value = true;
+}
+
+function onShowEdit(row: AttributeConfigurationDto) {
+  selected.value = row;
+  showEdit.value = true;
+}
+
+function onShowDelete(row: AttributeConfigurationDto) {
+  selected.value = row;
+  showDelete.value = true;
+}
+
+function onDelete() {
+  if (selected.value) {
+    systemStore.removeAttribute(selected.value);
+  }
+}
+
+function onCancel() {
+  showEdit.value = false;
+}
+
+function onSavedAttribute() {
+  showEdit.value = false;
+  systemStore.init();
+}
+</script>
diff --git a/agate-ui/src/components/SystemUserAttributesDialog.vue b/agate-ui/src/components/SystemUserAttributesDialog.vue
new file mode 100644
index 00000000..e4a471b6
--- /dev/null
+++ b/agate-ui/src/components/SystemUserAttributesDialog.vue
@@ -0,0 +1,164 @@
+<template>
+  <q-dialog v-model="showDialog" persistent @hide="onHide">
+    <q-card class="dialog-md">
+      <q-card-section>
+        <div class="text-h6">{{ editMode ? t('system.attributes.update') : t('system.attributes.add') }}</div>
+      </q-card-section>
+
+      <q-separator />
+      <q-card-section>
+        <q-form ref="formRef">
+          <q-input
+            v-model="newAttribue.name"
+            dense
+            type="text"
+            :label="t('name') + ' *'"
+            class="q-mb-md"
+            lazy-rules
+            :rules="[validateRequired, validateUnique]"
+            :disable="editMode"
+          >
+          </q-input>
+          <q-input
+            v-model="newAttribue.description"
+            :label="t('description')"
+            class="q-mb-md"
+            dense
+            type="textarea"
+            lazy-rules
+          />
+          <q-select
+            v-model="type"
+            :label="t('type') + ' *'"
+            :options="typeOptions"
+            class="q-mb-md"
+            dense
+            emit-value
+            map-options
+          />
+          <q-input
+            v-model="values"
+            dense
+            type="text"
+            :label="t('values')"
+            :hint="t('system.attributes.values_hint')"
+            class="q-mb-md"
+            :disable="newAttribue.type !== 'STRING'"
+          >
+          </q-input>
+          <q-checkbox
+            v-model="newAttribue.required"
+            :label="t('required')"
+            class="q-mb-md"
+            dense
+          />
+        </q-form>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-grey-3">
+        <q-btn flat :label="t('cancel')" color="secondary" @click="onCancel" v-close-popup />
+        <q-btn flat :label="t('save')"  color="primary" @click="onSave" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'SystemUserAttributesDialog',
+});
+</script>
+
+<script setup lang="ts">
+import type { AttributeConfigurationDto } from 'src/models/Agate';
+import { notifyError, notifySuccess } from 'src/utils/notify';
+
+const { t } = useI18n();
+const systemStore = useSystemStore();
+
+interface DialogProps {
+  modelValue: boolean;
+  attribute: AttributeConfigurationDto | null;
+}
+
+const props = defineProps<DialogProps>();
+const emit = defineEmits(['update:modelValue', 'saved', 'cancel']);
+const formRef = ref();
+const showDialog = ref(props.modelValue);
+const newAttribue = ref<AttributeConfigurationDto>({} as AttributeConfigurationDto);
+const type = computed({
+  get: () => newAttribue.value.type,
+  set: (value) => {
+    newAttribue.value.type = value;
+    if (value !== 'STRING') {
+      newAttribue.value.values = [];
+    }
+  },
+});
+const values = computed({
+  get: () => newAttribue.value.values?.join(', '),
+  set: (value) => {
+    newAttribue.value.values = value.split(/\s*,\s*/);
+  },
+})
+const editMode = computed(() => !!props.attribute && !!props.attribute.name);
+const typeOptions = computed(() =>
+  ['STRING', 'NUMBER', 'BOOLEAN', 'INTEGER'].map((value) => ({ label: t(`system.attributes.types.${value}`), value })),
+);
+
+function validateRequired(value: string) {
+  return !!value || t('name_required');
+}
+
+function validateUnique(value: string) {
+  if (systemStore.userAttributes) {
+    const exists = systemStore.userAttributes.find((attr) => attr.name === value);
+    return !exists || t('system.attributes.name_exists');
+  }
+  return true;
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      if (props.attribute) {
+        newAttribue.value = { ...props.attribute } as AttributeConfigurationDto;
+      } else {
+        newAttribue.value = { type: 'STRING', required: false } as AttributeConfigurationDto;
+      }
+    }
+
+    showDialog.value = value;
+  },
+);
+
+function onHide() {
+  emit('update:modelValue', false);
+}
+
+function onCancel() {
+  emit('cancel');
+}
+
+async function onSave() {
+  const valid = await formRef.value.validate();
+  if (valid) {
+    const endpoint = editMode.value ? systemStore.updateAttribute : systemStore.addAttribute;
+    endpoint(newAttribue.value)
+      .then(() => {
+        notifySuccess(t('system.attributes.updated'));
+        emit('saved');
+      })
+      .catch(() => {
+        notifyError(t('system.attributes.update_failed'));
+      })
+      .finally(() => {
+        newAttribue.value = { type: 'STRING' } as AttributeConfigurationDto;
+        emit('update:modelValue', false);
+      });
+  }
+}
+</script>
diff --git a/agate-ui/src/i18n/en/index.js b/agate-ui/src/i18n/en/index.js
index a8579072..7906a51b 100644
--- a/agate-ui/src/i18n/en/index.js
+++ b/agate-ui/src/i18n/en/index.js
@@ -234,6 +234,22 @@ export default {
       APP: 'Mobile app',
       ANY: 'Email or mobile app',
     },
+    attributes: {
+      title: 'User Attributes',
+      hint: 'Attributes extend user description fields as wel as join requests. Localize each attribute by creating a key for each locale prefixed by <code>user-info.</code> in the {url} section.',
+      values_hint: 'Comma separated values',
+      add: 'Add Attribute',
+      update: 'Update Attribute',
+      remove: 'Remove Attribute',
+      remove_confirm: 'Please confirm the removal of the attribute: {name}',
+      name_exists: 'Attribute name already exists',
+      types: {
+        STRING: 'String',
+        NUMBER: 'Number',
+        BOOLEAN: 'Boolean',
+        INTEGER: 'Integer',
+      }
+    }
   },
   ticket: {
     events: 'Events',
@@ -283,8 +299,11 @@ export default {
   source_code: 'Source Code',
   status: 'Status',
   tickets: 'Tickets',
+  translations: 'Translations',
   type: 'Type',
   username: 'Username',
   users_caption: 'Manage users, assign role and groups to grant applications access',
   users: 'Users',
+  value: 'Value',
+  values: 'Values',
 };
diff --git a/agate-ui/src/i18n/fr/index.js b/agate-ui/src/i18n/fr/index.js
index 7791d9b2..852fce4b 100644
--- a/agate-ui/src/i18n/fr/index.js
+++ b/agate-ui/src/i18n/fr/index.js
@@ -234,6 +234,22 @@ export default {
       APP: 'Application mobile',
       ANY: 'Courriel ou application mobile',
     },
+    attributes: {
+      title: 'Attributs Utilisateur',
+      hint: 'Les attributs étendent les champs de description de l\'utilisateur ainsi que les demandes d\'adhésion. Localisez chaque attribut en créant une clé pour chaque langue, préfixée par <code>user-info.</code> dans la section {url}.',
+      values_hint: 'Valeurs séparées par des virgules',
+      add: 'Ajouter un Attribut',
+      update: 'Mettre à Jour l\'Attribut',
+      remove: 'Supprimer l\'Attribut',
+      remove_confirm: 'Veuillez confirmer la suppression de l\'attribut : {name}',
+      name_exists: 'Le nom de l\'attribut existe déjà',
+      types: {
+        STRING: 'Chaîne',
+        NUMBER: 'Nombre',
+        BOOLEAN: 'Booléen',
+        INTEGER: 'Entier',
+      }
+    },
   },
   ticket: {
     events: 'Événements',
@@ -283,8 +299,11 @@ export default {
   source_code: 'Code source',
   status: 'Statut',
   tickets: 'Tickets',
+  translations: 'Traductions',
   type: 'Type',
   username: "Nom d'usager",
   users_caption: 'Gérer les utilisateurs, les rôles et les accès aux applications',
   users: 'Utilisateurs',
+  value: 'Valeur',
+  values: 'Valeurs',
 };
diff --git a/agate-ui/src/pages/SettingsPage.vue b/agate-ui/src/pages/SettingsPage.vue
index a7e2a340..d25df788 100644
--- a/agate-ui/src/pages/SettingsPage.vue
+++ b/agate-ui/src/pages/SettingsPage.vue
@@ -9,12 +9,21 @@
     <q-page class="q-pa-md">
       <div class="text-h6 q-mb-md">{{ t('properties') }}</div>
       <system-properties />
+      <system-user-attributes class="q-mt-md"/>
     </q-page>
   </div>
 </template>
 
 <script setup lang="ts">
 import SystemProperties from 'src/components/SystemProperties.vue';
+import SystemUserAttributes from 'src/components/SystemUserAttributes.vue';
 
+
+const systemStore = useSystemStore();
 const { t } = useI18n();
+
+onMounted(() => {
+  systemStore.init();
+});
+
 </script>
diff --git a/agate-ui/src/stores/system.ts b/agate-ui/src/stores/system.ts
index 662142e3..ff4214ab 100644
--- a/agate-ui/src/stores/system.ts
+++ b/agate-ui/src/stores/system.ts
@@ -1,10 +1,11 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/api';
-import type { PublicConfigurationDto, ConfigurationDto } from 'src/models/Agate';
+import type { PublicConfigurationDto, ConfigurationDto, AttributeConfigurationDto } from 'src/models/Agate';
 
 export const useSystemStore = defineStore('system', () => {
   const configurationPublic = ref<PublicConfigurationDto>({} as PublicConfigurationDto);
   const configuration = ref<ConfigurationDto>({} as ConfigurationDto);
+  const userAttributes = ref<AttributeConfigurationDto[]>([]);
 
   async function initPub() {
     return api.get('/config/_public').then((response) => {
@@ -19,11 +20,44 @@ export const useSystemStore = defineStore('system', () => {
     return api.get('/config').then((response) => {
       if (response.status === 200) {
         configuration.value = response.data;
+        userAttributes.value = configuration.value.userAttributes;
       }
       return response;
     });
   }
 
+  async function addAttribute(attribute: AttributeConfigurationDto) {
+    if (attribute) {
+      if (!userAttributes.value) {
+        configuration.value.userAttributes = [];
+        userAttributes.value = configuration.value.userAttributes;
+      }
+
+      userAttributes.value.push(attribute);
+      return save({ ...configuration.value });
+    }
+  }
+
+  async function updateAttribute(attribute: AttributeConfigurationDto) {
+    if (attribute) {
+      const index = userAttributes.value.findIndex(attr => attr.name === attribute.name);
+      if (index !== -1) {
+        userAttributes.value[index] = attribute;
+        return save({ ...configuration.value });
+      } else {
+        throw new Error('Attribute not found');
+      }
+    }
+  }
+
+  async function removeAttribute(attribute: AttributeConfigurationDto) {
+    const index = userAttributes.value.indexOf(attribute);
+    if (index !== -1) {
+      userAttributes.value.splice(index, 1);
+      return save({ ...configuration.value });
+    }
+  }
+
   async function save(config: ConfigurationDto) {
     return api.put('/config', config).then((response) => {
       configuration.value = { ...config };
@@ -33,9 +67,13 @@ export const useSystemStore = defineStore('system', () => {
 
   return {
     configuration,
+    userAttributes,
     configurationPublic,
     init,
     initPub,
+    addAttribute,
+    updateAttribute,
+    removeAttribute,
     save,
   };
 });