diff --git a/client/src/views/settings/modals/edit-tab-group.js b/client/src/views/settings/modals/edit-tab-group.js
index e663bf5490..2df1239e5d 100644
--- a/client/src/views/settings/modals/edit-tab-group.js
+++ b/client/src/views/settings/modals/edit-tab-group.js
@@ -26,106 +26,106 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/settings/modals/edit-tab-group', ['views/modal', 'model'], function (Dep, Model) {
+import Modal from 'views/modal';
+import Model from 'model';
 
-    return Dep.extend({
+class SettingsEditTabGroupModalView extends Modal {
 
-        className: 'dialog dialog-record',
+    className = 'dialog dialog-record'
 
-        templateContent: '<div class="record no-side-margin">{{{record}}}</div>',
+    templateContent = `<div class="record no-side-margin">{{{record}}}</div>`
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+    setup() {
+        super.setup();
 
-            this.headerText = this.translate('Group Tab', 'labels', 'Settings');
+        this.headerText = this.translate('Group Tab', 'labels', 'Settings');
 
-            this.buttonList.push({
-                name: 'apply',
-                label: 'Apply',
-                style: 'danger',
-            });
+        this.buttonList.push({
+            name: 'apply',
+            label: 'Apply',
+            style: 'danger',
+        });
 
-            this.buttonList.push({
-                name: 'cancel',
-                label: 'Cancel',
-            });
+        this.buttonList.push({
+            name: 'cancel',
+            label: 'Cancel',
+        });
 
-            this.shortcutKeys = {
-                'Control+Enter': () => this.actionApply(),
-            };
+        this.shortcutKeys = {
+            'Control+Enter': () => this.actionApply(),
+        };
 
-            var detailLayout = [
-                {
-                    rows: [
-                        [
-                            {
-                                name: 'text',
-                                labelText: this.translate('label', 'fields', 'Admin'),
-                            },
-                            {
-                                name: 'iconClass',
-                                labelText: this.translate('iconClass', 'fields', 'EntityManager'),
-                            },
-                            {
-                                name: 'color',
-                                labelText: this.translate('color', 'fields', 'EntityManager'),
-                            },
-                        ],
-                        [
-                            {
-                                name: 'itemList',
-                                labelText: this.translate('tabList', 'fields', 'Settings'),
-                            },
-                            false
-                        ]
+        const detailLayout = [
+            {
+                rows: [
+                    [
+                        {
+                            name: 'text',
+                            labelText: this.translate('label', 'fields', 'Admin'),
+                        },
+                        {
+                            name: 'iconClass',
+                            labelText: this.translate('iconClass', 'fields', 'EntityManager'),
+                        },
+                        {
+                            name: 'color',
+                            labelText: this.translate('color', 'fields', 'EntityManager'),
+                        },
+                    ],
+                    [
+                        {
+                            name: 'itemList',
+                            labelText: this.translate('tabList', 'fields', 'Settings'),
+                        },
+                        false
                     ]
-                }
-            ];
-
-            var model = this.model = new Model();
-
-            model.name = 'GroupTab';
-
-            model.set(this.options.itemData);
-
-            model.setDefs({
-                fields: {
-                    text: {
-                        type: 'varchar',
-                    },
-                    iconClass: {
-                        type: 'base',
-                        view: 'views/admin/entity-manager/fields/icon-class',
-                    },
-                    color: {
-                        type: 'base',
-                        view: 'views/fields/colorpicker',
-                    },
-                    itemList: {
-                        type: 'array',
-                        view: 'views/settings/fields/group-tab-list',
-                    },
-                },
-            });
-
-            this.createView('record', 'views/record/edit-for-modal', {
-                detailLayout: detailLayout,
-                model: model,
-                selector: '.record',
-            });
-        },
-
-        actionApply: function () {
-            var recordView = this.getView('record');
-
-            if (recordView.validate()) {
-                return;
+                ]
             }
+        ];
 
-            var data = recordView.fetch();
+        const model = this.model = new Model();
 
-            this.trigger('apply', data);
-        },
+        model.name = 'GroupTab';
+        model.set(this.options.itemData);
 
-    });
-});
+        model.setDefs({
+            fields: {
+                text: {
+                    type: 'varchar',
+                },
+                iconClass: {
+                    type: 'base',
+                    view: 'views/admin/entity-manager/fields/icon-class',
+                },
+                color: {
+                    type: 'base',
+                    view: 'views/fields/colorpicker',
+                },
+                itemList: {
+                    type: 'array',
+                    view: 'views/settings/fields/group-tab-list',
+                },
+            },
+        });
+
+        this.createView('record', 'views/record/edit-for-modal', {
+            detailLayout: detailLayout,
+            model: model,
+            selector: '.record',
+        });
+    }
+
+    actionApply() {
+        const recordView = /** @type {import('views/record/edit').default} */this.getView('record');
+
+        if (recordView.validate()) {
+            return;
+        }
+
+        const data = recordView.fetch();
+
+        this.trigger('apply', data);
+    }
+}
+
+export default SettingsEditTabGroupModalView;