diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss
index da6bea7d2..1c73b8d8f 100644
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -22,6 +22,7 @@
 
 @import "title";
 @import "datatable";
+@import "datatableconfig";
 @import "form";
 @import "fieldset";
 @import "field";
diff --git a/css/backoffice/components/_datatableconfig.scss b/css/backoffice/components/_datatableconfig.scss
new file mode 100644
index 000000000..c4ade8215
--- /dev/null
+++ b/css/backoffice/components/_datatableconfig.scss
@@ -0,0 +1,39 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-datatableconfig--attributes-panel--first-column--margin-x: $ibo-spacing-0 !default;
+$ibo-datatableconfig--attributes-panel--first-column--margin-y: $ibo-spacing-300 !default;
+$ibo-datatableconfig--attributes-panel--first-column--max-height: 150px !default;
+
+$ibo-datatableconfig--attributes-panel--per-page--input--margin-x: $ibo-spacing-200 !default;
+$ibo-datatableconfig--attributes-panel--per-page--input--margin-y: $ibo-spacing-0 !default;
+
+$ibo-datatableconfig--settings-panel--option--margin-right: $ibo-spacing-200 !default;
+
+.ibo-datatableconfig--attributes-panel .ibo-panel--body{
+  @extend %ibo-font-ral-nor-100;
+}
+.ibo-datatableconfig--attributes-panel .ibo-multi-column .ibo-column:first-child{
+  margin: $ibo-datatableconfig--attributes-panel--first-column--margin-y $ibo-datatableconfig--attributes-panel--first-column--margin-x;
+  max-height: $ibo-datatableconfig--attributes-panel--first-column--max-height;
+  overflow-y: scroll;
+}
+.ibo-datatableconfig--attributes-panel--per-page--input{
+  margin: $ibo-datatableconfig--attributes-panel--per-page--input--margin-y $ibo-datatableconfig--attributes-panel--per-page--input--margin-x;
+}
+
+.ibo-datatableconfig--settings-panel .ibo-panel--body{
+  display: flex;
+  flex-direction: row;
+}
+.ibo-datatableconfig--settings-panel--options-container{
+  flex-grow: 1;
+}
+.ibo-datatableconfig--settings-panel--option{
+  display: flex;
+  flex-direction: row;
+  align-items: first baseline;
+  margin-right: $ibo-datatableconfig--settings-panel--option--margin-right;
+}
\ No newline at end of file
diff --git a/templates/base/components/datatable/config/layout.html.twig b/templates/base/components/datatable/config/layout.html.twig
index 375bd9cb6..8da02ad9f 100644
--- a/templates/base/components/datatable/config/layout.html.twig
+++ b/templates/base/components/datatable/config/layout.html.twig
@@ -1,48 +1,48 @@
 <div id="datatable_dlg_{{ oUIBlock.GetTableId() }}" style="display: none;" class=" {{ oUIBlock.GetBlockCode() }}">
     <input type="hidden" name="action" value="none">
     <form id="form_{{ oUIBlock.GetTableId() }}" onsubmit="return false">
-        <p>
+        <div>
             <input id="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}" type="radio" name="settings" {% if (oUIBlock.GetOption("bUseCustomSettings") == false) %} checked {% endif %} value="defaults">
-            <label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}">&nbsp;{{ 'UI:UseDefaultSettings'|dict_s }}</label>
-        </p>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
+            <label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}">{{ 'UI:UseDefaultSettings'|dict_s }}</label>
+        </div>
+        <div class="ibo-datatableconfig--attributes-panel ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
             <div class="ibo-panel--header">
                 <div class="ibo-panel--header-left">
                     <input id="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}" type="radio" class="specific_settings" name="settings" {% if oUIBlock.GetOption("bUseCustomSettings") %} checked {% endif %} value="specific">
-                    <label for="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}">&nbsp;&nbsp;{{ 'UI:UseSpecificSettings'|dict_s }}</label>
+                    <label for="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}">{{ 'UI:UseSpecificSettings'|dict_s }}</label>
                 </div>
             </div>
-            <div class="ibo-panel--body ibo-font-ral-nor-100">
+            <div class="ibo-panel--body">
                 {{ 'UI:ColumnsAndSortOrder'|dict_s }}<br>
                 <div class="ibo-multi-column">
-                    <div class="ibo-column ibo-without-margin ibo-list-column" style="max-height:150px; overflow-y: scroll;">
+                    <div class="ibo-column ibo-without-margin ibo-list-column">
                         <ul class="sortable_field_list" id="sfl_{{ oUIBlock.GetTableId() }}">
-
                         </ul>
                     </div>
-
                 </div>
-                <p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
+                <p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input class="ibo-datatableconfig--attributes-panel--per-page--input" type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
             </div>
         </div>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
+        <div class="ibo-datatableconfig--settings-panel ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
             <div class="ibo-panel--header">
                 <div class="ibo-panel--header-left">
                     <input id="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}" type="checkbox" {% if oUIBlock.GetOption("sTableId") != null %}checked{% endif %} name="save_settings">
-                    <label for="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}">&nbsp;&nbsp;{{ 'UI:UseSavetheSettings'|dict_s }}</label>
+                    <label for="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}">{{ 'UI:UseSavetheSettings'|dict_s }}</label>
                 </div>
             </div>
-            <div class="ibo-panel--body .ibo-font-ral-nor-100">
-                <input id="dtbl_dlg_this_list_{{ oUIBlock.GetTableId() }}" type="radio" name="scope" {% if oUIBlock.GetOption("sTableId") != null %} checked {% else %} disabled="disabled" stay-disabled="true"{% endif %} value="this_list">
-                <label for="dtbl_dlg_this_list_{{ oUIBlock.GetTableId() }}">&nbsp;&nbsp;{{ 'UI:OnlyForThisList'|dict_s }}</label>&nbsp;&nbsp;&nbsp;&nbsp;
-                <input id="dtbl_dlg_all_{{ oUIBlock.GetTableId() }}" type="radio" name="scope" {% if oUIBlock.GetOption("sTableId") == null %} checked {% endif %} value="defaults">
-                <label for="dtbl_dlg_all_{{ oUIBlock.GetTableId() }}">&nbsp;&nbsp;{{ 'UI:ForAllLists'|dict_s }}</label>
-            </div>
-        </div>
-        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-            <div class=" ui-dialog-buttonset">
-                <button type="button" class="ibo-button ibo-is-alternative ibo-is-neutral action cancel" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').dialog('close')">&nbsp;{{ 'UI:Button:Cancel'|dict_s }}</button>
-                <button type="submit" class="ibo-button ibo-is-regular ibo-is-primary action" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').DataTableSettings('onDlgOk'); ">&nbsp;{{ 'UI:Button:Ok'|dict_s }}</button>
+            <div class="ibo-panel--body">
+                <div class="ibo-datatableconfig--settings-panel--options-container">
+                    <div class="ibo-datatableconfig--settings-panel--option">
+                        <input id="dtbl_dlg_this_list_{{ oUIBlock.GetTableId() }}" type="radio" name="scope" {% if oUIBlock.GetOption("sTableId") != null %} checked {% else %} disabled="disabled" stay-disabled="true"{% endif %} value="this_list">
+                        <label for="dtbl_dlg_this_list_{{ oUIBlock.GetTableId() }}">{{ 'UI:OnlyForThisList'|dict_s }}</label>
+                    </div>
+                </div>
+                <div class="ibo-datatableconfig--settings-panel--options-container">
+                    <div class="ibo-datatableconfig--settings-panel--option">
+                    <input id="dtbl_dlg_all_{{ oUIBlock.GetTableId() }}" type="radio" name="scope" {% if oUIBlock.GetOption("sTableId") == null %} checked {% endif %} value="defaults">
+                    <label for="dtbl_dlg_all_{{ oUIBlock.GetTableId() }}">{{ 'UI:ForAllLists'|dict_s }}</label>
+                    </div>
+                </div>
             </div>
         </div>
     </form>
diff --git a/templates/base/components/datatable/layout.ready.js.twig b/templates/base/components/datatable/layout.ready.js.twig
index 887370c4d..2588bcc9d 100644
--- a/templates/base/components/datatable/layout.ready.js.twig
+++ b/templates/base/components/datatable/layout.ready.js.twig
@@ -388,7 +388,23 @@ $('#datatable_dlg_{{ oUIBlock.GetId() }}').dialog(
                 {
                     $('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('onDlgCancel');
                 }
-            }
+            },
+            buttons: [
+                {
+                    text: "{{ 'UI:Button:Cancel'|dict_s }}",
+                    class: "ibo-is-alternative ibo-is-neutral",
+                    click: function() {
+                        $(this).dialog( "close" );
+                    }
+                },
+                {
+                    text: "{{ 'UI:Button:Ok'|dict_s }}",
+                    class: "ibo-is-regular ibo-is-primary",
+                    click: function() {
+                        $(this).DataTableSettings('onDlgOk');
+                    }
+                }
+            ]
         });
 
 var aOptions{{ sListIDForVarSuffix }} = {