diff --git a/test/demo/m2/README.md b/test/demo/m2/README.md
index 881cfbdb..84028718 100644
--- a/test/demo/m2/README.md
+++ b/test/demo/m2/README.md
@@ -10,12 +10,10 @@ http://showcase.iiif.io/viewer/mirador/
 
 ## To Do
 
-* Detail images overlaid on the page
 * Cropped images
 
 ### Maybe
 
-* Alternates: align with default image
 * Alternates: wait until tiles have loaded before switching
 * Show/hide pages?
 * Lazyloading tilesources?
diff --git a/test/demo/m2/js/main.js b/test/demo/m2/js/main.js
index e14dcb45..cf1e1a3f 100644
--- a/test/demo/m2/js/main.js
+++ b/test/demo/m2/js/main.js
@@ -11,7 +11,7 @@
             this.mode = 'none';
             this.pageBuffer = 0.05;
             this.bigBuffer = 0.2;
-            this.page = 0;
+            this.pageIndex = 0;
             this.modeNames = [
                 'thumbs',
                 'scroll',
@@ -22,7 +22,7 @@
             this.pages = this.createPages();
 
             var tileSources = $.map(this.pages, function(v, i) {
-                return v.tileSource;
+                return v.starter.tileSource;
             });
 
             this.viewer = OpenSeadragon({
@@ -37,7 +37,8 @@
                 self.$el = $(self.viewer.element);
 
                 $.each(self.pages, function(i, v) {
-                    v.tiledImage = self.viewer.world.getItemAt(i);
+                    v.setTiledImage(self.viewer.world.getItemAt(i));
+                    v.addDetails();
                 });
 
                 self.setMode({
@@ -50,7 +51,7 @@
                 if (self.mode === 'scroll') {
                     var result = self.hitTest(self.viewer.viewport.getCenter());
                     if (result) {
-                        self.page = result.index;
+                        self.pageIndex = result.index;
                         self.update();
                     }
                 }
@@ -116,7 +117,7 @@
                     if (result) {
                         self.setMode({
                             mode: 'page',
-                            page: result.index
+                            pageIndex: result.index
                         });
                     }
                 });
@@ -155,40 +156,39 @@
 
         // ----------
         next: function() {
-            var page = this.page + (this.mode === 'book' ? 2 : 1);
-            if (this.mode === 'book' && page % 2 === 0 && page !== 0) {
-                page --;
+            var pageIndex = this.pageIndex + (this.mode === 'book' ? 2 : 1);
+            if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
+                pageIndex --;
             }
 
             this.goToPage({
-                page: page
+                pageIndex: pageIndex
             });
         },
 
         // ----------
         previous: function() {
-            var page = this.page - (this.mode === 'book' ? 2 : 1);
-            if (this.mode === 'book' && page % 2 === 0 && page !== 0) {
-                page --;
+            var pageIndex = this.pageIndex - (this.mode === 'book' ? 2 : 1);
+            if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
+                pageIndex --;
             }
 
             this.goToPage({
-                page: page
+                pageIndex: pageIndex
             });
         },
 
         // ----------
         hitTest: function(pos) {
-            var count = this.viewer.world.getItemCount();
-            var item, box;
+            var count = this.pages.length;
+            var page, box;
 
             for (var i = 0; i < count; i++) {
-                item = this.viewer.world.getItemAt(i);
-                box = item.getBounds();
+                page = this.pages[i];
+                box = page.getBounds();
                 if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width &&
                         pos.y < box.y + box.height) {
                     return {
-                        item: item,
                         index: i
                     };
                 }
@@ -222,8 +222,8 @@
             var self = this;
 
             $('.nav').toggle(this.mode === 'scroll' || this.mode === 'book' || this.mode === 'page');
-            $('.previous').toggleClass('hidden', this.page <= 0);
-            $('.next').toggleClass('hidden', this.page >= this.viewer.world.getItemCount() - 1);
+            $('.previous').toggleClass('hidden', this.pageIndex <= 0);
+            $('.next').toggleClass('hidden', this.pageIndex >= this.pages.length - 1);
 
             $.each(this.modeNames, function(i, v) {
                 $('.' + v).toggleClass('active', v === self.mode);
@@ -235,7 +235,7 @@
                 this.$alternates = null;
             }
 
-            var page = this.pages[this.page];
+            var page = this.pages[this.pageIndex];
             if (page && page.alternates && page.alternates.length) {
                 this.$alternates = $('<select>')
                     .change(function() {
@@ -303,8 +303,8 @@
 
             this.mode = config.mode;
 
-            if (config.page !== undefined) {
-                this.page = config.page; // Need to do this before layout
+            if (config.pageIndex !== undefined) {
+                this.pageIndex = config.pageIndex; // Need to do this before layout
             }
 
             this.ignoreScroll = true;
@@ -354,9 +354,9 @@
                 viewportBounds.y += info.viewportMax * info.scrollFactor;
                 viewportBounds.height = info.viewportHeight;
 
-                var itemBounds = this.viewer.world.getItemAt(this.page).getBounds();
-                var top = itemBounds.y - this.bigBuffer;
-                var bottom = top + itemBounds.height + (this.bigBuffer * 2);
+                var pageBounds = this.pages[this.pageIndex].getBounds();
+                var top = pageBounds.y - this.bigBuffer;
+                var bottom = top + pageBounds.height + (this.bigBuffer * 2);
 
                 var normalY;
                 if (top < viewportBounds.y) {
@@ -394,8 +394,8 @@
                 return;
             }
 
-            var item = this.viewer.world.getItemAt(this.page);
-            var box = item.getBounds();
+            var page = this.pages[this.pageIndex];
+            var box = page.getBounds();
 
             this.highlight
                 .style('opacity', 1)
@@ -406,8 +406,8 @@
         },
 
         // ----------
-        updateHover: function(page) {
-            if (page === -1 || this.mode !== 'thumbs') {
+        updateHover: function(pageIndex) {
+            if (pageIndex === -1 || this.mode !== 'thumbs') {
                 this.hover.style('opacity', 0);
                 this.$scrollCover.css({
                     'cursor': 'default'
@@ -420,8 +420,8 @@
                 'cursor': 'pointer'
             });
 
-            var item = this.viewer.world.getItemAt(page);
-            var box = item.getBounds();
+            var page = this.pages[pageIndex];
+            var box = page.getBounds();
 
             this.hover
                 .style('opacity', 0.3)
@@ -435,12 +435,12 @@
         goToPage: function(config) {
             var self = this;
 
-            var itemCount = this.viewer.world.getItemCount();
-            this.page = Math.max(0, Math.min(itemCount - 1, config.page));
+            var pageCount = this.pages.length;
+            this.pageIndex = Math.max(0, Math.min(pageCount - 1, config.pageIndex));
 
             var viewerWidth = this.$el.width();
             var viewerHeight = this.$el.height();
-            var bounds = this.viewer.world.getItemAt(this.page).getBounds();
+            var bounds = this.pages[this.pageIndex].getBounds();
             var x = bounds.x;
             var y = bounds.y;
             var width = bounds.width;
@@ -448,16 +448,16 @@
             var box;
 
             if (this.mode === 'book') {
-                var item;
-                if (this.page % 2) { // First in a pair
-                    item = this.viewer.world.getItemAt(this.page + 1);
-                    if (item) {
-                        width += item.getBounds().width;
+                var page;
+                if (this.pageIndex % 2) { // First in a pair
+                    if (this.pageIndex < this.pages.length - 1) {
+                        page = this.pages[this.pageIndex + 1];
+                        width += page.getBounds().width;
                     }
                 } else {
-                    item = this.viewer.world.getItemAt(this.page - 1);
-                    if (item) {
-                        box = item.getBounds();
+                    if (this.pageIndex > 0) {
+                        page = this.pages[this.pageIndex - 1];
+                        box = page.getBounds();
                         x -= box.width;
                         width += box.width;
                     }
@@ -470,10 +470,10 @@
             height += (this.pageBuffer * 2);
 
             if (this.mode === 'scroll') {
-                if (this.page === 0) {
+                if (this.pageIndex === 0) {
                     x = bounds.x - this.pageBuffer;
                     width = height * (viewerWidth / viewerHeight);
-                } else if (this.page === this.viewer.world.getItemCount() - 1) {
+                } else if (this.pageIndex === this.pages.length - 1) {
                     width = height * (viewerWidth / viewerHeight);
                     x = (bounds.x + bounds.width + this.pageBuffer) - width;
                 }
@@ -488,8 +488,8 @@
                 if (self.mode === 'page' || self.mode === 'book') {
                     self.panBounds = box;
                 } else if (self.mode === 'scroll') {
-                    self.panBounds = self.viewer.world.getItemAt(0).getBounds()
-                        .union(self.viewer.world.getItemAt(itemCount - 1).getBounds());
+                    self.panBounds = self.pages[0].getBounds()
+                        .union(self.pages[pageCount - 1].getBounds());
 
                     self.panBounds.x -= self.pageBuffer;
                     self.panBounds.y -= self.pageBuffer;
@@ -535,17 +535,17 @@
                 specs: []
             };
 
-            var count = this.viewer.world.getItemCount();
+            var count = this.pages.length;
             var x = 0;
             var y = 0;
             var offset = new OpenSeadragon.Point();
             var rowHeight = 0;
-            var item, box;
+            var box, page;
             for (var i = 0; i < count; i++) {
-                item = this.viewer.world.getItemAt(i);
-                box = item.getBounds();
+                page = this.pages[i];
+                box = page.getBounds();
 
-                if (i === this.page) {
+                if (i === this.pageIndex) {
                     offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y));
                 }
 
@@ -562,7 +562,7 @@
                 rowHeight = Math.max(rowHeight, box.height);
 
                 layout.specs.push({
-                    item: item,
+                    page: page,
                     bounds: box
                 });
 
@@ -602,8 +602,7 @@
 
             for (var i = 0; i < config.layout.specs.length; i++) {
                 spec = config.layout.specs[i];
-                spec.item.setPosition(spec.bounds.getTopLeft(), config.immediately);
-                spec.item.setWidth(spec.bounds.width, config.immediately);
+                spec.page.place(spec.bounds, config.immediately);
             }
         },
 
@@ -621,7 +620,7 @@
                 this.viewer.viewport.fitBounds(box, config.immediately);
             } else {
                 this.goToPage({
-                    page: this.page,
+                    pageIndex: this.pageIndex,
                     immediately: config.immediately
                 });
             }
diff --git a/test/demo/m2/js/page.js b/test/demo/m2/js/page.js
index 6468b513..a812d38d 100644
--- a/test/demo/m2/js/page.js
+++ b/test/demo/m2/js/page.js
@@ -1,17 +1,48 @@
-/* global App */
+/* global App, $ */
 (function() {
 
     // ----------
     var component = App.Page = function(config) {
         this.label = config.label;
-        this.tileSource = config.tileSource;
         this.alternates = config.alternates;
         this.pageIndex = config.pageIndex;
+        this.details = config.details;
+
+        if (config.masterWidth && config.masterHeight) {
+            this.bounds = new OpenSeadragon.Rect(0, 0, config.masterWidth, config.masterHeight);
+        }
+
+        this.starter = {
+            x: config.x,
+            y: config.y,
+            width: config.width,
+            tileSource: config.tileSource
+        };
+
+        this.main = {};
+
         this.alternateIndex = -1;
     };
 
     // ----------
     component.prototype = {
+        // ----------
+        setTiledImage: function(tiledImage) {
+            this.setDetail(this.main, this.starter, tiledImage);
+
+            if (!this.bounds) {
+                this.bounds = this.main.tiledImage.getBounds();
+            }
+        },
+
+        // ----------
+        setDetail: function(detail, info, tiledImage) {
+            detail.tiledImage = tiledImage;
+            detail.x = info.x || 0;
+            detail.y = info.y || 0;
+            detail.width = info.width || 1;
+        },
+
         // ----------
         selectAlternate: function(index) {
             var self = this;
@@ -20,24 +51,70 @@
                 return;
             }
 
-            var tileSource = (index === -1 ? this.tileSource : this.alternates[index].tileSource);
+            var itemInfo = (index === -1 ? this.starter : this.alternates[index]);
 
-            var tiledImage = App.viewer.world.getItemAt(this.pageIndex);
-            var bounds = tiledImage.getBounds();
-
-            App.viewer.world.removeItem(tiledImage);
+            App.viewer.world.removeItem(this.main.tiledImage);
             App.viewer.addTiledImage({
-                tileSource: tileSource,
-                x: bounds.x,
-                y: bounds.y,
-                height: bounds.height,
+                tileSource: itemInfo.tileSource,
                 index: this.pageIndex,
                 success: function(event) {
-                    self.tiledImage = event.item;
+                    self.setDetail(self.main, itemInfo, event.item);
+                    self.placeDetail(self.main, true);
                 }
             });
 
             this.alternateIndex = index;
+        },
+
+        // ----------
+        addDetails: function() {
+            var self = this;
+
+            if (!this.details) {
+                return;
+            }
+
+            $.each(this.details, function(i, v) {
+                App.viewer.addTiledImage({
+                    tileSource: v.tileSource,
+                    success: function(event) {
+                        v.tiledImage = event.item;
+                        self.placeDetail(v, true);
+                    }
+                });
+            });
+        },
+
+        // ----------
+        getBounds: function() {
+            return this.bounds.clone();
+        },
+
+        // ----------
+        place: function(bounds, immediately) {
+            var self = this;
+
+            this.bounds = bounds.clone();
+
+            this.placeDetail(this.main, immediately);
+
+            if (this.details) {
+                $.each(this.details, function(i, v) {
+                    if (v.tiledImage) {
+                        self.placeDetail(v, immediately);
+                    }
+                });
+            }
+        },
+
+        // ----------
+        placeDetail: function(detail, immediately) {
+            var position = new OpenSeadragon.Point(
+                this.bounds.x + (this.bounds.width * detail.x),
+                this.bounds.y + (this.bounds.width * detail.y));
+
+            detail.tiledImage.setPosition(position, immediately);
+            detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
         }
     };