diff --git a/app/code/Magento/Catalog/Block/Product/View/Gallery.php b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
index 2312a945f7d0a..f8b77d46d3ca7 100644
--- a/app/code/Magento/Catalog/Block/Product/View/Gallery.php
+++ b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
@@ -30,7 +30,8 @@ public function getGalleryImages()
         $product = $this->getProduct();
         $images = $product->getMediaGalleryImages();
         if ($images instanceof \Magento\Framework\Data\Collection) {
-            foreach ($images as &$image) {
+            foreach ($images as $image) {
+                /* @var \Magento\Framework\DataObject $image */
                 $image->setData(
                     'small_image_url',
                     $this->_imageHelper->init($product, 'product_page_image_small')
diff --git a/app/code/Magento/Catalog/Controller/Adminhtml/Product/Attribute/Validate.php b/app/code/Magento/Catalog/Controller/Adminhtml/Product/Attribute/Validate.php
index 9c50b8f3145ad..7b995dbd2a13e 100644
--- a/app/code/Magento/Catalog/Controller/Adminhtml/Product/Attribute/Validate.php
+++ b/app/code/Magento/Catalog/Controller/Adminhtml/Product/Attribute/Validate.php
@@ -62,10 +62,12 @@ public function execute()
 
         if ($attribute->getId() && !$attributeId) {
             if (strlen($this->getRequest()->getParam('attribute_code'))) {
-                $response->setAttributes(['attribute_code' => __('An attribute with this code already exists.')]);
+                $response->setMessage(
+                    __('An attribute with this code already exists.')
+                );
             } else {
-                $response->setAttributes(
-                    ['attribute_label' => __('An attribute with the same code (%1) already exists.', $attributeCode)]
+                $response->setMessage(
+                    __('An attribute with the same code (%1) already exists.', $attributeCode)
                 );
             }
             $response->setError(true);
diff --git a/app/code/Magento/Catalog/Ui/Component/FilterFactory.php b/app/code/Magento/Catalog/Ui/Component/FilterFactory.php
index a0d72392eb28e..a32daf19149a5 100644
--- a/app/code/Magento/Catalog/Ui/Component/FilterFactory.php
+++ b/app/code/Magento/Catalog/Ui/Component/FilterFactory.php
@@ -43,7 +43,7 @@ public function create($attribute, $context)
             'dataScope' => $columnName,
             'label' => __($attribute->getDefaultFrontendLabel()),
         ];
-        if ($attribute->usesSource()) {
+        if ($attribute->usesSource() && $attribute->getSourceModel()) {
             $config['options'] = $attribute->getSource()->getAllOptions();
             $config['caption'] = __('Select...');
         }
diff --git a/app/code/Magento/Catalog/Ui/Component/Listing/Filters.php b/app/code/Magento/Catalog/Ui/Component/Listing/Filters.php
index 0100320f03c07..9c2950a596bca 100644
--- a/app/code/Magento/Catalog/Ui/Component/Listing/Filters.php
+++ b/app/code/Magento/Catalog/Ui/Component/Listing/Filters.php
@@ -7,6 +7,11 @@
 
 class Filters extends \Magento\Ui\Component\Filters
 {
+    /**
+     * @var AttributeRepository
+     */
+    protected $attributeRepository;
+
     /**
      * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
      * @param \Magento\Catalog\Ui\Component\FilterFactory $filterFactory
diff --git a/app/code/Magento/ConfigurableProduct/Ui/Component/Listing/AssociatedProduct/Filters.php b/app/code/Magento/ConfigurableProduct/Ui/Component/Listing/AssociatedProduct/Filters.php
new file mode 100644
index 0000000000000..af27ebc05c328
--- /dev/null
+++ b/app/code/Magento/ConfigurableProduct/Ui/Component/Listing/AssociatedProduct/Filters.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Magento\ConfigurableProduct\Ui\Component\Listing\AssociatedProduct;
+
+class Filters extends \Magento\Ui\Component\Filters
+{
+    /**
+     * @var \Magento\Eav\Model\Resource\Entity\Attribute\CollectionFactory
+     */
+    protected $attributeCollectionFactory;
+
+    /**
+     * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
+     * @param \Magento\Catalog\Ui\Component\FilterFactory $filterFactory
+     * @param \Magento\Eav\Model\Resource\Entity\Attribute\CollectionFactory $attributeCollectionFactory
+     * @param array $components
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
+        \Magento\Catalog\Ui\Component\FilterFactory $filterFactory,
+        \Magento\Eav\Model\Resource\Entity\Attribute\CollectionFactory $attributeCollectionFactory,
+        array $components = [],
+        array $data = []
+    ) {
+        parent::__construct($context, $components, $data);
+        $this->filterFactory = $filterFactory;
+        $this->attributeCollectionFactory = $attributeCollectionFactory;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function prepare()
+    {
+        $attributeIds = $this->context->getRequestParam('attribute_ids');
+        if ($attributeIds) {
+            foreach ($this->getAttributes($attributeIds) as $attribute) {
+                $filter = $this->filterFactory->create($attribute, $this->getContext());
+                $filter->prepare();
+                $this->addComponent($attribute->getAttributeCode(), $filter);
+            }
+        }
+        parent::prepare();
+    }
+
+    /**
+     * @param array $attributeIds
+     * @return mixed
+     */
+    protected function getAttributes($attributeIds)
+    {
+        $attributeCollection = $this->attributeCollectionFactory->create();
+        return $attributeCollection->addFieldToFilter('attribute_code', ['in' => $attributeIds]);
+    }
+}
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/layout/catalog_product_superconfig_config.xml b/app/code/Magento/ConfigurableProduct/view/adminhtml/layout/catalog_product_superconfig_config.xml
index ae3896ffd097a..9ed318d2b3379 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/layout/catalog_product_superconfig_config.xml
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/layout/catalog_product_superconfig_config.xml
@@ -8,98 +8,8 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceBlock name="admin.product.edit.tab.super.config.grid.container">
-            <block class="Magento\Backend\Block\Widget\Grid" name="admin.product.edit.tab.super.config.grid" as="grid">
-                <arguments>
-                    <argument name="id" xsi:type="string">configurable_associated_products_grid</argument>
-                    <argument name="dataSource" xsi:type="object">Magento\ConfigurableProduct\Model\Resource\Product\Collection\AssociatedProduct</argument>
-                    <argument name="use_ajax" xsi:type="string">true</argument>
-                    <argument name="default_sort" xsi:type="string">entity_id</argument>
-                    <argument name="default_dir" xsi:type="string">DESC</argument>
-                    <argument name="save_parameters_in_session" xsi:type="string">0</argument>
-                    <argument name="grid_url" xsi:type="url" path="*/product_superConfig/index">
-                        <param name="_current">1</param>
-                    </argument>
-                </arguments>
-                <block class="Magento\ConfigurableProduct\Block\Product\Configurable\AssociatedSelector\Backend\Grid\ColumnSet" as="grid.columnSet" name="admin.product.edit.tab.super.config.grid.columnSet">
-                    <arguments>
-                        <argument name="id" xsi:type="string">super_product_links</argument>
-                    </arguments>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="entity_id">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">ID</argument>
-                            <argument name="width" xsi:type="string">60px</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="index" xsi:type="string">entity_id</argument>
-                            <argument name="id" xsi:type="string">entity_id</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                            <argument name="renderer" xsi:type="string">Magento\ConfigurableProduct\Block\Product\Configurable\AssociatedSelector\Renderer\Id</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="name">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">Name</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="escape" xsi:type="string">1</argument>
-                            <argument name="index" xsi:type="string">name</argument>
-                            <argument name="id" xsi:type="string">name</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="price">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">Price</argument>
-                            <argument name="type" xsi:type="string">currency</argument>
-                            <argument name="index" xsi:type="string">price</argument>
-                            <argument name="id" xsi:type="string">price</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="sku" name="admin.product.edit.tab.super.config.grid.sku">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">SKU</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="escape" xsi:type="string">1</argument>
-                            <argument name="index" xsi:type="string">sku</argument>
-                            <argument name="id" xsi:type="string">sku</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="weight">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">Weight</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="index" xsi:type="string">weight</argument>
-                            <argument name="id" xsi:type="string">weight</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="inventory_in_stock" after="admin.product.edit.tab.super.config.grid.sku">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">Stock Availability</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="index" xsi:type="string">inventory_in_stock</argument>
-                            <argument name="id" xsi:type="string">inventory_in_stock</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                            <argument name="renderer" xsi:type="string">Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Super\Config\Grid\Renderer\Inventory</argument>
-                        </arguments>
-                    </block>
-                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="qty" after="admin.product.edit.tab.super.config.grid.sku">
-                        <arguments>
-                            <argument name="header" xsi:type="string" translate="true">Qty</argument>
-                            <argument name="type" xsi:type="string">text</argument>
-                            <argument name="index" xsi:type="string">qty</argument>
-                            <argument name="id" xsi:type="string">qty</argument>
-                            <argument name="filter" xsi:type="string">0</argument>
-                            <argument name="sortable" xsi:type="string">1</argument>
-                        </arguments>
-                    </block>
-                </block>
+            <block class="Magento\Backend\Block\Template" name="manual.product.grid" template="Magento_ConfigurableProduct::catalog/product/edit/super/manual-product-grid.phtml" as="grid">
+                <uiComponent name="configurable_associated_product_listing"/>
             </block>
         </referenceBlock>
         <referenceBlock name="product_tabs">
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/attributes_values.phtml b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/attributes_values.phtml
index a1a753039f100..9485d0efef19d 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/attributes_values.phtml
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/attributes_values.phtml
@@ -30,12 +30,24 @@
                 </div>
 
                 <div class="attribute-entity-actions">
-                    <button type="button" class="action-select-all action-tertiary" data-bind="click: $parent.selectAllAttributes">
+                    <button type="button"
+                            class="action-select-all action-tertiary"
+                            data-bind="click: $parent.selectAllAttributes"
+                            title="<?= $block->escapeHtml(__('Select All')) ?>">
                         <span><?= __('Select All') ?></span>
                     </button>
-                    <button type="button" class="action-deselect-all action-tertiary" data-bind="click: $parent.deSelectAllAttributes">
+                    <button type="button"
+                            class="action-deselect-all action-tertiary"
+                            data-bind="click: $parent.deSelectAllAttributes"
+                            title="<?= $block->escapeHtml(__('Deselect All')) ?>">
                         <span><?= __('Deselect All') ?></span>
                     </button>
+                    <button type="button"
+                            class="action-remove-all action-tertiary"
+                            data-bind="click: $parent.removeAttribute.bind($parent)"
+                            title="<?= $block->escapeHtml(__('Remove Attribute')) ?>">
+                        <span><?= __('Remove Attribute') ?></span>
+                    </button>
                 </div>
             </div>
 
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/summary.phtml b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/summary.phtml
index 305a17dc62ec3..32d619aee3d89 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/summary.phtml
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/summary.phtml
@@ -14,7 +14,7 @@
     <div class="admin__data-grid-wrap admin__data-grid-wrap-static">
         <!-- ko if: gridNew().length -->
             <!-- ko template: {name: getGridTemplate(), data: {
-                grid: gridNew(),
+                grid: gridNew,
                 id: getGridId(),
                 title: $t('New Product Review'),
                 note: $t('Here are the products you\'re about to create.')
@@ -23,7 +23,7 @@
 
         <!-- ko if: gridExisting().length -->
             <!-- ko template: {name: getGridTemplate(), data: {
-                grid: gridExisting(),
+                grid: gridExisting,
                 id: getGridId(),
                 title: $t('Associated Products'),
                 note: $t('You created these products for this configuration.')
@@ -32,7 +32,7 @@
 
         <!-- ko if: gridDeleted().length -->
             <!-- ko template: {name: getGridTemplate(), data: {
-                grid: gridDeleted(),
+                grid: gridDeleted,
                 id: getGridId(),
                 title: $t('Disassociated Products'),
                 note: $t('These products are not associated.')
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/config.phtml b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/config.phtml
index b472ffada9c5a..826e09432967e 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/config.phtml
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/config.phtml
@@ -26,6 +26,11 @@ use Magento\ConfigurableProduct\Model\Product\Type\Configurable;
                     You need to create a simple product for each configuration (Ex: a product for each color).');?>
                     </div>
                 </div>
+                <!--<div class="product-create-configuration-actions">
+                    <a class="action-menu-item" data-action="choose" onclick="jQuery('#associated-products-container').trigger('openModal');" href="#">
+                        <?/*= __('Add Products Manually');*/?>
+                    </a>
+                </div>-->
                 <div class="product-create-configuration-actions">
                     <button data-action="open-steps-wizard" title="Create Product Configurations"
                             class="action-secondary" data-bind="click: open">
@@ -123,70 +128,7 @@ require([
             $(this).html('');
         })
         .on('click', '[data-action=choose]', function(event) {
-            event.preventDefault();
-            var grid = window.<?php echo $block->getGridJsObject() ?>;
-            var $button = $(this);
-            var attributeIds = [];
-            variationsContainer.find("input[name='attributes[]']").each(function () {
-                attributeIds.push($(this).val());
-            });
-
-            grid.reloadParams = {
-                filter: $button.data('attributes'),
-                'attributes[]': attributeIds
-            };
-            grid.reload(null, function() {
-                $gridDialog.trigger('openModal');
-            });
-
-            grid.rowClickCallback = function(grid, event) {
-                if (!this.rows || !this.rows.length) {
-                    return;
-                }
-                var $gridRow = $(event.target).closest('tr'),
-                    columnSelectorTemplate = '[data-column="%s"]';
-
-                if ($gridRow.find(columnSelectorTemplate.replace('%s', 'entity_id')).length) {
-                    var $matrixRow = $button.parents('[data-role=row]');
-
-                    $.each('name,sku,qty,weight,entity_id,price'.split(','), function () {
-                        var columnSelector = columnSelectorTemplate.replace('%s', this),
-                            target = $matrixRow.find(columnSelector),
-                            value = $.trim($gridRow.find(columnSelector).text());
-
-                        target[target.is('input') ? 'val' : 'text'](value);//.append(button);
-                    });
-
-                    var parentElement = $matrixRow.find('[data-column=image]'),
-                        uploaderControl = parentElement.find('[data-action=upload-image]', parentElement),
-                        imageElement = $matrixRow.find('[data-role=image]'),
-                        selectedImageSrc = $gridRow.find('[data-role=image-url]').val();
-
-                    if (imageElement.length) {
-                        selectedImageSrc = selectedImageSrc || noImageUrl;
-                        imageElement.attr('src', selectedImageSrc);
-                    } else {
-                        var tmpl = $('[data-role=product-variations-matrix]').find('[data-template-for=variation-image]').html();
-
-                        tmpl = mageTemplate(tmpl, {
-                            data: {
-                                url: selectedImageSrc
-                            }
-                        });
-
-                        $(tmpl).prependTo(uploaderControl);
-                    }
-                    $matrixRow.find('[name=image]')
-                        .attr('src', selectedImageSrc)
-                        .attr('data-locked', '1')
-                        .trigger('click')
-                        .prop({disabled: true});
-
-                    $matrixRow.find('[name$="[image]"]').remove();
-                    $matrixRow.find('[data-block="variation-images"]').remove();
-                }
-                $gridDialog.trigger('closeModal');
-            };
+            $gridDialog.trigger('openModal');
         });
 });
 </script>
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/manual-product-grid.phtml b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/manual-product-grid.phtml
new file mode 100644
index 0000000000000..f11680ef3fbe2
--- /dev/null
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/manual-product-grid.phtml
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/* @var $block \Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Super\Config\Grid\ManualProduct */
+
+?>
+<div>
+    <div data-role="messages" class="messages">
+        <div class="message ">
+            <div>
+                <?= __('Choose a new product to delete and replace the current product configuration.') ?>
+                <?= __('For better results, add attributes and attribute values to your products.') ?>
+            </div>
+        </div>
+    </div>
+    <?= $block->getChildHtml(); ?>
+</div>
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/matrix.phtml b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/matrix.phtml
index ad99c40ab0e20..46411219c3d95 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/matrix.phtml
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/matrix.phtml
@@ -50,7 +50,7 @@ if ($variations) {
             }
 
             $productMatrix[] = [
-                'product_id' => $product->getId(),
+                'productId' => $product->getId(),
                 'images' => [
                     'preview' => $this->helper('Magento\Catalog\Helper\Image')
                         ->init($product, 'product_thumbnail_image')
@@ -71,7 +71,9 @@ if ($variations) {
 ?>
 
 <div data-bind="scope: 'configurableVariations'">
-    <h3 class="hidden" data-bind="css: {hidden: !showVariations() }" class="title"><?php echo __('Current Variations'); ?></h3>
+    <h3 class="hidden" data-bind="css: {hidden: !showVariations() }" class="title">
+        <?php echo __('Current Variations'); ?>
+    </h3>
 
     <script data-template-for="variation-image" type="text/x-magento-template">
         <img src="<%= data.url %>" class="variation" data-role="image"/>
@@ -80,190 +82,221 @@ if ($variations) {
         <div class="field hidden" data-bind="css: {hidden: !showVariations() }">
             <div data-role="configurable-attributes-container">
                 <!-- ko foreach: {data: attributes, as: 'attribute'} -->
-                <div data-role="attribute-info">
-                    <input name="attributes[]"
-                           data-bind="value: attribute.id, attr:{id: 'configurable_attribute_' + attribute.id}"
-                           type="hidden"/>
-                    <input
-                        data-bind="value: attribute.id, attr: {name: $parent.getAttributeRowName(attribute, 'attribute_id')}"
-                        type="hidden"/>
-                    <input
-                        data-bind="value: attribute.code, attr: {name: $parent.getAttributeRowName(attribute, 'code')}"
-                        type="hidden"/>
-                    <input
-                        data-bind="value: attribute.label, attr: {name: $parent.getAttributeRowName(attribute, 'label')}"
-                        type="hidden"/>
-                    <input data-bind="value: $index(), attr: {name: $parent.getAttributeRowName(attribute, 'position')}"
-                           type="hidden"/>
-                    <!-- ko foreach: {data: attribute.chosen, as: 'option'} -->
-                    <div data-role="option-info">
-                        <input value="1"
-                               data-bind="attr: {name: $parents[1].getOptionRowName(attribute, option, 'include')}"
+                    <div data-role="attribute-info">
+                        <input name="attributes[]"
+                               data-bind="value: attribute.id, attr:{id: 'configurable_attribute_' + attribute.id}"
                                type="hidden"/>
+                        <input data-bind="value: attribute.id,
+                                attr: {name: $parent.getAttributeRowName(attribute, 'attribute_id')}"
+                            type="hidden"/>
+                        <input data-bind="value: attribute.code,
+                                attr: {name: $parent.getAttributeRowName(attribute, 'code')}"
+                            type="hidden"/>
                         <input
-                            data-bind="value: option.value, attr: {name: $parents[1].getOptionRowName(attribute, option, 'value_index')}"
+                            data-bind="value: attribute.label,
+                                attr: {name: $parent.getAttributeRowName(attribute, 'label')}"
                             type="hidden"/>
+                        <input data-bind="value: $index(),
+                            attr: {name: $parent.getAttributeRowName(attribute, 'position')}"
+                               type="hidden"/>
+                        <!-- ko foreach: {data: attribute.chosen, as: 'option'} -->
+                            <div data-role="option-info">
+                                <input value="1"
+                                       data-bind="attr: {name: $parents[1].getOptionRowName(attribute, option, 'include')}"
+                                       type="hidden"/>
+                                <input data-bind="value: option.value,
+                                    attr: {name: $parents[1].getOptionRowName(attribute, option, 'value_index')}"
+                                    type="hidden"/>
+                            </div>
+                        <!-- /ko -->
                     </div>
-                    <!-- /ko -->
-                </div>
                 <!-- /ko -->
             </div>
             <div class="admin__data-grid-wrap admin__data-grid-wrap-static">
-                <table class="data-grid"
-                ">
-                <thead>
-                <tr>
-                    <th class="data-grid-th data-grid-thumbnail-cell col-image" data-column="image">
-                        <?= __('Image'); ?>
-                    </th>
-                    <th class="data-grid-th col-name" data-column="name">
-                        <?= __('Name'); ?>
-                    </th>
-                    <th class="data-grid-th col-sku" data-column="sku">
-                        <?= __('SKU'); ?>
-                    </th>
-                    <th class="data-grid-th col-price" data-column="price">
-                        <?= __('Price'); ?>
-                    </th>
-                    <th class="data-grid-th col-qty" data-column="qty">
-                        <?= __('Quantity'); ?>
-                    </th>
-                    <th class="data-grid-th col-weight" data-column="weight">
-                        <?= __('Weight'); ?>
-                    </th>
-                    <!-- ko foreach: getAttributesOptions() -->
-                    <th data-bind="attr: {class:'data-grid-th col-' + $data.attribute_code}, text: $data.attribute_label"></th>
-                    <!-- /ko -->
-                    <th class="data-grid-th">
-                        <?= __('Actions'); ?>
-                    </th>
-                </tr>
-                </thead>
-                <tbody data-bind="foreach: {data: productMatrix, as: 'variation'}">
-                <tr data-role="row" data-bind="css: { _disabled: !variation.status, even: $index() % 2 }, attr: { 'data-row-number': $index() }">
-                    <td class="col-image" data-column="image">
-                        <div class="actions split actions-image-uploader">
-                            <div class="action-upload action split" data-action="upload-image">
-                                <!-- ko if: $parent.isShowPreviewImage(variation) -->
-                                <img data-bind='attr: {src: variation.images.preview}' class="variation" data-role="image"/>
+                <table class="data-grid">
+                    <thead>
+                        <tr>
+                            <th class="data-grid-th data-grid-thumbnail-cell col-image" data-column="image">
+                                <?= __('Image'); ?>
+                            </th>
+                            <th class="data-grid-th col-name" data-column="name">
+                                <?= __('Name'); ?>
+                            </th>
+                            <th class="data-grid-th col-sku" data-column="sku">
+                                <?= __('SKU'); ?>
+                            </th>
+                            <th class="data-grid-th col-price" data-column="price">
+                                <?= __('Price'); ?>
+                            </th>
+                            <th class="data-grid-th col-qty" data-column="qty">
+                                <?= __('Quantity'); ?>
+                            </th>
+                            <th class="data-grid-th col-weight" data-column="weight">
+                                <?= __('Weight'); ?>
+                            </th>
+                            <!-- ko foreach: getAttributesOptions() -->
+                                <th data-bind="attr: {class:'data-grid-th col-' + $data.attribute_code},
+                                    text: $data.attribute_label">
+                                </th>
+                            <!-- /ko -->
+                            <th class="data-grid-th">
+                                <?= __('Actions'); ?>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody data-bind="foreach: {data: productMatrix, as: 'variation'}">
+                        <tr data-role="row" data-bind="css: { _disabled: !variation.status, even: $index() % 2 },
+                            attr: { 'data-row-number': $index() }">
+                            <td class="col-image" data-column="image">
+                                <div class="actions split actions-image-uploader">
+                                    <div class="action-upload action split" data-action="upload-image">
+                                        <!-- ko if: $parent.isShowPreviewImage(variation) -->
+                                            <img data-bind='attr: {src: variation.images.preview}' class="variation"
+                                                 data-role="image"/>
+                                        <!-- /ko -->
+                                        <!-- ko if: variation.editable-->
+                                            <input type="hidden" data-bind="
+                                                attr: {id: $parent.getRowId(variation, 'image'),
+                                                name: $parent.getVariationRowName(variation, 'image')}"/>
+                                            <span><?= __('Upload Image'); ?></span>
+                                            <input name="image" type="file"
+                                                   data-url="<?= $block->escapeHtml($block->getImageUploadUrl()) ?>"
+                                                   title="<?= $block->escapeHtml(__('Upload image')); ?>"/>
+                                        <!-- /ko -->
+                                    </div>
+                                    <!-- ko if: variation.editable -->
+                                        <!-- ko if: variation.images.file -->
+                                            <span data-bind="html: $parent.generateImageGallery(variation)"
+                                                  data-block="variation-images"></span>
+                                        <!-- /ko -->
+                                    <!-- /ko -->
+                                    <button type="button" class="action toggle no-display" data-toggle="dropdown"
+                                            data-mage-init='{"dropdown":{}}'>
+                                        <span><?= __('Select'); ?></span>
+                                    </button>
+                                    <ul class="dropdown">
+                                        <li>
+                                            <a class="item" data-action="no-image"><?= __('No Image'); ?></a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </td>
+                            <td class="col-name" data-column="name">
+                                <!-- ko ifnot: variation.editable -->
+                                    <a target="_blank" data-bind="text: variation.name,
+                                        attr: {href: variation.productUrl}">
+                                    </a>
                                 <!-- /ko -->
-                                <!-- ko if: variation.editable-->
-                                <input type="hidden" data-bind="attr: {id: $parent.getRowId(variation, 'image'), name: $parent.getVariationRowName(variation, 'image')}"/>
-                                <span><?= __('Upload Image'); ?></span>
-                                <input name="image" type="file"
-                                       data-url="<?= $block->escapeHtml($block->getImageUploadUrl()) ?>"
-                                       title="<?= $block->escapeHtml(__('Upload image')); ?>"/>
+                                <!-- ko if: variation.editable -->
+                                    <input type="text" class="required-entry" data-bind="
+                                        attr: {id: $parent.getRowId(variation, 'name'),
+                                        name: $parent.getVariationRowName(variation, 'name'),
+                                         value: variation.sku}"/>
+                                    <input type="hidden" data-bind="
+                                        attr: {id: $parent.getRowId(variation, 'configurable_attribute'),
+                                        name: $parent.getVariationRowName(variation, 'configurable_attribute'),
+                                        value: variation.attribute}"/>
                                 <!-- /ko -->
-                            </div>
-                            <!-- ko if: variation.editable -->
-                            <!-- ko if: variation.images.file -->
-                                <span data-bind="html: $parent.generateImageGallery(variation)" data-block="variation-images"></span>
-                            <!-- /ko -->
+                                <input type="hidden" data-role="status" data-bind="
+                                    attr: {name: $parent.getVariationRowName(variation, 'status'),
+                                    value: variation.status}"/>
+                            </td>
+                            <td class="col-sku" data-column="sku">
+                                <!-- ko ifnot: variation.editable -->
+                                    <!-- ko text: variation.sku --><!--/ko-->
+                                <!-- /ko -->
+                                <!-- ko if: variation.editable -->
+                                    <input type="text" class="required-entry"
+                                           data-bind="attr: {id: $parent.getRowId(variation, 'sku'),
+                                            name: $parent.getVariationRowName(variation, 'sku'),
+                                            value: variation.sku}"/>
+                                <!-- /ko -->
+                            </td>
+                            <td class="col-price" data-column="price">
+                                <!-- ko ifnot: variation.editable -->
+                                    <!-- ko text: variation.price --><!--/ko-->
+                                <!-- /ko -->
+                                <!-- ko if: variation.editable -->
+                                    <div class="addon">
+                                        <input type="text"
+                                               id=""
+                                               class="required-entry validate-zero-or-greater"
+                                               data-bind="attr: {id: $parent.getRowId(variation, 'price'),
+                                                name: $parent.getVariationRowName(variation, 'price'),
+                                                 value: variation.price}"/>
+                                        <label class="addafter"
+                                               data-bind="attr: {for: $parent.getRowId(variation, 'price')">
+                                            <strong>$</strong>
+                                        </label>
+                                    </div>
+                                <!-- /ko -->
+                            </td>
+                            <td class="col-qty" data-column="qty">
+                                <!-- ko ifnot: variation.editable -->
+                                    <!-- ko text: variation.quantity --><!--/ko-->
+                                <!-- /ko -->
+                                <!-- ko if: variation.editable -->
+                                    <input type="text"
+                                           class="validate-zero-or-greater"
+                                           data-bind="attr: {id: $parent.getRowId(variation, 'qty'),
+                                            name: $parent.getVariationRowName(variation, 'quantity_and_stock_status/qty'),
+                                            value: variation.quantity}"/>
+                                <!-- /ko -->
+                            </td>
+                            <td class="col-weight" data-column="weight">
+                                <!-- ko ifnot: variation.editable -->
+                                    <!-- ko text: variation.weight --><!--/ko-->
+                                <!-- /ko -->
+                                <!-- ko if: variation.editable -->
+                                    <input type="text" class="validate-zero-or-greater"
+                                           data-bind="
+                                               attr: {id: $parent.getRowId(variation, 'weight'),
+                                               name: $parent.getVariationRowName(variation, 'weight'),
+                                               value: variation.weight}"/>
+                                <!-- /ko -->
+                            </td>
+                            <!-- ko foreach: variation.options -->
+                            <td data-bind="text: label"></td>
                             <!-- /ko -->
-                            <button type="button" class="action toggle no-display" data-toggle="dropdown"
-                                    data-mage-init='{"dropdown":{}}'>
-                                <span><?= __('Select'); ?></span>
-                            </button>
-                            <ul class="dropdown">
-                                <li>
-                                    <a class="item" data-action="no-image"><?= __('No Image'); ?></a>
-                                </li>
-                            </ul>
-                        </div>
-                    </td>
-                    <td class="col-name" data-column="name">
-                        <!-- ko ifnot: variation.editable -->
-                        <a target="_blank" data-bind="text: variation.name,
-                            attr: {href: variation.productUrl}">
-                        </a>
-                        <!-- /ko -->
-                        <!-- ko if: variation.editable -->
-                        <input type="text" class="required-entry" data-bind="attr: {id: $parent.getRowId(variation, 'name'), name: $parent.getVariationRowName(variation, 'name'), value: variation.sku}"/>
-                        <input type="hidden" data-bind="attr: {id: $parent.getRowId(variation, 'configurable_attribute'), name: $parent.getVariationRowName(variation, 'configurable_attribute'), value: variation.attribute}"/>
-                        <!-- /ko -->
-                        <input type="hidden" data-role="status" data-bind="attr: {name: $parent.getVariationRowName(variation, 'status'), value: variation.status}"/>
-                    </td>
-                    <td class="col-sku" data-column="sku">
-                        <!-- ko ifnot: variation.editable -->
-                            <!-- ko text: variation.sku --><!--/ko-->
-                        <!-- /ko -->
-                        <!-- ko if: variation.editable -->
-                        <input type="text" class="required-entry"
-                               data-bind="attr: {id: $parent.getRowId(variation, 'sku'), name: $parent.getVariationRowName(variation, 'sku'), value: variation.sku}"/>
-                        <!-- /ko -->
-                    </td>
-                    <td class="col-price" data-column="price">
-                        <!-- ko ifnot: variation.editable -->
-                            <!-- ko text: variation.price --><!--/ko-->
-                        <!-- /ko -->
-                        <!-- ko if: variation.editable -->
-                        <div class="addon">
-                            <input type="text"
-                                   id=""
-                                   class="required-entry validate-zero-or-greater"
-                                   data-bind="attr: {id: $parent.getRowId(variation, 'price'), name: $parent.getVariationRowName(variation, 'price'), value: variation.price}"/>
-                            <label class="addafter"
-                                   data-bind="attr: {for: $parent.getRowId(variation, 'price')"><strong>$</strong></label>
-                        </div>
-                        <!-- /ko -->
-
-                    </td>
-                    <td class="col-qty" data-column="qty">
-                        <!-- ko ifnot: variation.editable -->
-                            <!-- ko text: variation.quantity --><!--/ko-->
-                        <!-- /ko -->
-                        <!-- ko if: variation.editable -->
-                        <input type="text"
-                               class="validate-zero-or-greater"
-                               data-bind="attr: {id: $parent.getRowId(variation, 'qty'), name: $parent.getVariationRowName(variation, 'quantity_and_stock_status/qty'), value: variation.quantity}"/>
-                        <!-- /ko -->
-
-                    </td>
-                    <td class="col-weight" data-column="weight">
-                        <!-- ko ifnot: variation.editable -->
-                            <!-- ko text: variation.weight --><!--/ko-->
-                        <!-- /ko -->
-                        <!-- ko if: variation.editable -->
-                        <input type="text" class="validate-zero-or-greater"
-                               data-bind="attr: {id: $parent.getRowId(variation, 'weight'), name: $parent.getVariationRowName(variation, 'weight'), value: variation.weight}"/>
-                        <!-- /ko -->
-
-                    </td>
-                    <!-- ko foreach: variation.options -->
-                    <td data-bind="text: label"></td>
-                    <!-- /ko -->
-                    <td class="data-grid-actions-cell">
-                        <input type="hidden" name="associated_product_ids[]" data-bind="value: variation.productId" data-column="entity_id"/>
-
-                        <div class="action-select-wrap" data-bind="
-                            css : {
-                                '_active' : $parent.opened() === $index()
-                            },
-                            outerClick: $parent.closeList.bind($parent, $index())">
-                            <button class="action-select" data-bind="click: $parent.toggleList.bind($parent, $index())">
-                                <span data-bind="i18n: 'Select'"></span>
-                            </button>
-                            <ul class="action-menu _active" data-bind="css: {'_active': $parent.opened() === $index()}">
-                                <li>
-                                    <a class="action-menu-item" data-bind="attr: {'data-attributes': variation.attribute}"
-                                       data-action="choose" href="#"><?= __('Choose a different Product');?></a>
-                                </li>
-                                <li>
-                                    <a class="action-menu-item" data-bind="
-                                    i18n: variation.status == 1 ? 'Disable Product' : 'Enable Product',
-                                    click: $parent.toggleProduct.bind($parent, $index())"></a>
-                                </li>
-                                <li>
-                                    <a class="action-menu-item" data-bind="click: $parent.removeProduct.bind($parent, $index())">
-                                        <?= __('Remove Product');?>
-                                    </a>
-                                </li>
-
-                            </ul>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
+                            <td class="data-grid-actions-cell">
+                                <input type="hidden" name="associated_product_ids[]" data-bind="value: variation.productId" data-column="entity_id"/>
+                                <div class="action-select-wrap" data-bind="
+                                        css : {
+                                            '_active' : $parent.opened() === $index()
+                                        },
+                                        outerClick: $parent.closeList.bind($parent, $index)"
+                                >
+                                    <button class="action-select" data-bind="click: $parent.toggleList.bind($parent, $index())">
+                                        <span data-bind="i18n: 'Select'"></span>
+                                    </button>
+                                    <ul class="action-menu _active" data-bind="css: {'_active': $parent.opened() === $index()}">
+                                        <li>
+                                            <a class="action-menu-item"
+                                               data-bind="
+                                                    attr: {'data-attributes': variation.attribute},
+                                                    click: $parent.showGrid.bind($parent, $index())
+                                                "
+                                               data-action="choose"
+                                               href="#">
+                                                <?= __('Choose a different Product');?>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="action-menu-item" data-bind="
+                                                i18n: variation.status == 1 ? 'Disable Product' : 'Enable Product',
+                                                click: $parent.toggleProduct.bind($parent, $index())">
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="action-menu-item" data-bind="click: $parent.removeProduct.bind($parent, $index())">
+                                                <?= __('Remove Product');?>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
                 </table>
             </div>
         </div>
@@ -289,7 +322,10 @@ if ($variations) {
                         "component": "Magento_ConfigurableProduct/js/variations/variations",
                         "variations": <?= $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($productMatrix) ?>,
                         "productAttributes": <?= $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($attributes) ?>,
-                        "productUrl": "<?= $block->getUrl('catalog/product/edit', ['id' => '%id%']) ?>"
+                        "productUrl": "<?= $block->getUrl('catalog/product/edit', ['id' => '%id%']) ?>",
+                        "associatedProductsFilter": "configurable_associated_product_listing.configurable_associated_product_listing.listing_top.listing_filters",
+                        "associatedProductsProvider": "configurable_associated_product_listing.data_source"
+
                     }
                 }
             }
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/ui_component/configurable_associated_product_listing.xml b/app/code/Magento/ConfigurableProduct/view/adminhtml/ui_component/configurable_associated_product_listing.xml
new file mode 100644
index 0000000000000..aee041d2b5bb8
--- /dev/null
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/ui_component/configurable_associated_product_listing.xml
@@ -0,0 +1,274 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
+    <argument name="data" xsi:type="array">
+        <item name="js_config" xsi:type="array">
+            <item name="provider" xsi:type="string">configurable_associated_product_listing.data_source</item>
+            <item name="deps" xsi:type="string">configurable_associated_product_listing.data_source</item>
+        </item>
+        <item name="spinner" xsi:type="string">product_columns</item>
+    </argument>
+    <dataSource name="data_source">
+        <argument name="dataProvider" xsi:type="configurableObject">
+            <argument name="class" xsi:type="string">Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider</argument>
+            <argument name="name" xsi:type="string">data_source</argument>
+            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
+            <argument name="requestFieldName" xsi:type="string">id</argument>
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
+                </item>
+            </argument>
+        </argument>
+        <argument name="data" xsi:type="array">
+            <item name="js_config" xsi:type="array">
+                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
+            </item>
+        </argument>
+    </dataSource>
+    <container name="listing_top">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="template" xsi:type="string">ui/grid/toolbar</item>
+            </item>
+        </argument>
+        <filters name="listing_filters" class="Magento\ConfigurableProduct\Ui\Component\Listing\AssociatedProduct\Filters">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="links" xsi:type="array">
+                        <item name="applied" xsi:type="string">not-save-filter</item>
+                    </item>
+                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
+                    <item name="dataScope" xsi:type="string">filters</item>
+                    <item name="storageConfig" xsi:type="array">
+                        <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.bookmarks</item>
+                        <item name="namespace" xsi:type="string">current.filters</item>
+                    </item>
+                    <item name="childDefaults" xsi:type="array">
+                        <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.listing_filters</item>
+                        <item name="imports" xsi:type="array">
+                            <item name="visible" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
+                        </item>
+                    </item>
+                </item>
+            </argument>
+            <filterInput name="name">
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="dataScope" xsi:type="string">name</item>
+                        <item name="label" xsi:type="string" translate="true">Name</item>
+                    </item>
+                </argument>
+            </filterInput>
+            <filterSelect name="attribute_set_id">
+                <argument name="optionsProvider" xsi:type="configurableObject">
+                    <argument name="class" xsi:type="string">Magento\Catalog\Model\Product\AttributeSet\Options</argument>
+                </argument>
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="dataScope" xsi:type="string">attribute_set_id</item>
+                        <item name="caption" xsi:type="string" translate="true">Select...</item>
+                        <item name="label" xsi:type="string" translate="true">Attribute Set</item>
+                    </item>
+                </argument>
+            </filterSelect>
+            <filterInput name="sku">
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="dataScope" xsi:type="string">sku</item>
+                        <item name="label" xsi:type="string" translate="true">SKU</item>
+                    </item>
+                </argument>
+            </filterInput>
+            <filterRange name="price">
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="dataScope" xsi:type="string">price</item>
+                        <item name="label" xsi:type="string" translate="true">Price</item>
+                        <item name="childDefaults" xsi:type="array">
+                            <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.listing_filters</item>
+                        </item>
+                    </item>
+                </argument>
+                <filterInput name="from">
+                    <argument name="data" xsi:type="array">
+                        <item name="config" xsi:type="array">
+                            <item name="dataScope" xsi:type="string">from</item>
+                            <item name="label" xsi:type="string" translate="true">from</item>
+                            <item name="placeholder" xsi:type="string" translate="true">From</item>
+                        </item>
+                    </argument>
+                </filterInput>
+                <filterInput name="to">
+                    <argument name="data" xsi:type="array">
+                        <item name="config" xsi:type="array">
+                            <item name="dataScope" xsi:type="string">to</item>
+                            <item name="label" xsi:type="string" translate="true">to</item>
+                            <item name="placeholder" xsi:type="string" translate="true">To</item>
+                        </item>
+                    </argument>
+                </filterInput>
+            </filterRange>
+            <filterSelect name="status">
+                <argument name="optionsProvider" xsi:type="configurableObject">
+                    <argument name="class" xsi:type="string">Magento\Catalog\Model\Product\Attribute\Source\Status</argument>
+                </argument>
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="dataScope" xsi:type="string">status</item>
+                        <item name="caption" xsi:type="string" translate="true">Select...</item>
+                        <item name="label" xsi:type="string" translate="true">Status</item>
+                    </item>
+                </argument>
+            </filterSelect>
+        </filters>
+        <paging name="listing_paging">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="selectProvider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.product_columns.ids</item>
+                    <item name="storageConfig" xsi:type="array">
+                        <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.bookmarks</item>
+                        <item name="namespace" xsi:type="string">current.paging</item>
+                    </item>
+                    <item name="displayArea" xsi:type="string">bottom</item>
+                    <item name="options" xsi:type="array">
+                        <item name="20" xsi:type="array">
+                            <item name="value" xsi:type="number">20</item>
+                            <item name="label" xsi:type="string" translate="true">20</item>
+                        </item>
+                        <item name="30" xsi:type="array">
+                            <item name="value" xsi:type="number">30</item>
+                            <item name="label" xsi:type="string" translate="true">30</item>
+                        </item>
+                        <item name="50" xsi:type="array">
+                            <item name="value" xsi:type="number">50</item>
+                            <item name="label" xsi:type="string" translate="true">50</item>
+                        </item>
+                        <item name="100" xsi:type="array">
+                            <item name="value" xsi:type="number">100</item>
+                            <item name="label" xsi:type="string" translate="true">100</item>
+                        </item>
+                        <item name="200" xsi:type="array">
+                            <item name="value" xsi:type="number">200</item>
+                            <item name="label" xsi:type="string" translate="true">200</item>
+                        </item>
+                    </item>
+                </item>
+            </argument>
+        </paging>
+    </container>
+    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="storageConfig" xsi:type="array">
+                    <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.bookmarks</item>
+                    <item name="namespace" xsi:type="string">current</item>
+                </item>
+                <item name="childDefaults" xsi:type="array">
+                    <item name="fieldAction" xsi:type="array">
+                        <item name="provider" xsi:type="string">configurableVariations</item>
+                        <item name="target" xsi:type="string">selectProduct</item>
+                        <item name="params" xsi:type="array">
+                            <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
+                        </item>
+                    </item>
+                    <item name="controlVisibility" xsi:type="boolean">true</item>
+                    <item name="storageConfig" xsi:type="array">
+                        <item name="provider" xsi:type="string">configurable_associated_product_listing.configurable_associated_product_listing.listing_top.bookmarks</item>
+                        <item name="root" xsi:type="string">columns.${ $.index }</item>
+                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
+                    </item>
+                </item>
+            </item>
+        </argument>
+        <column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/multiselect</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="controlVisibility" xsi:type="boolean">false</item>
+                    <item name="indexField" xsi:type="string">entity_id</item>
+                    <item name="sortOrder" xsi:type="number">0</item>
+                </item>
+            </argument>
+        </column>
+        <column name="entity_id">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="dataType" xsi:type="string">text</item>
+                    <item name="sorting" xsi:type="string">asc</item>
+                    <item name="align" xsi:type="string">left</item>
+                    <item name="label" xsi:type="string" translate="true">ID</item>
+                    <item name="sortOrder" xsi:type="number">10</item>
+                </item>
+            </argument>
+        </column>
+        <column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="add_field" xsi:type="boolean">true</item>
+                    <item name="sortable" xsi:type="boolean">false</item>
+                    <item name="altField" xsi:type="string">name</item>
+                    <item name="has_preview" xsi:type="string">1</item>
+                    <item name="dataType" xsi:type="string">text</item>
+                    <item name="align" xsi:type="string">left</item>
+                    <item name="label" xsi:type="string" translate="true">Thumbnail</item>
+                    <item name="sortOrder" xsi:type="number">20</item>
+                </item>
+            </argument>
+        </column>
+        <column name="name">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="add_field" xsi:type="boolean">true</item>
+                    <item name="dataType" xsi:type="string">text</item>
+                    <item name="align" xsi:type="string">left</item>
+                    <item name="label" xsi:type="string" translate="true">Name</item>
+                    <item name="sortOrder" xsi:type="number">30</item>
+                </item>
+            </argument>
+        </column>
+        <column name="sku">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="dataType" xsi:type="string">text</item>
+                    <item name="align" xsi:type="string">left</item>
+                    <item name="label" xsi:type="string" translate="true">SKU</item>
+                    <item name="sortOrder" xsi:type="number">60</item>
+                </item>
+            </argument>
+        </column>
+        <column name="price" class="Magento\Catalog\Ui\Component\Listing\Columns\Price">
+            <argument name="data" xsi:type="array">
+                <item name="js_config" xsi:type="array">
+                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
+                </item>
+                <item name="config" xsi:type="array">
+                    <item name="add_field" xsi:type="boolean">true</item>
+                    <item name="dataType" xsi:type="string">text</item>
+                    <item name="align" xsi:type="string">left</item>
+                    <item name="label" xsi:type="string" translate="true">Price</item>
+                    <item name="sortOrder" xsi:type="number">70</item>
+                </item>
+            </argument>
+        </column>
+    </columns>
+</listing>
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/attributes_values.js b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/attributes_values.js
index 655ff2a0524ce..fd928ca0f7779 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/attributes_values.js
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/attributes_values.js
@@ -37,13 +37,6 @@ define([
         }
     };
 
-    /**
-     * Memorize results by attributeIds
-     */
-    var saveAttributes = _.memoize(function (attributeIds, attributes) {
-        return _.map(attributes, this.createAttribute, this);
-    });
-
     return Collapsible.extend({
         stepInitialized: false,
         attributes: ko.observableArray([]),
@@ -53,14 +46,24 @@ define([
                 error: null
             }
         },
+        initialize: function () {
+            this._super();
+            this.createAttribute = _.wrap(this.createAttribute.bind(this), function () {
+                var args = Array.prototype.slice.call(arguments);
+                return this.doInitSavedOptions.call(this, args.shift().apply(this, args));
+            });
+            this.createAttribute = _.memoize(this.createAttribute.bind(this), _.property('id'));
+        },
         createOption: function () {
             // this - current attribute
             this.options.push({value: 0, label: '', id: utils.uniqueid(), attribute_id: this.id, is_new: true});
         },
         saveOption: function (option) {
-            this.options.remove(option);
-            this.options.push(option);
-            this.chosenOptions.push(option.id);
+            if (!_.isEmpty(option.label)) {
+                this.options.remove(option);
+                this.options.push(option);
+                this.chosenOptions.push(option.id);
+            }
         },
         removeOption: function (option) {
             this.options.remove(option);
@@ -87,15 +90,19 @@ define([
             return index < 3;
         },
         saveAttribute: function () {
+            var errorMessage = $.mage.__('Select options for all attributes or remove unused attributes.');
             this.attributes.each(function(attribute) {
                 attribute.chosen = [];
                 if (!attribute.chosenOptions.getLength()) {
-                    throw new Error($.mage.__('Select options for all attributes or remove unused attributes.'));
+                    throw new Error(errorMessage);
                 }
                 attribute.chosenOptions.each(function(id) {
                     attribute.chosen.push(attribute.options.findWhere({id:id}));
                 });
             });
+            if (!this.attributes().length) {
+                throw new Error(errorMessage);
+            }
         },
         selectAllAttributes: function (attribute) {
             this.chosenOptions(_.pluck(attribute.options(), 'id'));
@@ -146,25 +153,24 @@ define([
                 data: {attributes: attributeIds},
                 showLoader: true
             }).done(function(attributes){
-                this.attributes(saveAttributes.call(this, attributeIds, attributes));
-                this.doInitSavedOptions();
+                attributes = _.sortBy(attributes, function(attribute) {
+                    return this.wizard.data.attributesIds.indexOf(attribute.id);
+                }.bind(this));
+                this.attributes(_.map(attributes, this.createAttribute));
             }.bind(this));
         },
-        doInitSavedOptions: function() {
-            if (false === this.stepInitialized) {
-                this.stepInitialized = true;
-                _.each(this.attributes(), function(attribute) {
-                    var selectedAttribute = _.findWhere(this.initData.attributes, {id: attribute.id});
+        doInitSavedOptions: function(attribute) {
+            var selectedAttribute = _.findWhere(this.initData.attributes, {id: attribute.id});
 
-                    if (selectedAttribute) {
-                        var selectedOptions = _.pluck(selectedAttribute.chosen, 'value');
-                        var selectedOptionsIds = _.pluck(_.filter(attribute.options(), function (option) {
-                            return _.contains(selectedOptions, option.value)
-                        }), 'id');
-                        attribute.chosenOptions(selectedOptionsIds);
-                    }
-                }.bind(this));
+            if (selectedAttribute) {
+                var selectedOptions = _.pluck(selectedAttribute.chosen, 'value');
+                var selectedOptionsIds = _.pluck(_.filter(attribute.options(), function (option) {
+                    return _.contains(selectedOptions, option.value);
+                }), 'id');
+                attribute.chosenOptions(selectedOptionsIds);
+                this.initData.attributes = _.without(this.initData.attributes, selectedAttribute);
             }
+            return attribute;
         },
         render: function(wizard) {
             this.wizard = wizard;
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/select_attributes.js b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/select_attributes.js
index 6b5fb2d225611..b80e8332ed282 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/select_attributes.js
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/select_attributes.js
@@ -45,9 +45,12 @@ define([
         },
         render: function (wizard) {
             this.wizard = wizard;
+            this.setNotificationMessage();
+        },
+        setNotificationMessage: function () {
             if (this.mode == 'edit') {
-                wizard.setNotificationMessage($.mage.__('When you remove or add an attribute, we automatically ' +
-                    'update all configurations and you will need to manually recreate the current configurations.'));
+                this.wizard.setNotificationMessage($.mage.__('When you remove or add an attribute, we automatically ' +
+                'update all configurations and you will need to manually recreate the current configurations.'));
             }
         },
         doSelectSavedAttributes: function() {
@@ -81,6 +84,7 @@ define([
             if (!wizard.data.attributesIds() || wizard.data.attributesIds().length === 0) {
                 throw new Error($.mage.__('Please, select attribute(s)'));
             }
+            this.setNotificationMessage();
         },
         back: function () {
         }
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/summary.js b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/summary.js
index c3891c22343f2..c04b2e9931c7c 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/summary.js
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/summary.js
@@ -24,13 +24,15 @@ define([
             gridNew: [],
             gridDeleted: [],
             attributes: [],
-            attributesName: [],
+            attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Price')],
             sections: [],
             gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
         },
         initObservable: function () {
-            this._super().observe('gridExisting gridNew gridDeleted attributes attributesName sections');
-
+            this._super().observe('gridExisting gridNew gridDeleted attributes sections');
+            this.gridExisting.columns = ko.observableArray();
+            this.gridNew.columns = ko.observableArray();
+            this.gridDeleted.columns = ko.observableArray();
             return this;
         },
         nextLabelText: $.mage.__('Generate Products'),
@@ -38,21 +40,32 @@ define([
         generateGrid: function (variations, getSectionValue) {
             var productName = this.variationsComponent().getProductValue('name');
             var productPrice = this.variationsComponent().getProductValue('price');
+            var productWeight = this.variationsComponent().getProductValue('weight');
             var variationsKeys = [];
+            var gridExisting = [];
+            var gridNew = [];
+            var gridDeleted = [];
             this.variations = [];
 
             _.each(variations, function (options) {
                 var images, sku, quantity, price;
+                var productId = this.variationsComponent().getProductIdByOptions(options);
+                if (productId) {
+                    var product = _.findWhere(this.variationsComponent().variations, {productId: productId});
+                }
                 images = getSectionValue('images', options);
                 sku = productName + _.reduce(options, function (memo, option) {
                     return memo + '-' + option.label;
                 }, '');
                 quantity = getSectionValue('quantity', options);
+                if (!quantity && productId) {
+                    quantity = product.quantity;
+                }
                 price = getSectionValue('price', options);
-                price = price || productPrice;
-                var productId = this.variationsComponent().getProductIdByOptions(options);
+                if (!price) {
+                    price = productId ? product.price : productPrice;
+                }
                 if (productId && !images.file) {
-                    var product = _.findWhere(this.variationsComponent().variations, {product_id: productId});
                     images = product.images;
                 }
                 var variation = {
@@ -61,23 +74,39 @@ define([
                     sku: sku,
                     quantity: quantity,
                     price: price,
-                    product_id: productId,
+                    productId: productId,
+                    weight: productWeight,
                     editable: true
                 };
-                this.variations.push(variation);
                 if (productId) {
-                    this.gridExisting.push(this.prepareRowForGrid(variation));
+                    variation.sku = product.sku;
+                    variation.weight = product.weight;
+                    gridExisting.push(this.prepareRowForGrid(variation));
                 } else {
-                    this.gridNew.push(this.prepareRowForGrid(variation));
+                    gridNew.push(this.prepareRowForGrid(variation));
                 }
+                this.variations.push(variation);
                 variationsKeys.push(this.variationsComponent().getVariationKey(options));
             }, this);
 
+            this.gridExisting(gridExisting);
+            this.gridExisting.columns(this.getColumnsName(this.wizard.data.attributes));
+
+            if (gridNew.length > 0) {
+                this.gridNew(gridNew);
+                this.gridNew.columns(this.getColumnsName(this.wizard.data.attributes));
+            }
+
             _.each(_.omit(this.variationsComponent().productAttributesMap, variationsKeys), function (productId) {
-                this.gridDeleted.push(this.prepareRowForGrid(
-                    _.findWhere(this.variationsComponent().variations, {product_id: productId})
+                gridDeleted.push(this.prepareRowForGrid(
+                    _.findWhere(this.variationsComponent().variations, {productId: productId})
                 ));
             }.bind(this));
+
+            if (gridDeleted.length > 0) {
+                this.gridDeleted(gridDeleted);
+                this.gridDeleted.columns(this.getColumnsName(this.variationsComponent().productAttributes));
+            }
         },
         prepareRowForGrid: function(variation) {
             var row = [];
@@ -97,16 +126,19 @@ define([
         getGridId: function() {
             return _.uniqueId('grid_');
         },
+        getColumnsName: function (attributes) {
+            var columns = this.attributesName.slice(0);
+
+            attributes.each(function (attribute, index) {
+                columns.splice(3 + index, 0, attribute.label);
+            }, this);
+
+            return columns;
+        },
         render: function (wizard) {
             this.wizard = wizard;
             this.sections(wizard.data.sections());
             this.attributes(wizard.data.attributes());
-
-            this.attributesName([$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Price')]);
-            this.attributes.each(function (attribute, index) {
-                this.attributesName.splice(3 + index, 0, attribute.label);
-            }, this);
-
             this.gridNew([]);
             this.gridExisting([]);
             this.gridDeleted([]);
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/variations.js b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/variations.js
index 6d17cd03f5148..dea945abb2997 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/variations.js
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/variations.js
@@ -10,16 +10,20 @@ define([
 ], function (Component, $, ko, _) {
     'use strict';
 
-    var viewModel;
-    viewModel = Component.extend({
+    return Component.extend({
         defaults: {
             opened: false,
             attributes: [],
             productMatrix: [],
-            productAttributesMap: null
+            variations: [],
+            productAttributes: [],
+            rowIndexToEdit: false,
+            productAttributesMap: null,
+            modules: {
+                associatedProductsFilter: '${ $.associatedProductsFilter }',
+                associatedProductsProvider: '${ $.associatedProductsProvider }'
+            }
         },
-        variations: [],
-        productAttributes: [],
         initialize: function () {
             this._super();
             if (this.variations.length) {
@@ -27,33 +31,50 @@ define([
             }
             this.initProductAttributesMap();
         },
+        /**
+         * Select different product in configurations section
+         * @param rowIndex
+         */
+        selectProduct: function (rowIndex) {
+            var productToEdit = this.productMatrix.splice(this.rowIndexToEdit, 1)[0],
+                newProduct = this.associatedProductsProvider().data.items[rowIndex];
+
+            newProduct = _.extend(productToEdit, newProduct);
+            newProduct.productId = productToEdit.entity_id;
+            newProduct.productUrl = this.buildProductUrl(newProduct.entity_id);
+            newProduct.editable = false;
+            newProduct.images = {preview: newProduct.thumbnail_src};
+            this.productAttributesMap[this.getVariationKey(newProduct.options)] = newProduct.productId;
+            this.productMatrix.splice(this.rowIndexToEdit, 0, newProduct);
+            $('#associated-products-container').trigger('closeModal');
+        },
         initObservable: function () {
             this._super().observe('actions opened attributes productMatrix');
             return this;
         },
-        getProductValue: function(name) {
+        getProductValue: function (name) {
             return $('[name="product[' + name.split('/').join('][') + ']"]', this.productForm).val();
         },
-        getRowId: function(data, field) {
+        getRowId: function (data, field) {
             var key = data.variationKey;
             return 'variations-matrix-' + key + '-' + field;
         },
         getVariationRowName: function(variation, field) {
-            if (variation.product_id) {
-                return 'configurations[' + variation.product_id + '][' + field.split('/').join('][') + ']';
+            if (variation.productId) {
+                return 'configurations[' + variation.productId + '][' + field.split('/').join('][') + ']';
             } else {
                 var key = variation.variationKey;
                 return 'variations-matrix[' + key + '][' + field.split('/').join('][') + ']';
             }
         },
-        getAttributeRowName: function(attribute, field) {
-            return 'product[configurable_attributes_data][' + attribute.id  + '][' + field + ']';
+        getAttributeRowName: function (attribute, field) {
+            return 'product[configurable_attributes_data][' + attribute.id + '][' + field + ']';
         },
-        getOptionRowName: function(attribute, option, field) {
-            return 'product[configurable_attributes_data][' + attribute.id  + '][values][' + option.value + ']['
+        getOptionRowName: function (attribute, option, field) {
+            return 'product[configurable_attributes_data][' + attribute.id + '][values][' + option.value + ']['
                 + field + ']';
         },
-        render: function(variations, attributes) {
+        render: function (variations, attributes) {
             this.changeButtonWizard();
             this.populateVariationMatrix(variations);
             this.attributes(attributes);
@@ -64,33 +85,37 @@ define([
             var $button = $('[data-action=open-steps-wizard] [data-role=button-label]');
             $button.text($button.attr('data-edit-label'));
         },
-        getAttributesOptions: function() {
+        getAttributesOptions: function () {
             return this.showVariations() ? this.productMatrix()[0].options : [];
         },
-        showVariations: function() {
+        showVariations: function () {
             return this.productMatrix().length > 0;
         },
-        populateVariationMatrix: function(variations) {
+        populateVariationMatrix: function (variations) {
             this.productMatrix([]);
-            _.each(variations, function(variation) {
+            _.each(variations, function (variation) {
                 var attributes = _.reduce(variation.options, function (memo, option) {
                     var attribute = {};
                     attribute[option.attribute_code] = option.value;
                     return _.extend(memo, attribute);
                 }, {});
                 this.productMatrix.push(_.extend(variation, {
-                    productId: variation.product_id || null,
+                    productId: variation.productId || null,
                     name: variation.name || variation.sku,
-                    weight: variation.weight || this.getProductValue('weight'),
+                    weight: variation.weight,
                     attribute: JSON.stringify(attributes),
                     variationKey: _.values(attributes).join('-'),
-                    editable: variation.editable === undefined ? !variation.product_id : variation.editable,
-                    productUrl: this.productUrl.replace('%id%', variation.product_id),
+                    editable: variation.editable === undefined ? !variation.productId : variation.editable,
+                    productUrl: this.buildProductUrl(variation.productId),
                     status: variation.status === undefined ? 1 : parseInt(variation.status)
                 }));
             }, this);
         },
+        buildProductUrl: function (productId) {
+            return this.productUrl.replace('%id%', productId);
+        },
         removeProduct: function (rowIndex) {
+            this.opened(false);
             this.productMatrix.splice(rowIndex, 1);
             if (this.productMatrix().length === 0) {
                 this.attributes.each(function(attribute) {
@@ -98,6 +123,13 @@ define([
                 });
             }
         },
+        showGrid: function (rowIndex) {
+            var attributes = JSON.parse(this.productMatrix()[rowIndex].attribute);
+            this.rowIndexToEdit = rowIndex;
+            this.associatedProductsProvider().params.attribute_ids = _.keys(attributes);
+            this.associatedProductsFilter().set('filters', attributes).apply();
+            $('#associated-products-container').trigger('openModal');
+        },
         toggleProduct: function (rowIndex) {
             var productChanged = {};
             if (this.productMatrix()[rowIndex].editable) {
@@ -124,7 +156,7 @@ define([
             return this;
         },
         closeList: function (rowIndex) {
-            if (this.opened() === rowIndex) {
+            if (this.opened() === rowIndex()) {
                 this.opened(false);
             }
 
@@ -140,25 +172,25 @@ define([
             if (null === this.productAttributesMap) {
                 this.productAttributesMap = {};
                 _.each(this.variations, function(product) {
-                    this.productAttributesMap[this.getVariationKey(product.options)] = product.product_id;
+                    this.productAttributesMap[this.getVariationKey(product.options)] = product.productId;
                 }.bind(this));
             }
         },
-        isShowPreviewImage: function(variation) {
+        isShowPreviewImage: function (variation) {
             return variation.images.preview && (!variation.editable || variation.images.file);
         },
-        generateImageGallery: function(variation) {
+        generateImageGallery: function (variation) {
             var gallery = [];
             var imageFields = ['position', 'file', 'disabled', 'label'];
-            _.each(variation.images.images, function(image) {
-                _.each(imageFields, function(field) {
+            _.each(variation.images.images, function (image) {
+                _.each(imageFields, function (field) {
                     gallery.push(
                         '<input type="hidden" name="'
                         + this.getVariationRowName(variation, 'media_gallery/images/' + image.file_id + '/' + field)
                         + '" value="' + (image[field] || '') + '" />'
                     );
                 }, this);
-                _.each(image.galleryTypes, function(imageType) {
+                _.each(image.galleryTypes, function (imageType) {
                     gallery.push(
                         '<input type="hidden" name="' + this.getVariationRowName(variation, imageType)
                         + '" value="' + image.file + '" />'
@@ -167,18 +199,18 @@ define([
             }, this);
             return gallery.join('\n');
         },
-        initImageUpload: function() {
+        initImageUpload: function () {
             require([
                 "jquery",
                 "mage/template",
                 "jquery/file-uploader",
                 "mage/mage",
                 "mage/translate"
-            ], function(jQuery, mageTemplate){
+            ], function (jQuery, mageTemplate) {
 
                 jQuery(function ($) {
                     var matrix = $('[data-role=product-variations-matrix]');
-                    matrix.find('[data-action=upload-image]').find('[name=image]').each(function() {
+                    matrix.find('[data-action=upload-image]').find('[name=image]').each(function () {
                         var imageColumn = $(this).closest('[data-column=image]');
                         if (imageColumn.find('[data-role=image]').length) {
                             imageColumn.find('[data-toggle=dropdown]').dropdown().show();
@@ -213,10 +245,10 @@ define([
                                     alert($.mage.__('We don\'t recognize or support this file extension type.'));
                                 }
                             },
-                            start: function(event) {
+                            start: function (event) {
                                 $(event.target).closest('[data-action=upload-image]').addClass('loading');
                             },
-                            stop: function(event) {
+                            stop: function (event) {
                                 $(event.target).closest('[data-action=upload-image]').removeClass('loading');
                             }
                         });
@@ -236,5 +268,4 @@ define([
             });
         }
     });
-    return viewModel;
 });
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/template/variations/steps/summary-grid.html b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/template/variations/steps/summary-grid.html
index 77d393bc611f9..11a5ad59008fc 100644
--- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/template/variations/steps/summary-grid.html
+++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/template/variations/steps/summary-grid.html
@@ -7,40 +7,42 @@
 
 <div class="admin__collapsible-block-wrapper opened">
     <div class="fieldset-wrapper-title">
-        <strong class="admin__collapsible-title" data-toggle="collapse" data-bind="attr:{'data-target': '#'+$data.id}">
-            <span data-bind="text: $data.title"></span>
+        <strong class="admin__collapsible-title" data-toggle="collapse" data-bind="attr:{'data-target': '#'+id}">
+            <span data-bind="text: title"></span>
         </strong>
     </div>
 
-    <div class="fieldset-wrapper-content in collapse" data-collapsed="true" data-bind="attr: {id: $data.id}">
-        <div class="note" data-bind="text: $data.note"></div>
+    <div class="fieldset-wrapper-content in collapse" data-collapsed="true" data-bind="attr: {id: id}">
+        <div class="note" data-bind="text: note"></div>
         <table class="data-grid data-grid-configurable">
             <thead>
             <tr>
-                <!-- ko foreach: $parent.attributesName -->
-                <th class="data-grid-th" data-bind="text: $data"></th>
+                <!-- ko foreach: { data: grid.columns, as: 'column' } -->
+                <th class="data-grid-th" data-bind="text: column"></th>
                 <!-- /ko -->
             </tr>
             </thead>
 
-            <tbody data-bind="foreach: $data.grid">
+            <tbody>
+            <!-- ko foreach: { data: grid, as: 'product' } -->
             <tr>
-                <!-- ko foreach: $data -->
-                <!-- ko if: $data && $data.preview -->
+                <!-- ko foreach: { data: product, as: 'property' } -->
+                <!-- ko if: property && property.preview -->
                 <td class="data-grid-thumbnail-cell">
                     <div class="images-uploaded">
-                        <img data-bind="attr: {src: $data.preview}"/>
-                        <span data-bind="text: $data.images.length"></span>
+                        <img data-bind="attr: {src: property.preview}"/>
+                        <span data-bind="text: property.images.length"></span>
                     </div>
                 </td>
                 <!-- /ko -->
-                <!-- ko ifnot: $data && $data.preview -->
+                <!-- ko ifnot: property && property.preview -->
                 <td>
-                    <span data-bind='text: $data'></span>
+                    <span data-bind='text: property'></span>
                 </td>
                 <!-- /ko -->
                 <!-- /ko -->
             </tr>
+            <!-- /ko -->
             </tbody>
         </table>
     </div>
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/step-wizard.js b/app/code/Magento/Ui/view/base/web/js/lib/step-wizard.js
index 73acbf7614bb5..020f1353c1756 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/step-wizard.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/step-wizard.js
@@ -57,6 +57,9 @@ define([
             newIndex = _.isNumber(newIndex) ? newIndex : this.index + 1;
             try {
                 this.getStep().force(this);
+                if (newIndex >= steps.length) {
+                    return false;
+                }
             } catch (e) {
                 this.setNotificationMessage(e.message, true);
 
@@ -64,6 +67,7 @@ define([
             }
             this.cleanErrorNotificationMessage();
             this.index = newIndex;
+            this.cleanNotificationMessage();
             this.render();
         };
         this._prev = function (newIndex) {
@@ -117,11 +121,13 @@ define([
         };
         this.render = function () {
             this.hideNotificationMessage();
-            if (!_.isEmpty(this.getStep())) {
-                this.getStep().render(this);
-            }
+            this.getStep().render(this);
+        };
+        this.init = function () {
+            this.updateLabels(this.getStep());
+            this.render();
         };
-        this.render();
+        this.init();
     };
 
     return Component.extend({
diff --git a/app/design/adminhtml/Magento/backend/Magento_ConfigurableProduct/web/css/source/module/steps/_attribute-values.less b/app/design/adminhtml/Magento/backend/Magento_ConfigurableProduct/web/css/source/module/steps/_attribute-values.less
index 67ee8e08ae2c6..ea537e9c51f47 100644
--- a/app/design/adminhtml/Magento/backend/Magento_ConfigurableProduct/web/css/source/module/steps/_attribute-values.less
+++ b/app/design/adminhtml/Magento/backend/Magento_ConfigurableProduct/web/css/source/module/steps/_attribute-values.less
@@ -45,6 +45,7 @@
 
         .action-select-all,
         .action-deselect-all {
+            display: inline-block;
             font-weight: @font-weight__regular;
             line-height: 1;
             margin: @indent__xs 0 0;
@@ -54,6 +55,21 @@
         .action-deselect-all {
             border-left: 1px solid @steps-wizard-attribute-entity__border-color;
         }
+
+        .action-remove-all {
+            display: inline-block;
+            padding: 0;
+            vertical-align: top;
+            .lib-icon-font(
+            @steps-wizard-attribute-entity-action-remove__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: 1.8rem,
+            @_icon-font-color: @image-gallery-icons__color,
+            @_icon-font-color-hover: @image-gallery-icons__hover__color,
+            @_icon-font-margin: -2px 0 0,
+            @_icon-font-text-hide: true
+            );
+        }
     }
 
     .attribute-entity-top {
diff --git a/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Block/Adminhtml/Product/Edit/Tab/Super/Config/Attribute.php b/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Block/Adminhtml/Product/Edit/Tab/Super/Config/Attribute.php
index f6e31a1537771..be8653668f1d5 100644
--- a/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Block/Adminhtml/Product/Edit/Tab/Super/Config/Attribute.php
+++ b/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Block/Adminhtml/Product/Edit/Tab/Super/Config/Attribute.php
@@ -185,7 +185,7 @@ protected function getAttributesGrid()
     {
         return $this->blockFactory->create(
             'Magento\ConfigurableProduct\Test\Block\Adminhtml\Product\AttributesGrid',
-            ['element' => $this->browser->find('.admin__data-grid-outer-wrap')]
+            ['element' => $this->browser->find('#variation-steps-wizard_step1 .admin__data-grid-outer-wrap')]
         );
     }