diff --git a/cms/djangoapps/contentstore/views/item.py b/cms/djangoapps/contentstore/views/item.py
index 3ec9b1429795..cc1c04c55e01 100644
--- a/cms/djangoapps/contentstore/views/item.py
+++ b/cms/djangoapps/contentstore/views/item.py
@@ -205,7 +205,7 @@ def xblock_view_handler(request, usage_key_string, view_name):
     if 'application/json' in accept_header:
         store = modulestore()
         xblock = store.get_item(usage_key)
-        container_views = ['container_preview', 'reorderable_container_child_preview']
+        container_views = ['container_preview', 'reorderable_container_child_preview', 'container_child_preview']
 
         # wrap the generated fragment in the xmodule_editor div so that the javascript
         # can bind to it correctly
@@ -237,12 +237,32 @@ def xblock_view_handler(request, usage_key_string, view_name):
             if view_name == 'reorderable_container_child_preview':
                 reorderable_items.add(xblock.location)
 
+            paging = None
+            try:
+                if request.REQUEST.get('enable_paging', 'false') == 'true':
+                    paging = {
+                        'page_number': int(request.REQUEST.get('page_number', 0)),
+                        'page_size': int(request.REQUEST.get('page_size', 0)),
+                    }
+            except ValueError:
+                return HttpResponse(
+                    content="Couldn't parse paging parameters: enable_paging: "
+                            "%s, page_number: %s, page_size: %s".format(
+                                request.REQUEST.get('enable_paging', 'false'),
+                                request.REQUEST.get('page_number', 0),
+                                request.REQUEST.get('page_size', 0)
+                            ),
+                    status=400,
+                    content_type="text/plain",
+                )
+
             # Set up the context to be passed to each XBlock's render method.
             context = {
                 'is_pages_view': is_pages_view,     # This setting disables the recursive wrapping of xblocks
                 'is_unit_page': is_unit(xblock),
                 'root_xblock': xblock if (view_name == 'container_preview') else None,
-                'reorderable_items': reorderable_items
+                'reorderable_items': reorderable_items,
+                'paging': paging,
             }
 
             fragment = get_preview_fragment(request, xblock, context)
diff --git a/cms/static/coffee/spec/main.coffee b/cms/static/coffee/spec/main.coffee
index 3a7b2c046a32..b83442a9a630 100644
--- a/cms/static/coffee/spec/main.coffee
+++ b/cms/static/coffee/spec/main.coffee
@@ -239,6 +239,7 @@ define([
     "js/spec/views/assets_spec",
     "js/spec/views/baseview_spec",
     "js/spec/views/container_spec",
+    "js/spec/views/paged_container_spec",
     "js/spec/views/group_configuration_spec",
     "js/spec/views/paging_spec",
     "js/spec/views/unit_outline_spec",
diff --git a/cms/static/js/factories/container.js b/cms/static/js/factories/container.js
index 93cdeb8fd991..429ae58f5151 100644
--- a/cms/static/js/factories/container.js
+++ b/cms/static/js/factories/container.js
@@ -1,22 +1,20 @@
 define([
-    'jquery', 'js/models/xblock_info', 'js/views/pages/container',
+    'jquery', 'underscore', 'js/models/xblock_info', 'js/views/pages/container',
     'js/collections/component_template', 'xmodule', 'coffee/src/main',
     'xblock/cms.runtime.v1'
 ],
-function($, XBlockInfo, ContainerPage, ComponentTemplates, xmoduleLoader) {
+function($, _, XBlockInfo, ContainerPage, ComponentTemplates, xmoduleLoader) {
     'use strict';
-    return function (componentTemplates, XBlockInfoJson, action, isUnitPage) {
-        var templates = new ComponentTemplates(componentTemplates, {parse: true}),
-            mainXBlockInfo = new XBlockInfo(XBlockInfoJson, {parse: true});
+    return function (componentTemplates, XBlockInfoJson, action, options) {
+        var main_options = {
+            el: $('#content'),
+            model: new XBlockInfo(XBlockInfoJson, {parse: true}),
+            action: action,
+            templates: new ComponentTemplates(componentTemplates, {parse: true})
+        };
 
         xmoduleLoader.done(function () {
-            var view = new ContainerPage({
-                el: $('#content'),
-                model: mainXBlockInfo,
-                action: action,
-                templates: templates,
-                isUnitPage: isUnitPage
-            });
+            var view = new ContainerPage(_.extend(main_options, options));
             view.render();
         });
     };
diff --git a/cms/static/js/factories/library.js b/cms/static/js/factories/library.js
index 2729a3cf279d..76ac47413ddc 100644
--- a/cms/static/js/factories/library.js
+++ b/cms/static/js/factories/library.js
@@ -1,22 +1,21 @@
 define([
-    'jquery', 'js/models/xblock_info', 'js/views/pages/container',
-    'js/collections/component_template', 'xmodule', 'coffee/src/main',
+    'jquery', 'underscore', 'js/models/xblock_info', 'js/views/pages/paged_container',
+    'js/views/library_container', 'js/collections/component_template', 'xmodule', 'coffee/src/main',
     'xblock/cms.runtime.v1'
 ],
-function($, XBlockInfo, ContainerPage, ComponentTemplates, xmoduleLoader) {
+function($, _, XBlockInfo, PagedContainerPage, LibraryContainerView, ComponentTemplates, xmoduleLoader) {
     'use strict';
-    return function (componentTemplates, XBlockInfoJson) {
-        var templates = new ComponentTemplates(componentTemplates, {parse: true}),
-            mainXBlockInfo = new XBlockInfo(XBlockInfoJson, {parse: true});
+    return function (componentTemplates, XBlockInfoJson, options) {
+        var main_options = {
+            el: $('#content'),
+            model: new XBlockInfo(XBlockInfoJson, {parse: true}),
+            templates: new ComponentTemplates(componentTemplates, {parse: true}),
+            action: 'view',
+            viewClass: LibraryContainerView
+        };
 
         xmoduleLoader.done(function () {
-            var view = new ContainerPage({
-                el: $('#content'),
-                model: mainXBlockInfo,
-                action: "view",
-                templates: templates,
-                isUnitPage: false
-            });
+            var view = new PagedContainerPage(_.extend(main_options, options));
             view.render();
         });
     };
diff --git a/cms/static/js/spec/views/paged_container_spec.js b/cms/static/js/spec/views/paged_container_spec.js
new file mode 100644
index 000000000000..524f88e552f7
--- /dev/null
+++ b/cms/static/js/spec/views/paged_container_spec.js
@@ -0,0 +1,489 @@
+define([ "jquery", "underscore", "js/common_helpers/ajax_helpers", "URI", "js/models/xblock_info",
+    "js/views/paged_container", "js/views/paging_header", "js/views/paging_footer"],
+    function ($, _, AjaxHelpers, URI, XBlockInfo, PagedContainer, PagingHeader, PagingFooter) {
+
+        var htmlResponseTpl = _.template('' +
+            '<div class="xblock-container-paging-parameters" data-start="<%= start %>" data-displayed="<%= displayed %>" data-total="<%= total %>"/>'
+        );
+
+        function getResponseHtml(options){
+            return '<div class="xblock" data-request-token="request_token">' +
+                '<div class="container-paging-header"></div>' +
+                htmlResponseTpl(options) +
+                '<div class="container-paging-footer"></div>' +
+                '</div>'
+        }
+
+        var PAGE_SIZE = 3;
+
+        var mockFirstPage = {
+            resources: [],
+            html: getResponseHtml({
+                start: 0,
+                displayed: PAGE_SIZE,
+                total: PAGE_SIZE + 1
+            })
+        };
+
+        var mockSecondPage = {
+            resources: [],
+            html: getResponseHtml({
+                start: PAGE_SIZE,
+                displayed: 1,
+                total: PAGE_SIZE + 1
+            })
+        };
+
+        var mockEmptyPage = {
+            resources: [],
+            html: getResponseHtml({
+                start: 0,
+                displayed: 0,
+                total: 0
+            })
+        };
+
+        var respondWithMockPage = function(requests) {
+            var requestIndex = requests.length - 1;
+            var request = requests[requestIndex];
+            var url = new URI(request.url);
+            var queryParameters = url.query(true); // Returns an object with each query parameter stored as a value
+            var page = queryParameters.page_number;
+            var response = page === "0" ? mockFirstPage : mockSecondPage;
+            AjaxHelpers.respondWithJson(requests, response, requestIndex);
+        };
+
+        var MockPagingView = PagedContainer.extend({
+            view: 'container_preview',
+            el: $("<div><div class='xblock' data-request-token='test_request_token'/></div>"),
+            model: new XBlockInfo({}, {parse: true})
+        });
+
+        describe("Paging Container", function() {
+            var pagingContainer;
+
+            beforeEach(function () {
+                var feedbackTpl = readFixtures('system-feedback.underscore');
+                setFixtures($("<script>", { id: "system-feedback-tpl", type: "text/template" }).text(feedbackTpl));
+                pagingContainer = new MockPagingView({ page_size: PAGE_SIZE });
+            });
+
+            describe("Container", function () {
+                describe("setPage", function () {
+                    it('can set the current page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('should not change page after a server error', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.setPage(1);
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+                });
+
+                describe("nextPage", function () {
+                    it('does not move forward after a server error', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.nextPage();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('can move to the next page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.nextPage();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('can not move forward from the final page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.nextPage();
+                        expect(requests.length).toBe(1);
+                    });
+                });
+
+                describe("previousPage", function () {
+                    it('can move back a page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.previousPage();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('can not move back from the first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.previousPage();
+                        expect(requests.length).toBe(1);
+                    });
+
+                    it('does not move back after a server error', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.previousPage();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+                });
+            });
+
+            describe("PagingHeader", function () {
+                beforeEach(function () {
+                    var pagingFooterTpl = readFixtures('paging-header.underscore');
+                    appendSetFixtures($("<script>", { id: "paging-header-tpl", type: "text/template" }).text(pagingFooterTpl));
+                });
+
+                describe("Next page button", function () {
+                    beforeEach(function () {
+                        pagingContainer.render();
+                    });
+
+                    it('does not move forward if a server error occurs', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingHeader.$('.next-page-link').click();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('can move to the next page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingHeader.$('.next-page-link').click();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('should be enabled when there is at least one more page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.next-page-link')).not.toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled on the final page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.next-page-link')).toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled on an empty page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingHeader.$('.next-page-link')).toHaveClass('is-disabled');
+                    });
+                });
+
+                describe("Previous page button", function () {
+                    beforeEach(function () {
+                        pagingContainer.render();
+                    });
+
+                    it('does not move back if a server error occurs', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingHeader.$('.previous-page-link').click();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('can go back a page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingHeader.$('.previous-page-link').click();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('should be disabled on the first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.previous-page-link')).toHaveClass('is-disabled');
+                    });
+
+                    it('should be enabled on the second page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.previous-page-link')).not.toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled for an empty page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingHeader.$('.previous-page-link')).toHaveClass('is-disabled');
+                    });
+                });
+
+                describe("Page metadata section", function() {
+                    it('shows the correct metadata for the current page', function () {
+                        var requests = AjaxHelpers.requests(this),
+                            message;
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        message = pagingContainer.pagingHeader.$('.meta').html().trim();
+                        expect(message).toBe('<p>Showing <span class="count-current-shown">1-3</span>' +
+                            ' out of <span class="count-total">4 total</span>, ' +
+                            'sorted by <span class="sort-order">Date added</span> descending</p>');
+                    });
+                });
+
+                describe("Children count label", function () {
+                    it('should show correct count on first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.count-current-shown')).toHaveHtml('1-3');
+                    });
+
+                    it('should show correct count on second page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.count-current-shown')).toHaveHtml('4-4');
+                    });
+
+                    it('should show correct count for an empty collection', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingHeader.$('.count-current-shown')).toHaveHtml('0-0');
+                    });
+                });
+
+                describe("Children total label", function () {
+                    it('should show correct total on the first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.count-total')).toHaveText('4 total');
+                    });
+
+                    it('should show correct total on the second page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingHeader.$('.count-total')).toHaveText('4 total');
+                    });
+
+                    it('should show zero total for an empty collection', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingHeader.$('.count-total')).toHaveText('0 total');
+                    });
+                });
+            });
+
+            describe("PagingFooter", function () {
+                var pagingFooter;
+
+                beforeEach(function () {
+                    var pagingFooterTpl = readFixtures('paging-footer.underscore');
+                    appendSetFixtures($("<script>", { id: "paging-footer-tpl", type: "text/template" }).text(pagingFooterTpl));
+                });
+
+                describe("Next page button", function () {
+                    beforeEach(function () {
+                        // Render the page and header so that they can react to events
+                        pagingContainer.render();
+                    });
+
+                    it('does not move forward if a server error occurs', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.next-page-link').click();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('can move to the next page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.next-page-link').click();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('should be enabled when there is at least one more page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.next-page-link')).not.toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled on the final page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.next-page-link')).toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled on an empty page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingFooter.$('.next-page-link')).toHaveClass('is-disabled');
+                    });
+                });
+
+                describe("Previous page button", function () {
+                    beforeEach(function () {
+                        // Render the page and header so that they can react to events
+                        pagingContainer.render();
+                    });
+
+                    it('does not move back if a server error occurs', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.previous-page-link').click();
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                    });
+
+                    it('can go back a page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.previous-page-link').click();
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                    });
+
+                    it('should be disabled on the first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.previous-page-link')).toHaveClass('is-disabled');
+                    });
+
+                    it('should be enabled on the second page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.previous-page-link')).not.toHaveClass('is-disabled');
+                    });
+
+                    it('should be disabled for an empty page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingFooter.$('.previous-page-link')).toHaveClass('is-disabled');
+                    });
+                });
+
+                describe("Current page label", function () {
+                    it('should show 1 on the first page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.current-page')).toHaveText('1');
+                    });
+
+                    it('should show 2 on the second page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(1);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.current-page')).toHaveText('2');
+                    });
+
+                    it('should show 1 for an empty collection', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingFooter.$('.current-page')).toHaveText('1');
+                    });
+                });
+
+                describe("Page total label", function () {
+                    it('should show the correct value with more than one page', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.total-pages')).toHaveText('2');
+                    });
+
+                    it('should show page 1 when there are no assets', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        AjaxHelpers.respondWithJson(requests, mockEmptyPage);
+                        expect(pagingContainer.pagingFooter.$('.total-pages')).toHaveText('1');
+                    });
+                });
+
+                describe("Page input field", function () {
+                    var input;
+
+                    it('should initially have a blank page input', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        expect(pagingContainer.pagingFooter.$('.page-number-input')).toHaveValue('');
+                    });
+
+                    it('should handle invalid page requests', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.page-number-input').val('abc');
+                        pagingContainer.pagingFooter.$('.page-number-input').trigger('change');
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                        expect(pagingContainer.pagingFooter.$('.page-number-input')).toHaveValue('');
+                    });
+
+                    it('should switch pages via the input field', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.page-number-input').val('2');
+                        pagingContainer.pagingFooter.$('.page-number-input').trigger('change');
+                        AjaxHelpers.respondWithJson(requests, mockSecondPage);
+                        expect(pagingContainer.collection.currentPage).toBe(1);
+                        expect(pagingContainer.pagingFooter.$('.page-number-input')).toHaveValue('');
+                    });
+
+                    it('should handle AJAX failures when switching pages via the input field', function () {
+                        var requests = AjaxHelpers.requests(this);
+                        pagingContainer.setPage(0);
+                        respondWithMockPage(requests);
+                        pagingContainer.pagingFooter.$('.page-number-input').val('2');
+                        pagingContainer.pagingFooter.$('.page-number-input').trigger('change');
+                        requests[1].respond(500);
+                        expect(pagingContainer.collection.currentPage).toBe(0);
+                        expect(pagingContainer.pagingFooter.$('.page-number-input')).toHaveValue('');
+                    });
+                });
+            });
+        });
+    });
diff --git a/cms/static/js/spec/views/pages/container_spec.js b/cms/static/js/spec/views/pages/container_spec.js
index 8077c0ed7afa..ce862aac7d7f 100644
--- a/cms/static/js/spec/views/pages/container_spec.js
+++ b/cms/static/js/spec/views/pages/container_spec.js
@@ -1,539 +1,581 @@
 define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_helpers",
         "js/common_helpers/template_helpers", "js/spec_helpers/edit_helpers",
-        "js/views/pages/container", "js/models/xblock_info", "jquery.simulate"],
-    function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, XBlockInfo) {
-
-        describe("ContainerPage", function() {
-            var lastRequest, renderContainerPage, expectComponents, respondWithHtml,
-                model, containerPage, requests, initialDisplayName,
-                mockContainerPage = readFixtures('mock/mock-container-page.underscore'),
-                mockContainerXBlockHtml = readFixtures('mock/mock-container-xblock.underscore'),
-                mockBadContainerXBlockHtml = readFixtures('mock/mock-bad-javascript-container-xblock.underscore'),
-                mockBadXBlockContainerXBlockHtml = readFixtures('mock/mock-bad-xblock-container-xblock.underscore'),
-                mockUpdatedContainerXBlockHtml = readFixtures('mock/mock-updated-container-xblock.underscore'),
-                mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore');
-
-            beforeEach(function () {
-                var newDisplayName = 'New Display Name';
-
-                EditHelpers.installEditTemplates();
-                TemplateHelpers.installTemplate('xblock-string-field-editor');
-                TemplateHelpers.installTemplate('container-message');
-                appendSetFixtures(mockContainerPage);
-
-                EditHelpers.installMockXBlock({
-                    data: "<p>Some HTML</p>",
-                    metadata: {
-                        display_name: newDisplayName
-                    }
-                });
+        "js/views/pages/container", "js/views/pages/paged_container", "js/models/xblock_info"],
+    function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, PagedContainerPage, XBlockInfo) {
+
+        function parameterized_suite(label, global_page_options, fixtures) {
+            describe(label + " ContainerPage", function () {
+                var lastRequest, getContainerPage, renderContainerPage, expectComponents, respondWithHtml,
+                    model, containerPage, requests, initialDisplayName,
+                    mockContainerPage = readFixtures('mock/mock-container-page.underscore'),
+                    mockContainerXBlockHtml = readFixtures(fixtures.initial),
+                    mockXBlockHtml = readFixtures(fixtures.add_response),
+                    mockBadContainerXBlockHtml = readFixtures('mock/mock-bad-javascript-container-xblock.underscore'),
+                    mockBadXBlockContainerXBlockHtml = readFixtures('mock/mock-bad-xblock-container-xblock.underscore'),
+                    mockUpdatedContainerXBlockHtml = readFixtures('mock/mock-updated-container-xblock.underscore'),
+                    mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore'),
+                    PageClass = fixtures.page;
 
-                initialDisplayName = 'Test Container';
+                beforeEach(function () {
+                    var newDisplayName = 'New Display Name';
 
-                model = new XBlockInfo({
-                    id: 'locator-container',
-                    display_name: initialDisplayName,
-                    category: 'vertical'
-                });
-            });
+                    EditHelpers.installEditTemplates();
+                    TemplateHelpers.installTemplate('xblock-string-field-editor');
+                    TemplateHelpers.installTemplate('container-message');
+                    appendSetFixtures(mockContainerPage);
 
-            afterEach(function() {
-                EditHelpers.uninstallMockXBlock();
-            });
+                    EditHelpers.installMockXBlock({
+                        data: "<p>Some HTML</p>",
+                        metadata: {
+                            display_name: newDisplayName
+                        }
+                    });
+
+                    initialDisplayName = 'Test Container';
 
-            lastRequest = function() { return requests[requests.length - 1]; };
-
-            respondWithHtml = function(html) {
-                var requestIndex = requests.length - 1;
-                AjaxHelpers.respondWithJson(
-                    requests,
-                    { html: html, "resources": [] },
-                    requestIndex
-                );
-            };
-
-            renderContainerPage = function(test, html, options) {
-                requests = AjaxHelpers.requests(test);
-                containerPage = new ContainerPage(_.extend(options || {}, {
-                    model: model,
-                    templates: EditHelpers.mockComponentTemplates,
-                    el: $('#content')
-                }));
-                containerPage.render();
-                respondWithHtml(html);
-            };
-
-            expectComponents = function (container, locators) {
-                // verify expected components (in expected order) by their locators
-                var components = $(container).find('.studio-xblock-wrapper');
-                expect(components.length).toBe(locators.length);
-                _.each(locators, function(locator, locator_index) {
-                    expect($(components[locator_index]).data('locator')).toBe(locator);
+                    model = new XBlockInfo({
+                        id: 'locator-container',
+                        display_name: initialDisplayName,
+                        category: 'vertical'
+                    });
                 });
-            };
 
-            describe("Initial display", function() {
-                it('can render itself', function() {
-                    renderContainerPage(this, mockContainerXBlockHtml);
-                    expect(containerPage.$('.xblock-header').length).toBe(9);
-                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
+                afterEach(function () {
+                    EditHelpers.uninstallMockXBlock();
                 });
 
-                it('shows a loading indicator', function() {
-                    requests = AjaxHelpers.requests(this);
+                lastRequest = function () {
+                    return requests[requests.length - 1];
+                };
+
+                respondWithHtml = function (html) {
+                    var requestIndex = requests.length - 1;
+                    AjaxHelpers.respondWithJson(
+                        requests,
+                        { html: html, "resources": [] },
+                        requestIndex
+                    );
+                };
+
+                getContainerPage = function (options) {
+                    var default_options = {
+                        model: model,
+                        templates: EditHelpers.mockComponentTemplates,
+                        el: $('#content')
+                    };
+                    return new PageClass(_.extend(options || {}, global_page_options, default_options));
+                };
+
+                renderContainerPage = function (test, html, options) {
+                    requests = AjaxHelpers.requests(test);
+                    containerPage = getContainerPage(options);
                     containerPage.render();
-                    expect(containerPage.$('.ui-loading')).not.toHaveClass('is-hidden');
-                    respondWithHtml(mockContainerXBlockHtml);
-                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
-                });
+                    respondWithHtml(html);
+                };
 
-                it('can show an xblock with broken JavaScript', function() {
-                    renderContainerPage(this, mockBadContainerXBlockHtml);
-                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
-                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
-                });
+                expectComponents = function (container, locators) {
+                    // verify expected components (in expected order) by their locators
+                    var components = $(container).find('.studio-xblock-wrapper');
+                    expect(components.length).toBe(locators.length);
+                    _.each(locators, function (locator, locator_index) {
+                        expect($(components[locator_index]).data('locator')).toBe(locator);
+                    });
+                };
 
-                it('can show an xblock with an invalid XBlock', function() {
-                    renderContainerPage(this, mockBadXBlockContainerXBlockHtml);
-                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
-                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
-                });
+                describe("Initial display", function () {
+                    it('can render itself', function () {
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        expect(containerPage.$('.xblock-header').length).toBe(9);
+                        expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
+                    });
 
-                it('inline edits the display name when performing a new action', function() {
-                    renderContainerPage(this, mockContainerXBlockHtml, {
-                        action: 'new'
+                    it('shows a loading indicator', function () {
+                        requests = AjaxHelpers.requests(this);
+                        containerPage = getContainerPage();
+                        containerPage.render();
+                        expect(containerPage.$('.ui-loading')).not.toHaveClass('is-hidden');
+                        respondWithHtml(mockContainerXBlockHtml);
+                        expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
                     });
-                    expect(containerPage.$('.xblock-header').length).toBe(9);
-                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
-                    expect(containerPage.$('.xblock-field-input')).not.toHaveClass('is-hidden');
-                });
-            });
 
-            describe("Editing the container", function() {
-                var updatedDisplayName = 'Updated Test Container',
-                    getDisplayNameWrapper;
+                    it('can show an xblock with broken JavaScript', function () {
+                        renderContainerPage(this, mockBadContainerXBlockHtml);
+                        expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
+                        expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
+                    });
 
-                afterEach(function() {
-                    EditHelpers.cancelModalIfShowing();
+                    it('can show an xblock with an invalid XBlock', function () {
+                        renderContainerPage(this, mockBadXBlockContainerXBlockHtml);
+                        expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
+                        expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
+                    });
+
+                    it('inline edits the display name when performing a new action', function () {
+                        renderContainerPage(this, mockContainerXBlockHtml, {
+                            action: 'new'
+                        });
+                        expect(containerPage.$('.xblock-header').length).toBe(9);
+                        expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
+                        expect(containerPage.$('.xblock-field-input')).not.toHaveClass('is-hidden');
+                    });
                 });
 
-                getDisplayNameWrapper = function() {
-                    return containerPage.$('.wrapper-xblock-field');
-                };
+                describe("Editing the container", function () {
+                    var updatedDisplayName = 'Updated Test Container',
+                        getDisplayNameWrapper;
 
-                it('can edit itself', function() {
-                    var editButtons, displayNameElement;
-                    renderContainerPage(this, mockContainerXBlockHtml);
-                    displayNameElement = containerPage.$('.page-header-title');
+                    afterEach(function () {
+                        EditHelpers.cancelModalIfShowing();
+                    });
 
-                    // Click the root edit button
-                    editButtons = containerPage.$('.nav-actions .edit-button');
-                    editButtons.first().click();
+                    getDisplayNameWrapper = function () {
+                        return containerPage.$('.wrapper-xblock-field');
+                    };
 
-                    // Expect a request to be made to show the studio view for the container
-                    expect(str.startsWith(lastRequest().url, '/xblock/locator-container/studio_view')).toBeTruthy();
-                    AjaxHelpers.respondWithJson(requests, {
-                        html: mockContainerXBlockHtml,
-                        resources: []
-                    });
-                    expect(EditHelpers.isShowingModal()).toBeTruthy();
-
-                    // Expect the correct title to be shown
-                    expect(EditHelpers.getModalTitle()).toBe('Editing: Test Container');
-
-                    // Press the save button and respond with a success message to the save
-                    EditHelpers.pressModalButton('.action-save');
-                    AjaxHelpers.respondWithJson(requests, { });
-                    expect(EditHelpers.isShowingModal()).toBeFalsy();
-
-                    // Expect the last request be to refresh the container page
-                    expect(str.startsWith(lastRequest().url,
-                        '/xblock/locator-container/container_preview')).toBeTruthy();
-                    AjaxHelpers.respondWithJson(requests, {
-                        html: mockUpdatedContainerXBlockHtml,
-                        resources: []
-                    });
+                    it('can edit itself', function () {
+                        var editButtons, displayNameElement;
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        displayNameElement = containerPage.$('.page-header-title');
 
-                    // Respond to the subsequent xblock info fetch request.
-                    AjaxHelpers.respondWithJson(requests, {"display_name":  updatedDisplayName});
+                        // Click the root edit button
+                        editButtons = containerPage.$('.nav-actions .edit-button');
+                        editButtons.first().click();
 
-                    // Expect the title to have been updated
-                    expect(displayNameElement.text().trim()).toBe(updatedDisplayName);
-                });
+                        // Expect a request to be made to show the studio view for the container
+                        expect(str.startsWith(lastRequest().url, '/xblock/locator-container/studio_view')).toBeTruthy();
+                        AjaxHelpers.respondWithJson(requests, {
+                            html: mockContainerXBlockHtml,
+                            resources: []
+                        });
+                        expect(EditHelpers.isShowingModal()).toBeTruthy();
 
-                it('can inline edit the display name', function() {
-                    var displayNameInput, displayNameWrapper;
-                    renderContainerPage(this, mockContainerXBlockHtml);
-                    displayNameWrapper = getDisplayNameWrapper();
-                    displayNameInput = EditHelpers.inlineEdit(displayNameWrapper, updatedDisplayName);
-                    displayNameInput.change();
-                    // This is the response for the change operation.
-                    AjaxHelpers.respondWithJson(requests, { });
-                    // This is the response for the subsequent fetch operation.
-                    AjaxHelpers.respondWithJson(requests, {"display_name":  updatedDisplayName});
-                    EditHelpers.verifyInlineEditChange(displayNameWrapper, updatedDisplayName);
-                    expect(containerPage.model.get('display_name')).toBe(updatedDisplayName);
-                });
-            });
+                        // Expect the correct title to be shown
+                        expect(EditHelpers.getModalTitle()).toBe('Editing: Test Container');
 
-            describe("Editing an xblock", function() {
-                afterEach(function() {
-                    EditHelpers.cancelModalIfShowing();
-                });
+                        // Press the save button and respond with a success message to the save
+                        EditHelpers.pressModalButton('.action-save');
+                        AjaxHelpers.respondWithJson(requests, { });
+                        expect(EditHelpers.isShowingModal()).toBeFalsy();
+
+                        // Expect the last request be to refresh the container page
+                        expect(str.startsWith(lastRequest().url,
+                            '/xblock/locator-container/container_preview')).toBeTruthy();
+                        AjaxHelpers.respondWithJson(requests, {
+                            html: mockUpdatedContainerXBlockHtml,
+                            resources: []
+                        });
+
+                        // Respond to the subsequent xblock info fetch request.
+                        AjaxHelpers.respondWithJson(requests, {"display_name": updatedDisplayName});
 
-                it('can show an edit modal for a child xblock', function() {
-                    var editButtons;
-                    renderContainerPage(this, mockContainerXBlockHtml);
-                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
-                    // The container should have rendered six mock xblocks
-                    expect(editButtons.length).toBe(6);
-                    editButtons[0].click();
-                    // Make sure that the correct xblock is requested to be edited
-                    expect(str.startsWith(lastRequest().url, '/xblock/locator-component-A1/studio_view')).toBeTruthy();
-                    AjaxHelpers.respondWithJson(requests, {
-                        html: mockXBlockEditorHtml,
-                        resources: []
+                        // Expect the title to have been updated
+                        expect(displayNameElement.text().trim()).toBe(updatedDisplayName);
                     });
-                    expect(EditHelpers.isShowingModal()).toBeTruthy();
-                });
 
-                it('can show an edit modal for a child xblock with broken JavaScript', function() {
-                    var editButtons;
-                    renderContainerPage(this, mockBadContainerXBlockHtml);
-                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
-                    editButtons[0].click();
-                    AjaxHelpers.respondWithJson(requests, {
-                        html: mockXBlockEditorHtml,
-                        resources: []
+                    it('can inline edit the display name', function () {
+                        var displayNameInput, displayNameWrapper;
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        displayNameWrapper = getDisplayNameWrapper();
+                        displayNameInput = EditHelpers.inlineEdit(displayNameWrapper, updatedDisplayName);
+                        displayNameInput.change();
+                        // This is the response for the change operation.
+                        AjaxHelpers.respondWithJson(requests, { });
+                        // This is the response for the subsequent fetch operation.
+                        AjaxHelpers.respondWithJson(requests, {"display_name": updatedDisplayName});
+                        EditHelpers.verifyInlineEditChange(displayNameWrapper, updatedDisplayName);
+                        expect(containerPage.model.get('display_name')).toBe(updatedDisplayName);
                     });
-                    expect(EditHelpers.isShowingModal()).toBeTruthy();
                 });
-            });
 
-            describe("Editing an xmodule", function() {
-                var mockXModuleEditor = readFixtures('mock/mock-xmodule-editor.underscore'),
-                    newDisplayName = 'New Display Name';
+                describe("Editing an xblock", function () {
+                    afterEach(function () {
+                        EditHelpers.cancelModalIfShowing();
+                    });
 
-                beforeEach(function () {
-                    EditHelpers.installMockXModule({
-                        data: "<p>Some HTML</p>",
-                        metadata: {
-                            display_name: newDisplayName
-                        }
+                    it('can show an edit modal for a child xblock', function () {
+                        var editButtons;
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        editButtons = containerPage.$('.wrapper-xblock .edit-button');
+                        // The container should have rendered six mock xblocks
+                        expect(editButtons.length).toBe(6);
+                        editButtons[0].click();
+                        // Make sure that the correct xblock is requested to be edited
+                        expect(str.startsWith(lastRequest().url, '/xblock/locator-component-A1/studio_view')).toBeTruthy();
+                        AjaxHelpers.respondWithJson(requests, {
+                            html: mockXBlockEditorHtml,
+                            resources: []
+                        });
+                        expect(EditHelpers.isShowingModal()).toBeTruthy();
                     });
-                });
 
-                afterEach(function() {
-                    EditHelpers.uninstallMockXModule();
-                    EditHelpers.cancelModalIfShowing();
+                    it('can show an edit modal for a child xblock with broken JavaScript', function () {
+                        var editButtons;
+                        renderContainerPage(this, mockBadContainerXBlockHtml);
+                        editButtons = containerPage.$('.wrapper-xblock .edit-button');
+                        editButtons[0].click();
+                        AjaxHelpers.respondWithJson(requests, {
+                            html: mockXBlockEditorHtml,
+                            resources: []
+                        });
+                        expect(EditHelpers.isShowingModal()).toBeTruthy();
+                    });
                 });
 
-                it('can save changes to settings', function() {
-                    var editButtons, modal, mockUpdatedXBlockHtml;
-                    mockUpdatedXBlockHtml = readFixtures('mock/mock-updated-xblock.underscore');
-                    renderContainerPage(this, mockContainerXBlockHtml);
-                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
-                    // The container should have rendered six mock xblocks
-                    expect(editButtons.length).toBe(6);
-                    editButtons[0].click();
-                    AjaxHelpers.respondWithJson(requests, {
-                        html: mockXModuleEditor,
-                        resources: []
-                    });
+                describe("Editing an xmodule", function () {
+                    var mockXModuleEditor = readFixtures('mock/mock-xmodule-editor.underscore'),
+                        newDisplayName = 'New Display Name';
 
-                    modal = $('.edit-xblock-modal');
-                    expect(modal.length).toBe(1);
-                    // Click on the settings tab
-                    modal.find('.settings-button').click();
-                    // Change the display name's text
-                    modal.find('.setting-input').text("Mock Update");
-                    // Press the save button
-                    modal.find('.action-save').click();
-                    // Respond to the save
-                    AjaxHelpers.respondWithJson(requests, {
-                        id: model.id
+                    beforeEach(function () {
+                        EditHelpers.installMockXModule({
+                            data: "<p>Some HTML</p>",
+                            metadata: {
+                                display_name: newDisplayName
+                            }
+                        });
                     });
 
-                    // Respond to the request to refresh
-                    respondWithHtml(mockUpdatedXBlockHtml);
-
-                    // Verify that the xblock was updated
-                    expect(containerPage.$('.mock-updated-content').text()).toBe('Mock Update');
-                });
-            });
+                    afterEach(function () {
+                        EditHelpers.uninstallMockXModule();
+                        EditHelpers.cancelModalIfShowing();
+                    });
 
-            describe("xblock operations", function() {
-                var getGroupElement,
-                    NUM_COMPONENTS_PER_GROUP = 3, GROUP_TO_TEST = "A",
-                    allComponentsInGroup = _.map(
-                        _.range(NUM_COMPONENTS_PER_GROUP),
-                        function(index) { return 'locator-component-' + GROUP_TO_TEST + (index + 1); }
-                    );
+                    it('can save changes to settings', function () {
+                        var editButtons, modal, mockUpdatedXBlockHtml;
+                        mockUpdatedXBlockHtml = readFixtures('mock/mock-updated-xblock.underscore');
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        editButtons = containerPage.$('.wrapper-xblock .edit-button');
+                        // The container should have rendered six mock xblocks
+                        expect(editButtons.length).toBe(6);
+                        editButtons[0].click();
+                        AjaxHelpers.respondWithJson(requests, {
+                            html: mockXModuleEditor,
+                            resources: []
+                        });
 
-                getGroupElement = function() {
-                    return containerPage.$("[data-locator='locator-group-" + GROUP_TO_TEST + "']");
-                };
+                        modal = $('.edit-xblock-modal');
+                        expect(modal.length).toBe(1);
+                        // Click on the settings tab
+                        modal.find('.settings-button').click();
+                        // Change the display name's text
+                        modal.find('.setting-input').text("Mock Update");
+                        // Press the save button
+                        modal.find('.action-save').click();
+                        // Respond to the save
+                        AjaxHelpers.respondWithJson(requests, {
+                            id: model.id
+                        });
 
-                describe("Deleting an xblock", function() {
-                    var clickDelete, deleteComponent, deleteComponentWithSuccess,
-                        promptSpy;
+                        // Respond to the request to refresh
+                        respondWithHtml(mockUpdatedXBlockHtml);
 
-                    beforeEach(function() {
-                        promptSpy = EditHelpers.createPromptSpy();
+                        // Verify that the xblock was updated
+                        expect(containerPage.$('.mock-updated-content').text()).toBe('Mock Update');
                     });
+                });
 
-                    clickDelete = function(componentIndex, clickNo) {
+                describe("xblock operations", function () {
+                    var getGroupElement, paginated, getDeleteOffset,
+                        NUM_COMPONENTS_PER_GROUP = 3, GROUP_TO_TEST = "A",
+                        allComponentsInGroup = _.map(
+                            _.range(NUM_COMPONENTS_PER_GROUP),
+                            function (index) {
+                                return 'locator-component-' + GROUP_TO_TEST + (index + 1);
+                            }
+                        );
 
-                        // find all delete buttons for the given group
-                        var deleteButtons = getGroupElement().find(".delete-button");
-                        expect(deleteButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);
+                    paginated = function () {
+                        return containerPage instanceof PagedContainerPage;
+                    };
 
-                        // click the requested delete button
-                        deleteButtons[componentIndex].click();
+                    getDeleteOffset = function () {
+                        // Paginated containers will make an additional AJAX request.
+                        return paginated() ? 3 : 2;
+                    };
 
-                        // click the 'yes' or 'no' button in the prompt
-                        EditHelpers.confirmPrompt(promptSpy, clickNo);
+                    getGroupElement = function () {
+                        return containerPage.$("[data-locator='locator-group-" + GROUP_TO_TEST + "']");
                     };
 
-                    deleteComponent = function(componentIndex) {
-                        clickDelete(componentIndex);
-                        AjaxHelpers.respondWithJson(requests, {});
+                    describe("Deleting an xblock", function () {
+                        var clickDelete, deleteComponent, deleteComponentWithSuccess,
+                            promptSpy;
 
-                        // second to last request contains given component's id (to delete the component)
-                        AjaxHelpers.expectJsonRequest(requests, 'DELETE',
-                            '/xblock/locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
-                            null, requests.length - 2);
+                        beforeEach(function () {
+                            promptSpy = EditHelpers.createPromptSpy();
+                        });
 
-                        // final request to refresh the xblock info
-                        AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
-                    };
 
-                    deleteComponentWithSuccess = function(componentIndex) {
-                        deleteComponent(componentIndex);
+                        clickDelete = function (componentIndex, clickNo) {
 
-                        // verify the new list of components within the group
-                        expectComponents(
-                            getGroupElement(),
-                            _.without(allComponentsInGroup, allComponentsInGroup[componentIndex])
-                        );
-                    };
+                            // find all delete buttons for the given group
+                            var deleteButtons = getGroupElement().find(".delete-button");
+                            expect(deleteButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);
 
-                    it("can delete the first xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        deleteComponentWithSuccess(0);
-                    });
+                            // click the requested delete button
+                            deleteButtons[componentIndex].click();
 
-                    it("can delete a middle xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        deleteComponentWithSuccess(1);
-                    });
-
-                    it("can delete the last xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        deleteComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
-                    });
+                            // click the 'yes' or 'no' button in the prompt
+                            EditHelpers.confirmPrompt(promptSpy, clickNo);
+                        };
 
-                    it("can delete an xblock with broken JavaScript", function() {
-                        renderContainerPage(this, mockBadContainerXBlockHtml);
-                        containerPage.$('.delete-button').first().click();
-                        EditHelpers.confirmPrompt(promptSpy);
-                        AjaxHelpers.respondWithJson(requests, {});
-                        // expect the second to last request to be a delete of the xblock
-                        AjaxHelpers.expectJsonRequest(requests, 'DELETE', '/xblock/locator-broken-javascript',
-                            null, requests.length - 2);
-                        // expect the last request to be a fetch of the xblock info for the parent container
-                        AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
-                    });
+                        deleteComponent = function (componentIndex, requestOffset) {
+                            clickDelete(componentIndex);
+                            AjaxHelpers.respondWithJson(requests, {});
+                            AjaxHelpers.expectJsonRequest(requests, 'DELETE',
+                                    '/xblock/locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
+                                null, requests.length - requestOffset);
 
-                    it('does not delete when clicking No in prompt', function () {
-                        var numRequests;
+                            // final request to refresh the xblock info
+                            AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
+                        };
 
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        numRequests = requests.length;
+                        deleteComponentWithSuccess = function (componentIndex) {
+                            var deleteOffset;
 
-                        // click delete on the first component but press no
-                        clickDelete(0, true);
+                            deleteOffset = getDeleteOffset();
+                            deleteComponent(componentIndex, deleteOffset);
 
-                        // all components should still exist
-                        expectComponents(getGroupElement(), allComponentsInGroup);
+                            // verify the new list of components within the group
+                            expectComponents(
+                                getGroupElement(),
+                                _.without(allComponentsInGroup, allComponentsInGroup[componentIndex])
+                            );
+                        };
 
-                        // no requests should have been sent to the server
-                        expect(requests.length).toBe(numRequests);
-                    });
+                        it("can delete the first xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            deleteComponentWithSuccess(0);
+                        });
 
-                    it('shows a notification during the delete operation', function() {
-                        var notificationSpy = EditHelpers.createNotificationSpy();
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickDelete(0);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
-                        AjaxHelpers.respondWithJson(requests, {});
-                        EditHelpers.verifyNotificationHidden(notificationSpy);
-                    });
+                        it("can delete a middle xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            deleteComponentWithSuccess(1);
+                        });
 
-                    it('does not delete an xblock upon failure', function () {
-                        var notificationSpy = EditHelpers.createNotificationSpy();
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickDelete(0);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
-                        AjaxHelpers.respondWithError(requests);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
-                        expectComponents(getGroupElement(), allComponentsInGroup);
-                    });
-                });
+                        it("can delete the last xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            deleteComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
+                        });
 
-                describe("Duplicating an xblock", function() {
-                    var clickDuplicate, duplicateComponentWithSuccess,
-                        refreshXBlockSpies;
+                        it("can delete an xblock with broken JavaScript", function () {
+                            var deleteOffset = getDeleteOffset();
+                            renderContainerPage(this, mockBadContainerXBlockHtml);
+                            containerPage.$('.delete-button').first().click();
+                            EditHelpers.confirmPrompt(promptSpy);
+                            AjaxHelpers.respondWithJson(requests, {});
+
+                            // expect the second to last request to be a delete of the xblock
+                            AjaxHelpers.expectJsonRequest(requests, 'DELETE', '/xblock/locator-broken-javascript',
+                                null, requests.length - deleteOffset);
+                            // expect the last request to be a fetch of the xblock info for the parent container
+                            AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
+                        });
 
-                    clickDuplicate = function(componentIndex) {
+                        it('does not delete when clicking No in prompt', function () {
+                            var numRequests;
 
-                        // find all duplicate buttons for the given group
-                        var duplicateButtons = getGroupElement().find(".duplicate-button");
-                        expect(duplicateButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            numRequests = requests.length;
 
-                        // click the requested duplicate button
-                        duplicateButtons[componentIndex].click();
-                    };
+                            // click delete on the first component but press no
+                            clickDelete(0, true);
 
-                    duplicateComponentWithSuccess = function(componentIndex) {
-                        refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");
+                            // all components should still exist
+                            expectComponents(getGroupElement(), allComponentsInGroup);
 
-                        clickDuplicate(componentIndex);
+                            // no requests should have been sent to the server
+                            expect(requests.length).toBe(numRequests);
+                        });
 
-                        // verify content of request
-                        AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
-                            'duplicate_source_locator': 'locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
-                            'parent_locator': 'locator-group-' + GROUP_TO_TEST
+                        it('shows a notification during the delete operation', function () {
+                            var notificationSpy = EditHelpers.createNotificationSpy();
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickDelete(0);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
+                            AjaxHelpers.respondWithJson(requests, {});
+                            EditHelpers.verifyNotificationHidden(notificationSpy);
                         });
 
-                        // send the response
-                        AjaxHelpers.respondWithJson(requests, {
-                            'locator': 'locator-duplicated-component'
+                        it('does not delete an xblock upon failure', function () {
+                            var notificationSpy = EditHelpers.createNotificationSpy();
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickDelete(0);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
+                            AjaxHelpers.respondWithError(requests);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
+                            expectComponents(getGroupElement(), allComponentsInGroup);
                         });
+                    });
 
-                        // expect parent container to be refreshed
-                        expect(refreshXBlockSpies).toHaveBeenCalled();
-                    };
+                    describe("Duplicating an xblock", function () {
+                        var clickDuplicate, duplicateComponentWithSuccess,
+                            refreshXBlockSpies;
 
-                    it("can duplicate the first xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        duplicateComponentWithSuccess(0);
-                    });
+                        clickDuplicate = function (componentIndex) {
 
-                    it("can duplicate a middle xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        duplicateComponentWithSuccess(1);
-                    });
+                            // find all duplicate buttons for the given group
+                            var duplicateButtons = getGroupElement().find(".duplicate-button");
+                            expect(duplicateButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);
 
-                    it("can duplicate the last xblock", function() {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        duplicateComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
-                    });
+                            // click the requested duplicate button
+                            duplicateButtons[componentIndex].click();
+                        };
 
-                    it("can duplicate an xblock with broken JavaScript", function() {
-                        renderContainerPage(this, mockBadContainerXBlockHtml);
-                        containerPage.$('.duplicate-button').first().click();
-                        AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
-                            'duplicate_source_locator': 'locator-broken-javascript',
-                            'parent_locator': 'locator-container'
-                        });
-                    });
+                        duplicateComponentWithSuccess = function (componentIndex) {
+                            refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");
 
-                    it('shows a notification when duplicating', function () {
-                        var notificationSpy = EditHelpers.createNotificationSpy();
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickDuplicate(0);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
-                        AjaxHelpers.respondWithJson(requests, {"locator": "new_item"});
-                        EditHelpers.verifyNotificationHidden(notificationSpy);
-                    });
+                            clickDuplicate(componentIndex);
 
-                    it('does not duplicate an xblock upon failure', function () {
-                        var notificationSpy = EditHelpers.createNotificationSpy();
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");
-                        clickDuplicate(0);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
-                        AjaxHelpers.respondWithError(requests);
-                        expectComponents(getGroupElement(), allComponentsInGroup);
-                        expect(refreshXBlockSpies).not.toHaveBeenCalled();
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
-                    });
-                });
+                            // verify content of request
+                            AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
+                                'duplicate_source_locator': 'locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
+                                'parent_locator': 'locator-group-' + GROUP_TO_TEST
+                            });
 
-                describe('createNewComponent ', function () {
-                    var clickNewComponent;
+                            // send the response
+                            AjaxHelpers.respondWithJson(requests, {
+                                'locator': 'locator-duplicated-component'
+                            });
 
-                    clickNewComponent = function (index) {
-                        containerPage.$(".new-component .new-component-type a.single-template")[index].click();
-                    };
+                            // expect parent container to be refreshed
+                            expect(refreshXBlockSpies).toHaveBeenCalled();
+                        };
 
-                    it('sends the correct JSON to the server', function () {
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickNewComponent(0);
-                        EditHelpers.verifyXBlockRequest(requests, {
-                            "category": "discussion",
-                            "type": "discussion",
-                            "parent_locator": "locator-group-A"
+                        it("can duplicate the first xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            duplicateComponentWithSuccess(0);
                         });
-                    });
 
-                    it('shows a notification while creating', function () {
-                        var notificationSpy = EditHelpers.createNotificationSpy();
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickNewComponent(0);
-                        EditHelpers.verifyNotificationShowing(notificationSpy, /Adding/);
-                        AjaxHelpers.respondWithJson(requests, { });
-                        EditHelpers.verifyNotificationHidden(notificationSpy);
-                    });
-
-                    it('does not insert component upon failure', function () {
-                        var requestCount;
-                        renderContainerPage(this, mockContainerXBlockHtml);
-                        clickNewComponent(0);
-                        requestCount = requests.length;
-                        AjaxHelpers.respondWithError(requests);
-                        // No new requests should be made to refresh the view
-                        expect(requests.length).toBe(requestCount);
-                        expectComponents(getGroupElement(), allComponentsInGroup);
-                    });
+                        it("can duplicate a middle xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            duplicateComponentWithSuccess(1);
+                        });
 
-                    describe('Template Picker', function() {
-                        var showTemplatePicker, verifyCreateHtmlComponent,
-                            mockXBlockHtml = readFixtures('mock/mock-xblock.underscore');
+                        it("can duplicate the last xblock", function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            duplicateComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
+                        });
 
-                        showTemplatePicker = function() {
-                            containerPage.$('.new-component .new-component-type a.multiple-templates')[0].click();
-                        };
+                        it("can duplicate an xblock with broken JavaScript", function () {
+                            renderContainerPage(this, mockBadContainerXBlockHtml);
+                            containerPage.$('.duplicate-button').first().click();
+                            AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
+                                'duplicate_source_locator': 'locator-broken-javascript',
+                                'parent_locator': 'locator-container'
+                            });
+                        });
 
-                        verifyCreateHtmlComponent = function(test, templateIndex, expectedRequest) {
-                            var xblockCount;
-                            renderContainerPage(test, mockContainerXBlockHtml);
-                            showTemplatePicker();
-                            xblockCount = containerPage.$('.studio-xblock-wrapper').length;
-                            containerPage.$('.new-component-html a')[templateIndex].click();
-                            EditHelpers.verifyXBlockRequest(requests, expectedRequest);
+                        it('shows a notification when duplicating', function () {
+                            var notificationSpy = EditHelpers.createNotificationSpy();
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickDuplicate(0);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
                             AjaxHelpers.respondWithJson(requests, {"locator": "new_item"});
-                            respondWithHtml(mockXBlockHtml);
-                            expect(containerPage.$('.studio-xblock-wrapper').length).toBe(xblockCount + 1);
+                            EditHelpers.verifyNotificationHidden(notificationSpy);
+                        });
+
+                        it('does not duplicate an xblock upon failure', function () {
+                            var notificationSpy = EditHelpers.createNotificationSpy();
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");
+                            clickDuplicate(0);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
+                            AjaxHelpers.respondWithError(requests);
+                            expectComponents(getGroupElement(), allComponentsInGroup);
+                            expect(refreshXBlockSpies).not.toHaveBeenCalled();
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
+                        });
+                    });
+
+                    describe('createNewComponent ', function () {
+                        var clickNewComponent;
+
+                        clickNewComponent = function (index) {
+                            containerPage.$(".new-component .new-component-type a.single-template")[index].click();
                         };
 
-                        it('can add an HTML component without a template', function() {
-                            verifyCreateHtmlComponent(this, 0, {
-                                "category": "html",
+                        it('sends the correct JSON to the server', function () {
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickNewComponent(0);
+                            EditHelpers.verifyXBlockRequest(requests, {
+                                "category": "discussion",
+                                "type": "discussion",
                                 "parent_locator": "locator-group-A"
                             });
                         });
 
-                        it('can add an HTML component with a template', function() {
-                            verifyCreateHtmlComponent(this, 1, {
-                                "category": "html",
-                                "boilerplate" : "announcement.yaml",
-                                "parent_locator": "locator-group-A"
+                        it('shows a notification while creating', function () {
+                            var notificationSpy = EditHelpers.createNotificationSpy();
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickNewComponent(0);
+                            EditHelpers.verifyNotificationShowing(notificationSpy, /Adding/);
+                            AjaxHelpers.respondWithJson(requests, { });
+                            EditHelpers.verifyNotificationHidden(notificationSpy);
+                        });
+
+                        it('does not insert component upon failure', function () {
+                            var requestCount;
+                            renderContainerPage(this, mockContainerXBlockHtml);
+                            clickNewComponent(0);
+                            requestCount = requests.length;
+                            AjaxHelpers.respondWithError(requests);
+                            // No new requests should be made to refresh the view
+                            expect(requests.length).toBe(requestCount);
+                            expectComponents(getGroupElement(), allComponentsInGroup);
+                        });
+
+                        describe('Template Picker', function () {
+                            var showTemplatePicker, verifyCreateHtmlComponent;
+
+                            showTemplatePicker = function () {
+                                containerPage.$('.new-component .new-component-type a.multiple-templates')[0].click();
+                            };
+
+                            verifyCreateHtmlComponent = function (test, templateIndex, expectedRequest) {
+                                var xblockCount;
+                                renderContainerPage(test, mockContainerXBlockHtml);
+                                showTemplatePicker();
+                                xblockCount = containerPage.$('.studio-xblock-wrapper').length;
+                                containerPage.$('.new-component-html a')[templateIndex].click();
+                                EditHelpers.verifyXBlockRequest(requests, expectedRequest);
+                                AjaxHelpers.respondWithJson(requests, {"locator": "new_item"});
+                                respondWithHtml(mockXBlockHtml);
+                                expect(containerPage.$('.studio-xblock-wrapper').length).toBe(xblockCount + 1);
+                            };
+
+                            it('can add an HTML component without a template', function () {
+                                verifyCreateHtmlComponent(this, 0, {
+                                    "category": "html",
+                                    "parent_locator": "locator-group-A"
+                                });
+                            });
+
+                            it('can add an HTML component with a template', function () {
+                                verifyCreateHtmlComponent(this, 1, {
+                                    "category": "html",
+                                    "boilerplate": "announcement.yaml",
+                                    "parent_locator": "locator-group-A"
+                                });
                             });
                         });
                     });
                 });
             });
-        });
+        }
+
+        parameterized_suite("Non paged",
+            { },
+            {
+                page: ContainerPage,
+                initial: 'mock/mock-container-xblock.underscore',
+                add_response: 'mock/mock-xblock.underscore'
+            }
+        );
+        parameterized_suite("Paged",
+            { page_size: 42 },
+            {
+                page: PagedContainerPage,
+                initial: 'mock/mock-container-paged-xblock.underscore',
+                add_response: 'mock/mock-xblock-paged.underscore'
+            });
     });
diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js
index 0dfcae22aabd..a99993fe5da3 100644
--- a/cms/static/js/views/container.js
+++ b/cms/static/js/views/container.js
@@ -9,6 +9,8 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext",
             // child xblocks within the page.
             requestToken: "",
 
+            new_child_view: 'reorderable_container_child_preview',
+
             xblockReady: function () {
                 XBlockView.prototype.xblockReady.call(this);
                 var reorderableClass, reorderableContainer,
@@ -123,6 +125,10 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext",
                 });
             },
 
+            acknowledgeXBlockDeletion: function(locator){
+                this.notifyRuntime('deleted-child', locator);
+            },
+
             refresh: function() {
                 var sortableInitializedClass = this.makeRequestSpecificSelector('.reorderable-container.ui-sortable');
                 this.$(sortableInitializedClass).sortable('refresh');
diff --git a/cms/static/js/views/library_container.js b/cms/static/js/views/library_container.js
new file mode 100644
index 000000000000..ea09c69c8929
--- /dev/null
+++ b/cms/static/js/views/library_container.js
@@ -0,0 +1,6 @@
+define(["js/views/paged_container"],
+    function (PagedContainerView) {
+        // To be extended with Library-specific features later.
+        var LibraryContainerView = PagedContainerView;
+        return LibraryContainerView;
+    }); // end define();
diff --git a/cms/static/js/views/paged_container.js b/cms/static/js/views/paged_container.js
new file mode 100644
index 000000000000..a8cd7aec3242
--- /dev/null
+++ b/cms/static/js/views/paged_container.js
@@ -0,0 +1,164 @@
+define(["jquery", "underscore", "js/views/container", "js/utils/module", "gettext",
+        "js/views/feedback_notification", "js/views/paging_header", "js/views/paging_footer", "js/views/paging_mixin"],
+    function ($, _, ContainerView, ModuleUtils, gettext, NotificationView, PagingHeader, PagingFooter, PagingMixin) {
+        var PagedContainerView = ContainerView.extend(PagingMixin).extend({
+            initialize: function(options){
+                var self = this;
+                ContainerView.prototype.initialize.call(this);
+                this.page_size = this.options.page_size;
+                // Reference to the page model
+                this.page = options.page;
+                // XBlocks are rendered via Django views and templates rather than underscore templates, and so don't
+                // have a Backbone model for us to manipulate in a backbone collection. Here, we emulate the interface
+                // of backbone.paginator so that we can use the Paging Header and Footer with this page. As a
+                // consequence, however, we have to manipulate its members manually.
+                this.collection = {
+                    currentPage: 0,
+                    totalPages: 0,
+                    totalCount: 0,
+                    sortDirection: "desc",
+                    start: 0,
+                    _size: 0,
+                    // Paging header and footer expect this to be a Backbone model they can listen to for changes, but
+                    // they cannot. Provide the bind function for them, but have it do nothing.
+                    bind: function() {},
+                    // size() on backbone collections shows how many objects are in the collection, or in the case
+                    // of paginator, on the current page.
+                    size: function() { return self.collection._size; }
+                };
+            },
+
+            new_child_view: 'container_child_preview',
+
+            render: function(options) {
+                options = options || {};
+                options.page_number = typeof options.page_number !== "undefined"
+                    ? options.page_number
+                    : this.collection.currentPage;
+                return this.renderPage(options);
+            },
+
+            renderPage: function(options){
+                var self = this,
+                    view = this.view,
+                    xblockInfo = this.model,
+                    xblockUrl = xblockInfo.url();
+                return $.ajax({
+                    url: decodeURIComponent(xblockUrl) + "/" + view,
+                    type: 'GET',
+                    cache: false,
+                    data: this.getRenderParameters(options.page_number),
+                    headers: { Accept: 'application/json' },
+                    success: function(fragment) {
+                        self.handleXBlockFragment(fragment, options);
+                        self.processPaging({ requested_page: options.page_number });
+                        self.page.renderAddXBlockComponents()
+                    }
+                });
+            },
+
+            getRenderParameters: function(page_number) {
+                return {
+                    page_size: this.page_size,
+                    enable_paging: true,
+                    page_number: page_number
+                };
+            },
+
+            getPageCount: function(total_count){
+                if (total_count===0) return 1;
+                return Math.ceil(total_count / this.page_size);
+            },
+
+            setPage: function(page_number) {
+                this.render({ page_number: page_number});
+            },
+
+            processPaging: function(options){
+                // We have the Django template sneak us the pagination information,
+                // and we load it from a div here.
+                var $element = this.$el.find('.xblock-container-paging-parameters'),
+                    total = $element.data('total'),
+                    displayed = $element.data('displayed'),
+                    start = $element.data('start');
+
+                this.collection.currentPage = options.requested_page;
+                this.collection.totalCount = total;
+                this.collection.totalPages = this.getPageCount(total);
+                this.collection.start = start;
+                this.collection._size = displayed;
+
+                this.processPagingHeaderAndFooter();
+            },
+
+            processPagingHeaderAndFooter: function(){
+                // Rendering the container view detaches the header and footer from the DOM.
+                // It's just as easy to recreate them as it is to try to shove them back into the tree.
+                if (this.pagingHeader)
+                    this.pagingHeader.undelegateEvents();
+                if (this.pagingFooter)
+                    this.pagingFooter.undelegateEvents();
+
+                this.pagingHeader = new PagingHeader({
+                    view: this,
+                    el: this.$el.find('.container-paging-header')
+                });
+                this.pagingFooter = new PagingFooter({
+                    view: this,
+                    el: this.$el.find('.container-paging-footer')
+                });
+
+                this.pagingHeader.render();
+                this.pagingFooter.render();
+            },
+
+            refresh: function(block_added) {
+                if (block_added) {
+                    this.collection.totalCount += 1;
+                    this.collection._size +=1;
+                    if (this.collection.totalCount == 1) {
+                        this.render();
+                        return
+                    }
+                    this.collection.totalPages = this.getPageCount(this.collection.totalCount);
+                    var new_page = this.collection.totalPages - 1;
+                    // If we're on a new page due to overflow, or this is the first item, set the page.
+                    if (((this.collection.currentPage) != new_page) || this.collection.totalCount == 1) {
+                        this.setPage(new_page);
+                    } else {
+                        this.pagingHeader.render();
+                        this.pagingFooter.render();
+                    }
+                }
+            },
+
+            acknowledgeXBlockDeletion: function (locator){
+                this.notifyRuntime('deleted-child', locator);
+                this.collection._size -= 1;
+                this.collection.totalCount -= 1;
+                var current_page = this.collection.currentPage;
+                var total_pages = this.getPageCount(this.collection.totalCount);
+                this.collection.totalPages = total_pages;
+                // Starts counting from 0
+                if ((current_page + 1) > total_pages) {
+                    // The number of total pages has changed. Move down.
+                    // Also, be mindful of the off-by-one.
+                    this.setPage(total_pages - 1)
+                } else if ((current_page + 1) != total_pages) {
+                    // Refresh page to get any blocks shifted from the next page.
+                    this.setPage(current_page)
+                } else {
+                    // We're on the last page, just need to update the numbers in the
+                    // pagination interface.
+                    this.pagingHeader.render();
+                    this.pagingFooter.render();
+                }
+            },
+
+            sortDisplayName: function() {
+                return gettext("Date added");  // TODO add support for sorting
+            }
+        });
+
+        return PagedContainerView;
+    }); // end define();
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index 7a62e535919d..406e6e9b0354 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -25,8 +25,16 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
 
             view: 'container_preview',
 
+            defaultViewClass: ContainerView,
+
+            // Overridable by subclasses-- determines whether the XBlock component
+            // addition menu is added on initialization. You may set this to false
+            // if your subclass handles it.
+            components_on_init: true,
+
             initialize: function(options) {
                 BasePage.prototype.initialize.call(this, options);
+                this.viewClass = options.viewClass || this.defaultViewClass;
                 this.nameEditor = new XBlockStringFieldEditor({
                     el: this.$('.wrapper-xblock-field'),
                     model: this.model
@@ -35,11 +43,7 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 if (this.options.action === 'new') {
                     this.nameEditor.$('.xblock-field-value-edit').click();
                 }
-                this.xblockView = new ContainerView({
-                    el: this.$('.wrapper-xblock'),
-                    model: this.model,
-                    view: this.view
-                });
+                this.xblockView = this.getXBlockView();
                 this.messageView = new ContainerSubviews.MessageView({
                     el: this.$('.container-message'),
                     model: this.model
@@ -75,6 +79,18 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 }
             },
 
+            getViewParameters: function () {
+                return {
+                    el: this.$('.wrapper-xblock'),
+                    model: this.model,
+                    view: this.view
+                }
+            },
+
+            getXBlockView: function(){
+                return new this.viewClass(this.getViewParameters());
+            },
+
             render: function(options) {
                 var self = this,
                     xblockView = this.xblockView,
@@ -97,8 +113,11 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                         // Notify the runtime that the page has been successfully shown
                         xblockView.notifyRuntime('page-shown', self);
 
-                        // Render the add buttons
-                        self.renderAddXBlockComponents();
+                        // Render the add buttons. Paged containers should do this on their own.
+                        if (self.components_on_init) {
+                            // Render the add buttons
+                            self.renderAddXBlockComponents();
+                        }
 
                         // Refresh the views now that the xblock is visible
                         self.onXBlockRefresh(xblockView);
@@ -106,7 +125,8 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
 
                         // Re-enable Backbone events for any updated DOM elements
                         self.delegateEvents();
-                    }
+                    },
+                    block_added: options && options.block_added
                 });
             },
 
@@ -118,8 +138,8 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 return this.xblockView.model.urlRoot;
             },
 
-            onXBlockRefresh: function(xblockView) {
-                this.xblockView.refresh();
+            onXBlockRefresh: function(xblockView, block_added) {
+                this.xblockView.refresh(block_added);
                 // Update publish and last modified information from the server.
                 this.model.fetch();
             },
@@ -144,7 +164,7 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
 
                 modal.edit(xblockElement, this.model, {
                     refresh: function() {
-                        self.refreshXBlock(xblockElement);
+                        self.refreshXBlock(xblockElement, false);
                     }
                 });
             },
@@ -226,7 +246,7 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
 
                 // Inform the runtime that the child has been deleted in case
                 // other views are listening to deletion events.
-                xblockView.notifyRuntime('deleted-child', parent.data('locator'));
+                xblockView.acknowledgeXBlockDeletion(parent.data('locator'));
 
                 // Update publish and last modified information from the server.
                 this.model.fetch();
@@ -235,7 +255,7 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
             onNewXBlock: function(xblockElement, scrollOffset, data) {
                 ViewUtils.setScrollOffset(xblockElement, scrollOffset);
                 xblockElement.data('locator', data.locator);
-                return this.refreshXBlock(xblockElement);
+                return this.refreshXBlock(xblockElement, true);
             },
 
             /**
@@ -243,15 +263,16 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
              * reorderable container then the element will be refreshed inline. If not, then the
              * parent container will be refreshed instead.
              * @param element An element representing the xblock to be refreshed.
+             * @param block_added Flag to indicate that new block has been just added.
              */
-            refreshXBlock: function(element) {
+            refreshXBlock: function(element, block_added) {
                 var xblockElement = this.findXBlockElement(element),
                     parentElement = xblockElement.parent(),
                     rootLocator = this.xblockView.model.id;
                 if (xblockElement.length === 0 || xblockElement.data('locator') === rootLocator) {
-                    this.render({refresh: true});
+                    this.render({refresh: true, block_added: block_added});
                 } else if (parentElement.hasClass('reorderable-container')) {
-                    this.refreshChildXBlock(xblockElement);
+                    this.refreshChildXBlock(xblockElement, block_added);
                 } else {
                     this.refreshXBlock(this.findXBlockElement(parentElement));
                 }
@@ -261,9 +282,11 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
              * Refresh an xblock element inline on the page, using the specified xblockInfo.
              * Note that the element is removed and replaced with the newly rendered xblock.
              * @param xblockElement The xblock element to be refreshed.
+             * @param block_added Specifies if a block has been added, rather than just needs
+             * refreshing.
              * @returns {jQuery promise} A promise representing the complete operation.
              */
-            refreshChildXBlock: function(xblockElement) {
+            refreshChildXBlock: function(xblockElement, block_added) {
                 var self = this,
                     xblockInfo,
                     TemporaryXBlockView,
@@ -284,12 +307,12 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 });
                 temporaryView = new TemporaryXBlockView({
                     model: xblockInfo,
-                    view: 'reorderable_container_child_preview',
+                    view: self.xblockView.new_child_view,
                     el: xblockElement
                 });
                 return temporaryView.render({
                     success: function() {
-                        self.onXBlockRefresh(temporaryView);
+                        self.onXBlockRefresh(temporaryView, block_added);
                         temporaryView.unbind();  // Remove the temporary view
                     }
                 });
diff --git a/cms/static/js/views/pages/paged_container.js b/cms/static/js/views/pages/paged_container.js
new file mode 100644
index 000000000000..916bf3005e43
--- /dev/null
+++ b/cms/static/js/views/pages/paged_container.js
@@ -0,0 +1,36 @@
+/**
+ * PagedXBlockContainerPage is a variant of XBlockContainerPage that supports Pagination.
+ */
+define(["jquery", "underscore", "gettext", "js/views/pages/container", "js/views/paged_container"],
+    function ($, _, gettext, XBlockContainerPage, PagedContainerView) {
+        'use strict';
+        var PagedXBlockContainerPage = XBlockContainerPage.extend({
+
+            defaultViewClass: PagedContainerView,
+            components_on_init: false,
+
+            initialize: function (options){
+                this.page_size = options.page_size || 10;
+                XBlockContainerPage.prototype.initialize.call(this, options);
+            },
+
+            getViewParameters: function () {
+               return  _.extend(XBlockContainerPage.prototype.getViewParameters.call(this), {
+                   page_size: this.page_size,
+                   page: this
+               });
+            },
+
+            refreshXBlock: function(element, block_added) {
+                var xblockElement = this.findXBlockElement(element),
+                    rootLocator = this.xblockView.model.id;
+                if (xblockElement.length === 0 || xblockElement.data('locator') === rootLocator) {
+                    this.render({refresh: true, block_added: block_added});
+                } else {
+                    this.refreshChildXBlock(xblockElement, block_added);
+                }
+            }
+
+        });
+        return PagedXBlockContainerPage;
+    });
diff --git a/cms/static/js/views/paging.js b/cms/static/js/views/paging.js
index c6c3a491ca04..c4d9b1b602f5 100644
--- a/cms/static/js/views/paging.js
+++ b/cms/static/js/views/paging.js
@@ -1,7 +1,7 @@
-define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext"],
-    function(_, BaseView, AlertView, gettext) {
+define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext", "js/views/paging_mixin"],
+    function(_, BaseView, AlertView, gettext, PagingMixin) {
 
-        var PagingView = BaseView.extend({
+        var PagingView = BaseView.extend(PagingMixin).extend({
             // takes a Backbone Paginator as a model
 
             sortableColumns: {},
@@ -21,43 +21,10 @@ define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext"]
                 this.$('#' + sortColumn).addClass('current-sort');
             },
 
-            setPage: function(page) {
-                var self = this,
-                    collection = self.collection,
-                    oldPage = collection.currentPage;
-                collection.goTo(page, {
-                    reset: true,
-                    success: function() {
-                        window.scrollTo(0, 0);
-                    },
-                    error: function(collection) {
-                        collection.currentPage = oldPage;
-                        self.onError();
-                    }
-                });
-            },
-
             onError: function() {
                 // Do nothing by default
             },
 
-            nextPage: function() {
-                var collection = this.collection,
-                    currentPage = collection.currentPage,
-                    lastPage = collection.totalPages - 1;
-                if (currentPage < lastPage) {
-                    this.setPage(currentPage + 1);
-                }
-            },
-
-            previousPage: function() {
-                var collection = this.collection,
-                    currentPage = collection.currentPage;
-                if (currentPage > 0) {
-                    this.setPage(currentPage - 1);
-                }
-            },
-
             /**
              * Registers information about a column that can be sorted.
              * @param columnName The element name of the column.
@@ -110,6 +77,5 @@ define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext"]
                 this.setPage(0);
             }
         });
-
         return PagingView;
     }); // end define();
diff --git a/cms/static/js/views/paging_footer.js b/cms/static/js/views/paging_footer.js
index 7a81929e7adb..4ec3501d4482 100644
--- a/cms/static/js/views/paging_footer.js
+++ b/cms/static/js/views/paging_footer.js
@@ -38,6 +38,14 @@ define(["underscore", "js/views/baseview"], function(_, BaseView) {
                 currentPage = collection.currentPage + 1,
                 pageInput = this.$("#page-number-input"),
                 pageNumber = parseInt(pageInput.val(), 10);
+            if (pageNumber > collection.totalPages) {
+                pageNumber = false;
+            }
+            if (pageNumber <= 0) {
+                pageNumber = false;
+            }
+            // If we still have a page number by this point,
+            // and it's not the current page, load it.
             if (pageNumber && pageNumber !== currentPage) {
                 view.setPage(pageNumber - 1);
             }
diff --git a/cms/static/js/views/paging_mixin.js b/cms/static/js/views/paging_mixin.js
new file mode 100644
index 000000000000..16d518f856d4
--- /dev/null
+++ b/cms/static/js/views/paging_mixin.js
@@ -0,0 +1,37 @@
+define([],
+    function () {
+        var PagedMixin = {
+            setPage: function (page) {
+                var self = this,
+                    collection = self.collection,
+                    oldPage = collection.currentPage;
+                collection.goTo(page, {
+                    reset: true,
+                    success: function () {
+                        window.scrollTo(0, 0);
+                    },
+                    error: function (collection) {
+                        collection.currentPage = oldPage;
+                        self.onError();
+                    }
+                });
+            },
+            nextPage: function() {
+                var collection = this.collection,
+                    currentPage = collection.currentPage,
+                    lastPage = collection.totalPages - 1;
+                if (currentPage < lastPage) {
+                    this.setPage(currentPage + 1);
+                }
+            },
+
+            previousPage: function() {
+                var collection = this.collection,
+                    currentPage = collection.currentPage;
+                if (currentPage > 0) {
+                    this.setPage(currentPage - 1);
+                }
+            }
+        };
+        return PagedMixin;
+    });
diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss
new file mode 100644
index 000000000000..379d8785e315
--- /dev/null
+++ b/cms/static/sass/elements/_pagination.scss
@@ -0,0 +1,119 @@
+// studio - elements - pagination
+// ==========================
+
+%pagination {
+  @include clearfix();
+  display: inline-block;
+  width: flex-grid(3, 12);
+
+  &.pagination-compact {
+    @include text-align(right);
+  }
+
+  &.pagination-full {
+    display: block;
+    width: flex-grid(4, 12);
+    margin: $baseline auto;
+  }
+
+  .nav-item {
+    position: relative;
+    display: inline-block;
+  }
+
+  .nav-link {
+    @include transition(all $tmg-f2 ease-in-out 0s);
+    display: block;
+    padding: ($baseline/4) ($baseline*0.75);
+
+    &.previous {
+      margin-right: ($baseline/2);
+    }
+
+    &.next {
+      margin-left: ($baseline/2);
+    }
+
+    &:hover {
+      background-color: $blue;
+      border-radius: 3px;
+      color: $white;
+    }
+
+    &.is-disabled {
+      background-color: transparent;
+      color: $gray-l2;
+      pointer-events: none;
+    }
+  }
+
+  .nav-label {
+    @extend %cont-text-sr;
+  }
+
+  .pagination-form,
+  .current-page,
+  .page-divider,
+  .total-pages {
+    display: inline-block;
+  }
+
+  .current-page,
+  .page-number-input,
+  .total-pages {
+    @extend %t-copy-base;
+    @extend %t-strong;
+    width: ($baseline*2.5);
+    margin: 0 ($baseline*0.75);
+    padding: ($baseline/4);
+    text-align: center;
+    color: $gray;
+  }
+
+  .current-page {
+    @extend %ui-depth1;
+    position: absolute;
+    @include left(-($baseline/4));
+  }
+
+  .page-divider {
+    @extend %t-title4;
+    @extend %t-regular;
+    vertical-align: middle;
+    color: $gray-l2;
+  }
+
+  .pagination-form {
+    @extend %ui-depth2;
+    position: relative;
+
+    .page-number-label,
+    .submit-pagination-form {
+      @extend %cont-text-sr;
+    }
+
+    .page-number-input {
+      @include transition(all $tmg-f2 ease-in-out 0s);
+      border: 1px solid transparent;
+      border-bottom: 1px dotted $gray-l2;
+      border-radius: 0;
+      box-shadow: none;
+      background: none;
+
+      &:hover {
+        background-color: $white;
+        opacity: 0.6;
+      }
+
+      &:focus {
+        // borrowing the base input focus styles to match overall app
+        @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+        opacity: 1.0;
+        box-shadow: 0 0 3px $shadow-d1 inset;
+        background-color: $white;
+        border: 1px solid transparent;
+        border-radius: 3px;
+      }
+    }
+  }
+}
diff --git a/cms/static/sass/elements/_uploaded-assets.scss b/cms/static/sass/elements/_uploaded-assets.scss
index 63012797a07b..2253d2e6601e 100644
--- a/cms/static/sass/elements/_uploaded-assets.scss
+++ b/cms/static/sass/elements/_uploaded-assets.scss
@@ -28,120 +28,7 @@
     }
 
     .pagination {
-      @include clearfix;
-      display: inline-block;
-      width: flex-grid(3, 12);
-
-      &.pagination-compact {
-        @include text-align(right);
-      }
-
-      &.pagination-full {
-        display: block;
-        width: flex-grid(4, 12);
-        margin: $baseline auto;
-      }
-
-      .nav-item {
-        position: relative;
-        display: inline-block;
-      }
-
-      .nav-link {
-        @include transition(all $tmg-f2 ease-in-out 0s);
-        display: block;
-        padding: ($baseline/4) ($baseline*0.75);
-
-        &.previous {
-          margin-right: ($baseline/2);
-        }
-
-        &.next {
-          margin-left: ($baseline/2);
-        }
-
-        &:hover {
-          background-color: $blue;
-          border-radius: 3px;
-          color: $white;
-        }
-
-        &.is-disabled {
-          background-color: transparent;
-          color: $gray-l2;
-          pointer-events: none;
-        }
-      }
-
-      .nav-label {
-        @extend .sr;
-      }
-
-      .pagination-form,
-      .current-page,
-      .page-divider,
-      .total-pages {
-        display: inline-block;
-      }
-
-      .current-page,
-      .page-number-input,
-      .total-pages {
-        @extend %t-copy-base;
-        @extend %t-strong;
-        width: ($baseline*2.5);
-        margin: 0 ($baseline*0.75);
-        padding: ($baseline/4);
-        text-align: center;
-        color: $gray;
-      }
-
-      .current-page {
-        @extend %ui-depth1;
-        position: absolute;
-        @include left(-($baseline/4));
-      }
-
-      .page-divider {
-        @extend %t-title4;
-        @extend %t-regular;
-        vertical-align: middle;
-        color: $gray-l2;
-      }
-
-      .pagination-form {
-        @extend %ui-depth2;
-        position: relative;
-
-        .page-number-label,
-        .submit-pagination-form {
-          @extend .sr;
-        }
-
-        .page-number-input {
-          @include transition(all $tmg-f2 ease-in-out 0s);
-          border: 1px solid transparent;
-          border-bottom: 1px dotted $gray-l2;
-          border-radius: 0;
-          box-shadow: none;
-          background: none;
-
-          &:hover {
-            background-color: $white;
-            opacity: 0.6;
-          }
-
-          &:focus {
-            // borrowing the base input focus styles to match overall app
-            @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-            opacity: 1.0;
-            box-shadow: 0 0 3px $shadow-d1 inset;
-            background-color: $white;
-            border: 1px solid transparent;
-            border-radius: 3px;
-          }
-        }
-      }
+      @extend %pagination;
     }
 
     .assets-table {
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index d98506f6dfb2..0473d748e7d6 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -103,6 +103,37 @@
     }
   }
 
+  .container-paging-header {
+    .meta-wrap {
+      margin: $baseline ($baseline/2);
+    }
+    .meta {
+      @extend %t-copy-sub2;
+      display: inline-block;
+      vertical-align: top;
+      width: flex-grid(9, 12);
+      color: $gray-l1;
+
+      .count-current-shown,
+      .count-total,
+      .sort-order {
+        @extend %t-strong;
+      }
+    }
+
+    .pagination {
+      @extend %pagination;
+    }
+  }
+
+  .container-paging-footer {
+    .pagination {
+      @extend %pagination;
+    }
+  }
+
+
+
   // ====================
 
   //UI: default internal xblock content styles
diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss
index 24758b062f3c..8809148d930c 100644
--- a/cms/static/sass/style-app-extend1-rtl.scss
+++ b/cms/static/sass/style-app-extend1-rtl.scss
@@ -26,6 +26,7 @@
 
 // base - elements
 @import 'elements/typography';
+@import 'elements/pagination'; // pagination
 @import 'elements/icons'; // references to icons used
 @import 'elements/controls'; // buttons, link styles, sliders, etc.
 @import 'elements/xblocks'; //  studio rendering chrome for xblocks
diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss
index 27a935573c51..e17b62191134 100644
--- a/cms/static/sass/style-app-extend1.scss
+++ b/cms/static/sass/style-app-extend1.scss
@@ -27,6 +27,7 @@
 
 // base - elements
 @import 'elements/typography';
+@import 'elements/pagination'; // pagination
 @import 'elements/icons'; // references to icons used
 @import 'elements/controls'; // buttons, link styles, sliders, etc.
 @import 'elements/xblocks'; //  studio rendering chrome for xblocks
diff --git a/cms/templates/container.html b/cms/templates/container.html
index 663184a9b192..de395457f24b 100644
--- a/cms/templates/container.html
+++ b/cms/templates/container.html
@@ -31,7 +31,10 @@
     require(["js/factories/container"], function(ContainerFactory) {
         ContainerFactory(
             ${component_templates | n}, ${json.dumps(xblock_info) | n},
-            "${action}", ${json.dumps(is_unit_page)}
+            "${action}",
+            {
+                isUnitPage: ${json.dumps(is_unit_page)}
+            }
         );
     });
 </%block>
diff --git a/cms/templates/js/mock/mock-container-paged-xblock.underscore b/cms/templates/js/mock/mock-container-paged-xblock.underscore
new file mode 100644
index 000000000000..2314bb892577
--- /dev/null
+++ b/cms/templates/js/mock/mock-container-paged-xblock.underscore
@@ -0,0 +1,257 @@
+<header class="xblock-header">
+    <div class="xblock-header-primary">
+        <div class="header-details">
+            <span class="xblock-display-name">Test Container</span>
+        </div>
+        <div class="header-actions">
+            <ul class="actions-list">
+            </ul>
+        </div>
+    </div>
+</header>
+<article class="xblock-render">
+    <div class="xblock" data-locator="locator-container" data-request-token="page-render-token"
+         data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1">
+
+         <script type="text/template" id="paging-header-tpl">
+		    <div class="meta-wrap">
+		    <div class="meta">
+		        <%= messageHtml %>
+		    </div>
+		    <nav class="pagination pagination-compact top">
+		        <ol>
+		            <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon-angle-left"></i> <span class="nav-label"><%= gettext("Previous") %></span></a></li>
+		            <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label"><%= gettext("Next") %></span> <i class="icon-angle-right"></i></a></li>
+		        </ol>
+		    </nav>
+		</div>
+
+		</script>
+		<script type="text/template" id="paging-footer-tpl">
+		    <nav class="pagination pagination-full bottom">
+                <ol>
+                    <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon-angle-left"></i> <span class="nav-label"><%= gettext("Previous") %></span></a></li>
+                    <li class="nav-item page">
+                        <div class="pagination-form">
+                            <label class="page-number-label" for="page-number"><%= gettext("Page number") %></label>
+                            <input id="page-number-input" class="page-number-input" name="page-number" type="text" size="4" />
+                        </div>
+
+                        <span class="current-page"><%= current_page + 1 %></span>
+                        <span class="page-divider">/</span>
+                        <span class="total-pages"><%= total_pages %></span>
+                    </li>
+                    <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label"><%= gettext("Next") %></span> <i class="icon-angle-right"></i></a></li>
+                </ol>
+		    </nav>
+		</script>
+
+		<div class="container-paging-header"></div>
+
+        <div class="studio-xblock-wrapper" data-locator="locator-group-A">
+            <section class="wrapper-xblock level-nesting">
+                <header class="xblock-header">
+                    <div class="xblock-header-primary">
+                        <div class="header-details">
+                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
+                                <i class="icon-caret-down ui-toggle-expansion"></i>
+                                <span class="sr">Expand or Collapse</span>
+                            </a>
+                            <span class="xblock-display-name">Group A</span>
+                        </div>
+                        <div class="header-actions">
+                            <ul class="actions-list">
+                                <li class="action-item action-drag">
+                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </header>
+                <article class="xblock-render">
+                    <div class="xblock" data-request-token="page-render-token">
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-A1">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="xblock-header-primary">
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-A2">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="header-actions">
+                                        <div class="xblock-header-primary">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-A3">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="xblock-header-primary">
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="add-xblock-component new-component-item adding"></div>
+                    </div>
+                </article>
+            </section>
+        </div>
+        <div class="studio-xblock-wrapper" data-locator="locator-group-B">
+            <section class="wrapper-xblock level-nesting">
+                <header class="xblock-header">
+                    <div class="xblock-header-primary">
+                        <div class="header-details">
+                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
+                                <i class="icon-caret-down ui-toggle-expansion"></i>
+                                <span class="sr">Expand or Collapse</span>
+                            </a>
+                            <span class="xblock-display-name">Group B</span>
+                        </div>
+                        <div class="header-actions">
+                            <ul class="actions-list">
+                                <li class="action-item action-drag">
+                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </header>
+
+                <article class="xblock-render">
+                    <div class="xblock" data-request-token="page-render-token">
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-B1">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="xblock-header-primary">
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-B2">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="xblock-header-primary">
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="studio-xblock-wrapper" data-locator="locator-component-B3">
+                            <section class="wrapper-xblock level-element">
+                                <header class="xblock-header">
+                                    <div class="xblock-header-primary">
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="action-item action-edit">
+                                                    <a href="#" class="edit-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-duplicate">
+                                                    <a href="#" class="duplicate-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-delete">
+                                                    <a href="#" class="delete-button action-button"></a>
+                                                </li>
+                                                <li class="action-item action-drag">
+                                                    <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </header>
+                                <article class="xblock-render"></article>
+                            </section>
+                        </div>
+                        <div class="add-xblock-component new-component-item adding"></div>
+                    </div>
+                </article>
+            </section>
+        <div class="container-paging-footer"></div>
+    </div>
+</article>
diff --git a/cms/templates/js/mock/mock-xblock-paged.underscore b/cms/templates/js/mock/mock-xblock-paged.underscore
new file mode 100644
index 000000000000..c6c2c881d8d2
--- /dev/null
+++ b/cms/templates/js/mock/mock-xblock-paged.underscore
@@ -0,0 +1,21 @@
+<div class="studio-xblock-wrapper">
+    <header class="xblock-header">
+        <div class="header-details">
+            <span class="xblock-display-name">Mock XBlock</span>
+        </div>
+        <div class="header-actions">
+            <ul class="actions-list">
+            </ul>
+            <a href="#" class="button action-button notification-action-button" data-notification-action="add-missing-groups">
+                <span class="action-button-text">Add Missing Groups</span>
+            </a>
+        </div>
+    </header>
+    <article class="xblock-render">
+        <div class="xblock xblock-student_view xmodule_display xmodule_VerticalModule"
+             data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1"
+             data-type="None">
+            <p>Mock XBlock</p>
+        </div>
+    </article>
+</div>
diff --git a/cms/templates/library.html b/cms/templates/library.html
index 70bd836baddd..d367c333d270 100644
--- a/cms/templates/library.html
+++ b/cms/templates/library.html
@@ -22,8 +22,11 @@
 <%block name="requirejs">
     require(["js/factories/library"], function(LibraryFactory) {
         LibraryFactory(
-            ${component_templates | n},
-            ${json.dumps(xblock_info) | n}
+            ${component_templates | n}, ${json.dumps(xblock_info) | n},
+            {
+                isUnitPage: false,
+                page_size: 10
+            }
         );
     });
 </%block>
diff --git a/common/lib/xmodule/xmodule/library_root_xblock.py b/common/lib/xmodule/xmodule/library_root_xblock.py
index dc00aaa97fa9..6a58cf1b1d18 100644
--- a/common/lib/xmodule/xmodule/library_root_xblock.py
+++ b/common/lib/xmodule/xmodule/library_root_xblock.py
@@ -3,10 +3,10 @@
 """
 import logging
 
-from .studio_editable import StudioEditableModule
 from xblock.core import XBlock
 from xblock.fields import Scope, String, List
 from xblock.fragment import Fragment
+from xmodule.studio_editable import StudioEditableModule
 
 log = logging.getLogger(__name__)
 
@@ -42,29 +42,53 @@ def __str__(self):
 
     def author_view(self, context):
         """
-        Renders the Studio preview view, which supports drag and drop.
+        Renders the Studio preview view.
         """
         fragment = Fragment()
+        self.render_children(context, fragment, can_reorder=False, can_add=True)
+        return fragment
+
+    def render_children(self, context, fragment, can_reorder=False, can_add=False):  # pylint: disable=unused-argument
+        """
+        Renders the children of the module with HTML appropriate for Studio. Reordering is not supported.
+        """
         contents = []
 
-        for child_key in self.children:  # pylint: disable=E1101
-            context['reorderable_items'].add(child_key)
+        paging = context.get('paging', None)
+
+        children_count = len(self.children)  # pylint: disable=no-member
+        item_start, item_end = 0, children_count
+
+        # TODO sort children
+        if paging:
+            page_number = paging.get('page_number', 0)
+            raw_page_size = paging.get('page_size', None)
+            page_size = raw_page_size if raw_page_size is not None else children_count
+            item_start, item_end = page_size * page_number, page_size * (page_number + 1)
+
+        children_to_show = self.children[item_start:item_end]  # pylint: disable=no-member
+
+        for child_key in children_to_show:  # pylint: disable=E1101
             child = self.runtime.get_block(child_key)
-            rendered_child = self.runtime.render_child(child, StudioEditableModule.get_preview_view_name(child), context)
+            child_view_name = StudioEditableModule.get_preview_view_name(child)
+            rendered_child = self.runtime.render_child(child, child_view_name, context)
             fragment.add_frag_resources(rendered_child)
 
             contents.append({
-                'id': unicode(child_key),
+                'id': unicode(child.location),
                 'content': rendered_child.content,
             })
 
-        fragment.add_content(self.runtime.render_template("studio_render_children_view.html", {
-            'items': contents,
-            'xblock_context': context,
-            'can_add': True,
-            'can_reorder': True,
-        }))
-        return fragment
+        fragment.add_content(
+            self.runtime.render_template("studio_render_paged_children_view.html", {
+                'items': contents,
+                'xblock_context': context,
+                'can_add': can_add,
+                'first_displayed': item_start,
+                'total_children': children_count,
+                'displayed_children': len(children_to_show)
+            })
+        )
 
     @property
     def display_org_with_default(self):
diff --git a/common/test/acceptance/pages/studio/library.py b/common/test/acceptance/pages/studio/library.py
index e87c556da968..64f93f21167e 100644
--- a/common/test/acceptance/pages/studio/library.py
+++ b/common/test/acceptance/pages/studio/library.py
@@ -3,13 +3,14 @@
 """
 
 from bok_choy.page_object import PageObject
+from ...pages.studio.pagination import PaginatedMixin
 from .container import XBlockWrapper
 from ...tests.helpers import disable_animations
 from .utils import confirm_prompt, wait_for_notification
 from . import BASE_URL
 
 
-class LibraryPage(PageObject):
+class LibraryPage(PageObject, PaginatedMixin):
     """
     Library page in Studio
     """
diff --git a/common/test/acceptance/pages/studio/pagination.py b/common/test/acceptance/pages/studio/pagination.py
new file mode 100644
index 000000000000..a976149c37dd
--- /dev/null
+++ b/common/test/acceptance/pages/studio/pagination.py
@@ -0,0 +1,62 @@
+"""
+Mixin to include for Paginated container pages
+"""
+from selenium.webdriver.common.keys import Keys
+
+
+class PaginatedMixin(object):
+    """
+    Mixin class used for paginated page tests.
+    """
+    def nav_disabled(self, position, arrows=('next', 'previous')):
+        """
+        Verifies that pagination nav is disabled. Position can be 'top' or 'bottom'.
+
+        `top` is the header, `bottom` is the footer.
+
+        To specify a specific arrow, pass an iterable with a single element, 'next' or 'previous'.
+        """
+        return all([
+            self.q(css='nav.%s * a.%s-page-link.is-disabled' % (position, arrow))
+            for arrow in arrows
+        ])
+
+    def move_back(self, position):
+        """
+        Clicks one of the forward nav buttons. Position can be 'top' or 'bottom'.
+        """
+        self.q(css='nav.%s * a.previous-page-link' % position)[0].click()
+        self.wait_until_ready()
+
+    def move_forward(self, position):
+        """
+        Clicks one of the forward nav buttons. Position can be 'top' or 'bottom'.
+        """
+        self.q(css='nav.%s * a.next-page-link' % position)[0].click()
+        self.wait_until_ready()
+
+    def go_to_page(self, number):
+        """
+        Enter a number into the page number input field, and then try to navigate to it.
+        """
+        page_input = self.q(css="#page-number-input")[0]
+        page_input.click()
+        page_input.send_keys(str(number))
+        page_input.send_keys(Keys.RETURN)
+        self.wait_until_ready()
+
+    def get_page_number(self):
+        """
+        Returns the page number as the page represents it, in string form.
+        """
+        return self.q(css="span.current-page")[0].get_attribute('innerHTML')
+
+    def check_page_unchanged(self, first_block_name):
+        """
+        Used to make sure that a page has not transitioned after a bogus number is given.
+        """
+        if not self.xblocks[0].name == first_block_name:
+            return False
+        if not self.q(css='#page-number-input')[0].get_attribute('value') == '':
+            return False
+        return True
diff --git a/common/test/acceptance/tests/studio/test_studio_library.py b/common/test/acceptance/tests/studio/test_studio_library.py
index b505ac140dbc..491c9093d0fc 100644
--- a/common/test/acceptance/tests/studio/test_studio_library.py
+++ b/common/test/acceptance/tests/studio/test_studio_library.py
@@ -1,11 +1,15 @@
 """
 Acceptance tests for Content Libraries in Studio
 """
+from ddt import ddt, data
+
 from .base_studio_test import StudioLibraryTest
+from ...fixtures.course import XBlockFixtureDesc
 from ...pages.studio.utils import add_component
 from ...pages.studio.library import LibraryPage
 
 
+@ddt
 class LibraryEditPageTest(StudioLibraryTest):
     """
     Test the functionality of the library edit page.
@@ -107,3 +111,198 @@ def test_no_discussion_button(self):
         Ensure the UI is not loaded for adding discussions.
         """
         self.assertFalse(self.browser.find_elements_by_css_selector('span.large-discussion-icon'))
+
+    def test_library_pagination(self):
+        """
+        Scenario: Ensure that adding several XBlocks to a library results in pagination.
+        Given that I have a library in Studio with no XBlocks
+        And I create 10 Multiple Choice XBlocks
+        Then 10 are displayed.
+        When I add one more Multiple Choice XBlock
+        Then 1 XBlock will be displayed
+        When I delete that XBlock
+        Then 10 are displayed.
+        """
+        self.assertEqual(len(self.lib_page.xblocks), 0)
+        for _ in range(0, 10):
+            add_component(self.lib_page, "problem", "Multiple Choice")
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+        add_component(self.lib_page, "problem", "Multiple Choice")
+        self.assertEqual(len(self.lib_page.xblocks), 1)
+        self.lib_page.click_delete_button(self.lib_page.xblocks[0].locator)
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+
+    @data('top', 'bottom')
+    def test_nav_present_but_disabled(self, position):
+        """
+        Scenario: Ensure that the navigation buttons aren't active when there aren't enough XBlocks.
+        Given that I have a library in Studio with no XBlocks
+        The Navigation buttons should be disabled.
+        When I add a multiple choice problem
+        The Navigation buttons should be disabled.
+        """
+        self.assertEqual(len(self.lib_page.xblocks), 0)
+        self.assertTrue(self.lib_page.nav_disabled(position))
+        add_component(self.lib_page, "problem", "Multiple Choice")
+        self.assertTrue(self.lib_page.nav_disabled(position))
+
+
+@ddt
+class LibraryNavigationTest(StudioLibraryTest):
+    """
+    Test common Navigation actions
+    """
+    def setUp(self):  # pylint: disable=arguments-differ
+        """
+        Ensure a library exists and navigate to the library edit page.
+        """
+        super(LibraryNavigationTest, self).setUp(is_staff=True)
+        self.lib_page = LibraryPage(self.browser, self.library_key)
+        self.lib_page.visit()
+        self.lib_page.wait_until_ready()
+
+    def populate_library_fixture(self, library_fixture):
+        """
+        Create four pages worth of XBlocks, and offset by one so each is named
+        after the number they should be in line by the user's perception.
+        """
+        # pylint: disable=attribute-defined-outside-init
+        self.blocks = [XBlockFixtureDesc('html', str(i)) for i in xrange(1, 41)]
+        library_fixture.add_children(*self.blocks)
+
+    def test_arbitrary_page_selection(self):
+        """
+        Scenario: I can pick a specific page number of a Library at will.
+        Given that I have a library in Studio with 40 XBlocks
+        When I go to the 3rd page
+        The first XBlock should be the 21st XBlock
+        When I go to the 4th Page
+        The first XBlock should be the 31st XBlock
+        When I go to the 1st page
+        The first XBlock should be the 1st XBlock
+        When I go to the 2nd page
+        The first XBlock should be the 11th XBlock
+        """
+        self.lib_page.go_to_page(3)
+        self.assertEqual(self.lib_page.xblocks[0].name, '21')
+        self.lib_page.go_to_page(4)
+        self.assertEqual(self.lib_page.xblocks[0].name, '31')
+        self.lib_page.go_to_page(1)
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        self.lib_page.go_to_page(2)
+        self.assertEqual(self.lib_page.xblocks[0].name, '11')
+
+    def test_bogus_page_selection(self):
+        """
+        Scenario: I can't pick a nonsense page number of a Library
+        Given that I have a library in Studio with 40 XBlocks
+        When I attempt to go to the 'a'th page
+        The input field will be cleared and no change of XBlocks will be made
+        When I attempt to visit the 5th page
+        The input field will be cleared and no change of XBlocks will be made
+        When I attempt to visit the -1st page
+        The input field will be cleared and no change of XBlocks will be made
+        When I attempt to visit the 0th page
+        The input field will be cleared and no change of XBlocks will be made
+        """
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        self.lib_page.go_to_page('a')
+        self.assertTrue(self.lib_page.check_page_unchanged('1'))
+        self.lib_page.go_to_page(-1)
+        self.assertTrue(self.lib_page.check_page_unchanged('1'))
+        self.lib_page.go_to_page(5)
+        self.assertTrue(self.lib_page.check_page_unchanged('1'))
+        self.lib_page.go_to_page(0)
+        self.assertTrue(self.lib_page.check_page_unchanged('1'))
+
+    @data('top', 'bottom')
+    def test_nav_buttons(self, position):
+        """
+        Scenario: Ensure that the navigation buttons work.
+        Given that I have a library in Studio with 40 XBlocks
+        The previous button should be disabled.
+        The first XBlock should be the 1st XBlock
+        Then if I hit the next button
+        The first XBlock should be the 11th XBlock
+        Then if I hit the next button
+        The first XBlock should be the 21st XBlock
+        Then if I hit the next button
+        The first XBlock should be the 31st XBlock
+        And the next button should be disabled
+        Then if I hit the previous button
+        The first XBlock should be the 21st XBlock
+        Then if I hit the previous button
+        The first XBlock should be the 11th XBlock
+        Then if I hit the previous button
+        The first XBlock should be the 1st XBlock
+        And the previous button should be disabled
+        """
+        # Check forward navigation
+        self.assertTrue(self.lib_page.nav_disabled(position, ['previous']))
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        self.lib_page.move_forward(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '11')
+        self.lib_page.move_forward(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '21')
+        self.lib_page.move_forward(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '31')
+        self.lib_page.nav_disabled(position, ['next'])
+
+        # Check backward navigation
+        self.lib_page.move_back(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '21')
+        self.lib_page.move_back(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '11')
+        self.lib_page.move_back(position)
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        self.assertTrue(self.lib_page.nav_disabled(position, ['previous']))
+
+    def test_library_pagination(self):
+        """
+        Scenario: Ensure that adding several XBlocks to a library results in pagination.
+        Given that I have a library in Studio with 40 XBlocks
+        Then 10 are displayed
+        And the first XBlock will be the 1st one
+        And I'm on the 1st page
+        When I add 1 Multiple Choice XBlock
+        Then 1 XBlock will be displayed
+        And I'm on the 5th page
+        The first XBlock will be the newest one
+        When I delete that XBlock
+        Then 10 are displayed
+        And I'm on the 4th page
+        And the first XBlock is the 31st one
+        And the last XBlock is the 40th one.
+        """
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+        self.assertEqual(self.lib_page.get_page_number(), '1')
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        add_component(self.lib_page, "problem", "Multiple Choice")
+        self.assertEqual(len(self.lib_page.xblocks), 1)
+        self.assertEqual(self.lib_page.get_page_number(), '5')
+        self.assertEqual(self.lib_page.xblocks[0].name, "Multiple Choice")
+        self.lib_page.click_delete_button(self.lib_page.xblocks[0].locator)
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+        self.assertEqual(self.lib_page.get_page_number(), '4')
+        self.assertEqual(self.lib_page.xblocks[0].name, '31')
+        self.assertEqual(self.lib_page.xblocks[-1].name, '40')
+
+    def test_delete_shifts_blocks(self):
+        """
+        Scenario: Ensure that removing an XBlock shifts other blocks back.
+        Given that I have a library in Studio with 40 XBlocks
+        Then 10 are displayed
+        And I will be on the first page
+        When I delete the third XBlock
+        There will be 10 displayed
+        And the first XBlock will be the first one
+        And the last XBlock will be the 11th one
+        And I will be on the first page
+        """
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+        self.assertEqual(self.lib_page.get_page_number(), '1')
+        self.lib_page.click_delete_button(self.lib_page.xblocks[2].locator, confirm=True)
+        self.assertEqual(len(self.lib_page.xblocks), 10)
+        self.assertEqual(self.lib_page.xblocks[0].name, '1')
+        self.assertEqual(self.lib_page.xblocks[-1].name, '11')
+        self.assertEqual(self.lib_page.get_page_number(), '1')
diff --git a/lms/templates/studio_render_paged_children_view.html b/lms/templates/studio_render_paged_children_view.html
new file mode 100644
index 000000000000..fe5b5403e1ab
--- /dev/null
+++ b/lms/templates/studio_render_paged_children_view.html
@@ -0,0 +1,23 @@
+<%! from django.utils.translation import ugettext as _ %>
+
+<%namespace name='static' file='static_content.html'/>
+
+% for template_name in ["paging-header", "paging-footer"]:
+<script type="text/template" id="${template_name}-tpl">
+    <%static:include path="js/${template_name}.underscore" />
+</script>
+% endfor
+
+<div class="xblock-container-paging-parameters" data-start="${first_displayed}" data-displayed="${displayed_children}" data-total="${total_children}"></div>
+
+<div class="container-paging-header"></div>
+
+% for item in items:
+    ${item['content']}
+% endfor
+
+% if can_add:
+    <div class="add-xblock-component new-component-item adding"></div>
+% endif
+
+<div class="container-paging-footer"></div>