diff --git a/css/paragraphs.admin.css b/css/paragraphs.admin.css
index 704c45c..58a003e 100644
--- a/css/paragraphs.admin.css
+++ b/css/paragraphs.admin.css
@@ -108,6 +108,23 @@
   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;
+  display: table;
+}
 
 /* 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..3942674 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: {}
diff --git a/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
index afc24f1..2f7ee92 100644
--- a/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
@@ -585,9 +585,16 @@ class InlineParagraphsWidget extends WidgetBase {
       }
 
       if ($item_mode == 'edit') {
+        $element['subform']['paragraph-content'] = [
+          '#type' => 'container',
+        ];
+        $element['subform']['paragraph-behavior'] = [
+          '#type' => 'container',
+        ];
         $display->buildForm($paragraphs_entity, $element['subform'], $form_state);
         foreach (Element::children($element['subform']) as $field) {
           if ($paragraphs_entity->hasField($field)) {
+            $element['subform'][$field]['#group'] = 'paragraph-content';
             $translatable = $paragraphs_entity->{$field}->getFieldDefinition()->isTranslatable();
             if ($translatable) {
               $element['subform'][$field]['widget']['#after_build'][] = [
@@ -602,8 +609,8 @@ class InlineParagraphsWidget extends WidgetBase {
         $paragraphs_type = $paragraphs_entity->getParagraphType();
         if ($paragraphs_type) {
           foreach ($paragraphs_type->getEnabledBehaviorPlugins() as $plugin_id => $plugin) {
-            $element['behavior_plugins'][$plugin_id] = [];
-            $element['behavior_plugins'][$plugin_id] = $plugin->buildBehaviorForm($paragraphs_entity);
+            $element['subform'][$plugin_id] = $plugin->buildBehaviorForm($paragraphs_entity);
+            $element['subform'][$plugin_id]['#group'] = 'paragraph-behavior';
           }
         }
       }
@@ -743,9 +750,20 @@ class InlineParagraphsWidget extends WidgetBase {
     $description = FieldFilteredMarkup::create(\Drupal::token()->replace($this->fieldDefinition->getDescription()));
 
     $elements = array();
+    $tabs = '';
     $this->fieldIdPrefix = implode('-', array_merge($this->fieldParents, array($field_name)));
     $this->fieldWrapperId = Html::getUniqueId($this->fieldIdPrefix . '-add-more-wrapper');
-    $elements['#prefix'] = '<div id="' . $this->fieldWrapperId . '">';
+
+    // If the parent entity is paragraph add the nested class if not then add
+    // the perspective tabs.
+    $field_prefix = strtr($this->fieldIdPrefix, '_', '-');
+    if ($max > 0 && $items->getEntity()->getEntityTypeId() != 'paragraph') {
+      $tabs = '<ul class="paragraphs-tabs"><li id="content"><a href="#' . $field_prefix . '-values">Content</a></li><li id="behavior"><a href="#' . $field_prefix . '-values">Behavior</a></li></ul>';
+    }
+    else {
+      $form['#attributes']['class'][] = 'paragraphs-nested';
+    }
+    $elements['#prefix'] = '<div id="' . $this->fieldWrapperId . '">' . $tabs;
     $elements['#suffix'] = '</div>';
 
     $field_state['ajax_wrapper_id'] = $this->fieldWrapperId;