diff --git a/css/paragraphs.widget.css b/css/paragraphs.widget.css
index ec92527..41c97de 100644
--- a/css/paragraphs.widget.css
+++ b/css/paragraphs.widget.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..92734db
--- /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-content').show();
+              $('.paragraphs-behavior').hide();
+            }
+            else {
+              $('.paragraphs-content').hide();
+              $('.paragraphs-nested.paragraphs-subform').show();
+              $('.paragraphs-behavior').show();
+            }
+          },
+          create: function( event, ui ) {
+            $('.paragraphs-content').show();
+            $('.paragraphs-behavior').hide();
+          }
+        });
+      });
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);
diff --git a/paragraphs.libraries.yml b/paragraphs.libraries.yml
index bb2015d..77c8f51 100644
--- a/paragraphs.libraries.yml
+++ b/paragraphs.libraries.yml
@@ -1,5 +1,4 @@
 drupal.paragraphs.admin:
-  version: VERSION
   dependencies:
       - core/jquery
       - core/drupal
@@ -13,6 +12,17 @@ drupal.paragraphs.admin:
       css/paragraphs.admin.css: {}
 
 drupal.paragraphs.widget:
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery.once
+    - core/jquery.form
+    - core/drupal.ajax
+    - core/drupal.dropbutton
+    - core/jquery.ui.tabs
   css:
     theme:
       css/paragraphs.widget.css: {}
+  js:
+    js/paragraphs.js: {}
diff --git a/src/ParagraphInterface.php b/src/ParagraphInterface.php
index 5d60881..7fd9ec3 100644
--- a/src/ParagraphInterface.php
+++ b/src/ParagraphInterface.php
@@ -9,8 +9,7 @@ use Drupal\Core\Entity\ContentEntityInterface;
  * Provides an interface defining a paragraphs entity.
  * @ingroup paragraphs
  */
-interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterface
-{
+interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterface {
 
   /**
    * Gets the parent entity of the paragraph.
@@ -21,4 +20,9 @@ interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterfac
    *   The parent entity.
    */
   public function getParentEntity();
+
+  /**
+   * @return \Drupal\paragraphs\ParagraphsTypeInterface
+   */
+  public function getParagraphType();
 }
diff --git a/src/ParagraphsTypeInterface.php b/src/ParagraphsTypeInterface.php
index 169c202..435a337 100644
--- a/src/ParagraphsTypeInterface.php
+++ b/src/ParagraphsTypeInterface.php
@@ -31,7 +31,7 @@ interface ParagraphsTypeInterface extends ConfigEntityInterface {
   /**
    * Retrieves all the enabled plugins.
    *
-   * @return array
+   * @return \Drupal\paragraphs\ParagraphsBehaviorInterface[]
    *   Array of the enabled plugins as instances.
    */
   public function getEnabledBehaviorPlugins();
diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
index 2a4dd84..7f3aa47 100644
--- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -220,6 +220,7 @@ class ParagraphsWidget extends WidgetBase {
     $parents = $element['#field_parents'];
     $info = [];
 
+    /** @var \Drupal\paragraphs\Entity\Paragraph $paragraphs_entity */
     $paragraphs_entity = NULL;
     $host = $items->getEntity();
     $widget_state = static::getWidgetState($parents, $field_name, $form_state);
@@ -599,9 +600,18 @@ class ParagraphsWidget extends WidgetBase {
       }
 
       if ($item_mode == 'edit') {
+        $element['subform']['paragraph_content'] = [
+          '#type' => 'container',
+          '#attributes' => ['class' => ['paragraphs-content']]
+        ];
+        $element['subform']['paragraph_behavior'] = [
+          '#type' => 'container',
+          '#attributes' => ['class' => ['paragraphs-behavior']]
+        ];
         $display->buildForm($paragraphs_entity, $element['subform'], $form_state);
         foreach (Element::children($element['subform']) as $field) {
           if ($paragraphs_entity->hasField($field)) {
+            $element['subform'][$field]['#group'] = implode('][', array_merge($element_parents, ['paragraph_content']));
             $translatable = $paragraphs_entity->{$field}->getFieldDefinition()->isTranslatable();
             if ($translatable) {
               $element['subform'][$field]['widget']['#after_build'][] = [
@@ -616,8 +626,11 @@ class ParagraphsWidget 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] = [
+              '#type' => 'container',
+              '#group' => implode('][', array_merge($element_parents, ['paragraph_behavior'])),
+            ];
+            $element['subform'][$plugin_id] += (array) $plugin->buildBehaviorForm($paragraphs_entity);
           }
         }
       }
@@ -760,9 +773,20 @@ class ParagraphsWidget 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;