diff --git a/css/paragraphs.admin.css b/css/paragraphs.admin.css
index 704c45c..db33965 100644
--- a/css/paragraphs.admin.css
+++ b/css/paragraphs.admin.css
@@ -108,6 +108,22 @@
   box-shadow: none;
 }
 
+.js .ui-tabs-nav.ui-widget-header {
+  padding: .2em .2em 0;
+}
+.js .ui-tabs-nav li {
+  float: right;
+}
+.js .ui-tabs-nav .ui-state-default {
+  background-color: #edede8;
+  border-color: #bfbfbf;
+}
+.js .ui-tabs-nav .ui-state-active {
+  background-color: #fff;
+}
+.js .ui-tabs-panel {
+  padding: initial;
+}
 
 /* Override 600px breakpoint core submit button tweaks. */
 @media screen and (max-width: 600px) {
diff --git a/js/paragraphs.js b/js/paragraphs.js
new file mode 100644
index 0000000..00d33c6
--- /dev/null
+++ b/js/paragraphs.js
@@ -0,0 +1,32 @@
+(function ($, Drupal, drupalSettings) {
+  /**
+   * For body tag, adds tabs for selecting how the content will be displayed.
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.bodyTabs = {
+    attach: function (context, settings) {
+      $('ul.paragraphs-tabs', context).each(function () {
+        var $this = $(this);
+        $this.parent().tabs({
+          activate: function( event, ui ) {
+            if (ui.newTab.attr('id') == 'content') {
+              $('.paragraphs-subform').show();
+              $('.paragraphs-behavior').hide();
+            }
+            else {
+              $('.paragraphs-subform').hide();
+              $('.paragraphs-nested.paragraphs-subform').show();
+              $('.paragraphs-behavior').show();
+            }
+          },
+          create: function( event, ui ) {
+            $('.paragraphs-subform').show();
+            $('.paragraphs-behavior').hide();
+          }
+        });
+      });
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);
diff --git a/paragraphs.libraries.yml b/paragraphs.libraries.yml
index 1ac3b50..49f9f1b 100644
--- a/paragraphs.libraries.yml
+++ b/paragraphs.libraries.yml
@@ -8,6 +8,9 @@ drupal.paragraphs.admin:
       - core/jquery.form
       - core/drupal.ajax
       - core/drupal.dropbutton
+      - core/jquery.ui.tabs
   css:
     theme:
-      css/paragraphs.admin.css: {}
\ No newline at end of file
+      css/paragraphs.admin.css: {}
+  js:
+    js/paragraphs.js: {}
\ No newline at end of file
diff --git a/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
index 9d8f08e..5259de4 100644
--- a/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
@@ -549,6 +549,8 @@ class InlineParagraphsWidget extends WidgetBase {
         $element['subform']['#pre_render'][] = 'field_group_form_pre_render';
       }
 
+      // @todo do something here with the display variable.
+
       if ($item_mode == 'edit') {
         $display->buildForm($paragraphs_entity, $element['subform'], $form_state);
         foreach (Element::children($element['subform']) as $field) {
@@ -566,6 +568,17 @@ class InlineParagraphsWidget extends WidgetBase {
         // Build the behavior plugins fields.
         $paragraphs_type = $paragraphs_entity->getParagraphType();
         if ($paragraphs_type) {
+          $element['behavior_plugins'] = [
+            '#type' => 'container',
+            '#attributes' => [
+              'class' => [
+                'paragraphs-behavior',
+              ],
+              'id' => [
+                'paragraphs-behavior',
+              ],
+            ],
+          ];
           foreach ($paragraphs_type->getEnabledBehaviorPlugins() as $plugin_id => $plugin) {
             $element['behavior_plugins'][$plugin_id] = [];
             $element['behavior_plugins'][$plugin_id] = $plugin->buildBehaviorForm($paragraphs_entity);
@@ -594,6 +607,7 @@ class InlineParagraphsWidget extends WidgetBase {
         $element['subform'] = array();
       }
 
+      $element['subform']['#attributes']['id'][] = 'paragraphs-subform';
       $element['subform']['#attributes']['class'][] = 'paragraphs-subform';
       $element['subform']['#access'] = $paragraphs_entity->access('update');
 
@@ -708,9 +722,19 @@ class InlineParagraphsWidget extends WidgetBase {
     $description = FieldFilteredMarkup::create(\Drupal::token()->replace($this->fieldDefinition->getDescription()));
 
     $elements = array();
+
+    $tabs = '';
+    // If the parent entity is paragraph add the nested class if not then add
+    // the perspective tabs.
+    if ($items->getEntity()->getEntityTypeId() != 'paragraph') {
+      $tabs = '<ul class="paragraphs-tabs"><li id="content"><a href="#paragraphs-subform">Content</a></li><li id="behavior"><a href="#paragraphs-behavior">Behavior</a></li></ul>';
+    }
+    else {
+      $form['#attributes']['class'][] = 'paragraphs-nested';
+    }
     $id_prefix = implode('-', array_merge($parents, array($field_name)));
     $wrapper_id = Html::getUniqueId($id_prefix . '-add-more-wrapper');
-    $elements['#prefix'] = '<div id="' . $wrapper_id . '">';
+    $elements['#prefix'] = '<div id="' . $wrapper_id . '">' . $tabs;
     $elements['#suffix'] = '</div>';
 
     $field_state['ajax_wrapper_id'] = $wrapper_id;
diff --git a/src/Plugin/Layout/FieldLayoutTestPlugin.php b/src/Plugin/Layout/FieldLayoutTestPlugin.php
new file mode 100644
index 0000000..35f62fb
--- /dev/null
+++ b/src/Plugin/Layout/FieldLayoutTestPlugin.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Drupal\paragraphs\Plugin\Layout;
+
+use Drupal\Core\Layout\LayoutDefault;
+
+/**
+ *
+ * @Layout(
+ *   id = "behavior_regions",
+ *   label = @Translation("Behavior regions"),
+ *   category = @Translation("Paragraphs"),
+ *   description = @Translation("Paragraphs behavior regions."),
+ *   regions = {
+ *     "content" = {
+ *       "label" = @Translation("Content")
+ *     },
+ *     "behavior" = {
+ *       "label" = @Translation("Behavior")
+ *     }
+ *   },
+ *   config_dependencies = {
+ *     "module" = {
+ *       "paragraphs",
+ *     },
+ *   },
+ * )
+ */
+class FieldLayoutTestPlugin extends LayoutDefault {
+
+}