diff --git a/client/src/ui.js b/client/src/ui.js
index 0bdd6aa8f7..24191113b4 100644
--- a/client/src/ui.js
+++ b/client/src/ui.js
@@ -62,7 +62,8 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
      * @typedef {Object} module:ui.Dialog~Button
      *
      * @property {string} name A name.
-     * @property {boolean} [pullLeft=false] To put the button to the other side.
+     * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
+     * @property {'left'|'right'} [position='left'] A position.
      * @property {string} [html] HTML.
      * @property {string} [text] A text.
      * @property {boolean} [disabled=false] Disabled.
@@ -452,7 +453,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
                 $button.html(o.html);
             }
 
-            if (o.pullLeft) {
+            if (o.pullLeft || o.position === 'right') {
                 $additional.append($button);
 
                 return;
@@ -784,7 +785,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
                                 dialog.close();
                             },
                             style: confirmStyle,
-                            pullLeft: true,
+                            position: 'right',
                         },
                         {
                             text: cancelText,
@@ -796,7 +797,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
                                 dialog.close();
                                 processCancel();
                             },
-                            pullRight: true,
+                            position: 'left',
                         }
                     ],
                     onClose: () => {
diff --git a/client/src/views/email/modals/detail.js b/client/src/views/email/modals/detail.js
index da80c36235..2da12428b9 100644
--- a/client/src/views/email/modals/detail.js
+++ b/client/src/views/email/modals/detail.js
@@ -33,12 +33,13 @@ define('views/email/modals/detail', ['views/modals/detail', 'views/email/detail'
         setup: function () {
             Dep.prototype.setup.call(this);
 
-            this.buttonList.unshift({
-                'name': 'reply',
-                'label': 'Reply',
-                'hidden': this.model && this.model.get('status') === 'Draft',
+            this.addButton({
+                name: 'reply',
+                label: 'Reply',
+                hidden: this.model && this.model.get('status') === 'Draft',
                 style: 'danger',
-            });
+                position: 'right',
+            }, true)
 
             if (this.model) {
                 this.listenToOnce(this.model, 'sync', () => {
diff --git a/client/src/views/modal.js b/client/src/views/modal.js
index f30b79f043..52166d49ae 100644
--- a/client/src/views/modal.js
+++ b/client/src/views/modal.js
@@ -59,7 +59,8 @@ define('views/modal', ['view'], function (Dep) {
          *   (with a scope defined in the `scope` class property).
          * @property {string} [text] A text (not translated).
          * @property {string} [html] HTML.
-         * @property {boolean} [pullLeft=false] To put the button to the other side.
+         * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
+         * @property {'left'|'right'} [position='left'] A position.
          * @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
          * @property {boolean} [hidden=false] Is hidden.
          * @property {boolean} [disabled=false] Disabled.
@@ -592,7 +593,7 @@ define('views/modal', ['view'], function (Dep) {
         /**
          * Add a button.
          *
-         * @param {module:ui.Dialog~Button} o Button definitions.
+         * @param {module:views/modal.Class~Button} o Button definitions.
          * @param {boolean|string} [position=false] True prepends, false appends. If a string,
          *   then will be added after a button with a corresponding name.
          * @param {boolean} [doNotReRender=false] Do not re-render.
@@ -640,7 +641,7 @@ define('views/modal', ['view'], function (Dep) {
         /**
          * Add a dropdown item.
          *
-         * @param {module:ui.Dialog~Button} o Button definitions.
+         * @param {module:views/modal.Class~Button} o Button definitions.
          * @param {boolean} [toBeginning=false] To prepend.
          * @param {boolean} [doNotReRender=false] Do not re-render.
          */
@@ -1002,6 +1003,14 @@ define('views/modal', ['view'], function (Dep) {
          * @private
          */
         adjustButtons: function () {
+            this.adjustLeftButtons();
+            this.adjustRightButtons();
+        },
+
+        /**
+         * @private
+         */
+        adjustLeftButtons: function () {
             let $buttons = this.$el.find('footer.modal-footer > .main-btn-group button.btn');
 
             $buttons
@@ -1014,6 +1023,27 @@ define('views/modal', ['view'], function (Dep) {
             $buttonsVisible.last().addClass('radius-right');
         },
 
+        /**
+         * @private
+         */
+        adjustRightButtons: function () {
+            let $buttons = this.$el.find('footer.modal-footer > .additional-btn-group button.btn:not(.btn-text)');
+
+            $buttons
+                .removeClass('radius-left')
+                .removeClass('radius-right')
+                .removeClass('margin-right');
+
+            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+            $buttonsVisible.first().addClass('radius-left');
+            $buttonsVisible.last().addClass('radius-right');
+
+            if ($buttonsVisible.last().next().hasClass('btn-text')) {
+                $buttonsVisible.last().addClass('margin-right');
+            }
+        },
+
         /**
          * @protected
          */
diff --git a/client/src/views/modals/detail.js b/client/src/views/modals/detail.js
index 2669a61756..08e874e5e0 100644
--- a/client/src/views/modals/detail.js
+++ b/client/src/views/modals/detail.js
@@ -149,7 +149,7 @@ define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], func
                     name: 'previous',
                     html: '<span class="fas fa-chevron-left"></span>',
                     title: this.translate('Previous Entry'),
-                    pullLeft: true,
+                    position: 'right',
                     className: 'btn-icon',
                     style: 'text',
                     disabled: true,
@@ -159,7 +159,7 @@ define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], func
                     name: 'next',
                     html: '<span class="fas fa-chevron-right"></span>',
                     title: this.translate('Next Entry'),
-                    pullLeft: true,
+                    position: 'right',
                     className: 'btn-icon',
                     style: 'text',
                     disabled: true,
diff --git a/frontend/less/espo-rtl/custom.less b/frontend/less/espo-rtl/custom.less
index bb15834c17..e7956fcf34 100644
--- a/frontend/less/espo-rtl/custom.less
+++ b/frontend/less/espo-rtl/custom.less
@@ -357,40 +357,50 @@ table.table-admin-panel tr > td:first-child > div > a {
 }
 
 .btn {
- &.radius-right {
-     border-top-left-radius: var(--border-radius) !important;
-     border-bottom-left-radius: var(--border-radius) !important;
- }
+    &.radius-right {
+        border-top-left-radius: var(--border-radius) !important;
+        border-bottom-left-radius: var(--border-radius) !important;
+    }
 
- &.radius-left {
-     border-top-right-radius: var(--border-radius) !important;
-     border-bottom-right-radius: var(--border-radius) !important;
- }
+    &.radius-left {
+        border-top-right-radius: var(--border-radius) !important;
+        border-bottom-right-radius: var(--border-radius) !important;
+    }
+
+    &.margin-right {
+        margin-left: @padding-base-horizontal;
+        margin-right: 0;
+    }
+
+    &.margin-left {
+        margin-right: @padding-base-horizontal;
+        margin-left: 0;
+    }
 }
 
 .table {
- > thead,
- > tbody {
-     > tr {
-         > th:first-child,
-         > td:first-child {
-             padding-right: @padding-base-horizontal;
+    > thead,
+    > tbody {
+        > tr {
+        > th:first-child,
+        > td:first-child {
+            padding-right: @padding-base-horizontal;
 
-             @media screen and (max-width: (@screen-sm-min - 1px)) {
-                 padding-right: @table-cell-padding;
-             }
-         }
+            @media screen and (max-width: (@screen-sm-min - 1px)) {
+                padding-right: @table-cell-padding;
+            }
+        }
 
-         > th:last-child,
-         > td:last-child {
-             padding-left: @padding-base-horizontal;
+        > th:last-child,
+        > td:last-child {
+            padding-left: @padding-base-horizontal;
 
-             @media screen and (max-width: (@screen-sm-min - 1px)) {
-                 padding-left: @table-cell-padding;
-             }
-         }
-     }
- }
+                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                    padding-left: @table-cell-padding;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (min-width: @screen-sm-min) {
diff --git a/frontend/less/espo/elements/buttons.less b/frontend/less/espo/elements/buttons.less
index c572f5cd25..5d1cc6852e 100644
--- a/frontend/less/espo/elements/buttons.less
+++ b/frontend/less/espo/elements/buttons.less
@@ -10,6 +10,14 @@
         border-top-left-radius: var(--border-radius) !important;
         border-bottom-left-radius: var(--border-radius) !important;
     }
+
+    &.margin-right {
+        margin-right: @padding-base-horizontal;
+    }
+
+    &.margin-left {
+        margin-left: @padding-base-horizontal;
+    }
 }
 
 .btn {