diff --git a/packages/Webkul/Admin/src/Http/routes.php b/packages/Webkul/Admin/src/Http/routes.php
index 0b678572d..3d6f97281 100755
--- a/packages/Webkul/Admin/src/Http/routes.php
+++ b/packages/Webkul/Admin/src/Http/routes.php
@@ -375,6 +375,10 @@ Route::group(['middleware' => ['web', 'admin_locale']], function () {
                     'view' => 'admin::catalog.attributes.index',
                 ])->name('admin.catalog.attributes.index');
 
+                Route::get('/attributes/{id}/options', 'Webkul\Attribute\Http\Controllers\AttributeController@getAttributeOptions')->defaults('_config', [
+                    'view' => 'admin::catalog.attributes.options',
+                ])->name('admin.catalog.attributes.options');
+
                 Route::get('/attributes/create', 'Webkul\Attribute\Http\Controllers\AttributeController@create')->defaults('_config', [
                     'view' => 'admin::catalog.attributes.create',
                 ])->name('admin.catalog.attributes.create');
diff --git a/packages/Webkul/Admin/src/Resources/lang/ar/app.php b/packages/Webkul/Admin/src/Resources/lang/ar/app.php
index 4830796d4..8c4e84f95 100644
--- a/packages/Webkul/Admin/src/Resources/lang/ar/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/ar/app.php
@@ -606,6 +606,7 @@ return [
             'options' => 'خيارات',
             'position' => 'موضع',
             'add-option-btn-title' => 'إضافة خيار',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'التصديقات',
             'input_validation' => 'التحقق من الإدخال',
             'is_required' => 'مطلوب',
@@ -637,6 +638,9 @@ return [
             'use_in_flat' => "إنشاء في جدول المنتجات المسطحة",
             'is_comparable' => "السمة قابلة للمقارنة",
             'default_null_option' => 'إنشاء خيار فارغ افتراضي',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'الأسر',
diff --git a/packages/Webkul/Admin/src/Resources/lang/de/app.php b/packages/Webkul/Admin/src/Resources/lang/de/app.php
index 4949aea42..d03e636d4 100755
--- a/packages/Webkul/Admin/src/Resources/lang/de/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/de/app.php
@@ -597,6 +597,7 @@ return [
             'options'              => 'Optionen',
             'position'             => 'Position',
             'add-option-btn-title' => 'Option hinzufügen',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations'          => 'Validierungen',
             'input_validation'     => 'Eingabe-Validierung',
             'is_required'          => 'Ist erforderlich',
@@ -627,6 +628,9 @@ return [
             'use_in_flat'          => 'In Produkt Flat Tabelle erstellen',
             'is_comparable'        => 'Attribut ist vergleichbar',
             'default_null_option'  => 'Erstellen Sie eine leere Standardoption',
+            'validation-messages'  => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families'   =>
         [
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index 891c43bac..92bd8f887 100755
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -618,6 +618,7 @@ return [
             'options'              => 'Options',
             'position'             => 'Position',
             'add-option-btn-title' => 'Add Option',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations'          => 'Validations',
             'input_validation'     => 'Input Validation',
             'is_required'          => 'Is Required',
@@ -648,6 +649,9 @@ return [
             'use_in_flat'          => "Create in Product Flat Table",
             'is_comparable'        => "Attribute is comparable",
             'default_null_option'  => 'Create default empty option',
+            'validation-messages'          => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ]
         ],
         'families' => [
             'title'                => 'Families',
diff --git a/packages/Webkul/Admin/src/Resources/lang/es/app.php b/packages/Webkul/Admin/src/Resources/lang/es/app.php
index 3c3f8b72e..a7e37c4c0 100644
--- a/packages/Webkul/Admin/src/Resources/lang/es/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/es/app.php
@@ -618,6 +618,7 @@ return [
             'options' => 'Opciones',
             'position' => 'Posición',
             'add-option-btn-title' => 'Agregar opción',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Validaciones',
             'input_validation' => 'Validación entrada',
             'is_required' => 'Es requerido',
@@ -648,6 +649,9 @@ return [
             'use_in_flat' => "Crear en tabla plana de productos",
             'is_comparable' => "El atributo es comparable",
             'default_null_option' => 'Crear opción vacía por defecto',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Familias',
diff --git a/packages/Webkul/Admin/src/Resources/lang/fa/app.php b/packages/Webkul/Admin/src/Resources/lang/fa/app.php
index c5f6d96cb..643df0323 100644
--- a/packages/Webkul/Admin/src/Resources/lang/fa/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/fa/app.php
@@ -607,6 +607,7 @@ return [
             'options' => 'گزینه ها',
             'position' => 'موقعیت',
             'add-option-btn-title' => 'افزودن گزینه',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'اعتبار سنجی ها',
             'input_validation' => 'اعتبار سنجی ورودی',
             'is_required' => 'مورد نیاز است',
@@ -637,6 +638,9 @@ return [
             'use_in_flat' => 'اضافه به جدول flat (product_flat)',
             'is_comparable' => "ویژگی قابل مقایسه است",
             'default_null_option' => 'گزینه پیش فرض خالی ایجاد کنید',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'ویژگی ها',
diff --git a/packages/Webkul/Admin/src/Resources/lang/fr/app.php b/packages/Webkul/Admin/src/Resources/lang/fr/app.php
index 398b181e4..08aa69cab 100644
--- a/packages/Webkul/Admin/src/Resources/lang/fr/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/fr/app.php
@@ -617,6 +617,7 @@ return [
             'options' => 'Options',
             'position' => 'Positionner',
             'add-option-btn-title' => 'Ajouter une option',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Validation',
             'input_validation' => 'Validation d\'entrée',
             'is_required' => 'Est requis',
@@ -647,6 +648,9 @@ return [
             'use_in_flat' => 'Créer dans la table plate du produit',
             'is_comparable' => 'L\'attribut est comparable',
             'default_null_option' => 'Créer une option vide par défaut',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
 
         'families' => [
diff --git a/packages/Webkul/Admin/src/Resources/lang/it/app.php b/packages/Webkul/Admin/src/Resources/lang/it/app.php
index 6c2afab72..a4ea75243 100644
--- a/packages/Webkul/Admin/src/Resources/lang/it/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/it/app.php
@@ -607,6 +607,7 @@ return [
             'options' => 'Opzioni',
             'position' => 'Posizione',
             'add-option-btn-title' => 'Aggiungi Option',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Validazioni',
             'input_validation' => 'Validazione Input',
             'is_required' => 'È Richiesto',
@@ -637,6 +638,9 @@ return [
             'use_in_flat' => "Crea in tabella Product flat",
             'is_comparable' => "L'attributo è comparabile",
             'default_null_option' => 'Crea opzione predefinita vuota',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Famiglie',
diff --git a/packages/Webkul/Admin/src/Resources/lang/nl/app.php b/packages/Webkul/Admin/src/Resources/lang/nl/app.php
index 73e10a9f9..ba509c7f5 100644
--- a/packages/Webkul/Admin/src/Resources/lang/nl/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/nl/app.php
@@ -603,6 +603,7 @@ return [
             'options' => 'Opties',
             'position' => 'Positie',
             'add-option-btn-title' => 'Optie toevoegen',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Validations',
             'input_validation' => 'Input Validation',
             'is_required' => 'is verplicht',
@@ -634,6 +635,9 @@ return [
             'use_in_flat' => "Create in Product Flat Table",
             'is_comparable' => "Attribuut is vergelijkbaar ",
             'default_null_option' => 'Create default empty option',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Families',
diff --git a/packages/Webkul/Admin/src/Resources/lang/pl/app.php b/packages/Webkul/Admin/src/Resources/lang/pl/app.php
index 216997f9e..02bdf769e 100644
--- a/packages/Webkul/Admin/src/Resources/lang/pl/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/pl/app.php
@@ -605,6 +605,7 @@ return [
             'options' => 'Opcje',
             'position' => 'Pozycja',
             'add-option-btn-title' => 'Dodaj opcję',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Walidacje danych',
             'input_validation' => 'Sprawdzanie poprawności danych wejściowych',
             'is_required' => 'Jest wymagany',
@@ -636,6 +637,9 @@ return [
             'use_in_flat' => "Utwórz w płaskiej tabeli produktu",
             'is_comparable' => "Atrybut jest porównywalny",
             'default_null_option' => 'Utwórz domyślną pustą opcję',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Rodziny atrybutów',
diff --git a/packages/Webkul/Admin/src/Resources/lang/pt_BR/app.php b/packages/Webkul/Admin/src/Resources/lang/pt_BR/app.php
index ba9d42c58..a7a74a76c 100755
--- a/packages/Webkul/Admin/src/Resources/lang/pt_BR/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/pt_BR/app.php
@@ -604,6 +604,7 @@ return [
             'options' => 'Opções',
             'position' => 'Posição',
             'add-option-btn-title' => 'Adicionar Opção',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Validações',
             'input_validation' => 'Validação de Campo',
             'is_required' => 'É Obrigratório',
@@ -635,6 +636,9 @@ return [
             'use_in_flat' => "Criar na tabela plana do produto",
             'is_comparable' => "O atributo é comparável",
             'default_null_option' => 'Criar opção vazia padrão',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Famílias',
diff --git a/packages/Webkul/Admin/src/Resources/lang/tr/app.php b/packages/Webkul/Admin/src/Resources/lang/tr/app.php
index 37f3e722d..680195186 100644
--- a/packages/Webkul/Admin/src/Resources/lang/tr/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/tr/app.php
@@ -600,6 +600,7 @@ return [
             'options' => 'Seçenekler',
             'position' => 'Konum',
             'add-option-btn-title' => 'Seçenek Ekle',
+            'load-more-options-btn-title' => 'Load More Options',
             'validations' => 'Doğrulamalar',
             'input_validation' => 'Giriş Doğrulaması',
             'is_required' => 'Zorunlu',
@@ -630,6 +631,9 @@ return [
             'use_in_flat' => "Ürün Tablosu Oluştur",
             'is_comparable' => "Nitelik kıyaslanabilir",
             'default_null_option' => 'Varsayılan boş seçenek oluştur',
+            'validation-messages' => [
+                'max-size' => 'The image size must be less than 600 KB'
+            ],
         ],
         'families' => [
             'title' => 'Küme',
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
index 913423fb2..f32bb1b4b 100755
--- a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
@@ -1,3 +1,7 @@
+@php
+    $allLocales = app('Webkul\Core\Repositories\LocaleRepository')->all();
+@endphp
+
 @extends('admin::layouts.content')
 
 @section('page_title')
@@ -27,25 +31,29 @@
             <div class="page-content">
                 <div class="form-container">
                     @csrf()
+
                     <input name="_method" type="hidden" value="PUT">
 
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.general.before', ['attribute' => $attribute]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.attributes.general') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.general.controls.before', ['attribute' => $attribute]) !!}
 
                             <div class="control-group" :class="[errors.has('code') ? 'has-error' : '']">
                                 <label for="code" class="required">{{ __('admin::app.catalog.attributes.code') }}</label>
                                 <input type="text" v-validate="'required'" class="control" id="code" name="code" value="{{ old('code') ?: $attribute->code }}" disabled="disabled" data-vv-as="&quot;{{ __('admin::app.catalog.attributes.code') }}&quot;" v-code/>
                                 <input type="hidden" name="code" value="{{ $attribute->code }}"/>
-                                <span class="control-error" v-if="errors.has('code')">@{{ errors.first('code') }}</span>
+                                <span class="control-error" v-if="errors.has('code')" v-text="errors.first('code')"></span>
                             </div>
 
                             <div class="control-group">
-                                <?php $selectedOption = old('type') ?: $attribute->type ?>
+                                @php
+                                    $selectedOption = old('type') ?: $attribute->type;
+                                @endphp
+
                                 <label for="type">{{ __('admin::app.catalog.attributes.type') }}</label>
+
                                 <select class="control" id="type" disabled="disabled">
                                     <option value="text" {{ $selectedOption == 'text' ? 'selected' : '' }}>
                                         {{ __('admin::app.catalog.attributes.text') }}
@@ -81,6 +89,7 @@
                                         {{ __('admin::app.catalog.attributes.checkbox') }}
                                     </option>
                                 </select>
+
                                 <input type="hidden" name="type" value="{{ $attribute->type }}"/>
                             </div>
 
@@ -90,39 +99,32 @@
 
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.general.after', ['attribute' => $attribute]) !!}
 
-
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.attributes.before', ['attribute' => $attribute]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.attributes.label') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.attributes.controls.before', ['attribute' => $attribute]) !!}
 
                             <div class="control-group" :class="[errors.has('admin_name') ? 'has-error' : '']">
                                 <label for="admin_name" class="required">{{ __('admin::app.catalog.attributes.admin') }}</label>
                                 <input type="text" v-validate="'required'" class="control" id="admin_name" name="admin_name" value="{{ old('admin_name') ?: $attribute->admin_name }}" data-vv-as="&quot;{{ __('admin::app.catalog.attributes.admin_name') }}&quot;"/>
-                                <span class="control-error" v-if="errors.has('admin_name')">@{{ errors.first('admin_name') }}</span>
+                                <span class="control-error" v-if="errors.has('admin_name')" v-text="errors.first('admin_name')"></span>
                             </div>
 
-                            @foreach (app('Webkul\Core\Repositories\LocaleRepository')->all() as $locale)
-
+                            @foreach ($allLocales as $locale)
                                 <div class="control-group">
                                     <label for="locale-{{ $locale->code }}">{{ $locale->name . ' (' . $locale->code . ')' }}</label>
                                     <input type="text" class="control" id="locale-{{ $locale->code }}" name="<?php echo $locale->code; ?>[name]" value="{{ old($locale->code)['name'] ?? ($attribute->translate($locale->code)->name ?? '') }}"/>
                                 </div>
-
                             @endforeach
 
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.attributes.controls.after', ['attribute' => $attribute]) !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.attributes.after', ['attribute' => $attribute]) !!}
 
-
                     <div class="{{ in_array($attribute->type, ['select', 'multiselect', 'checkbox']) ?: 'hide' }}">
-
                         {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.options.before', ['attribute' => $attribute]) !!}
 
                         <accordian :title="'{{ __('admin::app.catalog.attributes.options') }}'" :active="true" :id="'options'">
@@ -130,7 +132,10 @@
 
                                 {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.options.controls.before', ['attribute' => $attribute]) !!}
 
-                                <option-wrapper></option-wrapper>
+                                <option-wrapper
+                                    src="{{ route('admin.catalog.attributes.options', $attribute->id) }}"
+                                    :all-locales="{{ $allLocales->toJson() }}"
+                                ></option-wrapper>
 
                                 {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.options.controls.after', ['attribute' => $attribute]) !!}
 
@@ -138,14 +143,12 @@
                         </accordian>
 
                         {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.options.after', ['attribute' => $attribute]) !!}
-
                     </div>
 
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.validations.before', ['attribute' => $attribute]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.attributes.validations') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.validations.controls.before', ['attribute' => $attribute]) !!}
 
                             <div class="control-group">
@@ -190,18 +193,15 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.validations.controls.after', ['attribute' => $attribute]) !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.validations.after', ['attribute' => $attribute]) !!}
 
-
                     {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.configuration.before', ['attribute' => $attribute]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.attributes.configuration') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.configuration.controls.before', ['attribute' => $attribute]) !!}
 
                             <div class="control-group">
@@ -291,7 +291,6 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.attribute.edit_form_accordian.configuration.controls.after', ['attribute' => $attribute]) !!}
-
                         </div>
                     </accordian>
 
@@ -306,7 +305,6 @@
 @push('scripts')
     <script type="text/x-template" id="options-template">
         <div>
-
             <div class="control-group" v-if="show_swatch">
                 <label for="swatch_type">{{ __('admin::app.catalog.attributes.swatch_type') }}</label>
                 <select class="control" id="swatch_type" name="swatch_type" v-model="swatch_type">
@@ -333,6 +331,7 @@
                     <input type="checkbox" class="control" id="default-null-option" name="default-null-option" v-model="isNullOptionChecked">
 
                     <label class="checkbox-view" for="default-null-option"></label>
+
                     {{ __('admin::app.catalog.attributes.default_null_option') }}
                 </span>
             </div>
@@ -345,11 +344,7 @@
 
                             <th>{{ __('admin::app.catalog.attributes.admin_name') }}</th>
 
-                            @foreach (app('Webkul\Core\Repositories\LocaleRepository')->all() as $locale)
-
-                                <th>{{ $locale->name . ' (' . $locale->code . ')' }}</th>
-
-                            @endforeach
+                            <th v-for="locale in allLocales" v-text="`${locale.name} (${locale.code})`"></th>
 
                             <th>{{ __('admin::app.catalog.attributes.position') }}</th>
 
@@ -358,8 +353,12 @@
                     </thead>
 
                     <tbody>
+                        {{-- `v-show` used here, so that element remain inside the form. Don't use `v-if` here. --}}
+                        <tr v-for="(row, index) in optionRows" :key="row.id" v-show="! row.isDelete">
+                            <input type="hidden" :name="'options[' + row.id + '][isNew]'" :value="row.isNew">
+
+                            <input type="hidden" :name="'options[' + row.id + '][isDelete]'" :value="row.isDelete">
 
-                        <tr v-for="(row, index) in optionRows" :key="row.id">
                             <td v-if="show_swatch && swatch_type == 'color'">
                                 <swatch-picker :input-name="'options[' + row.id + '][swatch_value]'" :color="row.swatch_value" colors="text-advanced" show-fallback />
                             </td>
@@ -368,30 +367,28 @@
                                 <div class="control-group" :class="[errors.has('options[' + row.id + '][swatch_value]') ? 'has-error' : '']">
                                     <img style="width: 36px;height: 36px;vertical-align: middle;background: #F2F2F2;border-radius: 2px;margin-right: 10px;" v-if="row.swatch_value_url" :src="row.swatch_value_url"/>
                                     <input type="file" v-validate="'size:600'" accept="image/*" :name="'options[' + row.id + '][swatch_value]'"/>
-                                    <span class="control-error" v-if="errors.has('options[' + row.id + '][swatch_value]')">The image size must be less than 600 KB</span>
+                                    <span class="control-error" v-if="errors.has('options[' + row.id + '][swatch_value]')" v-text="'{{ __('admin::app.catalog.attributes.validation-messages.max-size') }}'"></span>
                                 </div>
                             </td>
 
                             <td>
                                 <div class="control-group" :class="[errors.has(adminName(row)) ? 'has-error' : '']">
                                     <input type="text" v-validate="'required'" v-model="row['admin_name']" :name="adminName(row)" class="control" data-vv-as="&quot;{{ __('admin::app.catalog.attributes.admin_name') }}&quot;"/>
-                                    <span class="control-error" v-if="errors.has(adminName(row))">@{{ errors.first(adminName(row)) }}</span>
+                                    <span class="control-error" v-if="errors.has(adminName(row))" v-text="errors.first(adminName(row))"></span>
                                 </div>
                             </td>
 
-                            @foreach (app('Webkul\Core\Repositories\LocaleRepository')->all() as $locale)
-                                <td>
-                                    <div class="control-group" :class="[errors.has(localeInputName(row, '{{ $locale->code }}')) ? 'has-error' : '']">
-                                        <input type="text" v-validate="getOptionValidation(row, '{{ $locale->code }}')" v-model="row['locales']['{{ $locale->code }}']" :name="localeInputName(row, '{{ $locale->code }}')" class="control" data-vv-as="&quot;{{ $locale->name . ' (' . $locale->code . ')' }}&quot;"/>
-                                        <span class="control-error" v-if="errors.has(localeInputName(row, '{{ $locale->code }}'))">@{{ errors.first(localeInputName(row, '{!! $locale->code !!}')) }}</span>
-                                    </div>
-                                </td>
-                            @endforeach
+                            <td v-for="locale in allLocales">
+                                <div class="control-group" :class="[errors.has(localeInputName(row, locale.code)) ? 'has-error' : '']">
+                                    <input type="text" v-validate="getOptionValidation(row, locale.code)" v-model="row['locales'][locale.code]" :name="localeInputName(row, locale.code)" class="control" :data-vv-as="`&quot;${locale.name} (${locale.code})&quot;`"/>
+                                    <span class="control-error" v-if="errors.has(localeInputName(row, locale.code))" v-text="errors.first(localeInputName(row, locale.code))"></span>
+                                </div>
+                            </td>
 
                             <td>
                                 <div class="control-group" :class="[errors.has(sortOrderName(row)) ? 'has-error' : '']">
                                     <input type="text" v-validate="'required|numeric'" v-model="row['sort_order']" :name="sortOrderName(row)" class="control" data-vv-as="&quot;{{ __('admin::app.catalog.attributes.position') }}&quot;"/>
-                                    <span class="control-error" v-if="errors.has(sortOrderName(row))">@{{ errors.first(sortOrderName(row)) }}</span>
+                                    <span class="control-error" v-if="errors.has(sortOrderName(row))" v-text="errors.first(sortOrderName(row))"></span>
                                 </div>
                             </td>
 
@@ -403,6 +400,10 @@
                 </table>
             </div>
 
+            <button type="button" class="btn btn-lg btn-primary" id="load-more-btm" style="margin-top: 20px" @click="loadMoreOptions()" v-if="loadMore">
+                {{ __('admin::app.catalog.attributes.load-more-options-btn-title') }}
+            </button>
+
             <button type="button" class="btn btn-lg btn-primary" id="add-option-btn" style="margin-top: 20px" @click="addOptionRow()">
                 {{ __('admin::app.catalog.attributes.add-option-btn-title') }}
             </button>
@@ -411,69 +412,115 @@
 
     <script>
         Vue.component('option-wrapper', {
-
             template: '#options-template',
 
             inject: ['$validator'],
 
+            props: [
+                'src',
+                'allLocales'
+            ],
+
             data: function() {
                 return {
+                    appLocale: '{{ app()->getLocale() }}',
+                    optionPage: 1,
                     optionRowCount: 0,
                     optionRows: [],
+                    loadMore: true,
                     show_swatch: "{{ $attribute->type == 'select' ? true : false  }}",
                     swatch_type: "{{ $attribute->swatch_type == '' ? 'dropdown' : $attribute->swatch_type }}",
                     isNullOptionChecked: false,
                     idNullOption: null
+                };
+            },
+
+            watch: {
+                isNullOptionChecked: function (val) {
+                    if (val) {
+                        if (! this.idNullOption) {
+                            this.addOptionRow(true);
+                        }
+                    } else if(this.idNullOption !== null && typeof this.idNullOption !== 'undefined') {
+                        const row = this.optionRows.find(optionRow => optionRow.id === this.idNullOption);
+                        this.removeRow(row);
+                    }
                 }
             },
 
             created: function () {
-                @foreach ($attribute->options as $option)
-                    this.optionRowCount++;
+                this.getAttributeOptions();
 
-                    var row = {
-                            'id': @json($option->id),
-                            'admin_name': @json($option->admin_name),
-                            'sort_order': @json($option->sort_order),
-                            'swatch_value': @json($option->swatch_value),
-                            'swatch_value_url': @json($option->swatch_value_url),
-                            'notRequired': '',
-                            'locales': {}
-                        };
-
-                    @if (empty($option->label))
-                        this.isNullOptionChecked = true;
-                        this.idNullOption = @json($option->id);
-                        row['notRequired'] = true;
-                    @endif
-
-                    @foreach (app('Webkul\Core\Repositories\LocaleRepository')->all() as $locale)
-                        row['locales']['{{ $locale->code }}'] = @json($option->translate($locale->code)['label'] ?? '');
-                    @endforeach
-
-                    this.optionRows.push(row);
-                @endforeach
-
-                var this_this = this;
-
-                $('#type').on('change', function (e) {
-                    if (['select'].indexOf($(e.target).val()) === -1) {
-                        this_this.show_swatch = false;
-                    } else {
-                        this_this.show_swatch = true;
-                    }
-                });
+                this.activateToggleSwatch();
             },
 
             methods: {
+                activateToggleSwatch: function () {
+                    let self = this;
+
+                    $('#type').on('change', function (e) {
+                        if (['select'].indexOf($(e.target).val()) === -1) {
+                            self.show_swatch = false;
+                        } else {
+                            self.show_swatch = true;
+                        }
+                    });
+                },
+
+                getAttributeOptions: function () {
+                    let self = this;
+
+                    axios.get(`${this.src}?page=${this.optionPage}`).then(function (response) {
+                        let options = response.data.data;
+
+                        if (response.data.current_page === response.data.last_page) {
+                            self.loadMore = false;
+                        }
+
+                        options.forEach((option) => {
+                            self.optionRowCount++;
+
+                            let row = {
+                                'id': option.id,
+                                'admin_name': option.admin_name,
+                                'sort_order': option.sort_order,
+                                'swatch_value': option.swatch_value,
+                                'swatch_value_url': option.swatch_value_url,
+                                'notRequired': '',
+                                'locales': {},
+                                'isNew': false,
+                                'isDelete': false,
+                            };
+
+                            if (option.label) {
+                                self.isNullOptionChecked = true;
+                                self.idNullOption = option.id;
+                                row['notRequired'] = true;
+                            }
+
+                            option.translations.forEach((translation) => {
+                                row['locales'][translation.locale] = translation.label ?? '';
+                            });
+
+                            self.optionRows.push(row);
+                        });
+                    });
+                },
+
+                loadMoreOptions: function () {
+                    this.optionPage++;
+
+                    this.getAttributeOptions();
+                },
+
                 addOptionRow: function (isNullOptionRow) {
                     const rowCount = this.optionRowCount++;
                     const id = 'option_' + rowCount;
-                    let row = {'id': id, 'locales': {}};
+                    let row = {'id': id, 'locales': {}, 'isNew': true, 'isDelete': false};
 
-                    @foreach (app('Webkul\Core\Repositories\LocaleRepository')->all() as $locale)
-                        row['locales']['{{ $locale->code }}'] = '';
-                    @endforeach
+                    this.allLocales.forEach((locale) => {
+                        row['locales'][locale.code] = '';
+                    });
 
                     row['notRequired'] = '';
 
@@ -491,8 +538,31 @@
                         this.isNullOptionChecked = false;
                     }
 
-                    const index = this.optionRows.indexOf(row)
-                    Vue.delete(this.optionRows, index);
+                    const index = this.optionRows.indexOf(row);
+
+                    if (this.optionRows[index].isNew) {
+                        this.hardDeleteNewRow(index);
+                    } else {
+                        this.softDeleteExistingRow(index);
+                    }
+                },
+
+                hardDeleteNewRow: function (rowIndex) {
+                    Vue.delete(this.optionRows, rowIndex);
+                },
+
+                softDeleteExistingRow: function (rowIndex) {
+                    let self = this;
+
+                    this.optionRows[rowIndex].isDelete = true;
+
+                    let requiredKeys = ['admin_name', 'sort_order'];
+
+                    requiredKeys.forEach((key) => {
+                        if (self.optionRows[rowIndex][key] === undefined || self.optionRows[rowIndex][key] === '') {
+                            self.optionRows[rowIndex][key] = '0';
+                        }
+                    });
                 },
 
                 adminName: function (row) {
@@ -507,27 +577,14 @@
                     return 'options[' + row.id + '][sort_order]';
                 },
 
-                getOptionValidation: (row, localeCode) => {
+                getOptionValidation: function (row, localeCode) {
                     if (row.notRequired === true) {
                         return '';
                     }
 
-                    return ('{{ app()->getLocale() }}' === localeCode) ? 'required' : '';
-                }
+                    return (this.appLocale === localeCode) ? 'required' : '';
+                },
             },
-
-            watch: {
-                isNullOptionChecked: function (val) {
-                    if (val) {
-                        if (! this.idNullOption) {
-                            this.addOptionRow(true);
-                        }
-                    } else if(this.idNullOption !== null && typeof this.idNullOption !== 'undefined') {
-                        const row = this.optionRows.find(optionRow => optionRow.id === this.idNullOption);
-                        this.removeRow(row);
-                    }
-                }
-            }
         });
     </script>
 @endpush
diff --git a/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php b/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php
index 1c0301567..0eee43efb 100755
--- a/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php
+++ b/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php
@@ -2,20 +2,19 @@
 
 namespace Webkul\Attribute\Http\Controllers;
 
-use Illuminate\Support\Facades\Event;
 use Webkul\Attribute\Repositories\AttributeRepository;
 
 class AttributeController extends Controller
 {
     /**
-     * Contains route related configuration
+     * Contains route related configuration.
      *
      * @var array
      */
     protected $_config;
 
     /**
-     * AttributeRepository object
+     * Attribute repository instance.
      *
      * @var \Webkul\Attribute\Repositories\AttributeRepository
      */
@@ -71,7 +70,7 @@ class AttributeController extends Controller
 
         $data['is_user_defined'] = 1;
 
-        $attribute = $this->attributeRepository->create($data);
+        $this->attributeRepository->create($data);
 
         session()->flash('success', trans('admin::app.response.create-success', ['name' => 'Attribute']));
 
@@ -91,6 +90,19 @@ class AttributeController extends Controller
         return view($this->_config['view'], compact('attribute'));
     }
 
+    /**
+     * Get attribute options associated with attribute.
+     *
+     * @param  int  $id
+     * @return \Illuminate\View\View
+     */
+    public function getAttributeOptions($id)
+    {
+        $attribute = $this->attributeRepository->findOrFail($id);
+
+        return $attribute->options()->paginate(50);
+    }
+
     /**
      * Update the specified resource in storage.
      *
@@ -105,7 +117,7 @@ class AttributeController extends Controller
             'type'       => 'required',
         ]);
 
-        $attribute = $this->attributeRepository->update(request()->all(), $id);
+        $this->attributeRepository->update(request()->all(), $id);
 
         session()->flash('success', trans('admin::app.response.update-success', ['name' => 'Attribute']));
 
@@ -131,7 +143,7 @@ class AttributeController extends Controller
                 session()->flash('success', trans('admin::app.response.delete-success', ['name' => 'Attribute']));
 
                 return response()->json(['message' => true], 200);
-            } catch(\Exception $e) {
+            } catch (\Exception $e) {
                 session()->flash('error', trans('admin::app.response.delete-failed', ['name' => 'Attribute']));
             }
         }
@@ -140,7 +152,7 @@ class AttributeController extends Controller
     }
 
     /**
-     * Remove the specified resources from database
+     * Remove the specified resources from database.
      *
      * @return \Illuminate\Http\Response
      */
diff --git a/packages/Webkul/Attribute/src/Repositories/AttributeRepository.php b/packages/Webkul/Attribute/src/Repositories/AttributeRepository.php
index 0eba53f4e..953c22159 100755
--- a/packages/Webkul/Attribute/src/Repositories/AttributeRepository.php
+++ b/packages/Webkul/Attribute/src/Repositories/AttributeRepository.php
@@ -2,16 +2,15 @@
 
 namespace Webkul\Attribute\Repositories;
 
-use Webkul\Core\Eloquent\Repository;
+use Illuminate\Container\Container as App;
 use Illuminate\Support\Facades\Event;
 use Webkul\Attribute\Repositories\AttributeOptionRepository;
-use Illuminate\Container\Container as App;
-use Illuminate\Support\Str;
+use Webkul\Core\Eloquent\Repository;
 
 class AttributeRepository extends Repository
 {
     /**
-     * AttributeOptionRepository object
+     * Attribute option repository instance.
      *
      * @var \Webkul\Attribute\Repositories\AttributeOptionRepository
      */
@@ -26,24 +25,25 @@ class AttributeRepository extends Repository
     public function __construct(
         AttributeOptionRepository $attributeOptionRepository,
         App $app
-    )
-    {
+    ) {
         $this->attributeOptionRepository = $attributeOptionRepository;
 
         parent::__construct($app);
     }
 
     /**
-     * Specify Model class name
+     * Specify model class name.
      *
      * @return mixed
      */
-    function model()
+    public function model()
     {
         return 'Webkul\Attribute\Contracts\Attribute';
     }
 
     /**
+     * Create attribute.
+     *
      * @param  array  $data
      * @return \Webkul\Attribute\Contracts\Attribute
      */
@@ -73,6 +73,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Update attribute.
+     *
      * @param  array  $data
      * @param  int $id
      * @param  string  $attribute
@@ -88,36 +90,36 @@ class AttributeRepository extends Repository
 
         $attribute->update($data);
 
-        $previousOptionIds = $attribute->options()->pluck('id');
-
         if (in_array($attribute->type, ['select', 'multiselect', 'checkbox'])) {
             if (isset($data['options'])) {
                 foreach ($data['options'] as $optionId => $optionInputs) {
-                    if (Str::contains($optionId, 'option_')) {
+                    $isNew = $optionInputs['isNew'] == 'true' ? true : false;
+
+                    if ($isNew) {
                         $this->attributeOptionRepository->create(array_merge([
                             'attribute_id' => $attribute->id,
                         ], $optionInputs));
                     } else {
-                        if (is_numeric($index = $previousOptionIds->search($optionId))) {
-                            $previousOptionIds->forget($index);
-                        }
+                        $isDelete = $optionInputs['isDelete'] == 'true' ? true : false;
 
-                        $this->attributeOptionRepository->update($optionInputs, $optionId);
+                        if ($isDelete) {
+                            $this->attributeOptionRepository->delete($optionId);
+                        } else {
+                            $this->attributeOptionRepository->update($optionInputs, $optionId);
+                        }
                     }
                 }
             }
         }
 
-        foreach ($previousOptionIds as $optionId) {
-            $this->attributeOptionRepository->delete($optionId);
-        }
-
         Event::dispatch('catalog.attribute.update.after', $attribute);
 
         return $attribute;
     }
 
     /**
+     * Delete attribute.
+     *
      * @param  int  $id
      * @return void
      */
@@ -131,6 +133,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Validate user input.
+     *
      * @param  array  $data
      * @return array
      */
@@ -152,6 +156,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Get filter attributes.
+     *
      * @return array
      */
     public function getFilterAttributes()
@@ -160,7 +166,8 @@ class AttributeRepository extends Repository
     }
 
     /**
-     * 
+     * Get product default attributes.
+     *
      * @param  array  $codes
      * @return array
      */
@@ -189,6 +196,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Get attribute by code.
+     *
      * @param  string  $code
      * @return \Webkul\Attribute\Contracts\Attribute
      */
@@ -204,6 +213,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Get family attributes.
+     *
      * @param  \Webkul\Attribute\Contracts\AttributeFamily  $attributeFamily
      * @return \Webkul\Attribute\Contracts\Attribute
      */
@@ -219,6 +230,8 @@ class AttributeRepository extends Repository
     }
 
     /**
+     * Get partials.
+     *
      * @return array
      */
     public function getPartial()
@@ -227,13 +240,13 @@ class AttributeRepository extends Repository
 
         $trimmed = [];
 
-        foreach($attributes as $key => $attribute) {
-            if ($attribute->code != 'tax_category_id'
-                && (
-                    $attribute->type == 'select'
+        foreach ($attributes as $key => $attribute) {
+            if (
+                $attribute->code != 'tax_category_id'
+                && ($attribute->type == 'select'
                     || $attribute->type == 'multiselect'
-                    || $attribute->code == 'sku'
-            )) {
+                    || $attribute->code == 'sku')
+            ) {
                 if ($attribute->options()->exists()) {
                     array_push($trimmed, [
                         'id'          => $attribute->id,
@@ -253,10 +266,9 @@ class AttributeRepository extends Repository
                         'options'     => null,
                     ]);
                 }
-
             }
         }
 
         return $trimmed;
     }
-}
\ No newline at end of file
+}
diff --git a/packages/Webkul/Core/src/Http/Middleware/SecureHeaders.php b/packages/Webkul/Core/src/Http/Middleware/SecureHeaders.php
index 64c2085cf..248a14af2 100644
--- a/packages/Webkul/Core/src/Http/Middleware/SecureHeaders.php
+++ b/packages/Webkul/Core/src/Http/Middleware/SecureHeaders.php
@@ -55,6 +55,10 @@ class SecureHeaders
      */
     private function removeUnwantedHeaders()
     {
+        if (headers_sent()) {
+            return;
+        }
+
         foreach ($this->unwantedHeaderList as $header) {
             header_remove($header);
         }
diff --git a/tests/functional/Admin/Catalog/AttributeCest.php b/tests/functional/Admin/Catalog/AttributeCest.php
index d1a203d5b..ef4d9a5a9 100644
--- a/tests/functional/Admin/Catalog/AttributeCest.php
+++ b/tests/functional/Admin/Catalog/AttributeCest.php
@@ -7,6 +7,12 @@ use Webkul\Attribute\Models\Attribute;
 
 class AttributeCest
 {
+    /**
+     * Test attribute index page.
+     *
+     * @param  FunctionalTester  $I
+     * @return void
+     */
     public function testIndex(FunctionalTester $I): void
     {
         $attribute = $I->have(Attribute::class);
@@ -21,6 +27,12 @@ class AttributeCest
         $I->see($attribute->admin_name, '//script[@type="text/x-template"]');
     }
 
+    /**
+     * Attribute creation test.
+     *
+     * @param  FunctionalTester  $I
+     * @return void
+     */
     public function testCreate(FunctionalTester $I): void
     {
         $I->loginAsAdmin();
@@ -40,6 +52,12 @@ class AttributeCest
         $I->seeRecord(Attribute::class, $testData);
     }
 
+    /**
+     * Attribute updation test.
+     *
+     * @param  FunctionalTester  $I
+     * @return void
+     */
     public function testEdit(FunctionalTester $I): void
     {
         $attribute = $I->have(Attribute::class, ['use_in_flat' => 0]);
@@ -66,11 +84,11 @@ class AttributeCest
     }
 
     /**
-     * @param FunctionalTester $I
+     * Fill form.
      *
-     * @param bool             $skipType
-     *
-     * @return array with the test-data
+     * @param  FunctionalTester  $I
+     * @param  bool  $skipType
+     * @return array
      */
     private function fillForm(FunctionalTester $I, bool $skipType = false): array
     {