diff --git a/management-webclient/src/components/homepage/AddAttributeForm.vue b/management-webclient/src/components/homepage/AddAttributeForm.vue
new file mode 100644
index 00000000..9e47437c
--- /dev/null
+++ b/management-webclient/src/components/homepage/AddAttributeForm.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <b-row>
+      <b-col md="6">
+        <b-form-group label="Enter attribute's name" label-for="name">
+          <b-form-input
+            id="name"
+            type="text"
+            name="name"
+            :state="nameState"
+            v-model="formValues.name"
+            aria-describedby="nameFeedback"
+            size="sm"
+          ></b-form-input>
+          <b-form-invalid-feedback id="nameFeedback">
+            <!-- This will only be shown if the preceeding input has an invalid state -->
+            Attribute name cannot be empty.
+          </b-form-invalid-feedback>
+        </b-form-group>
+
+        <b-form-group label="Enter type of value" label-for="type">
+          <b-form-select
+            v-model="formValues.type"
+            :options="allDataTypes"
+            class="mb-3"
+            size="sm"
+            id="type"
+            name="type"
+            @input="typeChanged"
+            :state="typeState"
+            aria-describedby="typeFeedback"
+          />
+
+          <b-form-invalid-feedback id="typeFeedback">
+            <!-- This will only be shown if the preceeding input has an invalid state -->
+            The type of the attribute cannot be empty.
+          </b-form-invalid-feedback>
+        </b-form-group>
+
+        <b-form-group label="Enter the Key" label-for="key">
+          <b-form-input
+            id="key"
+            type="text"
+            name="key"
+            :state="keyState"
+            v-model="formValues.key"
+            aria-describedby="keyFeedback"
+            size="sm"
+          ></b-form-input>
+          <b-form-invalid-feedback id="keyFeedback">
+            <!-- This will only be shown if the preceeding input has an invalid state -->
+            This field cannot be empty
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-col>
+      <b-col md="6">
+        <div class="attribute-right-panel">
+          <p>Add Values for the selected type</p>
+          <div v-if="formValues.type === 'Colors'" class="colors-selector">
+            <b-row
+              v-for="(val, vind) in formValues.values"
+              v-bind:key="vind"
+              style="margin: 10px 0px;"
+            >
+              <b-col class="min-padding" sm="8">
+                <b-form-input
+                  id="colorName"
+                  type="text"
+                  name="colorName"
+                  :state="colorNameState(val.name)"
+                  v-model="val.name"
+                  placeholder="Color Name"
+                  aria-describedby="colorNameFeedback"
+                  size="sm"
+                ></b-form-input>
+                <b-form-invalid-feedback id="keyFeedback">
+                  <!-- This will only be shown if the preceeding input has an invalid state -->
+                  Key cannot be empty
+                </b-form-invalid-feedback>
+              </b-col>
+              <b-col class="min-padding" sm="3">
+                <div class="align-center">
+                  <b-form-input
+                    id="hex"
+                    type="color"
+                    name="hex"
+                    :state="hexState(val.hexValue)"
+                    v-model="val.hexValue"
+                    placeholder="Hex Value"
+                    aria-describedby="hexFeedback"
+                    size="sm"
+                  ></b-form-input>
+                  <b-form-invalid-feedback id="hexFeedback">
+                    <!-- This will only be shown if the preceeding input has an invalid state -->
+                    Hex value cannot be empty
+                  </b-form-invalid-feedback>
+                </div>
+              </b-col>
+              <b-col class="min-padding align-right" sm="1">
+                <a>
+                  <font-awesome-icon icon="trash-alt" @click="deleteLine(vind)" />
+                </a>
+              </b-col>
+            </b-row>
+            <div>
+              <b-btn variant="primary" size="sm" @click="addLine()">Add New Value</b-btn>
+            </div>
+          </div>
+          <div v-else>
+            <tag-selector classes="theme-material" name="tags" v-model="formValues.values" />
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+    <div>
+      <b-btn
+        variant="success"
+        size="sm"
+        :disabled="checkAllStates"
+        @click="addAttribute()"
+      >Add Attribute</b-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import TagSelector from 'vue-tag-selector';
+import ProductAttribDTO from '@/dto/ProductAttribute.json';
+
+export default {
+  name: 'AddAttributeForm',
+  components: {
+    TagSelector
+  },
+  data() {
+    return {
+      formValues: null,
+      allDataTypes: ['Toggle', 'Array', 'Colors']
+    };
+  },
+
+  created() {
+    this.formValues = _.cloneDeep(ProductAttribDTO);
+  },
+
+  methods: {
+    addAttribute() {
+      const replica = _.cloneDeep(this.formValues);
+
+      if (this.nameState && this.keyState && this.typeState) {
+        if (this.formValues.type === 'Colors') {
+          if (this.hexState && this.colorNameState) {
+            this.$emit('add', replica);
+          } else {
+            return;
+          }
+        } else {
+          this.$emit('add', replica);
+        }
+
+        this.resetForm();
+      }
+    },
+
+    resetForm() {
+      this.formValues = _.cloneDeep(ProductAttribDTO);
+    },
+
+    typeChanged() {
+      this.formValues.values = [];
+    },
+
+    deleteLine(ind) {
+      this.formValues.values.splice(ind, 1);
+    },
+
+    addLine() {
+      this.formValues.values.push({
+        name: null,
+        hexValue: '#000000'
+      });
+    }
+  },
+
+  computed: {
+    checkAllStates() {
+      return !this.nameState || !this.keyState || !this.typeState;
+    },
+
+    nameState() {
+      if (this.formValues.name == null) return null;
+      return this.formValues.name.length > 0;
+    },
+
+    keyState() {
+      if (this.formValues.key == null) return null;
+      return this.formValues.key.length > 0;
+    },
+
+    typeState() {
+      if (this.formValues.type == null) return null;
+      return this.formValues.type.length > 0;
+    },
+
+    hexState() {
+      return val => {
+        if (val == null) return null;
+        return val.length > 0;
+      };
+    },
+
+    colorNameState() {
+      return val => {
+        if (val == null) return null;
+        return val.length > 0;
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import './../../assets/css/material.scss';
+
+.attribute-right-panel {
+  background: #f9f9f9;
+  padding: 0.3em 1em 1em 1em;
+
+  .colors-selector {
+    max-height: 200px;
+    min-height: 200px;
+    overflow-y: auto;
+  }
+
+  .min-padding {
+    padding-left: 0 !important;
+  }
+}
+</style>
diff --git a/management-webclient/src/components/homepage/AddProduct.vue b/management-webclient/src/components/homepage/AddProduct.vue
index 59d5258d..2f42df40 100644
--- a/management-webclient/src/components/homepage/AddProduct.vue
+++ b/management-webclient/src/components/homepage/AddProduct.vue
@@ -24,7 +24,7 @@
         </b-row>
       </div>
 
-      <br>
+      <br />
 
       <div>
         <b-form-group horizontal :label-cols="2" label="Product Name" label-for="productName">
@@ -201,7 +201,7 @@
         <div></div>
 
         <b-form-group horizontal :label-cols="2" label="Active" label-for="sku">
-          <toggle-button v-model="product.active" :labels="{checked: 'Yes', unchecked: 'No'}"/>
+          <toggle-button v-model="product.active" :labels="{checked: 'Yes', unchecked: 'No'}" />
         </b-form-group>
 
         <!-- Item URL -->
@@ -258,7 +258,7 @@
             id="modal1"
             title="Add Attributes"
             hide-footer
-            size="sm"
+            size="lg"
           >
             <custom-attributes
               v-if="showAttributes"
@@ -326,7 +326,7 @@
                 :class="{ 'is-active': isActive.bold() }"
                 @click="commands.bold"
               >
-                <font-awesome-icon icon="bold"/>
+                <font-awesome-icon icon="bold" />
               </button>
 
               <button
@@ -334,7 +334,7 @@
                 :class="{ 'is-active': isActive.italic() }"
                 @click="commands.italic"
               >
-                <font-awesome-icon icon="italic"/>
+                <font-awesome-icon icon="italic" />
               </button>
 
               <button
@@ -342,7 +342,7 @@
                 :class="{ 'is-active': isActive.strike() }"
                 @click="commands.strike"
               >
-                <font-awesome-icon icon="strikethrough"/>
+                <font-awesome-icon icon="strikethrough" />
               </button>
 
               <button
@@ -350,7 +350,7 @@
                 :class="{ 'is-active': isActive.underline() }"
                 @click="commands.underline"
               >
-                <font-awesome-icon icon="underline"/>
+                <font-awesome-icon icon="underline" />
               </button>
 
               <button
@@ -358,7 +358,7 @@
                 :class="{ 'is-active': isActive.code() }"
                 @click="commands.code"
               >
-                <font-awesome-icon icon="code"/>
+                <font-awesome-icon icon="code" />
               </button>
 
               <button
@@ -366,7 +366,7 @@
                 :class="{ 'is-active': isActive.paragraph() }"
                 @click="commands.paragraph"
               >
-                <font-awesome-icon icon="paragraph"/>
+                <font-awesome-icon icon="paragraph" />
               </button>
 
               <button
@@ -392,7 +392,7 @@
                 :class="{ 'is-active': isActive.bullet_list() }"
                 @click="commands.bullet_list"
               >
-                <font-awesome-icon icon="list-ul"/>
+                <font-awesome-icon icon="list-ul" />
               </button>
 
               <button
@@ -400,7 +400,7 @@
                 :class="{ 'is-active': isActive.ordered_list() }"
                 @click="commands.ordered_list"
               >
-                <font-awesome-icon icon="list-ol"/>
+                <font-awesome-icon icon="list-ol" />
               </button>
 
               <button
@@ -408,7 +408,7 @@
                 :class="{ 'is-active': isActive.blockquote() }"
                 @click="commands.blockquote"
               >
-                <font-awesome-icon icon="quote-left"/>
+                <font-awesome-icon icon="quote-left" />
               </button>
 
               <button
@@ -416,19 +416,19 @@
                 :class="{ 'is-active': isActive.code_block() }"
                 @click="commands.code_block"
               >
-                <font-awesome-icon icon="code"/>
+                <font-awesome-icon icon="code" />
               </button>
 
               <button class="menubar__button" @click="commands.undo">
-                <font-awesome-icon icon="undo"/>
+                <font-awesome-icon icon="undo" />
               </button>
 
               <button class="menubar__button" @click="commands.redo">
-                <font-awesome-icon icon="redo"/>
+                <font-awesome-icon icon="redo" />
               </button>
             </div>
           </editor-menu-bar>
-          <editor-content class="editor__content" :editor="editor"/>
+          <editor-content class="editor__content" :editor="editor" />
         </b-form-group>
       </div>
 
@@ -481,18 +481,18 @@ import {
   Link,
   Strike,
   Underline,
-  History,
+  History
 } from 'tiptap-extensions';
 
 export default {
   props: {
-    data: { required: false, type: Object, default: null },
+    data: { required: false, type: Object, default: null }
   },
   components: {
     ManagePhoto,
     EditorContent,
     EditorMenuBar,
-    CustomAttributes,
+    CustomAttributes
   },
   created() {
     if (this.data != null) {
@@ -517,12 +517,12 @@ export default {
         category: {
           _id: null,
           category: null,
-          subcategory: null,
+          subcategory: null
         },
         store_sku: null,
         marked_price: {
           amount: 0,
-          currency: 'USD',
+          currency: 'USD'
         },
         active: true,
         thumbnailUrls: [
@@ -537,28 +537,27 @@ export default {
         ],
         price: {
           amount: 27.99,
-          currency: 'USD',
+          currency: 'USD'
         },
         tariff: null,
         weight: {
           quantity: 3.2,
-          unit: 'LB',
+          unit: 'LB'
         },
         custom_attributes: {},
         customizationOptions: {
-          customizations: [],
+          customizations: []
         },
-        details_html:
-          'A limited-edition illuminating powder with an ultra-smooth formula and radiant finish.',
+        details_html: 'A limited-edition illuminating powder with an ultra-smooth formula and radiant finish.',
         colors: [
           { name: 'Black', hexValue: '#000000' },
-          { name: 'Brown', hexValue: '#435ADF' },
+          { name: 'Brown', hexValue: '#435ADF' }
         ],
-        sizes: ['XS', 'S', 'M', 'L'],
+        sizes: ['XS', 'S', 'M', 'L']
       },
 
       showManagePhoto: false,
-      images: null,
+      images: null
     };
   },
 
@@ -581,13 +580,13 @@ export default {
         new Link(),
         new Strike(),
         new Underline(),
-        new History(),
+        new History()
       ],
 
       onUpdate: ({ getHTML }) => {
         // this.json = getJSON()
         this.product.details_html = getHTML();
-      },
+      }
     });
   },
   beforeDestroy() {
@@ -599,7 +598,7 @@ export default {
     },
 
     ...mapGetters({
-      tariffCategories: 'adminStore/tariffCategories',
+      tariffCategories: 'adminStore/tariffCategories'
     }),
 
     tariffState() {
@@ -625,18 +624,16 @@ export default {
     },
 
     categoryState() {
-      if (
-        this.product.category.category === undefined
-        || this.product.category.category == null
-      ) { return null; }
+      if (this.product.category.category === undefined || this.product.category.category == null) {
+        return null;
+      }
       return this.product.category.category.length > 0;
     },
 
     subcategoryState() {
-      if (
-        this.product.category._id === undefined
-        || this.product.category._id == null
-      ) { return null; }
+      if (this.product.category._id === undefined || this.product.category._id == null) {
+        return null;
+      }
       return this.product.category._id.length > 0;
     },
 
@@ -649,9 +646,7 @@ export default {
     },
 
     weightState() {
-      return (
-        this.product.weight.quantity > 0 && this.product.weight.quantity != null
-      );
+      return this.product.weight.quantity > 0 && this.product.weight.quantity != null;
     },
 
     unitState() {
@@ -663,13 +658,15 @@ export default {
     },
 
     filteredSubcategories() {
-      if (this.product.category.category == null) { return _.map(this.refdata.categories, 'subcategory'); }
-      const val = this.refdata.categories.filter((item) => {
+      if (this.product.category.category == null) {
+        return _.map(this.refdata.categories, 'subcategory');
+      }
+      const val = this.refdata.categories.filter(item => {
         if (item.category === this.product.category.category) return true;
         return false;
       });
       return val;
-    },
+    }
   },
   methods: {
     extractColorValues(attribute) {
@@ -726,13 +723,12 @@ export default {
     },
     async handleAddProduct() {
       if (!this.validateForm()) return;
-      const totalImages = this.$refs.managephoto.configureParams()
-        .numberOfThumbnailAndDetailedImages;
+      const totalImages = this.$refs.managephoto.configureParams().numberOfThumbnailAndDetailedImages;
       if (totalImages <= 0) {
         this.$notify({
           group: 'all',
           type: 'warn',
-          text: 'You need to upload at least 1 image.',
+          text: 'You need to upload at least 1 image.'
         });
         return;
       }
@@ -750,7 +746,7 @@ export default {
         this.$notify({
           group: 'all',
           type: 'error',
-          text: 'There was an error',
+          text: 'There was an error'
         });
       }
     },
@@ -758,13 +754,12 @@ export default {
       if (!this.validateForm()) return;
 
       // Check if there are any images.
-      const totalImages = this.$refs.managephoto.configureParams()
-        .numberOfThumbnailAndDetailedImages;
+      const totalImages = this.$refs.managephoto.configureParams().numberOfThumbnailAndDetailedImages;
       if (totalImages <= 0) {
         this.$notify({
           group: 'all',
           type: 'warn',
-          text: 'You need to upload at least 1 image.',
+          text: 'You need to upload at least 1 image.'
         });
         return;
       }
@@ -782,18 +777,18 @@ export default {
         this.$notify({
           group: 'all',
           type: 'error',
-          text: 'There was an error',
+          text: 'There was an error'
         });
       }
     },
     getSubCategory() {
       const refState = this.$store.getters['adminStore/allStateData'];
       const x = _.find(refState.refDataPayload.product_categories, {
-        name: this.product.category,
+        name: this.product.category
       }).subcategories;
       return x;
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/management-webclient/src/components/homepage/AttributeFormRow.vue b/management-webclient/src/components/homepage/AttributeFormRow.vue
deleted file mode 100644
index d7a99bf2..00000000
--- a/management-webclient/src/components/homepage/AttributeFormRow.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div v-bind:class="{'shaded': index % 2 == 1}">
-    <b-row>
-      <b-col sm="1" style="text-align: right">
-        <font-awesome-icon @click="deleteClicked()" style="cursor: pointer;" icon="trash-alt"/>
-      </b-col>
-      <b-col sm="2">
-        <b-form-input
-          id="name"
-          type="text"
-          name="name"
-          :state="nameState"
-          v-model="row.name"
-          placeholder="Enter the name of attribute"
-          aria-describedby="nameFeedback"
-          size="sm"
-        ></b-form-input>
-        <b-form-invalid-feedback id="nameFeedback">
-          <!-- This will only be shown if the preceeding input has an invalid state -->
-          This field cannot be empty
-        </b-form-invalid-feedback>
-      </b-col>
-      <b-col sm="2" class="min-padding">
-        <b-form-select
-          v-model="row.type"
-          :options="allDataTypes"
-          class="mb-3"
-          size="sm"
-          id="store"
-          name="store"
-          @input="typeChanged"
-          :state="typeState"
-          aria-describedby="typeFeedback"
-        />
-
-        <b-form-invalid-feedback id="typeFeedback">
-          <!-- This will only be shown if the preceeding input has an invalid state -->
-          This field cannot be empty
-        </b-form-invalid-feedback>
-      </b-col>
-      <b-col sm="2" class="min-padding">
-        <b-form-input
-          id="key"
-          type="text"
-          name="key"
-          :state="keyState"
-          v-model="row.key"
-          placeholder="Enter the key of attribute"
-          aria-describedby="keyFeedback"
-          size="sm"
-        ></b-form-input>
-        <b-form-invalid-feedback id="keyFeedback">
-          <!-- This will only be shown if the preceeding input has an invalid state -->
-          This field cannot be empty
-        </b-form-invalid-feedback>
-      </b-col>
-      <b-col class="min-padding" sm="5">
-        <div v-if="row.type === 'Colors'" style="margin-top: 2.2em;">
-          <b-row v-for="(val, vind) in row.values" v-bind:key="vind" style="margin: 10px 0px;">
-            <b-col sm="1">
-              <a>
-                <font-awesome-icon v-if="vind > 0" icon="trash-alt" @click="deleteLine(vind)"/>
-              </a>
-            </b-col>
-            <b-col class="min-padding" sm="5">
-              <b-form-input
-                id="colorName"
-                type="text"
-                name="colorName"
-                :state="colorNameState(val.name)"
-                v-model="val.name"
-                placeholder="Color Name"
-                aria-describedby="colorNameFeedback"
-                size="sm"
-              ></b-form-input>
-              <b-form-invalid-feedback id="keyFeedback">
-                <!-- This will only be shown if the preceeding input has an invalid state -->
-                This field cannot be empty
-              </b-form-invalid-feedback>
-            </b-col>
-            <b-col class="min-padding" sm="5">
-              <b-form-input
-                id="hex"
-                type="color"
-                name="hex"
-                style="width: 50px"
-                :state="hexState(val.hexValue)"
-                v-model="val.hexValue"
-                placeholder="Hex Value"
-                aria-describedby="hexFeedback"
-                size="sm"
-              ></b-form-input>
-              <b-form-invalid-feedback id="hexFeedback">
-                <!-- This will only be shown if the preceeding input has an invalid state -->
-                This field cannot be empty
-              </b-form-invalid-feedback>
-            </b-col>
-            <b-col class="min-padding" sm="1">
-              <a>
-                <font-awesome-icon icon="plus-square" @click="addLine()"/>
-              </a>
-            </b-col>
-          </b-row>
-        </div>
-        <div v-else>
-          <tag-selector classes="theme-material" name="tags" v-model="row.values"/>
-        </div>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-import TagSelector from 'vue-tag-selector';
-
-export default {
-  name: 'AttributeFormRow',
-  props: {
-    row: {
-      required: true,
-      type: Object,
-    },
-    index: {
-      required: true,
-      type: Number,
-    },
-  },
-  components: {
-    TagSelector,
-  },
-  data() {
-    return {
-      allDataTypes: ['Toggle', 'Array', 'Colors'],
-    };
-  },
-
-  methods: {
-    deleteClicked() {
-      this.$emit('delete');
-    },
-
-    deleteLine(ind) {
-      this.row.values.splice(ind, 1);
-    },
-
-    addLine() {
-      this.row.values.push({
-        name: null,
-        hexValue: '#000000',
-      });
-    },
-
-    typeChanged() {
-      if (this.row.type === 'Colors') {
-        this.row.values = [
-          {
-            name: null,
-            hexValue: '#000000',
-          },
-        ];
-      }
-    },
-  },
-
-  computed: {
-    nameState() {
-      if (this.row.name == null) return null;
-      return this.row.name.length > 0;
-    },
-
-    keyState() {
-      if (this.row.key == null) return null;
-      return this.row.key.length > 0;
-    },
-
-    typeState() {
-      if (this.row.type == null) return null;
-      return this.row.type.length > 0;
-    },
-
-    hexState() {
-      return (val) => {
-        if (val == null) return null;
-        return val.length > 0;
-      };
-    },
-
-    colorNameState() {
-      return (val) => {
-        if (val == null) return null;
-        return val.length > 0;
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import './../../assets/css/material.scss';
-
-.attrib-row {
-  padding: 5px 10px;
-  width: 100%;
-
-  .shaded {
-    background: #dbdbdb;
-  }
-
-  .min-padding {
-    padding-right: 5px;
-    padding-left: 5px;
-
-    &:nth-child(1) {
-      padding-left: 15px;
-    }
-  }
-}
-</style>
diff --git a/management-webclient/src/components/homepage/CustomAttributes.vue b/management-webclient/src/components/homepage/CustomAttributes.vue
index 1b7e8d4d..e10664f5 100644
--- a/management-webclient/src/components/homepage/CustomAttributes.vue
+++ b/management-webclient/src/components/homepage/CustomAttributes.vue
@@ -1,44 +1,59 @@
 <template>
   <div id="custom-attribute">
-    <b-btn @click="addRow()" size="sm">Add a row</b-btn>
     <div class="attrib-space"></div>
-    <div
-      v-for="(attrib, aInd) in attributes"
-      v-bind:key="aInd"
-      class="form-row"
-      v-bind:class="{'list-row': aInd % 2 == 0}"
-    >
-      <attribute-row :index="aInd" :row="attrib" @delete="deleteRow(aInd)"/>
-    </div>
-    <div class="space" v-if="attributes.length ==0"></div>
+    <add-attribute-form @add="addNewAttribute" />
+
+    <table class="table table-sm attrib-table" v-if="attributes.length > 0">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Key</th>
+          <th>Type</th>
+          <th>Values</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(attrib, aind) in attributes" v-bind:key="aind">
+          <td>{{attrib.name}}</td>
+          <td>{{attrib.key}}</td>
+          <td>{{attrib.type}}</td>
+          <td v-if="attrib.type === 'Colors'">{{extractColorValues(attrib)}}</td>
+          <td v-else>{{attrib.values ? attrib.values.join(" , ") : ""}}</td>
+          <td>
+            <a>
+              <font-awesome-icon icon="trash-alt" @click="deleteAttribute(aind)" />
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     <div class="buttons align-right">
       <b-btn variant="primary" size="sm" @click="cancel()">Cancel</b-btn>
-      <b-btn variant="success" size="sm" @click="save()">Save</b-btn>
+      <b-btn variant="success" size="sm" :disabled="attributes.length <= 0" @click="save()">Save</b-btn>
     </div>
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
-import ProductAttribDTO from '@/dto/ProductAttribute.json';
-import AttributeRow from '@/components/homepage/AttributeFormRow.vue';
 import { Attributes } from '@/constants/Constants';
+import AddAttributeForm from '@/components/homepage/AddAttributeForm.vue';
 
 export default {
   name: 'CustomAttribute',
   props: {
     propValue: {
-      required: true,
-      // type: Object
-    },
+      required: true
+    }
   },
   components: {
-    AttributeRow,
+    AddAttributeForm
   },
   data() {
     return {
-      attributes: [],
+      attributes: []
     };
   },
 
@@ -51,11 +66,16 @@ export default {
   },
 
   methods: {
-    deleteRow(ind) {
+    addNewAttribute(attrib) {
+      this.attributes.push(attrib);
+    },
+
+    deleteAttribute(ind) {
       this.attributes.splice(ind, 1);
     },
-    addRow() {
-      this.attributes.push(_.cloneDeep(ProductAttribDTO));
+
+    extractColorValues(attribute) {
+      return _.map(attribute.values, 'name').join(' , ');
     },
 
     cancel() {
@@ -77,7 +97,7 @@ export default {
           this.$notify({
             group: 'all',
             type: 'error',
-            text: 'You have to have at least 2 options for each attribute',
+            text: 'You have to have at least 2 options for each attribute'
           });
           return;
         }
@@ -86,7 +106,7 @@ export default {
         this.$notify({
           group: 'all',
           type: 'error',
-          text: 'None of the fields above can be empty.',
+          text: 'None of the fields above can be empty.'
         });
       }
     },
@@ -117,8 +137,8 @@ export default {
         }
       }
       return true;
-    },
-  },
+    }
+  }
 };
 </script>