diff -u /dev/null b/panels_ipe/css/panels_ipe.css
--- /dev/null
+++ b/panels_ipe/css/panels_ipe.css
@@ -0,0 +1,111 @@
+/**
+ * @file
+ * Contains all CSS for the Panels In-Place Editor.
+ */
+
+/* Fix the output of the AppView to the bottom of the screen. */
+#panels-ipe-tray {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+/* Force text to render as a sans-serif web-safe font. */
+#panels-ipe-tray, #panels-ipe-tray a, #panels-ipe-tray p {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+}
+
+/* Remove list styling from the output of the TabsView. */
+.ipe-tabs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Display tabs inline and slightly on top of .ipe-tabs-content. */
+.ipe-tab {
+  display: inline-block;
+  padding: 10px;
+  background-color: white;
+  border-top: 1px solid darkgray;
+  margin-bottom: -1px;
+}
+
+.ipe-tab:first-child {
+  border-left: 1px solid darkgray;
+  border-top-left-radius: 5px;
+}
+
+.ipe-tab:last-child {
+  border-right: 1px solid darkgray;
+  border-top-right-radius: 5px;
+}
+
+.ipe-tab.active a {
+  color: darkgray;
+}
+
+.ipe-tab a {
+  color: black;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+}
+
+.ipe-tab a:hover {
+  color: darkgray;
+  border: none;
+}
+
+/* Provide default styles and a minimum height for tab content. */
+.ipe-tab-content {
+  display: none;
+  min-height: 100px;
+  padding: 25px;
+  background-color: white;
+  border-top: 1px solid darkgray;
+}
+
+.ipe-tab-content.active {
+  display: block;
+}
+
+/* Styles for the Layout selector. */
+.ipe-current-layout, .ipe-all-layouts {
+  display: inline-block;
+  height: 50px;
+}
+
+.ipe-current-layout {
+  margin-right: 50px;
+}
+
+/* Remove <ul> list styling. */
+.ipe-layouts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Show layouts as clickable things. */
+.ipe-layout {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.ipe-layout-title {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.ipe-layout-title a {
+
+}
+
+/* Hide the tray for the edit and save tabs. */
+[data-tab-content-id="edit"].active, [data-tab-content-id="save"].active {
+  display: none;
+}
diff -u b/panels_ipe/js/models/AppModel.js b/panels_ipe/js/models/AppModel.js
--- b/panels_ipe/js/models/AppModel.js
+++ b/panels_ipe/js/models/AppModel.js
@@ -19,28 +19,47 @@
     /**
      * @type {object}
      *
+     * @prop {bool} active
+     * @prop {Drupal.panels_ipe.TabModel} activeTab
      * @prop {Drupal.panels_ipe.BlockModel} activeBlock
      * @prop {Drupal.panels_ipe.RegionModel} activeRegion
      */
-    defaults: /** @lends Drupal.quickedit.AppModel# */{
+    defaults: /** @lends Drupal.panels_ipe.AppModel# */{
 
       /**
-       * The currently active block.
+       * Whether or not the editing part of the application is active.
        *
-       * @type {Drupal.panels_ipe.BlockModel}
+       * @type {bool}
+       */
+      active: false,
+
+      /**
+       * The current Layout.
+       *
+       * @type {Drupal.panels_ipe.LayoutModel}
+       */
+      layout: null,
+
+      /**
+       * A collection of all tabs on screen.
        *
-       * @see Drupal.panels_ipe.BlockModel.states
+       * @type {Drupal.panels_ipe.TabCollection}
        */
-      activeBlock: null,
+      tabCollection: null,
 
       /**
-       * The currently active region.
+       * The "Edit" tab.
        *
-       * @type {Drupal.panels_ipe.RegionModel}
+       * @type {Drupal.panels_ipe.TabModel}
+       */
+      editTab: null,
+
+      /**
+       * The "Save" tab.
        *
-       * @see Drupal.panels_ipe.RegionModel.states
+       * @type {Drupal.panels_ipe.TabModel}
        */
-      activeRegion: null
+      saveTab: null
     }
 
   });
diff -u b/panels_ipe/js/models/BlockModel.js b/panels_ipe/js/models/BlockModel.js
--- b/panels_ipe/js/models/BlockModel.js
+++ b/panels_ipe/js/models/BlockModel.js
@@ -15,6 +15,13 @@
     defaults: /** @lends Drupal.panels_ipe.BlockModel# */{
 
       /**
+       * The block state.
+       *
+       * @type {bool}
+       */
+      active: false,
+
+      /**
        * The ID of the block.
        *
        * @type {string}
@@ -46,6 +53,9 @@
       html: null
     },
 
+    /**
+     * @type {function}
+     */
     url: function() {
       return Drupal.panels_ipe.urlRoot(drupalSettings) + '/block/' + this.get('uuid');
     }
diff -u b/panels_ipe/js/models/RegionModel.js b/panels_ipe/js/models/RegionModel.js
--- b/panels_ipe/js/models/RegionModel.js
+++ b/panels_ipe/js/models/RegionModel.js
@@ -38,14 +38,7 @@
        *
        * @see Drupal.panels_ipe.BlockCollection
        */
-      blocks: null,
-
-      /**
-       * The HTML content of the region.
-       *
-       * @type {string}
-       */
-      html: null
+      blockCollection: null
     }
 
   });
diff -u b/panels_ipe/js/panels_ipe.js b/panels_ipe/js/panels_ipe.js
--- b/panels_ipe/js/panels_ipe.js
+++ b/panels_ipe/js/panels_ipe.js
@@ -7,71 +7,101 @@
 (function ($, _, Backbone, Drupal) {
 
-    'use strict';
+  'use strict';
 
-    /**
-     * Contains initial Backbone initialization for the IPE.
-     *
-     * @type {Drupal~behavior}
-     */
-    Drupal.behaviors.panels_ipe = {
-        attach: function (context, settings) {
-            // Perform initial setup of our app.
-            $('body').once('panels-ipe-init').each(Drupal.panels_ipe.init, [settings]);
-        },
-        detach: function (context, settings) {
-
-        }
-    };
-
-    /**
-     * @namespace
-     */
-    Drupal.panels_ipe = {};
-
-    /**
-     * Setups up our initial Collection and Views based on the current settings.
-     */
-    Drupal.panels_ipe.init = function(settings) {
-        // Assemble the region and block collections.
-        var region_collection = new Drupal.panels_ipe.RegionCollection();
-        for (var i in settings.panels_ipe.regions) {
-            var region = new Drupal.panels_ipe.RegionModel();
-            region.set(settings.panels_ipe.regions[i]);
-            var region_view = new Drupal.panels_ipe.RegionView({
-                'model': region,
-                'el': "[data-region-name='" + settings.panels_ipe.regions[i].name + "']"
-            });
-            region_view.render(true);
-            region_collection.add(region);
-
-            var block_collection = new Drupal.panels_ipe.BlockCollection();
-            for (var j in settings.panels_ipe.regions[i].blocks) {
-                // Add a new block model.
-                var block = new Drupal.panels_ipe.BlockModel();
-                block.set(settings.panels_ipe.regions[i].blocks[j]);
-                block_collection.add(block);
-
-                // Attach the new block model to a view.
-                var block_view = new Drupal.panels_ipe.BlockView({
-                    'model': block,
-                    'el': "[data-block-id='" + settings.panels_ipe.regions[i].blocks[j].uuid + "']"
-                });
-                block_view.render(true);
-            }
-        }
-
-        // Create our app.
-        Drupal.panels_ipe.app = new Drupal.panels_ipe.AppView({
-            model: new Drupal.quickedit.AppModel(),
-            regionCollection: region_collection
-        });
+  /**
+   * Contains initial Backbone initialization for the IPE.
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.panels_ipe = {
+    attach: function (context, settings) {
+      // Perform initial setup of our app.
+      $('body').once('panels-ipe-init').each(Drupal.panels_ipe.init, [settings]);
+    },
+    detach: function (context, settings) {
+
+    }
+  };
+
+  /**
+   * @namespace
+   */
+  Drupal.panels_ipe = {};
+
+  /**
+   * Setups up our initial Collection and Views based on the current settings.
+   */
+  Drupal.panels_ipe.init = function(settings) {
+    // Set up our initial tabs.
+    var tab_collection = new Drupal.panels_ipe.TabCollection();
+    tab_collection.add({title: 'Change Layout', id: 'change_layout'});
+    tab_collection.add({title: 'Manage Content', id: 'manage_content'});
+
+    // The edit and save tabs are special, and are tracked by our app.
+    var edit_tab = new Drupal.panels_ipe.TabModel({title: 'Edit', id: 'edit'});
+    var save_tab = new Drupal.panels_ipe.TabModel({title: 'Save', id: 'save'});
+    tab_collection.add(edit_tab);
+    tab_collection.add(save_tab);
+
+    // Create a global(ish) AppModel.
+    Drupal.panels_ipe.app = new Drupal.panels_ipe.AppModel({
+      'tabCollection': tab_collection,
+      'editTab': edit_tab,
+      'saveTab': save_tab
+    });
+
+    // Set up our initial tab views.
+    var tab_views = {
+      'change_layout': new Drupal.panels_ipe.LayoutPicker()
     };
 
-    /**
-     * Returns the urlRoot for all callbacks
-     */
-    Drupal.panels_ipe.urlRoot = function(settings) {
-        return '/admin/panels_ipe/page/' + settings.panels_ipe.page.id + '/variant/' + settings.panels_ipe.display_variant.id;
-    };
+    // Create an AppView instance.
+    var app_view = new Drupal.panels_ipe.AppView({
+      model: Drupal.panels_ipe.app,
+      'el': '#panels-ipe-tray',
+      'tabContentViews': tab_views
+    });
+    $('body').append(app_view.render().$el);
+
+    // Assemble the initial region and block collections.
+    // This logic is a little messy, as traditionally we would never initialize
+    // Backbone with existing HTML content.
+    var region_collection = new Drupal.panels_ipe.RegionCollection();
+    for (var i in settings.panels_ipe.regions) {
+      var region = new Drupal.panels_ipe.RegionModel();
+      region.set(settings.panels_ipe.regions[i]);
+
+      var block_collection = new Drupal.panels_ipe.BlockCollection();
+      for (var j in settings.panels_ipe.regions[i].blocks) {
+        // Add a new block model.
+        var block = new Drupal.panels_ipe.BlockModel();
+        block.set(settings.panels_ipe.regions[i].blocks[j]);
+        block_collection.add(block);
+      }
+
+      region.set({'blockCollection': block_collection});
+
+      region_collection.add(region);
+    }
+
+    // Create the Layout model/view.
+    var layout = new Drupal.panels_ipe.LayoutModel(settings.panels_ipe.layout);
+    layout.set({'regionCollection': region_collection});
+    var layout_view = new Drupal.panels_ipe.LayoutView({
+      'model': layout,
+      'el': "#panels-ipe-content"
+    });
+    layout_view.render();
+
+    Drupal.panels_ipe.app.set({'layout': layout});
+    app_view.layoutView = layout_view;
+  };
+
+  /**
+   * Returns the urlRoot for all callbacks
+   */
+  Drupal.panels_ipe.urlRoot = function(settings) {
+    return '/admin/panels_ipe/variant/' + settings.panels_ipe.display_variant.id;
+  };
 
 }(jQuery, _, Backbone, Drupal));
diff -u b/panels_ipe/js/views/AppView.js b/panels_ipe/js/views/AppView.js
--- b/panels_ipe/js/views/AppView.js
+++ b/panels_ipe/js/views/AppView.js
@@ -1,6 +1,7 @@
 /**
  * @file
- * The primary Backbone view for Panels IPE.
+ * The primary Backbone view for Panels IPE. For now this only controls the
+ * bottom tray, but in the future could have a larger scope.
  *
  * see Drupal.panels_ipe.AppModel
  */
@@ -12,6 +13,26 @@
   Drupal.panels_ipe.AppView = Backbone.View.extend(/** @lends Drupal.panels_ipe.AppView# */{
 
     /**
+     * @type {function}
+     */
+    template: _.template('<div class="ipe-tab-wrapper"></div>'),
+
+    /**
+     * @type {Drupal.panels_ipe.TabsView}
+     */
+    tabsView: null,
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutView}
+     */
+    layoutView: null,
+
+    /**
+     * @type {Drupal.panels_ipe.AppModel}
+     */
+    model: null,
+
+    /**
      * @constructs
      *
      * @augments Backbone.View
@@ -20,12 +41,123 @@
      *   An object with the following keys:
      * @param {Drupal.panels_ipe.AppModel} options.model
      *   The application state model.
-     * @param {Drupal.panels_ipe.RegionCollection} options.regionCollection
-     *   All on-page regions.
+     * @param {Object} options.tabContentViews
+     *   An object mapping TabModel ids to arbitrary Backbone views.
      */
     initialize: function (options) {
       this.model = options.model;
-      this.regionCollection = options.regionCollection;
+
+      // Create a TabsView instance.
+      this.tabsView = new Drupal.panels_ipe.TabsView({
+        'collection': this.model.get('tabCollection'),
+        'tabViews': options.tabContentViews
+      });
+
+      // Listen to important events throughout the app.
+      this.listenTo(this.model, "changeLayout", this.changeLayout);
+      this.listenTo(this.model.get('editTab'), "change:active", this.clickEditTab);
+    },
+
+    /**
+     * Appends the IPE tray to the bottom of the screen.
+     */
+    render: function() {
+      // Empty our list.
+      this.$el.html(this.template(this.model.toJSON()));
+      // Add our tab collection to the App.
+      this.tabsView.setElement(this.$('.ipe-tab-wrapper')).render();
+      // Re-render our layout.
+      if (this.layoutView) {
+        this.layoutView.render();
+      }
+      return this;
+    },
+
+    /**
+     * Actives all regions and blocks for editing.
+     */
+    openIPE: function() {
+      var active = this.model.get('active');
+      if (active) {
+        return;
+      }
+
+      // Set our active state correctly.
+      this.model.set({'active': true});
+
+      // Set the layout's active state correctly.
+      this.model.get('layout').set({'active': true});
+
+      this.$el.addClass('active');
+    },
+
+    /**
+     * Deactivate all regions and blocks for editing.
+     */
+    closeIPE: function() {
+      var active = this.model.get('active');
+      if (!active) {
+        return;
+      }
+
+      // Set our active state correctly.
+      this.model.set({'active': false});
+
+      // Set the layout's active state correctly.
+      this.model.get('layout').set({'active': false});
+
+      this.$el.removeClass('active');
+    },
+
+    /**
+     * Event callback for when a new layout has been selected.
+     */
+    changeLayout: function (args) {
+      // Grab the layout from the argument list.
+      var layout = args[0];
+
+      // Sync the layout from Drupal.
+      var self = this;
+      layout.fetch().done(function() {
+        // Grab all the blocks from the current layout.
+        var regions = self.model.get('layout').get('regionCollection');
+        var block_collection = new Drupal.panels_ipe.BlockCollection();
+        regions.each(function(region) {
+          block_collection.add(region.get('blockCollection').toJSON());
+        });
+
+        // Get the first region in the layout.
+        // @todo Be smarter about re-adding blocks.
+        var first_region = layout.get('regionCollection').at(0);
+
+        // Append all blocks from previous layout.
+        first_region.set({'blockCollection': block_collection});
+
+        // Change the default layout in our AppModel.
+        self.model.set({'layout': layout});
+
+        // Create a new LayoutView.
+        self.layoutView = new Drupal.panels_ipe.LayoutView({
+          'model': layout,
+          'el': "#panels-ipe-content"
+        });
+
+        // Re-render the app.
+        self.render();
+      });
+    },
+
+    /**
+     * Sets the IPE active state based on the "Edit" TabModel.
+     */
+    clickEditTab: function(){
+      var active = this.model.get('editTab').get('active');
+      if (active) {
+        this.openIPE();
+      }
+      else {
+        this.closeIPE();
+      }
     }
 
   });
diff -u b/panels_ipe/js/views/BlockView.js b/panels_ipe/js/views/BlockView.js
--- b/panels_ipe/js/views/BlockView.js
+++ b/panels_ipe/js/views/BlockView.js
@@ -12,9 +12,14 @@
   Drupal.panels_ipe.BlockView = Backbone.View.extend(/** @lends Drupal.panels_ipe.BlockView# */{
 
     /**
-     * @type {string}
+     * @type {function}
      */
-    template: _.template('<div class="panels-ipe-block"><h5>Block: <%= label %></h5><%= html %></div>'),
+    template: _.template('<div class="panels-ipe-header"><h5>Block: <%= label %></h5></div>'),
+
+    /**
+     * @type {Drupal.panels_ipe.BlockModel}
+     */
+    model: null,
 
     /**
      * @constructs
@@ -30,23 +35,25 @@
      */
     initialize: function (options) {
       this.model = options.model;
-      if (options.el) {
-        this.model.set({html: this.$el.html()});
+      if (options.el && !this.model.get('html')) {
+        this.model.set({'html': this.$el.prop('outerHTML')});
       }
-      this.$el.draggable();
+      this.listenTo(this.model, 'reset', this.render);
     },
 
     /**
      * Renders the wrapping elements and refreshes a block model.
-     *
-     *  @param {bool} nosync
-     *   An optional flag to skip syncing from the server before render.
      */
-    render: function(nosync){
-      if (!nosync) {
-        this.model.sync('read', this.model);
+    render: function() {
+      // Replace our current HTML.
+      this.$el.replaceWith(this.model.get('html'));
+      this.setElement("[data-block-id='" + this.model.get('uuid') + "']");
+
+      // Check our active state.
+      if (this.model.get('active')) {
+        this.$el.prepend(this.template(this.model.toJSON()));
       }
-      this.$el.html(this.template(this.model.toJSON()));
+      return this;
     }
 
   });
reverted:
--- b/panels_ipe/js/views/RegionView.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @file
- * The primary Backbone view for a Region.
- *
- * see Drupal.panels_ipe.RegionModel
- */
-
-(function ($, _, Backbone, Drupal) {
-
-  'use strict';
-
-  Drupal.panels_ipe.RegionView = Backbone.View.extend(/** @lends Drupal.panels_ipe.RegionView# */{
-
-    /**
-     * @type {string}
-     */
-    template: _.template('<div class="panels-ipe-region"><h5>Region: <%= name %></h5><%= html %></div>'),
-
-    /**
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {Drupal.panels_ipe.RegionModel} options.model
-     *   The region state model.
-     * @param {string} options.el
-     *   An optional selector name if an existing element is already on screen.
-     */
-    initialize: function (options) {
-      this.model = options.model;
-      if (options.el) {
-        this.model.set({html: this.$el.html()});
-      }
-    },
-
-    /**
-     * Renders the wrapping elements and refreshes a block model.
-     */
-    render: function(){
-      this.$el.html(this.template(this.model.toJSON()));
-      return this;
-    }
-
-  });
-
-}(jQuery, _, Backbone, Drupal));
diff -u b/panels_ipe/panels_ipe.info.yml b/panels_ipe/panels_ipe.info.yml
--- b/panels_ipe/panels_ipe.info.yml
+++ b/panels_ipe/panels_ipe.info.yml
@@ -7,0 +8 @@
+  - page_manager
\ No newline at end of file
diff -u b/panels_ipe/panels_ipe.libraries.yml b/panels_ipe/panels_ipe.libraries.yml
--- b/panels_ipe/panels_ipe.libraries.yml
+++ b/panels_ipe/panels_ipe.libraries.yml
@@ -7,10 +7,17 @@
     js/models/AppModel.js: {}
     js/models/BlockModel.js: {}
     js/models/RegionModel.js: {}
+    js/models/TabModel.js: {}
+    js/models/LayoutModel.js: {}
     # Views.
     js/views/AppView.js: {}
     js/views/BlockView.js: {}
-    js/views/RegionView.js: {}
+    js/views/LayoutPicker.js: {}
+    js/views/LayoutView.js: {}
+    js/views/TabsView.js: {}
+  css:
+    component:
+      css/panels_ipe.css: {}
   dependencies:
     - core/jquery
     - core/jquery.once
diff -u b/panels_ipe/panels_ipe.routing.yml b/panels_ipe/panels_ipe.routing.yml
--- b/panels_ipe/panels_ipe.routing.yml
+++ b/panels_ipe/panels_ipe.routing.yml
@@ -2,6 +2,19 @@
-  path: '/admin/panels_ipe/page/{page}/variant/{variant_id}/block/{block_id}'
+  path: '/admin/panels_ipe/variant/{variant_id}/block/{block_id}'
   defaults:
       _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getBlock'
   requirements:
     _permission: 'access panels in-place editing'
-    _entity_access: page.view
\ No newline at end of file
+
+panels_ipe.layouts:
+  path: '/admin/panels_ipe/variant/{variant_id}/layouts'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getLayouts'
+  requirements:
+    _permission: 'access panels in-place editing'
+
+panels_ipe.layout:
+  path: '/admin/panels_ipe/variant/{variant_id}/layouts/{layout_id}'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getLayout'
+  requirements:
+    _permission: 'access panels in-place editing'
\ No newline at end of file
diff -u b/panels_ipe/src/Controller/PanelsIPEPageController.php b/panels_ipe/src/Controller/PanelsIPEPageController.php
--- b/panels_ipe/src/Controller/PanelsIPEPageController.php
+++ b/panels_ipe/src/Controller/PanelsIPEPageController.php
@@ -9,9 +9,10 @@
 
 use Drupal\Core\Block\BlockManagerInterface;
 use Drupal\Core\Controller\ControllerBase;
-use Drupal\page_manager\PageVariantInterface;
+use Drupal\Core\Render\Element;
+use Drupal\layout_plugin\Layout;
 use Drupal\Core\Render\RendererInterface;
-use Drupal\page_manager\PageInterface;
+use Drupal\page_manager\Entity\PageVariant;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
@@ -56,32 +57,35 @@
   }
 
   /**
-   * AJAX callback to get a block's metadata and rendered HTML.
+   * Gets a block's metadata and rendered HTML.
    *
-   * @param PageInterface $page
-   *   The current Page Manager page.
    * @param string $variant_id
    *   The machine name of the current display variant.
    * @param string $block_id
    *   The UUID of the requested block.
    *
-   * @return JsonResponse|AccessDeniedHttpException
+   * @return JsonResponse
+   *
+   * @throws AccessDeniedHttpException|NotFoundHttpException
    */
-  public function getBlock(PageInterface $page, $variant_id, $block_id) {
+  public function getBlock($variant_id, $block_id) {
     // Check if the variant exists.
-    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant */
-    if (!$variant = $page->getVariant($variant_id)) {
+    /** @var \Drupal\page_manager\PageVariantInterface $variant */
+    if (!$variant = PageVariant::load($variant_id)) {
       throw new NotFoundHttpException();
     }
 
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $variant->getVariantPlugin();
+
     // Check if the block exists.
-    if (!$block = $variant->getBlock($block_id)) {
+    if (!$block = $variant_plugin->getBlock($block_id)) {
       throw new NotFoundHttpException();
     }
 
     // Check entity access before continuing.
     $user = $this->currentUser();
-    if (!$variant->access($user) || !$block->access($user)) {
+    if (!$block->access($user)) {
       throw new AccessDeniedHttpException();
     }
 
@@ -90,7 +94,9 @@
     $configuration = $block->getConfiguration();
     $elements = [
       '#theme' => 'block',
-      '#attributes' => [],
+      '#attributes' => [
+        'data-block-id' => $block->getConfiguration()['uuid']
+      ],
       '#configuration' => $configuration,
       '#plugin_id' => $block->getPluginId(),
       '#base_plugin_id' => $block->getBaseId(),
@@ -111,2 +117,106 @@
 
+  /**
+   * Gets a list of available Layouts, without wrapping HTML.
+   *
+   * @param string $variant_id
+   *   The machine name of the current display variant.
+   *
+   * @return JsonResponse
+   *
+   * @throws AccessDeniedHttpException|NotFoundHttpException
+   */
+  public function getLayouts($variant_id) {
+    // Check if the variant exists.
+    /** @var \Drupal\page_manager\PageVariantInterface $variant */
+    if (!$variant = PageVariant::load($variant_id)) {
+      throw new NotFoundHttpException();
+    }
+
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $variant->getVariantPlugin();
+
+    // Get the current layout.
+    $layout = $variant_plugin->getConfiguration()['layout'];
+
+    // Get a list of all available layouts.
+    $layouts = Layout::getLayoutOptions();
+    $data = [];
+    foreach ($layouts as $id => $label) {
+      $data[] = [
+        'id' => $id,
+        'label' => $label,
+        'current' => $layout == $id
+      ];
+    }
+
+    // Return a structured JSON response for our Backbone App.
+    return new JsonResponse($data);
+  }
+
+  /**
+   * Gets a given layout with empty regions and relevant metadata.
+   *
+   * @param string $variant_id
+   *   The machine name of the current display variant.
+   * @param string $layout_id
+   *   The machine name of the requested layout.
+   *
+   * @return JsonResponse
+   *
+   * @throws AccessDeniedHttpException|NotFoundHttpException
+   */
+  public function getLayout($variant_id, $layout_id) {
+    // Check if the variant exists.
+    /** @var \Drupal\page_manager\PageVariantInterface $variant */
+    if (!$variant = PageVariant::load($variant_id)) {
+      throw new NotFoundHttpException();
+    }
+
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $variant->getVariantPlugin();
+
+    // Build the requested layout.
+    $configuration = $variant_plugin->getConfiguration();
+    $configuration['layout'] = $layout_id;
+    $variant_plugin->setConfiguration($configuration);
+    $build = $variant_plugin->build();
+
+    // Remove all blocks from the build.
+    $regions = $variant_plugin->getRegionNames();
+    $region_data = [];
+    foreach ($regions as $id => $label) {
+      // Get all block/random keys.
+      $children = Element::getVisibleChildren($build[$id]);
+      // Unset those keys, retaining the theme variables for the region.
+      $build[$id] = array_diff_key($build[$id], array_flip($children));
+
+      // Format region metadata.
+      $region_data[] = [
+        'name' => $id,
+        'label' => $label
+      ];
+    }
+
+    // Remove the wrapping elements, which our builder adds to every build.
+    unset($build['#suffix']);
+    unset($build['#prefix']);
+
+    // Get the current layout.
+    $current_layout = $variant_plugin->getConfiguration()['layout'];
+
+    // Get a list of all available layouts.
+    $layouts = Layout::getLayoutOptions();
+
+    $data = [
+      'id' => $layout_id,
+      'label' => $layouts[$layout_id],
+      'current' => $current_layout == $layout_id,
+      'html' => $this->renderer->render($build),
+      'regions' => $region_data
+    ];
+
+    // Return a structured JSON response for our Backbone App.
+    return new JsonResponse($data);
+  }
+
 }
diff -u b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php
--- b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php
+++ b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php
@@ -69,24 +69,14 @@
 
     // Explicitly support Page Manger, as we need to have a reference for where
     // to save the display.
-    /** @var \Drupal\page_manager\Entity\Page $page */
-    $page = \Drupal::request()->attributes->get('page_manager_page');
-    /** @var \Drupal\page_manager\Entity\PageVariant $variant */
     $variant = \Drupal::request()->attributes->get('page_manager_page_variant');
-    if ($page && $variant) {
+    if ($variant) {
       // Add the display variant's config.
       $settings['display_variant'] = [
         'label' => $variant->label(),
         'id' => $variant->id(),
         'uuid' => $variant->uuid(),
       ];
-
-      // Add the entity information so the proper JSON callback is used.
-      $settings['page'] = [
-        'label' => $page->label(),
-        'id' => $page->id(),
-        'uuid' => $page->uuid()
-      ];
     }
 
     return ['panels_ipe' => $settings];
@@ -105,20 +95,22 @@
         $build[$region]['#prefix'] = '<div class="' . $region_name . '" data-region-name="' . $region . '">';
         $build[$region]['#suffix'] = '</div>';
 
-        // Add the UUID of each block to the data-block-id attribute.
-        $build[$region]['#attributes']['data-region-name'] = $region;
         if ($blocks) {
           foreach ($blocks as $block_id => $block) {
             $build[$region][$block_id]['#attributes']['data-block-id'] = $block_id;
           }
         }
-
-        // Attach the required settings and IPE.
-        $build['#attached'] = [
-          'library' => ['panels_ipe/panels_ipe'],
-          'drupalSettings' => $this->getDrupalSettings($regions, $contexts, $layout)
-        ];
       }
+
+      // Attach the required settings and IPE.
+      $build['#attached'] = [
+        'library' => ['panels_ipe/panels_ipe'],
+        'drupalSettings' => $this->getDrupalSettings($regions, $contexts, $layout)
+      ];
+
+      // Add our custom elements to the build.
+      $build['#prefix'] = '<div id="panels-ipe-content">';
+      $build['#suffix'] = '</div><div id="panels-ipe-tray"></div>';
     }
     return $build;
   }
only in patch2:
unchanged:
--- /dev/null
+++ b/panels_ipe/js/models/LayoutModel.js
@@ -0,0 +1,96 @@
+/**
+ * @file
+ * Base Backbone model for a Layout.
+ */
+
+(function (_, $, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.LayoutModel# */{
+
+    /**
+     * @type {object}
+     */
+    defaults: /** @lends Drupal.panels_ipe.LayoutModel# */{
+
+      /**
+       * The layout machine name.
+       *
+       * @type {string}
+       */
+      id: null,
+
+      /**
+       * The layout label.
+       *
+       * @type {string}
+       */
+      label: null,
+
+      /**
+       * Whether or not this is the current layout.
+       *
+       * @type {bool}
+       */
+      current: false,
+
+      /**
+       * The wrapping HTML for this layout. Only used for initial rendering.
+       *
+       * @type {string}
+       */
+      html: null,
+
+      /**
+       * A collection of regions contained in this Layout.
+       *
+       * @type {Drupal.panels_ipe.RegionCollection}
+       */
+      regionCollection: null
+
+    },
+
+    /**
+     * Overrides the parse method to set our regionCollection dynamically.
+     *
+     * @param {Object} resp
+     * @param {Object} options
+     */
+    parse: function(resp, options) {
+      // If possible, initialize our region collection.
+      if (typeof resp.regions != 'undefined') {
+        resp.regionCollection = new Drupal.panels_ipe.RegionCollection();
+        for (var i in resp.regions) {
+          var region = new Drupal.panels_ipe.RegionModel(resp.regions[i]);
+          region.set({'blockCollection': new Drupal.panels_ipe.BlockCollection()});
+          resp.regionCollection.add(region);
+        }
+      }
+      return resp;
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.LayoutCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.LayoutCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutModel}
+     */
+    model: Drupal.panels_ipe.LayoutModel,
+
+    /**
+     * @type {function}
+     */
+    url: function() {
+      return Drupal.panels_ipe.urlRoot(drupalSettings) + '/layouts'
+    }
+
+  });
+
+}(_, jQuery, Backbone, Drupal));
only in patch2:
unchanged:
--- /dev/null
+++ b/panels_ipe/js/models/TabModel.js
@@ -0,0 +1,64 @@
+/**
+ * @file
+ * A .
+ *
+ * @see Drupal.panels_ipe.TabView
+ */
+
+(function (Backbone, Drupal) {
+
+  'use strict';
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Model
+   */
+  Drupal.panels_ipe.TabModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.TabModel# */{
+
+    /**
+     * @type {object}
+     *
+     * @prop {bool} active
+     * @prop {string} title
+     */
+    defaults: /** @lends Drupal.panels_ipe.TabModel# */{
+
+      /**
+       * The ID of the tab.
+       *
+       * @type {int}
+       */
+      id: null,
+
+      /**
+       * Whether or not the tab is active.
+       *
+       * @type {bool}
+       */
+      active: false,
+
+      /**
+       * The title of the tab.
+       *
+       * @type {string}
+       */
+      title: null
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.TabCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.TabCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.TabModel}
+     */
+    model: Drupal.panels_ipe.TabModel
+  });
+
+}(Backbone, Drupal));
only in patch2:
unchanged:
--- /dev/null
+++ b/panels_ipe/js/views/LayoutPicker.js
@@ -0,0 +1,99 @@
+/**
+ * @file
+ * Renders a collection of Layouts for selection.
+ *
+ * see Drupal.panels_ipe.LayoutCollection
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutPicker = Backbone.View.extend(/** @lends Drupal.panels_ipe.LayoutPicker# */{
+
+    /**
+     * @type {function}
+     */
+    template_layout: _.template('<li class="ipe-layout" data-layout-id="<%= id %>"><h5 class="ipe-layout-title"><a><%= label %></a></h5></li>'),
+
+    /**
+     * @type {function}
+     */
+    template_current: _.template('<p>Current Layout: </p><h5 class="ipe-layout-title"><%= label %></h5>'),
+
+    /**
+     * @type {function}
+     */
+    template: _.template(
+      '<div class="ipe-current-layout"></div><div class="ipe-all-layouts"><p>Available Layouts:</p><ul class="ipe-layouts"></ul></div>'
+    ),
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutCollection}
+     */
+    collection: null,
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'click .ipe-layout': 'selectLayout'
+    },
+
+    /**
+     * Renders the selection menu for picking Layouts.
+     */
+    render: function() {
+      // If we don't have layouts yet, pull some from the server.
+      if (!this.collection) {
+        this.collection = new Drupal.panels_ipe.LayoutCollection;
+        var self = this;
+        this.collection.fetch().done(function(){
+          self.render();
+        });
+      }
+      // Render our LayoutCollection.
+      else {
+        this.$el.empty();
+
+        // Setup the empty list.
+        this.$el.html(this.template());
+
+        // Append each layout option.
+        this.collection.each(function(layout) {
+          if (!layout.get('current')) {
+            this.$('.ipe-layouts').append(this.template_layout(layout.toJSON()));
+          }
+          else {
+            this.$('.ipe-current-layout').append(this.template_current(layout.toJSON()));
+          }
+        }, this);
+      }
+    },
+
+    /**
+     * Fires a global Backbone event that the App watches to switch layouts.
+     */
+    selectLayout: function(e) {
+      e.preventDefault();
+      var id = $(e.currentTarget).data('layout-id');
+
+      // Unset the current tab.
+      this.collection.each(function(layout) {
+        if (id == layout.id) {
+          layout.set('current', true);
+          // @todo Investigate using non-global events.
+          Drupal.panels_ipe.app.trigger('changeLayout', [layout]);
+        }
+        else {
+          layout.set('current', false);
+        }
+      });
+
+      // Trigger a re-render.
+      this.render();
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));
only in patch2:
unchanged:
--- /dev/null
+++ b/panels_ipe/js/views/LayoutView.js
@@ -0,0 +1,108 @@
+/**
+ * @file
+ * The primary Backbone view for a Layout.
+ *
+ * see Drupal.panels_ipe.LayoutModel
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutView = Backbone.View.extend(/** @lends Drupal.panels_ipe.LayoutView# */{
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutModel}
+     */
+    model: null,
+
+    /**
+     * @type {Array}
+     *   An array of child Drupal.panels_ipe.BlockView objects.
+     */
+    blockViews: [],
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {Drupal.panels_ipe.LayoutModel} options.model
+     *   The layout state model.
+     * @param {string} options.el
+     *   An optional selector if an existing element is already on screen.
+     */
+    initialize: function (options) {
+      this.model = options.model;
+      // Initialiaze our html, this never changes.
+      if (this.model.get('html')) {
+        this.$el.html(this.model.get('html'));
+      }
+      // Initialize our Block Views, if HTML is already provided to us.
+      if (this.el) {
+        this.initBlockViews();
+      }
+      this.listenTo(this.model, 'change:active', this.changeState);
+    },
+
+    /**
+     * Re-renders our blocks, we have no HTML to be re-rendered.
+     */
+    render: function() {
+      // Re-render all of our blocks.
+      for (var i in this.blockViews) {
+        this.blockViews[i].render();
+      }
+      return this;
+    },
+
+    changeState: function(model, value, options) {
+      // Set all of our blocks active as well.
+      this.model.get('regionCollection').each(function (region) {
+        region.get('blockCollection').each(function (block) {
+            block.set({'active': value});
+        });
+      });
+      // Re-render all blocks.
+      this.render();
+    },
+
+    /**
+     * Initializes our blockViews property if HTML is provided to us.
+     *
+     * If anything in our BlockCollection isn't already on screen, this
+     * function will also fetch new HTML from the server and render that.
+     */
+    initBlockViews: function() {
+      this.model.get('regionCollection').each(function (region) {
+        region.get('blockCollection').each(function (block) {
+
+          // If the target element doesn't exist, append an empty one.
+          // The "empty_elem" variable will be later used to trigger a
+          // BlockModel.fetch() call, which will re-render and remove our
+          // placeholder.
+          if (this.$("[data-block-id='" + block.get('uuid') + "']").length == 0) {
+            var empty_elem = $('<div data-block-id="' + block.get('uuid') + '">');
+            this.$('[data-region-name="' + region.get('name') + '"]').append(empty_elem);
+          }
+
+          // Attach a View to this empty element.
+          this.blockViews.push(new Drupal.panels_ipe.BlockView({
+            'model': block,
+            'el': "[data-block-id='" + block.get('uuid') + "']"
+          }));
+
+          // Fetch the block content from the server
+          if (typeof empty_elem != 'undefined') {
+            block.fetch();
+          }
+
+        }, this);
+      }, this);
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));
only in patch2:
unchanged:
--- /dev/null
+++ b/panels_ipe/js/views/TabsView.js
@@ -0,0 +1,111 @@
+/**
+ * @file
+ * The primary Backbone view for a tab collection.
+ *
+ * see Drupal.panels_ipe.TabCollection
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  Drupal.panels_ipe.TabsView = Backbone.View.extend(/** @lends Drupal.panels_ipe.TabsView# */{
+
+    /**
+     * @type {function}
+     */
+    template_tab: _.template('<li class="ipe-tab<% if (active) { %> active<% } %>" data-tab-id="<%= id %>"><a><%= title %></a></li>'),
+
+    /**
+     * @type {function}
+     */
+    template_content: _.template('<div class="ipe-tab-content<% if (active) { %> active<% } %>" data-tab-content-id="<%= id %>"></div>'),
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'click .ipe-tab > a': 'switchTab'
+    },
+
+    /**
+     * @type {Drupal.panels_ipe.TabCollection}
+     */
+    collection: null,
+
+    /**
+     * @type {Object}
+     *
+     * An object mapping tab IDs to Backbone views.
+     */
+    tabViews: {},
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.TabsView
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {object} options.tabViews
+     *   An object mapping tab IDs to Backbone views.
+     */
+    initialize: function (options) {
+      this.tabViews = options.tabViews;
+    },
+
+    /**
+     * Renders our tab collection.
+     */
+    render: function() {
+      // Empty our list.
+      this.$el.empty();
+
+      // Setup the initial wrapping elements.
+      this.$el.append('<ul class="ipe-tabs"></ul>');
+      this.$el.append('<div class="ipe-tabs-content"></div>');
+
+      // Append each of our tabs and their tab content view.
+      this.collection.each(function(tab) {
+        // Append the tab.
+        var id = tab.get('id');
+        this.$('.ipe-tabs').append(this.template_tab(tab.toJSON()));
+
+        // Render the tab content.
+        this.$('.ipe-tabs-content').append(this.template_content(tab.toJSON()));
+        // Check to see if this tab has content.
+        if (tab.get('active') && this.tabViews[id]) {
+          this.tabViews[id].setElement('[data-tab-content-id="' + id + '"]').render();
+        }
+      }, this);
+      return this;
+    },
+
+    /**
+     * Switches the current tab.
+     */
+    switchTab: function(e) {
+      e.preventDefault();
+      var id = $(e.currentTarget).parent().data('tab-id');
+
+      // Disable all existing tabs.
+      this.collection.each(function(tab) {
+        // If the user is clicking the same tab twice, close it.
+        if (tab.get('id') == id && tab.get('active') == true) {
+          tab.set('active', false);
+        }
+        // If this is the first click, open the tab.
+        else if (tab.get('id') == id) {
+          tab.set('active', true);
+        }
+        // The tab wasn't clicked, make sure it's closed.
+        else {
+          tab.set('active', false);
+        }
+      });
+
+      // Trigger a re-render.
+      this.render();
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));