diff --git a/src/assets/styles/openlayers-custom.css b/src/assets/styles/openlayers-custom.css
index 1a59628338578c994f05a0590327fe26a4debaa5..6435ba952c4dcf065d2c89bc29bd6970dc044895 100644
--- a/src/assets/styles/openlayers-custom.css
+++ b/src/assets/styles/openlayers-custom.css
@@ -37,7 +37,8 @@
 }
 .ol-popup #popup-content .fields {
   max-height: 200px;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
   padding-right: 10px;
 }
 .ol-popup #popup-content .divider {
diff --git a/src/services/map-service.js b/src/services/map-service.js
index 607a3990178b4dbefb35c505024fb67aeb4b968e..1d3c2e8a4e8dd17b41a014311691f613cd405b96 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -638,7 +638,11 @@ const mapService = {
     // generate html for each customField set to be displayed from featureType display config
     let rows = '';
     for (const customField of customfield_set) {
-      rows += featureType.displayed_fields.includes(customField.name) ? rowTemplate(customField) : '';
+      if (customField.value !== null && customField.value !== undefined
+        && featureType.displayed_fields.includes(customField.name))
+      {
+        rows += rowTemplate(customField);
+      }
     }
     // wrap all rows into customFields container
     return rows.length > 0 ?
diff --git a/src/views/FeatureType/FeatureTypeDisplay.vue b/src/views/FeatureType/FeatureTypeDisplay.vue
index 721c43794266030ec622ff47a281beb0b0537117..66dab63d2c56667053e3f531f96f271d349ae72f 100644
--- a/src/views/FeatureType/FeatureTypeDisplay.vue
+++ b/src/views/FeatureType/FeatureTypeDisplay.vue
@@ -92,7 +92,9 @@
       >
         <thead>
           <tr>
-            <th scope="col" />
+            <th scope="col">
+              Prévisualisation du champ
+            </th>
             <th scope="col">
               Champ
             </th>
@@ -105,10 +107,11 @@
           <tr
             v-for="field in featureAnyFields"
             :key="field.name"
+            :class="{ first_customfield: field.name === feature_type.customfield_set[0].name }"
           >
             <td
               scope="row" 
-              class="collapsing"
+              class="collapsing center aligned"
             >
               <div class="ui toggle checkbox">
                 <input
@@ -120,7 +123,7 @@
               </div>
             </td>
             <td scope="row">
-              {{ field.label }}
+              {{ field.name }} ({{ field.label }})
             </td>
             <td scope="row">
               {{ field.field_type || getCustomFieldType(field.field_type) }}
@@ -151,7 +154,7 @@ import { isEqual } from 'lodash';
 
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 
-import { featureNativeFields, customFieldTypeChoices } from '@/utils';
+import { customFieldTypeChoices, featureNativeFields } from '@/utils';
 import SymbologySelector from '@/components/FeatureType/SymbologySelector.vue';
 import Dropdown from '@/components/Dropdown.vue';
 
@@ -432,6 +435,12 @@ export default {
   .ui.toggle.checkbox .box, .ui.toggle.checkbox label, .ui.toggle.checkbox {
     min-height: 15px;
   }
+  table {
+    border-collapse: collapse;
+  }
+  tr.first_customfield td {
+    border-top-width: 4px !important;
+  }
 }
 
 </style>