diff --git a/client/src/views/admin/layouts/side-panels-detail.js b/client/src/views/admin/layouts/side-panels-detail.js
index 0e650b48d4..625742aa51 100644
--- a/client/src/views/admin/layouts/side-panels-detail.js
+++ b/client/src/views/admin/layouts/side-panels-detail.js
@@ -30,13 +30,16 @@ Espo.define('views/admin/layouts/side-panels-detail', 'views/admin/layouts/rows'
 
     return Dep.extend({
 
-        dataAttributeList: ['name', 'style'],
+        dataAttributeList: ['name', 'style', 'sticked'],
 
         dataAttributesDefs: {
             style: {
                 type: 'enum',
                 options: ['default', 'success', 'danger', 'primary', 'info', 'warning'],
                 translation: 'LayoutManager.options.style'
+            },
+            sticked: {
+                type: 'bool'
             }
         },
 
@@ -85,7 +88,7 @@ Espo.define('views/admin/layouts/side-panels-detail', 'views/admin/layouts/rows'
 
             this.rowLayout = [];
 
-            panelListAll.forEach(function (item) {
+            panelListAll.forEach(function (item, index) {
                 var disabled = false;
                 var itemData = layout[item] || {};
                 if (itemData.disabled) {
@@ -120,12 +123,15 @@ Espo.define('views/admin/layouts/side-panels-detail', 'views/admin/layouts/rows'
                     for (var i in itemData) {
                         o[i] = itemData[i];
                     }
+                    o.index = ('index' in itemData) ? itemData.index : index;
                     this.rowLayout.push(o);
                 }
             }, this);
+            this.rowLayout.sort(function (v1, v2) {
+                return v1.index > v2.index;
+            });
         },
 
-
         fetch: function () {
             var layout = {};
             $("#layout ul.disabled > li").each(function (i, el) {
@@ -146,6 +152,7 @@ Espo.define('views/admin/layouts/side-panels-detail', 'views/admin/layouts/rows'
                     var value = $el.data(Espo.Utils.toDom(attribute)) || null;
                     o[attribute] = value;
                 });
+                o.index = i;
 
                 layout[name] = o;
             }.bind(this))
diff --git a/client/src/views/record/detail-side.js b/client/src/views/record/detail-side.js
index 533f9aa364..072bfccc7c 100644
--- a/client/src/views/record/detail-side.js
+++ b/client/src/views/record/detail-side.js
@@ -155,7 +155,8 @@ Espo.define('views/record/detail-side', 'view', function (Dep) {
             layoutData = layoutData || {};
 
             var newList = [];
-            this.panelList.forEach(function (item) {
+            this.panelList.forEach(function (item, i) {
+                item.index = i;
                 if (item.name) {
                     var itemData = layoutData[item.name] || {};
                     if (itemData.disabled) return;
@@ -163,9 +164,14 @@ Espo.define('views/record/detail-side', 'view', function (Dep) {
                         item[i] = itemData[i];
                     }
                 }
+
                 newList.push(item);
             }, this);
 
+            newList.sort(function (v1, v2) {
+                return v1.index > v2.index;
+            });
+
             this.panelList = newList;
         },