diff -u b/css/paragraphs.widget.css b/css/paragraphs.widget.css
--- b/css/paragraphs.widget.css
+++ b/css/paragraphs.widget.css
@@ -94,22 +94,9 @@
   margin-left: auto;
 }
 
-/* Navigation tabs - edit perspective switch */
-.js .paragraphs-tabs.ui-tabs-nav.ui-widget-header {
-  padding: .2em .2em 0;
-}
-
-.js .paragraphs-tabs.ui-tabs-nav li {
-  float: left;
-}
-
-.js .paragraphs-tabs.ui-tabs-nav .ui-state-default {
-  background-color: #edede8;
-  border-color: #bfbfbf;
-}
-
-.js .paragraphs-tabs.ui-tabs-nav .ui-state-active {
-  background-color: #fff;
+/* Removing double bottom border */
+.is-horizontal .tabs__tab {
+  border-bottom: 0;
 }
 
 /* Override 600px breakpoint core submit button tweaks. */
diff -u b/js/paragraphs.admin.js b/js/paragraphs.admin.js
--- b/js/paragraphs.admin.js
+++ b/js/paragraphs.admin.js
@@ -1,4 +1,7 @@
-(function ($, Drupal, drupalSettings) {
+(function ($, Drupal) {
+
+  'use strict';
+
   /**
    * For body tag, adds tabs for selecting how the content will be displayed.
    *
@@ -6,20 +9,24 @@
    */
   Drupal.behaviors.bodyTabs = {
     attach: function (context, settings) {
-      $(context).find( '.paragraphs-tabs' ).find( 'a' ).click( function( e ){
+      /** Set content fields to visible when tabs are created **/
+      $('.paragraphs-content').show();
+      $('.paragraphs-behavior').hide();
+      /** Create click event **/
+      $(context).find('.paragraphs-tabs').find('a').click(function(e) {
         e.preventDefault();
         /** Switching active class between tabs */
-        var el = jQuery( this );
-        $(context).find( '.paragraphs-tabs' ).find( 'li' ).removeClass( 'active' );
-        el.parent( 'li' ).addClass( 'active' );
-        $(context).find( 'div' ).removeClass( 'active' );
-        $(context).find( el.attr( 'href' ) ).addClass( 'active' );
+        var el = jQuery(this);
+        $(context).find('.paragraphs-tabs').find('li').removeClass('is-active');
+        el.parent('li').addClass('is-active');
+        $(context).find('.paragraphs-tabs-wrapper').removeClass('is-active');
+        $(context).find(el.attr('href')).addClass('is-active');
         /** Show/Hide fields based on current active class */
-        if($(context).find( 'div' ).find('#content').hasClass('active')){
+        if($(context).find('.paragraphs-tabs-wrapper').find('#content').hasClass('is-active')) {
           $('.paragraphs-content').show();
           $('.paragraphs-behavior').hide();
         }
-        if($(context).find( 'div' ).find('#behavior').hasClass('active')){
+        if($(context).find('.paragraphs-tabs-wrapper').find('#behavior').hasClass('is-active')) {
           $('.paragraphs-content').hide();
           $('.paragraphs-behavior').show();
         }
@@ -29,3 +36,3 @@
 
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal);
 
diff -u b/paragraphs.libraries.yml b/paragraphs.libraries.yml
--- b/paragraphs.libraries.yml
+++ b/paragraphs.libraries.yml
@@ -20,7 +20,6 @@
     - core/jquery.form
     - core/drupal.ajax
     - core/drupal.dropbutton
-    - core/jquery.ui.tabs
   css:
     theme:
       css/paragraphs.widget.css: {}
diff -u b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
--- b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -823,12 +823,12 @@
     // 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>';
+      $tabs = '<ul class="paragraphs-tabs tabs primary clearfix"><li id="content" class="tabs__tab is-active"><a href="#' . $field_prefix . '-values">Content</a></li><li id="behavior" class="tabs__tab"><a href="#' . $field_prefix . '-values">Behavior</a></li></ul>';
     }
     else {
       $form['#attributes']['class'][] = 'paragraphs-nested';
     }
-    $elements['#prefix'] = '<div id="' . $this->fieldWrapperId . '">' . $tabs;
+    $elements['#prefix'] = '<div class="is-horizontal paragraphs-tabs-wrapper" id="' . $this->fieldWrapperId . '">' . $tabs;
     $elements['#suffix'] = '</div>';
 
     $field_state['ajax_wrapper_id'] = $this->fieldWrapperId;
only in patch2:
unchanged:
--- /dev/null
+++ b/src/Tests/FunctionalJavascript/ParagraphsExperimentalEditPerspectivesUiTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Drupal\Tests\field_group\FunctionalJavascript;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Entity\Display\EntityFormDisplayInterface;
+use Drupal\Core\Entity\Entity\EntityFormDisplay;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\node\Entity\NodeType;
+
+/**
+ * Test field_group user interface.
+ *
+ * @group field_group
+ */
+class ParagraphsExperimentalEditPerspectivesUiTest extends JavascriptTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = array('node', 'paragraphs', 'paragraphs_demo');
+
+  /**
+   * @var string
+   */
+  protected $nodeType;
+
+  public function setUp() {
+    parent::setUp();
+
+    // Create test user.
+    $admin_user = $this->drupalCreateUser(array('access content', 'administer content types', 'administer node fields', 'administer node form display', 'administer node display', 'bypass node access'));
+    $this->drupalLogin($admin_user);
+
+  }
+
+}