diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts
index d544810bb..2741e4866 100644
--- a/src/canvas/model/Canvas.ts
+++ b/src/canvas/model/Canvas.ts
@@ -9,7 +9,7 @@ export default class Canvas extends Backbone.Model {
   defaults() {
     return {
       frame: "",
-      frames: "",
+      frames: new Frames(),
       rulers: false,
       zoom: 100,
       x: 0,
@@ -28,7 +28,6 @@ export default class Canvas extends Backbone.Model {
     const { em } = config;
     this.config = config;
     this.em = em;
-    this.set("frames", new Frames(undefined, { em }));
     this.listenTo(this, "change:zoom", this.onZoomChange);
     this.listenTo(em, "change:device", this.updateDevice);
     this.listenTo(em, evPageSelect, this._pageUpdated);
diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js
deleted file mode 100644
index 3678a4d6a..000000000
--- a/src/canvas/model/Frames.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { expectation } from 'sinon';
-import { bindAll } from 'underscore';
-import { Collection } from '../../common';
-import Frame from './Frame';
-
-export default class Frames extends Collection {
-  constructor(models, config = {}) {
-    super(models);
-    bindAll(this, 'itemLoaded');
-    this.config = config;
-    this.on('reset', this.onReset);
-    this.on('remove', this.onRemove);
-  }
-  page;
-
-  onReset(m, opts = {}) {
-    const prev = opts.previousModels || [];
-    prev.map(p => this.onRemove(p));
-  }
-
-  onRemove(removed) {
-    removed && removed.onRemove();
-  }
-
-  itemLoaded() {
-    this.loadedItems++;
-
-    if (this.loadedItems >= this.itemsToLoad) {
-      this.trigger('loaded:all');
-      this.listenToLoadItems(0);
-    }
-  }
-
-  listenToLoad() {
-    this.loadedItems = 0;
-    this.itemsToLoad = this.length;
-    this.listenToLoadItems(1);
-  }
-
-  listenToLoadItems(on) {
-    this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
-  }
-
-  /*add(m, o = {}) {
-    const { config } = this;
-    return Collection.prototype.add.call(this, m, { ...o, config });
-  }*/
-}
-
-Frames.prototype.model = Frame;
diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts
new file mode 100644
index 000000000..bad60196f
--- /dev/null
+++ b/src/canvas/model/Frames.ts
@@ -0,0 +1,45 @@
+import { bindAll } from "underscore";
+import { Collection } from "../../common";
+import Page from "../../pages/model/Page";
+import Frame from "./Frame";
+
+export default class Frames extends Collection<Frame> {
+  loadedItems = 0;
+  itemsToLoad = 0;
+  page?: Page;
+
+  constructor(models?: Frame[]) {
+    super(models);
+    bindAll(this, "itemLoaded");
+    this.on("reset", this.onReset);
+    this.on("remove", this.onRemove);
+  }
+
+  onReset(m: Frame, opts?: { previousModels?: Frame[] }) {
+    const prev = opts?.previousModels || [];
+    prev.map((p) => this.onRemove(p));
+  }
+
+  onRemove(removed?: Frame) {
+    removed?.onRemove();
+  }
+
+  itemLoaded() {
+    this.loadedItems++;
+
+    if (this.loadedItems >= this.itemsToLoad) {
+      this.trigger("loaded:all");
+      this.listenToLoadItems(false);
+    }
+  }
+
+  listenToLoad() {
+    this.loadedItems = 0;
+    this.itemsToLoad = this.length;
+    this.listenToLoadItems(true);
+  }
+
+  listenToLoadItems(on: boolean) {
+    this.forEach((item) => item[on ? "on" : "off"]("loaded", this.itemLoaded));
+  }
+}