diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js
index 2a2f6113f..5a5d10fb8 100644
--- a/src/canvas/model/Canvas.js
+++ b/src/canvas/model/Canvas.js
@@ -14,7 +14,7 @@ export default Backbone.Model.extend({
   initialize(config = {}) {
     const { em } = config;
     const { styles = [], scripts = [] } = config;
-    const mainPage = em.get('Pages').getMain();
+    const mainPage = em.get('PageManager').getMain();
     const frames = mainPage.getFrames();
     const frame =
       mainPage.getMainFrame() ||
diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js
index 91e35d7cc..5eae3b2b8 100644
--- a/src/canvas/model/Frame.js
+++ b/src/canvas/model/Frame.js
@@ -34,6 +34,7 @@ export default Backbone.Model.extend({
       this.set('styles', allRules);
     } else if (!isObject(styles)) {
       allRules.add(styles);
+      this.set('styles', allRules);
     }
   },
 
diff --git a/src/editor/index.js b/src/editor/index.js
index 16f96fe3a..7b2cb395a 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -153,10 +153,10 @@ export default (config = {}) => {
         'Panels',
         'Canvas',
         'Parser',
-        'Pages',
         'CodeManager',
         'UndoManager',
         'RichTextEditor',
+        ['Pages', 'PageManager'],
         'DomComponents',
         ['Components', 'DomComponents'],
         'LayerManager',
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 4925e6822..179957c8a 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -16,7 +16,6 @@ Backbone.$ = $;
 const deps = [
   require('utils'),
   require('i18n'),
-  require('pages'),
   require('keymaps'),
   require('undo_manager'),
   require('storage_manager'),
@@ -32,6 +31,7 @@ const deps = [
   require('css_composer'),
   require('trait_manager'),
   require('dom_components'),
+  require('pages'),
   require('navigator'),
   require('canvas'),
   require('commands'),
@@ -80,6 +80,7 @@ export default Backbone.Model.extend({
     this.set('storables', []);
     this.set('selected', new Collection());
     this.set('dmode', c.dragMode);
+    this.set('hasPages', !!c.pageManager);
     const el = c.el;
     const log = c.log;
     const toLog = log === true ? keys(logs) : isArray(log) ? log : [];
diff --git a/src/pages/index.js b/src/pages/index.js
index beac0b3fc..869ed21f3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,7 +9,7 @@ const typeMain = 'main';
 
 export default () => {
   return {
-    name: 'Pages',
+    name: 'PageManager',
 
     Page,
 
diff --git a/test/specs/pages/index.js b/test/specs/pages/index.js
new file mode 100644
index 000000000..901e4411c
--- /dev/null
+++ b/test/specs/pages/index.js
@@ -0,0 +1,130 @@
+import Editor from 'editor';
+
+describe('Pages', () => {
+  let editor;
+  let em;
+  let domc;
+  let initCmpLen;
+  let pm;
+
+  beforeAll(() => {
+    editor = new Editor();
+    em = editor.getModel();
+    domc = em.get('DomComponents');
+    pm = em.get('PageManager');
+    initCmpLen = Object.keys(domc.allById()).length;
+  });
+
+  afterAll(() => {
+    editor.destroy();
+    pm = 0;
+    em = 0;
+    domc = 0;
+  });
+
+  beforeEach(() => {});
+  afterEach(() => {});
+
+  test('Pages module exists', () => {
+    expect(pm).toBeTruthy();
+  });
+
+  test('Has by default one page created', () => {
+    expect(pm.getAll().length).toBe(1);
+  });
+
+  test('The default page is selected', () => {
+    expect(pm.getMain()).toBe(pm.getSelected());
+  });
+
+  test('The default page has one frame', () => {
+    expect(pm.getMain().getFrames().length).toBe(1);
+  });
+
+  test('The default frame has the wrapper component', () => {
+    const frame = pm
+      .getMain()
+      .getFrames()
+      .at(0);
+    const frameCmp = frame.getComponents();
+    expect(frameCmp.is('wrapper')).toBe(true);
+  });
+
+  test('The default wrapper has no content', () => {
+    const frame = pm
+      .getMain()
+      .getFrames()
+      .at(0);
+    const frameCmp = frame.getComponents();
+    expect(frameCmp.components().length).toBe(0);
+    expect(frame.getStyles().length).toBe(0);
+    expect(initCmpLen).toBe(1);
+  });
+
+  describe.only('Init with pages', () => {
+    let idPage1, idComp1, idComp2, comp1, comp2, initPages;
+    const createCompDef = id => ({
+      attributes: {
+        id,
+        class: id,
+        customattr: id
+      },
+      components: `Component ${id}`
+    });
+    beforeAll(() => {
+      idPage1 = 'page-1';
+      idComp1 = 'comp1';
+      idComp2 = 'comp2';
+      comp1 = createCompDef(idComp1);
+      comp2 = createCompDef(idComp2);
+      initPages = [
+        {
+          id: idPage1,
+          frames: [
+            {
+              components: [comp1],
+              styles: `#${idComp1} { color: red }`
+            }
+          ]
+        },
+        {
+          id: 'page-2',
+          frames: [
+            {
+              components: [comp2],
+              styles: `#${idComp2} { color: blue }`
+            }
+          ]
+        }
+      ];
+      editor = new Editor({
+        pages: {
+          pages: initPages
+        }
+      });
+      em = editor.getModel();
+      domc = em.get('DomComponents');
+      pm = em.get('PageManager');
+      initCmpLen = Object.keys(domc.allById()).length;
+    });
+
+    afterAll(() => {
+      editor.destroy();
+      pm = 0;
+      em = 0;
+      domc = 0;
+    });
+
+    test('Pages are created correctly', () => {
+      const pages = pm.getAll();
+      expect(pages.length).toBe(initPages.length);
+      pages.map(page => {
+        expect(page.get('id')).toBeTruthy();
+        // expect(page.getMainFrame().getComponents().get('type')).toBe('wrapper');
+      });
+    });
+    // test('Pages are created', () => {
+    //     expect(pm.getAll().length).toBe(initPages.length);
+    // });
+  });
+});