diff --git a/src/panels/index.js b/src/panels/index.ts
similarity index 90%
rename from src/panels/index.js
rename to src/panels/index.ts
index f4f55dfa2..97ba4287c 100644
--- a/src/panels/index.js
+++ b/src/panels/index.ts
@@ -25,36 +25,30 @@
  *
  * @module Panels
  */
+import { Module } from '../abstract';
+import EditorModel from '../editor/model/Editor';
 import defaults from './config/config';
 import Panel from './model/Panel';
 import Panels from './model/Panels';
 import PanelsView from './view/PanelsView';
 
-export default class PanelsManager {
-  /**
-   * Name of the module
-   * @type {String}
-   * @private
-   */
-  name = 'Panels';
-
-  config = {};
+export default class PanelsManager extends Module<typeof defaults> {
+  //config = {};
+  panels: Panels;
+  PanelsViewObj?: PanelsView;
 
   /**
    * Initialize module. Automatically called with a new instance of the editor
    * @param {Object} config Configurations
    * @private
    */
-  init(config) {
-    this.config = config || {};
+  constructor(em: EditorModel) {
+    super(em, 'Panels', defaults);
+    this.panels = new Panels(this.config.defaults);
     for (var name in defaults) {
+      //@ts-ignore
       if (!(name in this.config)) this.config[name] = defaults[name];
     }
-
-    var ppfx = this.config.pStylePrefix;
-    if (ppfx) this.config.stylePrefix = ppfx + this.config.stylePrefix;
-
-    this.panels = new Panels(this.config.defaults);
     return this;
   }
 
@@ -85,7 +79,7 @@ export default class PanelsManager {
    *  buttons  : [...],
    * });
    */
-  addPanel(panel) {
+  addPanel(panel: Panel) {
     return this.panels.add(panel);
   }
 
@@ -103,7 +97,7 @@ export default class PanelsManager {
    * const newPanel = panelManager.removePanel('myNewPanel');
    *
    */
-  removePanel(panel) {
+  removePanel(panel: Panel) {
     return this.panels.remove(panel);
   }
 
@@ -114,7 +108,7 @@ export default class PanelsManager {
    * @example
    * var myPanel = panelManager.getPanel('myNewPanel');
    */
-  getPanel(id) {
+  getPanel(id: string) {
     var res = this.panels.where({ id });
     return res.length ? res[0] : null;
   }
@@ -149,7 +143,7 @@ export default class PanelsManager {
    *   ...
    * }
    */
-  addButton(panelId, button) {
+  addButton(panelId: string, button: any) {
     var pn = this.getPanel(panelId);
     return pn ? pn.get('buttons').add(button) : null;
   }
@@ -171,7 +165,7 @@ export default class PanelsManager {
    * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
    *
    */
-  removeButton(panelId, button) {
+  removeButton(panelId: string, button: any) {
     var pn = this.getPanel(panelId);
     return pn && pn.get('buttons').remove(button);
   }
@@ -184,7 +178,7 @@ export default class PanelsManager {
    * @example
    * var button = panelManager.getButton('myPanel','myButton');
    */
-  getButton(panelId, id) {
+  getButton(panelId: string, id: string) {
     var pn = this.getPanel(panelId);
     if (pn) {
       var res = pn.get('buttons').where({ id });
@@ -202,6 +196,7 @@ export default class PanelsManager {
     this.PanelsViewObj && this.PanelsViewObj.remove();
     this.PanelsViewObj = new PanelsView({
       collection: this.panels,
+      //@ts-ignore
       config: this.config,
     });
     return this.PanelsViewObj.render().el;
@@ -213,6 +208,7 @@ export default class PanelsManager {
    */
   active() {
     this.getPanels().each(p => {
+      //@ts-ignore
       p.get('buttons').each(btn => {
         btn.get('active') && btn.trigger('updateActive');
       });
@@ -225,6 +221,7 @@ export default class PanelsManager {
    */
   disableButtons() {
     this.getPanels().each(p => {
+      //@ts-ignore
       p.get('buttons').each(btn => {
         if (btn.get('disable')) btn.trigger('change:disable');
       });
@@ -235,6 +232,5 @@ export default class PanelsManager {
     this.panels.reset();
     this.panels.stopListening();
     this.PanelsViewObj && this.PanelsViewObj.remove();
-    [this.config, this.panels, this.PanelsViewObj].forEach(i => (i = {}));
   }
 }
diff --git a/src/panels/model/Button.js b/src/panels/model/Button.ts
similarity index 87%
rename from src/panels/model/Button.js
rename to src/panels/model/Button.ts
index efd6885d3..71c6e3967 100644
--- a/src/panels/model/Button.js
+++ b/src/panels/model/Button.ts
@@ -1,4 +1,5 @@
 import { Model } from '../../common';
+import Buttons from './Buttons';
 
 export default class Button extends Model {
   defaults() {
@@ -21,9 +22,9 @@ export default class Button extends Model {
     };
   }
 
-  initialize(options) {
+  constructor(options: any) {
+    super(options);
     if (this.get('buttons').length) {
-      var Buttons = require('./Buttons').default;
       this.set('buttons', new Buttons(this.get('buttons')));
     }
   }
diff --git a/src/panels/model/Buttons.js b/src/panels/model/Buttons.ts
similarity index 81%
rename from src/panels/model/Buttons.js
rename to src/panels/model/Buttons.ts
index 50535666a..ff430a352 100644
--- a/src/panels/model/Buttons.js
+++ b/src/panels/model/Buttons.ts
@@ -1,7 +1,7 @@
 import { Collection } from '../../common';
 import Button from './Button';
 
-export default class Buttons extends Collection {
+export default class Buttons extends Collection<Button> {
   /**
    * Deactivate all buttons, except one passed
    * @param  {Object}  except  Model to ignore
@@ -9,7 +9,7 @@ export default class Buttons extends Collection {
    *
    * @return  void
    * */
-  deactivateAllExceptOne(except, r) {
+  deactivateAllExceptOne(except: Button, r: boolean) {
     this.forEach((model, index) => {
       if (model !== except) {
         model.set('active', false);
@@ -24,11 +24,12 @@ export default class Buttons extends Collection {
    *
    * @return  void
    * */
-  deactivateAll(ctx, sender) {
+  deactivateAll(ctx?: string, sender?: any) {
     const context = ctx || '';
     this.forEach(model => {
       if (model.get('context') == context && model !== sender) {
-        model.set('active', false, { fromCollection: 1 });
+        //@ts-ignore
+        model.set('active', false, { fromCollection: true });
       }
     });
   }
@@ -39,7 +40,7 @@ export default class Buttons extends Collection {
    *
    * @return  void
    * */
-  disableAllButtons(ctx) {
+  disableAllButtons(ctx?: string) {
     var context = ctx || '';
     this.forEach((model, index) => {
       if (model.get('context') == context) {
@@ -55,7 +56,7 @@ export default class Buttons extends Collection {
    *
    * @return  void
    * */
-  disableAllButtonsExceptOne(except, r) {
+  disableAllButtonsExceptOne(except: Button, r: boolean) {
     this.forEach((model, index) => {
       if (model !== except) {
         model.set('disable', true);
diff --git a/src/panels/model/Panel.js b/src/panels/model/Panel.ts
similarity index 52%
rename from src/panels/model/Panel.js
rename to src/panels/model/Panel.ts
index ace772ecb..c88472e96 100644
--- a/src/panels/model/Panel.js
+++ b/src/panels/model/Panel.ts
@@ -12,9 +12,18 @@ export default class Panel extends Model {
     };
   }
 
-  initialize(options) {
-    this.btn = this.get('buttons') || [];
-    this.buttons = new Buttons(this.btn);
+  get buttons() {
+    return this.get('buttons');
+  }
+
+  private set buttons(buttons: Buttons) {
+    this.set('buttons', buttons);
+  }
+
+  constructor(options: any) {
+    super(options);
+    var btn = this.get('buttons') || [];
+    this.buttons = new Buttons(btn);
     this.set('buttons', this.buttons);
   }
 }
diff --git a/src/panels/model/Panels.js b/src/panels/model/Panels.ts
similarity index 65%
rename from src/panels/model/Panels.js
rename to src/panels/model/Panels.ts
index a5a0ceb4a..2c61d18dc 100644
--- a/src/panels/model/Panels.js
+++ b/src/panels/model/Panels.ts
@@ -1,6 +1,6 @@
 import { Collection } from '../../common';
 import Panel from './Panel';
 
-export default class Panels extends Collection {}
+export default class Panels extends Collection<Panel> {}
 
 Panels.prototype.model = Panel;
diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js
index cb8d96ac9..0ba6df7ec 100644
--- a/src/panels/view/ButtonView.js
+++ b/src/panels/view/ButtonView.js
@@ -110,7 +110,7 @@ export default class ButtonView extends View {
     }
 
     if (model.get('active')) {
-      !fromCollection && model.collection.deactivateAll(context, model);
+      !fromCollection && model.collection?.deactivateAll(context, model);
       model.set('active', true, { silent: true }).trigger('checkActive');
       !fromListen && commands.runCommand(command, { ...options, sender: model });
 
diff --git a/test/specs/panels/index.js b/test/specs/panels/index.js
index a1b33d799..a05fc7d24 100644
--- a/test/specs/panels/index.js
+++ b/test/specs/panels/index.js
@@ -1,12 +1,15 @@
 import Panels from 'panels';
 import Panel from 'panels/model/Panel';
+import Editor from 'editor/model/Editor';
 
 describe('Panels', () => {
   describe('Main', () => {
+    var em;
     var obj;
 
     beforeEach(() => {
-      obj = new Panels().init();
+      em = new Editor({});
+      obj = new Panels(em);
     });
 
     afterEach(() => {